{{- $c := site.Data.content -}}
<section class="sec tight" id="care" aria-labelledby="care-h">
    <div class="wrap">
      <div class="sec-head">
        <div data-r>
          <span class="pill">{{ $c.care.span_1 }}</span>
          <h2 id="care-h">{{ $c.care.h2_2_html | safeHTML }}</h2>
        </div>
        <p class="lead" data-r style="--d:1">{{ $c.care.p_3 }}</p>
      </div>
      <div class="bento">
        <article class="card tile t-check" data-r>
          <div class="txt">
            <h3>{{ $c.care.h3_4 }}</h3>
            <p>{{ $c.care.p_5 }}</p>
            <a class="go" href="#book" data-service="Baseline check-up">{{ $c.care.a_6_html | safeHTML }}</a>
          </div>
          <div class="report" aria-label="Sample results summary">
            <header>{{ $c.care.header_7_html | safeHTML }}</header>
            <div class="mk">
              <div class="mk-top">{{ $c.care.div_8_html | safeHTML }}</div>
              <div class="scale" aria-hidden="true"><i style="--x:18%"></i></div>
              <p>{{ $c.care.p_9 }}</p>
            </div>
            <div class="mk">
              <div class="mk-top">{{ $c.care.div_10_html | safeHTML }}</div>
              <div class="scale" aria-hidden="true"><i style="--x:52%"></i></div>
              <p>{{ $c.care.p_11 }}</p>
            </div>
            <div class="mk">
              <div class="mk-top">{{ $c.care.div_12_html | safeHTML }}</div>
              <div class="scale" aria-hidden="true"><i style="--x:79%"></i></div>
              <p>{{ $c.care.p_13 }}</p>
            </div>
          </div>
        </article>
        <article class="card tile t-labs" data-r style="--d:1">
          <h3>{{ $c.care.h3_14 }}</h3>
          <p class="big" aria-hidden="true">{{ $c.care.p_15 }}</p>
          <strong>{{ $c.care.strong_16 }}</strong>
          <p>{{ $c.care.p_17 }}</p>
          <ul class="chips" aria-label="Some of the areas covered">
            <li><span>{{ $c.care.span_18 }}</span></li><li><span>{{ $c.care.span_19 }}</span></li><li><span>{{ $c.care.span_20 }}</span></li><li><span>{{ $c.care.span_21 }}</span></li><li><span>{{ $c.care.span_22 }}</span></li><li><span>{{ $c.care.span_23 }}</span></li><li><span>{{ $c.care.span_24 }}</span></li>
          </ul>
          <a class="go" href="#book" data-service="Results review">{{ $c.care.a_25_html | safeHTML }}</a>
        </article>
        <article class="card tile t-photo t-food" data-r>
          <div class="ph"><img src="{{ ($c.care.img_26_image | relURL) }}" alt="{{ $c.care.img_26_alt }}" width="1254" height="1254" loading="lazy"></div>
          <div class="txt">
            <h3>{{ $c.care.h3_27 }}</h3>
            <p>{{ $c.care.p_28 }}</p>
            <a class="go" href="#book" data-service="Nutrition">{{ $c.care.a_29_html | safeHTML }}</a>
          </div>
        </article>
        <article class="card tile t-photo t-coach" data-r style="--d:1">
          <div class="ph"><img src="{{ ($c.care.img_30_image | relURL) }}" alt="{{ $c.care.img_30_alt }}" width="1254" height="1254" loading="lazy"></div>
          <div class="txt">
            <h3>{{ $c.care.h3_31 }}</h3>
            <p>{{ $c.care.p_32 }}</p>
            <a class="go" href="#book" data-service="Coaching">{{ $c.care.a_33_html | safeHTML }}</a>
          </div>
        </article>
        <article class="card tile t-sleep" data-r style="--d:2">
          <div class="ring" aria-hidden="true"><span>{{ $c.care.span_34_html | safeHTML }}</span></div>
          <h3>{{ $c.care.h3_35 }}</h3>
          <p>{{ $c.care.p_36 }}</p>
          <a class="go" href="#book" data-service="Coaching">{{ $c.care.a_37_html | safeHTML }}</a>
        </article>
      </div>
    </div>
  </section>