---
custom_classes: ""
custom_spacing: "my-11 s--my-12"
hero_lead_in_title_color: "slate-80"
hero_headline_color: "slate-120"
hero_subheadline_color: "slate"
---
{{#
/**
 * @name hero/title-text-video-cta
 * @todo Document property vars/partial
 */
#}}
<section class="px-5 {{ custom_spacing }} {{ custom_classes }}">

  <div class="mw-grid mx-auto ta-center">
    {{ if hero_lead_in_title }}
    <h1 class="lead-in-1 mb-4 tt-upper ta-center body {{ hero_lead_in_title_color }}">{{ hero_lead_in_title }}</h1>
    {{ /if }}
    <div class="fs-10 fw-700 lh-9 mb-0 ta-center title m--fs-13 m--lh-11 m--mt-4 l--fs-14 l--lh-13 {{ hero_headline_color }} {{ hero_headline_classes }} {{ if !hero_subheadline }}mb-9{{ /if }}">{{ hero_headline | widont }}</div>
    {{ if hero_subheadline }}
    <div class="body-4 mt-5 mb-8 ta-center m--body-5 m--px-8 m--mt-4 m--mb-9 {{ hero_subheadline_color }} {{ hero_subheadline_classes }}">{{ hero_subheadline }}</div>
    {{ /if }}
  </div>

  {{ if video_wistia_id }}
  <div class="bg-ocean-40 br-2 ov-hidden bs-very-soft relative mw-grid mx-auto">
    <img src="{{ theme:asset src='images/play-button.svg' }}" class="bs-button bs-hover br-circle center-xy absolute z-1" id="acPlayBtn">
    <script src="https://fast.wistia.com/embed/medias/{{ video_wistia_id }}.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_{{ video_wistia_id }} controlsVisibleOnLoad=false playButton=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/{{ video_wistia_id }}/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
    <script>
        // Wistia customization code
        window._wq = window._wq || [];
        _wq.push({
          id: "{{ video_wistia_id }}",
          options: {
            "stillUrl": "{{ video_thumbnail }}"
          },
          onReady: function(video) {
          var acPlayBtn = document.getElementById('acPlayBtn');
          video.bind("end", function() {
            acPlayBtn.classList.remove('none')
          });
          video.bind("pause", function() {
            acPlayBtn.classList.remove('none')
          });
          video.bind("play", function() {
            acPlayBtn.classList.add('none')
          });
          acPlayBtn.addEventListener('click', function(){
            video.play();
            acPlayBtn.classList += ' none';
          });
        }});
        // End Wistia script
        </script>
  </div>
  {{ /if }}
  {{ if video_hero_cta_button !== false && cta_button_text }}
    <div class="mt-8 ta-center">
      {{ partial:cta-button }}
    </div>
  {{ /if }}
</section>