{{- $c := site.Data.content -}}
<section class="contact" id="contact" aria-labelledby="contact-h">
    <div class="intro-c">
      <h2 id="contact-h" class="label">{{ $c.contact.h2_1 }}</h2>
      <p class="small" style="margin-top:1rem">{{ $c.contact.p_2 }}</p>
      <p class="small"><a href="mailto:studio@example.com">{{ $c.contact.a_3 }}</a><br><a href="tel:+351220000000">{{ $c.contact.a_4 }}</a></p>
    </div>
    
    <form class="form" id="f-project" action="https://formgong.com/submit" method="POST">
      <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
      <input type="hidden" name="subject" value="New project enquiry">
      <div class="hp" aria-hidden="true"><label>{{ $c.contact.text_5 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
      <div class="field"><label for="p-name">{{ $c.contact.label_6 }}</label><input id="p-name" name="name" autocomplete="name" placeholder="Your name" required maxlength="100"></div>
      <div class="field"><label for="p-email">{{ $c.contact.label_7 }}</label><input id="p-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required maxlength="160"></div>
      <fieldset class="field full">
        <legend>{{ $c.contact.legend_8 }}</legend>
        <div class="chips">
          <label><input type="radio" name="project" value="House" checked><span>{{ $c.contact.span_9 }}</span></label>
          <label><input type="radio" name="project" value="Public building"><span>{{ $c.contact.span_10 }}</span></label>
          <label><input type="radio" name="project" value="Structure for another architect"><span>{{ $c.contact.span_11 }}</span></label>
          <label><input type="radio" name="project" value="Lecture or visit"><span>{{ $c.contact.span_12 }}</span></label>
        </div>
      </fieldset>
      <div class="field"><label for="p-place">{{ $c.contact.label_13 }}</label><input id="p-place" name="location" autocomplete="address-level2" placeholder="Town, country" maxlength="120"></div>
      <div class="field"><label for="p-when">{{ $c.contact.label_14 }}</label><input id="p-when" name="timing" placeholder="Spring 2027" maxlength="80"></div>
      <div class="field full"><label for="p-msg">{{ $c.contact.label_15 }}</label><textarea id="p-msg" name="message" required maxlength="4000" placeholder="The site, the size, the budget, and what worries you"></textarea></div>
      <button class="send" type="submit"><span data-send-label>{{ $c.contact.span_16 }}</span><span class="arr" aria-hidden="true">→</span></button>
      <p class="status" data-status role="status" aria-live="polite"></p>
      <p class="credit">{{ $c.contact.p_17_html | safeHTML }}</p>
      <div class="thanks big" tabindex="-1"><strong>{{ $c.contact.strong_18_html | safeHTML }}</strong>{{ $c.contact.text_19 }}<br><button type="button" class="label" data-again>{{ $c.contact.button_20 }}</button></div>
    </form>
  </section>