*{box-sizing:border-box}body{margin:0;font-family:"Helvetica Neue",Arial,sans-serif;color:#1d1d1b;background:#f6f5f2;line-height:1.6}
a{color:inherit}.top{display:flex;justify-content:space-between;align-items:center;padding:28px 6vw;border-bottom:1px solid #e2dfd8}
.brand{font-weight:600;letter-spacing:.04em;text-decoration:none;text-transform:uppercase;font-size:14px}
nav a{margin-left:28px;text-decoration:none;font-size:14px;color:#55534e}nav a:hover{color:#000}
.hero{padding:12vh 6vw 8vh}.hero h1{font-size:clamp(36px,6vw,72px);font-weight:300;margin:0 0 16px}.hero p{max-width:560px;color:#55534e;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px;padding:0 6vw 10vh}
.card h3{margin:14px 0 2px;font-weight:500;font-size:16px}.card p{margin:0;color:#8a877f;font-size:14px}
.ph{aspect-ratio:4/5;background:#ccc}.c1 .ph{background:linear-gradient(160deg,#c9d3d8,#6f7f88 60%,#3c464c)}
.c2 .ph{background:linear-gradient(200deg,#e8e1d4,#b9a98c 55%,#5d5240)}.c3 .ph{background:linear-gradient(170deg,#f0efe9,#a7aaa3 50%,#4a4d48)}
.c4 .ph{background:linear-gradient(150deg,#d9b9a3,#94614a 60%,#3e2a22)}.c5 .ph{background:linear-gradient(190deg,#dfe6ea,#8fa3b0 55%,#2f3a42)}
.c6 .ph{background:linear-gradient(165deg,#efe3cf,#c49a62 50%,#5a3f22)}
.clients{padding:6vh 6vw;border-top:1px solid #e2dfd8}.clients h2{font-weight:400;font-size:20px}.clients p{color:#55534e}
.text{max-width:680px;padding:10vh 6vw}.text h1{font-weight:300;font-size:44px}.text h2{font-weight:500;font-size:18px;margin-top:40px}
footer{padding:32px 6vw;font-size:13px;color:#8a877f;border-top:1px solid #e2dfd8}