:root { --paper: #fef4e3; --surface: #fffbf4; --ink: #24432d; --muted: #55655b; --line: #ddd4c3; --forest: #24432d; --purple: #a54e87; --mint: #a5d4b9; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 12% 0, rgb(171 185 141 / 34%), transparent 30rem), var(--paper); font: 16px/1.6 Inter, system-ui, sans-serif; }
a { color: inherit; }
header, footer, main { width: min(1080px, calc(100% - 2rem)); margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
header > a { display: inline-flex; text-decoration: none; }
header img { width: 6.5rem; height: auto; }
nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
nav a { text-decoration: none; }
.hero { padding: clamp(5rem, 12vw, 9rem) 0; }
.hero p, .grid span { color: var(--purple); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { max-width: 900px; font: 500 clamp(3rem, 7vw, 6.2rem)/1 "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.button { display: inline-flex; padding: .85rem 1.1rem; border-radius: .6rem; color: white; background: var(--forest); text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: rgb(255 251 244 / 58%); }
.grid article { padding: 2rem; border-right: 1px solid var(--line); }
.grid article:last-child { border: 0; }
.grid h2, .approach h2, .contact h2 { font: 500 2rem "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.grid p, .approach p { color: var(--muted); }
.approach, .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 5rem 0; border-bottom: 1px solid var(--line); }
footer { padding: 2rem 0; color: var(--muted); }
@media (max-width: 720px) {
  header { align-items: flex-start; }
  header img { width: 5.75rem; }
  .grid, .approach, .contact { grid-template-columns: 1fr; }
  .grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  nav { justify-content: flex-end; }
  .approach, .contact { gap: 1rem; }
}
