:root{
  --ink:#16212b; --body:#33424f; --muted:#61717f;
  --bg:#fbfaf8; --panel:#ffffff; --line:#e2ddd6;
  --accent:#8c5a2b; --accent-dark:#6d4520;
  --measure:38rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font:400 1.0625rem/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
h1,h2,h3{color:var(--ink); font-weight:600; line-height:1.2; margin:0 0 .6em}
h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem); letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem); letter-spacing:-.01em; margin-top:2.4em}
h3{font-size:1.0625rem; letter-spacing:.02em; text-transform:uppercase; color:var(--accent-dark); margin-top:2em}
p,ul,ol{margin:0 0 1.15em}
a{color:var(--accent-dark)}
a:hover{color:var(--accent)}
.wrap{max-width:58rem; margin:0 auto; padding:0 1.5rem}
.measure{max-width:var(--measure)}

/* header */
header.site{border-bottom:1px solid var(--line); background:var(--panel)}
header.site .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 2rem; padding-top:1.1rem; padding-bottom:1.1rem}
.brand{font-weight:600; color:var(--ink); text-decoration:none; font-size:1.0625rem; letter-spacing:-.01em; white-space:nowrap}
.brand span{color:var(--accent-dark)}
nav.site{margin-left:auto}
nav.site ul{display:flex; flex-wrap:wrap; gap:1.4rem; list-style:none; margin:0; padding:0}
nav.site a{color:var(--muted); text-decoration:none; font-size:.9375rem}
nav.site a:hover,nav.site a[aria-current="page"]{color:var(--ink)}

/* hero */
.hero{padding:4.5rem 0 3rem; border-bottom:1px solid var(--line)}
.hero p.lead{font-size:1.1875rem; color:var(--body); max-width:34rem; margin-bottom:1.8rem}
.kicker{font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem}

main{padding:3rem 0 4rem}
.hero + main{padding-top:2.5rem}

/* services grid */
.grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin:1.5rem 0 0; padding:0; list-style:none}
.grid li{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:1.25rem 1.35rem}
.grid h3{margin:0 0 .4rem; text-transform:none; font-size:1.0625rem; letter-spacing:-.01em; color:var(--ink)}
.grid p{margin:0; font-size:.9375rem; color:var(--muted)}

/* service blocks */
.service{border-top:1px solid var(--line); padding-top:1.75rem; margin-top:2.5rem}
.service:first-of-type{border-top:0; margin-top:1rem}
.when{font-size:.9375rem; color:var(--muted); border-left:2px solid var(--accent); padding-left:.9rem; margin-top:1.2rem}
.when strong{color:var(--ink); font-weight:600}

/* record */
.record{border-top:1px solid var(--line); padding-top:1.75rem; margin-top:2.5rem}
.record:first-of-type{border-top:0; margin-top:1rem}
.record .org{font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem}

.cta{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:3px; padding:1.5rem 1.6rem; margin:3rem 0 0}
.cta p:last-child{margin-bottom:0}
.email{font-weight:600; white-space:nowrap}

figure{margin:2rem 0; padding:0}
figure img{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:3px; background:#fff}
figcaption{font-size:.875rem; color:var(--muted); margin-top:.6rem}
.portrait{max-width:15rem; float:right; margin:0 0 1.5rem 2rem}
@media (max-width:34rem){.portrait{float:none; margin:0 0 1.5rem; max-width:11rem}}

table{border-collapse:collapse; width:100%; font-size:.9375rem; margin:1.5rem 0}
th,td{border:1px solid var(--line); padding:.5rem .7rem; text-align:left}
th{background:var(--panel); color:var(--ink)}

footer.site{border-top:1px solid var(--line); background:var(--panel); padding:2.5rem 0; font-size:.9375rem; color:var(--muted)}
footer.site a{color:var(--accent-dark)}
footer.site p{margin:0 0 .4em}
.skip{position:absolute; left:-9999px}
.skip:focus{position:static}

/* text-only pages: let the measure fill the wrap so the page reads balanced */
body.doc .wrap{max-width:46rem}
body.doc .measure{max-width:none}
.grid h3 a{text-decoration:none}
.grid h3 a:hover{text-decoration:underline}