{{- $c := site.Data.content -}}
<section class="tx dark grain" id="treatments" aria-labelledby="tx-h">
    <div class="tx-head">
      <div>
        <p class="dot">{{ $c.treatments.p_1 }}</p>
        <h2 class="h2 lines" id="tx-h" data-rv><span class="ln"><span>{{ $c.treatments.span_2 }}</span></span><span class="ln"><span>{{ $c.treatments.span_3_html | safeHTML }}</span></span></h2>
      </div>
      <p class="muted" data-rv>{{ $c.treatments.p_4 }}</p>
    </div>
    <div class="tx-track">
      <div class="tx-stick">
        <article class="tx-item on" aria-labelledby="tx-1">
          <div class="tx-media ph"><img src="{{ ($c.treatments.img_5_image | relURL) }}" alt="{{ $c.treatments.img_5_alt }}" loading="lazy" decoding="async" width="1024" height="1536"></div>
          <h3 class="tx-title" id="tx-1"><em class="ln"><span>{{ $c.treatments.span_6 }}</span></em><span class="ln"><span>{{ $c.treatments.span_7 }}</span></span></h3>
          <div class="tx-body">
            <p class="lead">{{ $c.treatments.p_8 }}</p>
            <dl class="spec"><div><dt class="lbl">{{ $c.treatments.dt_9 }}</dt><dd>{{ $c.treatments.dd_10 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_11 }}</dt><dd>{{ $c.treatments.dd_12 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_13 }}</dt><dd>{{ $c.treatments.dd_14 }}</dd></div></dl>
            <ul class="tx-list">
              <li><a href="#book" data-pick="Veneers">{{ $c.treatments.text_15 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Veneers">{{ $c.treatments.text_16 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Veneers">{{ $c.treatments.text_17 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Veneers">{{ $c.treatments.text_18 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
            </ul>
          </div>
        </article>
        <article class="tx-item" aria-labelledby="tx-2">
          <div class="tx-media ph"><img src="{{ ($c.treatments.img_19_image | relURL) }}" alt="{{ $c.treatments.img_19_alt }}" loading="lazy" decoding="async" width="1024" height="1536"></div>
          <h3 class="tx-title" id="tx-2"><em class="ln"><span>{{ $c.treatments.span_20 }}</span></em><span class="ln"><span>{{ $c.treatments.span_21 }}</span></span></h3>
          <div class="tx-body">
            <p class="lead">{{ $c.treatments.p_22 }}</p>
            <dl class="spec"><div><dt class="lbl">{{ $c.treatments.dt_23 }}</dt><dd>{{ $c.treatments.dd_24 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_25 }}</dt><dd>{{ $c.treatments.dd_26 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_27 }}</dt><dd>{{ $c.treatments.dd_28 }}</dd></div></dl>
            <ul class="tx-list">
              <li><a href="#book" data-pick="Implants">{{ $c.treatments.text_29 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Implants">{{ $c.treatments.text_30 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Implants">{{ $c.treatments.text_31 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Implants">{{ $c.treatments.text_32 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
            </ul>
          </div>
        </article>
        <article class="tx-item" aria-labelledby="tx-3">
          <div class="tx-media ph"><img src="{{ ($c.treatments.img_33_image | relURL) }}" alt="{{ $c.treatments.img_33_alt }}" loading="lazy" decoding="async" width="1024" height="1536"></div>
          <h3 class="tx-title" id="tx-3"><em class="ln"><span>{{ $c.treatments.span_34 }}</span></em><span class="ln"><span>{{ $c.treatments.span_35 }}</span></span></h3>
          <div class="tx-body">
            <p class="lead">{{ $c.treatments.p_36 }}</p>
            <dl class="spec"><div><dt class="lbl">{{ $c.treatments.dt_37 }}</dt><dd>{{ $c.treatments.dd_38 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_39 }}</dt><dd>{{ $c.treatments.dd_40 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_41 }}</dt><dd>{{ $c.treatments.dd_42 }}</dd></div></dl>
            <ul class="tx-list">
              <li><a href="#book" data-pick="Aligners">{{ $c.treatments.text_43 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Aligners">{{ $c.treatments.text_44 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Aligners">{{ $c.treatments.text_45 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
            </ul>
          </div>
        </article>
        <article class="tx-item" aria-labelledby="tx-4">
          <div class="tx-media ph"><img src="{{ ($c.treatments.img_46_image | relURL) }}" alt="{{ $c.treatments.img_46_alt }}" loading="lazy" decoding="async" width="1024" height="1536"></div>
          <h3 class="tx-title" id="tx-4"><em class="ln"><span>{{ $c.treatments.span_47 }}</span></em><span class="ln"><span>{{ $c.treatments.span_48 }}</span></span></h3>
          <div class="tx-body">
            <p class="lead">{{ $c.treatments.p_49 }}</p>
            <dl class="spec"><div><dt class="lbl">{{ $c.treatments.dt_50 }}</dt><dd>{{ $c.treatments.dd_51 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_52 }}</dt><dd>{{ $c.treatments.dd_53 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_54 }}</dt><dd>{{ $c.treatments.dd_55 }}</dd></div></dl>
            <ul class="tx-list">
              <li><a href="#book" data-pick="Whitening">{{ $c.treatments.text_56 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Whitening">{{ $c.treatments.text_57 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Whitening">{{ $c.treatments.text_58 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
            </ul>
          </div>
        </article>
        <article class="tx-item" aria-labelledby="tx-5">
          <div class="tx-media ph"><img src="{{ ($c.treatments.img_59_image | relURL) }}" alt="{{ $c.treatments.img_59_alt }}" loading="lazy" decoding="async" width="1024" height="1536"></div>
          <h3 class="tx-title" id="tx-5"><em class="ln"><span>{{ $c.treatments.span_60 }}</span></em><span class="ln"><span>{{ $c.treatments.span_61 }}</span></span></h3>
          <div class="tx-body">
            <p class="lead">{{ $c.treatments.p_62 }}</p>
            <dl class="spec"><div><dt class="lbl">{{ $c.treatments.dt_63 }}</dt><dd>{{ $c.treatments.dd_64 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_65 }}</dt><dd>{{ $c.treatments.dd_66 }}</dd></div><div><dt class="lbl">{{ $c.treatments.dt_67 }}</dt><dd>{{ $c.treatments.dd_68 }}</dd></div></dl>
            <ul class="tx-list">
              <li><a href="#book" data-pick="Hygiene visit">{{ $c.treatments.text_69 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Hygiene visit">{{ $c.treatments.text_70 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
              <li><a href="#book" data-pick="Hygiene visit">{{ $c.treatments.text_71 }}<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 10 10 2M4 2h6v6" fill="none" stroke="currentColor" stroke-width="1.3" /></svg></a></li>
            </ul>
          </div>
        </article>
        <p class="tx-count" aria-hidden="true"><span data-count>{{ $c.treatments.span_72 }}</span><small>{{ $c.treatments.small_73 }}</small></p>
        <div class="tx-index">
          <span class="lbl">{{ $c.treatments.span_74 }}</span>
          <button type="button" aria-current="true">{{ $c.treatments.button_75 }}</button>
          <button type="button">{{ $c.treatments.button_76 }}</button>
          <button type="button">{{ $c.treatments.button_77 }}</button>
          <button type="button">{{ $c.treatments.button_78 }}</button>
          <button type="button">{{ $c.treatments.button_79 }}</button>
        </div>
        <div class="tx-cta"><a class="sl fill" href="#book">{{ $c.treatments.text_80 }}<svg viewBox="0 0 14 14" aria-hidden="true"><path d="M1 7h12M8 2l5 5-5 5" fill="none" stroke="currentColor" stroke-width="1.4" /></svg></a></div>
      </div>
    </div>
  </section>