/* Dark banner at the top of every inner page (services, about, contact) —
   an eyebrow, a heading, and a lede paragraph. The home page has its own,
   much larger hero instead (see home.css). */

.page-hero {
  background: var(--color-panel);
  color: var(--color-panel-ink);
  padding: 72px 0 64px;
}

.page-hero h1 {
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  color: var(--color-panel-ink);
  margin-top: 16px;
  max-width: 640px;
}

.page-hero p {
  margin-top: 18px;
  max-width: 560px;
  color: var(--color-panel-ink-soft);
  font-size: 1.05rem;
}

/* Row of call / contact buttons under the intro paragraph */
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}