/* ── Page Header — shared across all interior pages ─────────────────────── */
.page-header {
  padding-block: var(--space-16) var(--space-20);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-soft);
  position: relative;
  overflow: hidden;
}
/* Subtle decorative background for all page headers (not illustrated variant) */
.page-header:not(.page-header--illustrated)::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .03;
  pointer-events: none;
}
.page-header h1 {
  margin-bottom: var(--space-3);
}
/* Bare <p> in page-header (without .subheading) — same size for full
   consistency with the .subheading class used on other pages. */
.page-header > .container > p,
.page-header p.page-header__sub {
  font-size: var(--text-lg);
  color: var(--color-text-3);
  max-width: 560px;
  margin: var(--space-3) 0 0;
  line-height: var(--leading-relaxed);
}

/* ── Illustrated variant — 2-column grid with SVG visual ─────────────── */
/* Contact page uses this variant. Can be applied to any page header. */
.page-header--illustrated::after { display: none; }
.page-header--illustrated .page-header__grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--space-12);
  align-items: center;
}
.page-header__visual {
  display: flex;
  justify-content: center;
}
.page-header__visual svg {
  width: 100%;
  max-width: 160px;
  height: auto;
}

/* ── Variant: page-header that immediately precedes a full-bleed band ─── */
/* Use .page-header--flush when a blue ribbon or dark band follows directly */
.page-header--flush {
  border-bottom: none;
  padding-bottom: var(--space-20);
}

@media (max-width: 1024px) {
  .page-header--illustrated .page-header__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .page-header__visual { display: none; }
}
@media (max-width: 768px) {
  .page-header {
    padding-block: var(--space-10) var(--space-12);
  }
}
@media (max-width: 640px) {
  .page-header {
    padding-block: var(--space-8) var(--space-10);
  }
  .page-header--flush { padding-bottom: var(--space-12); }
}