:root{
  --h: 24;
  --brand:      hsl(var(--h) 46% 27%);
  --brand-deep: hsl(var(--h) 50% 19%);
  --brand-soft: hsl(var(--h) 40% 94%);
  --ink:        hsl(24 22% 14%);
  --ink-soft:   hsl(24 10% 38%);
  --line:       hsl(30 14% 87%);
  --bg:         hsl(36 30% 97.5%);
  --surface:    #ffffff;
  --r: 6px;
  --disp-font: -apple-system, "Apple SD Gothic Neo", sans-serif;
  --disp-weight: 800;
}
.hero{ text-align: center; padding-block: clamp(36px,7vw,64px); background: var(--brand-soft); }
.hero p.lead{ margin: 14px auto 0; max-width: 52ch; color: var(--ink-soft); }
.site-head, .site-foot{ background: var(--surface); }
.grid20{ display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding-block: clamp(24px,5vw,40px); }
@media (min-width: 640px){ .grid20{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 960px){ .grid20{ grid-template-columns: repeat(4,1fr); } }
.svc-card{ display: block; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; text-decoration: none; color: var(--ink); min-height: 44px; }
.svc-card:hover{ border-color: var(--brand); }
.svc-card .eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--brand); display: block; margin-bottom: 6px; }
.svc-card h3{ font-size: 16px; margin: 0 0 6px; }
.svc-card p{ font-size: 13.5px; color: var(--ink-soft); margin: 0; }