/* One shared card system for the Service Areas sections only. */
:root {
  --area-card-radius: 18px;
  --area-card-height: 15.3125rem;
  --area-card-border: rgba(75, 42, 84, 0.16);
  --area-card-border-hover: rgba(227, 47, 135, 0.42);
  --area-card-shadow: 0 14px 34px rgba(62, 31, 62, 0.08);
  --area-card-shadow-hover: 0 22px 46px rgba(62, 31, 62, 0.16);
}

/* Identical grid behaviour on Maid, Deep Cleaning and Commercial pages. */
:is(.area-grid, .deep-area-grid, .commercial-area-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: var(--area-card-height) !important;
  align-items: stretch !important;
  gap: 24px !important;
}

/* Identical card dimensions, colour, spacing and interaction.
   Intentionally targets only cards carrying the shared service-area class. */
:is(.area-grid, .deep-area-grid, .commercial-area-grid) > .service-area-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: var(--area-card-height) !important;
  margin: 0 !important;
  padding: 32px 34px !important;
  border: 1px solid var(--area-card-border) !important;
  border-radius: var(--area-card-radius) !important;
  background: #fff !important;
  box-shadow: var(--area-card-shadow) !important;
  color: #35133f !important;
  text-align: left !important;
  overflow: hidden !important;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease !important;
}



:is(.area-grid, .deep-area-grid, .commercial-area-grid) > .service-area-card h3 {
  width: 100% !important;
  min-height: 2.1em !important;
  margin: 0 0 14px !important;
  color: #35133f !important;
  font-family: "DM Serif Display", "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.55rem, 1.7vw, 2rem) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

:is(.area-grid, .deep-area-grid, .commercial-area-grid) > .service-area-card p {
  width: 100% !important;
  margin: 0 !important;
  color: #7b6877 !important;
  font-size: 1.04rem !important;
  line-height: 1.55 !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(.area-grid, .deep-area-grid, .commercial-area-grid) > .service-area-card:hover {
    transform: translateY(-7px) !important;
    border-color: var(--area-card-border-hover) !important;
    box-shadow: var(--area-card-shadow-hover) !important;
  }
}

@media (max-width: 980px) {
  :is(.area-grid, .deep-area-grid, .commercial-area-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  :is(.area-grid, .deep-area-grid, .commercial-area-grid) {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
  }

  :is(.area-grid, .deep-area-grid, .commercial-area-grid) > .service-area-card {
    height: auto !important;
    min-height: 13.125rem !important;
    padding: 26px 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.area-grid, .deep-area-grid, .commercial-area-grid) > .service-area-card {
    transition: none !important;
  }

  :is(.area-grid, .deep-area-grid, .commercial-area-grid) > .service-area-card:hover {
    transform: none !important;
  }
}