/* ==========================================================================
   AREAS WE SERVE — shared compact tile grid, used on every service page.
   Content (h3/p) is authored per-page to match that page's own service;
   only this layout/hover styling is shared.
   ========================================================================== */

.area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .area-grid { grid-template-columns: repeat(5, 1fr); } }

.area-tile {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: 1.15rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.area-tile .area-ico {
  font-size: 1.4rem;
  display: inline-block;
  margin-bottom: 0.5rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.area-tile h3 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-strong);
  margin-bottom: 0.3rem;
}
.area-tile p {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.area-tile::after {
  content: '';
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 0; height: 3px; border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--red-600), var(--rose-500));
  transition: width 0.35s ease;
}
.area-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(220, 38, 38, 0.3);
}
.area-tile:hover .area-ico { transform: scale(1.2) rotate(-8deg); }
.area-tile:hover::after { width: 50%; }

@media (prefers-reduced-motion: reduce) {
  .area-tile, .area-tile .area-ico { transition: none !important; }
  .area-tile:hover { transform: none !important; }
  .area-tile:hover .area-ico { transform: none !important; }
}