<footer class="footer">
  <div class="footer__inner container">

    <div>
      <a href="{{ rootPath }}index.html" class="footer__brand" aria-label="HER Home Enhancement &amp; Restoration — Home">
        <span class="footer__brand-her">HER</span>
        <span class="footer__brand-tagline" aria-hidden="true">Home Enhancement<br><span class="footer__brand-amp">&amp;</span> Restoration</span>
      </a>
    </div>

    <nav aria-label="Footer navigation">
      <p class="footer__nav-heading">Services in the Bay Area</p>
      <div class="footer__nav-cols">
        <ul class="footer__nav" role="list">
          {% for service in services %}
          {% if loop.index <= 5 %}
          <li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li>
          {% endif %}
          {% endfor %}
        </ul>
        <ul class="footer__nav" role="list">
          {% for service in services %}
          {% if loop.index > 5 %}
          <li><a href="{{ rootPath }}services/{{ service.slug }}/index.html">{{ service.name }}</a></li>
          {% endif %}
          {% endfor %}
        </ul>
      </div>
    </nav>

    <div>
      <p class="footer__nav-heading">Contact</p>
      <div class="footer__contact">
        <a href="{{ site.phone | telHref }}">{{ site.phoneDisplay }}</a>
        <a href="mailto:{{ site.email }}">{{ site.email }}</a>
      </div>
    </div>

  </div>

  <div class="footer__bottom">
    <div class="container">
      <p>&copy; {{ "" | currentYear }} Home Enhancement &amp; Restoration &mdash; HER. All rights reserved.</p>
    </div>
  </div>
</footer>
