/* ============================================================
   Bright Roots Wellbeing — Stage Hero
   HTML/CSS rebuild of the "every stage of life" banner.
   Loaded after style.css via custom_head is not required; this
   file is referenced directly from the homepage section comment.
   (Imported through style.css @import below.)
   ============================================================ */

.brw-stagehero { background: var(--surface); text-align: center; padding: 54px 0 12px; }
.brw-stagehero .brw-wrap { max-width: 1000px; }
.brw-stagehero-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700; color: #1f3a5f; line-height: 1.08; margin: 0 0 .22em;
  font-size: clamp(2rem, 5.2vw, 3.6rem); }
.brw-stagehero-sub { color: #4a4a48; font-size: clamp(1.05rem, 2.2vw, 1.45rem); margin: 0 0 34px; }
.brw-heart { color: #d98a92; }

.brw-stagehero-photo { width: 100%; aspect-ratio: 1857 / 432;
  background: var(--surface) url('/uploads/brightroots-home-hero-0d6f059e.jpg') center 45% / cover no-repeat; }

.brw-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  max-width: 1000px; margin: 40px auto 6px; }
.brw-stage { text-align: center; }
.brw-stage-ico { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; color: #1f3a5f; }
.brw-stage-ico--lilac  { background: #e7e1f2; }
.brw-stage-ico--yellow { background: #f6e7b6; }
.brw-stage-ico--green  { background: #cfe1c1; }
.brw-stage-ico--blue   { background: #cfe4ee; }
.brw-stage h3 { font-family: var(--font-head); color: #1f3a5f; font-size: 1.06rem; margin: 0 0 .3em; }
.brw-stage p { color: #4a4a48; font-size: .9rem; margin: 0; line-height: 1.4; }

.brw-stagehero-foot { font-family: 'Dancing Script', 'Segoe Script', cursive; color: #1f3a5f;
  font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 16px 0 4px; }

@media (max-width: 720px) {
  .brw-stages { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; max-width: 420px; }
  .brw-stages .brw-stage:last-child { grid-column: 1 / -1; }
}