/* Before/after component – Branchard draft (26 Oct 2026). Uses the live site's colour tokens. */
.ba{--ba-green:#173d2c;--ba-gold:#d5a734;--ba-cream:#f5f1e8;--ba-ink:#172019;--ba-muted:#5d695f;
  background:#fff;border-radius:22px;padding:16px;margin:20px 0;box-shadow:0 18px 45px rgba(0,0,0,.08);color:var(--ba-ink)}
.ba__title{margin:0 0 10px;color:var(--ba-green);font-size:1.25rem}
.ba__figure{margin:0 0 12px}
.ba__figure img{display:block;width:100%;height:auto;border-radius:14px;background:#d9d9d9}
.ba__figure figcaption{font-size:.95rem;color:var(--ba-muted);margin-top:6px}
.ba__caption{margin:8px 0 0}
.ba__controls{display:none;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.ba__toggle{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;
  border-radius:999px;border:2px solid var(--ba-green);background:var(--ba-green);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.ba__toggle[data-showing="after"]{background:transparent;color:var(--ba-green)}
.ba__toggle:focus-visible{outline:3px solid var(--ba-gold);outline-offset:3px}
.ba__state{font-weight:700;color:var(--ba-green)}
/* JS-enhanced mode: one image at a time */
.ba.is-enhanced .ba__controls{display:flex}
.ba.is-enhanced .ba__figure[hidden]{display:none}
.ba.is-enhanced .ba__figure{animation:ba-fade .25s ease-in}
@keyframes ba-fade{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ba.is-enhanced .ba__figure{animation:none}}
@media (max-width:650px){.ba{padding:12px}.ba__toggle{width:100%}}
.ba__contact{margin:14px 0 4px}
.ba__contact .button{min-height:48px}