{{- $c := site.Data.content -}}
<a class="skip" href="#main">{{ $c.header.a_1 }}</a>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="mk" viewBox="0 0 40 40"><path d="M19.03 4.04A16 16 0 1 0 35.53 23.84A13 13 0 1 1 19.03 4.04Z" /><path d="M31.5 4.5c.45 2.9 1.6 4.05 4.5 4.5-2.9.45-4.05 1.6-4.5 4.5-.45-2.9-1.6-4.05-4.5-4.5 2.9-.45 4.05-1.6 4.5-4.5Z" /></symbol>
  <symbol id="spark" viewBox="0 0 24 24"><path d="M12 0C12.9 8 16 11.1 24 12C16 12.9 12.9 16 12 24C11.1 16 8 12.9 0 12C8 11.1 11.1 8 12 0Z" /></symbol>
  <symbol id="i-ne" viewBox="0 0 24 24"><path d="M7 17L17 7M9 7h8v8" /></symbol>
  <symbol id="i-r" viewBox="0 0 24 24"><path d="M4 12h16M14 6l6 6-6 6" /></symbol>
  <symbol id="i-l" viewBox="0 0 24 24"><path d="M20 12H4M10 6l-6 6 6 6" /></symbol>
  <symbol id="i-down" viewBox="0 0 24 24"><path d="M12 4v16M6 14l6 6 6-6" /></symbol>
  <symbol id="i-chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></symbol>
  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></symbol>
  <symbol id="i-phone" viewBox="0 0 24 24"><path d="M5 4h3l1.6 4-2 1.3a11 11 0 0 0 7.1 7.1l1.3-2 4 1.6v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" /></symbol>
  <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21s-6.5-5.8-6.5-11.2a6.5 6.5 0 0 1 13 0C18.5 15.2 12 21 12 21z" /><circle cx="12" cy="9.8" r="2.3" /></symbol>
  <symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5.5" width="18" height="13" rx="2" /><path d="M3.5 7l8.5 6 8.5-6" /></symbol>
  <symbol id="i-cal" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="15" rx="2" /><path d="M3.5 10h17M8 3v4M16 3v4" /></symbol>
  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></symbol>
  <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 7.6v.1" /></symbol>
