{{- $c := site.Data.content -}}
<section class="sec contact" id="contact" aria-labelledby="k-h">
    <div class="screen grid-on">
      <h2 id="k-h" class="disp k-head" data-k="k-head" data-snap data-rise>{{ $c.contact.h2_1_html | safeHTML }}</h2>
      <p class="k-text" data-k="k-text" data-snap>{{ $c.contact.p_2 }}</p>
      <div class="k-info">
        <ul class="b k-box" data-k="k-box" data-snap>
          <li class="small">{{ $c.contact.li_3 }}</li>
          <li><a href="mailto:atelier@example.com">{{ $c.contact.a_4 }}</a></li>
          <li><a href="tel:+351220000000">{{ $c.contact.a_5 }}</a></li>
        </ul>
        <div class="b k-box" data-k="k-box" data-snap>
          <p class="small">{{ $c.contact.p_6 }}</p>
          <p>{{ $c.contact.p_7 }}</p>
        </div>
      </div>

      
      <form id="fg-form" class="k-form" data-k="form" action="https://formgong.com/submit" method="POST" enctype="multipart/form-data" data-sitekey>
        <input type="hidden" name="access_key" value="{{ $c.form.access_key }}">
        <input type="hidden" name="_lang" value="en">
        <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"><label>{{ $c.contact.text_8 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
        <div class="b f"><label class="small" for="f-name">{{ $c.contact.label_9 }}</label><input id="f-name" name="name" type="text" required maxlength="80" autocomplete="name" placeholder="Your name"></div>
        <div class="b f"><label class="small" for="f-email">{{ $c.contact.label_10 }}</label><input id="f-email" name="email" type="email" required maxlength="120" autocomplete="email" placeholder="you@example.com"></div>
        <div class="b f" data-phone-field><label class="small" for="f-phone">{{ $c.contact.label_11 }}</label><input id="f-phone" name="phone" type="tel" maxlength="40" autocomplete="tel" placeholder="Optional"></div>
        <div class="b f sel"><label class="small" for="f-project">{{ $c.contact.label_12 }}</label><select id="f-project" name="project" required><option value>{{ $c.contact.option_13 }}</option><option>{{ $c.contact.option_14 }}</option><option>{{ $c.contact.option_15 }}</option><option>{{ $c.contact.option_16 }}</option><option>{{ $c.contact.option_17 }}</option></select></div>
        <div class="b f msg"><label class="small" for="f-message">{{ $c.contact.label_18 }}</label><textarea id="f-message" name="message" required maxlength="3000" placeholder="Openings, sizes, place, timing…"></textarea></div>
        
        <div class="b" data-turnstile hidden></div>
        <label class="b consent"><input type="checkbox" name="consent" value="yes" required><span>{{ $c.contact.span_19 }}</span></label>
        <button class="b ink small send" type="submit"><span data-send-label>{{ $c.contact.span_20 }}</span><span aria-hidden="true">→</span></button>
        <p class="status" data-status role="status"></p>
        <p class="credit">{{ $c.contact.p_21_html | safeHTML }}</p>
        <div class="b sent" tabindex="-1">
          <p class="small">{{ $c.contact.p_22 }}</p>
          <p>{{ $c.contact.p_23_html | safeHTML }}</p>
          <button type="button" class="b ink small again" data-again>{{ $c.contact.button_24 }}</button>
        </div>
      </form>
    </div>
  </section>