/* V57: expansive, editorial Our Work; labels follow the actual before/after wipe. */
body .v57-case-study .v20-work-wrap{max-width:none!important;width:calc(100% - clamp(36px,5vw,120px))!important;margin:0 auto!important}
body .v57-case-study .v57-story-grid{max-width:1500px;margin:clamp(32px,4vw,68px) auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,65px) clamp(30px,5vw,120px)}
body .v57-story-item h3{font-size:clamp(18px,1.6vw,25px);letter-spacing:-.035em;margin:0 0 13px;color:#f5f5f5}
body .v57-story-item p{font-size:clamp(15px,1.12vw,18px);line-height:1.75;color:#b9bbbe;max-width:780px;margin:0}
body .v57-case-study .v57-wide-gallery{max-width:none!important;width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(12px,1.5vw,28px)!important;margin:clamp(35px,4vw,70px) auto 22px!important}
body .v57-case-study .v57-wide-gallery figure{width:100%;min-width:0}
body .v57-case-study .v57-wide-gallery .v22-compare,body .v57-case-study .v57-wide-gallery video{width:100%!important;aspect-ratio:16/9!important;max-height:none!important;object-fit:cover}
body .v57-case-study .v57-wide-gallery figcaption{margin-top:12px;font-size:13px;color:#a9adb2;letter-spacing:.03em}
body .v57-facts-row{display:flex;flex-wrap:wrap;gap:14px 35px;font-size:12px;letter-spacing:.12em;color:#aeb1b6;margin:22px 0}
body .v57-project-facts{max-width:none!important;margin:20px 0 0!important;color:#c5c7c9;font-size:15px;line-height:1.65}
body .v57-project-facts strong{display:block;color:#f2f2f2;letter-spacing:.12em;font-size:11px;margin-bottom:6px}
body .v57-titles{border-top:1px solid #27292d;padding:clamp(70px,8vw,150px) clamp(24px,5vw,100px)}
body .v57-titles-inner{max-width:1550px;margin:auto}
body .v57-titles h2{font-size:clamp(38px,5.6vw,100px);line-height:1.06;letter-spacing:-.065em;max-width:1100px;margin:24px 0}
body .v57-titles-intro{font-size:clamp(16px,1.35vw,20px);color:#b3b5b8;max-width:900px;line-height:1.7}
body .v57-title-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:60px 0 25px;border-top:1px solid #383b40}
body .v57-title-grid>div{border-bottom:1px solid #383b40;padding:34px 25px 38px 0;min-height:175px}
body .v57-title-grid span{font-size:11px;letter-spacing:.15em;color:#8f9297}
body .v57-title-grid h3{font-size:clamp(21px,2vw,32px);font-weight:600;line-height:1.25;margin:18px 0 0;letter-spacing:-.04em}
body .v57-titles-note{color:#909398;font-size:13px;line-height:1.6}
body .v57-title-cta{display:inline-block;margin-top:40px;color:#fff;text-decoration:none;border-bottom:1px solid #8a8d90;padding-bottom:9px}
/* Labels are drawn inside each clipped image layer: they disappear as that layer wipes away. */
body .v22-compare .v22-label{display:none!important}
body .v22-compare .v22-before:after,body .v22-compare .v22-after:after{position:absolute;top:16px;padding:8px 12px;background:#000b;color:#fff;font:700 11px 'DM Sans',sans-serif;letter-spacing:.15em;pointer-events:none;z-index:2}
body .v22-compare .v22-before:after{content:'BEFORE';left:16px}
body .v22-compare .v22-after:after{content:'AFTER';right:16px;clip-path:inset(0 0 0 0)}
/* The right label should vanish when the right-hand image is covered by the left. */
body .v22-compare .v22-after:after{opacity:1}
body .v22-compare:has(input[value="100"]) .v22-after:after{opacity:0}
@media(max-width:800px){body .v57-case-study .v57-story-grid,body .v57-case-study .v57-wide-gallery{grid-template-columns:1fr!important}body .v57-title-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body .v57-case-study .v20-work-wrap{width:calc(100% - 32px)!important}}
@media(max-width:540px){body .v57-title-grid{grid-template-columns:1fr}body .v57-title-grid>div{min-height:0;padding:28px 0}}