{{- $c := site.Data.content -}}
<a class="skip" href="#main">{{ $c.header.a_1 }}</a>
<div class="intro" aria-hidden="true">
  <div class="intro-in">
    <div class="intro-mark"><span class="sun-disc"></span>
      <svg viewBox="0 0 40 44"><use href="#mark" /></svg>
    </div>
    <div class="intro-word"><span>{{ $c.header.span_2 }}</span></div>
  </div>
</div>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <g id="mark">
      <path d="M9 17c0-6 4.5-9 9-8 1 .2 1.6.6 2 .6s1-.4 2-.6c4.5-1 9 2 9 8 0 5-2.4 7.6-3.2 12.6-.8 5-2 9.4-4.3 9.4-2.1 0-2.2-7.2-3.5-7.2s-1.4 7.2-3.5 7.2c-2.3 0-3.5-4.4-4.3-9.4C11.4 24.6 9 22 9 17z" fill="#FFC93C" stroke="#1E1B3A" stroke-width="1.8" stroke-linejoin="round" />
      <path d="M15.6 19.4c2.6 2.6 6.2 2.6 8.8 0" fill="none" stroke="#1E1B3A" stroke-width="1.8" stroke-linecap="round" />
      <path d="M20 9.4V5.6" stroke="#1E1B3A" stroke-width="1.6" stroke-linecap="round" />
      <path d="M20 6.4C18.8 3.4 16 2.2 13.2 2.8c.8 2.8 3.4 4.4 6.8 3.6zM20 5.4c1-3 3.8-4.6 6.8-4-.6 3-3.4 4.8-6.8 4z" fill="#3CC46B" stroke="#1E1B3A" stroke-width="1.4" stroke-linejoin="round" />
    </g>
    <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></symbol>
    <symbol id="i-diag" viewBox="0 0 24 24"><path d="M7 17 17 7M8 7h9v9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></symbol>
    <symbol id="i-phone" viewBox="0 0 24 24"><path d="M6.6 3.5h2.6l1.6 4.2-2 1.4a11 11 0 0 0 6.1 6.1l1.4-2 4.2 1.6v2.6a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" /></symbol>
    <symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3" fill="none" stroke="currentColor" stroke-width="1.9" /><path d="m4 7 8 6 8-6" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" /></symbol>
    <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="1.9" /><path d="M12 7.5V12l3 2" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" /></symbol>
    <symbol id="i-check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor" opacity=".18" /><path d="m7.5 12.4 3 3 6-6.4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></symbol>
    <symbol id="i-star" viewBox="0 0 24 24"><path d="m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z" fill="currentColor" /></symbol>
    <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.9" /><path d="M12 11v5.5M12 7.6v.1" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" /></symbol>
  </defs>
</svg>
<header class="site-head" id="top">
  <div class="bar">
    <a class="logo" href="#top" aria-label="Brightmoss Dental, back to top">
      <svg viewBox="0 0 40 44" aria-hidden="true"><use href="#mark" /></svg>
      <span><b>{{ $c.header.b_3 }}</b><small>{{ $c.header.small_4 }}</small></span>
    </a>
    <nav class="nav" id="menu" aria-label="Main">
      <span class="dot" aria-hidden="true"></span>
      <a href="#treatments">{{ $c.header.a_5 }}</a>
      <a href="#plans">{{ $c.header.a_6 }}</a>
      <a href="#visit">{{ $c.header.a_7 }}</a>
      <a href="#team">{{ $c.header.a_8 }}</a>
      <a href="#practices">{{ $c.header.a_9 }}</a>
      <a href="#faq">{{ $c.header.a_10 }}</a>
      <a class="menu-cta" href="#book">{{ $c.header.a_11 }}</a>
    </nav>
    <a class="head-tel" href="tel:+441632960214"><svg aria-hidden="true"><use href="#i-phone" /></svg>{{ $c.header.text_12 }}</a>
    <a class="pill" href="#book">{{ $c.header.text_13 }}<span class="arr"><svg aria-hidden="true"><use href="#i-arrow" /></svg></span></a>
    <button class="menu-btn" type="button" aria-expanded="false" aria-controls="menu"><span></span><b class="sr">{{ $c.header.b_14 }}</b></button>
  </div>
</header>