/* ==========================================================================
   BEFORE / AFTER DRAG SLIDER  — home page, above About Us.
   Only perfectly matched pairs go in here: same camera position in both
   frames, both cropped to an identical 4:3 box. A mismatched pair looks
   broken the moment you drag the handle.
   ========================================================================== */
#bb-ba { position: relative; padding: 92px 0 100px; background: #0A0406; }
#bb-ba .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
#bb-ba .eyebrow { color: #C9A961; font-weight: 700; font-size: 15px;
  letter-spacing: .30em; text-indent: .30em; text-align: center; }
#bb-ba h2 { color: #F6F1E7; font-weight: 700; font-size: clamp(34px,4vw,54px);
  line-height: 1.12; text-align: center; margin: 16px 0 12px; }
#bb-ba .sub { color: rgba(246,241,231,.70); text-align: center; max-width: 620px;
  margin: 0 auto 46px; font-size: 17px; line-height: 1.6; }

#bb-ba .rowGrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(430px,1fr)); gap: 26px; }

.ba { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3;
  border: 1px solid rgba(201,169,97,.18); cursor: ew-resize; user-select: none;
  touch-action: pan-y; background: #120709; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none; }
.ba .afterWrap { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.ba .handle { position: absolute; top: 0; bottom: 0; width: 3px; background: #C9A961;
  transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 18px rgba(0,0,0,.6); }
.ba .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 999px; background: #C9A961; color: #2A0308;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  font-weight: 700; box-shadow: 0 4px 18px rgba(0,0,0,.55); }
.ba .tag { position: absolute; bottom: 14px; padding: 6px 14px; border-radius: 999px;
  background: rgba(8,3,5,.84); color: #F6F1E7; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; pointer-events: none; border: 1px solid rgba(201,169,97,.3); }
.ba .tagB { left: 14px; } .ba .tagA { right: 14px; color: #C9A961; }
.ba .cap { position: absolute; top: 14px; left: 14px; right: 14px; pointer-events: none; }
.ba .cap h3 { color: #F6F1E7; font-size: 18px; font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.ba .cap span { color: #C9A961; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.8); }

@media (max-width: 700px) {
  #bb-ba .rowGrid { grid-template-columns: 1fr; }
  #bb-ba { padding: 62px 0 70px; }
}