/* =============================================================
   FMH Warm-wash hero treatment (added 2026-05-10)
   Codified backdrop pattern from the ProfitMargin winner.

   Constraint: foreground content MUST stay inside a 36-character
   max-width column so headlines stay legible against the active
   background.
   ============================================================= */

.fmh-warm-wash {
  position: relative;
  background: var(--fmh-grad-warm);
  overflow: hidden;
  isolation: isolate;
  padding: 96px 64px;
}

.fmh-warm-wash > * { position: relative; z-index: 1; }
.fmh-warm-wash > .fmh-content {
  max-width: 36ch;       /* enforced legibility column */
  text-wrap: balance;
}

/* Decorative sketch rings — drift in negative space.
   Sizes 80–220px; positioned via CSS variables so each instance
   can override the layout if needed.                            */
.fmh-warm-wash__rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fmh-warm-wash__rings span {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--fmh-sketch-line);
  background: var(--fmh-sketch-fill);
}
/* default 5-ring layout — override by passing inline style on the
   span if you need a different composition */
.fmh-warm-wash__rings span:nth-child(1) { width: 220px; height: 220px; top: -60px; right: -40px; }
.fmh-warm-wash__rings span:nth-child(2) { width: 140px; height: 140px; top: 40%;   right: 12%;  }
.fmh-warm-wash__rings span:nth-child(3) { width:  80px; height:  80px; bottom: 14%; right: 30%; }
.fmh-warm-wash__rings span:nth-child(4) { width: 180px; height: 180px; bottom:-50px; left: 14%; }
.fmh-warm-wash__rings span:nth-child(5) { width: 100px; height: 100px; top: 16%;   left: 8%;   border-style: dashed; }

/* cream-wash — subtle vertical wash for testimonial sections */
.fmh-cream-wash {
  background: var(--fmh-grad-cream);
}