/* APPROVED-MOBILE-HERO-ART-20261024. Desktop photography, video, and brand layers stay unchanged. */
body[data-mobile-hero] .hero-mobile-art-photo,
body[data-mobile-hero] .hero-mobile-design { display: none; }

@media screen and (max-width: 760px) {
  html body[data-mobile-hero] .hero[data-hero-motion] > img.hero-photo {
    display: none !important;
  }
  html body[data-mobile-hero] .hero[data-hero-motion] > picture.hero-mobile-art-photo {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    z-index: 0 !important;
  }
  html body[data-mobile-hero] .hero-mobile-art-photo > img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: scale(1.025) !important;
    transform-origin: 50% 50% !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }
  html body[data-mobile-hero="patios"] .hero-mobile-art-photo > img {
    object-position: 75% 53% !important;
    transform-origin: 75% 53% !important;
  }
  html body[data-mobile-hero="skyline"] .hero-mobile-art-photo > img {
    object-position: 39% 50% !important;
    transform-origin: 39% 50% !important;
  }
  html body[data-mobile-hero="properties"] .hero-mobile-art-photo > img {
    object-position: 72% 50% !important;
    transform-origin: 72% 50% !important;
  }
  html body[data-mobile-hero="painting"] .hero-mobile-art-photo > img {
    object-position: 50% 55% !important;
    transform: scale(1.012) !important;
  }

  /* Keep the exact live logo, slogan, licensing line and badges above the new artwork. */
  html body[data-mobile-hero="patios"] .hero[data-hero-motion]::before {
    background: radial-gradient(ellipse 230px 48px at 80% 79px, rgba(247,251,255,.85), transparent 100%), linear-gradient(180deg, rgba(3,23,43,.18), transparent 32%, transparent 47%, rgba(3,23,43,.78)) !important;
  }
  html body[data-mobile-hero="skyline"] .hero[data-hero-motion]::before {
    background: radial-gradient(ellipse 250px 76px at 25% 121px, rgba(238,248,255,.72), transparent 95%), linear-gradient(180deg, rgba(3,23,43,.18), transparent 33%, transparent 47%, rgba(3,23,43,.85)) !important;
  }
  html body[data-mobile-hero="properties"] .hero[data-hero-motion]::before {
    background: linear-gradient(180deg, rgba(3,23,43,.36), rgba(3,23,43,.08) 29%, rgba(3,23,43,.28) 46%, rgba(3,23,43,.78)), linear-gradient(90deg, rgba(3,23,43,.25), transparent 85%) !important;
  }

  /* Organic page-to-photo transitions, not a rectangular image card. */
  html body[data-mobile-hero] .hero[data-hero-motion] > .hero-sweep {
    display: none !important;
  }
  html body[data-mobile-hero] .hero[data-hero-motion] > .hero-mobile-design {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    overflow: hidden;
  }
  .hero-mobile-design::before {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 50%;
    height: 27%;
    background: linear-gradient(132deg, transparent 57%, rgba(161,219,255,.17) 57.3%, rgba(161,219,255,.04) 65%, transparent 65.3%);
    pointer-events: none;
  }
  .hero-mobile-ribbon {
    display: block;
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: 124px;
    overflow: visible;
  }
  .hero-ribbon-wash { fill: rgba(42,157,211,.22); }
  .hero-ribbon-line { fill: none; stroke: rgba(132,218,255,.72); stroke-width: 2; }
  .hero-ribbon-base { fill: #0a4773; }

  html body[data-mobile-hero="skyline"] .hero-mobile-ribbon {
    height: 108px;
    transform: scaleX(-1);
  }
  html body[data-mobile-hero="skyline"] .hero-ribbon-wash { fill: rgba(30,99,152,.34); }
  html body[data-mobile-hero="skyline"] .hero-ribbon-line { stroke: rgba(144,198,238,.65); }
  html body[data-mobile-hero="skyline"] .hero-ribbon-base { fill: #061b31; }

  html body[data-mobile-hero="properties"] .hero-mobile-ribbon { height: 92px; }
  html body[data-mobile-hero="properties"] .hero-ribbon-wash { fill: rgba(19,93,155,.26); }
  html body[data-mobile-hero="properties"] .hero-ribbon-line { stroke: rgba(177,215,255,.8); }
  html body[data-mobile-hero="properties"] .hero-ribbon-base { fill: #f4f8fd; }

  /* Carry the Painting site's existing multicolor brushstroke onto the room. */
  html body[data-mobile-hero="painting"] .hero-mobile-design::before { display: none; }
  html body[data-mobile-hero="painting"] .hero-mobile-ribbon { height: 76px; }
  html body[data-mobile-hero="painting"] .hero-ribbon-wash { fill: rgba(255,255,255,.36); }
  html body[data-mobile-hero="painting"] .hero-ribbon-line { stroke: rgba(255,255,255,.7); }
  html body[data-mobile-hero="painting"] .hero-ribbon-base { fill: #fff; }
  html body[data-mobile-hero="painting"] .hero-mobile-design::after {
    content: "";
    position: absolute;
    inset: auto 0 3px;
    height: 108px;
    background: url('/assets/chromatic-sweep.svg') center / 100% 100% no-repeat;
    opacity: .92;
    pointer-events: none;
  }
}