{{- $c := site.Data.content -}}
<a class="skip" href="#contact">{{ $c.header.a_1 }}</a>
<div class="intro" aria-hidden="true">
  <div class="intro-word" data-k="i-word"><span style="--i:0">{{ $c.header.span_2 }}</span><span style="--i:1">{{ $c.header.span_3 }}</span><span style="--i:2">{{ $c.header.span_4 }}</span><span style="--i:3">{{ $c.header.span_5 }}</span><span style="--i:4">{{ $c.header.span_6 }}</span><span style="--i:5">{{ $c.header.span_7 }}</span><span style="--i:6">{{ $c.header.span_8 }}</span><span style="--i:7">{{ $c.header.span_9 }}</span></div>
</div>
<header class="bar">
  <a class="b logo" href="#top" aria-label="Veranthe Homes, back to top">{{ $c.header.a_10_html | safeHTML }}</a>
  <button class="b menu-btn" type="button" aria-expanded="false" aria-controls="menu" aria-label="Open menu">{{ $c.header.button_11 }}</button>
  <a class="b btn bar-cta" href="#contact">{{ $c.header.a_12 }}</a>
  <div class="b clock"><span class="mono">{{ $c.header.span_13 }}</span><span data-clock data-tz="Europe/Lisbon">--:--</span></div>
</header>
<nav id="menu" class="menu" aria-label="Main">
  <a href="#top" data-go="0" style="--i:0">{{ $c.header.a_14_html | safeHTML }}</a>
  <a href="#top" data-go="1" style="--i:1">{{ $c.header.a_15_html | safeHTML }}</a>
  <a href="#top" data-go="3" style="--i:2">{{ $c.header.a_16_html | safeHTML }}</a>
  <a href="#contact" style="--i:3">{{ $c.header.a_17_html | safeHTML }}</a>
</nav>