.hero {
  padding-top: var(--space-16);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.hero-content .lead {
  max-width: 36rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero-meta {
  margin-top: var(--space-4);
}

.hero-meta .badge {
  margin-bottom: var(--space-2);
}

.hero-visual {
  max-width: 30rem;
  justify-self: center;
}

.section-header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-10);
}

.services-grid {
  align-items: stretch;
}

.service-card ul,
.health-card ul,
.consult-card ul,
.feature-list,
.booking-info ol,
.values-list {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  padding-left: 1.25rem;
}

.service-actions {
  margin-top: var(--space-4);
}

.service-actions-split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.services-footer {
  margin-top: var(--space-8);
  text-align: center;
}

.feature {
  background-color: var(--gray-50);
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.feature-grid-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.health-grid {
  align-items: stretch;
}

.values {
  background-color: var(--color-surface);
}

.values-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.values-list li + li {
  margin-top: var(--space-2);
}

.booking-grid {
  align-items: flex-start;
  gap: var(--space-8);
}

.booking-card {
  height: 100%;
}

.booking-links {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  padding-left: 1.25rem;
}

.booking-links li + li {
  margin-top: var(--space-1);
}

.small-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.blog-grid {
  align-items: stretch;
}

.blog-card .card-title {
  margin-bottom: var(--space-2);
}

@media (max-width: 960px) {
  .hero-grid,
  .feature-grid,
  .feature-grid-reverse,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: var(--space-12);
  }

  .hero-visual,
  .values-visual {
    order: -1;
  }
}

@media (max-width: 640px) {
  .hero-cta,
  .feature-actions {
    flex-direction: column;
    align-items: stretch;
  }
}