/* ── Page Hero ────────────────────────────────────────────────────────────── */
/* Shared hero section for interior marketing pages (about, contact).          */
/* Uses CSS custom properties for per-page padding/heading size overrides.    */
/*                                                                              */
/* Usage:                                                                      */
/*   <section class="page-hero">                                               */
/*     <h1>Page Title</h1>                                                     */
/*     <p>Subtitle text</p>                                                    */
/*   </section>                                                                */

.page-hero {
  background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-surface) 100%);
  padding: var(--page-hero-padding, 64px 32px);
  text-align: center;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--page-hero-h1-size, var(--text-2xl));
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.page-hero p {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-hero { padding: 48px 20px; }
  .page-hero h1 { font-size: var(--text-xl); }
}