/* One viewport-sized illustration, independent of page length and open panels.
   Keep it outside scrolling/animated content containers and behind all controls.
   Large viewport units avoid recropping when a mobile browser toolbar retracts.
   Older engines without :has use the script-marked fallback below. */
@supports selector(body:has(.hero)) {
html:has(body :is(.hero, .form-wrap, .page, .services-wrap, .bg-photo-page)) {
  scrollbar-gutter: stable;
}
body:has(:is(.hero, .form-wrap, .page, .services-wrap, .bg-photo-page)) {
  isolation: isolate;
}
body:has(:is(.hero, .form-wrap, .page, .services-wrap, .bg-photo-page))::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background: url("../img/landing-bg.png") center center / cover no-repeat;
  opacity: .24;
  z-index: -1;
  pointer-events: none;
  animation: none;
  transition: none;
  transform: none;
}
html[data-theme="dark"] body:has(:is(.hero, .form-wrap, .page, .services-wrap, .bg-photo-page))::before {
  opacity: .16;
}
/* Disable the old element-sized copies, including nested page wrappers. */
:is(.hero, .form-wrap, .page, .services-wrap, .bg-photo-page)::before {
  content: none;
  background-image: none;
}
}

/* Older browsers cannot match :has. The shared script marks only photo pages,
   preserving the same fixed, non-interactive layer without depending on :has. */
@supports not selector(body:has(.hero)) {
  body.cs-photo-background { isolation: isolate; }
  body.cs-photo-background::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    background: url("../img/landing-bg.png") center center / cover no-repeat;
    opacity: .24;
    z-index: -1;
    pointer-events: none;
  }
  html[data-theme="dark"] body.cs-photo-background::before { opacity: .16; }
  body.cs-photo-background :is(.hero, .form-wrap, .page, .services-wrap, .bg-photo-page)::before {
    content: none;
    background-image: none;
  }
}