.project-page { background: #f5f7f9; }
.innerbar { position: relative; }
.project-hero { position: relative; height: min(760px,78vh); min-height: 560px; color: #fff; overflow: hidden; }
.project-hero > img { width: 100%; height: 100%; object-fit: cover; }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(17,23,28,.78),rgba(17,23,28,.04) 70%); }
.project-title { position: absolute; left: clamp(24px,7vw,110px); right: 24px; bottom: 65px; }
.project-title > a { display: inline-block; margin-bottom: 35px; font-size: 13px; font-weight: 600; }
.project-title h1 { font-size: clamp(62px,9vw,125px); text-transform: uppercase; letter-spacing: -.04em; }
.project-title .kicker { color: #9bc8eb; }
.project-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; padding: 100px clamp(24px,7vw,110px); }
.project-intro h2,.compare-section h2,.steps-section h2,.video-section h2,.project-cta h2 { font-size: clamp(44px,6vw,76px); text-transform: uppercase; }
.project-intro > div:last-child > p { font-size: 19px; color: #6d7176; }
.project-intro ul { padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; }
.project-intro li { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.compare-section { padding: 95px clamp(24px,7vw,110px); background: #4b4d52; color: #fff; }
.compare-section > h2 { margin-bottom: 45px; }
.comparison { position: relative; width: 100%; aspect-ratio: 16/8; overflow: hidden; background: #222; user-select: none; container-type: inline-size; }
.comparison.second { margin-top: 28px; aspect-ratio: 16/7; }
.comparison img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.after-wrap { position: absolute; inset: 0; width: var(--position); overflow: hidden; }
.after-wrap .after { width: 100cqw; max-width: none; }
.compare-line { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--position); width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; }
.compare-line b { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #73afe0; border: 3px solid #fff; transform: translate(-50%,-50%); font-size: 20px; }
.comparison input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .001; cursor: ew-resize; }
.label { position: absolute; z-index: 3; top: 20px; padding: 7px 11px; background: rgba(24,27,30,.75); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.before-label { right: 20px; }.after-label { left: 20px; }
.steps-section { padding: 100px clamp(24px,7vw,110px); }
.steps-head { margin-bottom: 45px; }
.steps-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.steps-grid figure { margin: 0; background: #fff; }
.steps-grid img { display: block; width: 100%; height: 520px; object-fit: cover; }
.steps-grid figcaption { padding: 18px 20px 22px; font-weight: 600; }
.steps-grid figcaption b { color: #73afe0; margin-right: 12px; }
.video-section { display: grid; grid-template-columns: 1fr minmax(280px,460px); gap: 80px; align-items: center; padding: 100px clamp(24px,7vw,110px); background: #e8edf1; }
.video-section > div > p:not(.kicker) { max-width: 520px; color: #6d7176; }
.video-section video { display: block; width: 100%; max-height: 700px; background: #111; box-shadow: 0 22px 60px rgba(24,34,42,.2); }
.final-gallery { display: grid; grid-template-columns: 1fr 1.7fr; gap: 12px; padding: 12px; background: #4b4d52; }
.final-gallery img { width: 100%; height: 650px; object-fit: cover; }
.project-cta { padding: 100px 24px; text-align: center; }
.project-cta h2 { margin-bottom: 30px; }
.project-cta .button { color: #fff; }
.comparison.portrait-compare { aspect-ratio: 16/8; }
.comparison.portrait-compare .after { object-position: center 58%; }
.cres-gallery { grid-template-columns: 1fr 1fr; }
.project-hero.fit-photo { background: #17191b; }
.project-hero.fit-photo > img { object-fit: contain; }
.comparison.opening-compare { aspect-ratio: 4/3; max-width: 960px; margin-inline: auto; }
.comparison.opening-compare img { object-fit: contain; background: #17191b; }
.comparison.mixed-compare img { object-fit: contain; background: #17191b; }
.project-note { padding: 70px clamp(24px,7vw,110px); background: #e8edf1; }
.project-note p:last-child { max-width: 760px; color: #62676c; font-size: 18px; }
@media(max-width:800px){.project-hero{min-height:520px}.project-intro,.video-section{grid-template-columns:1fr;gap:35px}.comparison,.comparison.second{aspect-ratio:4/3}.steps-grid{grid-template-columns:1fr}.steps-grid img{height:440px}.final-gallery{grid-template-columns:1fr}.final-gallery img{height:480px}}
@media(max-width:520px){.project-title{bottom:35px}.project-title> a{margin-bottom:24px}.project-intro,.compare-section,.steps-section,.video-section{padding:72px 20px}.project-intro ul{grid-template-columns:1fr}.comparison,.comparison.second{aspect-ratio:3/4}.steps-grid img{height:400px}.final-gallery img{height:420px}}