About Process Steps

<section class="mx-auto w-full max-w-6xl bg-white px-4 py-12 md:px-6 md:py-16 dark:bg-gray-900" aria-labelledby="abt-process-title">
  <p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">How we work</p>
  <h2 id="abt-process-title" class="mt-3 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
    Four steps, every engagement
  </h2>

  <!-- An <ol>: the steps are a sequence, so the order is content, not styling. -->
  <ol class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
    <li>
      <span class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white dark:bg-blue-500" aria-hidden="true">1</span>
      <h3 class="mt-4 text-base font-semibold text-gray-900 dark:text-gray-100">Frame the question</h3>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">A week in the room, naming the decision everyone has been avoiding.</p>
    </li>
    <li>
      <span class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-sm font-bold text-white dark:bg-blue-500" aria-hidden="true">2</span>
      <h3 class="mt-4 text-base font-semibold text-gray-900 dark:text-gray-100">Prototype the answer</h3>
      <p class="mt-1 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Something real and clickable, fast enough to be wrong cheaply.</p>
    </li>
    <!-- Repeat one <li> per step. -->
  </ol>
</section>