{{- $c := site.Data.content -}}
<section class="why" aria-labelledby="why-h">
    <div class="wrap">
      <span class="eyebrow rv">{{ $c.why.span_1 }}</span>
      <h2 id="why-h" class="rv" style="--d:.1s">{{ $c.why.h2_2_html | safeHTML }}</h2>
      <ul class="badges">
        <li class="badge rv" style="--d:.1s">
          <svg viewBox="0 0 200 200" aria-hidden="true">
            <circle cx="100" cy="100" r="98" fill="#FF9FC6" />
            <defs><path id="ring-1" d="M100 100m-74 0a74 74 0 1 1 148 0a74 74 0 1 1-148 0" /></defs>
            <g class="ring"><text><textPath href="#ring-1" textLength="458" lengthAdjust="spacing">TREATS ON THE TABLE • BURROW VET •</textPath></text></g>
            <g fill="#2A1740"><rect x="80" y="94" width="40" height="12" rx="3" /><circle cx="79" cy="93" r="8" /><circle cx="79" cy="107" r="8" /><circle cx="121" cy="93" r="8" /><circle cx="121" cy="107" r="8" /></g>
          </svg>
          <p>{{ $c.why.p_3 }}</p>
        </li>
        <li class="badge rv" style="--d:.2s">
          <svg viewBox="0 0 200 200" aria-hidden="true">
            <circle cx="100" cy="100" r="98" fill="#B9A4FF" />
            <defs><path id="ring-2" d="M100 100m-74 0a74 74 0 1 1 148 0a74 74 0 1 1-148 0" /></defs>
            <g class="ring"><text><textPath href="#ring-2" textLength="458" lengthAdjust="spacing">A ROOM JUST FOR CATS • BURROW VET •</textPath></text></g>
            <g fill="#2A1740"><path d="M74 118c0-18 11-28 26-28s26 10 26 28z" /><path d="M76 104l2-26 16 14zM124 104l-2-26-16 14z" /></g>
            <g fill="#B9A4FF"><circle cx="91" cy="106" r="3.2" /><circle cx="109" cy="106" r="3.2" /></g>
          </svg>
          <p>{{ $c.why.p_4 }}</p>
        </li>
        <li class="badge rv" style="--d:.3s">
          <svg viewBox="0 0 200 200" aria-hidden="true">
            <circle cx="100" cy="100" r="98" fill="#FF6B2C" />
            <defs><path id="ring-3" d="M100 100m-74 0a74 74 0 1 1 148 0a74 74 0 1 1-148 0" /></defs>
            <g class="ring"><text><textPath href="#ring-3" textLength="458" lengthAdjust="spacing">THIRTY CALM MINUTES • BURROW VET •</textPath></text></g>
            <circle cx="100" cy="100" r="25" fill="none" stroke="#2A1740" stroke-width="7" />
            <path d="M100 87v14l9 6" fill="none" stroke="#2A1740" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          <p>{{ $c.why.p_5 }}</p>
        </li>
        <li class="badge rv" style="--d:.4s">
          <svg viewBox="0 0 200 200" aria-hidden="true">
            <circle cx="100" cy="100" r="98" fill="#FFD9C2" />
            <defs><path id="ring-4" d="M100 100m-74 0a74 74 0 1 1 148 0a74 74 0 1 1-148 0" /></defs>
            <g class="ring"><text><textPath href="#ring-4" textLength="458" lengthAdjust="spacing">HOUSE CALLS NEARBY • BURROW VET •</textPath></text></g>
            <path d="M74 102l26-24 26 24v24H74z" fill="#2A1740" stroke="#2A1740" stroke-width="4" stroke-linejoin="round" />
            <path d="M100 120c-8-5-12-9-12-13a5 5 0 0 1 12-2 5 5 0 0 1 12 2c0 4-4 8-12 13z" fill="#FF6B2C" />
          </svg>
          <p>{{ $c.why.p_6 }}</p>
        </li>
      </ul>
      <a class="btn rv" href="#team">{{ $c.why.a_7 }}</a>
    </div>
  </section>