/* One coordinate system: only the full-size top layer is clipped. */
.transformation-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:var(--portfolio-gap);margin-bottom:48px;align-items:start}
.transformation-copy h3{font-size:var(--text-h3);margin-bottom:18px}.transformation-copy>p:not(.portfolio-kicker){font-size:14px;line-height:1.8;color:var(--muted)}
.before-after{margin:0;min-width:0}
.before-after--portrait{width:100%;max-width:480px;justify-self:center}
.before-after-stage{--ba-position:50%;position:relative;width:100%;aspect-ratio:4/3;max-height:560px;background:#e8e1d5;overflow:hidden;cursor:ew-resize;touch-action:pan-y pinch-zoom;isolation:isolate;contain:layout paint}
.before-after--portrait .before-after-stage{aspect-ratio:4/5;max-width:480px;max-height:600px;margin-inline:auto}
.before-after-image{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;pointer-events:none;user-select:none}
.before-after-mask{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 calc(100% - var(--ba-position)) 0 0)}
.before-after-label{position:absolute;top:14px;padding:7px 10px;background:var(--paper);color:var(--wine);font-size:10px;letter-spacing:.1em;pointer-events:none;z-index:2}
.before-after-label--before{left:14px}.before-after-label--after{right:14px}
.before-after-divider{position:absolute;inset-block:0;left:var(--ba-position);width:1px;background:var(--paper);pointer-events:none;z-index:3}
.before-after-divider>span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--wine);font-size:20px}
.before-after-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}.before-after-stage:focus-within{outline:2px solid var(--wine);outline-offset:-2px}
.before-after-caption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;font-size:11px;color:var(--muted);padding-top:12px}
.before-after-originals{display:flex;gap:18px}.before-after-originals button,.before-after-mode{min-height:44px;padding:8px 0;background:none;border:0;color:var(--wine);font:inherit}
.before-after-mode{border-bottom:1px solid var(--line)}
.before-after-fallback{position:absolute;inset:25% 8%;z-index:4;padding:20px;background:var(--paper);font-size:14px;color:var(--wine)}
.before-after.is-unavailable .before-after-divider,.before-after.is-unavailable .before-after-label,.before-after.is-unavailable .before-after-range{display:none}
.project-story #transformation .transformation-story{grid-template-columns:1fr 2fr}
.before-after.is-side-by-side .before-after-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;cursor:default}
.before-after.is-side-by-side .before-after-mask{display:contents;clip-path:none}
.before-after.is-side-by-side .before-after-image{position:static;grid-row:1;grid-column:1;width:100%;height:100%;object-fit:contain}
.before-after.is-side-by-side .before-after-after{grid-column:2}
.before-after.is-side-by-side .before-after-divider,.before-after.is-side-by-side .before-after-range{display:none}
@media(max-width:1024px){.transformation-story,.project-story #transformation .transformation-story{grid-template-columns:1fr 2fr}}
@media(max-width:600px){.transformation-story,.project-story #transformation .transformation-story{grid-template-columns:1fr;gap:18px}.before-after-stage{max-height:430px}.before-after--portrait .before-after-stage{max-height:430px}.before-after-label{font-size:9px}.before-after-caption{font-size:10px}}