<div class="Background Background--grey">

    <header class="SiteHeader">

        <a href="" class="Logo Logo--sea-serpent-blue" title="Home">
    <svg width="152" height="50" viewBox="1 2 152 50">
        <g fill="none" fill-rule="evenodd">
            <path class="Logo-text" fill="#25333A" fill-rule="nonzero" d="M152.5 27.54v5.36h-2.36c-5.52 0-8.55-3.31-8.55-9.31v-6.78h-7.36V32.9h-5.61V16.81h-3.09l-.06-4.65h3.15v-.57c0-6 3-9.31 8.55-9.31h2.36v5.36h-2.36c-2 0-2.95 1.29-2.95 4v.57h7.36v-3.9l5.61-3.55v7.4h4v4.65h-4v6.78c0 2.66 1 4 2.95 4l2.36-.05zM77 11.85h5.61v21H77v-2c-1.677 1.74-4.015 2.686-6.43 2.6-5.66 0-10.09-4.84-10.09-11s4.43-11 10.09-11c2.396-.12 4.73.777 6.43 2.47v-2.07zm0 10.5c0-3.54-2.36-6.11-5.61-6.11-3.25 0-5.56 2.57-5.56 6.11 0 3.54 2.34 6.11 5.56 6.11 3.22 0 5.61-2.51 5.61-6.11zm12.88-8.67v-1.83h-5.37v21h5.6v-9.46c0-4.5.77-6.78 5-6.78h1.5v-5.4h-.23c-2.95 0-5.22.87-6.54 2.47h.04zM98 32.83h5.59V2.44H98v30.39zM17 8.1c3.178.02 6.098 1.75 7.64 4.53l.12.21.2-.13 4.83-3.07.2-.13-.13-.2c-2.834-4.3-7.642-6.88-12.79-6.87-4.122-.062-8.095 1.538-11.025 4.44-2.93 2.9-4.567 6.858-4.545 10.98-.027 4.137 1.612 8.112 4.55 11.026 2.936 2.914 6.923 4.523 11.06 4.464 5.11.06 9.91-2.455 12.77-6.69l.13-.19-5.2-3.47-.13.2c-1.56 2.736-4.46 4.432-7.61 4.45-5.16 0-9.2-4.32-9.2-9.84 0-4.75 3.43-9.71 9.13-9.71zm14.57 24.73h5.59V2.44h-5.59v30.39zm94-10.51c0 .58 0 1.15-.09 1.69v.47h-14.8c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.34-11.12 10.55-11.12 5.88-.09 10.01 4.48 10.03 11.01h.02zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22zm-60.73 2.22c0 .58 0 1.15-.09 1.69v.47H44.34c.514 2.518 2.805 4.272 5.37 4.11 2.006-.047 3.94-.75 5.51-2l.43-.34 2.77 4-.35.3c-2.394 2.048-5.472 3.12-8.62 3-6.37 0-10.82-4.57-10.82-11.12 0-6.55 4.37-11.21 10.54-11.21 5.89 0 10.02 4.57 10.04 11.1zm-5.63-2.22c-.57-2.54-2.16-3.94-4.5-3.94-2.35-.09-4.39 1.61-4.72 3.94h9.22z"></path>
            <path class="Logo-streak" fill="#23D8A0" d="M151.8 44c-.083-.487-.365-.918-.78-1.187-.413-.27-.92-.354-1.4-.233-1.067.35-2.204.433-3.31.24-1.39-.18-2.86-.31-4.29-.46-2.39-.26-4.79-.47-7.2-.66-2.63-.2-5.27-.34-7.9-.52-2.48-.17-4.95-.39-7.43-.51-5.24-.253-10.483-.45-15.73-.59-4.37-.15-19.57-.32-23.95-.26-3.07 0-6.13.14-9.19.18-4.06 0-18.94.34-23 .58-4.33.23-8.68.38-13 .68-4 .27-8 .45-11.94.74-.906.02-1.81.115-2.7.28-2.35 0-4.43.22-6.52.33-1.66.09-3.36.13-5 .38v0c-.69 0-1-.4-2.07-.26-1.07.14-2.07.46-2.12 1.06-.55.12 0 .41-.62.52v.47c.43.2.56.41 0 .66v.19c.34-.14.39 0 .56.07v.39c-.4.19-.16.37-.09.54.07.17.5.44.42.71-.086.49.11.984.51 1.28v.23c.11.7 1.05 1.28 1.18 2 .1.55 1 1 2.31.89 1.12-.06 1.51-.53 2.53-.68.19 0 .81-.09 1-.1 4.23-.28 8.46-.59 12.66-1 1.24-.11 2.58-.08 3.72-.3 1.5-.29 3.07-.29 4.59-.5 2.867-.348 5.752-.515 8.64-.5 2.41 0 4.77-.26 7.16-.36 1.33-.06 2.66.06 4-.08.518-.097 1.043-.144 1.57-.14 1.43.09 13.66-.12 15.1-.11 2.79 0 5.58-.14 8.36-.17 3.3-.06 17.36-.17 20.68 0 1.13 0 2.31.21 3.37.15 3.11-.17 6.19.1 9.28.17 2.71.06 5.39.31 8.11.39 2.72.08 5.22.23 7.8.51 1 .11 2.08.25 3.15.35.84.08 1.41-.21 2.21-.11 2 .27 4.11.46 6.21.61 1.088.028 2.173.122 3.25.28 1.56.326 3.14.547 4.73.66l1 .36c.856.423 1.835.526 2.76.29.523-.344.77-.984.61-1.59v-.18c.1-.15.19-.31.09-.48.26-.1.28-.22.21-.37.25-.57.71-1.11.44-1.74-.11-.25-.39-.62.42-.79v-.47c-.39-.05-.43-.19-.51-.32.04-.52.1-1.02.12-1.52zm-73.48 1.26c-.063-.008-.127-.008-.19 0 .063-.008.127-.008.19 0z"></path>
        </g>
    </svg>
