<section class="Global-header">
    <div class="Header">
        <div class="Header__container constrain">
            <a href="/" class="Header__logo focus" title="Home">
                <svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 154 54">
                    <title id="clearleft-logo">Clearleft</title>
                    <style>
                        .Logo-streak {
                            mask-repeat: no-repeat;
                            stroke-dasharray: 150% 150%;
                            stroke-dashoffset: 150%;
                        }

                        .animateLogo-streak {
                            animation: swipe 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0.8s forwards;
                        }

                        @keyframes swipe {
                            from {
                                stroke-dashoffset: 150%;
                            }

                            to {
                                stroke-dashoffset: 0;
                            }
                        }
                    </style>
                    <path class="Logo-text" fill="currentColor" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z" />
                    <clippath id="headerMask">
                        <path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2" />
                    </clippath>
                    <path class="Logo-streak animateLogo-streak" clip-path="url(#headerMask)" fill-rule="evenodd" fill="none" stroke="#23D8A0" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6" />
                </svg> </a>
            <div class="Header__desktop-nav">
                <nav class="PrimaryNav" aria-label="Primary">
                    <ul class="PrimaryNav__list" role="list">
                        <li class="PrimaryNav__listItem">
                            <a href="#" class="PrimaryNav__link focus ">
                                Services
                            </a>
                        </li>
                        <li class="PrimaryNav__listItem">
                            <a href="#" class="PrimaryNav__link focus ">
                                Work
                            </a>
                        </li>
                        <li class="PrimaryNav__listItem">
                            <a href="#" class="PrimaryNav__link focus ">
                                Thinking
                            </a>
                        </li>
                        <li class="PrimaryNav__listItem">
                            <a href="#" class="PrimaryNav__link focus ">
                                About
                            </a>
                        </li>
                        <li class="PrimaryNav__listItem">
                            <a href="#" class="PrimaryNav__link focus ">
                                Contact
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div class="Header__mobile-nav">

                <button class="Button focus Button--outline Header__toggle" data-a11y-dialog-show="mobile-nav"><span>Menu</span></button>
                <!-- dialog markup -->
                <div class="Dialog Header__mobile-nav-modal" id="mobile-nav" data-a11y-dialog="mobile-nav" aria-labelledby="mobile-nav-title" aria-hidden="true">
                    <div role="document" class="Dialog__content Header__mobile-nav-inner constrain">
                        <h2 class="vh" id="mobile-nav-title">
                            Primary Navigation
                        </h2>

                        <button type="button" data-a11y-dialog-hide aria-label="Close dialog" class="Header__mobile-nav-close">
                            <span class="vh">Close dialog</span>
                        </button>

                        <nav class="PrimaryNav PrimaryNav--mobile" aria-label="Primary">
                            <ul class="PrimaryNav__list" role="list">
                                <li class="PrimaryNav__listItem">
                                    <a href="#" class="PrimaryNav__link focus ">
                                        Services
                                    </a>
                                </li>
                                <li class="PrimaryNav__listItem">
                                    <a href="#" class="PrimaryNav__link focus ">
                                        Work
                                    </a>
                                </li>
                                <li class="PrimaryNav__listItem">
                                    <a href="#" class="PrimaryNav__link focus ">
                                        Thinking
                                    </a>
                                </li>
                                <li class="PrimaryNav__listItem">
                                    <a href="#" class="PrimaryNav__link focus ">
                                        About
                                    </a>
                                </li>
                                <li class="PrimaryNav__listItem">
                                    <a href="#" class="PrimaryNav__link focus ">
                                        Contact
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="Hero Slat">
        <div class="constrain Hero__inner">
            <h1 class="Hero__header h h-1">
                <span>Explore.</span>
                <span>Create.</span>
                <span>Grow.</span>
            </h1>

            <svg class="Hero__image-grid anim-hero" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 590.91 632.66">
                <defs>
                    <clippath id="heroclip1">
                        <rect class="hero__swipe-1" id="heroclip1Rect" x="101.31" y="51.24" width="488.79" height="221.87" fill="#fff" />
                    </clippath>

                    <clippath id="heroclip2">
                        <rect class="hero__swipe-2" id="heroclip1Rect" x="195.36" y="293.94" width="292.4" height="268.6" fill="#fff" />
                    </clippath>

                    <clippath id="heroclip3">
                        <rect class="hero__swipe-3" id="heroclip3Rect" x="1.73" y="233.41" width="174.53" height="162.61" fill="#fff" />
                    </clippath>

                    <clippath id="heroclip4">
                        <rect class="hero__swipe-4" id="heroclip4Rect" x="100.03" y="405.79" width="75.83" height="73.12" fill="#fff" />
                    </clippath>
                </defs>
                <g class="fouc fouc--hero" opacity="0">
                    <circle class="hero__circle" cx="90.18" cy="79.56" r="50" fill="#dae1e2" />
                    <circle class="hero__circle" cx="488.39" cy="563.49" r="30" fill="#23d8a0" />

                    <rect class="hero__swipe-1" x="102" y="52" width="488" height="220" fill="#23d8a0" />
                    <rect class="hero__swipe-2" x="196" y="294" width="292" height="268" fill="#FAFAFA" />
                    <rect class="hero__swipe-3" x="2" y="234" width="173" height="162" fill="#FAFAFA" />
                    <rect class="hero__swipe-4" x="101" y="406" width="75" height="73" fill="#23d8a0" />

                    <image clip-path="url(#heroclip1)" href="/v6-assets/img/hero1.jpg" preserveaspectratio="xMidYMid slice" x="101" y="51" width="490" height="223" />
                    <image clip-path="url(#heroclip2)" href="/v6-assets/img/hero2.jpg" preserveaspectratio="xMidYMid slice" x="195" y="293" width="294" height="270" />
                    <image clip-path="url(#heroclip3)" href="/v6-assets/img/hero3.jpg" preserveaspectratio="xMidYMid slice" x="1" y="233" width="176" height="164" />
                    <image clip-path="url(#heroclip4)" href="/v6-assets/img/hero4.jpg" preserveaspectratio="xMidYMid slice" x="99" y="404" width="78" height="76" />
                </g>
            </svg>

            <div class="Hero__intro flow">
                <h2 class="h h-4">
                    Close the gap between strategy and delivery
                </h2>
                <div class="flow body">
                    We believe the best digital products and services combine the imagination to think big with the ability to act on those thoughts. Let us help you turn ideas into reality.
                </div>
            </div>
        </div>
    </section>
