*{box-sizing:border-box}
body{margin:0;background:#f5f3ef;color:#111;font-family:Helvetica Neue,Arial,sans-serif;line-height:1.8;letter-spacing:.04em}
header{height:100px;padding:0 8%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}
.logo{font-size:36px;letter-spacing:.25em}
nav a{color:#111;text-decoration:none;margin-left:28px;font-size:12px}
nav a:hover{opacity:.6}
.hero{min-height:780px;padding:120px 10%;display:flex;align-items:center}
h1{font-size:82px;font-weight:300;line-height:1.1}
h2{font-size:42px;font-weight:300;letter-spacing:.08em}
h3{font-weight:400}
.section{padding:100px 10%;border-top:1px solid #ddd}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:60px}
.card{padding:35px 0;border-top:1px solid #bbb;text-decoration:none;color:#111}
.btn{display:inline-block;padding:14px 35px;border:1px solid #111;text-decoration:none;color:#111;margin-top:30px}
footer{text-align:center;padding:50px;color:#666}
@media(max-width:800px){.grid{grid-template-columns:1fr}h1{font-size:48px}}

.dark-section{background:#111;color:#fff;padding:100px 10%}
.dark-section h2,.dark-section h3{color:#fff}
.gold-text{color:#c9a45c}