.projects-section{padding:80px 26px;scroll-margin-top:100px}.projects-inner{max-width:1200px;margin:auto}.projects-heading{text-align:start;margin:0 0 32px}.projects-heading h2{font:700 clamp(42px,5vw,68px)/1.4 ArabicDisplay,Arial,sans-serif;margin:8px 0}.projects-heading p{color:#b6cbdc;font-size:14px}.projects-heading .projects-eyebrow{font-size:10px;letter-spacing:2px;color:#87b9d0}.project-comparison{--split:36%;position:relative;aspect-ratio:2.65;overflow:hidden;border:1px solid #b9d5e990;border-radius:14px;background:#071424;isolation:isolate;box-shadow:0 22px 48px #0005}.project-comparison>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.project-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:1}.compare-line{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#84ddff;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;font:20px Arial;color:#fff;white-space:nowrap}.compare-line:before{content:'';position:absolute;top:calc(50% - 22px);left:-21px;width:44px;height:44px;background:#0b2233;border:1px solid #a2e4ff;border-radius:50%;z-index:-1;box-shadow:0 0 16px #83dfff50}.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:4;cursor:ew-resize;direction:ltr;touch-action:pan-y}.project-comparison:focus-within{outline:2px solid #8addff;outline-offset:4px}.compare-label{position:absolute;top:14px;z-index:2;background:#081624b8;color:white;padding:6px 12px;border-radius:5px;font-size:11px;pointer-events:none}.before-label{left:14px}.after-label{right:14px}.project-info{display:flex;align-items:center;gap:25px;flex-wrap:wrap;padding:23px 0 27px}.project-title-box{flex:1;min-width:180px}.project-title-box h3{font-size:22px;margin:0 0 7px}.project-title-box p{font:10px Arial;letter-spacing:2px;color:#b5c9d9;margin:0}.project-meta{border-inline-start:1px solid #9bb8cf45;padding-inline-start:24px;display:grid;gap:6px;font-size:12px}.project-meta small{color:#9fb5c7;font-size:10px}.project-details{flex-basis:220px}.project-details summary{cursor:pointer;border:1px solid #b6d3e6;border-radius:40px;padding:12px 20px;list-style:none;text-align:center;font-size:12px}.project-details summary::-webkit-details-marker{display:none}.project-details[open]{flex-basis:100%}.project-details[open] summary{width:max-content}.project-details p{font-size:14px;color:#becdd8;line-height:2;overflow-wrap:anywhere}.project-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.project-thumbnail{position:relative;aspect-ratio:1.9;border:1px solid #9eb8cd66;border-radius:9px;overflow:hidden;background:#071827;color:#fff;padding:0;cursor:pointer;text-align:start}.project-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.project-thumbnail span{position:absolute;bottom:0;left:0;right:0;padding:34px 17px 15px;background:linear-gradient(transparent,#04101ae6);font-size:16px}.project-thumbnail:hover img{transform:scale(1.04)}.project-thumbnail[aria-pressed=true]{border-color:#8cdfff;box-shadow:0 0 0 1px #8cdfff55}.project-thumbnail:focus-visible{outline:2px solid #90ddff;outline-offset:4px}.projects-disclaimer{font-size:10px;text-align:center;color:#8faabd;margin-top:22px}.projects-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}.projects-reveal.revealed{opacity:1;transform:none}html[dir=ltr] .projects-heading h2{font-family:Arial,sans-serif}
@media(max-width:760px){.projects-section{padding:55px 18px;scroll-margin-top:80px}.projects-heading h2{font-size:43px}.project-comparison{aspect-ratio:1.15;border-radius:9px}.project-info{gap:18px;padding:20px 0}.project-title-box{flex-basis:100%}.project-title-box h3{font-size:21px}.project-meta{padding-inline-start:14px;max-width:100%}.project-details{flex-basis:100%}.project-thumbnails{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;gap:12px}.project-thumbnail{flex:0 0 75%;scroll-snap-align:start}.project-thumbnail span{font-size:14px}.compare-label{font-size:10px;padding:5px 8px}}
@media(prefers-reduced-motion:reduce){.projects-reveal{opacity:1;transform:none}.projects-reveal,.project-thumbnail img{transition:none!important}}
#our-projects [hidden]{display:none!important}