.projects-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,29,35,.96) 0%,rgba(24,29,35,.68) 46%,rgba(24,29,35,.22) 100%),url('../images/projects/completed-bathroom-05.webp') center/cover no-repeat; }
.project-stack { display:grid; gap:48px; }
.project-case { display:grid; grid-template-columns:.78fr 1.22fr; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; }
.project-case.reverse { grid-template-columns:1.22fr .78fr; }
.project-copy { padding:clamp(30px,5vw,56px); display:flex; flex-direction:column; justify-content:center; }
.project-copy h2 { color:var(--charcoal); font-size:clamp(2rem,4vw,3.1rem); line-height:1.07; letter-spacing:-.035em; margin:13px 0 18px; }
.project-copy p { color:var(--muted); margin-bottom:19px; }
.project-facts { display:flex; flex-wrap:wrap; gap:9px; }
.project-facts span { padding:7px 10px; background:var(--off-white); border:1px solid var(--border); color:var(--charcoal); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.comparison { --position:50%; position:relative; min-height:600px; overflow:hidden; background:var(--charcoal); }
.comparison > img, .comparison-before img { width:100%; height:100%; object-fit:cover; }
.comparison > img { position:absolute; inset:0; }
.comparison-before { position:absolute; inset:0 auto 0 0; width:var(--position); overflow:hidden; border-right:3px solid var(--white); }
.comparison-before img { width:calc(100vw); max-width:none; object-position:left center; }
.comparison input { position:absolute; inset:0; z-index:6; width:100%; height:100%; opacity:0; cursor:ew-resize; }
.comparison-handle { position:absolute; z-index:5; left:var(--position); top:50%; width:50px; height:50px; transform:translate(-50%,-50%); border-radius:50%; background:var(--white); color:var(--orange); display:grid; place-items:center; font-size:1.3rem; font-weight:900; box-shadow:0 5px 18px rgba(0,0,0,.25); }
.comparison-label { position:absolute; z-index:4; top:18px; padding:7px 11px; color:white; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:rgba(24,29,35,.92); }
.comparison-label.before { left:18px; }.comparison-label.after { right:18px; background:var(--orange); color:var(--charcoal-deep); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-button { position:relative; min-height:330px; border:0; overflow:hidden; background:var(--charcoal); }
.gallery-button img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.gallery-button:hover img { transform:scale(1.04); }
.gallery-button::after { content:"View"; position:absolute; inset:auto 14px 14px auto; padding:7px 10px; background:var(--orange); color:var(--charcoal-deep); font-size:.72rem; font-weight:900; text-transform:uppercase; }
.lightbox { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:28px; background:rgba(8,10,13,.94); }
.lightbox.is-open { display:grid; }
.lightbox img { max-height:86vh; max-width:min(1100px,92vw); box-shadow:0 22px 70px rgba(0,0,0,.55); }
.lightbox-close { position:absolute; top:20px; right:24px; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); background:transparent; color:white; font-size:1.6rem; }
.download-panel { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:35px; color:white; background:var(--charcoal); }
.download-panel p { color:rgba(255,255,255,.72); }
@media(max-width:900px){.project-case,.project-case.reverse{grid-template-columns:1fr}.project-case.reverse .project-copy{order:-1}.comparison{min-height:520px}.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.comparison{min-height:440px}.gallery-grid{grid-template-columns:1fr}.download-panel{grid-template-columns:1fr}}