/* Service-page hero.
 *
 * The city and homepage heroes are full-bleed: a photo, a dark overlay at 0.61,
 * 200px of vertical padding and white type. The nine service pages were built
 * without any of it - no image, no overlay, zero padding - so their headline sat
 * on bare cream with the copy drifting in empty space.
 *
 * This applies the site's OWN existing hero pattern to them rather than
 * inventing a second one: same padding steps, same overlay opacity, same white
 * headline. The photo is the site's own service image; the per-service pictures
 * it also owns are only 500px wide and would be visibly soft stretched across a
 * hero, so the 1600px one is used.
 *
 * Page content, markup order and URLs are untouched - this is presentation only.
 */

.rsdr-hero {
  background-image: var(--rsdr-hero-img);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 200px 0 200px 0;
}

/* The city heroes darken the photo with a real overlay element. These sections
   have no such child, so the overlay is drawn as a pseudo-element at the same
   opacity to keep the two treatments identical. */
.rsdr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e1810;
  opacity: .61;
  pointer-events: none;
}

/* keep the real content above the overlay */
.rsdr-hero > * { position: relative; z-index: 1; }

/* White type belongs ONLY to the copy column. Whitening the whole hero turned
   the "Get A Free Quote" heading white against the form's cream card, which made
   it unreadable, and left "Quick Service Request" black on the dark photo. The
   two columns are tagged separately so each gets the right treatment. */
.rsdr-hero .rsdr-hero-copy h1,
.rsdr-hero .rsdr-hero-copy h2,
.rsdr-hero .rsdr-hero-copy h3,
.rsdr-hero .rsdr-hero-copy h4,
.rsdr-hero .rsdr-hero-copy h5,
.rsdr-hero .rsdr-hero-copy h6,
.rsdr-hero .rsdr-hero-copy p,
.rsdr-hero .rsdr-hero-copy li,
.rsdr-hero .rsdr-hero-copy .elementor-heading-title {
  /* Elementor writes a per-element colour rule for each heading, which outranks
     a plain class selector - "Quick Service Request" stayed black on the photo
     until this was forced. Safe to force here because only the copy columns
     carry this class; the form card is deliberately left untagged and keeps its
     dark text on its own cream background. */
  color: #fff !important;
}

/* The orange initial letters and the orange strapline carry their own inline
   colour, which already beats these rules on specificity. Nothing to do: leave
   them exactly as the client set them. */

/* The form card keeps its own light background, so its text stays dark. */
.rsdr-hero .rsdr-hero-card,
.rsdr-hero .rsdr-hero-card h1,
.rsdr-hero .rsdr-hero-card h2,
.rsdr-hero .rsdr-hero-card h3,
.rsdr-hero .rsdr-hero-card h4,
.rsdr-hero .rsdr-hero-card h5,
.rsdr-hero .rsdr-hero-card p,
.rsdr-hero .rsdr-hero-card label,
.rsdr-hero .rsdr-hero-card .elementor-heading-title {
  color: #1e1810;
}

@media (max-width: 1024px) {
  .rsdr-hero { padding: 160px 50px 110px 50px; }
}

@media (max-width: 767px) {
  .rsdr-hero { padding: 150px 25px 100px 25px; }
}