/* Landscape backdrop stays separate from the owner's replaceable coach photo. */
/* Align the Monaco after view with the before view without moving the slider. */
.compare>img#after{object-position:center calc(50% + 18px)}
.hero{isolation:isolate;background:#172019;display:block}
.hero-content{max-width:850px}
.hero::before{content:none}
.hero-scenes{position:absolute;inset:0;z-index:-2}
.hero-scene{position:absolute;inset:0;background-size:cover;background-position:center 58%;opacity:0;transition:opacity 1.6s ease}
.hero-scene.active{opacity:1}
.hero-rotation{position:absolute;right:4%;bottom:25px;display:flex;align-items:center;gap:15px;font-size:10px;color:#f5f3ee}
.hero-scene-buttons{display:flex;gap:7px}.hero-rotation button{color:inherit;padding:6px 9px;border:1px solid #ffffff60;border-radius:2px;background:#10201675;font-size:11px}.hero-rotation button[aria-pressed=true]{border-color:var(--orange);background:var(--orange);color:#141b15}
#hero-scene-credit{max-width:230px;font-size:9px}
@media(prefers-reduced-motion:reduce){.hero-scene{transition:none}}
@media(max-width:760px){.hero-rotation{left:24px;right:24px;bottom:22px;flex-wrap:wrap;gap:8px}.hero-bottom{display:none}#hero-scene-credit{flex-basis:100%;max-width:none}.hero-scene{background-position:60% center}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,22,16,.91) 0%,rgba(12,22,16,.79) 39%,rgba(12,22,16,.32) 72%,rgba(12,22,16,.38) 100%)}
.hero-img{border:1px solid rgba(245,243,238,.3);box-shadow:0 20px 55px #080f0c66}
.hero-copy{color:#e0e5da}.hero-bottom,.photo-label{color:#e0e5da;text-shadow:0 1px 5px #000}
@media(max-width:760px){.hero{min-height:650px}.hero-content{padding-bottom:95px}.hero::before{background-position:62% center}.hero::after{background:linear-gradient(180deg,#0c1610de 0%,#0c1610bd 49%,#0c16105c 100%)}}

/* Owner-selected static coach interior, with readable text over the photo. */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("assets/owner-hero-interior.webp") center 53%/cover no-repeat}
@media(max-width:760px){.hero::before{background-position:58% center}}

/* Monaco's matched before/after views, animated without a video download. */
.hero::before{content:none}
.hero-transformation{position:absolute;inset:0;z-index:-2;background:url('assets/monaco-after-one.webp') center 53%/cover no-repeat}
.hero-transformation-before{position:absolute;inset:0;background:url('assets/monaco-before-one.webp') center 53%/cover no-repeat;animation:hero-reveal 14s ease-in-out infinite;clip-path:inset(0 100% 0 0)}
@keyframes hero-reveal{0%,12%,100%{clip-path:inset(0 100% 0 0)}42%,58%{clip-path:inset(0 0 0 0)}88%{clip-path:inset(0 100% 0 0)}}
.hero-motion-toggle{position:absolute;bottom:24px;right:4%;padding:7px 11px;color:#f5f3ee;background:#10180ebd;border:1px solid #ffffff65;border-radius:2px;font-size:11px}
.hero.motion-paused .hero-transformation-before{animation-play-state:paused}
@media(max-width:760px){.hero-motion-toggle{bottom:22px;left:24px;right:auto}.hero-transformation,.hero-transformation-before{background-position:58% center}}
@media(prefers-reduced-motion:reduce){.hero-transformation-before{animation:none;clip-path:inset(0 100% 0 0)}}

/* Scenic two-lane canyon road with broad, gentle bends. */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("assets/destination-zion-road.webp") center 62%/cover no-repeat}
@media(max-width:760px){.hero::before{background-position:61% center}}
.compare-before{clip-path:inset(0 50% 0 0)}.compare-line{left:50%}

/* Interactive hero comparison; calls to action remain above the range input. */
.hero::before{content:none}
.hero-compare{position:absolute;inset:0;z-index:-2;background:url('assets/monaco-after-one.webp') center calc(53% + 18px)/cover no-repeat}
#hero-before-layer{position:absolute;inset:0;background:url('assets/monaco-before-one.webp') center 53%/cover no-repeat;clip-path:inset(0 50% 0 0)}
#hero-compare{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:2;cursor:ew-resize;touch-action:pan-y}
.hero-content{z-index:3;pointer-events:none}.hero-content a{pointer-events:auto}
.hero-compare-line{position:absolute;left:50%;top:0;bottom:0;z-index:1;width:2px;background:#f5f3ee70;pointer-events:none}
.hero-compare-line>span{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border:1px solid #f5f3ee90;border-radius:50%;background:#171918df;color:#f5f3ee;font:24px Arial,sans-serif;box-shadow:0 3px 15px #0003}
#hero-compare-hint{position:absolute;right:4%;bottom:25px;z-index:3;pointer-events:none;padding:6px 10px;background:#171918cc;color:#f5f3ee;font-size:10px;border-radius:3px}
.hero:has(#hero-compare:focus-visible){outline:2px solid var(--orange);outline-offset:-3px}
@media(max-width:760px){.hero-content{padding-bottom:105px}.hero-compare,#hero-before-layer{background-position:58% center}.hero-compare-line>span{top:75%;width:38px;height:38px;font-size:20px}#hero-compare-hint{left:24px;right:auto;bottom:24px;font-size:9px}}

.hero-compare{background:none}#hero-after-layer{position:absolute;inset:0;background:url('assets/monaco-after-one.webp') center calc(53% + 18px)/cover no-repeat;filter:brightness(1.15) saturate(1.04)}.hero::after{background:linear-gradient(90deg,rgba(12,22,16,.84) 0%,rgba(12,22,16,.7) 35%,rgba(12,22,16,.14) 65%,rgba(12,22,16,.08) 100%)}.hero-compare-line>span{top:50%}#hero-compare{appearance:none;-webkit-appearance:none}#hero-before-layer::after,#hero-after-layer::after{position:absolute;top:18px;padding:5px 10px;background:#171918bf;color:#f5f3ee;font:10px Arial,sans-serif;letter-spacing:1px}#hero-before-layer::after{content:'BEFORE';left:4%}#hero-after-layer::after{content:'AFTER';right:4%}@media(max-width:760px){#hero-after-layer{background-position:58% center}.hero::after{background:linear-gradient(90deg,#0c1610bf,#0c16105c 65%,#0c16102b)}.hero-compare-line>span{top:75%}}
#hero-after-layer{background-position:center calc(53% + 36px)}@media(max-width:760px){#hero-after-layer{background-position:58% calc(50% + 18px)}}


/* Keep phone comparison labels aligned with the handle. */
@media(max-width:760px){#hero-before-layer::after,#hero-after-layer::after{top:75%;transform:translateY(-50%)}}

/* Fine-tune the after image alignment. */
#hero-after-layer{background-position:center calc(53% + 28px)}@media(max-width:760px){#hero-after-layer{background-position:58% calc(50% + 10px)}}