/* v0.8.7: photograph positioning and readability only; no page-layout changes. */
.home-page .about-scene img { object-position: 50% 50%; }
.home-page .about-scene::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(6,42,64,.96) 0%,rgba(6,42,64,.88) 37%,rgba(6,42,64,.32) 51%,transparent 68%); }
.home-page .financing-panel > img { object-position: 50% 50%; }
.city-hero-photo img[data-h30-photo] { object-position:50% 50%; }
.city-hero-photo img[data-h30-photo="portfolio-pool"] { object-position:62% 55%; }
.city-hero-photo img[data-h30-photo="about-patio"] { object-position:59% 50%; }
.service-photo img[data-h30-photo] { object-position:50% 50%; }
@media(max-width:760px){
  .home-page .about-scene::after{display:none;}
  .home-page .about-scene img{object-position:58% 53%;}
  .city-hero-photo img[data-h30-photo]{object-position:50% 50%;}
}

/* v0.8.7 — homepage hero contrast only. The Ross photograph is unchanged.
   Fade the overlay across the left text area rather than darkening the entire
   photo equally. The second gradient protects the lower benefits and arrow. */
.home-page .hero { background-color: #062a40; }
.home-page .hero-overlay {
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(4, 25, 40, .82) 0%,
      rgba(4, 25, 40, .74) 34%,
      rgba(4, 25, 40, .66) 52%,
      rgba(4, 25, 40, .18) 72%,
      rgba(4, 25, 40, 0) 100%),
    linear-gradient(0deg,
      rgba(4, 25, 40, .38) 0%,
      rgba(4, 25, 40, .24) 19%,
      rgba(4, 25, 40, 0) 48%);
}
.home-page .hero h1,
.home-page .hero .eyebrow,
.home-page .hero-copy,
.home-page .hero-proof { color: #fff; }
.home-page .hero h1,
.home-page .hero .eyebrow,
.home-page .hero-copy,
.home-page .hero-proof { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.home-page .hero-proof { font-weight: 600; }
.home-page .hero-proof > span { border-left-color: rgba(255, 255, 255, .50); }
/* A deeper orange keeps the hero button recognizable while making the
   existing white label more legible. No other site buttons are changed. */
.home-page .hero-cta {
  color: #fff;
  background: #c44710;
  border-color: rgba(255, 255, 255, .28);
  text-shadow: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.home-page .hero-cta:hover { background: #a5360b; }
.home-page .hero-cta:focus-visible,
.home-page .scroll-cue:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media(max-width:760px) {
  .home-page .hero-overlay {
    background:
      linear-gradient(90deg, rgba(4, 25, 40, .76) 0%, rgba(4, 25, 40, .70) 70%, rgba(4, 25, 40, .64) 100%),
      linear-gradient(0deg, rgba(4, 25, 40, .32) 0%, rgba(4, 25, 40, 0) 50%);
  }
  .home-page .hero .eyebrow { font-size: 11px; line-height: 1.55; }
  .home-page .hero-copy { font-size: 15px; line-height: 1.65; }
  .home-page .hero-proof { font-size: 11px; line-height: 1.4; }
  .home-page .hero-cta { font-size: 12px; min-height: 46px; }
}

@media(min-width:761px) and (max-width:1023px) {
  /* The fixed-width copy occupies more of a tablet; move the fade beyond it. */
  .home-page .hero-overlay {
    background:
      linear-gradient(90deg, rgba(4, 25, 40, .82) 0%, rgba(4, 25, 40, .72) 60%, rgba(4, 25, 40, .20) 85%, rgba(4, 25, 40, .04) 100%),
      linear-gradient(0deg, rgba(4, 25, 40, .38) 0%, rgba(4, 25, 40, .24) 19%, rgba(4, 25, 40, 0) 48%);
  }
}