.comparison-section { padding:64px 0 90px; }
/* A long mobile gallery must not depend on a section-wide reveal threshold. */
.clinic-inner.comparison-page main>.comparison-section { opacity:1; transform:none; transition:none; }
.clinic-inner.comparison-page .comparison-layer img { max-width:none; }
.comparison-intro { max-width:680px; margin:0 0 32px; }
.comparison-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.comparison-section>.clinic-shell { width:min(1440px,calc(100% - 64px)); }
.comparison-card { min-width:0; padding:20px; border:1px solid #e5d9cf; background:#fffdfa; border-radius:16px; }
.comparison-heading { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:32px; }
.gallery-eyebrow { font-size:10px; letter-spacing:.16em; color:#875143; }
.clinic-inner .comparison-heading h2 { font:400 26px/1.35 Georgia,serif; margin:12px 0 0; }
.comparison-heading .comparison-intro { max-width:360px; margin:0; }
.comparison-card-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:15px; font-size:10px; letter-spacing:.06em; color:#62534d; }
.comparison-stage { height:380px; display:flex; align-items:center; justify-content:center; background:#eee7e0; border-radius:10px; overflow:hidden; }
.comparison-stage .comparison { width:min(100%,calc(380px * var(--photo-ratio))); flex:none; border-radius:0; box-shadow:none; }
.comparison-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.comparison { position:relative; width:100%; aspect-ratio:var(--photo-ratio); background:#eee4dd; border-radius:22px; overflow:hidden; isolation:isolate; box-shadow:0 12px 28px rgba(38,40,63,.1); }
.comparison-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.comparison-layer img { position:absolute; top:0; width:200%; max-width:none; height:100%; object-fit:fill; user-select:none; }
.comparison-before { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.comparison-before img { left:0; }
.comparison-after img { right:0; }
.comparison-label { position:absolute; top:14px; padding:7px 12px; border-radius:20px; font:600 10px/1 Poppins,sans-serif; text-transform:uppercase; pointer-events:none; color:#fff; }
.label-before { left:12px; background:rgba(32,34,54,.8); }
.label-after { right:12px; background:#9c5145; }
.comparison-divider { position:absolute; left:var(--split); top:0; bottom:0; width:2px; background:white; transform:translateX(-50%); pointer-events:none; }
.comparison-divider>span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#26283f; font:24px/1 sans-serif; box-shadow:0 2px 15px #0003; }
.comparison-range { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; padding:0; cursor:ew-resize!important; touch-action:pan-y; }
.comparison-vertical .comparison-before { clip-path:inset(0 0 calc(100% - var(--split)) 0); }
.comparison-vertical .comparison-divider { left:0; right:0; top:var(--split); bottom:auto; width:100%; height:2px; transform:translateY(-50%); }
.comparison-vertical .label-after { top:auto; bottom:14px; }
.comparison-vertical .comparison-range { cursor:ns-resize!important; touch-action:pan-x; }
.comparison:focus-within { outline:3px solid #a85e4d; outline-offset:5px; }
.comparison-caption { padding:18px 0 0; }
.clinic-inner .comparison-caption h3 { font-size:16px; font-weight:400; line-height:1.5; margin:0 0 6px; }
.comparison-caption a { color:#875143; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.clinic-inner.comparison-page .page-breadcrumb { padding:32px 0; }
.clinic-inner.comparison-page .page-breadcrumb h2 { font-size:28px; line-height:1.3; letter-spacing:0; }
.clinic-inner.comparison-page .page-breadcrumb p { font-size:13px; margin:8px 0 0; }
.clinic-inner.comparison-page .comparison-intro { font-size:13px; line-height:1.7; }
.comparison-page .page-breadcrumb:before,.comparison-page .page-breadcrumb:after { display:none; }
@media(max-width:991px) { .comparison-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .comparison-grid { grid-template-columns:1fr; gap:24px; } .comparison-section { padding:40px 0 60px; } .comparison-heading { display:block; } .comparison-heading .comparison-intro { margin-top:16px; } .comparison-card { padding:14px; } .comparison-stage { height:320px; } .comparison-stage .comparison { width:min(100%,calc(320px * var(--photo-ratio))); } .comparison-caption { flex-wrap:wrap; } }