/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--color-white);
  text-align: center;
  padding-block: clamp(4rem, 3rem + 6vw, 7.5rem);
  background:
    linear-gradient(rgba(8, 47, 34, 0.78), rgba(11, 63, 45, 0.82)),
    url("../../assets/images/hero.jpg") center 30% / cover no-repeat,
    var(--color-green-700);
  overflow: hidden;
}
.hero h1 { color: var(--color-white); max-width: 18ch; margin-inline: auto; }
.hero-lead { margin-block: var(--space-lg) var(--space-xl); font-size: var(--text-md); color: rgba(255, 255, 255, 0.9); }
.hero-rule { width: 64px; height: 3px; background: var(--color-gold-500); margin: var(--space-lg) auto 0; border: 0; }

/* ---------- Intro ---------- */
.intro { padding-block: var(--space-3xl) var(--space-xl); }
.intro p { color: var(--color-text-muted); }
.intro p:first-child { color: var(--color-primary); font-size: var(--text-md); font-family: var(--font-heading); }

/* ---------- Content blocks ---------- */
.content-block h2 { margin-bottom: var(--space-lg); }
.content-block .btn { margin-top: var(--space-lg); }
.appointments .media-frame { aspect-ratio: 4 / 5; max-width: 420px; }

.why .media-frame { aspect-ratio: 4 / 5; max-width: 420px; }
.why .media-frame img { object-position: center 70%; }

@media (min-width: 768px) {
  .why .media-frame { justify-self: end; width: 100%; }
}

/* ---------- Final CTA ---------- */
.cta { text-align: center; }
.cta h2 { margin-bottom: var(--space-lg); }
.cta .btn { margin-top: var(--space-xl); }

/* ---------- FAQ teaser ---------- */
.faq-more { text-align: center; margin-top: var(--space-xl); }