{{- $c := site.Data.content -}}
<section class="hero" aria-labelledby="hero-h">
    <div class="glow" aria-hidden="true"><i></i><i></i><i></i></div>
    <div class="hero-grid wrap">
      <div class="hero-text">
        <h1 id="hero-h"><span class="ln"><span>{{ $c.hero.span_1 }}</span></span> <span class="ln ln2"><span>{{ $c.hero.span_2_html | safeHTML }}</span></span></h1>
        <div class="hero-copy">
          <p>{{ $c.hero.p_3 }}</p>
          <div class="cta">
            <a class="btn fill" href="#book">{{ $c.hero.text_4 }}<svg class="i"><use href="#i-ne" /></svg></a>
            <a class="btn line" href="#treatments">{{ $c.hero.a_5 }}</a>
          </div>
        </div>
      </div>
      <figure class="oval">
        <div class="oval-frame"><img src="{{ ($c.hero.img_6_image | relURL) }}" alt="{{ $c.hero.img_6_alt }}" width="1024" height="1536" fetchpriority="high" decoding="async"></div>
        <span class="oval-ring" aria-hidden="true"></span>
        <a class="badge" href="#notes" aria-label="Scroll to clinic notes">
          <svg class="ring" viewBox="0 0 132 132" aria-hidden="true"><defs><path id="badge-path" d="M66 66m-50 0a50 50 0 1 1 100 0a50 50 0 1 1-100 0" /></defs><text><textPath href="#badge-path" textLength="308" lengthAdjust="spacing">Every visit starts with a consultation ·</textPath></text></svg>
          <span class="core"><svg class="i" aria-hidden="true"><use href="#i-down" /></svg></span>
        </a>
      </figure>
      <svg class="spark s1" aria-hidden="true"><use href="#spark" /></svg>
      <svg class="spark s2" aria-hidden="true"><use href="#spark" /></svg>
      <svg class="spark s3" aria-hidden="true"><use href="#spark" /></svg>
    </div>
    <ul class="hero-meta wrap">
      <li>{{ $c.hero.li_7_html | safeHTML }}</li>
      <li>{{ $c.hero.li_8_html | safeHTML }}</li>
      <li>{{ $c.hero.li_9_html | safeHTML }}</li>
    </ul>
  </section>