</svg>
<div class="intro" aria-hidden="true"><svg class="mark" viewBox="0 0 40 40"><use href="#mk" /></svg><span>{{ $c.header.span_2 }}</span></div>
<div class="strip"><p><span class="long">{{ $c.header.span_3 }} </span><a href="#book">{{ $c.header.a_4 }}</a></p></div>
<header class="site" id="top">
  <div class="util wrap">
    <a class="logo" href="#top" aria-label="Selune Skin Clinic, back to top">
      <svg class="mark" viewBox="0 0 40 40" aria-hidden="true"><use href="#mk" /></svg>
      <span class="word" aria-hidden="true">{{ $c.header.span_5_html | safeHTML }}</span>
    </a>
    <p class="addr">{{ $c.header.p_6_html | safeHTML }}</p>
    <div class="util-actions">
      <a class="circ" href="#visit-us" aria-label="Find us"><svg class="i"><use href="#i-pin" /></svg></a>
      <a class="circ" href="mailto:hello@selune.example" aria-label="Email hello@selune.example"><svg class="i"><use href="#i-mail" /></svg></a>
      <a class="btn line sm tel" href="tel:+15550142290"><svg class="i"><use href="#i-phone" /></svg>{{ $c.header.text_7 }}</a>
      <a class="btn line sm vid" href="#book" data-service="Video consultation">{{ $c.header.text_8 }}<svg class="i"><use href="#i-ne" /></svg></a>
      <a class="btn fill sm book-top" href="#book">{{ $c.header.text_9 }}<svg class="i"><use href="#i-ne" /></svg></a>
    </div>
    <button class="menu-btn" type="button" aria-expanded="false" aria-controls="menu">{{ $c.header.button_10_html | safeHTML }}</button>
  </div>

  <nav class="nav" id="menu" aria-label="Main">
    <ul class="nav-list wrap">
      <li class="has-mega">
        <button class="mega-btn" type="button" aria-expanded="false" aria-controls="mega-treat">{{ $c.header.text_11 }} <svg class="i chev" aria-hidden="true"><use href="#i-chev" /></svg></button>
        <div class="mega" id="mega-treat">
          <div class="mega-in wrap">
            <div class="mega-col"><p>{{ $c.header.p_12 }}</p><a href="#treatments">{{ $c.header.a_13 }}</a><a href="#treatments">{{ $c.header.a_14 }}</a><a href="#treatments">{{ $c.header.a_15 }}</a><a href="#treatments">{{ $c.header.a_16 }}</a></div>
            <div class="mega-col"><p>{{ $c.header.p_17 }}</p><a href="#treatments">{{ $c.header.a_18 }}</a><a href="#treatments">{{ $c.header.a_19 }}</a><a href="#treatments">{{ $c.header.a_20 }}</a><a href="#treatments">{{ $c.header.a_21 }}</a></div>
            <div class="mega-col"><p>{{ $c.header.p_22 }}</p><a href="#treatments">{{ $c.header.a_23 }}</a><a href="#treatments">{{ $c.header.a_24 }}</a><a href="#treatments">{{ $c.header.a_25 }}</a></div>
            <div class="mega-col"><p>{{ $c.header.p_26 }}</p><a href="#treatments">{{ $c.header.a_27 }}</a><a href="#treatments">{{ $c.header.a_28 }}</a><a href="#treatments">{{ $c.header.a_29 }}</a></div>
            <a class="mega-card" href="#book" data-service="Not sure yet">
              <span class="ph"><img src="{{ ($c.header.img_30_image | relURL) }}" alt width="1024" height="1536" loading="lazy" decoding="async"></span>
              <span><strong>{{ $c.header.strong_31 }}</strong><span>{{ $c.header.span_32 }}</span></span>
            </a>
          </div>
        </div>
      </li>
      <li class="has-mega">
        <button class="mega-btn" type="button" aria-expanded="false" aria-controls="mega-con">{{ $c.header.text_33 }} <svg class="i chev" aria-hidden="true"><use href="#i-chev" /></svg></button>
        <div class="mega" id="mega-con">
          <div class="mega-in wrap">
            <div class="mega-col"><p>{{ $c.header.p_34 }}</p><a href="#concerns">{{ $c.header.a_35 }}</a><a href="#concerns">{{ $c.header.a_36 }}</a><a href="#concerns">{{ $c.header.a_37 }}</a></div>
            <div class="mega-col"><p>{{ $c.header.p_38 }}</p><a href="#concerns">{{ $c.header.a_39 }}</a><a href="#concerns">{{ $c.header.a_40 }}</a><a href="#concerns">{{ $c.header.a_41 }}</a></div>
            <div class="mega-col"><p>{{ $c.header.p_42 }}</p><a href="#concerns">{{ $c.header.a_43 }}</a><a href="#concerns">{{ $c.header.a_44 }}</a><a href="#concerns">{{ $c.header.a_45 }}</a></div>
            <div class="mega-col"><p>{{ $c.header.p_46 }}</p><a href="#concerns">{{ $c.header.a_47 }}</a><a href="#concerns">{{ $c.header.a_48 }}</a><a href="#concerns">{{ $c.header.a_49 }}</a></div>
            <a class="mega-card" href="#book" data-service="Skin check / moles">
              <span class="ph"><img src="{{ ($c.header.img_50_image | relURL) }}" alt width="1024" height="1536" loading="lazy" decoding="async"></span>
              <span><strong>{{ $c.header.strong_51 }}</strong><span>{{ $c.header.span_52 }}</span></span>
            </a>
          </div>
        </div>
      </li>
      <li><a href="#why">{{ $c.header.a_53 }}</a></li>
      <li><a href="#team">{{ $c.header.a_54 }}</a></li>
      <li><a href="#visit">{{ $c.header.a_55 }}</a></li>
      <li><a href="#prices">{{ $c.header.a_56 }}</a></li>
      <li><a href="#reviews">{{ $c.header.a_57 }}</a></li>
      <li><a href="#faq">{{ $c.header.a_58 }}</a></li>
      <li><a href="#book">{{ $c.header.a_59 }}</a></li>
    </ul>
  </nav>

  <div class="float" data-float>
    <a class="logo" href="#top" aria-label="Selune Skin Clinic, back to top"><svg class="mark" viewBox="0 0 40 40" aria-hidden="true"><use href="#mk" /></svg><span class="word" aria-hidden="true">{{ $c.header.span_60 }}</span></a>
    <ul>
      <li><a href="#treatments">{{ $c.header.a_61 }}</a></li>
      <li><a href="#why">{{ $c.header.a_62 }}</a></li>
      <li><a href="#team">{{ $c.header.a_63 }}</a></li>
      <li><a href="#prices">{{ $c.header.a_64 }}</a></li>
      <li><a href="#reviews">{{ $c.header.a_65 }}</a></li>
      <li><a href="#faq">{{ $c.header.a_66 }}</a></li>
    </ul>
    <a class="btn fill sm" href="#book">{{ $c.header.text_67 }}<svg class="i"><use href="#i-ne" /></svg></a>
  </div>
</header>
<aside class="rail" aria-label="Quick actions">
  <a href="#book"><svg class="i"><use href="#i-cal" /></svg>{{ $c.header.text_68 }}</a>
  <a href="tel:+15550142290"><svg class="i"><use href="#i-phone" /></svg>{{ $c.header.text_69 }}</a>
  <a href="#hours"><svg class="i"><use href="#i-clock" /></svg>{{ $c.header.text_70 }}</a>
  <a href="#visit-us"><svg class="i"><use href="#i-pin" /></svg>{{ $c.header.text_71 }}</a>
  <a class="rail-tab" href="#book" data-service="Video consultation">{{ $c.header.a_72 }}</a>
</aside>