/* Real photographs retain their original composition. Only the BEFORE layer is generated. */
#before-after { padding-block:36px; scroll-margin-top:-24px; }
#before-after .before-after-head { grid-template-columns:1fr 1fr; align-items:center; gap:40px; margin-bottom:22px; }
#before-after .label { margin-bottom:10px; }
#before-after h2 { font-size:2.125rem; line-height:1.15; }
#before-after .lead { font-size:.9375rem; line-height:1.65; }
#before-after .showcase-tabs { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
#before-after .showcase-tab { display:flex; align-items:center; gap:16px; position:relative; text-align:left; padding:10px; border:1px solid #626262; border-radius:12px; background:#2b2b2b; color:#fff; min-width:0; }
#before-after .showcase-tab[aria-selected="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:#32312b; }
#before-after .showcase-tab:hover { border-color:#d4d4d4; }
#before-after .showcase-tab[aria-selected="true"]:hover { border-color:var(--accent); }
#before-after .showcase-tab img { width:112px; aspect-ratio:1.5; object-fit:contain; border-radius:6px; flex-shrink:0; }
#before-after .showcase-tab-copy { display:grid; gap:4px; padding-right:28px; }
#before-after .showcase-tab-copy>span { font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase; line-height:1.5; color:#c4c4c4; }
#before-after .showcase-tab-copy strong { font-size:1rem; line-height:1.4; font-weight:500; }
#before-after .showcase-tab-copy small { font-size:.75rem; line-height:1.5; color:#c4c4c4; }
#before-after .showcase-tab-mark { display:none; position:absolute; right:16px; color:var(--accent); font-size:1.125rem; }
#before-after .showcase-tab[aria-selected="true"] .showcase-tab-mark { display:block; }
#before-after .showcase-panel+.showcase-panel { margin-top:32px; }
#before-after .showcase-fallback-title { margin-bottom:16px; font-size:1.25rem; }
#before-after .showcase-layout { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:24px; align-items:start; }
#before-after .showcase-main { min-width:0; }
#before-after .showcase-comparison { background:#303030; border-radius:12px; overflow:hidden; }
#before-after .showcase-frame-labels { display:flex; justify-content:space-between; gap:16px; padding:11px 16px; font-size:.875rem; font-weight:500; }
#before-after .showcase-frame-labels small { color:#c5c5c5; font-size:.6875rem; font-weight:400; }
#before-after .showcase-scene { position:relative; display:grid; grid-template-columns:1fr 1fr; }
#before-after .showcase-scene figure { min-width:0; }
#before-after .showcase-scene img { display:block; width:100%; height:auto; aspect-ratio:1.5; object-fit:contain; filter:none; }
#before-after .showcase-before { order:-1; }
#before-after .showcase-scene figcaption { padding:8px; color:#ddd; font-size:.75rem; }
#before-after .showcase-divider { display:none; }
#before-after .showcase-details { display:grid; gap:16px; }
#before-after .showcase-details figure { margin:0; min-width:0; }
#before-after .showcase-details img { width:100%; aspect-ratio:1.5; object-fit:contain; border-radius:10px; filter:none; }
#before-after .showcase-details figcaption { display:grid; gap:3px; padding-top:8px; }
#before-after .showcase-details figcaption span { color:#bdbdbd; font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; line-height:1.5; }
#before-after .showcase-details figcaption strong { font-size:.8125rem; line-height:1.45; font-weight:500; }
#before-after .showcase-compare-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; }
#before-after .showcase-compare-footer p { color:#bdbdbd; font-size:.75rem; line-height:1.5; }
#before-after .showcase-view-controls { display:flex; gap:4px; flex-shrink:0; }
#before-after .showcase-view-controls button { min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:6px; background:transparent; color:#d4d4d4; font-size:.75rem; line-height:1.4; }
#before-after .showcase-view-controls button[aria-pressed="true"] { background:#3a3a3a; color:#fff; }
#before-after .showcase-view-controls button:hover { border-color:#777; }
#before-after .showcase-note { margin-top:14px; padding-top:14px; border-top:1px solid #454545; color:#bdbdbd; font-size:.75rem; line-height:1.65; max-width:none; }
#before-after button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

