---
layout: default
---

<!--

Last full read through 27/12/2020

##############################################
# walk Layout            /_layouts/env/walk.html
##############################################

-->


<!-- assign description with site decsription as fallback -->

{% if site.data.copy.landing.walk.description %}
{% assign description = site.data.copy.landing.walk.description %}
{% else %}
{% assign description = site.description %}
{% endif %}

<div class="hero hero-90">

  <div class="hero__overlay">
    {% picture {{ page.hero.file | prepend: 'content/' }}
      --img class="hero__image image__filter--mix h-100"
      --alt {{ page.hero.alt }} %}</div>

  <div class="hero__strap hero__strap--center hero__strap--env">
    <h1>
      <span class="hero__strap--start">
        {% assign header = site.data.copy.landing.walk %}
        {% assign title = header.title | split: " " %}
        {% assign n = header.split %}
        {% for word in (1..title.size) %}

          {{ title[forloop.index0] }}
          {% if forloop.index == n %}
      </span>{% endif %}

        {% endfor %}

    </h1>
  </div>

  <div class="hero__follow"></div>

</div>

<div class="augmented-image">

  {% picture {{ page.subhero.file | prepend: 'content/' }}
    --img class="hero__image"
    --alt {{ page.subhero.alt }} %}

    <svg class="svg__augment" viewBox="-50 -50 100 100" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="augmentLED" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" />
        <stop offset="100%" />
        </radialGradient>
      </defs>

      <circle class="svg__augment--pulse" cx="33%" cy="2%" >

        <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation
        -->
        <animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" from=".1" to="2"/>

        <animate attributeName="fill-opacity" attributeType="CSS" begin="0s" dur="2s" repeatCount="indefinite" from="1" to="0" fill="freeze" />

      </circle>
      <circle class="svg__augment--led" cx="33%" cy="2%" r=".5" />

    </svg>

</div>

<div class="center-text strap__100 strap--opd-trust" id="content">
  <h2>{{ site.data.copy.landing.walk.subtitle }}</h2>
  <p data-aos="fade-in">{{ site.data.copy.landing.walk.strap }}</p>
</div>

<div class="segment__wrap">

  <div class="segment__left">
  <div class="segment__gaurentee center-text">
    <div data-aos="zoom-in">
      {% include branding/site-logo.svg %}</div>
    <p data-aos="fade-in" class="strap__guarantee">
      {{ description }}</p></div>

  <div class="center-text segment__keywords strap--opd-trust">
    {% assign keyword = site.data.copy.landing.walk.keywords | split: ", " %}
    {% for word in (1..keyword.size) %}
    <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
    {% endfor %}</div>

  </div>

  <div class="segment__right augmented-image svg__labels--red augment-not-fullwidth" >

    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee"%}


</div>

<div class="augmented-image" >

{% include image.html image="device" alt="Describe the image" class="hero__image" %}