.compare-page { background:#eee8df; }
.compare-hero { position:relative; min-height:500px; color:#fff; background:url("assets/after/living-kitchen-final.png") center/cover; }
.compare-hero::before { content:""; position:absolute; inset:0; background:rgba(31,47,40,.84); }
.compare-hero .nav,.compare-hero-content { position:relative; z-index:1; }
.compare-hero-content { max-width:1240px; margin:0 auto; padding:105px 28px 70px; }
.compare-hero h1 { max-width:900px; margin-bottom:20px; }
.compare-main { max-width:1320px; margin:0 auto; }
.compare-intro { padding-top:72px; padding-bottom:30px; border-bottom:0; }
.compare-intro .section-heading { max-width:760px; margin-bottom:0; }
.compare-list { padding-top:20px; }
.interactive-list { display:grid; gap:42px; }
.interactive-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--paper-2); box-shadow:0 12px 26px rgba(42,36,29,.07); }
.interactive-card-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px 16px; }
.interactive-card-header h3 { margin:0; color:var(--green); font-size:22px; }
.compare-index { color:var(--brass); font:700 12px/1 monospace; letter-spacing:.08em; }
.compare-stage { --split:50%; position:relative; width:100%; aspect-ratio:16/10; min-height:420px; overflow:hidden; background:#ded8cf; isolation:isolate; }
.compare-stage img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#ded8cf; }
.compare-stage .after-image { clip-path:inset(0 0 0 var(--split)); }
.compare-side-label { position:absolute; top:18px; z-index:2; padding:7px 11px; border-radius:4px; background:rgba(32,32,30,.78); color:#fff; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; pointer-events:none; }
.compare-side-label.before { left:18px; }
.compare-side-label.after { right:18px; background:rgba(41,72,61,.88); }
.compare-handle { position:absolute; top:0; bottom:0; left:var(--split); z-index:3; width:3px; transform:translateX(-50%); background:#fff; box-shadow:0 0 0 1px rgba(32,32,30,.18),0 0 16px rgba(32,32,30,.28); pointer-events:none; }
.compare-handle::before { content:""; position:absolute; top:50%; left:50%; width:58px; height:58px; transform:translate(-50%,-50%); border:3px solid #fff; border-radius:50%; background:var(--green); box-shadow:0 5px 18px rgba(32,32,30,.28); }
.compare-handle::after { content:"↔"; position:absolute; top:50%; left:50%; z-index:1; transform:translate(-50%,-53%); color:#fff; font-size:26px; font-weight:400; line-height:1; }
.compare-range { position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; cursor:ew-resize; opacity:0; appearance:none; -webkit-appearance:none; }
.compare-range:focus-visible { opacity:.08; outline:3px solid var(--brass); outline-offset:-4px; background:var(--brass); }
.interactive-card-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:17px 22px 20px; }
.interactive-card-footer p { max-width:760px; margin:0; color:var(--muted); font-size:14px; }
.compare-position { flex:0 0 auto; color:var(--green); font-size:12px; font-weight:750; white-space:nowrap; }
@media (max-width:900px) { .compare-stage { min-height:360px; } }
@media (max-width:620px) { .compare-hero { min-height:470px; } .compare-hero-content { padding:90px 18px 58px; } .compare-main .section { padding-left:18px; padding-right:18px; } .compare-intro { padding-top:56px; } .compare-stage { aspect-ratio:4/3; min-height:280px; } .interactive-card-header { align-items:flex-start; padding:15px 16px 13px; } .interactive-card-header h3 { font-size:18px; } .interactive-card-footer { display:block; padding:14px 16px 17px; } .compare-position { display:block; margin-top:10px; } .compare-side-label { top:12px; padding:6px 8px; font-size:10px; } .compare-side-label.before { left:12px; } .compare-side-label.after { right:12px; } }