{{- $c := hugo.Data.content -}}
<section class="section wrap cta" id="contact" aria-labelledby="c-h">
    <header class="section-head"><span class="note note--ink">{{ $c.contact.span_1 }}</span><span class="note">{{ $c.contact.span_2 }}</span></header>
    <h2 class="display cta__title" id="c-h" data-reveal="lines">{{ $c.contact.h2_3 }}</h2>
    <div class="cta__actions" data-reveal="up">
      <a class="btn" href="#brief">{{ $c.contact.a_4_html | safeHTML }}</a>
      <a class="btn btn--ghost" href="mailto:hello@example.com">{{ $c.contact.a_5 }}</a>
    </div>
    <div class="cta__form grid-12" id="brief">
      <p class="cta__lead lead" data-reveal="up">{{ $c.contact.p_6 }}</p>
      <form class="fg" action="{{ site.Params.formAction | default "https://formgong.com/submit" }}" method="POST" data-reveal="up">
        <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
        <input type="hidden" name="subject" value="New project brief">
        <div aria-hidden="true" class="hp"><label>{{ $c.contact.text_7 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
        <div class="fg-fields">
          <label class="fld"><span class="note">{{ $c.contact.span_8 }}</span><input name="name" autocomplete="name" required></label>
          <label class="fld"><span class="note">{{ $c.contact.span_9 }}</span><input name="email" type="email" autocomplete="email" required></label>
          <label class="fld"><span class="note">{{ $c.contact.span_10 }}</span><input name="company" autocomplete="organization"></label>
          <label class="fld"><span class="note">{{ $c.contact.span_11 }}</span><select name="budget"><option>{{ $c.contact.option_12 }}</option><option>{{ $c.contact.option_13 }}</option><option>{{ $c.contact.option_14 }}</option><option>{{ $c.contact.option_15 }}</option><option>{{ $c.contact.option_16 }}</option></select></label>
          <label class="fld fld-wide"><span class="note">{{ $c.contact.span_17 }}</span><textarea name="message" rows="4" required></textarea></label>
          <div class="fld-wide fg-row"><button class="btn" type="submit"><span data-label>{{ $c.contact.span_18 }}</span> <span class="arrow" aria-hidden="true">→</span></button><p class="fg-status" data-status role="status" aria-live="polite"></p></div>
        </div>
        <div class="fg-sent" tabindex="-1"><p class="fg-sent-h h3">{{ $c.contact.p_19_html | safeHTML }}</p><p>{{ $c.contact.p_20 }}</p><button class="btn btn--ghost" type="button" data-again>{{ $c.contact.button_21 }}</button></div>
        <p class="fg-privacy note">{{ $c.contact.p_22_html | safeHTML }}</p>
        <p class="credit note">{{ $c.contact.p_23_html | safeHTML }}</p>
      </form>
    </div>
  </section>