{{- $c := site.Data.content -}}
<a class="skip" href="#main">{{ $c.header.a_1 }}</a>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <defs>
    <symbol id="leaf" viewBox="0 0 40 64">
      <path d="M20 0C28 8 33 18 33 28c0 5 2 9 5 13-7 0-13-2-16.5-5v28h-3V36C15 39 9 41 2 41c3-4 5-8 5-13C7 18 12 8 20 0z" />
      <path d="M20 5v33M20 14q4 3 7 7M20 14q-4 3-7 7M20 23q5 3 9 8M20 23q-5 3-9 8" fill="none" stroke="#C4195A" stroke-width="1.3" stroke-linecap="round" />
    </symbol>
    <symbol id="arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></symbol>
    <symbol id="tick" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" /><path d="m7.5 12.5 3 3 6-6.5" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></symbol>
    <symbol id="phone" viewBox="0 0 24 24"><path d="M6.6 3.5h2.6l1.4 4.2-2 1.4a12 12 0 0 0 6.3 6.3l1.4-2 4.2 1.4v2.6a2 2 0 0 1-2.2 2A17.5 17.5 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></symbol>
    <symbol id="star" viewBox="0 0 24 24"><path fill="currentColor" d="m12 2.6 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5-4.7-4.6 6.5-.9z" /></symbol>
    <symbol id="info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" /><path d="M12 11v6M12 7.5v.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" /></symbol>
  </defs>
</svg>
<header class="top" id="top">
  <div class="top-in">
    <a class="logo" href="#top" aria-label="Sorrel Pharmacy, back to top">
      <svg aria-hidden="true" fill="#1F9A55"><use href="#leaf" /></svg>
      <span><b>{{ $c.header.b_2 }}</b><small>{{ $c.header.small_3 }}</small></span>
    </a>
    <nav class="nav" aria-label="Main">
      <a href="#services">{{ $c.header.a_4 }}</a>
      <a href="#prices">{{ $c.header.a_5 }}</a>
      <a href="#how">{{ $c.header.a_6 }}</a>
      <a href="#team">{{ $c.header.a_7 }}</a>
      <a href="#faq">{{ $c.header.a_8 }}</a>
    </nav>
    <div class="top-cta">
      <a class="tel" href="tel:+441632960418"><svg aria-hidden="true"><use href="#phone" /></svg><span>{{ $c.header.span_9 }}</span></a>
      <a class="btn btn-beet" href="#book">{{ $c.header.a_10 }}</a>
    </div>
    <button class="menu-btn" type="button" aria-expanded="false" aria-controls="mnav"><span></span><b class="sr">{{ $c.header.b_11 }}</b></button>
  </div>
</header>
<nav class="mnav" id="mnav" aria-label="Mobile">
  <a class="l" href="#services">{{ $c.header.a_12 }}</a>
  <a class="l" href="#prices">{{ $c.header.a_13 }}</a>
  <a class="l" href="#how">{{ $c.header.a_14 }}</a>
  <a class="l" href="#team">{{ $c.header.a_15 }}</a>
  <a class="l" href="#faq">{{ $c.header.a_16 }}</a>
  <div class="row">
    <a class="btn btn-beet" href="#book">{{ $c.header.a_17 }}</a>
    <a class="btn btn-line" href="tel:+441632960418">{{ $c.header.a_18 }}</a>
  </div>
</nav>