:root{
  --ink:#1c2126; --muted:#5c6873; --line:#e6e9ec;
  --accent:#1f4e63; --bg:#ffffff; --soft:#f6f8f9;
  --wrap:880px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.1px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* header / nav */
header.site{border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0; flex-wrap:wrap; gap:12px}
.brand{font-weight:600; font-size:22px; letter-spacing:.42em; text-transform:uppercase; color:var(--ink)}
.brand:hover{text-decoration:none}
nav.links a{margin-left:26px; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
nav.links a.active,nav.links a:hover{color:var(--ink); text-decoration:none}
@media(max-width:560px){nav.links a{margin:0 18px 0 0}}

/* hero */
.hero{display:flex; gap:40px; align-items:center; padding:56px 0 40px; flex-wrap:wrap}
.hero .copy{flex:1 1 340px}
.hero h1{font-size:clamp(30px,5vw,44px); line-height:1.12; font-weight:300; letter-spacing:.01em; margin:0 0 18px}
.hero .lede{font-size:19px; color:var(--muted); margin:0}
.hero .art{flex:0 0 320px; max-width:100%}
.hero .art img{width:100%; height:auto; border-radius:6px; display:block}
@media(max-width:640px){.hero{padding:34px 0 24px}}

/* sections */
section{padding:30px 0}
h2{font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 16px}
p{margin:0 0 18px}
.lists{display:flex; gap:48px; flex-wrap:wrap}
.lists>div{flex:1 1 300px}
ul.clean{list-style:none; margin:0; padding:0}
ul.clean li{padding:7px 0 7px 20px; border-bottom:1px solid var(--line); position:relative; color:var(--ink)}
ul.clean li:before{content:""; position:absolute; left:0; top:16px; width:7px; height:7px; background:var(--accent); border-radius:50%}
.groups h3{font-size:16px; margin:26px 0 8px; color:var(--ink); font-weight:600}
.divider{border:0; border-top:1px solid var(--line); margin:34px 0}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:40px; padding:30px 0; color:var(--muted); font-size:14px}
footer.site .row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
footer.site a{color:var(--muted)}