{{- $c := site.Data.content -}}
<section class="services" id="treatments" aria-labelledby="svc-h">
    <div class="wrap">
      <div class="sec-head">
        <div data-reveal><p class="eyebrow">{{ $c.treatments.p_1 }}</p><h2 id="svc-h">{{ $c.treatments.h2_2 }}</h2></div>
        <p class="lead" data-reveal style="--d:.1s">{{ $c.treatments.p_3 }}</p>
      </div>
      <div class="svc-grid">
        <a class="svc big" href="#book" data-service="Check-up" data-reveal>
          <div class="media"><img src="{{ ($c.treatments.img_4_image | relURL) }}" alt="{{ $c.treatments.img_4_alt }}" width="1600" height="1067" loading="lazy"></div>
          <div class="svc-top"><span class="svc-num">{{ $c.treatments.span_5 }}</span><span class="badge-arrow"><svg aria-hidden="true"><use href="#i-diag" /></svg></span></div>
          <div class="svc-body"><h3>{{ $c.treatments.h3_6 }}</h3><p>{{ $c.treatments.p_7 }}</p><span class="svc-price">{{ $c.treatments.span_8 }}</span></div>
        </a>
        <a class="svc sun" href="#book" data-service="Children's check-up" data-reveal style="--d:.08s">
          <div class="svc-top"><span class="svc-num">{{ $c.treatments.span_9 }}</span><span class="badge-arrow"><svg aria-hidden="true"><use href="#i-diag" /></svg></span></div>
          <svg class="svc-ico" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="24" cy="26" r="16" /><path d="M17 30c4 4 10 4 14 0" /><circle cx="18.5" cy="22" r="1.6" fill="currentColor" /><circle cx="29.5" cy="22" r="1.6" fill="currentColor" /><path d="M24 10V5m-6 6-3-4m15 4 3-4" /></svg>
          <div class="svc-body"><h3>{{ $c.treatments.h3_10 }}</h3><p>{{ $c.treatments.p_11 }}</p><span class="svc-price">{{ $c.treatments.span_12 }}</span></div>
        </a>
        <a class="svc sprout" href="#book" data-service="Hygiene visit" data-reveal style="--d:.16s">
          <div class="svc-top"><span class="svc-num">{{ $c.treatments.span_13 }}</span><span class="badge-arrow"><svg aria-hidden="true"><use href="#i-diag" /></svg></span></div>
          <svg class="svc-ico" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M24 6c6 8 11 14 11 21a11 11 0 0 1-22 0c0-7 5-13 11-21z" /><path d="M19 29a5 5 0 0 0 5 5" /><path d="M38 8v6m-3-3h6" /></svg>
          <div class="svc-body"><h3>{{ $c.treatments.h3_14 }}</h3><p>{{ $c.treatments.p_15 }}</p><span class="svc-price">{{ $c.treatments.span_16 }}</span></div>
        </a>
        <a class="svc coral" href="#book" data-service="Emergency" data-reveal>
          <div class="svc-top"><span class="svc-num">{{ $c.treatments.span_17 }}</span><span class="badge-arrow"><svg aria-hidden="true"><use href="#i-diag" /></svg></span></div>
          <svg class="svc-ico" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="24" cy="26" r="16" /><path d="M24 17v9l6 4" /><path d="M19 5h10M24 5v5" /></svg>
          <div class="svc-body"><h3>{{ $c.treatments.h3_18 }}</h3><p>{{ $c.treatments.p_19 }}</p><span class="svc-price">{{ $c.treatments.span_20 }}</span></div>
        </a>
        <a class="svc paper" href="#book" data-service="Clear aligners" data-reveal style="--d:.08s">
          <div class="svc-top"><span class="svc-num">{{ $c.treatments.span_21 }}</span><span class="badge-arrow"><svg aria-hidden="true"><use href="#i-diag" /></svg></span></div>
          <svg class="svc-ico" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 18c0 12 7 20 16 20s16-8 16-20" /><path d="M14 18c0 8 4 14 10 14s10-6 10-14" /><path d="M8 18h6m20 0h6" /></svg>
          <div class="svc-body"><h3>{{ $c.treatments.h3_22 }}</h3><p>{{ $c.treatments.p_23 }}</p><span class="svc-price">{{ $c.treatments.span_24 }}</span></div>
        </a>
        <a class="svc leaf" href="#book" data-service="Whitening" data-reveal style="--d:.16s">
          <div class="svc-top"><span class="svc-num">{{ $c.treatments.span_25 }}</span><span class="badge-arrow"><svg aria-hidden="true"><use href="#i-diag" /></svg></span></div>
          <svg class="svc-ico" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 8c1 8 4 11 12 12-8 1-11 4-12 12-1-8-4-11-12-12 8-1 11-4 12-12z" /><path d="M37 30c.5 3.5 2 5 5.5 5.5-3.5.5-5 2-5.5 5.5-.5-3.5-2-5-5.5-5.5 3.5-.5 5-2 5.5-5.5z" /></svg>
          <div class="svc-body"><h3>{{ $c.treatments.h3_26 }}</h3><p>{{ $c.treatments.p_27 }}</p><span class="svc-price">{{ $c.treatments.span_28 }}</span></div>
        </a>
        <a class="svc ask" href="#book" data-service="Something else" data-reveal style="--d:.24s">
          <div class="svc-top"><span class="svc-num">?</span><span class="badge-arrow"><svg aria-hidden="true"><use href="#i-diag" /></svg></span></div>
          <div class="svc-body"><h3>{{ $c.treatments.h3_29 }}</h3><p>{{ $c.treatments.p_30 }}</p><span class="svc-price">{{ $c.treatments.span_31 }}</span></div>
        </a>
      </div>
    </div>
  </section>