/* YogaDom hero: keep the photograph clear; give the copy its own calm space. */
.hero { min-height: min(820px, 90vh); background: var(--cream); }
.hero-bg { left: 42%; background: var(--cream); }
.hero-bg img { object-position: 50% 50%; }
.hero-overlay {
  background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 39%, rgba(250,246,238,.88) 43%, transparent 57%);
}
.hero-content {
  width: 46%; max-width: 540px;
  margin-left: max(24px, calc((100vw - 1180px) / 2)); margin-right: auto;
  padding: 3.5rem 0;
}
.hero-content h1 { font-size: clamp(2.8rem, 5.2vw, 4.75rem); line-height: 1.08; max-width: 9ch; }
.hero-content > p:not(.kicker) { color: var(--moss); max-width: 400px; }
.hero-actions .btn { justify-content: center; min-height: 48px; }
.hero-actions .btn-primary { background: #AA6045; border-color: #AA6045; }
.hero-actions .btn-primary:hover { background: var(--clay-dark); }
.hero-actions .btn-ghost { color: var(--moss-dark); border: 1px solid var(--moss); background: transparent; }
.hero-actions .btn-ghost:hover, .hero-actions .btn-ghost:focus-visible { color: var(--lark); background: var(--moss); }
.hero-stat h3 { color: var(--moss); }
.hero-stat p { color: var(--stone); }
@media (max-width: 768px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-bg { position: relative; inset: auto; width: 100%; height: clamp(280px, 78vw, 440px); }
  .hero-bg img { object-position: center 48%; }
  .hero-overlay { top: 0; bottom: auto; height: clamp(280px, 78vw, 440px); background: linear-gradient(180deg, transparent 82%, var(--cream) 100%); }
  .hero-content { width: 100%; max-width: 540px; margin: 0 auto; padding: 0 24px 2.5rem; }
  .hero-content h1 { font-size: clamp(2.35rem, 9.5vw, 3.25rem); max-width: none; }
  .hero-content .kicker { margin: .5rem 0 1rem; font-size: .65rem; letter-spacing: .14em; }
  .hero-content > p:not(.kicker) { margin: 1rem 0 1.5rem; font-size: 1rem; }
  .hero-actions { gap: .75rem; }
  .hero-stats { margin-top: 1.75rem; padding-top: 1.25rem; gap: 2rem; }
}