/* Sub-service pages: before/after slider hero, job photo gallery, steps and service keywords.
   Built by tools/build-subservices.py; loaded only on those pages. */

/* placeholder "before" made from the after photo, until a real before photo is supplied */
.ba-before-img{filter:sepia(.5) saturate(.55) brightness(.72) contrast(.92)}
.ba-grime{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.85;
  background:
   radial-gradient(38% 30% at 22% 70%,rgba(92,64,30,.55),transparent 70%),
   radial-gradient(25% 22% at 75% 30%,rgba(80,60,35,.45),transparent 70%),
   radial-gradient(18% 15% at 55% 82%,rgba(60,45,25,.5),transparent 70%),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.ss-title{font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:-.02em;line-height:1.02;margin:0}
.ss-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px}
.ss-call{font-weight:700;color:var(--navy);text-decoration:none}

/* hero: drag the line */
.a-hero{position:relative;height:min(78vh,720px);min-height:460px;overflow:hidden;user-select:none;touch-action:pan-y;--x:50%}
.a-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.a-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.a-line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.35)}
.a-knob{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);font-weight:800;color:var(--navy)}
.a-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.a-tag{position:absolute;top:22px;font:800 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-radius:8px;background:rgba(15,23,42,.75);color:#fff}
.a-tag.l{left:22px}.a-tag.r{right:22px;background:var(--accent);color:var(--navy)}

/* floating keyword labels: clean side (after) and the matching problem on the dirty side */
.a-pin{position:absolute;pointer-events:none;transform:translate(-50%,-50%) translate(calc(var(--px,0) * var(--d) * 1px),calc(var(--py,0) * var(--d) * 1px));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.a-pin span{position:relative;display:block;background:#fff;color:var(--navy);font-weight:700;font-size:15px;padding:10px 16px 10px 34px;border-radius:999px;box-shadow:0 12px 28px rgba(0,0,0,.28);white-space:nowrap;
  opacity:0;transform:scale(.4) translateY(12px);transition:opacity .3s,transform .55s cubic-bezier(.34,1.56,.64,1);animation:a-bob var(--f) ease-in-out var(--w) infinite}
.a-pin span::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--accent);animation:a-pulse 2s ease-out var(--w) infinite}
.a-pin.on span{opacity:1;transform:none}
.a-pin.bad span{background:rgba(15,23,42,.86);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.a-pin.bad span::before{background:#f59e0b;animation-name:a-pulse-bad}
@keyframes a-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes a-pulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.7)}100%{box-shadow:0 0 0 12px rgba(56,189,248,0)}}
@keyframes a-pulse-bad{0%{box-shadow:0 0 0 0 rgba(245,158,11,.7)}100%{box-shadow:0 0 0 12px rgba(245,158,11,0)}}

.a-copy{position:absolute;left:0;right:0;bottom:0;padding:28px 0;background:linear-gradient(transparent,rgba(15,23,42,.85));color:#fff;pointer-events:none}
.a-copy .ss-title{color:#fff}
.a-copy .ss-cta,.a-copy a{pointer-events:auto}.a-copy .ss-call{color:#fff}

/* detail: job photos left, steps and service keywords right */
.a-detail-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:stretch}
.a-detail-photo{position:relative;border-radius:24px;overflow:hidden;min-height:520px;box-shadow:0 20px 50px rgba(15,23,42,.18)}
.a-gal-track{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.a-gal-track::-webkit-scrollbar{display:none}
.a-gal-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:50% 35%;scroll-snap-align:start}
.a-gal-btn{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .2s,opacity .2s}
.a-gal-btn:hover{transform:scale(1.08)}.a-gal-btn:disabled{opacity:0;pointer-events:none}
.a-gal-btn.prev{left:16px}.a-gal-btn.next{right:16px}
.a-gal-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px}
.a-gal-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.6);cursor:pointer;transition:width .3s,background .3s}
.a-gal-dots button.on{width:26px;background:#fff}

.a-detail-body{display:flex;flex-direction:column;gap:32px;justify-content:center}
.a-detail-body h2{margin:0}
.a-flow{list-style:none;padding:0;margin:-8px 0 0;display:grid;grid-template-columns:repeat(3,1fr);row-gap:26px;counter-reset:s}
.a-step{position:relative;padding:16px 12px 0 0;border-top:3px solid var(--bg-panel);font-weight:700;font-size:18px;transition:border-color .3s}
.a-step::before{counter-increment:s;content:"0" counter(s);display:inline;margin:0 8px 0 0;font-size:13px;color:var(--accent-600)}
.a-step.lit{border-color:var(--accent)}
.a-feats{background:var(--navy);border-radius:24px;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;padding:36px}
.a-feat{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:600;color:#fff}
.a-feat i{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(56,189,248,.14);color:var(--accent)}

@media (max-width:860px){
  .a-detail-grid,.a-feats{grid-template-columns:1fr}
  .a-detail-photo{min-height:0;aspect-ratio:4/5}
  .a-flow{grid-template-columns:repeat(2,1fr)}
  .a-pin span{font-size:11px;padding:7px 10px 7px 24px}
  .a-pin span::before{left:9px;width:9px;height:9px;margin-top:-4.5px}
  .a-pin{left:auto!important;right:10px;transform:translateY(-50%)}
  .a-pin.bad{left:10px!important;right:auto}
}
@media (prefers-reduced-motion:reduce){
  .a-hero *,.a-detail *{transition:none!important;animation:none!important}
}