</a>

        <nav class="PrimaryNavigation PrimaryNavigation--sea-serpent-blue" aria-label="Primary Navigation" data-component="PrimaryNavigation">
            <a href="#offcanvas" class="PrimaryNavigation-menu" aria-hidden="true">Menu</a>
            <ul class="PrimaryNavigation-list">
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link is-active ">Case Studies</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Team</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Posts</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Events</a></li>
                <li class="PrimaryNavigation-listItem"><a href="#" class="PrimaryNavigation-link">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div class="Masthead Masthead--chimney" role="banner">

        <div class="Masthead-container">

            <div class="Masthead-primary">

                <h1 class="Heading Heading--main">Case<br>studies.</h1>

            </div>
            <!--/.Masthead-primary-->

        </div>

    </div>
    <!--/.Masthead-->
</div>

<main id="main-content">

    <div class="Work">

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0-heading">nisi vel soluta</h2>

                            </a>
                        </header>
                        <p class="Card-description">Inventore voluptas et qui omnis. Sunt ducimus cumque et non. Quae nostrum possimus iusto perferendis accusantium quia est id est.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1-heading">non quia iste</h2>

                            </a>
                        </header>
                        <p class="Card-description">Fugit et quos deleniti. Iste dolore nesciunt omnis quod nisi numquam porro fuga sed. Et reprehenderit est est id similique aut blanditiis dolore.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2-heading">animi earum neque</h2>

                            </a>
                        </header>
                        <p class="Card-description">Magni facilis minus voluptas delectus quia distinctio. Tenetur modi consequatur voluptate harum neque debitis maiores reprehenderit et. Dolores nisi laboriosam provident non similique omnis placeat et quam. Fugiat reprehenderit
                            recusandae repudiandae voluptate. Aut veniam quos voluptas qui quam. Ad earum excepturi cumque mollitia voluptas libero sit.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3-heading">at dolor culpa</h2>

                            </a>
                        </header>
                        <p class="Card-description">Nesciunt molestias iusto omnis odio qui numquam asperiores ipsa sapiente. Culpa et optio atque porro. Fugit suscipit non eaque. Quibusdam consequatur esse omnis facere fugiat. Qui repellat sapiente qui. Delectus illum consequatur
                            eum recusandae cum.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-featured">
            <div class="PenguinProject PenguinProject--tall">

                <div class="PenguinProject-wrapper">

                    <div class="PenguinProject-content">

                        <div class="PenguinProject-question">How do you bring more than 700 brands together into one website?</div>

                        <h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">Create a new universe.</h2>

                        <a href="#" class="MegaLink MegaLink--inverted">Read the case study</a>

                        <img class="PenguinProject-logo" src="/assets/img/work/penguin/penguin-logo.svg" alt="Penguin logo">

                    </div>

                </div>
            </div>
            <!--./PenguinProject-->
        </div>

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0b-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0b-heading">nisi vel soluta</h2>

                            </a>
                        </header>
                        <p class="Card-description">Inventore voluptas et qui omnis. Sunt ducimus cumque et non. Quae nostrum possimus iusto perferendis accusantium quia est id est.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1b-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1b-heading">non quia iste</h2>

                            </a>
                        </header>
                        <p class="Card-description">Fugit et quos deleniti. Iste dolore nesciunt omnis quod nisi numquam porro fuga sed. Et reprehenderit est est id similique aut blanditiis dolore.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2b-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2b-heading">animi earum neque</h2>

                            </a>
                        </header>
                        <p class="Card-description">Magni facilis minus voluptas delectus quia distinctio. Tenetur modi consequatur voluptate harum neque debitis maiores reprehenderit et. Dolores nisi laboriosam provident non similique omnis placeat et quam. Fugiat reprehenderit
                            recusandae repudiandae voluptate. Aut veniam quos voluptas qui quam. Ad earum excepturi cumque mollitia voluptas libero sit.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3b-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3b-heading">at dolor culpa</h2>

                            </a>
                        </header>
                        <p class="Card-description">Nesciunt molestias iusto omnis odio qui numquam asperiores ipsa sapiente. Culpa et optio atque porro. Fugit suscipit non eaque. Quibusdam consequatur esse omnis facere fugiat. Qui repellat sapiente qui. Delectus illum consequatur
                            eum recusandae cum.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-featured">
            <div class="Ch4Project Ch4Project--tall">

                <div class="Ch4Project-wrapper">

                    <div class="Ch4Project-content">

                        <div class="Ch4Project-question">How do you create a new kind of news service?</div>

                        <h2 class="Ch4Project-title Heading Heading--secondary Heading--inverted">Focus on the intelligent story.</h2>

                        <a href="#" class="MegaLink MegaLink--inverted">Read the case study</a>

                        <img class="Ch4Project-logo" src="/assets/img/work/ch4/ch4-logo.svg" alt="ch4 logo">

                    </div>

                </div>
            </div>
            <!--./Ch4Project-->
        </div>

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0c-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0c-heading">nisi vel soluta</h2>

                            </a>
                        </header>
                        <p class="Card-description">Inventore voluptas et qui omnis. Sunt ducimus cumque et non. Quae nostrum possimus iusto perferendis accusantium quia est id est.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1c-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1c-heading">non quia iste</h2>

                            </a>
                        </header>
                        <p class="Card-description">Fugit et quos deleniti. Iste dolore nesciunt omnis quod nisi numquam porro fuga sed. Et reprehenderit est est id similique aut blanditiis dolore.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2c-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2c-heading">animi earum neque</h2>

                            </a>
                        </header>
                        <p class="Card-description">Magni facilis minus voluptas delectus quia distinctio. Tenetur modi consequatur voluptate harum neque debitis maiores reprehenderit et. Dolores nisi laboriosam provident non similique omnis placeat et quam. Fugiat reprehenderit
                            recusandae repudiandae voluptate. Aut veniam quos voluptas qui quam. Ad earum excepturi cumque mollitia voluptas libero sit.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3c-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3c-heading">at dolor culpa</h2>

                            </a>
                        </header>
                        <p class="Card-description">Nesciunt molestias iusto omnis odio qui numquam asperiores ipsa sapiente. Culpa et optio atque porro. Fugit suscipit non eaque. Quibusdam consequatur esse omnis facere fugiat. Qui repellat sapiente qui. Delectus illum consequatur
                            eum recusandae cum.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

        <div class="Work-featured">
            <div class="EvoProject EvoProject--tall">

                <div class="EvoProject-wrapper">

                    <div class="EvoProject-content">

                        <div class="EvoProject-question">How do you reimagine a physical magazine?</div>

                        <h2 class="EvoProject-title Heading Heading--secondary Heading--inverted">Drive reader engagement.</h2>

                        <a href="#" class="MegaLink MegaLink--inverted">Read the case study</a>

                        <img class="EvoProject-logo" src="/assets/img/work/evo/evo-logo.svg" alt="evo logo">

                    </div>

                </div>
            </div>
            <!--./EvoProject-->
        </div>

        <div class="Work-grid">
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-0d-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-0d-heading">nisi vel soluta</h2>

                            </a>
                        </header>
                        <p class="Card-description">Inventore voluptas et qui omnis. Sunt ducimus cumque et non. Quae nostrum possimus iusto perferendis accusantium quia est id est.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-1d-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-1d-heading">non quia iste</h2>

                            </a>
                        </header>
                        <p class="Card-description">Fugit et quos deleniti. Iste dolore nesciunt omnis quod nisi numquam porro fuga sed. Et reprehenderit est est id similique aut blanditiis dolore.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-2d-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-2d-heading">animi earum neque</h2>

                            </a>
                        </header>
                        <p class="Card-description">Magni facilis minus voluptas delectus quia distinctio. Tenetur modi consequatur voluptate harum neque debitis maiores reprehenderit et. Dolores nisi laboriosam provident non similique omnis placeat et quam. Fugiat reprehenderit
                            recusandae repudiandae voluptate. Aut veniam quos voluptas qui quam. Ad earum excepturi cumque mollitia voluptas libero sit.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
            <div class="Work-gridItem">

                <article class="Card Card--home Card--logo" aria-labelledby="card-3d-heading">
                    <img class="Card-logo" src="http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
                    <div class="Card-primary">
                        <header>
                            <a href="#">
                                <h2 class="Card-title" id="card-3d-heading">at dolor culpa</h2>

                            </a>
                        </header>
                        <p class="Card-description">Nesciunt molestias iusto omnis odio qui numquam asperiores ipsa sapiente. Culpa et optio atque porro. Fugit suscipit non eaque. Quibusdam consequatur esse omnis facere fugiat. Qui repellat sapiente qui. Delectus illum consequatur
                            eum recusandae cum.</p> <a href="#">Read the case study</a>
                    </div>
                    <!--/.Card-primary-->
                </article>
                <!--/.Card-->
            </div>
        </div>
        <!--/.Work-grid-->

    </div>

    <div class="Banner">
        <div class="Banner-content">
            <a href="" class="MegaLink">

