/* cleanslate-exterior-wash: editorial and interaction layer (2026-10-12), loaded after the shared demo bundle. */

/* Depth (2026-10-12). The before/after slider is the proof and must stay steady to drag; the depth goes to the surface cards instead. Pointer devices only; off under reduced motion. */
/* Cards only (see DEPTH in demo-authored.js). */

.csComparison { min-width:0; align-self:stretch; display:flex; flex-direction:column; }
.csComparison .csWash { flex:1; min-height:420px; }
.csSurfaceSwitch { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.csSurfaceSwitch button { font:inherit; min-height:44px; padding:10px 16px; border:1px solid currentColor; border-radius:4px; cursor:pointer; color:#123b36; background:#fff; }
.csSurfaceSwitch button[aria-pressed="true"] { color:#fff; background:#123b36; }
.csSurfaceSwitch button:focus-visible { outline:3px solid #b05b15; outline-offset:3px; }
.csComparisonNote { font-size:.8rem; margin:0 0 12px; }
@media(max-width:800px) { .csComparison .csWash { min-height:450px; } }
/* Keep the comparison control clear of the existing sticky phone enquiry bar. */
body[data-demo="cleanslate-exterior-wash"] [data-wash-slider] { scroll-margin-block:120px; }