{{- $c := site.Data.content -}}
<section class="hero frame" aria-label="Goldleaf studio">
    <div class="gap"></div>
    <div class="brand">
      <p class="spaced">{{ $c.hero.p_1_html | safeHTML }}</p>
      <h1 class="sr">{{ $c.hero.h1_2 }}</h1>
      <span class="mark" aria-hidden="true"><span class="w1">{{ $c.hero.span_3 }}</span><span class="w2">{{ $c.hero.text_4 }}<svg class="leaf" aria-hidden="true"><use href="#i-leaf" /></svg></span></span>
      <a class="arrow" href="#services" aria-label="Scroll to the services"><svg viewBox="0 0 28 58" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M14 0v56M2 44l12 13 12-13" /></svg></a>
    </div>
    <div class="art">
      <svg viewBox="0 0 700 520" role="img" aria-label="A drawn armchair and floor lamp beside a tall arch that opens onto a bright hallway">
        <defs><clipPath id="arch-open"><path d="M282 520V190a128 128 0 0 1 256 0V520z" /></clipPath></defs>
        <g class="scene">
          <image href="{{ ($c.hero.image_5_href_image | relURL) }}" x="282" y="60" width="256" height="460" preserveAspectRatio="xMidYMid slice" clip-path="url(#arch-open)" />
          <path class="edge" d="M282 520V190a128 128 0 0 1 256 0V520" />
          <path class="frame" d="M262 520V190a148 148 0 0 1 296 0V520h-20V190a128 128 0 0 0-256 0V520z" />
          <path class="mould" d="M271 520V190a139 139 0 0 1 278 0V520" />
          <path class="key" d="M398 38h24l-4 26h-16z" />
          <path class="twig" d="M28 468c-2-40 4-74 20-104M30 430c-12-12-22-14-30-12M34 404c8-12 18-16 28-14M38 382c-6-14-6-26-2-36" />
          <path class="vase" d="M10 516c-6-22 0-40 14-48h8c14 8 20 26 14 48z" />
          <g class="chair" transform="translate(0 40)">
            <path class="soft" d="M78 404V302c0-40 30-64 72-64s72 24 72 64v102z" />
            <rect class="soft" x="62" y="356" width="176" height="50" rx="20" />
            <rect class="soft" x="48" y="318" width="34" height="92" rx="17" />
            <rect class="soft" x="218" y="318" width="34" height="92" rx="17" />
            <path class="line" d="M80 410l-8 66M220 410l8 66M112 268c18-10 58-10 76 0" />
          </g>
          <g class="lamp">
            <path class="shade" d="M596 236h88l-20-64h-48z" />
            <path class="line" d="M640 236V510" />
            <ellipse class="base" cx="640" cy="512" rx="30" ry="6" />
          </g>
        </g>
      </svg>
    </div>
    <div class="gap"></div>
  </section>