/* ===== zintex26-before-after ===== */
.z26-ba{
  /* Brand */
  --z-navy:#003366; --z-white:#FFFFFF; --z-yellow:#FFE500; --z-yellow-hover:#F5D800;
  /* Supporting (pending your decision on extra colors) */
  --z-navy-900:#0A1A2E; --z-blue:#1F5FA8; --z-ink:#1B2430; --z-muted:#5B6675;
  --z-ivory:#FBF8F3;

  font-family:"Open Sans",system-ui,sans-serif; font-weight:500; color:var(--z-ink);
}
.z26-ba *,.z26-ba *::before,.z26-ba *::after{box-sizing:border-box}

.z26-ba__inner{max-width:1200px; margin:0 auto; padding:48px 16px; display:flex; flex-direction:column; gap:24px}
.z26-ba__eyebrow{margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--z-blue)}
.z26-ba__heading{margin:0 0 12px; font-size:clamp(28px,3.6vw,40px); line-height:1.15; font-weight:800; letter-spacing:-.01em; color:var(--z-navy)}
.z26-ba__details{margin:0 0 24px; font-size:17px; line-height:1.6; color:var(--z-muted); max-width:44ch}
.z26-ba__btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px;
  border-radius:999px; background:var(--z-yellow); color:var(--z-navy);
  font-weight:700; font-size:17px; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.z26-ba__btn:hover{background:var(--z-yellow-hover); transform:translateY(-1px)}
.z26-ba__btn:focus-visible{outline:3px solid var(--z-blue); outline-offset:3px}

/* ---------- Slider ---------- */
.z26-ba__slider{
  position:relative; overflow:hidden; border-radius:14px; aspect-ratio:4/3; background:#C9D3DC;
  cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.z26-ba__layer{position:absolute; inset:0}
.z26-ba__layer img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.z26-ba__layer--before{clip-path:inset(0 calc(100% - var(--z26-pos)) 0 0)}

.z26-ba__tag{position:absolute; bottom:14px; z-index:2; padding:7px 14px; border-radius:999px; font-size:14px; font-weight:700; pointer-events:none}
.z26-ba__tag--before{left:14px}
.z26-ba__tag--after{right:14px}

.z26-ba__handle{position:absolute; top:0; bottom:0; left:var(--z26-pos); z-index:3; width:3px; margin-left:-1.5px; background:var(--z-white); pointer-events:none}
.z26-ba__knob{
  position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px;
  border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--z-navy);
}
.z26-ba__slider:focus-within .z26-ba__knob{outline:3px solid var(--z-blue); outline-offset:3px}

/* Keyboard / screen-reader control: invisible but focusable */
.z26-ba__range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none}
.z26-ba__vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Style: Clear Glass ---------- */
.z26-ba--glass{background:var(--z-white)}
.z26-ba--glass .z26-ba__tag,
.z26-ba--glass .z26-ba__knob{
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.6); color:var(--z-navy-900);
}
.z26-ba--glass .z26-ba__knob{color:var(--z-navy)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .z26-ba--glass .z26-ba__tag,.z26-ba--glass .z26-ba__knob{background:var(--z-white)}
}

/* ---------- Style: Warm & Solid ---------- */
/* Warm uses brand colors only: navy text, yellow highlights, white/ivory grounds */
.z26-ba--warm{--z-ink:var(--z-navy); background:var(--z-ivory); color:var(--z-ink)}
.z26-ba--warm .z26-ba__eyebrow{display:inline-block; padding:6px 12px; border-radius:8px; background:var(--z-yellow); color:var(--z-navy); letter-spacing:.02em; text-transform:none; font-size:14px; margin-bottom:14px}
.z26-ba--warm .z26-ba__heading{color:var(--z-navy)}
.z26-ba--warm .z26-ba__slider{border-radius:22px}
.z26-ba--warm .z26-ba__tag{background:var(--z-white); color:var(--z-ink); box-shadow:0 6px 16px rgba(60,45,20,.14)}
.z26-ba--warm .z26-ba__knob{background:var(--z-white); box-shadow:0 6px 16px rgba(60,45,20,.18), inset 0 0 0 2px var(--z-navy)}
.z26-ba--warm .z26-ba__btn{border-radius:12px; background:var(--z-navy); color:var(--z-white)}
.z26-ba--warm .z26-ba__btn:hover{background:var(--z-navy-900)}

/* ---------- Tablet / desktop ---------- */
@media (min-width:640px){
  .z26-ba__inner{padding:72px 32px}
}
@media (min-width:960px){
  .z26-ba__inner{flex-direction:row; align-items:center; gap:64px; padding:96px 32px}
  .z26-ba__copy{flex:1 1 340px}
  .z26-ba__slider{flex:1.4 1 520px; aspect-ratio:auto; height:460px}
}

@media (prefers-reduced-motion:reduce){
  .z26-ba__btn{transition:none}
  .z26-ba__btn:hover{transform:none}
}