/* ─── Image / overlay band ────────────────────────────────────────────
   Generalizes the hero --image treatment to ANY .hzo-section: a full-bleed
   background photo + brand-deep scrim, with light text (like --dark). Set the
   section's background-image inline; the scrim keeps text readable over any
   photo. Tune scrim strength with --hzo-section-scrim (default 60%) — e.g.
   style="--hzo-section-scrim:40%" for a lighter wash.
   Also emitted by the [hzo_image_band] shortcode (image-band.php) as a
   composable band root — .hzo-image-band.hzo-section--image — using this same
   inline background-image / --hzo-section-scrim contract. */
.hzo-section--image {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.hzo-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--brand-deep) var(--hzo-section-scrim, 60%), transparent);
}
.hzo-section--image > * { position: relative; } /* lift content above the scrim */
.hzo-section--image h1, .hzo-section--image h2, .hzo-section--image h3,
.hzo-section--image h4, .hzo-section--image h5, .hzo-section--image h6,
.hzo-section--image .hzo-eyebrow, .hzo-section--image .hzo-display { color: var(--heading-color-on-dark, #fff) !important; }
.hzo-section--image p, .hzo-section--image .hzo-subtitle { color: rgba(255, 255, 255, 0.9); }
.hzo-section--image a:not(.hzo-btn) { color: #fff; }