/* Home hero image sequence.
   Kept OUT of style.css: that file is the compiled Tailwind bundle carried over
   verbatim from the original build, and JIT means hand-written rules there would
   be lost the next time it is regenerated.
   Slide 1 carries .is-active in the HTML, so with JS off (or blocked) the hero is
   a single static image exactly as before — never a stack of three or a blank box. */
.reno-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
}
.reno-hero-slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reno-hero-slide { transition: none; }
}

/* The hero overlay in style.css ramps LEFT-TO-RIGHT (0.85 -> 0.6 -> 0.3 alpha),
   which is right for a wide crop where the copy sits in the dark left third.
   On a phone the copy spans the full width, so its right-hand end lands on the
   0.3 stop — measured white-on-bright and clearly washed out on the lighter
   images. Below md, wash the whole hero evenly instead. hero.css is enqueued
   with style.css as a dependency, so it loads after and wins at equal specificity. */
@media (max-width: 767px) {
  .hero-overlay {
    background: linear-gradient(to bottom, rgba(21, 55, 35, .80), rgba(21, 55, 35, .92));
  }
}