<a href="#main-content" class="skip-link">Skip to main content</a>

<header class="nav" role="banner">
  <div class="nav__inner container">

    <a href="{{ rootPath }}index.html" class="nav__brand" aria-label="HER Home Enhancement and Renovation — Home">HER</a>

    <nav aria-label="Main navigation">
      <ul class="nav__links" role="list">
        <li><a href="{{ rootPath }}about/index.html">About</a></li>
        <li><a href="{{ rootPath }}services/index.html">Services</a></li>
        <li><a href="{{ rootPath }}testimonials/index.html">Testimonials</a></li>
        <li><a href="{{ rootPath }}contact/index.html">Contact</a></li>
      </ul>
    </nav>

    <div class="nav__actions">
      <a href="{{ site.phone | telHref }}" class="nav__phone" aria-label="Call Diana at {{ site.phoneDisplay }}">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.5 16h.5a2 2 0 0 1 .02.92z"/>
        </svg>
      </a>

      <a href="{{ rootPath }}contact/index.html" class="btn btn--primary" style="display:none" id="nav-cta">Request a Quote</a>

      <button
        class="nav__toggle"
        aria-label="Open menu"
        aria-expanded="false"
        aria-controls="nav-overlay"
      >
        <span class="nav__bar"></span>
        <span class="nav__bar"></span>
        <span class="nav__bar"></span>
      </button>
    </div>

  </div>

  {# Mobile overlay #}
  <div class="nav__overlay" id="nav-overlay" hidden>
    <button class="nav__overlay-close" aria-label="Close menu">&#x2715;</button>
    <nav aria-label="Mobile navigation">
      <ul role="list">
        <li><a href="{{ rootPath }}about/index.html">About</a></li>
        <li><a href="{{ rootPath }}services/index.html">Services</a></li>
        <li><a href="{{ rootPath }}testimonials/index.html">Testimonials</a></li>
        <li><a href="{{ rootPath }}contact/index.html">Contact</a></li>
      </ul>
    </nav>
    <a href="{{ rootPath }}contact/index.html" class="btn btn--ghost-white btn--full">Request a Quote</a>
    <a href="{{ site.phone | telHref }}" class="nav__overlay-phone">{{ site.phoneDisplay }}</a>
  </div>

</header>
