.site-transformation{max-width:1084px;margin:5rem auto;padding:0;scroll-margin-top:110px}
.site-transformation .transformation-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:end;margin-bottom:1.6rem}
.site-transformation .transformation-eyebrow{font:700 1.8rem/1.2 'Dancing Script',cursive;color:#7b5804;margin:0 0 .6rem}
.site-transformation h2{font:700 clamp(1.8rem,3vw,2.7rem)/1.12 'Playfair Display',serif;color:#530001;margin:0}
.site-transformation .transformation-heading>p{font:400 1rem/1.7 Inter,sans-serif;color:#4e4637;margin:0}
.site-transformation figure{margin:0}
.site-transformation .comparison-frame{position:relative;padding:11px;border:1px solid #b78b3e;border-radius:34px;background:#fff8f0;box-shadow:0 12px 36px #53000112}
.site-transformation .comparison-frame::before{content:"";position:absolute;inset:5px;border:1px solid #53000170;border-radius:29px;pointer-events:none}
.site-transformation .frame-flourish{position:absolute;width:29px;height:29px;color:#977023;background:#fff8f0;border-radius:50%;z-index:2;pointer-events:none}
.site-transformation .top-left{top:1px;left:1px}.site-transformation .top-right{top:1px;right:1px;transform:rotate(90deg)}
.site-transformation .bottom-left{bottom:1px;left:1px;transform:rotate(-90deg)}.site-transformation .bottom-right{bottom:1px;right:1px;transform:rotate(180deg)}
.site-transformation .compare{position:relative;aspect-ratio:8/5;overflow:hidden;border-radius:23px;background:#fbf3e6;touch-action:pan-y;cursor:ew-resize;isolation:isolate}
.site-transformation .compare img{position:absolute;width:100%;height:100%;max-width:none;inset:0;object-fit:fill;user-select:none;pointer-events:none}
.site-transformation .compare .before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.site-transformation .divider{position:absolute;inset:0;pointer-events:none}
.site-transformation .divider::before{content:"";position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff8f0;transform:translateX(-50%);box-shadow:0 0 8px #53000155}
.site-transformation .handle{position:absolute;top:50%;left:clamp(var(--handle-inset,30px),var(--split),calc(100% - var(--handle-inset,30px)));transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff8f0;color:#530001;display:flex;align-items:center;justify-content:space-evenly;font-size:28px;box-shadow:0 3px 14px #53000133}
.site-transformation .handle span{height:20px;width:1px;background:#7b580455}
.site-transformation .compare-keyboard{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-transformation .compare:focus-within{outline:3px solid #7b5804;outline-offset:-3px}
.site-transformation .compare:focus-within .handle{outline:3px solid #530001;outline-offset:3px}
.site-transformation .compare:focus-within .divider{visibility:visible}
.site-transformation figcaption{margin-top:14px;font:400 .75rem/1.6 Inter,sans-serif;color:#4e4637}
@media(max-width:1190px){.site-transformation{margin-left:3rem;margin-right:3rem}}
@media(max-width:800px){
 .site-transformation{margin:3.5rem 1.25rem}.site-transformation .transformation-heading{grid-template-columns:1fr;gap:.8rem}
 .site-transformation .comparison-frame{padding:8px;border-radius:25px}.site-transformation .comparison-frame::before{inset:4px;border-radius:21px}
 .site-transformation .frame-flourish{width:23px;height:23px}.site-transformation .compare{border-radius:16px;--handle-inset:26px}.site-transformation .handle{width:44px;height:44px}
}