{{- $c := site.Data.content -}}
<section class="sec" id="visit" aria-labelledby="visit-h">
    <div class="wrap">
      <div class="sec-head">
        <div data-r>
          <span class="pill">{{ $c.visit.span_1 }}</span>
          <h2 id="visit-h">{{ $c.visit.h2_2_html | safeHTML }}</h2>
        </div>
        <div data-r style="--d:1"><a class="btn ink" href="#book" data-service="Free intro call">{{ $c.visit.a_3_html | safeHTML }}</a></div>
      </div>
      <div class="visit-grid">
        <div class="visit-photo" data-r>
          <div class="ph"><img src="{{ ($c.visit.img_4_image | relURL) }}" alt="{{ $c.visit.img_4_alt }}" width="1024" height="1536" loading="lazy"></div>
          <div class="slot" aria-hidden="true"><span class="dot"></span><div><small>{{ $c.visit.small_5 }}</small><b>{{ $c.visit.b_6 }}</b></div></div>
        </div>
        <ol class="steps" id="steps">
          <li class="step on" data-r>
            <div class="num" aria-hidden="true">{{ $c.visit.div_7 }}</div>
            <h3>{{ $c.visit.h3_8 }}</h3>
            <p>{{ $c.visit.p_9 }}</p>
            <span class="tag">{{ $c.visit.span_10 }}</span>
          </li>
          <li class="step" data-r>
            <div class="num" aria-hidden="true">{{ $c.visit.div_11 }}</div>
            <h3>{{ $c.visit.h3_12 }}</h3>
            <p>{{ $c.visit.p_13 }}</p>
            <span class="tag">{{ $c.visit.span_14 }}</span>
          </li>
          <li class="step" data-r>
            <div class="num" aria-hidden="true">{{ $c.visit.div_15 }}</div>
            <h3>{{ $c.visit.h3_16 }}</h3>
            <p>{{ $c.visit.p_17 }}</p>
            <span class="tag">{{ $c.visit.span_18 }}</span>
          </li>
          <li class="step" data-r>
            <div class="num" aria-hidden="true">{{ $c.visit.div_19 }}</div>
            <h3>{{ $c.visit.h3_20 }}</h3>
            <p>{{ $c.visit.p_21 }}</p>
            <span class="tag">{{ $c.visit.span_22 }}</span>
          </li>
        </ol>
      </div>
    </div>
  </section>