.project-showcase{padding:110px 6vw 120px;background:#0d0d0d;color:#fff}
.project-showcase h2{font:500 clamp(2.3rem,4vw,4.5rem)/1.08 Manrope;letter-spacing:-.045em;margin:0}
.showcase-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;align-items:end;max-width:1500px;margin:0 auto 55px}
.showcase-heading>p{color:#aaa;line-height:1.7;margin:0;max-width:520px}
.case-services{max-width:1500px;margin:-28px auto 45px;display:flex;flex-wrap:wrap;gap:10px}
.case-services span{border:1px solid #343434;color:#d5d5d5;padding:10px 14px;font-size:.78rem;letter-spacing:.02em}
.showcase-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;max-width:1500px;margin:0 auto}
.showcase-grid figure{margin:0}
.showcase-video{grid-row:span 2;background:#050505;display:flex;flex-direction:column;min-height:620px}
.showcase-video--wide{grid-column:1/-1;grid-row:auto;min-height:0}
.showcase-video--wide video{min-height:0;max-height:760px}
.showcase-video video{display:block;width:100%;height:100%;min-height:540px;object-fit:contain;background:#050505}
.showcase-card,.before-after-slider{background:#171717;overflow:hidden}
.showcase-card img{width:100%;height:330px;display:block;object-fit:cover}
.showcase-card--detail img{height:380px}
.case-photo{overflow:hidden;background:#171717}
.case-photo img{object-position:center top}
.showcase-card.case-photo img{height:430px}
.case-details{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.case-details--single{grid-template-columns:minmax(0,1fr);max-width:none;width:100%;margin-inline:0}
.case-details figure{margin:0}
.case-details .case-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.case-details .case-photo video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#0b0b0b}
.case-videos{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr);gap:18px;align-items:stretch}
.project-video{margin:0;background:#050505;display:flex;flex-direction:column;overflow:hidden}
.project-video video{display:block;width:100%;height:100%;background:#050505;object-fit:contain}
.project-video--landscape video{aspect-ratio:16/9}
.project-video--portrait video{aspect-ratio:9/16;max-height:720px}
.showcase-grid figcaption{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:18px 20px;color:#fff}
.showcase-grid figcaption span{font:600 .95rem Manrope}
.showcase-grid figcaption small{color:#999;font-size:.72rem;text-align:right}
.before-after-slider{grid-column:1/-1;margin:0}
.comparison-stage{position:relative;aspect-ratio:1536/870;overflow:hidden;background:#111;isolation:isolate;touch-action:pan-y}
.before-after-slider--bedroom .comparison-stage{aspect-ratio:16/10}
.before-after-slider--bedroom .comparison-image{object-position:center 38%}
.before-after-slider--corridor .comparison-stage{aspect-ratio:16/10}
.before-after-slider--corridor .comparison-image{object-position:center 46%}
.before-after-slider--corridor .comparison-image--before{left:-9%;width:118%;max-width:none}
.comparison-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.comparison-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--position)) 0 0);z-index:2}
.comparison-divider{position:absolute;z-index:4;top:0;bottom:0;left:var(--position);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.16),0 0 20px rgba(0,0,0,.36);transform:translateX(-50%);pointer-events:none}
.comparison-handle{position:absolute;top:50%;left:50%;width:48px;height:48px;border:3px solid #fff;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:rgba(10,10,10,.72);box-shadow:0 5px 22px rgba(0,0,0,.4);font:600 1.25rem/1 Manrope;letter-spacing:.08em}
.comparison-badge{position:absolute;z-index:3;top:18px;padding:8px 12px;background:rgba(8,8,8,.75);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);font:600 .76rem Manrope;text-transform:uppercase;letter-spacing:.12em;pointer-events:none}
.comparison-badge--before{left:18px}.comparison-badge--after{right:18px}
.comparison-range{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.comparison-range:focus-visible{opacity:1;height:6px;top:50%;bottom:auto;accent-color:#fff}
.before-after-slider figcaption{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:18px 20px;color:#fff}
.before-after-slider figcaption span{font:600 .95rem Manrope}.before-after-slider figcaption small{color:#999;font-size:.72rem;text-align:right}
.construction-progress{background:#0d0d0d}
.construction-progress__stage{aspect-ratio:16/9;background:#0d0d0d}
.construction-progress__image{position:absolute;top:50%;left:50%;width:118%;height:178%;object-fit:cover;object-position:center 50%;transform:translate(-50%,-50%);user-select:none;pointer-events:none}
.construction-progress__image--shell{opacity:var(--middle-opacity);z-index:1}
.construction-progress__image--finish{opacity:var(--final-opacity);z-index:2}
.construction-progress__label{position:absolute;z-index:4;top:18px;color:#fff;font:600 .72rem/1.2 Manrope;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.95);pointer-events:none}
.construction-progress__label--start{left:20px}.construction-progress__label--middle{left:50%;transform:translateX(-50%)}.construction-progress__label--end{right:20px}
.construction-progress__track{position:absolute;z-index:4;left:20px;right:20px;bottom:22px;height:2px;background:rgba(255,255,255,.45);pointer-events:none}
.construction-progress__thumb{position:absolute;top:50%;left:var(--position);width:16px;height:16px;border-radius:50%;background:#c7a26a;box-shadow:0 2px 12px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
.construction-progress__range{z-index:5}
.sequence-progress{background:#0d0d0d}
.sequence-progress__stage{aspect-ratio:16/10;background:#0d0d0d}
.sequence-progress__image{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .12s linear;user-select:none;pointer-events:none}
.sequence-progress__image:first-child{opacity:1}
.pool-progress .construction-progress__label,.pool-progress .construction-progress__track{z-index:3}
.showcase-card--detail,.showcase-card--wide{grid-column:2}
[dir="rtl"] .showcase-heading,[dir="rtl"] .showcase-grid,[dir="rtl"] .case-services{text-align:right}
[dir="rtl"] .comparison-badge--before{left:auto;right:18px}[dir="rtl"] .comparison-badge--after{right:auto;left:18px}
@media(max-width:900px){.project-showcase{padding:80px 6vw}.showcase-heading{grid-template-columns:1fr;gap:22px}.case-services{margin-top:-28px}.showcase-grid{grid-template-columns:1fr}.showcase-video,.showcase-card--wide,.showcase-card--detail{grid-column:auto;grid-row:auto}.showcase-video{min-height:0}.showcase-video video{min-height:0;max-height:680px}.before-after-slider{grid-column:auto}.showcase-card img,.showcase-card--detail img{height:360px}.case-details{grid-template-columns:1fr 1fr}.case-videos{grid-template-columns:1fr}.project-video--portrait video{max-height:680px}}
@media(max-width:560px){.project-showcase{padding:70px 5vw}.showcase-heading{margin-bottom:32px}.case-services{margin:0 0 30px}.showcase-grid{gap:12px}.showcase-grid figcaption,.before-after-slider figcaption{display:block;padding:15px}.showcase-grid figcaption small,.before-after-slider figcaption small{display:block;text-align:left;margin-top:5px}.showcase-card img,.showcase-card--detail img{height:300px}.case-details{grid-template-columns:1fr}.case-details--single{max-width:none}.case-details{gap:12px}.comparison-handle{width:42px;height:42px}.comparison-badge{top:12px;padding:7px 9px;font-size:.68rem}.comparison-badge--before{left:12px}.comparison-badge--after{right:12px}[dir="rtl"] .showcase-grid figcaption small,[dir="rtl"] .before-after-slider figcaption small{text-align:right}}
