.transformation-section { background: #efe4da; }
.transformation-layout { display: grid; grid-template-columns: 0.85fr 1fr; align-items: center; gap: clamp(32px, 6vw, 88px); }
.transformation-copy h2 { max-width: 9em; margin-top: 16px; }
.transformation-copy p { max-width: 34em; }
.transformation-copy .wp-block-buttons { margin-top: 28px; }
.ss-comparison { --comparison-position: 80%; min-width: 0; }
.ss-comparison-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 180px 180px 20px 20px; background: #faf7f5; }
.ss-comparison-photo { min-width: 0; aspect-ratio: 4 / 5; background: #faf7f5; }
.ss-comparison-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ss-comparison-before { order: -1; }
.ss-comparison-placeholder { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px; text-align: center; color: #65595a; background: #e6d6ce; }
.ss-comparison-after .ss-comparison-placeholder { background: #eac8cd; }
.ss-comparison-placeholder span { font: 1.6rem Georgia, serif; }
.ss-comparison-placeholder small { max-width: 10em; line-height: 1.5; }
.ss-comparison-tag { position: absolute; bottom: 20px; z-index: 2; border-radius: 99px; padding: 5px 16px; background: #faf7f5; color: #30292a; font-size: .8rem; font-weight: 700; pointer-events: none; }
.ss-comparison-tag-before { left: 20px; }
.ss-comparison-tag-after { right: 20px; }
.ss-comparison-divider { display: none; }
.ss-comparison.is-ready .ss-comparison-stage { display: block; aspect-ratio: 4 / 5; touch-action: pan-y; cursor: ew-resize; user-select: none; }
.ss-comparison.is-ready .ss-comparison-photo { position: absolute; inset: 0; aspect-ratio: auto; }
.ss-comparison.is-ready .ss-comparison-before { clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0); }
.ss-comparison.is-ready .ss-comparison-divider { display: block; position: absolute; top: 0; bottom: 0; left: var(--comparison-position); width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; }
.ss-comparison-divider span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #faf7f5; color: #8c4655; font-size: 24px; box-shadow: 0 3px 16px #30292a26; }
/* Keep the native range available to keyboards and screen readers; the photo handle is the visible control. */
.ss-comparison-controls { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ss-comparison:has(input:focus-visible) .ss-comparison-stage { outline: 2px solid #8c4655; outline-offset: 4px; }
@media (min-width: 782px) {
  .ss-comparison { width: 80%; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 781px) {
  .transformation-layout { grid-template-columns: 1fr; }
  .transformation-copy h2 { max-width: 12em; }
  .ss-comparison { width: 100%; max-width: 540px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .ss-comparison { width: 82%; max-width: 300px; }
}