/**
 * Shared card primitive — used by contact info/form cards and blog
 * post cards.
 */

.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-md);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.card--muted {
  background: var(--color-bg-muted);
  box-shadow: none;
}

.card--tint {
  background: var(--color-bg-tint);
  box-shadow: none;
}

.card-grid {
  display: grid;
  gap: var(--space-md);
}

/**
 * Numbered service card — used on the homepage services teaser and
 * the full Services overview page.
 */

.service-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--color-white);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px) scale(1.04);
  box-shadow: var(--shadow-lg);
}

.service-card__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-md);
}

.service-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tint);
  border: 1.5px solid var(--color-secondary);
  color: var(--color-primary-600);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  margin-bottom: var(--space-2xs);
}

.service-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h6);
  color: var(--color-heading);
}

.service-card__desc {
  color: var(--color-text-muted);
  font-size: var(--fs-eyebrow);
}

/**
 * Icon + title + description grid — used for service "Benefits /
 * Features" sections and the About page's "Why Choose Us" values.
 */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.benefit-card__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-tint);
  margin-bottom: var(--space-2xs);
}

.benefit-card__icon img {
  width: 26px;
  height: 26px;
}

.benefit-card__title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: var(--fs-h6);
}

.benefit-card__desc {
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 61.99rem) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 36rem) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}