/* Before & After glider (Oct 28 v3): DESKTOP = one row of larger cards, slow ~75s drift. PHONE (<=767px) = two rows of smaller cards, ~38s drift. Frames hold 1s, 0.35s crossfade. Track duplicated for a seamless loop. */
.bag{--cream:#f7f3ec;--charcoal:#2b2f36;--silver:#b8bdc4;max-width:1140px;margin:2.4em auto;padding:28px 0 22px;background:var(--cream);border-radius:22px;overflow:hidden}
.bag-kicker{text-align:center;font:700 16px/1.3 'MT Lato',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#5b6068;margin:0 0 6px}
.bag-title{text-align:center;font:500 30px/1.15 'MT EB Garamond',Georgia,serif;color:var(--charcoal);margin:0 15px 8px}
.bag-sub{text-align:center;font:400 16px/1.5 'MT Lato',Arial,sans-serif;color:#4f545c;margin:0 15px 18px}
.bag-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bag-track{display:flex;align-items:flex-start;width:max-content;gap:0;padding:6px 0 12px;margin:0;list-style:none;animation:bag-drift 75s linear infinite;will-change:transform}
.bag.is-paused .bag-track,.bag-viewport:hover .bag-track,.bag-viewport:focus-within .bag-track{animation-play-state:paused}
@keyframes bag-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bag-card{flex:0 0 240px;margin-right:18px;border-radius:18px;padding:5px;background:conic-gradient(from 210deg,#f4f5f7,#aeb3ba,#fff,#9ea4ad,#eef0f2,#b8bdc4,#fff,#a3a9b1,#f4f5f7);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 6px 16px rgba(20,30,50,.14)}
.bag-card figure{margin:0;border-radius:13px;overflow:hidden;background:#fff}
.bag-pics{position:relative;aspect-ratio:4/5;background:#e6e3dc}
.bag-pics picture,.bag-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bag-pics picture{opacity:0;transition:opacity .35s ease}
.bag-pics picture.on{opacity:1}
.bag-stage{position:absolute;left:10px;top:10px;z-index:2;font:700 14px/1 'MT Lato',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--charcoal);padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,#fff,#e9ebee);border:1px solid #c3c7cd;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.bag-card figcaption{padding:10px 12px 12px;text-align:center}
.bag-job{display:block;font:500 19px/1.2 'MT EB Garamond',Georgia,serif;color:var(--charcoal)}
.bag-loc{display:block;font:400 16px/1.4 'MT Lato',Arial,sans-serif;color:#5b6068}
.bag-ctrl{display:flex;justify-content:center;margin-top:10px}
.bag-btn{min-height:44px;min-width:44px;padding:0 22px;border-radius:999px;cursor:pointer;font:700 16px/1 'MT Lato',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);background:linear-gradient(180deg,#fff 0%,#eceef1 50%,#dcdfe3 51%,#f3f4f6 100%);border:1px solid #b9bec5;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(0,0,0,.1)}
.bag-btn:focus-visible,.bag-card:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px}
@media (max-width:767px){.bag-track{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:200px;row-gap:16px;align-items:start;animation-duration:38s}.bag-card{flex:none;margin-right:16px}}
@media (max-width:600px){.bag{border-radius:0}.bag-track{grid-auto-columns:158px;row-gap:12px}.bag-card{margin-right:12px;padding:4px}.bag-card figcaption{padding:8px 6px 10px}.bag-job{font-size:17px}.bag-stage{left:6px;top:6px;padding:7px 9px;letter-spacing:.12em}.bag-title{font-size:26px}}
@media (prefers-reduced-motion:reduce){
 .bag-track{animation:none;transform:none}
 .bag-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
 .bag-card{scroll-snap-align:center}.bag-track [aria-hidden="true"]{display:none}
 .bag-pics picture{transition:none}.bag-ctrl{display:none}}