.before-after{background:#e7e3da}
.ba-heading{display:grid;grid-template-columns:1.5fr .65fr;gap:8vw;align-items:end;margin-bottom:52px}
.ba-heading .section-index{margin-bottom:36px}
.ba-heading h2{font-size:clamp(2.7rem,4.8vw,5.2rem);line-height:1.04;letter-spacing:-.055em;font-weight:500}
.ba-heading h2 span{font-family:Georgia,serif;font-weight:400;color:var(--gold)}
.ba-heading>p{color:var(--muted);line-height:1.75;margin:0 0 8px}
.ba-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.ba-filters button{border:1px solid rgba(23,23,19,.22);background:transparent;padding:9px 15px;font:600 .65rem "DM Sans";letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.ba-filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 28px}
.ba-project{min-width:0;transition:opacity .3s}
.ba-project.is-hidden{display:none}
.ba-compare{aspect-ratio:16/10;position:relative;overflow:hidden;background:#cbc6bc;cursor:ew-resize}
.ba-compare>img,.ba-before-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.ba-before-wrap{position:absolute;inset:0 auto 0 0;width:var(--position);overflow:hidden}
.ba-before{position:absolute;inset:0;max-width:none}
.ba-compare:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 70px rgba(0,0,0,.13);pointer-events:none}
.ba-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5}
.ba-divider{position:absolute;z-index:4;top:0;bottom:0;left:var(--position);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba-divider i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-style:normal;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.ba-label{position:absolute;z-index:3;top:18px;background:rgba(18,18,15,.8);color:#fff;padding:8px 12px;font-size:.62rem;letter-spacing:.14em}
.ba-label.before{left:18px}
.ba-label.after{right:18px}
.ba-project-copy{display:grid;grid-template-columns:1fr;gap:10px;padding:20px 0;border-bottom:1px solid var(--line)}
.ba-project-copy span{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ba-project-copy h3{font-size:clamp(1.45rem,2vw,2rem);font-weight:500;letter-spacing:-.04em;margin-top:8px}
.ba-project-copy p{margin:0;color:var(--muted);line-height:1.65;max-width:62ch}
@media(max-width:900px){.ba-heading{grid-template-columns:1fr;gap:22px}.ba-grid{grid-template-columns:1fr;gap:44px}}
@media(max-width:520px){.ba-compare{aspect-ratio:4/3}.ba-label{top:14px}.ba-label.before{left:14px}.ba-label.after{right:14px}.ba-divider i{width:40px;height:40px}}