/* Each source collage is shown as three full-height panels; no source pixels edited. */
body { isolation: isolate; }
.hero-photo-backdrop { position: fixed; top: 84px; left: 0; right: 0; height: calc(100svh - 84px); z-index: -1; overflow: hidden; pointer-events: none; background: #e9e7e1; }
.hero-photo-track { display: flex; width: max-content; height: 100%; animation: hero-photo-drift 240s linear infinite; will-change: transform; }
.hero-photo-set { display: flex; flex: none; gap: 12px; height: 100%; padding-right: 12px; }
.hero-photo-tile { flex: none; height: 100%; aspect-ratio: 640 / 809; overflow: hidden; }
.hero-photo-tile img { display: block; width: 300%; max-width: none; height: 100%; object-fit: fill; }
#main-content { position: relative; background: transparent; }
#main-content > :not(#hero) { position: relative; background-color: #f9f8f4; }
footer { position: relative; background-color: #f9f8f4; }
#hero.customer-hero { position: relative; isolation: auto; overflow: hidden; display: block; min-height: max(680px, calc(100svh - 84px)); background: transparent; }
#hero.customer-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg,rgba(249,248,244,.98),rgba(249,248,244,.97) 42%,rgba(249,248,244,.18) 67%,rgba(249,248,244,0) 100%); }
#hero.customer-hero .kv-content { position: relative; z-index: 1; width: min(68%,820px); min-height: max(680px,calc(100svh - 84px)); padding-block: 40px; box-sizing: border-box; background: transparent; }
#hero.customer-hero .kv-media, #hero.customer-hero .kv-caption, #hero.customer-hero .kv-owner-trust { display: none; }
@keyframes hero-photo-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media(max-width:1024px) { #hero.customer-hero .kv-content { width: 76%; } }
@media(max-width:767px) {
 .hero-photo-backdrop { top: 70px; height: 360px; }
 .hero-photo-track { animation-duration: 280s; }
 #hero.customer-hero { min-height: 0; padding-top: 360px; }
 #hero.customer-hero::after { display: none; }
 #hero.customer-hero .kv-content { width: 100%; min-height: 0; padding: 26px 24px 32px; background: rgba(249,248,244,.98); }
}
@media(prefers-reduced-motion:reduce) {
 .hero-photo-track { animation: none; transform: none; will-change: auto; }
}
