{{- $c := site.Data.content -}}
<section class="bold dark" aria-labelledby="why-h">
    <div class="wrap">
      <span class="eyebrow rv">{{ $c.bold.span_1 }}</span>
    </div>
    <h2 class="big" id="why-h">
      <span class="ln wrap" data-drift="-1">{{ $c.bold.span_2 }}</span>
      <span class="ln l2 wrap" data-drift="1">{{ $c.bold.span_3 }}</span>
    </h2>
    <div class="wrap bold-grid">
      <p class="fill" data-fill>{{ $c.bold.p_4 }}</p>
      <ul class="stats">
        <li class="rv"><b><span data-count="14">{{ $c.bold.span_5 }}</span></b><span>{{ $c.bold.span_6 }}</span></li>
        <li class="rv" style="--d:1"><b><span data-count="30">{{ $c.bold.span_7 }}</span><small>{{ $c.bold.small_8 }}</small></b><span>{{ $c.bold.span_9 }}</span></li>
        <li class="rv" style="--d:2"><b><span data-count="9">{{ $c.bold.span_10 }}</span></b><span>{{ $c.bold.span_11 }}</span></li>
      </ul>
    </div>
  </section>