/* DESKTOP-HERO-LOOP-V3-20261025: desktop video only; mobile still artwork remains unchanged. */
.hero[data-hero-motion] > video.desktop-hero-loop {
  display: none !important;
  pointer-events: none !important;
}
.hero .hero-motion-toggle,
.hero [class*="hero-motion-toggle"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media screen and (min-width: 761px) {
  .hero[data-hero-motion] > video.desktop-hero-loop {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: -3 !important;
    background: #071f37 !important;
  }
  .hero[data-hero-motion].desktop-video-ready > img.hero-photo {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .hero[data-hero-motion] > picture.hero-mobile-art-photo {
    display: none !important;
  }
}
@media screen and (max-width: 760px) {
  .hero[data-hero-motion] > video.desktop-hero-loop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .hero[data-hero-motion] > img.hero-photo {
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* Keep the stronger Perfect Patios logo wash tightly contained behind the logo, not over the patio/service scene. */
body.patios.home header a.brand::before {
  inset: -7px -15px !important;
  background: radial-gradient(ellipse at 47% 50%, rgba(255,255,255,.98) 0%, rgba(255,249,226,.91) 35%, rgba(225,242,255,.46) 58%, transparent 78%) !important;
  filter: blur(8px) !important;
  border-radius: 52% !important;
}
@media screen and (max-width: 760px) {
  body.patios.home header a.brand::before {
    inset: -4px -9px !important;
    filter: blur(6px) !important;
    background: radial-gradient(ellipse at 47% 50%, rgba(255,255,255,.99) 0%, rgba(255,249,226,.94) 38%, rgba(225,242,255,.48) 58%, transparent 76%) !important;
  }
}