/* before-after — styled from Figma frame 165:5553. */

.brand-shift { margin-top: 120px; }
.brand-shift .section-intro { max-width: 898px; }
.brand-shift__panel { position: relative; width: 900px; max-width: 100%; height: 399px; margin: 80px auto 0; overflow: hidden; background-color: #fff; background-image: var(--noise); }
.brand-shift__side { position: absolute; top: 0; margin: 0; height: 100%; }
.brand-shift__side--before { left: 0; width: 452px; }
.brand-shift__side--after { right: 0; width: 448px; background-color: rgba(232, 71, 59, 0.05); }
.brand-shift__label { position: absolute; top: 24px; left: 24px; display: inline-flex; box-sizing: border-box; width: 101px; height: 30px; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 3px 14px; border: 1px solid rgba(232,71,59,.22); border-radius: 999px; color: var(--coral); background: rgba(232,71,59,.05); font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 24px; backdrop-filter: blur(10px); }
.brand-shift__label::before { width: 8px; height: 8px; content: ""; border-radius: 50%; background: currentColor; }
.brand-shift__side img { position: absolute; top: 102px; left: 24px; width: 404px; height: 273px; object-fit: cover; }
.brand-shift__side--after img { left: 22px; }

/* The frame sets this heading on one line, over a shorter lede. */
body.branding-page .brand-shift .section-intro h2 { margin-top: 32px; font-size: 46px; line-height: 46px; }
body.branding-page .brand-shift .section-intro > p:last-of-type:not(.eyebrow) { margin-top: 32px; font-size: 16px; line-height: 20px; }