Service Detail Process

<!--
  An <ol>, because the order is the whole point - these steps happen in sequence
  and a screen reader gets that from the element, not from the numbers drawn in
  the circles. Those numbers are aria-hidden precisely because the list already
  announces "1 of 4"; leaving them audible would say "one one Kickoff".

  The connector is drawn with ::before on each step and is pure decoration.
-->
<section class="svc-proc" aria-labelledby="svc-proc-title">
  <p class="svc-proc__kicker">How it runs</p>
  <h2 class="svc-proc__title" id="svc-proc-title">Four steps, three weeks</h2>

  <ol class="svc-proc__steps">
    <li class="svc-proc__step">
      <span class="svc-proc__marker" aria-hidden="true">1</span>
      <div class="svc-proc__body">
        <h3 class="svc-proc__step-title">Kickoff</h3>
        <p class="svc-proc__step-copy">Half a day with your team to agree the question we are answering.</p>
      </div>
    </li>
    <li class="svc-proc__step">
      <span class="svc-proc__marker" aria-hidden="true">2</span>
      <div class="svc-proc__body">
        <h3 class="svc-proc__step-title">Research</h3>
        <p class="svc-proc__step-copy">Interviews, analytics and a read of the code you already have.</p>
      </div>
    </li>
    <li class="svc-proc__step">
      <span class="svc-proc__marker" aria-hidden="true">3</span>
      <div class="svc-proc__body">
        <h3 class="svc-proc__step-title">Prototype</h3>
        <p class="svc-proc__step-copy">A clickable core journey, tested with five people outside your building.</p>
      </div>
    </li>
    <li class="svc-proc__step">
      <span class="svc-proc__marker" aria-hidden="true">4</span>
      <div class="svc-proc__body">
        <h3 class="svc-proc__step-title">Handover</h3>
        <p class="svc-proc__step-copy">A costed backlog and a recommendation you can act on the same week.</p>
      </div>
    </li>
  </ol>
</section>