</a>
        </div>
        <!--Banner-content-->
    </div>
    <!--/.Banner-->
    <div class="Hello" role="complementary" aria-labelledby="hello-heading">
        <div class="Hello-container">
            <figure class="Hello-image">
                <img src="https://clearleft-v5.s3.amazonaws.com/uploads/DC.png" alt="Dan Caplin">
                <figcaption>This is Dan</figcaption>
            </figure>
            <div>
                <h3 class="Hello-title Heading Heading--inverted Heading--medium" id="hello-heading">Open the conversation.</h3>
                <div class="Hello-body">

                    <p> Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on + 44(0) 845 838 6163 or <a href="#"> get in touch </a></p>
                </div>
            </div>
        </div>
    </div>
    <!--/.Hello-->

</main>

<footer class="SiteFooter">
    <div class="SiteFooter-container Cols Cols--half">
        <div class="Cols-item">
            <div class="InputGroup">
                <form action="" method="post">
                    <input type="hidden" value="1" name="embed">
                    <label class="InputGroup-label Heading Heading--body" for="">Feed your curiosity.</label>
                    <div class="Input InputGroup-combo">
                        <input class="InputGroup-field" type="email" name="email" placeholder="" id="" />
                        <button type="submit" class="InputGroup-submit">Get the Clearletter</button>
                    </div>
                </form>
            </div>
            <small class="Heading Heading--context"></small>
        </div>
        <!--/.SiteFooter-container-->
        <div class="Cols-item">
            <nav class="SiteFooter-navigation" aria-label="Site Footer Navigation">
                <ul class="SiteFooter-navigationLinks">
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Test Lab</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Accessibility</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Cookies</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Styleguide</a></li>
                    <li class="SiteFooter-navigationItem"><a href="#" class="SiteFooter-navigationLink">Jobs</a></li>
                </ul>
                <!--/.SiteFooter-navigationLinks-->
                <ul class="SiteFooter-icons">
                    <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-github.svg" alt="Find us on Github"></a></li>
                    <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-instagram.svg" alt="Find us on Instagram"></a></li>
                    <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-linkedin.svg" alt="Find us on LinkedIn"></a></li>
                    <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-medium.svg" alt="Find us on Medium"></a></li>
                    <li class="SiteFooter-icon"><a class="SiteFooter-iconLink" href="#"><img src="/assets/img/icons/icon-flickr.svg" alt="Find us on Flickr"></a></li>
                </ul>
                <!--/.SiteFooter-icons-->
            </nav>
        </div>
        <!--/.Cols-half-->
        <div class="Cols-item SiteFooter-small">
            &copy; 2005‑now Clearleft Ltd. All rights reserved.
        </div>
        <!--/.SiteFooter-small-->
    </div>
    <!--/.Cols-->