#before-after.showcase-ready .showcase-panel+.showcase-panel { margin-top:0; }
#before-after.showcase-ready .showcase-fallback-title { position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); }
#before-after.showcase-ready .showcase-scene { display:block; aspect-ratio:1.5; }
#before-after.showcase-ready .showcase-scene figure { position:absolute; inset:0; }
#before-after.showcase-ready .showcase-scene figcaption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#before-after.showcase-ready .showcase-scene img { width:100%; height:100%; }
#before-after.showcase-ready .showcase-before { clip-path:inset(0 calc(100% - var(--reveal)) 0 0); }
#before-after.showcase-ready .showcase-divider { display:block; position:absolute; z-index:2; pointer-events:none; left:var(--reveal); top:0; bottom:0; width:2px; background:white; transform:translateX(-1px); box-shadow:0 0 8px #0004; }
#before-after.showcase-ready .showcase-divider span { display:grid; place-items:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:white; color:#222; font-size:1.5rem; box-shadow:0 2px 14px #0003; }
#before-after .showcase-range { position:absolute; z-index:3; inset:0 auto 0 -22px; width:calc(100% + 44px); height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; -webkit-appearance:none; appearance:none; }
#before-after .showcase-range::-webkit-slider-thumb { -webkit-appearance:none; width:44px; height:44px; }
#before-after .showcase-range::-moz-range-thumb { width:44px; height:44px; border:0; }
#before-after .showcase-scene:has(.showcase-range:focus-visible) { outline:3px solid var(--accent); outline-offset:-3px; }
#before-after .showcase-comparison[data-edge="true"] .showcase-divider { opacity:0; }

@media(min-width:1001px) and (max-height:750px) {
  #before-after { padding-block:22px; }
  #before-after .before-after-head { margin-bottom:16px; }
  #before-after h2 { font-size:1.875rem; }
  #before-after .showcase-tabs { margin-bottom:16px; }
  #before-after .showcase-tab img { width:92px; }
  #before-after .showcase-tab { padding:8px; }
}
@media(max-width:1100px) {
  #before-after .showcase-tab-copy small { display:none; }
  #before-after .showcase-tab-copy { padding-right:20px; }
  #before-after .showcase-tab-mark { right:12px; }
}
@media(max-width:900px) {
  #before-after { padding-block:40px; }
  #before-after .before-after-head { grid-template-columns:1fr; gap:16px; }
  #before-after .showcase-layout { grid-template-columns:1fr; gap:20px; }
  #before-after .showcase-details { grid-template-columns:1fr 1fr; gap:24px; }
  #before-after .showcase-tab { gap:12px; }
  #before-after .showcase-tab img { width:86px; }
  #before-after .showcase-tab-copy strong { font-size:.9375rem; }
  #before-after .showcase-note { margin-top:24px; font-size:.8125rem; }
}
@media(max-width:600px) {
  #before-after h2 { font-size:1.875rem; }
  #before-after .showcase-tabs { gap:10px; }
  #before-after .showcase-tab { display:grid; grid-template-columns:1fr; gap:8px; align-content:start; padding:8px; }
  #before-after .showcase-tab img { width:100%; aspect-ratio:1.5; }
  #before-after .showcase-tab-copy { padding:0 0 4px; gap:5px; }
  #before-after .showcase-tab-copy>span { font-size:.625rem; letter-spacing:0; }
  #before-after .showcase-tab-copy strong { font-size:.8125rem; }
  #before-after .showcase-tab-mark { right:13px; top:13px; width:22px; height:22px; border-radius:50%; text-align:center; line-height:22px; background:var(--accent); color:#262626; font-size:.875rem; }
  #before-after .showcase-frame-labels { padding:10px; gap:8px; font-size:.8125rem; }
  #before-after .showcase-frame-labels small { font-size:.625rem; }
  #before-after .showcase-compare-footer { display:grid; gap:4px; justify-content:center; text-align:center; margin-top:10px; }
  #before-after .showcase-view-controls { justify-content:center; }
  #before-after .showcase-view-controls button { min-width:68px; }
  #before-after .showcase-details { gap:12px; }
  #before-after .showcase-details figcaption strong { font-size:.75rem; line-height:1.55; }
  #before-after .showcase-details figcaption span { font-size:.625rem; }
}
@media print {
  #before-after .showcase-tabs,#before-after .showcase-compare-footer,#before-after .showcase-divider,#before-after .showcase-range { display:none!important; }
  #before-after .showcase-panel[hidden] { display:block!important; }
  #before-after.showcase-ready .showcase-scene { display:grid; grid-template-columns:1fr 1fr; aspect-ratio:auto; }
  #before-after.showcase-ready .showcase-scene figure { position:static; clip-path:none; }
}