/* Proposal: Public Sans only. Reads like a well-made proposal: plain, structured, a real table. */
@font-face { font-family: "Public Sans"; src: url(/fonts/public-sans-normal-300-800.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url(/fonts/public-sans-italic-300-800.woff2) format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
:root {
  --color-bg: oklch(0.99 0 0);
  --color-text: oklch(0.24 0.03 255);
  --color-accent: oklch(0.40 0.11 255);
  --color-muted: oklch(0.50 0.02 255);
  --color-border: oklch(0.90 0.01 255);
  --color-band: oklch(0.27 0.06 255);
}
@media (prefers-color-scheme: dark) { :root {
  --color-bg: oklch(0.18 0.02 255); --color-text: oklch(0.94 0.005 255); --color-accent: oklch(0.80 0.09 255);
  --color-muted: oklch(0.72 0.02 255); --color-border: oklch(0.32 0.02 255); --color-band: oklch(0.26 0.05 255); } }
body { font-family: "Public Sans", system-ui, sans-serif; }
.bar { max-width: 76rem; margin: 0 auto; padding: var(--grt-space-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--grt-space-xs) var(--grt-space-md); border-bottom: 1px solid var(--color-border); }
.bar .name { font-weight: 700; color: var(--color-text); text-decoration: none; margin-right: auto; }
.bar nav { display: flex; flex-wrap: wrap; gap: var(--grt-space-sm); font-size: calc(var(--grt-scale-1) * 0.85); }
.bar nav a { color: var(--color-muted); text-decoration: none; }
.cta { display: inline-block; padding: var(--grt-space-2xs) var(--grt-space-sm); background: var(--color-accent); color: var(--color-bg); text-decoration: none; font-weight: 600; font-size: calc(var(--grt-scale-1) * 0.85); }
.cta:hover { background: var(--color-text); }
.cta-light { background: var(--color-bg); color: var(--color-band); }
.wrap, .hero { max-width: 76rem; margin: 0 auto; padding: 0 var(--grt-space-sm); }
.hero { padding-block: var(--grt-space-xl); }
.hero h1 { margin-top: 0; max-width: 24ch; font-weight: 700; letter-spacing: -0.015em; }
.lede { font-size: var(--grt-step-1); line-height: var(--grt-step-lh-1); color: var(--color-muted); max-width: var(--grt-content-width); }
h2 { font-size: var(--grt-step-2); line-height: var(--grt-step-lh-2); font-weight: 700; }
section + section { margin-top: var(--grt-space-lg); }
.services { display: grid; gap: var(--grt-space-md); margin: 0; }
@media (min-width: 48rem) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.services dt { font-weight: 700; margin-bottom: var(--grt-space-2xs); }
.services dd { margin: 0; color: var(--color-muted); }
.cases { width: 100%; border-collapse: collapse; font-size: calc(var(--grt-scale-1) * 0.85); }
.cases th, .cases td { text-align: left; vertical-align: top; padding: var(--grt-space-xs) var(--grt-space-sm) var(--grt-space-xs) 0; border-top: 1px solid var(--color-border); }
.cases thead th { border-top: 2px solid var(--color-text); color: var(--color-muted); font-weight: 600; }
.cases tbody th { font-weight: 700; width: 18%; }
.cases tbody th span { display: block; font-weight: 400; color: var(--color-muted); }
.cases ul { margin: 0; padding-left: 1.1em; }
@media (max-width: 52rem) {
  .cases, .cases tbody { display: block; width: 100%; }
  .cases thead { position: absolute; left: -9999px; }
  .cases tr { display: block; padding-block: var(--grt-space-sm); border-top: 2px solid var(--color-text); }
  .cases th, .cases td { display: block; border: 0; width: auto; padding: 0 0 var(--grt-space-xs); }
  .cases td::before { display: block; font-weight: 600; color: var(--color-muted); }
  .cases td:nth-of-type(1)::before { content: "Situation"; }
  .cases td:nth-of-type(2)::before { content: "What we did"; }
  .cases td:nth-of-type(3)::before { content: "What changed"; }
}
.quote { border-block: 1px solid var(--color-border); padding-block: var(--grt-space-lg); }
.quote blockquote { margin: 0; font-size: var(--grt-step-2); line-height: var(--grt-step-lh-2); max-width: 32ch; }
.quote blockquote p { margin: 0; }
.who { color: var(--color-muted); margin: var(--grt-space-sm) 0 0; }
.steps { padding-left: 1.25em; max-width: var(--grt-content-width); }
.steps li { margin-bottom: var(--grt-space-xs); }
.contact { background: var(--color-band); color: oklch(0.96 0.005 255); padding: var(--grt-space-xl) var(--grt-space-sm); text-align: center; margin-top: var(--grt-space-xl); }
.contact h2 { margin-top: 0; max-width: 24ch; margin-inline: auto; }