</footer>
<!--/.SiteFooter-->
<div class="Background Background--grey">
    {% include '@site-header' %}
    {% include '@masthead' %}
</div>

<main id="main-content">

    <div class="Work">

        <div class="Work-grid">
            {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-featured">
            {% include '@penguin-project' %}
        </div>

        <div class="Work-grid">
            {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId ~ 'b'
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-featured">
            {% include '@ch4-project' %}
        </div>

        <div class="Work-grid">
        {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId ~ 'c'
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

        <div class="Work-featured">
            {% include '@evo-project' %}
        </div>

        <div class="Work-grid">
            {% for post in posts %}
            <div class="Work-gridItem">
                {% include '@card' with {
                    cardModifiers: ['--home', '--logo'],
                    cardLogoSrc: 'http://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png',
                    cardLogoAlt: 'Royal Borough of Kensington and Chelsea',
                    cardTitle: post.cardTitle,
                    cardDescription: post.cardDescription,
                    cardUrl: '#',
                    cardLinkText: 'Read the case study',
                    cardId: post.cardId ~ 'd'
                } %}
            </div>
            {% endfor %}
        </div><!--/.Work-grid-->

    </div>

    {% include '@megalink-banner' %}

    {% include '@hello' %}

</main>

{% include '@site-footer' %}
{
  "primaryNavlinks": [
    {
      "title": "Case Studies",
      "url": "#",
      "primaryActive": true
    },
    {
      "title": "Team",
      "url": "#"
    },
    {
      "title": "Posts",
      "url": "#"
    },
    {
      "title": "Events",
      "url": "#"
    },
    {
      "title": "Contact",
      "url": "#"
    }
  ],
  "primaryNavModifiers": [
    "--sea-serpent-blue"
  ],
  "logoModifiers": [
    "--sea-serpent-blue"
  ],
  "mastheadTitle": "Case<br>studies.",
  "mastheadModifier": "--chimney",
  "penguinModifier": "--tall",
  "penguinQuestion": "How do you bring more than 700 brands together into one website?",
  "penguinTitle": "Create a new universe.",
  "penguinLinkUrl": "#",
  "penguinLogoSrc": "/assets/img/work/penguin/penguin-logo.svg",
  "penguinLogoAlt": "Penguin logo",
  "ch4Modifier": "--tall",
  "ch4Question": "How do you create a new kind of news service?",
  "ch4Title": "Focus on the intelligent story.",
  "ch4LinkUrl": "#",
  "ch4LogoSrc": "/assets/img/work/ch4/ch4-logo.svg",
  "ch4LogoAlt": "ch4 logo",
  "evoModifier": "--tall",
  "evoQuestion": "How do you reimagine a physical magazine?",
  "evoTitle": "Drive reader engagement.",
  "evoLinkUrl": "#",
  "evoLogoSrc": "/assets/img/work/evo/evo-logo.svg",
  "evoLogoAlt": "evo logo",
  "posts": [
    {
      "cardTitle": "nisi vel soluta",
      "cardDescription": "Inventore voluptas et qui omnis. Sunt ducimus cumque et non. Quae nostrum possimus iusto perferendis accusantium quia est id est.",
      "cardId": "card-0"
    },
    {
      "cardTitle": "non quia iste",
      "cardDescription": "Fugit et quos deleniti. Iste dolore nesciunt omnis quod nisi numquam porro fuga sed. Et reprehenderit est est id similique aut blanditiis dolore.",
      "cardId": "card-1"
    },
    {
      "cardTitle": "animi earum neque",
      "cardDescription": "Magni facilis minus voluptas delectus quia distinctio. Tenetur modi consequatur voluptate harum neque debitis maiores reprehenderit et. Dolores nisi laboriosam provident non similique omnis placeat et quam. Fugiat reprehenderit recusandae repudiandae voluptate. Aut veniam quos voluptas qui quam. Ad earum excepturi cumque mollitia voluptas libero sit.",
      "cardId": "card-2"
    },
    {
      "cardTitle": "at dolor culpa",
      "cardDescription": "Nesciunt molestias iusto omnis odio qui numquam asperiores ipsa sapiente. Culpa et optio atque porro. Fugit suscipit non eaque. Quibusdam consequatur esse omnis facere fugiat. Qui repellat sapiente qui. Delectus illum consequatur eum recusandae cum.",
      "cardId": "card-3"
    }
  ],
  "helloImgSrc": "https://clearleft-v5.s3.amazonaws.com/uploads/DC.png",
  "helloImgAlt": "Dan Caplin",
  "helloImgText": "This is Dan",
  "helloHeading": "Open the conversation.",
  "helloBody": "\n            <p> Ask us anything. From basic questions to complex queries about your approach to strategy, research, content and design, Dan is ready to talk to you on + 44(0) 845 838 6163 or <a href =\"#\"> get in touch </a></p>",
  "footerLinks": [
    {
      "title": "Test Lab",
      "url": "#"
    },
    {
      "title": "Accessibility",
      "url": "#"
    },
    {
      "title": "Cookies",
      "url": "#"
    },
    {
      "title": "Styleguide",
      "url": "#"
    },
    {
      "title": "Jobs",
      "url": "#"
    }
  ],
  "socialLinks": [
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-github.svg",
      "alt": "Find us on Github"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-instagram.svg",
      "alt": "Find us on Instagram"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-linkedin.svg",
      "alt": "Find us on LinkedIn"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-medium.svg",
      "alt": "Find us on Medium"
    },
    {
      "url": "#",
      "imgSrc": "/assets/img/icons/icon-flickr.svg",
      "alt": "Find us on Flickr"
    }
  ],
  "inputGroupLabel": "Feed your curiosity.",
  "inputGroupSubmit": "Get the Clearletter",
  "inputModifier": "--combo",
  "siteFooterSmall": "&copy; 2005‑now Clearleft Ltd. All rights reserved."
}

There are no notes for this item.