</section>

<section class="Slat Springboard">
    <div class="constrain Springboard__inner flow--m">
        <h2 class="Springboard__eyebrow eyebrow">
            we can help you
        </h2>

        <ul class="Springboard__blocks grid grid--of-three" role="list">
            <li class="Springboard__block anim-triangle flow">
                <svg width="60" viewbox="0 0 60 59" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path class="triangles grey" d="M41.5308 23.6922L22.3132 56.9781L3.09559 23.6922L41.5308 23.6922Z" fill="#425968" />
                    <path class="triangles green" d="M57.4879 14.2176L38.2703 47.5035L19.0526 14.2176L57.4879 14.2176Z" fill="#23D8A0" />
                </svg>
                <a class="Springboard__link focus" href="/explore">
                    <h3 class="h h-5">
                        Explore the future
                    </h3>

                    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Springboard__arrow">
                        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                    </svg>
                </a>
            </li>
            <li class="Springboard__block anim-square flow">
                <svg width="60" viewbox="0 0 60 59">
                    <path class="green" stroke="#23D8A0" fill="none" stroke-width="11" d="M38.59 12.89H48.59V23.89H38.59z" transform="rotate(15 38.6 12.9)" />
                    <path class="grey" fill="#425968" fill-rule="evenodd" d="M8 21.1543H23.4226V36.5769H8V21.1543ZM8 36.5772H23.4226V51.9998H8V36.5772ZM38.8453 36.5772H23.4227V51.9998H38.8453V36.5772Z" clip-rule="evenodd" />
                </svg>
                <a class="Springboard__link focus" href="/create">
                    <h3 class="h h-5">
                        Create world-class digital products
                    </h3>

                    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Springboard__arrow">
                        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                    </svg>
                </a>
            </li>
            <li class="Springboard__block anim-circle flow">
                <svg width="60" viewbox="0 0 60 59">
                    <circle class="grey" cx="16" cy="43" r="7" fill="#425968" />
                    <circle class="green" cx="35.5" cy="26.5" r="15.5" fill="#23D8A0" />
                </svg>
                <a class="Springboard__link focus" href="/grow">
                    <h3 class="h h-5">
                        Grow your digital capabilities
                    </h3>

                    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Springboard__arrow">
                        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                    </svg>
                </a>
            </li>
        </ul>
    </div>
