{{- $c := site.Data.content -}}
<a class="skip" href="#contact">{{ $c.header.a_1 }}</a>
<div class="loader" aria-hidden="true">
  <p class="l-tl">{{ $c.header.p_2 }}</p>
  <p class="l-tr">{{ $c.header.p_3 }}</p>
  <div class="l-card"><img class="cover" src="{{ ($c.header.img_4_image | relURL) }}" alt></div>
  <p class="l-bl">{{ $c.header.p_5_html | safeHTML }}</p>
  <p class="l-br"><span data-pct>{{ $c.header.span_6 }}</span> %</p>
</div>
<header class="top" data-top>
  <button class="t-menu" type="button" aria-expanded="false" aria-controls="menu" data-menu-btn><span data-menu-label>{{ $c.header.span_7 }}</span><i aria-hidden="true"></i></button>
  <a class="t-mark" href="#top" aria-label="TAKU, back to top">
    <span class="d" aria-hidden="true">{{ $c.header.span_8 }}</span>
  </a>
  <a class="t-cta" href="#contact"><span>{{ $c.header.span_9 }}</span><b aria-hidden="true"></b></a>
</header>
<nav id="menu" class="menu" aria-label="Main">
  <div class="menu-in">
    <ul class="d">
      <li><a href="#top">{{ $c.header.a_10 }}</a></li>
      <li><a href="#work">{{ $c.header.a_11 }}</a></li>
      <li><a href="#services">{{ $c.header.a_12 }}</a></li>
      <li><a href="#studio">{{ $c.header.a_13 }}</a></li>
      <li><a href="#contact">{{ $c.header.a_14 }}</a></li>
    </ul>
    <div>
      <p>{{ $c.header.p_15 }}</p>
      <p class="small"><a href="#">{{ $c.header.a_16 }}</a><a href="#">{{ $c.header.a_17 }}</a></p>
    </div>
  </div>
</nav>