{{- $c := site.Data.content -}}
<section class="ct dark grain" id="book" aria-labelledby="ct-h">
    <p class="dot">{{ $c.book.p_1 }}</p>
    <h2 class="ct-h lines" id="ct-h" data-rv><span class="ln"><span>{{ $c.book.span_2 }}</span></span><span class="ln"><span><em>{{ $c.book.em_3 }}</em></span></span></h2>
    <div class="ct-grid">
      <div class="ct-info">
        <p class="lead" data-rv>{{ $c.book.p_4 }}</p>
        <dl>
          <div><dt class="lbl">{{ $c.book.dt_5 }}</dt><dd>{{ $c.book.dd_6_html | safeHTML }}</dd></div>
          <div><dt class="lbl">{{ $c.book.dt_7 }}</dt><dd>{{ $c.book.dd_8_html | safeHTML }}</dd></div>
          <div><dt class="lbl">{{ $c.book.dt_9 }}</dt><dd><a href="tel:+15550140190">{{ $c.book.a_10 }}</a></dd></div>
          <div><dt class="lbl">{{ $c.book.dt_11 }}</dt><dd><a href="mailto:studio@example.com">{{ $c.book.a_12 }}</a></dd></div>
        </dl>
      </div>
      
      <form class="form" id="f-contact" 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 visit request from the website">
        <div class="hp" aria-hidden="true"><label>{{ $c.book.text_13 }}<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
        <div class="fld"><label class="lbl" for="c-name">{{ $c.book.label_14 }}</label><input id="c-name" name="name" autocomplete="name" required maxlength="100"></div>
        <div class="fld"><label class="lbl" for="c-email">{{ $c.book.label_15 }}</label><input id="c-email" name="email" type="email" autocomplete="email" required maxlength="160"></div>
        <div class="fld"><label class="lbl" for="c-phone">{{ $c.book.label_16 }}</label><input id="c-phone" name="phone" type="tel" autocomplete="tel" maxlength="40"></div>
        <div class="fld"><label class="lbl" for="c-time">{{ $c.book.label_17 }}</label>
          <select id="c-time" name="preferred_time">
            <option>{{ $c.book.option_18 }}</option>
            <option>{{ $c.book.option_19 }}</option>
            <option>{{ $c.book.option_20 }}</option>
            <option>{{ $c.book.option_21 }}</option>
            <option>{{ $c.book.option_22 }}</option>
          </select>
        </div>
        <fieldset class="chips full">
          <legend class="lbl">{{ $c.book.legend_23 }}</legend>
          <div>
            <label><input type="radio" name="service" value="Consultation" checked><span>{{ $c.book.span_24 }}</span></label>
            <label><input type="radio" name="service" value="Veneers"><span>{{ $c.book.span_25 }}</span></label>
            <label><input type="radio" name="service" value="Implants"><span>{{ $c.book.span_26 }}</span></label>
            <label><input type="radio" name="service" value="Aligners"><span>{{ $c.book.span_27 }}</span></label>
            <label><input type="radio" name="service" value="Whitening"><span>{{ $c.book.span_28 }}</span></label>
            <label><input type="radio" name="service" value="Hygiene visit"><span>{{ $c.book.span_29 }}</span></label>
          </div>
        </fieldset>
        <div class="fld full"><label class="lbl" for="c-msg">{{ $c.book.label_30 }}</label><textarea id="c-msg" name="message" maxlength="1500" aria-describedby="c-msg-hint"></textarea><p class="hint" id="c-msg-hint">{{ $c.book.p_31 }}</p></div>
        <div class="send full">
          <button class="sl fill" type="submit"><span data-send-label>{{ $c.book.span_32 }}</span></button>
          <p class="status" data-status role="status" aria-live="polite"></p>
        </div>
        <p class="credit full">{{ $c.book.p_33_html | safeHTML }}</p>
        <div class="thanks" tabindex="-1"><strong>{{ $c.book.strong_34_html | safeHTML }}</strong><p>{{ $c.book.p_35 }}</p><button type="button" data-again>{{ $c.book.button_36 }}</button></div>
        <span class="tab lbl" aria-hidden="true">{{ $c.book.span_37 }}</span>
      </form>
    </div>
  </section>