Services Icon List

<!--
  A single column, deliberately. Where the grid asks you to scan, this asks you
  to read - so the icon is a fixed 2.5rem gutter and the copy runs in one
  measure down the page. Divider rules instead of cards: nine services as nine
  boxes is nine borders competing with the text inside them.
-->
<section class="svc-list" aria-labelledby="svc-list-title">
  <p class="svc-list__kicker">Capabilities</p>
  <h2 class="svc-list__title" id="svc-list-title">Everything under one retainer</h2>

  <ul class="svc-list__items">
    <li class="svc-list__item">
      <span class="svc-list__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
          <rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" />
        </svg>
      </span>
      <div class="svc-list__body">
        <h3 class="svc-list__item-title">Design systems</h3>
        <p class="svc-list__item-copy">A token layer and a component library your engineers reach for by default.</p>
      </div>
    </li>
    <li class="svc-list__item">
      <span class="svc-list__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
          <path d="M20 13V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7" /><path d="M2 13h20l-2 7H4l-2-7Z" />
        </svg>
      </span>
      <div class="svc-list__body">
        <h3 class="svc-list__item-title">Platform engineering</h3>
        <p class="svc-list__item-copy">CI, environments and observability that stop being a project and start being plumbing.</p>
      </div>
    </li>
    <li class="svc-list__item">
      <span class="svc-list__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
        </svg>
      </span>
      <div class="svc-list__body">
        <h3 class="svc-list__item-title">Performance</h3>
        <p class="svc-list__item-copy">Budgets, traces and the unglamorous work of making the numbers stay down.</p>
      </div>
    </li>
  </ul>
</section>