</section>
<div class="Community flow">
    <h2 class="eyebrow">
        Join the community
    </h2>

    <div class="grid grid--7/5">
        <div class="Community__intro flow pad-after-s">
            <h3 class="h h-3">
                Connect with the very best industry thinking
            </h3>
            <div class="body flow">
                <p>Through inspiring community events, training and consultancy we connect digital leaders and their teams with globally-renowned speakers and fellow practitioners.</p>
            </div>
        </div>

        <ul role="list" class="flow Community__cards">
            <li>
                <a class="Community__card focus" href="#">
                    <div class="Community__card-content">
                        <p class="eyebrow eyebrow--black">
                            Leading Design
                        </p>

                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Community__card-arrow">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                    </div>
                </a>
            </li>
            <li>
                <a class="Community__card focus" href="#">
                    <div class="Community__card-content">
                        <p class="eyebrow eyebrow--black">
                            UX London
                        </p>

                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Community__card-arrow">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                    </div>
                </a>
            </li>
            <li>
                <a class="Community__card focus" href="www.google.com">
                    <div class="Community__card-content">
                        <p class="eyebrow eyebrow--black">
                            Content by Design
                        </p>

                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Community__card-arrow">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="Splash-promo">
    <img class="srcset" src="/v6-assets/img/splash300w.jpg" sizes="(min-width: 1220px) 1100px, calc(93.78vw - 25px)" srcset="        /v6-assets/img/splash300w.jpg 300w,
            /v6-assets/img/splash600w.jpg 600w,
            /v6-assets/img/splash1000w.jpg 1000w,
            /v6-assets/img/splash2000w.jpg 2000w,
    " alt="" loading="lazy">

    <div class="Splash-promo__content theme--dark flow">
        <h2 class="Splash-promo__eyebrow eyebrow eyebrow--black">
            Upcoming event
        </h2>

        <header class="flow--2xs">
            <h3 class="h h-4">
                Leading Design Festival
            </h3>
            <h4 class="eyebrow">
                [object Object]
            </h4>
        </header>

        <div class="body">
            <p>A month of amazing design leadership activities including a three day conference, weekly talks, masterclasses, mentoring sessions and a host of other events.</p>
        </div>

        <a class="combo-button focus combo-button--green combo-button--large-link" href="#">
            <span class="">Tickets now on sale</span>
            <div>

                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                </svg>
            </div>
        </a>
    </div>
</div>
<div class="Testimonials">
    <figure class="Quote">
        <blockquote class="Quote__quote body">
            <p>UX Lon­don is spe­cial to me because the pro­gramme that the team puts togeth­er always tells a great sto­ry, and I learn so much when I come here.</p>
        </blockquote>

        <footer class="Quote__footer">
            <img class="Quote__image" src="" alt="" />
            <div class="Quote__cite small">
                <cite class="Quote__author">Josh Seiden</cite>
                <cite class="Quote__company">Seiden Consulting</cite>
            </div>
        </footer>
    </figure>
    <figure class="Quote">
        <blockquote class="Quote__quote body">
            <p>Clearleft are one of only a few agencies in the world who consistently and predictably deliver successful projects. This shouldn’t be a rare skill amongst agencies, but in my experience it is.”</p>
        </blockquote>

        <footer class="Quote__footer">
            <img class="Quote__image" src="" alt="" />
            <div class="Quote__cite small">
                <cite class="Quote__author">Josh Seiden</cite>
                <cite class="Quote__company">Former VP of products at Adobe</cite>
            </div>
        </footer>
    </figure>
</div>
<div class="Geo-image anim-geo-trigger">
    <div class="Geo-image__inner grid grid--of-two grid--swap">
        <svg class="Geo-image__grid anim-geo" viewbox="0 0 633 540">
            <defs>
                <mask id="geo-mask">
                    <path id="geo-mask" fill="#fff" d="M71,6h292c110,0,190,53,190,197v297H71V6z" />
                </mask>
            </defs>

            <g>
                <circle class="geo-shape" cx="71.3" cy="231.3" r="50" fill="#23d8a0" />
                <g mask="url(#geo-mask)">
                    <image class="geo-image fouc" opacity="0" href="/v6-assets/img/hero1.jpg" preserveaspectratio="xMidYMid slice" x="68" y="3" width="510" height="502" />
                    <rect class="geo-green" fill="#23d8a0" x="68" y="3" width="510" height="502" />
                </g>
                <path class="geo-shape" fill="#425968" d="M221 500H253V532H221z" opacity=".5" style="isolation:isolate" />
                <path class="geo-shape" fill="#23d8a0" d="M473 270H553V350H473z" />
                <path class="geo-shape" fill="#425968" d="M553 460H633V540H553z" />
            </g>
        </svg>

        <div class="Geo-image__intro flow--m">
            <h1 class="Geo-image__header h h-3">
                Working with us
            </h1>
            <div class="body flow">
                <p>We approach all our engagements with a bold curiosity and enthusiasm to tackle even the thorniest of problems.</p>
                <p>We’ll be your committed allies working alongside you and your teams to break down barriers, adapt to change and go that one step beyond.</p>
            </div>

            <button class="Button focus"><span>Who we are</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                </svg></button>
        </div>
    </div>
