.project-comparison{background:#f3f5f2;color:var(--navy)}
.comparison-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:52px;align-items:end;margin-bottom:42px}.comparison-head .lead{margin:0;color:var(--muted)}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.comparison-card{background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px rgba(7,31,51,.07);overflow:hidden}.comparison-card-body{padding:25px 28px 28px}.comparison-card h3{margin:0 0 9px;font:400 26px/1.15 Georgia,serif}.comparison-card p{margin:0;color:var(--muted);line-height:1.6}
.compare-frame{--position:50%;position:relative;aspect-ratio:295/176;overflow:hidden;background:#d9deda;isolation:isolate}.compare-frame.commercial{aspect-ratio:295/147}.compare-image{position:absolute;inset:0;background-repeat:no-repeat;background-size:265.42% auto}.outdoor-after{background-image:url('assets/booklets/projects/page-5.jpg');background-position:86.5% 84.4%}.outdoor-before{background-image:url('assets/booklets/projects/page-5.jpg');background-position:12.7% 84.4%}.commercial-after{background-image:url('assets/booklets/projects/page-4.jpg');background-position:78.5% 92.5%}.commercial-before{background-image:url('assets/booklets/projects/page-4.jpg');background-position:13.3% 92.5%}.compare-before{position:absolute;inset:0;overflow:hidden;width:var(--position);z-index:2}.compare-before .compare-image{width:calc(100% / (var(--position-decimal, .5)));min-width:100%}
.compare-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--position);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(7,31,51,.15)}.compare-handle{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;background:var(--green);border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 6px 18px rgba(7,31,51,.28)}.compare-handle:before,.compare-handle:after{content:'';position:absolute;top:50%;width:7px;height:7px;border-top:2px solid #fff;border-left:2px solid #fff}.compare-handle:before{left:10px;transform:translateY(-50%) rotate(-45deg)}.compare-handle:after{right:10px;transform:translateY(-50%) rotate(135deg)}
.compare-range{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.compare-label{position:absolute;z-index:3;top:16px;padding:8px 11px;background:rgba(7,31,51,.9);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}.compare-label.before{left:16px}.compare-label.after{right:16px}.compare-range:focus-visible+.compare-focus{position:absolute;z-index:5;inset:5px;border:3px solid var(--green);pointer-events:none}
.comparison-source{margin:24px 0 0;color:#6d7b84;font-size:12px;line-height:1.6}.comparison-source strong{color:var(--navy)}
@media(max-width:850px){.comparison-head,.comparison-grid{grid-template-columns:1fr}.comparison-head{gap:20px}.comparison-grid{max-width:650px;margin:auto}}@media(max-width:520px){.comparison-card-body{padding:22px}.compare-label{top:10px}.compare-label.before{left:10px}.compare-label.after{right:10px}.compare-handle{width:40px;height:40px}}

/* PREMIUM COMPARISON V2 */
.comparison-grid{gap:clamp(22px,3vw,38px)}
.comparison-card{border-color:rgba(7,31,51,.14);box-shadow:0 24px 65px rgba(7,31,51,.09);transition:transform .3s ease,box-shadow .3s ease}
.comparison-card:hover{transform:translateY(-4px);box-shadow:0 30px 72px rgba(7,31,51,.13)}
.compare-frame:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.compare-label{top:14px;padding:8px 12px;background:rgba(5,25,42,.82);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.compare-label.after{background:rgba(79,145,53,.9)}
.compare-divider{width:1px;background:rgba(255,255,255,.92)}
.compare-handle{width:48px;height:48px;background:#071d31;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 5px rgba(255,255,255,.18),0 10px 30px rgba(2,16,28,.38)}
.compare-handle:before,.compare-handle:after{border-color:#8dcc68}
.compare-instruction{position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 10px;color:#fff;background:rgba(5,25,42,.72);border:1px solid rgba(255,255,255,.2);font-size:8px;font-weight:800;letter-spacing:.16em;white-space:nowrap;pointer-events:none;backdrop-filter:blur(7px)}
.compare-frame:focus-within .compare-instruction,.compare-frame:hover .compare-instruction{opacity:0;transition:opacity .2s}
@media(max-width:520px){.comparison-card:hover{transform:none}.compare-instruction{bottom:10px}.compare-handle{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.comparison-card{transition:none}.comparison-card:hover{transform:none}}