{{- $c := site.Data.content -}}
<section class="hero" aria-labelledby="hero-h">
    <div class="blob blob-lilac rv fade" style="--d:.45s" aria-hidden="true"></div>
    <div class="wrap hero-grid">
      <div class="hero-media">
        <div class="blob blob-orange rv fade" style="--d:.3s" aria-hidden="true"></div>
        <div class="blob blob-pink rv fade" style="--d:.45s" aria-hidden="true"></div>
        <div class="ph hero-photo rv fade">
          <img src="{{ ($c.hero.img_1_image | relURL) }}" alt="{{ $c.hero.img_1_alt }}" width="1024" height="1536" fetchpriority="high">
        </div>
        <div class="sticker rv fade" style="--d:.6s" aria-hidden="true">
          <svg viewBox="0 0 200 200">
            <circle cx="100" cy="100" r="98" fill="#2A1740" />
            <defs><path id="sticker-ring" d="M100 100m-70 0a70 70 0 1 1 140 0a70 70 0 1 1-140 0" /></defs>
            <g class="turn"><text font-family="Nunito, sans-serif" font-weight="800" font-size="19" letter-spacing="3" fill="#FFF5EB"><textPath href="#sticker-ring" textLength="436" lengthAdjust="spacing">CATS &amp; DOGS • LARKFIELD • SINCE 2014 •</textPath></text></g>
            <circle cx="100" cy="100" r="38" fill="#FF6B2C" />
            <g fill="#2A1740"><ellipse cx="100" cy="109" rx="13" ry="11" /><ellipse cx="84" cy="95" rx="5.5" ry="7" /><ellipse cx="94" cy="85" rx="5.5" ry="7" /><ellipse cx="106" cy="85" rx="5.5" ry="7" /><ellipse cx="116" cy="95" rx="5.5" ry="7" /></g>
          </svg>
        </div>
      </div>
      <div class="hero-text">
        <span class="eyebrow rv" style="--d:.2s">{{ $c.hero.span_2 }}</span>
        <h1 id="hero-h" class="rv" style="--d:.25s">{{ $c.hero.text_3 }} <em>{{ $c.hero.text_4 }}<svg viewBox="0 0 200 20" preserveAspectRatio="none" aria-hidden="true"><path d="M3 14c40-10 90-12 194-6" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" /></svg></em>.</h1>
        <p class="lead rv" style="--d:.35s">{{ $c.hero.p_5 }}</p>
        <div class="hero-actions rv" style="--d:.45s">
          <a class="btn btn-fill" href="#book">{{ $c.hero.text_6 }} <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
          <a class="btn" href="#services">{{ $c.hero.a_7 }}</a>
        </div>
        <ul class="facts rv" style="--d:.55s">
          <li><span><svg viewBox="0 0 24 24" fill="none" stroke="#2A1740" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="8" /><path d="M12 8v4l3 2" /></svg></span>{{ $c.hero.text_8 }}</li>
          <li><span><svg viewBox="0 0 24 24" fill="none" stroke="#2A1740" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6 8 6v9H4z" /></svg></span>{{ $c.hero.text_9 }}</li>
          <li><span><svg viewBox="0 0 24 24" fill="#2A1740" aria-hidden="true"><path d="M5 20c0-6 2-10 7-10s7 4 7 10zM5 4l3 6h-3zM19 4l-3 6h3z" /></svg></span>{{ $c.hero.text_10 }}</li>
        </ul>
      </div>
    </div>
  </section>