{{- $c := site.Data.content -}}
<section class="hero" aria-labelledby="hero-h">
    <div class="hero-text">
      <span class="eyebrow"><svg aria-hidden="true" fill="#1F9A55"><use href="#leaf" /></svg>{{ $c.hero.text_1 }}</span>
      <h1 id="hero-h"><span class="w"><span style="--d:.05s">{{ $c.hero.span_2 }}</span></span> <span class="w"><span style="--d:.15s">{{ $c.hero.span_3 }}</span></span> <span class="w"><span style="--d:.25s"><em>{{ $c.hero.em_4 }}</em></span></span> <span class="w"><span style="--d:.35s"><em>{{ $c.hero.em_5 }}</em></span></span></h1>
      <p class="lead">{{ $c.hero.p_6 }}</p>
      <div class="hero-btns">
        <a class="btn btn-beet" href="#book" data-pick="Flu vaccination">{{ $c.hero.text_7 }} <svg aria-hidden="true"><use href="#arrow" /></svg></a>
        <a class="btn btn-line" href="#ask">{{ $c.hero.a_8 }}</a>
      </div>
      <ul class="ticks">
        <li><svg aria-hidden="true"><use href="#tick" /></svg>{{ $c.hero.text_9 }}</li>
        <li><svg aria-hidden="true"><use href="#tick" /></svg>{{ $c.hero.text_10 }}</li>
        <li><svg aria-hidden="true"><use href="#tick" /></svg>{{ $c.hero.text_11 }}</li>
      </ul>
    </div>

    <div class="hero-art" aria-hidden="true">
      <div class="stage">
        <span class="shape s-circle"></span>
        <span class="shape s-arch"></span>
        <span class="shape s-tablet"></span>
        <div class="photo-arch"><img src="{{ ($c.hero.img_12_image | relURL) }}" alt width="1024" height="1536" fetchpriority="high"></div>
        <svg class="sprig" viewBox="0 0 260 320">
          <g class="sway b"><path d="M150 320C150 260 156 190 170 120" fill="none" stroke="#0E7240" stroke-width="3" stroke-linecap="round" /><g fill="#C4195A"><circle cx="171" cy="112" r="5" /><circle cx="163" cy="128" r="4.5" /><circle cx="176" cy="132" r="4" /><circle cx="166" cy="146" r="4.5" /><circle cx="174" cy="96" r="4" /><circle cx="167" cy="84" r="3.5" /><circle cx="177" cy="78" r="3" /></g><g fill="#D4E84F"><circle cx="160" cy="160" r="3.5" /><circle cx="170" cy="168" r="3" /></g></g>
          <g class="sway"><use href="#leaf" width="40" height="64" fill="#1F9A55" transform="translate(140 320) rotate(-28) scale(3.2) translate(-20 -64)" /></g>
          <g class="sway c"><use href="#leaf" width="40" height="64" fill="#D4E84F" transform="translate(146 320) rotate(18) scale(2.5) translate(-20 -64)" /></g>
          <g class="sway b"><use href="#leaf" width="40" height="64" fill="#0E7240" transform="translate(132 320) rotate(-58) scale(2.2) translate(-20 -64)" /></g>
          <g class="sway c"><use href="#leaf" width="40" height="64" fill="#2DB466" transform="translate(152 320) rotate(46) scale(1.8) translate(-20 -64)" /></g>
        </svg>
      </div>
      <span class="caption-latin">{{ $c.hero.span_13 }}</span>
    </div>

    <aside class="panel" aria-labelledby="panel-h">
      <div>
        <h2 id="panel-h">{{ $c.hero.h2_14 }}</h2>
        <p class="status" data-status-line><span class="dot" data-dot></span><span data-status-text>{{ $c.hero.span_15 }}</span></p>
        <dl class="hours" data-hours>
          <dt data-days="1-5">{{ $c.hero.dt_16 }}</dt><dd data-days="1-5">{{ $c.hero.dd_17 }}</dd>
          <dt data-days="6">{{ $c.hero.dt_18 }}</dt><dd data-days="6">{{ $c.hero.dd_19 }}</dd>
          <dt data-days="0">{{ $c.hero.dt_20 }}</dt><dd data-days="0">{{ $c.hero.dd_21 }}</dd>
        </dl>
      </div>
      <hr>
      <div>
        <a class="tel" href="tel:+441632960418"><svg aria-hidden="true"><use href="#phone" /></svg>{{ $c.hero.text_22 }}</a>
        <address>{{ $c.hero.address_23_html | safeHTML }}</address>
      </div>
      <hr>
      <div class="panel-links">
        <a href="#ask">{{ $c.hero.a_24 }}</a>
        <a href="#deliver">{{ $c.hero.a_25 }}</a>
      </div>
    </aside>
  </section>