/* ==========================================================================
   MONT — HERO
   Every page (Home, About, Services, Making Room, Blog, Contact) uses the
   same hero shell with a warm watercolor-wash background. Swap the
   background via the "Hero background image" field on each page in the
   dashboard — falls back to a CSS gradient approximation when no image is set.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--gradient-hero);
  background-size: cover;
  background-position: center;
  padding-block: clamp(3rem, 9vw, 6.5rem);
  overflow: hidden;
}

.hero__inner {
  max-width: 780px;
}

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 1em;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero__pill--rose { background: #FAD6CB; color: #BC5331}
.hero__pill--olive { background: #E9E5B3; color: #6C6940}

.hero h1 {
  font-weight: 400;
  margin-bottom: 0.6em;
}

.hero__subheading {
  font-size: 1.1rem;
  color: var(--color-ink);
  max-width: 620px;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Compact hero variant used on interior pages (Blog, Contact, About, etc.)
   where the heading sits alone without the intro pills. */
.hero--simple h1 { margin-bottom: 0.4em; }
.hero--simple .hero__subheading { margin-bottom: 0; font-size: 1.15rem; }