:root{
  --h: 205;
  --brand:      hsl(var(--h) 55% 32%);
  --brand-deep: hsl(var(--h) 58% 22%);
  --brand-soft: hsl(var(--h) 50% 94%);
  --ink:        hsl(var(--h) 22% 14%);
  --ink-soft:   hsl(var(--h) 10% 38%);
  --line:       hsl(var(--h) 20% 87%);
  --bg:         hsl(var(--h) 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; background: var(--surface); }
.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; }

.svc-card--soon{ border-style: dashed; color: var(--ink-soft); cursor: default; }
.svc-card--soon:hover{ border-color: var(--line); }
.svc-card--soon .eyebrow{ color: var(--ink-soft); }
.svc-card--soon .badge{ display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--ink-soft); }

.section-title{ padding-top: clamp(20px,4vw,32px); }
.section-title h2{ margin: 0 0 4px; }
.section-title p{ margin: 0; color: var(--ink-soft); font-size: 14px; }