{{- $c := site.Data.content -}}
<section class="hero" aria-labelledby="hero-h">
    <div class="hero-copy">
      <p class="eyebrow">{{ $c.hero.p_1 }}</p>
      <h1 id="hero-h">{{ $c.hero.h1_2_html | safeHTML }}</h1>
      <p>{{ $c.hero.p_3 }}</p>
      <div class="hero-cta">
        <a class="pill" href="#book">{{ $c.hero.text_4 }}<span class="arr"><svg aria-hidden="true"><use href="#i-arrow" /></svg></span></a>
        <a class="hero-tel" href="tel:+441632960214"><svg aria-hidden="true"><use href="#i-phone" /></svg><span>{{ $c.hero.span_5_html | safeHTML }}</span></a>
      </div>
    </div>
    <div class="hero-media">
      <span class="hero-sun" aria-hidden="true"></span>
      <figure class="hero-photo media"><img src="{{ ($c.hero.img_6_image | relURL) }}" alt="{{ $c.hero.img_6_alt }}" width="1024" height="1536" fetchpriority="high"></figure>
      <figure class="hero-frame">
        <div class="media"><img src="{{ ($c.hero.img_7_image | relURL) }}" alt="{{ $c.hero.img_7_alt }}" width="1600" height="1067"></div>
        <span class="badge" aria-hidden="true">
          <svg class="ring" viewBox="0 0 120 120"><defs><path id="badge-c" d="M60,60 m-45,0 a45,45 0 1,1 90,0 a45,45 0 1,1 -90,0" /></defs><text fill="currentColor" font-family="Figtree, sans-serif" font-size="10.2" font-weight="700"><textPath href="#badge-c" textLength="280" lengthAdjust="spacing">KIDS WELCOME · FROM THE FIRST TOOTH · </textPath></text></svg>
          <svg class="tooth" viewBox="0 0 40 44"><use href="#mark" /></svg>
        </span>
      </figure>
    </div>
    <a class="scroll-hint" href="#about">{{ $c.hero.a_8_html | safeHTML }}</a>
  </section>