{{- $c := hugo.Data.content -}}
<section class="hero wrap" id="top" data-hero>
    <div class="hero__top note">
      <span>{{ $c.top.span_1 }}</span>
      <span class="hide-sm">{{ $c.top.span_2 }}</span>
      <span>{{ $c.top.span_3 }}</span>
    </div>
    <h1 class="hero__title">
      <span class="hero__human display" data-hero-human data-bp="h1.human">{{ $c.top.span_4 }}</span>
      <span class="hero__machine h2" data-hero-generate data-bp="h1.machine">{{ $c.top.span_5 }}</span>
    </h1>
    <div class="hero__notes">
      <p class="note" data-hero-fade>{{ $c.top.p_6_html | safeHTML }}</p>
      <p class="note" data-hero-fade>{{ $c.top.p_7_html | safeHTML }}</p>
      <p class="note hero__terrain" aria-hidden="true">{{ $c.top.p_8_html | safeHTML }}</p>
    </div>
    <div class="hero__foot">
      <p class="hero__intro lead" data-hero-fade data-bp="p.lead">{{ $c.top.p_9 }}</p>
      <div class="hero__ctas" data-hero-fade data-bp="nav.cta">
        <a class="btn" href="#contact">{{ $c.top.a_10_html | safeHTML }}</a>
        <a class="btn btn--ghost" href="#work">{{ $c.top.a_11 }}</a>
      </div>
    </div>
  </section>