/* Original owner photographs, presented without filters or retouching. */
.before-after{padding:94px 6% 72px;background:#111;color:#f5f5f2;scroll-margin-top:90px}
.comparison-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;max-width:1320px;margin:0 auto 40px}
.comparison-eyebrow{margin:0 0 14px;color:#a9acae;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.before-after h2{font-size:clamp(34px,4.3vw,58px);line-height:1.08;letter-spacing:-.045em;margin:0;text-transform:none}
.comparison-intro>p{max-width:375px;margin:0;color:#bfc1c3;font-size:14px;line-height:1.8}
.comparison-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.comparison-card{min-width:0;border:1px solid #ffffff24;border-radius:4px;background:#191919;overflow:hidden}
.comparison-card-heading{padding:25px 26px 24px}
.comparison-card-heading>p{margin:0 0 9px;color:#b7babd;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.comparison-card h3{margin:0;color:#f8f8f5;font-size:clamp(20px,2.1vw,28px);font-weight:600;line-height:1.25;letter-spacing:-.025em;text-transform:none}
.comparison-card figure{margin:0;min-width:0}
.comparison-photo-link{display:block;background:#101010;line-height:0}
.comparison-photo-link img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}
.comparison-photo-link:focus-visible,.comparison-card figcaption a:focus-visible,.comparison-browse:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.comparison-card figcaption{padding:17px 22px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 14px;line-height:1.7;font-size:11px}
.comparison-card figcaption>span{color:#d8dadc;font-weight:600;letter-spacing:.025em}
.comparison-card figcaption a{color:#c6c9cb;text-decoration:underline;text-underline-offset:4px}
.comparison-card-wide{grid-column:1/-1}
.engine-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#ffffff24}
.engine-comparison figure{background:#191919;display:flex;flex-direction:column}
.engine-comparison .comparison-photo-link{flex:1;display:flex;align-items:center}
.engine-photo-label{padding:0 26px 16px;color:#f5f5f2;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.comparison-note{max-width:770px;margin:27px auto 0;color:#a9adb0;text-align:center;font-size:11px;line-height:1.8}
.comparison-browse{display:flex;align-items:center;justify-content:center;gap:18px;width:fit-content;max-width:100%;min-height:44px;margin:24px auto 0;padding:10px 4px;border-bottom:1px solid #6e7175;font-size:12px;font-weight:600}
#photo-gallery{scroll-margin-top:84px}
@media(max-width:700px){
 .before-after{padding:56px 18px 42px}
 .comparison-intro{display:block;margin-bottom:27px}
 .comparison-intro>p{margin-top:20px;font-size:13px;max-width:330px}
 .comparison-grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .comparison-card-wide{grid-column:auto}
 .comparison-card-heading{padding:22px 20px 20px}
 .comparison-card h3{font-size:23px}
 .comparison-card figcaption{padding:15px 18px 18px;font-size:11px;gap:9px 14px}
 .engine-comparison{grid-template-columns:minmax(0,1fr);gap:20px;background:#191919}
 .engine-photo-label{padding:0 20px 13px}
 .comparison-note{text-align:left;margin-top:22px}
}

/* A fuller photo-only gallery zoom; service-card zoom-out remains untouched. */
.gallery-item img{transform:scale(1);transition:transform 750ms cubic-bezier(.2,.65,.3,1)}
.gallery-item:hover img{transform:scale(1)}
.gallery-item:hover:where(.is-gallery-hover) img,.gallery-item:is(.is-gallery-pressed,:active,:focus-visible) img{transform:scale(1.075)}
.gallery-item>span{z-index:1}
.gallery-item:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* Approximate subject framing: the originals were taken from different angles. */
.engine-interactive{padding:0 24px 24px}
.engine-slider-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 13px}
.engine-slider-heading label{font-size:12px;font-weight:700;line-height:1.6}
.engine-slider-heading span{color:#bfc4c8;font-size:11px;line-height:1.6}
.engine-comparison-frame{--before-reveal:50%;position:relative;isolation:isolate;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:#171717;direction:ltr}
.engine-comparison-frame>img,.engine-before-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 66%;display:block}
.engine-comparison-frame>.engine-image-after{transform:translateX(-2.5%) scale(1.3);transform-origin:50% 50%}
.engine-before-layer{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--before-reveal)) 0 0);z-index:1}
.engine-comparison-frame .engine-image-label{position:absolute;top:15px;z-index:2;background:#111c;border:1px solid #ffffff59;padding:7px 11px;border-radius:3px;color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;pointer-events:none}
.engine-image-label.before{left:15px}.engine-image-label.after{right:15px}
.engine-divider{position:absolute;top:0;bottom:0;left:var(--before-reveal);width:2px;transform:translateX(-50%);background:#fff;z-index:3;box-shadow:0 0 12px #0005;pointer-events:none}
/* Keep the whole 48px hit target reachable at both image endpoints. */
.engine-drag-handle{position:absolute;left:clamp(24px,var(--before-reveal),calc(100% - 24px));top:50%;width:48px;height:48px;box-sizing:border-box;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;background:#fafaf7;color:#151515;border:1px solid #fff;border-radius:50%;box-shadow:0 3px 20px #0006;font-size:24px;line-height:1;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* The photos still scroll normally. Only a gesture beginning on the handle is captured. */
.engine-comparison-frame{touch-action:pan-y}
.engine-comparison-frame>img,.engine-before-layer{pointer-events:none;user-select:none;-webkit-user-select:none}
/* A real native range remains in the tab order and accessibility tree. */
.engine-range{position:absolute;left:50%;top:50%;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none;direction:ltr}
.engine-comparison-frame:focus-within{outline:3px solid #fff;outline-offset:4px}
.engine-comparison-frame:focus-within .engine-drag-handle{box-shadow:0 0 0 3px #141414,0 0 0 5px #fff}
.engine-comparison-frame.is-comparison-dragging .engine-drag-handle{cursor:grabbing}
.engine-instructions{font-size:12px;line-height:1.8;color:#e1e3e5;margin:14px 0 0}
.engine-framing-note{font-size:11px;line-height:1.8;color:#aeb4b9;margin:7px 0 0}
.engine-original-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:15px;font-size:11px;line-height:1.8}
.engine-original-links a{color:#d8dcdf;text-decoration:underline;text-underline-offset:4px}
.engine-original-links a:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:700px){.engine-interactive{padding:0 14px 20px}.engine-slider-heading{display:block}.engine-slider-heading span{display:block;margin-top:5px}.engine-comparison-frame .engine-image-label{top:10px;padding:6px 8px;font-size:9px}.engine-image-label.before{left:10px}.engine-image-label.after{right:10px}}
@media(prefers-reduced-motion:reduce){.gallery-item img,.gallery-item:is(:hover,.is-gallery-pressed,:active,:focus-visible) img{transform:scale(1);transition:none}}

[data-engine-comparison] [hidden]{display:none!important}

/* Owner-confirmed Subaru rear-cabin collage, unchanged original bytes.
   Each side uses x=7..761 / 775..1529. Crop the lower cabin to show mats
   and door trim. The visible note discloses the different camera angles. */
.cabin-comparison-frame{aspect-ratio:4/3}
.cabin-comparison-frame .cabin-collage-half{position:absolute;inset:0;background-image:url('assets/comparison-subaru-rear-cabin.jpeg');background-repeat:no-repeat;background-size:203.713528% auto;pointer-events:none;user-select:none;-webkit-user-select:none}
.cabin-comparison-frame .cabin-collage-before{background-position:.89514% 68%}
.cabin-comparison-frame .cabin-collage-after{background-position:99.10486% 68%}

/* Slight zoom of only the requested gallery tile excludes the person at right.
   Source remains untouched; this does not target the homepage hero. */
.gallery-item.gallery-palisade-crop img{transform:scale(1.1);transform-origin:50% 50%}
.gallery-item.gallery-palisade-crop:is(.is-gallery-hover,.is-gallery-pressed,:active,:focus-visible) img{transform:scale(1.16)}
@media(prefers-reduced-motion:reduce){.gallery-item.gallery-palisade-crop img,.gallery-item.gallery-palisade-crop:is(.is-gallery-hover,.is-gallery-pressed,:active,:focus-visible) img{transform:scale(1.1);transition:none}}

/* Equal heading tracks align the two neighboring comparison frames even when
   either comparison title wraps. No changes to native ranges or handle input. */
@media(min-width:701px){
 .comparison-card[data-engine-comparison] .comparison-card-heading{min-height:146px}
 .comparison-card[data-engine-comparison] .engine-slider-heading{min-height:39px}
}

/* A genuine single finished-detail photo, not an aligned before/after pair. */
.finished-cabin-photo .comparison-photo-link{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:#101010}
.finished-cabin-photo .comparison-photo-link img{width:100%;height:100%;object-fit:contain;filter:none;transform:none}
@media(min-width:701px){.finished-cabin-photo .comparison-card-heading{min-height:146px}}