.service-visual{padding:0;background:#fff}
.service-visual .wrap{padding:42px 0 0}
.service-visual-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);min-height:360px;background:#111820;color:#fff;box-shadow:0 16px 42px rgba(10,18,28,.16);overflow:hidden}
.service-visual-card img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}
.service-visual-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:34px}
.service-visual-copy .eyebrow{color:#ff5b53}
.service-visual-copy h2{font-size:clamp(1.9rem,3.5vw,3rem);margin-top:9px}
.service-visual-copy p{color:#cbd2d8;margin:13px 0 0}
.related-grid a{position:relative;min-height:190px;display:flex;align-items:flex-end;overflow:hidden;padding:22px;color:#fff!important;border:0!important;background:#18222c;isolation:isolate}
.related-grid a:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--related-photo) center/cover;transition:transform .3s ease}
.related-grid a:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,13,19,.94),rgba(7,13,19,.12))}
.related-grid a:hover:before,.related-grid a:focus-visible:before{transform:scale(1.045)}
.related-grid a:focus-visible{outline:4px solid #d92d27;outline-offset:3px}
.related-grid a[href="/bathroom-remodeling/"]{--related-photo:url('/assets/real/bathroom-shower-finished.webp')}
.related-grid a[href="/kitchen-remodeling/"]{--related-photo:url('/assets/real/kitchen-cabinet-installation.webp')}
.related-grid a[href="/flooring/"]{--related-photo:url('/assets/real/lvp-flooring-installation.webp')}
.related-grid a[href="/drywall-painting/"]{--related-photo:url('/assets/real/drywall-finishing-progress.webp')}
.related-grid a[href="/water-damage-restoration/"]{--related-photo:url('/assets/real/exterior-protection-installation.webp')}
.related-grid a[href="/framing-carpentry/"]{--related-photo:url('/assets/real/interior-framing-progress.webp')}
.related-grid a[href="/popcorn-ceiling/"]{--related-photo:url('/assets/real/popcorn-texture-application.webp')}
.related-grid a[href="/property-repairs/"]{--related-photo:url('/assets/real/wood-refinishing-progress.webp')}
.related-grid a[href="/small-plumbing-repairs/"]{--related-photo:url('/assets/real/kitchen-drain-work-progress.webp')}
@media(max-width:760px){.service-visual .wrap{padding-top:24px}.service-visual-card{grid-template-columns:1fr}.service-visual-card img{height:260px;min-height:260px}.service-visual-copy{padding:25px}.related-grid a{min-height:165px}}

/* Every detailed scope becomes a photo-backed, touchable example. */
.scope .scope-photo-tile{position:relative;min-height:145px;border:0;border-left:4px solid var(--red);padding:18px;display:flex;align-items:flex-end;color:#fff;cursor:pointer;overflow:hidden;isolation:isolate;text-shadow:0 2px 9px #000;font-size:1rem;line-height:1.3}
.scope .scope-photo-tile:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--scope-photo) center/cover;transition:transform .28s ease}
.scope .scope-photo-tile:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,13,19,.92),rgba(7,13,19,.12))}
.scope .scope-photo-tile:hover:before,.scope .scope-photo-tile:focus-visible:before{transform:scale(1.055)}
.scope .scope-photo-tile:focus-visible{outline:4px solid #d92d27;outline-offset:3px}
.scope-photo-hint{grid-column:1/-1;margin:2px 0 0;color:#69737d;font-size:.78rem;font-weight:700}
.scope-viewer{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:24px;background:rgba(4,9,14,.88)}
.scope-viewer.open{display:grid}
.scope-viewer-dialog{width:min(900px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:#fff;box-shadow:0 24px 80px #0008}
.scope-viewer-dialog img{display:block;width:100%;height:min(62vh,560px);object-fit:cover}
.scope-viewer-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;color:#111820;font-weight:800}
.scope-viewer-caption span:before{content:"Service example";display:block;color:#d92d27;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;margin-bottom:4px}
.scope-viewer-close{border:0;background:#111820;color:#fff;min-width:46px;min-height:46px;font-size:1.6rem;cursor:pointer}
@media(max-width:560px){.scope .scope-photo-tile{min-height:132px}.scope-viewer{padding:12px}.scope-viewer-dialog img{height:48vh}.scope-viewer-caption{padding:15px}.scope-photo-hint{font-size:.75rem}}
