.before-after{margin:0}.before-after-frame{aspect-ratio:3/2;position:relative;overflow:hidden;background:#e4ddd0;isolation:isolate}.before-after-image{width:100%;height:100%;position:absolute;inset:0;display:block;object-fit:cover;transition:opacity .36s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}.before-after-frame[data-view=after] .before-after-image-after,.before-after-frame[data-view=before] .before-after-image-before{opacity:1;transform:scale(1)}.before-after-frame[data-view=after] .before-after-image-before,.before-after-frame[data-view=before] .before-after-image-after{opacity:0;transform:scale(1.018);pointer-events:none}.before-after-state{position:absolute;left:18px;bottom:18px;z-index:2;padding:8px 11px;border-radius:999px;color:#fff8e9;background:rgba(18,60,50,.9);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.before-after-controls{margin-top:12px;display:flex;gap:8px}.before-after-controls button{min-width:88px;min-height:42px;padding:0 16px;border:1px solid #aabdb5;border-radius:999px;color:#49665e;background:transparent;font-size:14px;font-weight:800;cursor:pointer;transition:color .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease}.before-after-controls button:hover{border-color:#176b57;transform:translateY(-1px)}.before-after-controls button[aria-pressed=true]{border-color:#176b57;color:#fff8e9;background:#176b57}.before-after figcaption{max-width:760px;margin-top:12px;color:#61766f;font-size:13px;line-height:1.55}@media (max-width:600px){.before-after-state{left:12px;bottom:12px}.before-after-controls button{flex:1 1}}@media (prefers-reduced-motion:reduce){.before-after-controls button,.before-after-image{transition:none}}