{{- $c := hugo.Data.content -}}
<section class="section wrap" id="process" aria-labelledby="p-h">
    <header class="section-head"><span class="note note--ink">{{ $c.process.span_1 }}</span><span class="note">{{ $c.process.span_2 }}</span></header>
    <h2 class="h2 process__claim" id="p-h" data-reveal="lines">{{ $c.process.h2_3 }}</h2>
    <div class="process__line" data-draw></div>
    <ol class="process grid-12">
      <li class="step" data-reveal="up"><span class="step__dot" aria-hidden="true"></span><span class="note">{{ $c.process.span_4 }}</span><h3 class="step__title">{{ $c.process.h3_5 }}</h3><p class="step__body">{{ $c.process.p_6 }}</p></li>
      <li class="step" data-reveal="up"><span class="step__dot" aria-hidden="true"></span><span class="note">{{ $c.process.span_7 }}</span><h3 class="step__title">{{ $c.process.h3_8 }}</h3><p class="step__body">{{ $c.process.p_9 }}</p></li>
      <li class="step" data-reveal="up"><span class="step__dot" aria-hidden="true"></span><span class="note">{{ $c.process.span_10 }}</span><h3 class="step__title">{{ $c.process.h3_11 }}</h3><p class="step__body">{{ $c.process.p_12 }}</p></li>
      <li class="step" data-reveal="up"><span class="step__dot" aria-hidden="true"></span><span class="note">{{ $c.process.span_13 }}</span><h3 class="step__title">{{ $c.process.h3_14 }}</h3><p class="step__body">{{ $c.process.p_15 }}</p></li>
    </ol>
  </section>