</div>
<div class="Hero-case-study flow--l">
    <header class="flow--3xs">
        <h2 class="Hero-case-study__eyebrow eyebrow">
            case studies
        </h2>
        <h3 class="h h-4">
            We’ve recently helped
        </h3>
    </header>
    <div class="Hero-case-study__inner">
        <img class="srcset" src="/v6-assets/img/splash300w.jpg" sizes="(min-width: 1220px) 1100px, calc(93.78vw - 25px)" srcset="        /v6-assets/img/splash300w.jpg 300w,
            /v6-assets/img/splash600w.jpg 600w,
            /v6-assets/img/splash1000w.jpg 1000w,
            /v6-assets/img/splash2000w.jpg 2000w,
    " alt="Build the culture and the capabilities for design to flourish" loading="lazy">

        <div class="Hero-case-study__content flow">
            <img class="Hero-case-study__logo" src="/v6-assets/img/3m.png" alt="" />
            <h3 class="h h-4">
                Build the culture and the capabilities for design to flourish
            </h3>
            <p class="body">
            <p>How do you help a small team in a large multinational company use design to achieve an impact at scale?</p>
            </p>

            <a class="combo-button focus" href="">
                <span class="">Read this client story</span>
                <div>

                    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                    </svg>
                </div>
            </a>
        </div>
    </div>
</div>
<aside class="Contact theme--light">
    <div class="constrain">
        <div class="Contact__container">

            <div class="Contact__content flow">
                <h2 class="h h-3">
                    You're unique
                </h2>
                <div class="body">
                    <p>Which is why we prefer to tailor our approach specifically for you. We’d
                        be happy to discuss a collaborative partnership with your organisation
                        about how we can achieve the best outcomes together.
                    </p>
                </div>

            </div>
        </div>
    </div>
</aside>

<footer class="Site-footer Footer theme--dark">
    <div class="grid grid--of-two constrain">
        <div class="Footer__content flow--gutter">
            <div class="grid grid--of-two">
                <ul class="Footer__nav flow" role="list">
                </ul>

                <nav>
                    <ul class="Footer__nav flow--xs" role="list">
                        <li class="body small">
                            <span class="block">68 Middle Street</span>
                            <span class="block">Brighton</span>
                            <span class="block">BN1 1AL</span>
                            <span class="block">United Kingdom</span>
                        </li>
                        <li>
                            <a class="focus" href="mailto:info@clearleft.com">
                                info@clearleft.com
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <p class="Footer__copyright body small">
                <span class="nowrap">Copyright &copy; 2005-Now Clearleft Ltd.</span>
                <span class="nowrap">All Rights Reserved.</span>
            </p>
        </div>

        <div class="flow--gutter">
            <nav class="Footer__social">
                <ul class="Footer__icons" role="list">
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://twitter.com/clearleft" aria-label="Follow us on twitter">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--twitter  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#twitter"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.instagram.com/weareclearleft/" aria-label="Follow us on instagram">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--instagram  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#instagram"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.linkedin.com/company/clearleft/" aria-label="Follow us on linkedin">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--linkedin  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#linkedin"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://medium.com/clear-left-thinking" aria-label="Follow us on medium">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--medium  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#medium"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.flickr.com/photos/clearleft/" aria-label="Follow us on flickr">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--flickr  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#flickr"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://www.youtube.com/channel/UCnCDHgM8pT51sE7tlcgDsZg" aria-label="Follow us on youtube">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--youtube  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#youtube"></use>
                            </svg>
                        </a>
                    </li>
                    <li class="Footer__icon">
                        <a class="Footer__icon-link focus" href="https://vimeo.com/clearleft" aria-label="Follow us on vimeo">

                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--vimeo  Icon--m">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#vimeo"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
            <form class="Footer__form flow--xs" action="https://clearleft.us1.list-manage.com/subscribe?u=262832f6c05900ce22e8b14b6&id=02008ae435&email=value" method="post" target="popupwindow">
                <legend class="h h-5">
                    Sign up to our newsletter
                </legend>
                <fieldset class="Footer__form-fieldset">
                    <input type="hidden" name="embed" value="1" />

                    <div class="Text-input flow--2xs Footer__form-input">
                        <label class="Text-input__title small vh" for="tle-email">
                            Email address
                        </label>
                        <input placeholder="Email address" class="Input " type="email" id="tle-email" name="MERGE0" value="" />
                    </div>

                    <button class="Button focus Button--outline-light" type="submit"><span>Sign up</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg></button>
                </fieldset>
                <p class="body small">
                    Every two weeks we send out a newsletter. It's a round-up of latest
                    news and handpicked hyperlinks covering design, technology, and culture.
                </p>
            </form>
        </div>
    </div>
