@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600&display=swap');:root{--orange:#ff5727;--ink:#171717;--paper:#eae8df;--line:#272727}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:DM Sans}a{text-decoration:none;color:inherit}header{height:76px;display:grid;grid-template-columns:220px 1fr 190px;border-bottom:1px solid var(--line);position:relative;z-index:5}.logo{display:flex;align-items:center;gap:10px;padding:0 24px;border-right:1px solid}.logo i{display:grid;place-items:center;width:30px;height:30px;background:var(--orange);color:white;font-style:normal;font-weight:900}.logo b{font-size:14px}nav{display:flex;justify-content:center;align-items:center;gap:34px;font-size:11px;text-transform:uppercase;letter-spacing:.13em}.quote{display:grid;place-items:center;background:var(--ink);color:white;text-transform:uppercase;font-size:11px;letter-spacing:.1em}.menu{display:none}.hero{min-height:700px;display:grid;grid-template-columns:56% 44%;border-bottom:1px solid}.hero-copy{padding:70px 5vw 35px;border-right:1px solid;background-image:linear-gradient(#1111 1px,transparent 1px),linear-gradient(90deg,#1111 1px,transparent 1px);background-size:30px 30px;position:relative}.kicker,.section-head>span,.services>div>span,.process>span,.contact>div>span{text-transform:uppercase;letter-spacing:.16em;font-size:10px}.kicker:before{content:'';display:inline-block;width:25px;height:4px;background:var(--orange);margin-right:10px}.hero h1,.section-head h2,.services h2,.comparison h2,.process h2,.contact h2{font:400 clamp(55px,8vw,110px)/.86 Archivo Black;text-transform:uppercase;letter-spacing:-.065em;margin:55px 0 30px}.hero h1 em{font-style:normal;color:var(--orange)}.hero-copy>p{max-width:480px;margin-left:25%;line-height:1.65}.hero-copy>small{position:absolute;bottom:35px;left:5vw;writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.14em;font-size:8px}.hero-image{position:relative;overflow:hidden}.hero-image img{width:100%;height:100%;object-fit:cover}.hero-image>span{position:absolute;right:20px;top:20px;color:#fff;font-size:10px}.hero-image article{position:absolute;bottom:20px;left:20px;background:var(--paper);padding:18px;width:230px}.hero-image article small{display:block;text-transform:uppercase;font-size:8px;letter-spacing:.1em}.hero-image article b{display:block;margin-top:8px}.ticker{height:120px;display:grid;grid-template-columns:220px 1fr 190px;border-bottom:1px solid;overflow:hidden}.ticker>b{padding:22px;border-right:1px solid;font:38px Archivo Black}.ticker small{display:block;font:8px DM Sans;text-transform:uppercase}.ticker>div{display:flex;align-items:center;overflow:hidden;font:24px Archivo Black;white-space:nowrap}.ticker>div span{animation:scroll 18s linear infinite}.ticker>a{display:grid;place-items:center;background:var(--orange);color:white;font-size:11px;text-transform:uppercase}.projects{padding:120px 5vw;background:#f6f4ed}.section-head{display:grid;grid-template-columns:180px 1fr auto;align-items:end}.section-head h2{font-size:70px;margin:15px 0}.filters button{border:0;background:none;padding:10px;cursor:pointer}.filters .active{background:var(--ink);color:white}.project-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:20px;align-items:start;margin-top:55px}.project-grid article{transition:.3s}.project-grid article.hidden{display:none}.project-grid article:nth-child(3){margin-top:100px}.project-grid img,.abstract{width:100%;height:420px;object-fit:cover}.project-grid article:first-child img{height:600px}.abstract{background:linear-gradient(135deg,#b76d45,#e4c5a3)}.abstract.dark{background:linear-gradient(135deg,#222,#777)}.project-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.1em}.project-grid h3{font:24px Archivo Black;text-transform:uppercase;margin:8px 0}.project-grid p{color:#777}.services{display:grid;grid-template-columns:.8fr 1.2fr;background:#171717;color:#fff;padding:110px 6vw;gap:8vw}.services h2{font-size:65px}.services ol{list-style:none;margin:0;padding:0}.services li{display:grid;grid-template-columns:50px 1fr 1.2fr;gap:25px;border-top:1px solid #ffffff3a;padding:27px 0}.services li>b{color:var(--orange)}.services h3{font:21px Archivo Black;text-transform:uppercase;margin:0}.services li p{color:#aaa;margin:0;line-height:1.6}.comparison{height:720px;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;background:#333}.comparison .before,.comparison .after{background:center/cover}.comparison .before{background-image:linear-gradient(#0004,#0004),url('assets/hero-construction.png');filter:grayscale(1)}.comparison .after{background-image:url('assets/project-office.png')}.comparison span{position:absolute;top:20px;margin-left:20px;background:#fff;padding:8px;font-size:9px;text-transform:uppercase}.handle{position:absolute;left:50%;top:0;bottom:0;width:2px;background:white;color:#111;display:grid;place-items:center}.handle:after{content:'↔';display:grid;place-items:center;background:white;width:45px;height:45px;border-radius:50%}.comparison>article{position:absolute;bottom:30px;left:30px;background:var(--paper);padding:28px;width:410px}.comparison h2{font-size:44px;margin:15px 0}.comparison p{line-height:1.6}.process{padding:110px 6vw}.process h2{font-size:65px}.process>div{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid}.process article{padding:30px;border-block:1px solid;border-right:1px solid}.process article b{color:var(--orange)}.process h3{font:21px Archivo Black;text-transform:uppercase;margin-top:60px}.process p{color:#777}.contact{display:grid;grid-template-columns:1fr 1fr;background:var(--orange);padding:100px 7vw;gap:8vw}.contact h2{font-size:62px}.contact>div>a{font-weight:700}.contact form{display:grid;gap:12px}.contact input,.contact select,.contact textarea{padding:16px;border:0;border-bottom:1px solid #111;background:transparent;font:inherit}.contact textarea{min-height:100px}.contact button{padding:16px;background:var(--ink);color:#fff;border:0}footer{display:flex;justify-content:space-between;padding:35px 5vw;background:#111;color:#fff}.toast{position:fixed;right:20px;bottom:20px;background:#111;color:white;padding:15px;transform:translateY(100px);opacity:0;transition:.3s}.toast.show{transform:none;opacity:1}@keyframes scroll{to{transform:translateX(-50%)}}@media(max-width:800px){header{grid-template-columns:1fr auto}.menu{display:block;border:0;background:none;padding:20px}.quote,nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{min-height:620px;border-right:0}.hero-copy>p{margin-left:10%}.hero-image{min-height:500px}.ticker{grid-template-columns:1fr 130px}.ticker>div{display:none}.section-head{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.project-grid article:nth-child(3){margin-top:0}.project-grid img,.project-grid article:first-child img,.abstract{height:380px}.services{grid-template-columns:1fr}.services li{grid-template-columns:35px 1fr}.services li p{grid-column:2}.comparison{height:650px}.comparison>article{left:15px;right:15px;width:auto}.process>div{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}footer{flex-direction:column;gap:12px}}

/* Full-frame before/after comparison */
.comparison{display:block;isolation:isolate;cursor:ew-resize;touch-action:none}.comparison .before,.comparison .after{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center}.comparison .before{z-index:1}.comparison .after{z-index:2;clip-path:inset(0 0 0 50%)}.comparison .before>span,.comparison .after>span{z-index:4}.comparison .after>span{right:20px;left:auto}.comparison .handle{z-index:5;pointer-events:none}.comparison>article{z-index:6}.comparison:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0002,transparent 45%);z-index:3;pointer-events:none}