/* R7: official-logo background watermarks, never over photographs.
   The approved homepage keeps its unchanged R6 stylesheet and appearance. */
.page-logo-watermark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: max(20px, calc((100% - 1180px) / 2));
  width: min(540px, 42vw);
  aspect-ratio: 804 / 581;
  transform: translateY(-50%);
  background: url("https://assets.cdn.filesafe.space/cngY16os978TmprBXKVV/media/6aec86e4d15674a4826918c7.png") center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
  user-select: none;
}

/* Keep the complete original content/photography above the decorative layer. */
:is(.wh-hero, .septic-hero, .drain-hero, .utility-hero, .construction-hero, .expansion-hero, .expansion-directory-hero) > .site-shell {
  position: relative;
  z-index: 2;
}

/* The optional directory has a full-width title, so its mark sits farther right. */
.expansion-directory-hero { position: relative; overflow: hidden; }
.expansion-directory-hero > .page-logo-watermark {
  left: auto;
  right: max(20px, calc((100% - 1180px) / 2));
  width: min(440px, 37vw);
  opacity: .08;
}

/* Older service layouts stack earlier than the added service/city layouts. */
@media (max-width: 1060px) {
  :is(.water-page, .septic-page, .drain-page, .utility-page, .construction-page) .page-logo-watermark {
    top: clamp(260px, 32vw, 360px);
    left: 50%;
    width: min(540px, 86vw);
    transform: translate(-50%, -50%);
    opacity: .12;
  }
}

@media (max-width: 800px) {
  .expansion-page .page-logo-watermark {
    top: clamp(220px, 43vw, 300px);
    left: 50%;
    right: auto;
    width: min(540px, 86vw);
    transform: translate(-50%, -50%);
    opacity: .12;
  }
  .expansion-directory-hero > .page-logo-watermark {
    top: 50%;
    left: auto;
    right: 10px;
    width: min(340px, 68vw);
    transform: translateY(-50%);
    opacity: .07;
  }
}

@media print { .page-logo-watermark { display: none; } }