</footer>
<section class="Global-header">
  {% include '@header' with header %}
  {% include '@hero' with hero %}
</section>

{% include '@springboard' with springboard %}
{% include '@community' with community %}
{% include '@splash-promo' with splash %}
{% include '@testimonials' with quotes %}
{% include '@geometric-image' with geo %}
{% include '@hero-case-study' with heroCaseStudy %}
{% include '@contact-footer' with contact %}
{% include '@footer' %}
{
  "header": {
    "match": "",
    "links": [
      {
        "url": "#",
        "title": "Services"
      },
      {
        "url": "#",
        "title": "Work"
      },
      {
        "url": "#",
        "title": "Thinking"
      },
      {
        "url": "#",
        "title": "About"
      },
      {
        "url": "#",
        "title": "Contact"
      }
    ]
  },
  "hero": {
    "title": {
      "lines": [
        "Explore.",
        "Create.",
        "Grow."
      ]
    },
    "subtitle": "Close the gap between strategy and delivery",
    "lede": "We believe the best digital products and services combine the imagination to think big with the ability to act on those thoughts. Let us help you turn ideas into reality.",
    "img1": "/v6-assets/img/hero1.jpg",
    "img2": "/v6-assets/img/hero2.jpg",
    "img3": "/v6-assets/img/hero3.jpg",
    "img4": "/v6-assets/img/hero4.jpg"
  },
  "springboard": {
    "eyebrow": "we can help you",
    "subtitle": "Close the gap between strategy and delivery",
    "blocks": [
      {
        "title": "Explore the future",
        "link": "/explore",
        "shape": "triangle"
      },
      {
        "title": "Create world-class digital products",
        "link": "/create",
        "shape": "square"
      },
      {
        "title": "Grow your digital capabilities",
        "link": "/grow",
        "shape": "circle"
      }
    ]
  },
  "community": {
    "eyebrow": "Join the community",
    "title": "Connect with the very best industry thinking",
    "description": "<p>Through inspiring community events, training and consultancy we connect digital leaders and their teams with globally-renowned speakers and fellow practitioners.</p>",
    "links": [
      {
        "title": "Leading Design",
        "link": "#",
        "image": "/v6-assets/img/leading-design.svg"
      },
      {
        "title": "UX London",
        "link": "#",
        "image": "/v6-assets/img/ux-london.svg"
      },
      {
        "title": "Content by Design",
        "link": "www.google.com",
        "image": "/v6-assets/img/content-by-design.svg"
      }
    ]
  },
  "splash": {
    "title": "Leading Design Festival",
    "eyebrow": "Upcoming event",
    "date": {
      "dates": [
        "2020-03-02",
        "2020-03-03"
      ],
      "description": "March 2021"
    },
    "description": "<p>A month of amazing design leadership activities including a three day conference, weekly talks, masterclasses, mentoring sessions and a host of other events.</p>",
    "link": "#",
    "linkLabel": "Tickets now on sale",
    "imageList": [
      {
        "src": "/v6-assets/img/splash300w.jpg",
        "size": "300w"
      },
      {
        "src": "/v6-assets/img/splash600w.jpg",
        "size": "600w"
      },
      {
        "src": "/v6-assets/img/splash1000w.jpg",
        "size": "1000w"
      },
      {
        "src": "/v6-assets/img/splash2000w.jpg",
        "size": "2000w"
      }
    ]
  },
  "quotes": [
    {
      "quote": "<p>UX Lon­don is spe­cial to me because the pro­gramme that the team puts togeth­er always tells a great sto­ry, and I learn so much when I come here.</p>",
      "citation": "Josh Seiden",
      "qualifier": "Seiden Consulting",
      "image": "https://www.fillmurray.com/400/400"
    },
    {
      "quote": "<p>Clearleft are one of only a few agencies in the world who consistently and predictably deliver successful projects. This shouldn’t be a rare skill amongst agencies, but in my experience it is.”</p>",
      "citation": "Josh Seiden",
      "qualifier": "Former VP of products at Adobe",
      "image": "https://www.fillmurray.com/400/400"
    }
  ],
  "geo": {
    "title": "Working with us",
    "description": "<p>We approach all our engagements with a bold curiosity and enthusiasm to tackle even the thorniest of problems.</p><p>We’ll be your committed allies working alongside you and your teams to break down barriers, adapt to change and go that one step beyond.</p>",
    "image": "/v6-assets/img/hero1.jpg",
    "linkLabel": "Who we are",
    "link": ""
  },
  "heroCaseStudy": {
    "eyebrow": "case studies",
    "title": "We’ve recently helped",
    "caseStudy": {
      "title": "Build the culture and the capabilities for design to flourish",
      "description": "<p>How do you help a small team in a large multinational company use design to achieve an impact at scale?</p>",
      "logo": "/v6-assets/img/3m.png",
      "link": "",
      "imageList": [
        {
          "src": "/v6-assets/img/splash300w.jpg",
          "size": "300w"
        },
        {
          "src": "/v6-assets/img/splash600w.jpg",
          "size": "600w"
        },
        {
          "src": "/v6-assets/img/splash1000w.jpg",
          "size": "1000w"
        },
        {
          "src": "/v6-assets/img/splash2000w.jpg",
          "size": "2000w"
        }
      ]
    }
  },
  "logoSlat": {
    "eyebrow": "We've also helped",
    "logos": [
      {
        "url": "https://via.placeholder.com/300x150",
        "alt": "doodah"
      },
      {
        "url": "https://via.placeholder.com/150x300",
        "alt": "doodah"
      },
      {
        "url": "https://via.placeholder.com/150x150",
        "alt": "doodah"
      },
      {
        "url": "https://via.placeholder.com/300x150",
        "alt": "doodah"
      },
      {
        "url": "https://via.placeholder.com/150x300",
        "alt": "doodah"
      },
      {
        "url": "https://via.placeholder.com/150x150",
        "alt": "doodah"
      }
    ]
  },
  "contact": {
    "title": "You're unique",
    "description": "<p>Which is why we prefer to tailor our approach specifically for you. We’d\n        be happy to discuss a collaborative partnership with your organisation\n        about how we can achieve the best outcomes together.\n      </p>",
    "linkLabel": "Lets chat",
    "links": [
      {
        "title": "Short text",
        "link": "#",
        "eyebrow": "advice",
        "description": ""
      },
      {
        "title": "How to engage the right people when recruiting in house for research",
        "link": "#",
        "eyebrow": "advice",
        "description": ""
      },
      {
        "title": "Design Effectiveness Report 2019",
        "link": "#",
        "eyebrow": "advice",
        "description": ""
      },
      {
        "title": "Short text",
        "link": "#",
        "eyebrow": "advice",
        "description": ""
      },
      {
        "title": "How to engage the right people when recruiting in house for research",
        "link": "#",
        "eyebrow": "advice",
        "description": ""
      },
      {
        "title": "Design Effectiveness Report 2019",
        "link": "#",
        "eyebrow": "advice",
        "description": ""
      }
    ],
    "form": {
      "name": "Let’s chat about your project",
      "description": "We would love to hear from you",
      "submittedSuccessfully": false,
      "testTags": true,
      "fields": [
        {
          "handle": "help",
          "label": "Let us know what you would like help with?",
          "required": true
        },
        {
          "handle": "budget",
          "label": "Budget",
          "required": true
        },
        {
          "handle": "deadline",
          "label": "Milestone/deadline",
          "required": true
        },
        {
          "handle": "email",
          "label": "Email",
          "required": true
        },
        {
          "handle": "message",
          "label": "Message"
        }
      ]
    }
  }
}

No notes defined.