/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden],
template {
    display: none;
}
a {
    background-color: transparent;
}
a:active,
a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b,
strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
mark {
    background: #ff0;
    color: #000;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 1em 40px;
}
hr {
    box-sizing: content-box;
    height: 0;
}
pre {
    overflow: auto;
}
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input {
    line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
}
optgroup {
    font-weight: bold;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td,
th {
    padding: 0;
}
@font-face {
    font-family: "Fakt Light";
    src: url("../assets/fonts/FaktPro-Light.woff") format("woff");
}
@font-face {
    font-family: "Fakt Medium";
    src: url("../assets/fonts/FaktPro-Medium.woff") format("woff");
}
@font-face {
    font-family: "Superior Black";
    src: url("../assets/fonts/SuperiorTitle-Black.woff") format("woff");
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../assets/fonts/IBMPlexMono-Regular.woff") format("woff");
}
html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: ni;
}
.page-content {
    overflow: hidden;
}
.scroll-blocked {
    overflow: hidden;
    position: relative;
}
section.youtube .youtube__play {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
section.youtube .youtube__play::before {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: play-button 1s ease-in-out infinite alternate;
    animation: play-button 1s ease-in-out infinite alternate;
    border-radius: 50%;
    box-shadow: 13px 16px 38px 3px rgba(0, 0, 0, 0.5);
    content: "";
    display: block;
    height: 76px;
    position: absolute;
    width: 76px;
}
section.youtube .youtube__play::after {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-animation: play-button 1s ease-in-out infinite alternate;
    animation: play-button 1s ease-in-out infinite alternate;
    background: url("../assets/youtube-play.svg") center/contain no-repeat;
    border-radius: 50%;
    content: "";
    display: block;
    height: 80px;
    position: absolute;
    width: 80px;
}
section.video video,
section.youtube iframe,
.case-study.santatracker section.games .games__video-top video,
.case-study.santatracker section.games .games__video-bottom video,
.case-study.santatracker section.photogrid video,
.case-study.santatracker section.video-top-grid .video-top-grid__video video,
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__video video,
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__image video {
    background: #d0d0d0;
    width: 100.01%;
}
body.is-mobile [data-scroll-parallax-child] {
    transform: none !important;
}
[data-scroll-toggle="fade"] {
    opacity: 0.2;
    transition: opacity 0.6s;
}
[data-scroll-toggle="fade"].is-active {
    opacity: 1;
}
[data-scroll-grow] {
    transform-origin: 50% 0;
}
@media only screen and (max-width: 786px) {
    [data-scroll-grow] {
        display: none;
    }
}
[data-scroll-grow] [data-scroll-grow-inner] {
    transform-origin: 50% 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-scroll-grow]:not(.is-visible) [data-scroll-grow-inner] {
    transform: scale(1, 0) !important;
}
[data-scroll-follow-child] {
    will-change: transform;
}
.grid__row {
    align-items: center;
    display: flex;
}
.grid__row--top {
    align-items: flex-start;
    display: flex;
}
.grid__row--bottom {
    align-items: flex-end;
    display: flex;
}
.grid__col-0:not(:last-child),
.grid__col-1:not(:last-child),
.grid__col-2:not(:last-child),
.grid__col-3:not(:last-child),
.grid__col-4:not(:last-child),
.grid__col-5:not(:last-child),
.grid__col-6:not(:last-child),
.grid__col-7:not(:last-child),
.grid__col-8:not(:last-child),
.scroll-arrow__inner:not(:last-child),
.grid__col-9:not(:last-child),
.page--home .project.android-wear .project__inner:not(:last-child),
.page--home .project.blue-heart .project__inner:not(:last-child),
.page--home .project.famsf .project__inner:not(:last-child),
.page--home .project.le-tote .project__inner:not(:last-child),
.page--home .project.reel .project__inner:not(:last-child),
.page--home .project.tiltbrush .project__inner:not(:last-child),
.case-study.tiltbrush .air-text .text__label-inner:not(:last-child),
.page--home .project.wethepower .project__inner:not(:last-child),
.page--home .project.wisesystems .project__inner:not(:last-child),
.grid__col-10:not(:last-child),
.page--home .project.affirm .project__inner:not(:last-child),
.page--home .project.amp .project__inner:not(:last-child),
.page--home .project.athome .project__inner:not(:last-child),
.grid__col-11:not(:last-child),
.page--home .project.valencia .project__inner:not(:last-child),
.page--home .project.dschool .project__inner:not(:last-child),
.grid__col-12:not(:last-child),
.page--home .project.git-merge .project__inner:not(:last-child),
.page--home .project.jigsaw .project__inner:not(:last-child),
.grid__col-13:not(:last-child),
.page--home .project.youtubee3 .project__inner:not(:last-child),
.grid__col-14:not(:last-child),
.page--home .project.chromebooks .project__inner:not(:last-child),
.page--home .project.lightstep .project__inner:not(:last-child),
.page--home .project.sandhillcollection .project__inner:not(:last-child),
.page--home .project.spaces .project__inner:not(:last-child),
.grid__col-15:not(:last-child),
.grid__col-16:not(:last-child),
.grid__col-17:not(:last-child),
.grid__col-18:not(:last-child),
.grid__col-19:not(:last-child),
.grid__col-20:not(:last-child),
.page--home .project.bears-ears .project__inner:not(:last-child),
.page--home .project.santatracker .project__inner:not(:last-child),
.grid__col-21:not(:last-child),
.grid__col-22:not(:last-child),
.grid__col-23:not(:last-child),
.grid__col-24:not(:last-child) {
    padding-right: 5px;
}
.grid__col-0:not(:first-child),
.grid__col-1:not(:first-child),
.grid__col-2:not(:first-child),
.grid__col-3:not(:first-child),
.grid__col-4:not(:first-child),
.grid__col-5:not(:first-child),
.grid__col-6:not(:first-child),
.grid__col-7:not(:first-child),
.grid__col-8:not(:first-child),
.scroll-arrow__inner:not(:first-child),
.grid__col-9:not(:first-child),
.page--home .project.android-wear .project__inner:not(:first-child),
.page--home .project.blue-heart .project__inner:not(:first-child),
.page--home .project.famsf .project__inner:not(:first-child),
.page--home .project.le-tote .project__inner:not(:first-child),
.page--home .project.reel .project__inner:not(:first-child),
.page--home .project.tiltbrush .project__inner:not(:first-child),
.case-study.tiltbrush .air-text .text__label-inner:not(:first-child),
.page--home .project.wethepower .project__inner:not(:first-child),
.page--home .project.wisesystems .project__inner:not(:first-child),
.grid__col-10:not(:first-child),
.page--home .project.affirm .project__inner:not(:first-child),
.page--home .project.amp .project__inner:not(:first-child),
.page--home .project.athome .project__inner:not(:first-child),
.grid__col-11:not(:first-child),
.page--home .project.valencia .project__inner:not(:first-child),
.page--home .project.dschool .project__inner:not(:first-child),
.grid__col-12:not(:first-child),
.page--home .project.git-merge .project__inner:not(:first-child),
.page--home .project.jigsaw .project__inner:not(:first-child),
.grid__col-13:not(:first-child),
.page--home .project.youtubee3 .project__inner:not(:first-child),
.grid__col-14:not(:first-child),
.page--home .project.chromebooks .project__inner:not(:first-child),
.page--home .project.lightstep .project__inner:not(:first-child),
.page--home .project.sandhillcollection .project__inner:not(:first-child),
.page--home .project.spaces .project__inner:not(:first-child),
.grid__col-15:not(:first-child),
.grid__col-16:not(:first-child),
.grid__col-17:not(:first-child),
.grid__col-18:not(:first-child),
.grid__col-19:not(:first-child),
.grid__col-20:not(:first-child),
.page--home .project.bears-ears .project__inner:not(:first-child),
.page--home .project.santatracker .project__inner:not(:first-child),
.grid__col-21:not(:first-child),
.grid__col-22:not(:first-child),
.grid__col-23:not(:first-child),
.grid__col-24:not(:first-child) {
    padding-left: 5px;
}
.grid__col-full {
    flex: 0 0 100%;
}
.grid__col-fit {
    flex: 1;
}
.grid__col-0 {
    flex: 0 0 0;
}
.grid__col-1 {
    flex: 0 0 4.1666666667%;
}
.grid__col-2 {
    flex: 0 0 8.3333333333%;
}
.grid__col-3 {
    flex: 0 0 12.5%;
}
.grid__col-4 {
    flex: 0 0 16.6666666667%;
}
.grid__col-5 {
    flex: 0 0 20.8333333333%;
}
.grid__col-6 {
    flex: 0 0 25%;
}
.grid__col-7 {
    flex: 0 0 29.1666666667%;
}
.grid__col-8,
.scroll-arrow__inner {
    flex: 0 0 33.3333333333%;
}
.grid__col-9,
.page--home .project.android-wear .project__inner,
.page--home .project.blue-heart .project__inner,
.page--home .project.famsf .project__inner,
.page--home .project.le-tote .project__inner,
.page--home .project.reel .project__inner,
.page--home .project.tiltbrush .project__inner,
.case-study.tiltbrush .air-text .text__label-inner,
.page--home .project.wethepower .project__inner,
.page--home .project.wisesystems .project__inner {
    flex: 0 0 37.5%;
}
.grid__col-10,
.page--home .project.affirm .project__inner,
.page--home .project.amp .project__inner,
.page--home .project.athome .project__inner {
    flex: 0 0 41.6666666667%;
}
.grid__col-11,
.page--home .project.valencia .project__inner,
.page--home .project.dschool .project__inner {
    flex: 0 0 45.8333333333%;
}
.grid__col-12,
.page--home .project.git-merge .project__inner,
.page--home .project.jigsaw .project__inner {
    flex: 0 0 50%;
}
.grid__col-13,
.page--home .project.youtubee3 .project__inner {
    flex: 0 0 54.1666666667%;
}
.grid__col-14,
.page--home .project.chromebooks .project__inner,
.page--home .project.lightstep .project__inner,
.page--home .project.sandhillcollection .project__inner,
.page--home .project.spaces .project__inner {
    flex: 0 0 58.3333333333%;
}
.grid__col-15 {
    flex: 0 0 62.5%;
}
.grid__col-16 {
    flex: 0 0 66.6666666667%;
}
.grid__col-17 {
    flex: 0 0 70.8333333333%;
}
.grid__col-18 {
    flex: 0 0 75%;
}
.grid__col-19 {
    flex: 0 0 79.1666666667%;
}
.grid__col-20,
.page--home .project.bears-ears .project__inner,
.page--home .project.santatracker .project__inner {
    flex: 0 0 83.3333333333%;
}
.grid__col-21 {
    flex: 0 0 87.5%;
}
.grid__col-22 {
    flex: 0 0 91.6666666667%;
}
.grid__col-23 {
    flex: 0 0 95.8333333333%;
}
.grid__col-24 {
    flex: 0 0 100%;
}
.grid__push-0 {
    margin-left: 0;
}
.grid__push-1 {
    margin-left: 4.1666666667%;
}
.grid__push-2,
.page--home .project.android-wear .project__inner,
.page--home .project.bears-ears .project__inner,
.page--home .project.jigsaw .project__inner,
.page--home .project.santatracker .project__inner {
    margin-left: 8.3333333333%;
}
.grid__push-3,
.page--home .project.athome .project__inner,
.page--home .project.famsf .project__inner,
.page--home .project.youtubee3 .project__inner {
    margin-left: 12.5%;
}
.grid__push-4,
.page--home .project.blue-heart .project__inner,
.page--home .project.le-tote .project__inner,
.page--home .project.tiltbrush .project__inner,
.page--home .project.wethepower .project__inner,
.page--home .project.wisesystems .project__inner {
    margin-left: 16.6666666667%;
}
.grid__push-5 {
    margin-left: 20.8333333333%;
}
.grid__push-6 {
    margin-left: 25%;
}
.grid__push-7,
.page--home .project.reel .project__inner {
    margin-left: 29.1666666667%;
}
.grid__push-8 {
    margin-left: 33.3333333333%;
}
.grid__push-9 {
    margin-left: 37.5%;
}
.grid__push-10,
.page--home .project.chromebooks .project__inner,
.page--home .project.lightstep .project__inner,
.page--home .project.sandhillcollection .project__inner {
    margin-left: 41.6666666667%;
}
.grid__push-11,
.page--home .project.git-merge .project__inner {
    margin-left: 45.8333333333%;
}
.grid__push-12,
.page--home .project.valencia .project__inner,
.page--home .project.affirm .project__inner,
.page--home .project.amp .project__inner,
.page--home .project.dschool .project__inner {
    margin-left: 50%;
}
.grid__push-13 {
    margin-left: 54.1666666667%;
}
.grid__push-14 {
    margin-left: 58.3333333333%;
}
.grid__push-15 {
    margin-left: 62.5%;
}
.grid__push-16 {
    margin-left: 66.6666666667%;
}
.grid__push-17 {
    margin-left: 70.8333333333%;
}
.grid__push-18 {
    margin-left: 75%;
}
.grid__push-19 {
    margin-left: 79.1666666667%;
}
.grid__push-20 {
    margin-left: 83.3333333333%;
}
.grid__push-21 {
    margin-left: 87.5%;
}
.grid__push-22 {
    margin-left: 91.6666666667%;
}
.grid__push-23 {
    margin-left: 95.8333333333%;
}
.grid__push-24 {
    margin-left: 100%;
}
@media only screen and (min-width: 1500px) {
    .grid__col-0-xl {
        flex: 0 0 0;
    }
    .grid__col-1-xl {
        flex: 0 0 4.1666666667%;
    }
    .grid__col-2-xl {
        flex: 0 0 8.3333333333%;
    }
    .grid__col-3-xl {
        flex: 0 0 12.5%;
    }
    .grid__col-4-xl {
        flex: 0 0 16.6666666667%;
    }
    .grid__col-5-xl {
        flex: 0 0 20.8333333333%;
    }
    .grid__col-6-xl {
        flex: 0 0 25%;
    }
    .grid__col-7-xl {
        flex: 0 0 29.1666666667%;
    }
    .grid__col-8-xl {
        flex: 0 0 33.3333333333%;
    }
    .grid__col-9-xl {
        flex: 0 0 37.5%;
    }
    .grid__col-10-xl {
        flex: 0 0 41.6666666667%;
    }
    .grid__col-11-xl {
        flex: 0 0 45.8333333333%;
    }
    .grid__col-12-xl {
        flex: 0 0 50%;
    }
    .grid__col-13-xl {
        flex: 0 0 54.1666666667%;
    }
    .grid__col-14-xl {
        flex: 0 0 58.3333333333%;
    }
    .grid__col-15-xl {
        flex: 0 0 62.5%;
    }
    .grid__col-16-xl {
        flex: 0 0 66.6666666667%;
    }
    .grid__col-17-xl {
        flex: 0 0 70.8333333333%;
    }
    .grid__col-18-xl {
        flex: 0 0 75%;
    }
    .grid__col-19-xl {
        flex: 0 0 79.1666666667%;
    }
    .grid__col-20-xl {
        flex: 0 0 83.3333333333%;
    }
    .grid__col-21-xl {
        flex: 0 0 87.5%;
    }
    .grid__col-22-xl {
        flex: 0 0 91.6666666667%;
    }
    .grid__col-23-xl {
        flex: 0 0 95.8333333333%;
    }
    .grid__col-24-xl {
        flex: 0 0 100%;
    }
    .grid__push-0-xl {
        margin-left: 0;
    }
    .grid__push-1-xl {
        margin-left: 4.1666666667%;
    }
    .grid__push-2-xl {
        margin-left: 8.3333333333%;
    }
    .grid__push-3-xl {
        margin-left: 12.5%;
    }
    .grid__push-4-xl {
        margin-left: 16.6666666667%;
    }
    .grid__push-5-xl {
        margin-left: 20.8333333333%;
    }
    .grid__push-6-xl {
        margin-left: 25%;
    }
    .grid__push-7-xl {
        margin-left: 29.1666666667%;
    }
    .grid__push-8-xl {
        margin-left: 33.3333333333%;
    }
    .grid__push-9-xl {
        margin-left: 37.5%;
    }
    .grid__push-10-xl {
        margin-left: 41.6666666667%;
    }
    .grid__push-11-xl {
        margin-left: 45.8333333333%;
    }
    .grid__push-12-xl {
        margin-left: 50%;
    }
    .grid__push-13-xl {
        margin-left: 54.1666666667%;
    }
    .grid__push-14-xl {
        margin-left: 58.3333333333%;
    }
    .grid__push-15-xl {
        margin-left: 62.5%;
    }
    .grid__push-16-xl {
        margin-left: 66.6666666667%;
    }
    .grid__push-17-xl {
        margin-left: 70.8333333333%;
    }
    .grid__push-18-xl {
        margin-left: 75%;
    }
    .grid__push-19-xl {
        margin-left: 79.1666666667%;
    }
    .grid__push-20-xl {
        margin-left: 83.3333333333%;
    }
    .grid__push-21-xl {
        margin-left: 87.5%;
    }
    .grid__push-22-xl {
        margin-left: 91.6666666667%;
    }
    .grid__push-23-xl {
        margin-left: 95.8333333333%;
    }
    .grid__push-24-xl {
        margin-left: 100%;
    }
}
@media only screen and (max-width: 1168px) {
    .grid__col-0-sm {
        flex: 0 0 0;
    }
    .grid__col-1-sm {
        flex: 0 0 4.1666666667%;
    }
    .grid__col-2-sm {
        flex: 0 0 8.3333333333%;
    }
    .grid__col-3-sm {
        flex: 0 0 12.5%;
    }
    .grid__col-4-sm {
        flex: 0 0 16.6666666667%;
    }
    .grid__col-5-sm {
        flex: 0 0 20.8333333333%;
    }
    .grid__col-6-sm {
        flex: 0 0 25%;
    }
    .grid__col-7-sm {
        flex: 0 0 29.1666666667%;
    }
    .grid__col-8-sm {
        flex: 0 0 33.3333333333%;
    }
    .grid__col-9-sm {
        flex: 0 0 37.5%;
    }
    .grid__col-10-sm {
        flex: 0 0 41.6666666667%;
    }
    .grid__col-11-sm {
        flex: 0 0 45.8333333333%;
    }
    .grid__col-12-sm {
        flex: 0 0 50%;
    }
    .grid__col-13-sm {
        flex: 0 0 54.1666666667%;
    }
    .grid__col-14-sm {
        flex: 0 0 58.3333333333%;
    }
    .grid__col-15-sm {
        flex: 0 0 62.5%;
    }
    .grid__col-16-sm {
        flex: 0 0 66.6666666667%;
    }
    .grid__col-17-sm {
        flex: 0 0 70.8333333333%;
    }
    .grid__col-18-sm {
        flex: 0 0 75%;
    }
    .grid__col-19-sm {
        flex: 0 0 79.1666666667%;
    }
    .grid__col-20-sm {
        flex: 0 0 83.3333333333%;
    }
    .grid__col-21-sm {
        flex: 0 0 87.5%;
    }
    .grid__col-22-sm {
        flex: 0 0 91.6666666667%;
    }
    .grid__col-23-sm {
        flex: 0 0 95.8333333333%;
    }
    .grid__col-24-sm {
        flex: 0 0 100%;
    }
    .grid__push-0-sm {
        margin-left: 0;
    }
    .grid__push-1-sm {
        margin-left: 4.1666666667%;
    }
    .grid__push-2-sm {
        margin-left: 8.3333333333%;
    }
    .grid__push-3-sm {
        margin-left: 12.5%;
    }
    .grid__push-4-sm {
        margin-left: 16.6666666667%;
    }
    .grid__push-5-sm {
        margin-left: 20.8333333333%;
    }
    .grid__push-6-sm {
        margin-left: 25%;
    }
    .grid__push-7-sm {
        margin-left: 29.1666666667%;
    }
    .grid__push-8-sm {
        margin-left: 33.3333333333%;
    }
    .grid__push-9-sm {
        margin-left: 37.5%;
    }
    .grid__push-10-sm {
        margin-left: 41.6666666667%;
    }
    .grid__push-11-sm {
        margin-left: 45.8333333333%;
    }
    .grid__push-12-sm {
        margin-left: 50%;
    }
    .grid__push-13-sm {
        margin-left: 54.1666666667%;
    }
    .grid__push-14-sm {
        margin-left: 58.3333333333%;
    }
    .grid__push-15-sm {
        margin-left: 62.5%;
    }
    .grid__push-16-sm {
        margin-left: 66.6666666667%;
    }
    .grid__push-17-sm {
        margin-left: 70.8333333333%;
    }
    .grid__push-18-sm {
        margin-left: 75%;
    }
    .grid__push-19-sm {
        margin-left: 79.1666666667%;
    }
    .grid__push-20-sm {
        margin-left: 83.3333333333%;
    }
    .grid__push-21-sm {
        margin-left: 87.5%;
    }
    .grid__push-22-sm {
        margin-left: 91.6666666667%;
    }
    .grid__push-23-sm {
        margin-left: 95.8333333333%;
    }
    .grid__push-24-sm {
        margin-left: 100%;
    }
}
@media only screen and (max-width: 786px) {
    .grid__col-0-xs {
        flex: 0 0 0;
    }
    .grid__col-1-xs {
        flex: 0 0 4.1666666667%;
    }
    .grid__col-2-xs {
        flex: 0 0 8.3333333333%;
    }
    .grid__col-3-xs {
        flex: 0 0 12.5%;
    }
    .grid__col-4-xs {
        flex: 0 0 16.6666666667%;
    }
    .grid__col-5-xs {
        flex: 0 0 20.8333333333%;
    }
    .grid__col-6-xs {
        flex: 0 0 25%;
    }
    .grid__col-7-xs {
        flex: 0 0 29.1666666667%;
    }
    .grid__col-8-xs {
        flex: 0 0 33.3333333333%;
    }
    .grid__col-9-xs {
        flex: 0 0 37.5%;
    }
    .grid__col-10-xs {
        flex: 0 0 41.6666666667%;
    }
    .grid__col-11-xs {
        flex: 0 0 45.8333333333%;
    }
    .grid__col-12-xs {
        flex: 0 0 50%;
    }
    .grid__col-13-xs {
        flex: 0 0 54.1666666667%;
    }
    .grid__col-14-xs {
        flex: 0 0 58.3333333333%;
    }
    .grid__col-15-xs {
        flex: 0 0 62.5%;
    }
    .grid__col-16-xs {
        flex: 0 0 66.6666666667%;
    }
    .grid__col-17-xs {
        flex: 0 0 70.8333333333%;
    }
    .grid__col-18-xs {
        flex: 0 0 75%;
    }
    .grid__col-19-xs {
        flex: 0 0 79.1666666667%;
    }
    .grid__col-20-xs {
        flex: 0 0 83.3333333333%;
    }
    .grid__col-21-xs {
        flex: 0 0 87.5%;
    }
    .grid__col-22-xs,
    .page--home .project:nth-child(odd) a.project__inner,
    .page--home .project:nth-child(even) a.project__inner {
        flex: 0 0 91.6666666667%;
    }
    .grid__col-23-xs {
        flex: 0 0 95.8333333333%;
    }
    .grid__col-24-xs,
    .case-study.tiltbrush .air-text .text__label-inner {
        flex: 0 0 100%;
    }
    .grid__push-0-xs,
    .page--home .project:nth-child(odd) a.project__inner {
        margin-left: 0;
    }
    .grid__push-1-xs {
        margin-left: 4.1666666667%;
    }
    .grid__push-2-xs,
    .page--home .project:nth-child(even) a.project__inner {
        margin-left: 8.3333333333%;
    }
    .grid__push-3-xs {
        margin-left: 12.5%;
    }
    .grid__push-4-xs {
        margin-left: 16.6666666667%;
    }
    .grid__push-5-xs {
        margin-left: 20.8333333333%;
    }
    .grid__push-6-xs {
        margin-left: 25%;
    }
    .grid__push-7-xs {
        margin-left: 29.1666666667%;
    }
    .grid__push-8-xs {
        margin-left: 33.3333333333%;
    }
    .grid__push-9-xs {
        margin-left: 37.5%;
    }
    .grid__push-10-xs {
        margin-left: 41.6666666667%;
    }
    .grid__push-11-xs {
        margin-left: 45.8333333333%;
    }
    .grid__push-12-xs {
        margin-left: 50%;
    }
    .grid__push-13-xs {
        margin-left: 54.1666666667%;
    }
    .grid__push-14-xs {
        margin-left: 58.3333333333%;
    }
    .grid__push-15-xs {
        margin-left: 62.5%;
    }
    .grid__push-16-xs {
        margin-left: 66.6666666667%;
    }
    .grid__push-17-xs {
        margin-left: 70.8333333333%;
    }
    .grid__push-18-xs {
        margin-left: 75%;
    }
    .grid__push-19-xs {
        margin-left: 79.1666666667%;
    }
    .grid__push-20-xs {
        margin-left: 83.3333333333%;
    }
    .grid__push-21-xs {
        margin-left: 87.5%;
    }
    .grid__push-22-xs {
        margin-left: 91.6666666667%;
    }
    .grid__push-23-xs {
        margin-left: 95.8333333333%;
    }
    .grid__push-24-xs {
        margin-left: 100%;
    }
}
@media only screen and (min-width: 787px) {
    .only-smartphone,
    .page--careers .summary__ethos-label::after {
        display: none !important;
    }
}
@media only screen and (max-width: 786px) {
    .only-tablet {
        display: none !important;
    }
}
@media only screen and (min-width: 1169px) {
    .only-tablet {
        display: none !important;
    }
}
@media only screen and (max-width: 1168px) {
    .only-desktop {
        display: none !important;
    }
}
@media only screen and (max-width: 786px) {
    .above-smartphone,
    .page--careers .photos__bg,
    .page--careers .positions__bg,
    .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .text__label-inner::after {
        display: none !important;
    }
}
@media only screen and (min-width: 1169px) {
    .below-desktop {
        display: none !important;
    }
}
.theme--dark {
    background: #1a1919;
}
.theme--dark header,
.theme--dark .case-study {
    color: #fff;
}
.theme--dark .header__open--text::before {
    background-color: #fff;
}
.theme--dark .header__open--text::after {
    background-color: #1a1919;
}
.theme--dark section.text .text__label-inner::before {
    background: #fff;
}
.theme--dark section.hero .hero__client-name {
    color: #202020;
}
.theme--dark section.video video {
    background: #1a1919;
}
.theme--dark section.youtube iframe {
    background: #1a1919;
}
.theme--dark div.scroll-arrow .scroll-arrow__line {
    background: url("../assets/scroll-arrow-white.svg") center left/contain no-repeat;
}
.theme--dark footer.next-up {
    background: #1a1919;
    color: #fff;
}
.theme--dark footer.next-up a {
    color: #fff;
}
.theme--dark footer.next-up .footer__contact-inner {
    border-color: #fff;
}
.theme--dark footer.next-up .footer__contact-inner::before {
    background: #fff;
}
.theme--dark footer.next-up .footer__message-clientname::after {
    background: #fff;
}
.theme--dark footer.next-up .footer__message-cta-text-inner {
    color: #000;
}
.theme--dark footer.next-up .footer__image-inner::before {
    background: #000;
}
.theme--dark footer.next-up .footer__image-inner::after {
    background: rgba(26, 25, 25, 0.5);
}
.theme--black {
    background: #000;
}
.theme--black header,
.theme--black .case-study {
    color: #fff;
}
.theme--black .header__open--text::before {
    background-color: #fff;
}
.theme--black .header__open--text::after {
    background-color: #000;
}
.theme--black section.text .text__label-inner::before {
    background: #fff;
}
.theme--black section.hero .hero__client-name {
    color: #202020;
}
.theme--black section.video video {
    background: #000;
}
.theme--black section.youtube iframe {
    background: #000;
}
.theme--black div.scroll-arrow .scroll-arrow__line {
    background: url("../assets/scroll-arrow-white.svg") center left/contain no-repeat;
}
.theme--black footer.next-up {
    background: #000;
    color: #fff;
}
.theme--black footer.next-up a {
    color: #fff;
}
.theme--black footer.next-up .footer__contact-inner {
    border-color: #fff;
}
.theme--black footer.next-up .footer__contact-inner::before {
    background: #fff;
}
.theme--black footer.next-up .footer__message-clientname::after {
    background: #fff;
}
.theme--black footer.next-up .footer__message-cta-text-inner {
    color: #000;
}
.theme--black footer.next-up .footer__image-inner::before {
    background: #1a1919;
}
.theme--black footer.next-up .footer__image-inner::after {
    background: rgba(0, 0, 0, 0.5);
}
html {
    font-size: 0.9756097561vw;
}
@media only screen and (max-width: 717.5px) {
    html {
        font-size: 7px;
    }
}
@media only screen and (min-width: 1537.5px) {
    html {
        font-size: 15px;
    }
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal !important;
}
h1,
.t-h1 {
    font-family: "Superior Black", serif;
    font-size: 9.2857142857rem;
    letter-spacing: 0.1px;
    line-height: 0.89;
}
@media only screen and (max-width: 786px) {
    h1,
    .t-h1 {
        font-size: 70px;
    }
}
h2,
.t-h2 {
    font-family: "Fakt Light", Helvetica, Arial, sans-serif;
    font-size: 3.9285714286rem;
    font-weight: 100;
    letter-spacing: -0.027em;
    line-height: 1.4;
}
@media only screen and (max-width: 786px) {
    h2,
    .t-h2 {
        font-size: 33px;
    }
}
h3,
.t-h3 {
    font-family: "Fakt Light", Helvetica, Arial, sans-serif;
    font-size: 3.4285714286rem;
    font-weight: 100;
    letter-spacing: -0.03125em;
    line-height: 1.25;
}
@media only screen and (max-width: 786px) {
    h3,
    .t-h3 {
        font-size: 33px;
    }
}
@media only screen and (max-width: 360px) {
    h3,
    .t-h3 {
        font-size: 28px;
    }
}
.t-h1--case-study {
    font-family: "Superior Black", serif;
    font-size: 28.5714285714rem;
    letter-spacing: -16px;
    line-height: 1;
}
.t-h1--job {
    font-family: "Superior Black", serif;
    font-size: 18rem;
    letter-spacing: -3.34px;
    line-height: 0.78;
}
@media only screen and (max-width: 786px) {
    .t-h1--about-what {
        font-size: 54px;
    }
}
@media only screen and (max-width: 360px) {
    .t-h1--about-what {
        font-size: 46px;
    }
}
.t-h1--about-clients {
    font-family: "Superior Black", serif;
    font-size: 23.1428571429rem;
    letter-spacing: 0.25px;
    line-height: 0.7;
}
.t-h1--award-large {
    font-size: 8.2142857143rem;
}
@media only screen and (max-width: 786px) {
    .t-h1--award-large {
        font-size: 115px;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .t-h1--award-large {
        font-size: 57.5px;
    }
}
.t-h1--award-small {
    font-size: 7.4285714286rem;
}
@media only screen and (max-width: 786px) {
    .t-h1--award-small {
        font-size: 104px;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .t-h1--award-small {
        font-size: 52px;
    }
}
.t-h1--up-next {
    font-family: "Superior Black", serif;
    font-size: 13.6428571429rem;
    letter-spacing: 0.34px;
    line-height: 0.55;
}
@media only screen and (max-width: 786px) {
    .t-h1--up-next {
        letter-spacing: -3px;
    }
}
.t-h1--error {
    font-family: "Superior Black", serif;
    font-size: 33.4285714286rem;
    letter-spacing: -12px;
}
.t-h1--footer {
    font-size: 12.785714rem;
    letter-spacing: -4.8px;
}
.t-error-title {
    font-family: "Superior Black", serif;
    font-size: 5.5714285714rem;
    letter-spacing: 0.06px;
}
.t-error-subtitle {
    font-family: "Fakt Light", Helvetica, Arial, sans-serif;
    font-size: 1.2857142857rem;
    letter-spacing: -0.1px;
    line-height: 1.56;
}
@media only screen and (max-width: 1168px) {
    .t-error-subtitle {
        font-size: 14px;
    }
}
.t-meta-cta {
    font-family: "Superior Black", serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
@media only screen and (max-width: 950px) {
    .t-meta-cta {
        font-size: 10px;
    }
}
.t-meta-large {
    font-family: "Fakt Medium", Helvetica, Arial, sans-serif;
    font-size: 17px;
    letter-spacing: 0.18em;
    line-height: 1.47;
    text-transform: uppercase;
}
@media only screen and (max-width: 950px) {
    .t-meta-large {
        font-size: 15px;
    }
}
.t-meta-medium {
    font-family: "Fakt Medium", Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.21em;
    line-height: 1.53;
    text-transform: uppercase;
}
@media only screen and (max-width: 950px) {
    .t-meta-medium {
        font-size: 10px;
    }
}
.t-meta-small,
.t-services-label,
.page--about .team .person__details-title {
    font-family: "Fakt Medium", Helvetica, Arial, sans-serif;
    font-size: 0.6vw;
    letter-spacing: 1.62px;
    line-height: 1.5;
    text-transform: uppercase;
}
@media only screen and (max-width: 786px) {
    .t-meta-small,
    .t-services-label,
    .page--about .team .person__details-title {
        font-size: 10px;
    }
}
.t-body-large {
    font-family: "Fakt Light", Helvetica, Arial, sans-serif;
    font-size: 2.1428571429rem;
    font-weight: 100;
    letter-spacing: -0.00835em;
    line-height: 1.4;
}
@media only screen and (max-width: 786px) {
    .t-body-large {
        font-size: 30px;
    }
}
.t-body-medium,
section.text.small .text__content {
    font-family: "Fakt Light", Helvetica, Arial, sans-serif;
    font-size: 1.4285714286rem;
    font-weight: 100;
    line-height: 1.5;
}
@media only screen and (max-width: 786px) {
    .t-body-medium,
    section.text.small .text__content {
        font-size: 20px;
    }
}
.t-body-small,
footer .footer__legal,
section.text.tiny .text__content,
.case-study.santatracker section.village .village__text,
.case-study.santatracker section.characters .characters__text,
.case-study.santatracker section.photogrid .photogrid__text .photogrid__text-inner {
    font-family: "Fakt Light", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.79;
}
@media only screen and (max-width: 786px) {
    .t-body-large,
    .t-body-medium,
    section.text.small .text__content,
    .t-body-small,
    footer .footer__legal,
    section.text.tiny .text__content,
    .case-study.santatracker section.village .village__text,
    .case-study.santatracker section.characters .characters__text,
    .case-study.santatracker section.photogrid .photogrid__text .photogrid__text-inner {
        font-size: 18px;
        letter-spacing: -0.1px;
        line-height: 28px;
    }
    .t-body-xlarge-xs {
        font-size: 25px;
        letter-spacing: -0.23px;
        line-height: 35px;
    }
    .t-body-medium-xs {
        font-size: 18px;
        letter-spacing: -0.1px;
        line-height: 28px;
    }
    .t-body-small-xs {
        font-size: 12px;
        line-height: 25px;
    }
}
.t-services-headline {
    font-family: "Superior Black", serif;
    font-size: 10px;
    letter-spacing: 1.64px;
    line-height: 32px;
    text-transform: uppercase;
}
.t-services-detail {
    font-family: "Fakt Light", Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 19px;
    margin: 4px 0 13px 0;
}
.t-services-label,
.page--about .team .person__details-title {
    font-size: 8px;
}
.t-color-grid-label {
    font-family: Futura-Medium;
    font-size: 12px;
    letter-spacing: 0.22px;
}
@media only screen and (max-width: 786px) {
    .t-color-grid-label {
        font-size: 11px;
        letter-spacing: 0.2px;
    }
}
a,
.t-anchor-reset {
    color: 	#696969;
    text-decoration: none;
}
.t-mobile-work-title {
    font-family: "Superior Black", serif;
    font-size: 134px;
    letter-spacing: -8.62px;
    line-height: 125.22px;
}
p {
    margin: 0;
}
.t-menu-link {
    font-family: "Superior Black", serif;
    font-size: 5.5rem;
    letter-spacing: 0.2px;
    line-height: 1;
}
@media only screen and (max-width: 786px) {
    .t-menu-link {
        font-size: 70px;
        letter-spacing: -0.95px;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .t-menu-link {
        font-size: 80px;
        font-size: 3.5rem;
        letter-spacing: -2px;
    }
}
.t-mobile-about-button {
    font-family: "Fakt Medium", Helvetica, Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 1.29px;
    text-transform: uppercase;
}
.t-mono {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.005em;
}
@media only screen and (max-width: 1168px) {
    .t-mono {
        font-size: 8px;
        line-height: 12px;
    }
}
@-webkit-keyframes cta-hover {
    0%,
    100% {
        transform: scale(1, 1) rotate(0deg) translateZ(0);
    }
    21% {
        transform: scale(1.76, 0.46) rotate(-9deg) translateZ(0);
    }
    50% {
        transform: scale(0.82, 1.21) rotate(13deg) translateZ(0);
    }
}
@keyframes cta-hover {
    0%,
    100% {
        transform: scale(1, 1) rotate(0deg) translateZ(0);
    }
    21% {
        transform: scale(1.76, 0.46) rotate(-9deg) translateZ(0);
    }
    50% {
        transform: scale(0.82, 1.21) rotate(13deg) translateZ(0);
    }
}
@-webkit-keyframes sprinkle-wiggle {
    0%,
    25%,
    50%,
    75%,
    100% {
        transform: none;
    }
    12.5% {
        transform: scale(1.07, 0.95) rotate(3deg) translate3d(2px, -2px, 0);
    }
    37.5% {
        transform: scale(0.97, 1.03) rotate(1deg) translate3d(-1px, 2px, 0);
    }
    62.5% {
        transform: scale(1.05, 0.98) rotate(4deg) translate3d(1px, 1px, 0);
    }
    87.5% {
        transform: scale(0.96, 1.04) rotate(5deg) translate3d(-2px, -1px, 0);
    }
}
@keyframes sprinkle-wiggle {
    0%,
    25%,
    50%,
    75%,
    100% {
        transform: none;
    }
    12.5% {
        transform: scale(1.07, 0.95) rotate(3deg) translate3d(2px, -2px, 0);
    }
    37.5% {
        transform: scale(0.97, 1.03) rotate(1deg) translate3d(-1px, 2px, 0);
    }
    62.5% {
        transform: scale(1.05, 0.98) rotate(4deg) translate3d(1px, 1px, 0);
    }
    87.5% {
        transform: scale(0.96, 1.04) rotate(5deg) translate3d(-2px, -1px, 0);
    }
}
@-webkit-keyframes blobby-wiggle {
    0%,
    25%,
    50%,
    75%,
    100% {
        transform: none;
    }
    12.5% {
        transform: scale(1.02, 0.98) rotate(2deg) translate3d(2px, -2px, 0);
    }
    37.5% {
        transform: scale(0.995, 1.01) rotate(1deg) translate3d(-1px, 2px, 0);
    }
    62.5% {
        transform: scale(1.01, 0.99) rotate(3deg) translate3d(1px, 1px, 0);
    }
    87.5% {
        transform: scale(0.99, 1.02) rotate(4deg) translate3d(-2px, -1px, 0);
    }
}
@keyframes blobby-wiggle {
    0%,
    25%,
    50%,
    75%,
    100% {
        transform: none;
    }
    12.5% {
        transform: scale(1.02, 0.98) rotate(2deg) translate3d(2px, -2px, 0);
    }
    37.5% {
        transform: scale(0.995, 1.01) rotate(1deg) translate3d(-1px, 2px, 0);
    }
    62.5% {
        transform: scale(1.01, 0.99) rotate(3deg) translate3d(1px, 1px, 0);
    }
    87.5% {
        transform: scale(0.99, 1.02) rotate(4deg) translate3d(-2px, -1px, 0);
    }
}
@-webkit-keyframes transition-expand {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: perspective(100px) translate3d(0, 0, 99px) rotate(-180deg);
    }
}
@keyframes transition-expand {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: perspective(100px) translate3d(0, 0, 99px) rotate(-180deg);
    }
}
@-webkit-keyframes transition-expand-sml {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translate3d(0, 0, 99px) rotate(-270deg);
    }
}
@keyframes transition-expand-sml {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translate3d(0, 0, 99px) rotate(-270deg);
    }
}
@-webkit-keyframes project-hover {
    0% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    }
    16% {
        transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
    }
    100% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
    }
}
@keyframes project-hover {
    0% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    }
    16% {
        transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
    }
    100% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
    }
}
@-webkit-keyframes play-button {
    from {
        transform: scale(1) translate(-50%, -50%, 0);
    }
    to {
        transform: scale(1.1) translate(-50%, -50%, 0);
    }
}
@keyframes play-button {
    from {
        transform: scale(1) translate(-50%, -50%, 0);
    }
    to {
        transform: scale(1.1) translate(-50%, -50%, 0);
    }
}
footer .footer__shape,
footer.next-up .footer__message-cta svg,
.hero__link-item-decorator img,
.hero__service-name-decorator,
.requirements__label-decorator img,
.scroll-arrow__shape img,
section.text .text__label-text .text__decorator img,
.page--about .intro__ending-decorator img,
.page--about .capabilities__label-decorator img,
.page--careers .summary__bio-name::before,
.page--careers .summary__ethos-label::before,
.page--careers .perks__label-text::before,
.page--careers .positions__label-text::before,
.page--home .hero__cta img,
.page--home .project .project__cta img,
.page--home .office .office__cta img {
    -webkit-animation: sprinkle-wiggle 5s ease-in-out infinite;
    animation: sprinkle-wiggle 5s ease-in-out infinite;
}
.page--about .team .person:nth-child(6n + 5) .person__shapes .person__shape--2,
.page--about .team .person:nth-child(6n + 1) .person__shapes .person__shape--1,
.page--about .team .person:nth-child(6n) .person__shapes .person__shape--1,
.page--about .team .person:nth-child(6n + 2) .person__shapes .person__shape--2,
.page--about .team .person:nth-child(6n + 3) .person__shapes .person__shape--1,
.page--about .team .person:nth-child(6n + 4) .person__shapes .person__shape--1,
.menu .menu__link:hover .menu__link-bloob canvas,
.menu .menu__link .transition.is-expanded .menu__link-bloob canvas,
.page--about .what__intro-blobby canvas,
.page--about .team__intro-blobby canvas,
.page--careers .photos__title-blobby canvas,
.page--careers .positions__title-blobby canvas,
.page--home .project .project__inner.is-active .project__details-bg,
.page--job section.hero .hero__blobby canvas,
.page--job section.apply .apply__blobby canvas {
    -webkit-animation: blobby-wiggle 8s ease-in-out infinite;
    animation: blobby-wiggle 8s ease-in-out infinite;
}
.cta-hovered canvas,
.cta-hovered img,
.cta-hovered svg {
    -webkit-animation: cta-hover 0.4s ease-in-out 0s normal !important;
    animation: cta-hover 0.4s ease-in-out 0s normal !important;
}
.line--horizontal-sm {
    width: 15px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: inline-block;
    height: 1px;
}
@media only screen and (max-width: 1500px) {
    .line--horizontal-sm {
        width: calc(-1.512605042px + 2.1008403361vw);
    }
}
@media only screen and (min-width: 1500px) {
    .line--horizontal-sm {
        width: 30px;
    }
}
.line--horizontal-md,
.page--home .project.amp .project__client::before,
.page--home .project.dschool .project__client::before,
.page--home .project.lightstep .project__client::before,
.page--home .project.sandhillcollection .project__client::before,
.page--home .project.spaces .project__client::before,
.page--home .project.tiltbrush .project__client::before {
    width: 100px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: inline-block;
    height: 1px;
}
@media only screen and (max-width: 1500px) {
    .line--horizontal-md,
    .page--home .project.amp .project__client::before,
    .page--home .project.dschool .project__client::before,
    .page--home .project.lightstep .project__client::before,
    .page--home .project.sandhillcollection .project__client::before,
    .page--home .project.spaces .project__client::before,
    .page--home .project.tiltbrush .project__client::before {
        width: calc(-10.0840336134px + 14.0056022409vw);
    }
}
@media only screen and (min-width: 1500px) {
    .line--horizontal-md,
    .page--home .project.amp .project__client::before,
    .page--home .project.dschool .project__client::before,
    .page--home .project.lightstep .project__client::before,
    .page--home .project.sandhillcollection .project__client::before,
    .page--home .project.spaces .project__client::before,
    .page--home .project.tiltbrush .project__client::before {
        width: 200px;
    }
}
.line--horizontal-lg,
.page--home .project.affirm .project__client::before {
    width: 200px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: inline-block;
    height: 1px;
}
@media only screen and (max-width: 1500px) {
    .line--horizontal-lg,
    .page--home .project.affirm .project__client::before {
        width: calc(-20.1680672269px + 28.0112044818vw);
    }
}
@media only screen and (min-width: 1500px) {
    .line--horizontal-lg,
    .page--home .project.affirm .project__client::before {
        width: 400px;
    }
}
.line--horizontal-custom,
.menu .menu__link-upper::after,
.requirements__label-inner::before,
section.text .text__label-inner::before,
.page--careers .summary__ethos-label::after,
.page--careers .summary__ethos-graphic::before,
.page--home .project.valencia .project__client::before,
.page--home .project.android-wear .project__client::before,
.page--home .project.athome .project__client::before,
.page--home .project.blue-heart .project__client::before,
.page--home .project.chromebooks .project__client::before,
.page--home .project.famsf .project__client::before,
.page--home .project.git-merge .project__client::before,
.page--home .project.jigsaw .project__client::before,
.page--home .project.le-tote .project__client::before,
.case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .text__label-inner::after,
.page--home .project.wethepower .project__client::before,
.page--home .project.wisesystems .project__client::before,
.page--home .project.youtubee3 .project__client::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: inline-block;
    height: 1px;
}
.line--vertical-sm {
    height: 15px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: block;
    margin: 0 auto;
    width: 1px;
}
@media only screen and (max-width: 1500px) {
    .line--vertical-sm {
        height: calc(-1.512605042px + 2.1008403361vw);
    }
}
@media only screen and (min-width: 1500px) {
    .line--vertical-sm {
        height: 30px;
    }
}
.line--vertical-md {
    height: 100px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: block;
    margin: 0 auto;
    width: 1px;
}
@media only screen and (max-width: 1500px) {
    .line--vertical-md {
        height: calc(-10.0840336134px + 14.0056022409vw);
    }
}
@media only screen and (min-width: 1500px) {
    .line--vertical-md {
        height: 200px;
    }
}
.line--vertical-lg {
    height: 200px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: block;
    margin: 0 auto;
    width: 1px;
}
@media only screen and (max-width: 1500px) {
    .line--vertical-lg {
        height: calc(-20.1680672269px + 28.0112044818vw);
    }
}
@media only screen and (min-width: 1500px) {
    .line--vertical-lg {
        height: 400px;
    }
}
.line--vertical-custom,
.page--home .hero__work-selected::before,
.page--home .hero__work-selected::after,
.page--home .project.bears-ears .project__client::before,
.page--home .project.santatracker .project__client::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #000;
    display: block;
    margin: 0 auto;
    width: 1px;
}
.page--about .team .team__people {
    height: 60vh;
    margin-top: -2.5%;
    max-height: 35vw;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    transform: translateX(10%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    width: 100%;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .page--about .team .team__people {
        max-height: 500px;
    }
}
.page--about .team .team__people.is-active {
    opacity: 1;
    transform: translateX(0);
}
.page--about .team .team__people-container {
    cursor: -webkit-grab;
    cursor: grab;
    display: flex;
    height: 100%;
    padding: 0 32.5vw;
    width: 100%;
}
.page--about .team .team__people-container.is-dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
@media only screen and (max-width: 786px) {
    .page--about .team .team__people-container {
        padding: 0 7.5vw;
    }
}
.page--about .team .person {
    flex: 0 0 35vw;
    height: 100%;
    max-width: 700px;
    position: relative;
}
.page--about .team .person.is-active .person__portrait {
    opacity: 1;
}
.page--about .team .person.is-centered .person__details,
.page--about .team .person.is-centered .person__shapes {
    opacity: 1;
    transform: none;
    transition-delay: 1s;
}
@media only screen and (max-width: 786px) {
    .page--about .team .person.is-centered .person__shapes {
        transform: translate(-50%, -50%) scale(1);
    }
}
@media only screen and (max-width: 786px) {
    .page--about .team .person {
        flex: 0 0 85vw;
        max-width: 85vw;
    }
}
@media only screen and (min-width: 787px) {
    .page--about .team .person.is-active .person__portrait {
        transition-delay: 0.2s;
    }
    .page--about .team .person:nth-child(2n) .person__details {
        top: 65%;
    }
}
.page--about .team .person__details,
.page--about .team .person__shapes {
    transition: opacity 0.5s cubic-bezier(0.12, 0.475, 0, 0.995), transform 0.5s cubic-bezier(0.12, 0.475, 0, 0.995);
}
@media only screen and (max-width: 786px) {
    .page--about .team .person__details,
    .page--about .team .person__shapes {
        transition-duration: 0.3s;
    }
}
.page--about .team .person__details {
    opacity: 0;
    position: absolute;
    right: 82%;
    text-align: right;
    top: 35%;
    transform: translateX(50px);
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .page--about .team .person__details {
        max-width: 80px;
        right: 77%;
        top: 26%;
    }
}
.page--about .team .person__details-name {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
@media only screen and (max-width: 786px) {
    .page--about .team .person__details-name {
        font-size: 9px;
    }
}
.page--about .team .person__details-title {
    line-height: 1.1;
}
.page--about .team .person__portrait {
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: opacity 0.6s ease-in;
    width: 100%;
    z-index: 3;
}
@media only screen and (max-width: 786px) {
    .page--about .team .person__portrait {
        min-width: 35vw;
    }
}
.page--about .team .person__portrait img {
    height: 100%;
    max-height: 60vh;
    position: relative;
    width: auto;
    z-index: 2;
}
.page--about .team .person__shapes {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(0.5);
    width: 100%;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .page--about .team .person__shapes {
        height: 100%;
        left: 50%;
        max-width: 500px;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        width: 60vh;
    }
}
.page--about .team .person__shapes .person__shape {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.page--about .team .person__shapes .person__shape::before {
    background: center / contain no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: transform 1s 0s cubic-bezier(0.12, 0.475, 0, 0.995), opacity 1s 0s cubic-bezier(0.12, 0.475, 0, 0.995);
    width: 100%;
}
.page--about .team .person:nth-child(6n + 5) .person__shapes .person__shape--1::before {
    background-image: url(../assets/about/people-shape6.svg);
    height: 50%;
    transform: translate(-89%, -43%);
    width: 30%;
}
.page--about .team .person:nth-child(6n + 5) .person__shapes .person__shape--2 {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.page--about .team .person:nth-child(6n + 5) .person__shapes .person__shape--2::before {
    background-image: url(../assets/about/people-shape4.svg);
    height: 63%;
    transform: translate(-46%, 6%);
}
.page--about .team .person:nth-child(6n + 5).is-centered:hover .person__shapes .person__shape--1::before {
    transform: translate(-91%, -45%);
}
.page--about .team .person:nth-child(6n + 5).is-centered:hover .person__shapes .person__shape--2 {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.page--about .team .person:nth-child(6n + 5).is-centered:hover .person__shapes .person__shape--2::before {
    transform: translate(-44%, 8%);
}
.page--about .team .person:nth-child(6n + 1) .person__shapes .person__shape--1 {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.page--about .team .person:nth-child(6n + 1) .person__shapes .person__shape--1::before {
    background-image: url(../assets/about/people-shape2.svg);
    transform: translate(-57%, -46%);
    width: 46%;
}
.page--about .team .person:nth-child(6n + 1) .person__shapes .person__shape--2::before {
    background-image: url(../assets/about/people-shape3.svg);
    transform: translate(-24%, -39%);
    width: 30%;
}
.page--about .team .person:nth-child(6n + 1).is-centered:hover .person__shapes .person__shape--1 {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.page--about .team .person:nth-child(6n + 1).is-centered:hover .person__shapes .person__shape--1::before {
    transform: translate(-59%, -48%);
}
.page--about .team .person:nth-child(6n + 1).is-centered:hover .person__shapes .person__shape--2::before {
    transform: translate(-22%, -37%);
}
.page--about .team .person:nth-child(6n) .person__shapes .person__shape--1 {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.page--about .team .person:nth-child(6n) .person__shapes .person__shape--1::before {
    background-image: url(../assets/about/people-shape5.svg);
    transform: translate(-62%, -46%);
    width: 47%;
}
.page--about .team .person:nth-child(6n) .person__shapes .person__shape--2::before {
    background-image: url(../assets/about/people-shape1.svg);
    transform: translate(29%, -25%);
    width: 22%;
}
.page--about .team .person:nth-child(6n).is-centered:hover .person__shapes .person__shape--1 {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.page--about .team .person:nth-child(6n).is-centered:hover .person__shapes .person__shape--1::before {
    transform: translate(-64%, -48%);
}
.page--about .team .person:nth-child(6n).is-centered:hover .person__shapes .person__shape--2::before {
    transform: translate(31%, -23%);
}
.page--about .team .person:nth-child(6n + 2) .person__shapes .person__shape--1::before {
    background-image: url(../assets/about/people-shape7.svg);
    transform: translate(-62%, -54%);
    width: 33%;
}
.page--about .team .person:nth-child(6n + 2) .person__shapes .person__shape--2 {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.page--about .team .person:nth-child(6n + 2) .person__shapes .person__shape--2::before {
    background-image: url(../assets/about/people-shape8.svg);
    transform: scaleX(-1) translate(50%, -21%);
    width: 57%;
}
.page--about .team .person:nth-child(6n + 2).is-centered:hover .person__shapes .person__shape--1::before {
    transform: translate(-64%, -56%);
}
.page--about .team .person:nth-child(6n + 2).is-centered:hover .person__shapes .person__shape--2 {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.page--about .team .person:nth-child(6n + 2).is-centered:hover .person__shapes .person__shape--2::before {
    transform: scaleX(-1) translate(48%, -19%);
}
.page--about .team .person:nth-child(6n + 3) .person__shapes .person__shape--1 {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.page--about .team .person:nth-child(6n + 3) .person__shapes .person__shape--1::before {
    background-image: url(../assets/about/people-shape10.svg);
    transform: translate(53%, -49%);
    width: 19%;
}
.page--about .team .person:nth-child(6n + 3) .person__shapes .person__shape--2::before {
    background-image: url(../assets/about/people-shape9.svg);
    transform: translate(-58%, -32%) rotate(-20deg);
    width: 47%;
}
.page--about .team .person:nth-child(6n + 3).is-centered:hover .person__shapes .person__shape--1 {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.page--about .team .person:nth-child(6n + 3).is-centered:hover .person__shapes .person__shape--1::before {
    transform: translate(55%, -51%);
}
.page--about .team .person:nth-child(6n + 3).is-centered:hover .person__shapes .person__shape--2::before {
    transform: translate(-60%, -30%) rotate(-20deg);
}
.page--about .team .person:nth-child(6n + 4) .person__shapes .person__shape--1 {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.page--about .team .person:nth-child(6n + 4) .person__shapes .person__shape--1::before {
    background-image: url(../assets/about/people-shape12.svg);
    transform: translate(-51%, -26%) scale(-1, -1);
    width: 53%;
}
.page--about .team .person:nth-child(6n + 4) .person__shapes .person__shape--2::before {
    background-image: url(../assets/about/people-shape11.svg);
    transform: translate(38%, -40%);
    width: 20%;
}
.page--about .team .person:nth-child(6n + 4).is-centered:hover .person__shapes .person__shape--1 {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.page--about .team .person:nth-child(6n + 4).is-centered:hover .person__shapes .person__shape--1::before {
    transform: translate(-53%, -24%) scale(-1, -1);
}
.page--about .team .person:nth-child(6n + 4).is-centered:hover .person__shapes .person__shape--2::before {
    transform: translate(40%, -42%);
}
.animated-image {
    position: relative;
    width: 100%;
}
.animated-image.browser .animated-image__inner::before {
    background: url("../assets/browser-top-light.png") center bottom/contain no-repeat;
    content: "";
    left: 0;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .animated-image.browser .animated-image__inner::before {
        transform: translateY(1%);
    }
}
.case-study.is-dark .animated-image.browser .animated-image__inner::before,
.animated-image.is-dark.browser .animated-image__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.is-dark .animated-image.browser .animated-image__inner::before,
    .animated-image.is-dark.browser .animated-image__inner::before {
        transform: translateY(1%);
    }
}
.case-study.is-black .animated-image.browser .animated-image__inner::before,
.animated-image.is-black.browser .animated-image__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.is-black .animated-image.browser .animated-image__inner::before,
    .animated-image.is-black.browser .animated-image__inner::before {
        transform: translateY(1%);
    }
}
.animated-image .animated-image__inner {
    position: relative;
}
.animated-image .animated-image__inner::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark .animated-image .animated-image__inner::after {
    background: #1a1919;
}
body.is-black .animated-image .animated-image__inner::after {
    background: #000;
}
.animated-image.is-dark .animated-image__inner::after {
    background: #1a1919;
}
.animated-image.is-black .animated-image__inner::after {
    background: #000;
}
.animated-image .shadow {
    transition-duration: 0.6s;
}
.animated-image img {
    display: block;
    width: 100%;
}
.animated-image:not(.is-active):not(.no-fade) .shadow {
    box-shadow: none;
}
.animated-image.is-active .animated-image__inner::after {
    opacity: 0;
}
.animated-image--raised .animated-image__inner {
    transition: transform 0.6s;
    transform: scale(0.98);
}
.animated-image--raised.is-active .animated-image__inner {
    transform: scale(1);
}
.animated-image.no-overlay {
    opacity: 0.2;
    transition: opacity 0.6s;
}
.animated-image.no-overlay.is-active {
    opacity: 1;
}
.animated-image.no-overlay .animated-image__inner::after {
    display: none;
}
.animated-image.no-fade {
    opacity: 1;
}
.animated-image.no-fade .animated-image__inner::after {
    display: none;
}
.color-grid {
    margin-bottom: 7vw;
    padding: 5vw 0;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .color-grid .color-grid__grid {
        -webkit-overflow-scrolling: touch;
        overflow-x: scroll;
    }
}
.color-grid .color-grid__colors {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 786px) {
    .color-grid .color-grid__colors {
        justify-content: flex-start;
    }
}
.color-grid .color-grid__colors-col {
    position: relative;
}
.color-grid .color-grid__colors-col:nth-child(2) {
    top: -5vw;
}
.color-grid .color-grid__colors-col:nth-child(3) {
    top: 5vw;
}
@media only screen and (max-width: 786px) {
    .color-grid .color-grid__colors-col {
        display: inline-flex;
        top: 0 !important;
        transform: none !important;
    }
    .color-grid .color-grid__colors-col:first-child {
        margin-left: 6.25vw;
    }
    .color-grid .color-grid__colors-col:last-child {
        margin-right: 6.25vw;
    }
}
.color-grid .color-grid__color {
    display: flex;
    flex-direction: column;
    height: 25vw;
    justify-content: flex-end;
    margin-bottom: 30px;
    width: 20vw;
}
@media only screen and (max-width: 786px) {
    .color-grid .color-grid__color {
        height: 50vw;
        margin-bottom: 0;
        margin-left: 2.0833333333vw;
        margin-right: 2.0833333333vw;
        width: 40vw;
    }
}
.color-grid .color-grid__color-name {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    flex: 0 0 23%;
    justify-content: center;
}
.color-grid .color-grid__color-name-inner {
    color: #fff;
}
section.text + .color-grid {
    margin-top: 8.3333333333vw;
}
.color-grid .scroll-arrow.top {
    bottom: 88%;
}
footer {
    background: #1f1d1d;
    color: #fff;
    overflow: hidden;
    padding: 50px 0;
    position: relative;
    z-index: 3;
}
@media only screen and (max-width: 1168px) {
    footer {
        padding: 50px 0 30px;
        z-index: 2;
    }
}
@media only screen and (max-width: 786px) {
    footer {
        z-index: 1;
    }
}
footer .z {
    position: relative;
    z-index: 3;
}
@media only screen and (max-width: 1168px) {
    footer .z {
        z-index: 2;
    }
}
@media only screen and (max-width: 786px) {
    footer .z {
        z-index: 1;
    }
}
footer .footer__message {
    color: #000;
    position: relative;
    z-index: 2;
}
footer .footer__message p:nth-child(2) {
    margin-top: 1em;
}
footer .footer__contact .footer__title {
    margin: 10px 0;
    position: relative;
}
footer .footer__contact a {
    color: white;
}
footer .footer__contact p {
    margin: 0;
}
footer .footer__contact.is-active .footer__contact-inner::before {
    transform: scale(1);
}
footer .footer__contact-inner::before {
    background: #fff;
    content: "";
    height: 1px;
    position: absolute;
    transform: scale(0);
    transform-origin: center right;
    transition: transform 0.6s;
    width: 100%;
}
footer .footer__contact-sections {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    position: relative;
}
footer .footer__contact-sections .footer__contact-section {
    flex: 1 0 auto;
}
footer .footer__contact-sections .footer__contact-section p + .space-above {
    padding-top: 15px;
}
footer .footer__legal-wrap {
    pointer-events: none;
}
@media only screen and (min-width: 787px) {
    footer .footer__legal-wrap {
        bottom: 15px;
        left: 0;
        position: absolute;
        right: 0;
    }
}
footer .footer__legal {
    font-size: 0.7rem;
    line-height: 25px;
    padding-right: 20px;
}
@media only screen and (min-width: 787px) {
    footer .footer__legal {
        text-align: right;
        width: 100%;
    }
}
@media only screen and (max-width: 786px) {
    footer .footer__legal {
        font-size: 12px;
        line-height: 25px;
        margin-top: 30px;
    }
}
footer .footer__legal span {
    padding: 0 5px;
}
footer .footer__legal a {
    color: white;
    pointer-events: auto;
}
footer .footer__shape {
    left: -2%;
    position: absolute;
    top: 3%;
}
footer .footer__image {
    align-items: flex-end;
    bottom: 0;
    display: flex;
    left: 0;
    max-height: 80vh;
    min-height: 80vh;
    position: absolute;
    top: 40%;
    right: 0;
}
@media only screen and (max-width: 786px) {
    footer .footer__image {
        width: 100%;
    }
}
footer .footer__image .footer__image-inner {
    align-items: flex-end;
    background-color: #edf0f0;
    display: flex;
    height: 100%;
    position: relative;
    transform: translateY(100%) translateZ(0);
    transition: transform 0.6s cubic-bezier(0.12, 0.475, 0, 0.995) 0.6s;
}
footer .footer__image .footer__image-inner::after {
    background: rgba(255, 255, 255, 0.5);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
footer .footer__image .footer__image-inner::before {
    background: #edf0f0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(1) translateZ(0);
    transform-origin: top center;
    transition: transform 0.6s cubic-bezier(0.12, 0.475, 0, 0.995);
    z-index: 1;
}
footer .footer__image .footer__image-inner div {
    background-position: top;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}
footer .footer__message-inner h3 {
    position: relative;
    z-index: 1;
}
footer.next-up {
    background: #fff;
    color: #000;
    min-height: 10vh;
}
body.has-transition footer.next-up {
    z-index: auto;
}
@media only screen and (max-width: 786px) {
    footer.next-up {
        min-height: initial;
        padding-top: 0vh;
    }
}
footer.next-up a {
    color: #000;
}
footer.next-up h1 {
    margin: 200px 0 0;
    opacity: 0;
    transform: translateX(-100px) translateZ(0);
    transition: all 0.5s ease-in-out 0.4s;
}
@media only screen and (max-width: 786px) {
    footer.next-up h1 {
        margin: 5vh 0 50vh;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    footer.next-up h1 {
        margin: 5vh 0;
    }
}
footer.next-up h3 {
    left: 5vw;
    margin: 2em 0 -0.5em;
    opacity: 0;
    transform: translateX(-100px) translateZ(0);
    transition: all 0.5s ease-in-out 0.5s;
}
footer.next-up .footer__contact {
    bottom: 50px;
    position: absolute;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    footer.next-up .footer__contact {
        bottom: initial;
        position: relative;
        width: auto;
    }
}
footer.next-up .footer__contact-inner::before {
    background: #000;
}
footer.next-up .footer__message {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
@media only screen and (max-width: 786px) {
    footer.next-up .footer__message {
        top: 10vh;
        transform: initial;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    footer.next-up .footer__message {
        top: 50vh;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    footer.next-up .footer__message-inner {
        transform: scale(1.2);
        transform-origin: 0;
    }
}
footer.next-up .footer__message-cta {
    display: inline-block;
    height: 138px;
    left: 8vw;
    opacity: 0;
    position: relative;
    transition: opacity 0.4s ease-in-out 0.6s;
    width: 80px;
}
footer.next-up .footer__message-cta svg {
    fill: #edf0f0;
    height: 95%;
    position: absolute;
    width: 100%;
}
footer.next-up .footer__message-cta-text {
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: center;
    min-width: 100%;
    position: relative;
    text-align: center;
    transform: translateZ(100px);
    width: 100%;
    z-index: 2;
}
footer.next-up .footer__image {
    top: 30vh;
}
@media only screen and (max-width: 786px) {
    footer.next-up .footer__image {
        top: 20vh;
    }
}
footer.next-up.is-active h1,
footer.next-up.is-active h3 {
    opacity: 1;
    transform: translateX(0) translateZ(100px);
}
footer.next-up.is-active .footer__message-cta {
    opacity: 1;
}
footer.is-light {
    background: none;
    color: black;
}
footer.is-light a {
    color: black;
}
footer.is-light h1 {
    color: #f7f7f6;
}
footer.is-light h1 span {
    display: block;
}
footer.is-light .footer__contact-inner::before {
    background: #000;
}
footer.is-light .footer__legal a {
    color: black;
}
footer.is-active .footer__image-inner {
    transform: translateY(0%) translateZ(0);
    transition: transform 0.6s cubic-bezier(0.12, 0.475, 0, 0.995);
}
footer.is-active .footer__image-inner::before {
    transform: scaleY(0) translateZ(0);
    transition: transform 0.6s cubic-bezier(0.12, 0.475, 0, 0.995) 0.6s;
}
@media only screen and (max-width: 786px) {
    footer .footer__contact-sections {
        flex-direction: column;
    }
    footer .footer__contact-section .footer__title {
        margin-bottom: 20px;
    }
    footer .footer__contact-section:not(:first-child) {
        margin-top: 30px;
    }
}
@media only screen and (max-width: 370px) {
    footer .footer__contact-section:first-child p {
        font-size: 18px;
        line-height: 28px;
        margin-left: 0;
    }
}
header {
    position: fixed;
    top: 25px;
    width: 100%;
    z-index: 10;
}
@media only screen and (max-width: 786px) {
    header {
        pointer-events: none;
        top: 15px;
        z-index: 14;
    }
    header .header__logo,
    header .header__logotype a {
        pointer-events: auto;
    }
}
header .header__logotype {
    opacity: 0;
    padding-left: 5px;
    text-align: left;
    transform: translateX(-50px);
}
header .header__logotype .line--horizontal-custom,
header .header__logotype .menu .menu__link-upper::after,
.menu header .header__logotype .menu__link-upper::after,
header .header__logotype .requirements__label-inner::before,
header .header__logotype section.text .text__label-inner::before,
section.text header .header__logotype .text__label-inner::before,
header .header__logotype .page--careers .summary__ethos-label::after,
.page--careers header .header__logotype .summary__ethos-label::after,
header .header__logotype .page--careers .summary__ethos-graphic::before,
.page--careers header .header__logotype .summary__ethos-graphic::before,
header .header__logotype .page--home .project.valencia .project__client::before,
.page--home .project.valencia header .header__logotype .project__client::before,
header .header__logotype .page--home .project.android-wear .project__client::before,
.page--home .project.android-wear header .header__logotype .project__client::before,
header .header__logotype .page--home .project.athome .project__client::before,
.page--home .project.athome header .header__logotype .project__client::before,
header .header__logotype .page--home .project.blue-heart .project__client::before,
.page--home .project.blue-heart header .header__logotype .project__client::before,
header .header__logotype .page--home .project.chromebooks .project__client::before,
.page--home .project.chromebooks header .header__logotype .project__client::before,
header .header__logotype .page--home .project.famsf .project__client::before,
.page--home .project.famsf header .header__logotype .project__client::before,
header .header__logotype .page--home .project.git-merge .project__client::before,
.page--home .project.git-merge header .header__logotype .project__client::before,
header .header__logotype .page--home .project.jigsaw .project__client::before,
.page--home .project.jigsaw header .header__logotype .project__client::before,
header .header__logotype .page--home .project.le-tote .project__client::before,
.page--home .project.le-tote header .header__logotype .project__client::before,
header .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text header .header__logotype .text__label-inner::after,
header .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text header .header__logotype .text__label-inner::after,
header .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small header .header__logotype .text__label-inner::after,
header .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text header .header__logotype .text__label-inner::after,
header .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text header .header__logotype .text__label-inner::after,
header .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text header .header__logotype .text__label-inner::after,
header .header__logotype .page--home .project.wethepower .project__client::before,
.page--home .project.wethepower header .header__logotype .project__client::before,
header .header__logotype .page--home .project.wisesystems .project__client::before,
.page--home .project.wisesystems header .header__logotype .project__client::before,
header .header__logotype .page--home .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 header .header__logotype .project__client::before {
    width: 20px;
    margin-right: 7px;
    position: relative;
    top: -5px;
}
@media only screen and (max-width: 786px) {
    header .header__logotype .line--horizontal-custom,
    header .header__logotype .menu .menu__link-upper::after,
    .menu header .header__logotype .menu__link-upper::after,
    header .header__logotype .requirements__label-inner::before,
    header .header__logotype section.text .text__label-inner::before,
    section.text header .header__logotype .text__label-inner::before,
    header .header__logotype .page--careers .summary__ethos-label::after,
    .page--careers header .header__logotype .summary__ethos-label::after,
    header .header__logotype .page--careers .summary__ethos-graphic::before,
    .page--careers header .header__logotype .summary__ethos-graphic::before,
    header .header__logotype .page--home .project.valencia .project__client::before,
    .page--home .project.valencia header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.android-wear .project__client::before,
    .page--home .project.android-wear header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.athome .project__client::before,
    .page--home .project.athome header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.blue-heart .project__client::before,
    .page--home .project.blue-heart header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.chromebooks .project__client::before,
    .page--home .project.chromebooks header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.famsf .project__client::before,
    .page--home .project.famsf header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.git-merge .project__client::before,
    .page--home .project.git-merge header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.jigsaw .project__client::before,
    .page--home .project.jigsaw header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.le-tote .project__client::before,
    .page--home .project.le-tote header .header__logotype .project__client::before,
    header .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text header .header__logotype .text__label-inner::after,
    header .header__logotype .page--home .project.wethepower .project__client::before,
    .page--home .project.wethepower header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.wisesystems .project__client::before,
    .page--home .project.wisesystems header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 header .header__logotype .project__client::before {
        width: calc(6.3481228669px + 6.8259385666vw);
    }
}
@media only screen and (min-width: 786px) {
    header .header__logotype .line--horizontal-custom,
    header .header__logotype .menu .menu__link-upper::after,
    .menu header .header__logotype .menu__link-upper::after,
    header .header__logotype .requirements__label-inner::before,
    header .header__logotype section.text .text__label-inner::before,
    section.text header .header__logotype .text__label-inner::before,
    header .header__logotype .page--careers .summary__ethos-label::after,
    .page--careers header .header__logotype .summary__ethos-label::after,
    header .header__logotype .page--careers .summary__ethos-graphic::before,
    .page--careers header .header__logotype .summary__ethos-graphic::before,
    header .header__logotype .page--home .project.valencia .project__client::before,
    .page--home .project.valencia header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.android-wear .project__client::before,
    .page--home .project.android-wear header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.athome .project__client::before,
    .page--home .project.athome header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.blue-heart .project__client::before,
    .page--home .project.blue-heart header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.chromebooks .project__client::before,
    .page--home .project.chromebooks header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.famsf .project__client::before,
    .page--home .project.famsf header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.git-merge .project__client::before,
    .page--home .project.git-merge header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.jigsaw .project__client::before,
    .page--home .project.jigsaw header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.le-tote .project__client::before,
    .page--home .project.le-tote header .header__logotype .project__client::before,
    header .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text header .header__logotype .text__label-inner::after,
    header .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text header .header__logotype .text__label-inner::after,
    header .header__logotype .page--home .project.wethepower .project__client::before,
    .page--home .project.wethepower header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.wisesystems .project__client::before,
    .page--home .project.wisesystems header .header__logotype .project__client::before,
    header .header__logotype .page--home .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 header .header__logotype .project__client::before {
        width: 60px;
    }
}
body.theme--dark header .header__logotype .line--horizontal-custom,
body.theme--dark header .header__logotype .menu .menu__link-upper::after,
.menu body.theme--dark header .header__logotype .menu__link-upper::after,
body.theme--dark header .header__logotype .requirements__label-inner::before,
body.theme--dark header .header__logotype section.text .text__label-inner::before,
section.text body.theme--dark header .header__logotype .text__label-inner::before,
body.theme--dark header .header__logotype .page--careers .summary__ethos-label::after,
.page--careers body.theme--dark header .header__logotype .summary__ethos-label::after,
body.theme--dark header .header__logotype .page--careers .summary__ethos-graphic::before,
.page--careers body.theme--dark header .header__logotype .summary__ethos-graphic::before,
body.theme--dark header .header__logotype .page--home .project.valencia .project__client::before,
.page--home .project.valencia body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.android-wear .project__client::before,
.page--home .project.android-wear body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.athome .project__client::before,
.page--home .project.athome body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.blue-heart .project__client::before,
.page--home .project.blue-heart body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.chromebooks .project__client::before,
.page--home .project.chromebooks body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.famsf .project__client::before,
.page--home .project.famsf body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.git-merge .project__client::before,
.page--home .project.git-merge body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.jigsaw .project__client::before,
.page--home .project.jigsaw body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.le-tote .project__client::before,
.page--home .project.le-tote body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text body.theme--dark header .header__logotype .text__label-inner::after,
body.theme--dark header .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text body.theme--dark header .header__logotype .text__label-inner::after,
body.theme--dark header .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small body.theme--dark header .header__logotype .text__label-inner::after,
body.theme--dark header .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text body.theme--dark header .header__logotype .text__label-inner::after,
body.theme--dark header .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text body.theme--dark header .header__logotype .text__label-inner::after,
body.theme--dark header .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text body.theme--dark header .header__logotype .text__label-inner::after,
body.theme--dark header .header__logotype .page--home .project.wethepower .project__client::before,
.page--home .project.wethepower body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.wisesystems .project__client::before,
.page--home .project.wisesystems body.theme--dark header .header__logotype .project__client::before,
body.theme--dark header .header__logotype .page--home .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 body.theme--dark header .header__logotype .project__client::before {
    background-color: #fff;
}
header .header__logotype-inner {
    background: url("../assets/upperquad-logotype-mobile.svg") center/cover no-repeat;
    display: inline-block;
    height: 12px;
    position: relative;
    width: 120px;
}
body.theme--dark header .header__logotype-inner {
    background-image: url("../assets/upperquad-logotype-mobile-white.svg");
}
body.theme--black header .header__logotype-inner {
    background-image: url("../assets/upperquad-logotype-mobile-white.svg");
}
header .header__logotype-inner::after {
    background: url("../assets/upperquad-logotype-mobile-white.svg") center/cover no-repeat;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
header .header__logo-inner {
    background: url("../assets/axera-logo-black-large.svg") center/contain no-repeat;
    height: 50px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    width: 50px;
}
body.theme--dark header .header__logo-inner {
    background-image: url("../assets/axera-logo-black-large.svg");
}
body.theme--black header .header__logo-inner {
    background-image: url("../assets/axera-logo-black-large.svg");
}
body.menu-active header .header__logo-inner {
    background-image: url("../assets/axera-logo-black-large.svg");
}
header .header__logo-inner::after {
    background: url("../assets/axera-logo-black-large.svg") center/cover no-repeat;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
header .header__logo {
    transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 786px) {
    header .header__logo {
        left: 0;
        position: absolute;
        top: 10px;
    }
}
header .header__open {
    align-items: flex-start;
    text-align: center;
}
header .header__open.is-logo-hidden:not(.is-logo-hidden-revert) .header__logo {
    opacity: 0;
    pointer-events: none;
}
header .header__open--text {
    border-top: 1px solid #979797;
    cursor: pointer;
    display: inline-block;
    padding-top: 8px;
    position: relative;
    transform: translateY(0);
    transition: color 0.6s, transform 0.2s ease-in-out;
}
header .header__open--text::before {
    background-color: #000;
    content: "";
    display: block;
    height: 35px;
    position: absolute;
    top: -36px;
    transition: background-color 0.6s;
    width: 100%;
}
header .header__open--text::after {
    background-color: #fff;
    content: "";
    display: block;
    height: 1px;
    left: 12.5%;
    position: absolute;
    top: -7px;
    transition: background-color 0.6s;
    width: 75%;
}
header .header__open--text:hover {
    transform: translateY(10px);
}
.header__opener {
    height: 75px;
    padding: 0 calc(10px + 4.1666666667vw);
    position: fixed;
    right: 0;
    text-align: left;
    top: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    z-index: 10;
}
.header__opener--icon {
    margin-top: 37px;
    position: relative;
}
.header__opener--icon i {
    background-color: #000;
    display: block;
    height: 1px;
    margin: 6px 0;
    position: relative;
    transition: background-color 0.6s;
    width: 35px;
}
.header__opener--icon i::before,
.header__opener--icon i::after {
    background-color: #000;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    transition: transform 0.3s, background-color 0.6s;
    width: 100%;
}
.header__opener--icon i::before {
    top: -4px;
}
.header__opener--icon i::after {
    bottom: -4px;
}
.header__opener--text {
    display: inline;
    padding-left: 0px;
    padding-top: 5px;
}
body.theme--dark:not(.menu-active) .header__opener .header__opener--icon i,
body.theme--dark:not(.menu-active) .header__opener .header__opener--icon i::before,
body.theme--dark:not(.menu-active) .header__opener .header__opener--icon i::after,
body.is-active:not(.menu-active) .header__opener .header__opener--icon i,
body.is-active:not(.menu-active) .header__opener .header__opener--icon i::before,
body.is-active:not(.menu-active) .header__opener .header__opener--icon i::after {
    background-color: #fff;
}
@media only screen and (max-width: 786px) {
    body.menu-active header {
        pointer-events: none;
    }
    body.menu-active header .header__logo {
        pointer-events: auto;
    }
}
@media only screen and (max-width: 786px) {
    body.has-transition header,
    body.has-transition .header__opener {
        opacity: 0;
        transition: opacity 0.3s;
    }
}
.hero {
    position: relative;
}
body.theme--dark .hero {
    color: #fff;
}
body.theme--dark .hero .hero__client-name {
    color: #202020;
}
.hero--case-study {
    padding-bottom: 0;
    z-index: 0;
}
.hero--case-study .hero__content-wrapper {
    left: 0;
    min-height: 100vh;
    position: absolute;
    top: 0;
    width: 100%;
}
.hero--case-study .hero__image {
    bottom: auto;
    padding-top: 0;
    position: relative;
}
.hero--case-study .hero__image img {
    display: block;
    width: 100%;
}
.hero--case-study .hero__image .hero__image-caption {
    position: absolute;
}
@media only screen and (max-width: 786px) {
    .hero--case-study .hero__image .hero__image-caption.credit span {
        font-size: 7px;
        opacity: 0.5;
    }
}
.hero--case-study .hero__text {
    z-index: 1;
}
.hero--case-study .hero__client-name {
    margin-top: -6rem;
    right: -5%;
    text-align: center;
    top: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.hero--case-study .hero__client-name::before {
    content: "";
    display: inline-block;
    margin-left: -100%;
}
.hero--case-study .hero__client-name::after {
    content: "";
    display: inline-block;
    margin-right: -100%;
}
@media only screen and (max-width: 786px) {
    .hero--case-study {
        display: flex;
        flex-direction: column;
    }
    .hero--case-study .hero__image {
        order: 2;
        padding-top: 0;
    }
    .hero--case-study .hero__client-name {
        display: none;
    }
    .hero--case-study .hero__content-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 70vh;
        order: 1;
        position: relative;
        z-index: 1;
    }
    .hero--case-study .hero__text {
        padding-bottom: 10vh;
        padding-top: 17vh;
    }
    .hero--case-study .hero__link {
        margin: -5vh 0 0;
        padding-bottom: 10vh;
        position: relative;
    }
    .hero--case-study .hero__services {
        margin-top: 5vh;
        position: absolute;
        top: 100%;
        width: 100%;
    }
}
.hero .hero__text-content,
.hero .hero__sub-text-content,
.hero .hero__link,
.hero .hero__credits,
.hero .hero__text-label,
.hero .hero__services {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
    transition: opacity 0.4s, transform 0.4s;
}
.hero .hero__image,
.hero .hero__client-name {
    opacity: 0;
    transform: translateZ(0);
    transition: opacity 0.4s;
}
.hero.is-active .hero__text-content,
.hero.is-active .hero__sub-text-content,
.hero.is-active .hero__link,
.hero.is-active .hero__credits,
.hero.is-active .hero__text-label,
.hero.is-active .hero__services,
.hero.is-active .hero__image,
.hero.is-active .hero__client-name {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.hero.is-active .hero__text-content,
.hero.is-active .hero__sub-text-content,
.hero.is-active .hero__link,
.hero.is-active .hero__credits,
.hero.is-active .hero__image,
.hero.is-active .hero__client-name {
    transition-delay: 0.3s;
}
.hero.is-active .hero__text-label {
    transition-delay: 0.4s;
}
.hero.is-active .hero__services {
    transition-delay: 0.5s;
}
.hero__image {
    bottom: 0;
    position: absolute;
}
.hero__client-name {
    bottom: auto;
    color: rgba(75, 71, 64, 0.03);
    left: -5%;
    position: absolute;
    top: 25%;
    white-space: nowrap;
}
.hero__text,
.hero__services {
    position: relative;
}
.hero__text {
    padding-top: 150px;
}
.hero__text-label {
    display: flex;
    justify-content: flex-end;
}
.hero__text-label-inner {
    border-top: 1px solid #979797;
    margin-bottom: 30px;
    padding-left: 50px;
    padding-top: 10px;
    text-align: right;
}
.hero__text-content {
    width: 85%;
}
@media only screen and (max-width: 786px) {
    .hero__text-content {
        width: 100%;
    }
}
.hero__sub-text-content {
    margin-top: 30px;
    width: 85%;
}
@media only screen and (max-width: 786px) {
    .hero__sub-text-content {
        width: 100%;
    }
}
.hero__location {
    margin-bottom: 20px;
    position: relative;
}
.hero__link {
    margin: 45px 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.hero__link-item-decorator {
    position: absolute;
    transform: translate(-45%, -25%);
    z-index: 0;
}
.hero__link-item-decorator img {
    animation-direction: reverse;
}
.hero__link-item-title {
    position: relative;
    z-index: 1;
}
.hero__credits {
    margin: 20px 0;
    position: absolute;
    width: 100%;
}
.hero__credits-label-inner {
    line-height: 32px;
    opacity: 0.5;
    position: relative;
}
.hero__credits-label-inner::before {
    background: #000;
    content: "";
    display: inline-block;
    height: 1px;
    margin-left: -29px;
    margin-right: 10px;
    vertical-align: middle;
    width: 15px;
}
.hero__credits-item-decorator {
    position: absolute;
    transform: translate(-30%, 20%);
    z-index: -1;
}
.hero__services {
    margin-top: 50px;
    text-align: right;
}
.hero__services.is-active .hero__services-label-inner::before,
.hero__services.is-active .hero__services-label-inner::after {
    transform: scale(1);
}
.hero__services.is-active .hero__services-label-inner::after {
    transition-delay: 0.2s;
}
.hero__services.is-active .hero__services-label-inner:nth-child(2)::after {
    transition-delay: 0.4s;
}
@media only screen and (max-width: 786px) {
    .hero__services {
        height: auto;
        margin-top: 100px;
        -webkit-overflow-scrolling: touch;
        text-align: left;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 786px) {
    .hero__services-inner {
        display: flex;
        padding-top: 6px;
    }
    .hero__services-inner .hero__credits-list + .hero__services-list .hero__service:first-child {
        padding-left: 6.25vw;
    }
    .hero__services-inner .hero__credits-list .hero__service:first-child {
        margin-right: 0;
        padding-right: 6.25vw;
    }
}
.hero__services-label {
    bottom: 0;
    position: absolute;
    right: 50px;
    top: 0;
}
.hero__services-label-inner {
    color: rgba(0, 0, 0, 0.5);
    left: 100%;
    padding: 0 160px 0 60px;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: 0 50%;
    top: 0;
}
.hero__services-label-inner::before,
.hero__services-label-inner::after {
    background: rgba(0, 0, 0, 0.5);
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    top: 5px;
    transform: scale(0);
    transform-origin: center left;
    transition: transform 0.2s;
}
.hero__services-label-inner::before {
    left: 0;
    width: 50px;
}
.hero__services-label-inner::after {
    right: 0;
    width: 150px;
}
.hero__services-label-inner:nth-child(2) {
    top: 222px;
}
.hero__services-label-inner:nth-child(2)::before {
    content: none;
}
.case-study.is-dark .hero__services-label-inner {
    color: rgba(255, 255, 255, 0.5);
}
.case-study.is-dark .hero__services-label-inner::before,
.case-study.is-dark .hero__services-label-inner::after {
    background: rgba(255, 255, 255, 0.5);
}
.hero__services-list {
    align-content: flex-end;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 400px;
    margin-right: 100px;
}
@media only screen and (max-width: 786px) {
    .hero__services-list {
        flex-direction: row;
        flex-wrap: nowrap;
        height: auto !important;
        margin-right: 0;
        padding-right: 0 !important;
    }
}
.hero__credits-list .hero__service:nth-child(1) {
    margin-right: 100px;
}
.hero__credits-list .hero__service:nth-child(1) .hero__service-name-decorator {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    animation-direction: reverse;
    left: 0;
    right: auto;
}
.hero__service {
    margin-bottom: 17px;
    margin-left: 20px;
}
@media only screen and (max-width: 786px) {
    .hero__service {
        margin-left: 0;
    }
}
.hero__service-name {
    display: inline-block;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.hero__service-name-decorator {
    position: absolute;
    top: 0;
    z-index: -1;
}
.hero__service:nth-child(1) .hero__service-name-decorator {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    right: 10%;
}
.hero__service:nth-child(2) .hero__service-name-decorator {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    animation-direction: reverse;
    left: 15%;
}
.hero__service:nth-child(3) .hero__service-name-decorator {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    animation-direction: reverse;
    left: 10%;
}
@media only screen and (max-width: 786px) {
    .hero__service:nth-child(3) .hero__service-name-decorator {
        -webkit-animation-direction: normal;
        animation-direction: normal;
    }
}
.hero__service:nth-child(4) .hero__service-name-decorator {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
    left: 5%;
}
@media only screen and (max-width: 786px) {
    .hero__service:nth-child(4) .hero__service-name-decorator {
        animation-direction: reverse;
    }
}
@media only screen and (max-width: 786px) {
    .hero__service {
        flex: 0 0 auto;
        padding: 0 6.25vw;
    }
    .hero__service:first-child {
        padding-left: 8.3333333333vw;
    }
    .hero__service:last-child {
        padding-right: 8.3333333333vw;
    }
}
section.image {
    position: relative;
}
section.image img {
    display: block;
    position: relative;
    width: 100%;
}
section.image.browser .image__inner {
    position: relative;
}
section.image.browser .image__inner::before {
    background: url("../assets/browser-top-light.png") center bottom/contain no-repeat;
    content: "";
    left: 0;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    section.image.browser .image__inner::before {
        transform: translateY(1%);
    }
}
section.image.browser--raised .animated-image__inner::before {
    background: url("../assets/browser-top-light.png") center bottom/contain no-repeat;
    content: "";
    left: 0;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    section.image.browser--raised .animated-image__inner::before {
        transform: translateY(1%);
    }
}
.case-study.is-dark section.image.browser .image__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.is-dark section.image.browser .image__inner::before {
        transform: translateY(1%);
    }
}
.case-study.is-black section.image.browser .image__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.is-black section.image.browser .image__inner::before {
        transform: translateY(1%);
    }
}
section.image.behind {
    position: relative;
    z-index: -1;
}
section.image.has-caption .grid__row > div {
    position: relative;
}
section.image .image__caption {
    display: inline-block;
    height: 80px;
    position: absolute;
    width: 100px;
}
section.image .image__caption span {
    bottom: 0;
    position: absolute;
}
section.image .image__caption::before {
    background: #fff;
    content: "";
    display: block;
    height: 1px;
    left: -10px;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: 0 0;
    width: 80px;
}
section.image .image__caption.under-parallax {
    height: auto;
    width: 100%;
}
section.image .image__caption.under-parallax > span {
    display: inline-block;
    position: relative;
    margin-top: 15px;
}
section.image .image__caption.under-parallax::before {
    display: none;
}
@media only screen and (max-width: 786px) {
    section.image .image__caption.credit span {
        font-size: 7px;
        opacity: 0.5;
    }
}
section.image .image__caption.text-right {
    text-align: right;
}
section.image .image__caption.bottom-right {
    right: 0;
    top: 100%;
}
section.image .image__caption.bottom-left {
    left: 0;
    top: 100%;
}
section.image .image__caption.right-bottom {
    bottom: 0;
    right: 0;
    transform: translateX(100%);
}
section.image .image__caption.right-top {
    right: 0;
    top: 0;
    transform: translateX(100%);
}
section.image .image__caption.left-bottom {
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
}
section.image .image__caption.left-top {
    left: 0;
    top: 0;
    transform: translateX(-100%);
}
section.image .image__caption.top-right {
    right: 0;
    top: 0;
    transform: translateY(-100%);
}
section.image .image__caption.top-left {
    left: 0;
    top: 0;
    transform: translateY(-100%);
}
.text + section.image {
    margin-top: 4.1666666667vw;
}
@media only screen and (max-width: 786px) {
    .text + section.image {
        margin-top: 8.3333333333vw;
    }
}
section.image.lifted {
    margin-top: -8.3333333333vw;
}
@media only screen and (max-width: 786px) {
    section.image.scroll-smartphone .grid__row {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
    }
    section.image.scroll-smartphone .image__inner {
        flex: 1;
        margin: 0;
    }
    section.image.scroll-smartphone .image__inner img {
        height: 50vh;
        width: auto;
    }
}
section.image .scroll-arrow.top {
    bottom: 98%;
}
section.images {
    position: relative;
}
section.images img {
    width: 100%;
}
section.images .image--layer-1 {
    position: relative;
    z-index: 1;
}
section.images .image--layer-2 {
    position: relative;
    z-index: 2;
}
section.images .image--layer-3 {
    position: relative;
    z-index: 3;
}
section.images .image--layer-4 {
    position: relative;
    z-index: 4;
}
section.images .image--layer-5 {
    position: relative;
    z-index: 5;
}
section.images .image--layer-6 {
    position: relative;
    z-index: 6;
}
section.images .image--layer-7 {
    position: relative;
    z-index: 7;
}
section.images .image--layer-8 {
    position: relative;
    z-index: 8;
}
section.images .image--layer-9 {
    position: relative;
    z-index: 9;
}
section.images .image--layer-10 {
    position: relative;
    z-index: 10;
}
.lang-switcher {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lang-switcher.is-expanded .lang-switcher__options {
    opacity: 1;
    pointer-events: auto;
}
.lang-switcher .lang-switcher__title {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    display: block;
    margin-bottom: 4px;
    padding: 10px 15px 5px 0;
    position: relative;
}
.lang-switcher .lang-switcher__title::after {
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 3px 4px 0 4px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: 15px;
    right: 0;
    width: 0;
}
.lang-switcher .lang-switcher__options {
    list-style: none;
    margin: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.lang-switcher .lang-switcher__option {
    display: block;
}
.theme--dark footer.next-up .lang-switcher .lang-switcher__title {
    border-bottom: 1px solid #fff;
}
.theme--dark footer.next-up .lang-switcher .lang-switcher__title::after {
    border-color: #fff transparent transparent transparent;
}
.theme--black footer.next-up .lang-switcher .lang-switcher__title {
    border-bottom: 1px solid #fff;
}
.theme--black footer.next-up .lang-switcher .lang-switcher__title::after {
    border-color: #fff transparent transparent transparent;
}
.page--about footer .lang-switcher .lang-switcher__title,
footer.next-up .lang-switcher .lang-switcher__title,
footer.is-light .lang-switcher .lang-switcher__title {
    border-bottom: 1px solid #000;
}
.page--about footer .lang-switcher .lang-switcher__title::after,
footer.next-up .lang-switcher .lang-switcher__title::after,
footer.is-light .lang-switcher .lang-switcher__title::after {
    border-color: #000 transparent transparent transparent;
}
@media only screen and (max-width: 786px) {
    .lang-switcher .lang-switcher__title {
        border-bottom: 0 !important;
        margin-bottom: 20px;
        padding: 0;
    }
    .lang-switcher .lang-switcher__title::after {
        display: none;
    }
    .lang-switcher .lang-switcher__options {
        opacity: 1;
        pointer-events: auto;
    }
}
section.long-browsers {
    margin-bottom: -10vw;
    position: relative;
    z-index: 1;
}
section.long-browsers.is-hovered .long-browser__browser:nth-child(1) div.shadow {
    opacity: 0;
}
section.long-browsers.is-hovered .long-browser__browser:nth-child(3) {
    opacity: 1 !important;
}
section.long-browsers .long-browsers-mobile {
    display: block;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding: 10.8% 0 27.8%;
    white-space: nowrap;
}
section.long-browsers .long-browser__browser:nth-child(1),
section.long-browsers .long-browser__browser:nth-child(3) {
    position: absolute;
    top: 10%;
    width: 100%;
}
section.long-browsers .long-browser__browser:nth-child(3) {
    opacity: 0 !important;
    transition: opacity 0.3s;
}
section.long-browsers .long-browser__browser div.shadow {
    transition: opacity 0.3s;
}
section.long-browsers .long-browser__browser-inner {
    position: relative;
}
section.long-browsers .long-browser__browser-inner::before {
    background: url("../assets/browser-top-light.png") center bottom/contain no-repeat;
    content: "";
    left: 0;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    section.long-browsers .long-browser__browser-inner::before {
        transform: translateY(1%);
    }
}
@media only screen and (max-width: 786px) {
    section.long-browsers .long-browser__browser-inner {
        display: inline-block;
        margin-left: 8.3333333333vw;
        vertical-align: top;
        width: 75%;
    }
    section.long-browsers .long-browser__browser-inner:last-child {
        margin-right: 8.3333333333vw;
    }
}
body.theme--dark section.long-browsers .long-browser__browser-inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    body.theme--dark section.long-browsers .long-browser__browser-inner::before {
        transform: translateY(1%);
    }
}
body.theme--black section.long-browsers .long-browser__browser-inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    body.theme--black section.long-browsers .long-browser__browser-inner::before {
        transform: translateY(1%);
    }
}
section.long-browsers img {
    display: block;
    position: relative;
    width: 100%;
}
section.long-browsers .scroll-arrow.top {
    bottom: 98%;
}
.menu {
    background-color: #fff;
    bottom: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.5s cubic-bezier(0.12, 0.475, 0, 0.995);
    width: 100%;
    will-change: transform;
    z-index: 12;
}
.menu .menu__navigation {
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-evenly;
    padding-left: 100px;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .menu .menu__navigation {
        padding: 15vh 0;
        margin-left: -20px;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .menu .menu__navigation {
        margin-left: initial;
        padding-left: 50px;
    }
}
.menu .menu__gray-container {
    background-color: 	#D3D3D3;
    bottom: 0;
    left: 120px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%) translateZ(0);
    transition: transform 0.5s cubic-bezier(0.12, 0.475, 0, 0.995) 0.3s;
}
@media only screen and (max-width: 786px) {
    .menu .menu__gray-container {
        left: 0;
    }
}
.menu .menu__link {
    list-style: none;
    opacity: 0;
    position: relative;
    transform: translateX(10vw) translateZ(0);
    transition: all 0.4s ease-in-out 0.7s;
}
.menu .menu__link:nth-child(2) {
    transition-delay: 0.75s;
}
.menu .menu__link:nth-child(3) {
    transition-delay: 0.8s;
}
.menu .menu__link.is-expanded .menu__link-upper::after {
    opacity: 0;
}
.menu .menu__link-label {
    color: #ebebeb;
    transition: color 0.2s ease-in-out;
}
.menu .menu__link:nth-child(2) .menu__link-label::first-letter {
    margin-right: -0.15em;
}
.menu .menu__link-upper {
    bottom: 60px;
    left: -20px;
    position: absolute;
    width: 340px;
}
@media only screen and (max-width: 786px) {
    .menu .menu__link-upper {
        bottom: 30px;
        left: 40px;
        width: 200px;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .menu .menu__link-upper {
        bottom: 60px;
        left: -20px;
        width: 340px;
    }
}
.menu .menu__link-upper::after {
    content: "";
    opacity: 1;
    position: absolute;
    transition: all 0.2s ease-in-out;
    width: 200px;
}
@media only screen and (max-width: 786px) {
    .menu .menu__link-upper::after {
        width: 110px;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .menu .menu__link-upper::after {
        width: 200px;
    }
}
.menu .menu__link-smaller-text {
    opacity: 1;
    padding: 15px 0;
    transform: translateX(0);
    transition: all 0.2s ease-in-out;
}
@media only screen and (max-width: 786px) {
    .menu .menu__link-smaller-text {
        padding: 2px 0;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .menu .menu__link-smaller-text {
        padding: 10px 0;
    }
}
.menu .menu__link-bigger-text {
    bottom: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transform: translateX(-25px);
    transition: all 0.2s ease-in-out;
    z-index: 2;
}
.menu .menu__link-bloob {
    bottom: -80px;
    position: absolute;
    right: 5%;
    transform: rotateZ(225deg) scaleX(0.2) scaleY(0);
    transition: all 0.8s cubic-bezier(0.4, 0.62, 0, 1);
}
@media only screen and (max-width: 786px) {
    .menu .menu__link-bloob {
        display: none;
    }
}
.menu .menu__link:hover .menu__link-label,
.menu .menu__link .transition.is-expanded .menu__link-label {
    color: #fff;
}
.menu .menu__link:hover .menu__link-upper::after,
.menu .menu__link .transition.is-expanded .menu__link-upper::after {
    width: 340px;
}
@media only screen and (max-width: 786px) {
    .menu .menu__link:hover .menu__link-upper::after,
    .menu .menu__link .transition.is-expanded .menu__link-upper::after {
        width: 200px;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .menu .menu__link:hover .menu__link-upper::after,
    .menu .menu__link .transition.is-expanded .menu__link-upper::after {
        width: 340px;
    }
}
.menu .menu__link:hover .menu__link-smaller-text,
.menu .menu__link .transition.is-expanded .menu__link-smaller-text {
    opacity: 0;
    transform: translateX(25px);
}
.menu .menu__link:hover .menu__link-bigger-text,
.menu .menu__link .transition.is-expanded .menu__link-bigger-text {
    opacity: 1;
    transform: translateX(0);
}
.menu .menu__link:hover .menu__link-bloob,
.menu .menu__link .transition.is-expanded .menu__link-bloob {
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
.menu .menu__link:hover .menu__link-bloob canvas,
.menu .menu__link .transition.is-expanded .menu__link-bloob canvas {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
@media only screen and (max-width: 786px) {
    .menu .menu__link:hover .menu__link-bloob,
    .menu .menu__link .transition.is-expanded .menu__link-bloob {
        transform: scale(0.5);
    }
}
.menu .menu__close {
    position: relative;
    text-align: center;
    transform: translateY(-100%) translateZ(0);
    transition: all 0.3s ease-in-out 0.9s;
    opacity: 1;
}
.menu .menu__close .menu__close-button {
    background-color: #fff;
    cursor: pointer;
    padding-bottom: 20px;
    padding-top: 40px;
}
.menu .menu__close .menu__close-button--text {
    border-bottom: 1px solid #979797;
    display: inline-block;
    padding-bottom: 30px;
}
.menu .menu__close-mobile {
    background-color: #fff;
    background-image: url("../assets/menu-close-button.svg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 75px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(100%) translateZ(0);
    transition: all 0.4s ease-in-out 1s;
    width: calc(20px + 8.3333333333vw + 35px);
}
.menu--is-visible {
    transform: translate3d(0, 0, 0);
}
.menu--is-visible .menu__gray-container {
    transform: translateX(0) translateZ(0);
}
.menu--is-visible .menu__link {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}
.menu--is-visible .menu__close {
    transform: translateY(0) translateZ(0);
}
.menu--is-visible .menu__close-mobile {
    transform: translateX(0) translateZ(0);
}
section.mobile {
    margin-bottom: 150px;
    position: relative;
}
@media only screen and (max-width: 786px) {
    section.mobile {
        margin: 0;
    }
}
section.mobile .mobile__inner {
    display: flex;
    justify-content: space-between;
    position: relative;
}
@media only screen and (max-width: 786px) {
    section.mobile .mobile__inner {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 20%;
    }
}
section.mobile.has-bg .mobile__inner::before {
    background: #f5f5f5;
    bottom: -20%;
    content: "";
    left: -5%;
    padding-top: 45%;
    position: absolute;
    width: 45%;
}
@media only screen and (max-width: 786px) {
    section.mobile.has-bg .mobile__inner::before {
        display: none;
    }
}
@media only screen and (max-width: 786px) {
    section.mobile.has-bg .grid__row {
        position: relative;
    }
    section.mobile.has-bg .grid__row::before {
        background: #f5f5f5;
        bottom: 0;
        content: "";
        left: 0;
        padding-top: 125%;
        position: absolute;
        width: 84%;
    }
}
section.mobile .mobile__phone {
    flex: 0 0 32%;
    opacity: 0;
    position: relative;
    transform: translateY(100px);
    transition: opacity 0.6s, transform 0.6s;
}
section.mobile .mobile__phone::before {
    content: "";
    display: block;
    padding-top: 196%;
}
@media only screen and (max-width: 786px) {
    section.mobile .mobile__phone {
        flex: 0 0 calc(32% * 19 / 24 / 32 * 100);
    }
}
section.mobile .mobile__phone-bg {
    background: #f3f3f3;
    box-shadow: 3px 7px 16px -6px rgba(0, 0, 0, 0.07), 15px 20px 37px -2px rgba(0, 0, 0, 0.07), 20px 42px 80px 6px rgba(0, 0, 0, 0.07), 20px 42px 120px 10px rgba(0, 0, 0, 0.07), inset 0 -4px 0px -1px rgba(96, 96, 96, 0.2),
        inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 6px 18px 30px 2px rgba(255, 255, 255, 0.2);
    border-radius: 13.033% / 6.22%;
    bottom: 5%;
    filter: blur(0.75px);
    left: 8%;
    position: absolute;
    right: 8%;
    top: 5%;
    transform: translateZ(0);
}
section.mobile .mobile__phone-bg::after {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    background: #ebebeb;
    border-radius: 10px;
    box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.05);
    content: "";
    height: 0.7%;
    top: 5%;
    width: 24%;
}
@media only screen and (max-width: 786px) {
    section.mobile .mobile__phone-bg {
        box-shadow: 3px 7px 16px -6px rgba(0, 0, 0, 0.07), 12px 17px 31px -2px rgba(0, 0, 0, 0.07), 8px 17px 62px 5px rgba(0, 0, 0, 0.07), 20px 42px 100px 8px rgba(0, 0, 0, 0.07), inset 0 -4px 0px -1px rgba(96, 96, 96, 0.2),
            inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 6px 18px 30px 2px rgba(255, 255, 255, 0.2);
        filter: blur(0.4px);
    }
}
section.mobile .mobile__phone-inner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    width: 78%;
}
section.mobile .mobile__phone-inner.mobile__phone-inner--round {
    border-radius: 10.667% / 4.926%;
    height: 87%;
    overflow: hidden;
    width: 78.9474%;
}
section.mobile .mobile__phone-inner.mobile__phone-inner--round video {
    height: 100%;
}
section.mobile .mobile__pattern {
    bottom: -176px;
    position: absolute;
    width: 41%;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    section.mobile .mobile__pattern {
        bottom: 0;
        width: 81%;
    }
}
section.mobile.dark .mobile__phone-bg {
    background: #121212;
    bottom: 10%;
    box-shadow: 3px 7px 16px -6px rgba(0, 0, 0, 0.17), 15px 20px 37px -2px rgba(0, 0, 0, 0.17), 20px 42px 80px 6px rgba(0, 0, 0, 0.17), 20px 42px 120px 10px rgba(0, 0, 0, 0.17), inset 13px 13px 8px -13px rgba(100, 100, 100, 0.75);
    top: 9%;
}
section.mobile.dark .mobile__phone-bg::after {
    display: none;
}
section.mobile.dark .mobile__phone-inner {
    height: 72%;
}
section.mobile.no-phone .mobile__phone-bg {
    display: none;
}
section.mobile img,
section.mobile video {
    display: block;
    width: 100%;
}
section.text + section.mobile {
    margin-top: 2.0833333333vw;
}
section.mobile .scroll-arrow.bottom {
    top: 82%;
}
section.mobile .scroll-arrow.top {
    bottom: 92%;
}
section.mobile.is-active .mobile__phone {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s, transform 0.6s cubic-bezier(0.005, 0.425, 0.175, 1);
}
section.mobile.is-active .mobile__phone:nth-child(2) {
    transition-delay: 0.2s;
}
section.mobile.is-active .mobile__phone:nth-child(3) {
    transition-delay: 0.4s;
}
@media only screen and (min-width: 787px) {
    section.mobile.four-up .mobile__inner {
        flex-wrap: wrap;
    }
}
@media only screen and (min-width: 787px) {
    section.mobile.four-up .mobile__phone {
        flex: 0 0 24%;
    }
}
.requirements {
    margin: 8.3333333333vw 0;
}
@media only screen and (max-width: 786px) {
    .requirements {
        margin: 12.5vw 0;
    }
}
.requirements__inner {
    align-items: flex-start;
}
.requirements__inner.is-active .requirements__list-item {
    opacity: 1;
    transform: none;
    transition-delay: 0.2s;
}
.requirements__inner.is-active .requirements__list-item:nth-child(2) {
    transition-delay: 0.3s;
}
.requirements__inner.is-active .requirements__list-item:nth-child(3) {
    transition-delay: 0.4s;
}
.requirements__inner.is-active .requirements__list-item:nth-child(4) {
    transition-delay: 0.5s;
}
.requirements__inner.is-active .requirements__label-inner {
    opacity: 1;
    transform: translate(-50%, 200%) rotate(-90deg);
}
.requirements__inner.is-active .requirements__label-inner::before {
    opacity: 1;
    transform: scale(1) translateX(0);
}
@media only screen and (max-width: 786px) {
    .requirements__inner {
        flex-wrap: wrap;
    }
    .requirements__inner.is-active .requirements__list {
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }
    .requirements__inner.is-active .requirements__label-inner {
        transform: none;
    }
}
.requirements__label {
    position: relative;
}
.requirements__label-decorator {
    position: absolute;
    top: -100%;
    transform: rotate(90deg);
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .requirements__label-decorator {
        left: -5%;
        top: -150%;
    }
}
.requirements__label-inner {
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, 500%) rotate(-90deg);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    white-space: nowrap;
}
.requirements__label-inner::before {
    width: 80px;
    content: "";
    opacity: 0;
    position: absolute;
    right: 115%;
    top: 40%;
    transform: scale(0) translateX(-50px);
    transform-origin: center left;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
@media only screen and (max-width: 1500px) {
    .requirements__label-inner::before {
        width: calc(35.9663865546px + 5.6022408964vw);
    }
}
@media only screen and (min-width: 1500px) {
    .requirements__label-inner::before {
        width: 120px;
    }
}
@media only screen and (max-width: 786px) {
    .requirements__label-inner {
        align-items: center;
        display: flex;
        left: auto;
        margin-bottom: 20.8333333333vw;
        position: relative;
        transform: translateX(-50px);
        transition-duration: 0.3s;
    }
    .requirements__label-inner::before {
        margin-left: 15px;
        margin-top: -4px;
        order: 1;
        position: relative;
        right: 0;
        transform-origin: center left;
        transition-duration: 0.3s;
        width: 100% !important;
    }
}
.requirements__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media only screen and (max-width: 786px) {
    .requirements__list {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    }
}
.requirements__list-column {
    flex: 0 0 45%;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media only screen and (max-width: 786px) {
    .requirements__list-column {
        flex: 0 0 100%;
    }
}
.requirements__list-item {
    margin: 0 0 2em 0;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
@media only screen and (max-width: 786px) {
    .requirements__list-item {
        opacity: 1;
        transform: none;
    }
}
.requirements__list-item::before {
    background: rgba(0, 0, 0, 0.2);
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 5%;
    margin-left: 0;
    width: 3vw;
}
@media only screen and (max-width: 786px) {
    .requirements__list-item::before {
        width: 12.5vw;
    }
}
.requirements--you .requirements__label-decorator {
    right: -10%;
    top: -80%;
}
.requirements--you .requirements__label-decorator img {
    animation-direction: reverse;
}
@media only screen and (max-width: 786px) {
    .requirements--you .requirements__label-decorator {
        transform: rotate(0deg);
    }
}
.scroll-arrow {
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    position: absolute;
    right: 0;
    transition: opacity 0.6s;
    width: 100%;
}
.scroll-arrow__inner {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}
.scroll-arrow__inner img {
    display: block;
}
.scroll-arrow__line {
    background: url("../assets/scroll-arrow.svg") center left/contain no-repeat;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.scroll-arrow__line img {
    width: auto;
}
.scroll-arrow__shape img {
    margin: 0 auto;
    max-height: 11vh;
    max-width: 100%;
    width: auto;
}
.scroll-arrow.bottom {
    top: 90%;
}
.scroll-arrow.top {
    bottom: 86%;
}
.scroll-arrow.is-faded {
    opacity: 0;
}
.shadow {
    bottom: 0;
    box-shadow: 3px 7px 16px -6px rgba(0, 0, 0, 0.07), 15px 20px 37px -2px rgba(0, 0, 0, 0.07), 20px 42px 80px 6px rgba(0, 0, 0, 0.07), 20px 42px 120px 10px rgba(0, 0, 0, 0.07);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: box-shadow 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media only screen and (max-width: 786px) {
    .shadow {
        box-shadow: 3px 4px 9px -4px rgba(0, 0, 0, 0.05), 8px 12px 20px -2px rgba(0, 0, 0, 0.04), 12px 23px 42px 5px rgba(0, 0, 0, 0.04), 14px 26px 64px 7px rgba(0, 0, 0, 0.04);
    }
}
.shadow.is-hidden {
    box-shadow: none;
}
.sidebar {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%) translateY(-50px);
    transition: transform 0.5s, opacity 0.5s;
    width: 100%;
    z-index: 14;
}
.sidebar.is-active {
    opacity: 1;
    transform: translateY(-50%);
}
.sidebar.is-active .line--vertical-sm {
    transform: scale(1);
}
.sidebar .sidebar__inner {
    pointer-events: auto;
}
.sidebar .sidebar__logo {
    background: url("../assets/axera-logotype-black.svg") center/cover no-repeat;
    display: block;
    height: 60px;
    margin: 0 auto 20px;
    position: relative;
    width: 12px;
}
.sidebar .sidebar__logo::after {
    background: url("../assets/axera-logotype-black.svg") center/cover no-repeat;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.theme--dark .sidebar .sidebar__logo {
    background: url("../assets/axera-logotype-white.svg") center/cover no-repeat;
}
body.theme--dark .sidebar .line--vertical-sm {
    background: #fff;
}
body.theme--black .sidebar .sidebar__logo {
    background: url("../assets/axera-logotype-white.svg") center/cover no-repeat;
}
body.theme--black .sidebar .line--vertical-sm {
    background: #fff;
}
body.menu-active .sidebar .sidebar__logo {
    background: url("../assets/axera-logotype-black.svg") center/cover no-repeat;
}
body.menu-active .sidebar .line--vertical-sm {
    background: #000;
}
.sidebar .line--vertical-sm {
    transform: scale(0);
    transition: background-color 0.6s, transform 0.6s;
}
section.text .text__label-text,
section.text .text__label-inner::after,
section.text .text__label-inner::before,
section.text .text__inner {
    opacity: 0;
    transition: transform 0.6s, opacity 0.6s;
    z-index: 1;
}
section.text .text__label-text,
section.text .text__inner {
    transform: translate(-25px, 0);
}
section.text .text__label-inner::after,
section.text .text__label-inner::before {
    transform: translate(-25px, 0) scale(0);
    transform-origin: center left;
}
section.text.is-active .text__label-text,
section.text.is-active .text__label-inner::after,
section.text.is-active .text__label-inner::before,
section.text.is-active .text__inner {
    transition-delay: 0.1s;
    opacity: 1;
}
section.text.is-active .text__label-text,
section.text.is-active .text__inner {
    transform: none;
}
section.text.is-active .text__label-inner::after {
    transform: translate(0, 0) scale(1);
    transition-delay: 0s;
}
section.text.is-active .text__label-inner::before {
    transform: translate(0, 0) scale(1);
    transition-delay: 0.2s;
}
section.text.is-active .text__label + .grid__row .text__inner {
    transition-delay: 0.4s;
}
section.text .text__decorator {
    left: -15px;
    position: absolute;
    top: -15px;
    z-index: -1;
}
section.text .text__label {
    margin-bottom: 30px;
}
section.text .text__label-inner {
    white-space: nowrap;
}
section.text .text__label-inner::before {
    width: 120px;
    content: "";
    margin-right: 8px;
    position: relative;
    top: -1px;
    vertical-align: middle;
}
@media only screen and (max-width: 1500px) {
    section.text .text__label-inner::before {
        width: calc(75.9663865546px + 5.6022408964vw);
    }
}
@media only screen and (min-width: 1500px) {
    section.text .text__label-inner::before {
        width: 160px;
    }
}
section.text .text__label-text {
    display: inline-block;
    position: relative;
}
section.text .text__label-text .text__decorator {
    left: 10px;
    position: absolute;
    top: -5px;
}
section.text .text__inner,
section.text .text__content {
    position: relative;
}
section.text .text__content p:not(:first-child) {
    margin-top: 1em;
}
section.text .text__content a {
    display: inline-block;
    position: relative;
}
section.text .text__content a:after {
    background-color: #000;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    width: 100%;
    bottom: 6px;
}
.image + section.text,
.video + section.text {
    margin-top: 12.5vw;
}
@media only screen and (max-width: 786px) {
    .image + section.text,
    .video + section.text {
        margin-top: 29.1666666667vw;
    }
}
.image + section.text.small,
.video + section.text.small {
    margin-top: 8.3333333333vw;
}
@media only screen and (max-width: 786px) {
    .image + section.text.small,
    .video + section.text.small {
        margin-top: 20.8333333333vw;
    }
}
section.text.caption {
    margin-top: 4.1666666667vw !important;
}
@-webkit-keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes transition-open {
    0% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) rotate(5deg) scaleY(0.01);
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) rotate(-40deg) scaleY(1);
    }
}
@keyframes transition-open {
    0% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) rotate(5deg) scaleY(0.01);
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) rotate(-40deg) scaleY(1);
    }
}
@-webkit-keyframes lift {
    from {
        opacity: 0;
        transform: translate3d(100px, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes lift {
    from {
        opacity: 0;
        transform: translate3d(100px, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fixPosition {
    from {
        position: absolute;
    }
    to {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 100;
    }
}
@keyframes fixPosition {
    from {
        position: absolute;
    }
    to {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 100;
    }
}
.transition-open,
.transition-fill::before {
    background: #fff;
    height: 200vh;
    left: 50%;
    opacity: 0;
    position: fixed;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) rotate(5deg) scaleY(0.001);
    transition: transform 0.2s 0.1s ease-in, opacity 0.05s 0.1s ease-in;
    width: 200vw;
    will-change: transform, opacity;
    z-index: 15;
}
.transition-fill {
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateZ(0);
    transition: opacity 0.5s 0.2s;
    z-index: 15;
}
.transition-fill::before {
    content: "";
    z-index: auto;
}
.transition-fill--home,
.transition-fill--job {
    background: #fff;
}
.transition-fill--home::before,
.transition-fill--job::before {
    content: none;
}
.transition-fill--home {
    transition: opacity 0.2s 0.15s;
}
.transition-fill--job {
    transition: opacity 0.2s 0.2s;
}
.transition-fill.is-active {
    opacity: 0;
}
.transition-fill.is-active::before {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(-40deg) scaleY(1);
}
@media only screen and (max-width: 786px) {
    .page--about .transition-fill,
    .page--careers .transition-fill {
        background: #fff !important;
        transition-delay: 0s !important;
    }
    .page--about .transition-fill::before,
    .page--careers .transition-fill::before {
        content: none;
    }
}
body.theme--dark .transition-fill::before {
    background: #1a1919;
}
body.theme--black .transition-fill::before {
    background: #000;
}
.transition {
    transform: translateZ(0);
}
.transition.is-expanded {
    z-index: 15;
}
.transition.is-expanded .transition__expander {
    -webkit-animation: transition-expand 0.4s ease-in-out forwards !important;
    animation: transition-expand 0.4s ease-in-out forwards !important;
}
.transition.is-expanded .transition__expander--small {
    -webkit-animation: transition-expand-sml 0.4s ease-in-out forwards !important;
    animation: transition-expand-sml 0.4s ease-in-out forwards !important;
}
.transition.is-expanded .transition__fade,
.transition.is-expanded .shadow {
    opacity: 0 !important;
    transform: translateX(50px) !important;
    transition: transform 0.2s 0.15s, opacity 0.2s 0.15s !important;
}
.transition__outer.is-expanded {
    transition: z-index 0.4s !important;
    z-index: 11 !important;
}
.transition__outer.office__how.is-expanded {
    transition-delay: 0.35s !important;
}
.has-transition {
    overflow: hidden;
}
.has-transition .sidebar {
    z-index: 0;
}
.has-transition .menu__close {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
}
.has-transition .menu__close-mobile {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
}
.project__inner.transition.is-expanded img.transition__expander--small,
.project__inner.transition.is-expanded canvas.transition__expander--small,
.project__inner.transition.is-expanded svg.transition__expander--small,
.hero__cta.transition.is-expanded img.transition__expander--small,
.hero__cta.transition.is-expanded canvas.transition__expander--small,
.hero__cta.transition.is-expanded svg.transition__expander--small,
.office__how-inner.transition.is-expanded img.transition__expander--small,
.office__how-inner.transition.is-expanded canvas.transition__expander--small,
.office__how-inner.transition.is-expanded svg.transition__expander--small,
.office__work-inner.transition.is-expanded img.transition__expander--small,
.office__work-inner.transition.is-expanded canvas.transition__expander--small,
.office__work-inner.transition.is-expanded svg.transition__expander--small,
.footer__message.transition.is-expanded img.transition__expander--small,
.footer__message.transition.is-expanded canvas.transition__expander--small,
.footer__message.transition.is-expanded svg.transition__expander--small {
    -webkit-animation: transition-expand-sml 0.4s ease-in-out forwards !important;
    animation: transition-expand-sml 0.4s ease-in-out forwards !important;
}
.transition__expander-wrapper {
    height: 250%;
    left: 50%;
    perspective: 100px;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale(0.4);
    transform-style: preserve-3d;
    width: 250%;
}
.transition.is-expanded .transition__expander-wrapper {
    transform: translate3d(-50%, -50%, 0) scale(1);
    transition-delay: 0.3s;
}
section.video {
    margin: 4.1666666667vw 0;
    position: relative;
    z-index: 1;
}
section.video:not(.no-chrome) .video__inner::before {
    background: url("../assets/browser-top-light.png") center bottom/contain no-repeat;
    content: "";
    left: 0;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    section.video:not(.no-chrome) .video__inner::before {
        transform: translateY(1%);
    }
}
section.video .video__inner {
    position: relative;
    position: relative;
}
section.video .video__inner::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark section.video .video__inner::after {
    background: #1a1919;
}
body.is-black section.video .video__inner::after {
    background: #000;
}
section.video.no-chrome {
    margin-top: 1.6666666667vw;
}
section.video.inset-shadow--vertical.no-chrome .video__inner::before,
section.video.inset-shadow.no-chrome .video__inner::before {
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
section.video.inset-shadow.no-chrome .video__inner::before {
    box-shadow: inset 0 0 50px 50px #1a1919;
}
@media only screen and (max-width: 786px) {
    section.video.inset-shadow.no-chrome .video__inner::before {
        box-shadow: inset 0 0 20px 20px #1a1919;
    }
}
section.video.inset-shadow--vertical.no-chrome .video__inner::before {
    box-shadow: inset 0 50px 50px -10px #1a1919, inset 0 -50px 50px -10px #1a1919;
}
@media only screen and (max-width: 786px) {
    section.video.inset-shadow--vertical.no-chrome .video__inner::before {
        box-shadow: inset 0 20px 20px -10px #1a1919, inset 0 -20px 20px -10px #1a1919;
    }
}
section.video.is-active .video__inner::after {
    opacity: 0;
}
section.video video {
    display: block;
    -o-object-fit: initial;
    object-fit: initial;
    position: relative;
}
.case-study.is-dark section.video:not(.no-chrome) .video__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.is-dark section.video:not(.no-chrome) .video__inner::before {
        transform: translateY(1%);
    }
}
.case-study.is-black section.video:not(.no-chrome) .video__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.is-black section.video:not(.no-chrome) .video__inner::before {
        transform: translateY(1%);
    }
}
.image + section.video,
.text + section.video {
    margin-top: 6.6666666667vw;
}
@media only screen and (max-width: 786px) {
    .image + section.video,
    .text + section.video {
        margin-top: 15vw;
    }
}
.image + section.video.no-chrome:not(.lifted),
.text + section.video.no-chrome:not(.lifted) {
    margin-top: 4.1666666667vw;
}
@media only screen and (max-width: 786px) {
    .image + section.video.no-chrome:not(.lifted),
    .text + section.video.no-chrome:not(.lifted) {
        margin-top: 12.5vw;
    }
}
section.video.lifted {
    margin-top: -10.8333333333vw;
}
@media only screen and (max-width: 786px) {
    section.video.scroll-smartphone .grid__row:not(.video__background) {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
    }
    section.video.scroll-smartphone .video__inner {
        flex: 1;
        margin: 0;
    }
    section.video.scroll-smartphone .video__inner video {
        height: 50vh;
        width: auto;
    }
}
section.video .scroll-arrow.top {
    bottom: 90%;
}
section.youtube {
    position: relative;
}
section.youtube.lifted {
    margin-bottom: 10.5vw;
    margin-top: -15vw;
}
section.youtube .youtube__inner {
    position: relative;
    position: relative;
}
section.youtube .youtube__inner::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark section.youtube .youtube__inner::after {
    background: #1a1919;
}
body.is-black section.youtube .youtube__inner::after {
    background: #000;
}
section.youtube.is-active .youtube__inner::after {
    opacity: 0;
}
section.youtube img {
    display: block;
    height: 0;
    -o-object-fit: cover;
    object-fit: cover;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
}
section.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
section.youtube .youtube__play {
    cursor: pointer;
    z-index: 1;
}
section.youtube .youtube__video {
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}
section.youtube.is-dark .youtube__play::after {
    background-image: url("../assets/youtube-play-light.svg");
}
section.youtube.youtube--is-playing {
    z-index: 14;
}
section.youtube.youtube--is-playing .youtube__play {
    display: none;
}
section.youtube.youtube--is-playing .youtube__inner {
    z-index: 16 !important;
}
section.youtube.youtube--is-playing .youtube__video {
    transform: scale(1.111);
}
section.youtube.youtube--is-playing img {
    opacity: 0;
}
section.youtube.youtube--is-playing::after {
    background-color: rgba(0, 0, 0, 0.8);
    content: "";
    cursor: pointer;
    display: block;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 15;
}
.page--about .page-content img,
.page--about .grid__row {
    width: 100%;
}
.page--about .hero {
    padding: 10vh 0;
    text-align: center;
}
@media only screen and (max-width: 786px) {
    .page--about .hero {
        padding: 10vh 0 0;
        text-align: left;
    }
}
.page--about .hero .hero__wrapper {
    position: relative;
    position: relative;
}
.page--about .hero .hero__wrapper::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark .page--about .hero .hero__wrapper::after {
    background: #1a1919;
}
body.is-black .page--about .hero .hero__wrapper::after {
    background: #000;
}
.page--about .hero .hero__wrapper::before {
    background: url("../assets/about/hero.jpg") center/cover no-repeat;
    bottom: 6vh;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0.98);
    transition: transform 0.6s;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--about .hero .hero__wrapper::before {
        bottom: 8vh;
        top: 8vh;
    }
}
.page--about .hero .hero__wrapper::after {
    transition: opacity 0.6s;
}
.page--about .hero .hero__wrapper.is-active::after {
    opacity: 0;
}
.page--about .hero .hero__wrapper.is-active::before {
    transform: scale(1);
}
.page--about .hero .hero__wrapper.is-active .hero__label,
.page--about .hero .hero__wrapper.is-active .hero__label::after,
.page--about .hero .hero__wrapper.is-active .hero__title,
.page--about .hero .hero__wrapper.is-active .hero__subtitle,
.page--about .hero .hero__wrapper.is-active .hero__subtitle p,
.page--about .hero .hero__wrapper.is-active .hero__subtitle::before {
    opacity: 1;
    transform: none;
}
.page--about .hero .hero__wrapper.is-active .hero__label::after {
    transition-delay: 0.1s;
}
.page--about .hero .hero__wrapper.is-active .hero__title {
    transition-delay: 0.4s;
}
.page--about .hero .hero__wrapper.is-active .hero__subtitle::before {
    transition-delay: 0.6s;
}
.page--about .hero .hero__wrapper.is-active .hero__subtitle p {
    transition-delay: 1s;
}
.page--about .hero .hero__label,
.page--about .hero .hero__title,
.page--about .hero .hero__subtitle {
    opacity: 0;
    position: relative;
    transition: opacity 0.6s, transform 0.6s;
    z-index: 1;
}
.page--about .hero .hero__label::after,
.page--about .hero .hero__subtitle::before {
    opacity: 0;
    transform: scale(0);
    transform-origin: top center;
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .hero .hero__label {
    margin-bottom: 2vh;
    margin-top: 10vh;
}
@media only screen and (max-width: 786px) {
    .page--about .hero .hero__label {
        margin: 0 5vw 2vh;
    }
}
.page--about .hero .hero__label::after {
    background: #000;
    content: "";
    display: block;
    height: 10vh;
    margin: 2vh auto 0;
    transition: opacity 0.3s, transform 0.3s;
    width: 1px;
}
@media only screen and (max-width: 786px) {
    .page--about .hero .hero__label::after {
        height: 5vh;
        margin: 2vh 8vw 0;
    }
}
.page--about .hero .hero__title {
    margin: 0 5vw 2vh;
}
@media only screen and (max-width: 786px) {
    .page--about .hero .hero__title {
        margin-bottom: 14vh;
        margin-left: -8.3333333333vw;
        margin-top: 14vh;
        transform: translateX(-18vw);
        width: 110%;
    }
}
.page--about .hero .hero__title h1 {
    margin: 0;
}
@media only screen and (max-width: 786px) {
    .page--about .hero .hero__subtitle {
        margin: 0 40vw 0 5vw;
    }
}
.page--about .hero .hero__subtitle::before {
    background: #000;
    content: "";
    display: block;
    height: 30vh;
    margin: 0 auto 2vh;
    width: 1px;
}
@media only screen and (max-width: 786px) {
    .page--about .hero .hero__subtitle::before {
        height: 15vh;
        margin: 2vh 8vw;
    }
}
.page--about .hero .hero__subtitle p {
    opacity: 0;
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .intro {
    margin: 5vh 0;
    text-align: center;
}
@media only screen and (max-width: 786px) {
    .page--about .intro {
        margin: 12vh 0 0;
        text-align: left;
    }
}
.page--about .intro p:nth-child(1) {
    margin-bottom: 0;
}
.page--about .intro p:nth-child(2) {
    margin-top: 0;
}
.page--about .intro.is-active .intro__inner {
    opacity: 1;
    transform: none;
}
.page--about .intro.is-active .intro__ending-decorator {
    transform: translateX(-50%) rotateZ(0deg) scaleX(1) scaleY(1);
}
@media only screen and (max-width: 786px) {
    .page--about .intro.is-active .intro__ending-decorator {
        transform: rotateZ(0deg) scaleX(1) scaleY(1);
    }
}
.page--about .intro__inner {
    opacity: 0;
    transform: translate(-25px, 0);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .intro__ending {
    position: relative;
}
.page--about .intro__ending-decorator {
    display: inline;
    left: 63%;
    max-width: 13%;
    position: absolute;
    top: 10%;
    transform: translateX(-50%) rotateZ(225deg) scaleX(0.2) scaleY(0);
    transition: transform 0.8s cubic-bezier(0.4, 0.62, 0, 1);
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--about .intro__ending-decorator {
        left: 0;
        margin-left: 13em;
        max-width: 13em;
        transform: rotateZ(225deg) scaleX(0.2) scaleY(0);
    }
}
.page--about .what {
    padding-top: 10vh;
    position: relative;
}
.page--about .what__intro {
    position: relative;
    text-align: center;
}
@media only screen and (max-width: 786px) {
    .page--about .what__intro {
        text-align: left;
    }
}
.page--about .what__intro.is-active .line--vertical-custom,
.page--about .what__intro.is-active .page--home .hero__work-selected::before,
.page--home .page--about .what__intro.is-active .hero__work-selected::before,
.page--about .what__intro.is-active .page--home .hero__work-selected::after,
.page--home .page--about .what__intro.is-active .hero__work-selected::after,
.page--about .what__intro.is-active .page--home .project.bears-ears .project__client::before,
.page--home .project.bears-ears .page--about .what__intro.is-active .project__client::before,
.page--about .what__intro.is-active .page--home .project.santatracker .project__client::before,
.page--home .project.santatracker .page--about .what__intro.is-active .project__client::before {
    transform: scale(1);
}
.page--about .what__intro .line--vertical-custom,
.page--about .what__intro .page--home .hero__work-selected::before,
.page--home .page--about .what__intro .hero__work-selected::before,
.page--about .what__intro .page--home .hero__work-selected::after,
.page--home .page--about .what__intro .hero__work-selected::after,
.page--about .what__intro .page--home .project.bears-ears .project__client::before,
.page--home .project.bears-ears .page--about .what__intro .project__client::before,
.page--about .what__intro .page--home .project.santatracker .project__client::before,
.page--home .project.santatracker .page--about .what__intro .project__client::before {
    transform: scale(0);
    transform-origin: center top;
    transition: transform 0.6s;
}
.page--about .what__intro-inner {
    position: relative;
}
.page--about .what__intro-inner.is-active .what__intro-blobby {
    transform: translateX(-50%) rotateZ(0deg) scaleX(1) scaleY(1);
}
.page--about .what__intro-inner.is-active .what__intro-title {
    opacity: 1;
    transform: none;
}
.page--about .what__intro-blobby {
    left: 50%;
    position: absolute;
    top: -20%;
    transform: translateX(-50%) rotateZ(225deg) scaleX(0.2) scaleY(0);
    transition: transform 0.8s cubic-bezier(0.4, 0.62, 0, 1);
    width: 18%;
}
.page--about .what__intro-blobby canvas {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--about .what__intro-blobby {
        left: 11%;
        margin-top: -25%;
        width: 82%;
    }
}
.page--about .what__intro-title {
    margin-top: 0;
    opacity: 0;
    position: relative;
    transform: translate(-25px, 0);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .what__intro-lines {
    display: flex;
    justify-content: center;
    margin-top: -5.5%;
    position: absolute;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--about .what__intro-lines {
        display: none;
    }
}
.page--about .what__intro-lines.is-active .what__intro-line {
    opacity: 1;
}
.page--about .what__intro-lines.is-active .what__intro-line--center {
    transform: scale(1);
}
.page--about .what__intro-lines.is-active .what__intro-line--left {
    transform: rotate(45deg) scale(1);
}
.page--about .what__intro-lines.is-active .what__intro-line--right {
    transform: rotate(-45deg) scale(1);
}
.page--about .what__intro-line {
    background: #000;
    height: 25vw;
    opacity: 0;
    outline: 1px solid transparent;
    transform-origin: top;
    transition: opacity 0.6s, transform 0.6s;
    width: 1px;
}
.page--about .what__intro-line--center {
    margin: 0.5% 1% 0;
    transform: scale(0);
}
.page--about .what__intro-line--left,
.page--about .what__intro-line--right {
    height: 13vw;
}
.page--about .what__intro-line--left {
    transform: rotate(45deg) scale(0);
}
.page--about .what__intro-line--right {
    transform: rotate(-45deg) scale(0);
}
.page--about .what__intro .line--vertical-custom,
.page--about .what__intro .page--home .hero__work-selected::before,
.page--home .page--about .what__intro .hero__work-selected::before,
.page--about .what__intro .page--home .hero__work-selected::after,
.page--home .page--about .what__intro .hero__work-selected::after,
.page--about .what__intro .page--home .project.bears-ears .project__client::before,
.page--home .project.bears-ears .page--about .what__intro .project__client::before,
.page--about .what__intro .page--home .project.santatracker .project__client::before,
.page--home .project.santatracker .page--about .what__intro .project__client::before {
    height: 25vw;
    margin-bottom: 1%;
    max-height: 450px;
}
@media only screen and (max-width: 786px) {
    .page--about .what__intro .line--vertical-custom,
    .page--about .what__intro .page--home .hero__work-selected::before,
    .page--home .page--about .what__intro .hero__work-selected::before,
    .page--about .what__intro .page--home .hero__work-selected::after,
    .page--home .page--about .what__intro .hero__work-selected::after,
    .page--about .what__intro .page--home .project.bears-ears .project__client::before,
    .page--home .project.bears-ears .page--about .what__intro .project__client::before,
    .page--about .what__intro .page--home .project.santatracker .project__client::before,
    .page--home .project.santatracker .page--about .what__intro .project__client::before {
        height: 60vw;
        margin: 0 15vw 15vw;
    }
}
.page--about .what__content {
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--about .what__content {
        margin-top: -20vh;
    }
}
.page--about .what__bg {
    bottom: 30vw;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--about .what__bg {
        bottom: 0;
        top: -12vw;
    }
}
.page--about .what__bg-shape {
    background: url("../assets/about/what-bg-shape.svg") center top/contain no-repeat;
    height: 100%;
    transform-origin: 50% 0;
}
.page--about .what__brand,
.page--about .what__interactive,
.page--about .what__development {
    position: relative;
}
.page--about .what__brand h3,
.page--about .what__interactive h3,
.page--about .what__development h3 {
    margin-bottom: 20px;
}
@media only screen and (max-width: 786px) {
    .page--about .what__brand h3,
    .page--about .what__interactive h3,
    .page--about .what__development h3 {
        margin-bottom: 25px;
        margin-top: 5vh;
    }
}
.page--about .what__brand h3,
.page--about .what__brand p,
.page--about .what__interactive h3,
.page--about .what__interactive p,
.page--about .what__development h3,
.page--about .what__development p {
    opacity: 0;
    transform: translate(-25px, 0);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .what__brand-images,
.page--about .what__interactive-images,
.page--about .what__development-images {
    position: absolute;
    top: 0;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--about .what__brand-images,
    .page--about .what__interactive-images,
    .page--about .what__development-images {
        position: relative;
        top: initial;
    }
}
@media only screen and (max-width: 786px) {
    .page--about .what__brand-description,
    .page--about .what__interactive-description,
    .page--about .what__development-description {
        margin-top: 12.5vw;
    }
}
.page--about .what__brand.is-active h3,
.page--about .what__brand.is-active p,
.page--about .what__interactive.is-active h3,
.page--about .what__interactive.is-active p,
.page--about .what__development.is-active h3,
.page--about .what__development.is-active p {
    opacity: 1;
    transform: none;
}
.page--about .what__brand.is-active p,
.page--about .what__interactive.is-active p,
.page--about .what__development.is-active p {
    transition-delay: 0.2s;
}
.page--about .what__brand.is-active .capabilities__label-inner,
.page--about .what__interactive.is-active .capabilities__label-inner,
.page--about .what__development.is-active .capabilities__label-inner {
    opacity: 1;
    transform: translate(-50%, 400%) rotate(-90deg);
    transition-delay: 0.3s;
}
@media only screen and (max-width: 786px) {
    .page--about .what__brand.is-active .capabilities__label-inner,
    .page--about .what__interactive.is-active .capabilities__label-inner,
    .page--about .what__development.is-active .capabilities__label-inner {
        transform: translate(-70%, 400%) rotate(-90deg);
    }
}
.page--about .what__brand.is-active .capabilities__list li,
.page--about .what__interactive.is-active .capabilities__list li,
.page--about .what__development.is-active .capabilities__list li {
    opacity: 1;
    transform: none;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(1),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(1),
.page--about .what__development.is-active .capabilities__list li:nth-child(1) {
    transition-delay: 0.4s;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(2),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(2),
.page--about .what__development.is-active .capabilities__list li:nth-child(2) {
    transition-delay: 0.5s;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(3),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(3),
.page--about .what__development.is-active .capabilities__list li:nth-child(3) {
    transition-delay: 0.6s;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(4),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(4),
.page--about .what__development.is-active .capabilities__list li:nth-child(4) {
    transition-delay: 0.7s;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(5),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(5),
.page--about .what__development.is-active .capabilities__list li:nth-child(5) {
    transition-delay: 0.8s;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(6),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(6),
.page--about .what__development.is-active .capabilities__list li:nth-child(6) {
    transition-delay: 0.9s;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(7),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(7),
.page--about .what__development.is-active .capabilities__list li:nth-child(7) {
    transition-delay: 1s;
}
.page--about .what__brand.is-active .capabilities__list li:nth-child(8),
.page--about .what__interactive.is-active .capabilities__list li:nth-child(8),
.page--about .what__development.is-active .capabilities__list li:nth-child(8) {
    transition-delay: 1.1s;
}
@media only screen and (max-width: 786px) {
    .page--about .what__brand h3 {
        margin-top: 15vh;
    }
}
.page--about .what__brand-images {
    margin-top: -8%;
}
.page--about .what__interactive-images {
    margin-top: 8%;
}
.page--about .what__development {
    padding-bottom: 30vw;
}
.page--about .what__development-images {
    bottom: 0;
    top: auto;
    z-index: -2;
}
@media only screen and (max-width: 786px) {
    .page--about .what__development-images {
        margin-top: -75%;
    }
}
.page--about .capabilities {
    margin: 50px 0;
    position: relative;
}
.page--about .capabilities__label {
    align-self: flex-start;
    position: relative;
}
.page--about .capabilities__label-inner {
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translate(-100%, 400%) rotate(-90deg);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .capabilities__label-inner .t-services-headline {
    line-height: 1;
}
.page--about .capabilities__label-decorator {
    align-items: center;
    display: flex;
    height: 4vw;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 100%;
    z-index: -1;
}
.page--about .capabilities__label-decorator img {
    width: auto;
}
.page--about .capabilities__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.page--about .capabilities__list li {
    margin-bottom: 2em;
    opacity: 0;
    transform: translate(-25px, 0);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .clients {
    text-align: center;
}
@media only screen and (max-width: 786px) {
    .page--about .clients {
        text-align: left;
    }
}
.page--about .clients__intro {
    margin: 25vh 0 15vh;
}
@media only screen and (max-width: 786px) {
    .page--about .clients__intro {
        margin-top: 2vh;
    }
}
.page--about .clients__intro-inner {
    position: relative;
}
.page--about .clients__intro.is-active .clients__title {
    opacity: 1;
    transform: none;
}
.page--about .clients__title {
    opacity: 0;
    transform: translate(-25px, 0);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .clients__label {
    color: #f7f7f6;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--about .clients__label {
        font-size: 34vw;
        white-space: initial;
    }
}
.page--about .clients__grid-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}
.page--about .clients .client {
    flex: 0 0 25%;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--about .clients .client {
        flex: 0 0 50%;
    }
}
.page--about .clients .client::before {
    content: "";
    display: block;
    padding-bottom: 95%;
    width: 100%;
}
.page--about .clients .client.is-dark {
    background: #f7f7f6;
}
@media only screen and (max-width: 786px) {
    .page--about .clients .client.is-dark {
        background: initial;
    }
}
@media only screen and (max-width: 786px) {
    .page--about .clients .client.is-dark-mobile {
        background: #f7f7f6;
    }
}
.page--about .clients .client.is-active .client-inner img {
    opacity: 1;
    transform: none;
}
.page--about .clients .client-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.page--about .clients .client-inner img {
    opacity: 0.2;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.page--about .awards {
    margin: 20vh 0;
    text-align: center;
}
@media only screen and (max-width: 786px) {
    .page--about .awards {
        text-align: left;
    }
}
.page--about .awards__intro.is-active .awards__title {
    opacity: 1;
    transform: none;
}
.page--about .awards__title {
    opacity: 0;
    transform: translate(-25px, 0);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .awards__grid {
    margin-top: 10vh;
}
@media only screen and (max-width: 786px) {
    .page--about .awards__grid {
        margin-top: 5vh;
    }
}
.page--about .awards__grid-inner {
    display: flex;
    flex-wrap: wrap;
}
.page--about .awards .award {
    flex: 0 0 25%;
}
@media only screen and (max-width: 786px) {
    .page--about .awards .award {
        flex: 0 0 100%;
        text-align: center;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .page--about .awards .award {
        flex: 0 0 25%;
    }
}
@media only screen and (max-width: 786px) {
    .page--about .awards .award:not(:first-child) {
        margin-top: -15vh;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .page--about .awards .award:not(:first-child) {
        margin-top: 0;
    }
}
.page--about .awards .award__inner {
    position: relative;
    width: 100%;
}
.page--about .awards .award__details,
.page--about .awards .award__number {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70%;
}
.page--about .awards .award__details {
    z-index: 1;
}
.page--about .awards .award__details img {
    width: auto;
}
.page--about .awards .award__details-name {
    margin-top: 20px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .page--about .awards .award__details-name {
        font-size: 8px;
        margin-top: 10px;
    }
}
.page--about .awards .award__number {
    color: #ececec;
    margin-left: 30%;
}
.page--about .awards .award.is-light {
    z-index: 1;
}
.page--about .awards .award.is-light .award__inner {
    padding-bottom: 95%;
}
.page--about .awards .award.is-light .award__content {
    background: #fff;
    height: 100%;
    position: absolute;
    width: 100%;
}
.page--about .awards .award.is-dark .award__inner {
    padding-bottom: 165%;
}
.page--about .awards .award.is-dark .award__inner::before {
    background: url("../assets/about/award-bg-shape.svg") center/contain no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: -40%;
    position: absolute;
    width: 165%;
}
.page--about .awards .award.is-dark .award__details,
.page--about .awards .award.is-dark .award__number {
    top: 45%;
}
@media only screen and (max-width: 786px) {
    .page--about .awards .award.is-dark .award__details,
    .page--about .awards .award.is-dark .award__number {
        top: 48%;
    }
}
.page--about .team {
    position: relative;
}
.page--about .team::before {
    background: url("../assets/about/team-bg-shape.svg") center top/cover no-repeat;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 10%;
    width: 100%;
    z-index: -1;
}
.page--about .team::after {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    bottom: 0;
    content: "";
    height: 20vh;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}
.page--about .team.is-active .team__intro-title,
.page--about .team.is-active .team__intro-text {
    opacity: 1;
    transform: none;
}
.page--about .team.is-active .team__intro-text {
    transition-delay: 0.3s;
}
.page--about .team__intro {
    padding: 4% 0 0;
    position: relative;
}
.page--about .team__intro-inner {
    position: relative;
}
.page--about .team__intro-inner.is-active .team__intro-blobby {
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
.page--about .team__intro-blobby {
    left: 7%;
    position: absolute;
    top: -75%;
    transform: rotateZ(225deg) scaleX(0.2) scaleY(0);
    transition: transform 0.8s cubic-bezier(0.4, 0.62, 0, 1);
    width: 70%;
    z-index: -1;
}
.page--about .team__intro-blobby canvas {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--about .team__intro-blobby {
        left: -25%;
        max-width: 450px;
        top: -105%;
        width: 110%;
    }
}
.page--about .team__intro-title,
.page--about .team__intro-text {
    opacity: 0;
    transform: translate(-25px, 0);
    transition: opacity 0.6s, transform 0.6s;
}
.page--about .team__intro-title {
    margin: 0 0 0 2vw;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--about .team__intro-title {
        margin-left: 0;
    }
}
.page--about .team__intro-title::after {
    background: url("../assets/about/team-shape1.svg") center/contain no-repeat;
    content: "";
    display: block;
    height: 90%;
    left: -3%;
    position: absolute;
    top: 70%;
    width: 20%;
}
@media only screen and (max-width: 786px) {
    .page--about .team__intro-title::after {
        height: 140%;
        left: -20%;
        top: 95%;
        width: 30%;
        z-index: -1;
    }
}
.page--about .team__intro-text {
    margin-top: 30px;
}
.page--about .team .scroll-arrow {
    top: 96%;
    z-index: 1;
}
.page--about .outro {
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--about .outro {
        height: 100vh;
        overflow: hidden;
    }
}
.page--about .outro img {
    display: block;
}
@media only screen and (max-width: 786px) {
    .page--about .outro img {
        height: 100%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
    }
}
.page--about .outro__inner {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.page--about .outro__inner a {
    display: block;
}
.page--about .outro__inner p {
    margin: 0;
}
.page--about .outro__content {
    margin-top: 5vh;
}
@media only screen and (max-width: 786px) {
    .page--about .outro__content {
        margin-top: 25vh;
    }
}
.page--about .outro__label {
    border-bottom: 1px solid black;
    margin-bottom: 2.5em;
    padding: 0 1em 1em;
}
.page--about footer {
    background: transparent;
    color: #000;
    overflow: visible;
    padding: 0;
    width: 100%;
}
.page--about footer .footer__content {
    bottom: 0;
    overflow: hidden;
    padding: 50px 0;
    position: absolute;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--about footer {
        display: none;
    }
}
.page--about footer .footer__contact a {
    color: #000;
}
.page--about footer .footer__contact-inner::before {
    background: #000;
}
@media only screen and (max-width: 1168px) {
    .page--about footer .footer__contact-inner {
        flex: 0 0 41%;
        margin-left: 59%;
    }
}
.page--about footer .footer__legal a {
    color: #000;
}
.page--careers .page-content img,
.page--careers .grid__row {
    width: 100%;
}
.page--careers .hero {
    padding: 10vh 0 50px;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--careers .hero {
        margin-bottom: 5vh;
    }
}
.page--careers .hero.is-active .hero__image-inner {
    transform: none;
}
.page--careers .hero.is-active .hero__image-inner::after {
    opacity: 0;
}
.page--careers .hero.is-active .hero__title,
.page--careers .hero.is-active .hero__subtitle,
.page--careers .hero.is-active .hero__subtitle .line--horizontal-custom,
.page--careers .hero.is-active .hero__subtitle .menu .menu__link-upper::after,
.menu .page--careers .hero.is-active .hero__subtitle .menu__link-upper::after,
.page--careers .hero.is-active .hero__subtitle .requirements__label-inner::before,
.page--careers .hero.is-active .hero__subtitle section.text .text__label-inner::before,
section.text .page--careers .hero.is-active .hero__subtitle .text__label-inner::before,
.page--careers .hero.is-active .hero__subtitle .summary__ethos-label::after,
.page--careers .hero.is-active .hero__subtitle .summary__ethos-graphic::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.valencia .project__client::before,
.page--home .project.valencia .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.android-wear .project__client::before,
.page--home .project.android-wear .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.athome .project__client::before,
.page--home .project.athome .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.blue-heart .project__client::before,
.page--home .project.blue-heart .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.chromebooks .project__client::before,
.page--home .project.chromebooks .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.famsf .project__client::before,
.page--home .project.famsf .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.git-merge .project__client::before,
.page--home .project.git-merge .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.jigsaw .project__client::before,
.page--home .project.jigsaw .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.le-tote .project__client::before,
.page--home .project.le-tote .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text .page--careers .hero.is-active .hero__subtitle .text__label-inner::after,
.page--careers .hero.is-active .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text .page--careers .hero.is-active .hero__subtitle .text__label-inner::after,
.page--careers .hero.is-active .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small .page--careers .hero.is-active .hero__subtitle .text__label-inner::after,
.page--careers .hero.is-active .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text .page--careers .hero.is-active .hero__subtitle .text__label-inner::after,
.page--careers .hero.is-active .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .page--careers .hero.is-active .hero__subtitle .text__label-inner::after,
.page--careers .hero.is-active .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .page--careers .hero.is-active .hero__subtitle .text__label-inner::after,
.page--careers .hero.is-active .hero__subtitle .page--home .project.wethepower .project__client::before,
.page--home .project.wethepower .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.wisesystems .project__client::before,
.page--home .project.wisesystems .page--careers .hero.is-active .hero__subtitle .project__client::before,
.page--careers .hero.is-active .hero__subtitle .page--home .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 .page--careers .hero.is-active .hero__subtitle .project__client::before {
    opacity: 1;
    transform: none;
}
.page--careers .hero__bg {
    align-items: flex-start;
    left: 0;
    position: absolute;
    top: 20vh;
    z-index: -1;
}
.page--careers .hero__bg-shape {
    height: 75vh;
    padding: 0;
    position: relative;
}
.page--careers .hero__bg-shape:nth-child(2) {
    top: 15vh;
}
.page--careers .hero__bg-shape:nth-child(3) {
    top: 30vh;
}
.page--careers .hero__bg-shape:nth-child(3) .hero__bg-shape-inner::before {
    background: #f7f7f6;
    bottom: 0;
    content: "";
    left: -1px;
    position: absolute;
    top: 0;
    width: 2px;
}
.page--careers .hero__bg-shape-inner {
    background: #f7f7f6;
    position: relative;
    height: 100%;
    width: 100%;
}
.page--careers .hero__image {
    position: static;
    transform: none;
}
.page--careers .hero__image-inner {
    position: relative;
    transform: scale(0.98);
    transition: transform 0.6s;
}
.page--careers .hero__image-inner::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark .page--careers .hero__image-inner::after {
    background: #1a1919;
}
body.is-black .page--careers .hero__image-inner::after {
    background: #000;
}
@media only screen and (max-width: 786px) {
    .page--careers .hero__image-inner {
        overflow: hidden;
    }
}
@media only screen and (max-width: 786px) {
    .page--careers .hero__image-inner img {
        height: 80vh;
        width: auto;
    }
}
.page--careers .hero__title,
.page--careers .hero__subtitle {
    transition: opacity 0.6s, transform 0.6s;
}
.page--careers .hero__content {
    position: absolute;
    top: 10%;
}
@media only screen and (max-width: 786px) {
    .page--careers .hero__content {
        top: 15%;
    }
}
.page--careers .hero__title {
    opacity: 0;
    transform: translateX(-50px);
}
.page--careers .hero__title h1 {
    font-size: 8.5714285714rem;
}
@media only screen and (max-width: 786px) {
    .page--careers .hero__title h1 {
        font-size: 70px;
    }
}
.page--careers .hero__subtitle {
    opacity: 0;
    transform: translateX(-50px);
    transition-delay: 0.4s;
}
@media only screen and (max-width: 786px) {
    .page--careers .hero__subtitle {
        left: 0;
        margin-left: 0;
        padding-left: 43vw;
        position: absolute;
        top: 85vh;
        width: 100%;
    }
}
.page--careers .hero__subtitle .line--horizontal-custom,
.page--careers .hero__subtitle .menu .menu__link-upper::after,
.menu .page--careers .hero__subtitle .menu__link-upper::after,
.page--careers .hero__subtitle .requirements__label-inner::before,
.page--careers .hero__subtitle section.text .text__label-inner::before,
section.text .page--careers .hero__subtitle .text__label-inner::before,
.page--careers .hero__subtitle .summary__ethos-label::after,
.page--careers .hero__subtitle .summary__ethos-graphic::before,
.page--careers .hero__subtitle .page--home .project.valencia .project__client::before,
.page--home .project.valencia .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.android-wear .project__client::before,
.page--home .project.android-wear .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.athome .project__client::before,
.page--home .project.athome .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.blue-heart .project__client::before,
.page--home .project.blue-heart .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.chromebooks .project__client::before,
.page--home .project.chromebooks .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.famsf .project__client::before,
.page--home .project.famsf .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.git-merge .project__client::before,
.page--home .project.git-merge .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.jigsaw .project__client::before,
.page--home .project.jigsaw .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.le-tote .project__client::before,
.page--home .project.le-tote .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text .page--careers .hero__subtitle .text__label-inner::after,
.page--careers .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text .page--careers .hero__subtitle .text__label-inner::after,
.page--careers .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small .page--careers .hero__subtitle .text__label-inner::after,
.page--careers .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text .page--careers .hero__subtitle .text__label-inner::after,
.page--careers .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .page--careers .hero__subtitle .text__label-inner::after,
.page--careers .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .page--careers .hero__subtitle .text__label-inner::after,
.page--careers .hero__subtitle .page--home .project.wethepower .project__client::before,
.page--home .project.wethepower .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.wisesystems .project__client::before,
.page--home .project.wisesystems .page--careers .hero__subtitle .project__client::before,
.page--careers .hero__subtitle .page--home .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 .page--careers .hero__subtitle .project__client::before {
    width: 90px;
    margin-right: 0;
    transform: translateX(-50px) scale(0);
    transform-origin: 0 50%;
    transition: opacity 0.6s 0.4s, transform 0.6s 0.4s;
    vertical-align: middle;
}
@media only screen and (max-width: 1500px) {
    .page--careers .hero__subtitle .line--horizontal-custom,
    .page--careers .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--careers .hero__subtitle .menu__link-upper::after,
    .page--careers .hero__subtitle .requirements__label-inner::before,
    .page--careers .hero__subtitle section.text .text__label-inner::before,
    section.text .page--careers .hero__subtitle .text__label-inner::before,
    .page--careers .hero__subtitle .summary__ethos-label::after,
    .page--careers .hero__subtitle .summary__ethos-graphic::before,
    .page--careers .hero__subtitle .page--home .project.valencia .project__client::before,
    .page--home .project.valencia .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.android-wear .project__client::before,
    .page--home .project.android-wear .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.athome .project__client::before,
    .page--home .project.athome .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.famsf .project__client::before,
    .page--home .project.famsf .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.git-merge .project__client::before,
    .page--home .project.git-merge .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.le-tote .project__client::before,
    .page--home .project.le-tote .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .page--home .project.wethepower .project__client::before,
    .page--home .project.wethepower .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .page--careers .hero__subtitle .project__client::before {
        width: calc(12.9411764706px + 9.8039215686vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--careers .hero__subtitle .line--horizontal-custom,
    .page--careers .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--careers .hero__subtitle .menu__link-upper::after,
    .page--careers .hero__subtitle .requirements__label-inner::before,
    .page--careers .hero__subtitle section.text .text__label-inner::before,
    section.text .page--careers .hero__subtitle .text__label-inner::before,
    .page--careers .hero__subtitle .summary__ethos-label::after,
    .page--careers .hero__subtitle .summary__ethos-graphic::before,
    .page--careers .hero__subtitle .page--home .project.valencia .project__client::before,
    .page--home .project.valencia .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.android-wear .project__client::before,
    .page--home .project.android-wear .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.athome .project__client::before,
    .page--home .project.athome .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.famsf .project__client::before,
    .page--home .project.famsf .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.git-merge .project__client::before,
    .page--home .project.git-merge .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.le-tote .project__client::before,
    .page--home .project.le-tote .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .page--home .project.wethepower .project__client::before,
    .page--home .project.wethepower .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .page--careers .hero__subtitle .project__client::before {
        width: 160px;
    }
}
@media only screen and (max-width: 786px) {
    .page--careers .hero__subtitle .line--horizontal-custom,
    .page--careers .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--careers .hero__subtitle .menu__link-upper::after,
    .page--careers .hero__subtitle .requirements__label-inner::before,
    .page--careers .hero__subtitle section.text .text__label-inner::before,
    section.text .page--careers .hero__subtitle .text__label-inner::before,
    .page--careers .hero__subtitle .summary__ethos-label::after,
    .page--careers .hero__subtitle .summary__ethos-graphic::before,
    .page--careers .hero__subtitle .page--home .project.valencia .project__client::before,
    .page--home .project.valencia .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.android-wear .project__client::before,
    .page--home .project.android-wear .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.athome .project__client::before,
    .page--home .project.athome .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.famsf .project__client::before,
    .page--home .project.famsf .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.git-merge .project__client::before,
    .page--home .project.git-merge .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.le-tote .project__client::before,
    .page--home .project.le-tote .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .page--home .project.wethepower .project__client::before,
    .page--home .project.wethepower .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .page--careers .hero__subtitle .project__client::before {
        display: inline-block;
        left: 0;
        position: absolute;
        top: calc(50% - 3px);
        width: 40vw;
    }
}
@media only screen and (min-width: 1200px) {
    .page--careers .hero__subtitle .line--horizontal-custom,
    .page--careers .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--careers .hero__subtitle .menu__link-upper::after,
    .page--careers .hero__subtitle .requirements__label-inner::before,
    .page--careers .hero__subtitle section.text .text__label-inner::before,
    section.text .page--careers .hero__subtitle .text__label-inner::before,
    .page--careers .hero__subtitle .summary__ethos-label::after,
    .page--careers .hero__subtitle .summary__ethos-graphic::before,
    .page--careers .hero__subtitle .page--home .project.valencia .project__client::before,
    .page--home .project.valencia .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.android-wear .project__client::before,
    .page--home .project.android-wear .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.athome .project__client::before,
    .page--home .project.athome .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.famsf .project__client::before,
    .page--home .project.famsf .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.git-merge .project__client::before,
    .page--home .project.git-merge .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.le-tote .project__client::before,
    .page--home .project.le-tote .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--careers .hero__subtitle .text__label-inner::after,
    .page--careers .hero__subtitle .page--home .project.wethepower .project__client::before,
    .page--home .project.wethepower .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .page--careers .hero__subtitle .project__client::before,
    .page--careers .hero__subtitle .page--home .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .page--careers .hero__subtitle .project__client::before {
        margin-right: 10px;
    }
}
@media only screen and (max-width: 786px) {
    .page--careers .hero__subtitle.t-meta-medium {
        font-size: 15px;
    }
}
.page--careers section.summary {
    margin: 150px 0;
}
@media only screen and (max-width: 786px) {
    .page--careers section.summary {
        margin-top: 75px;
    }
}
.page--careers .summary__bio,
.page--careers .summary__ethos-label,
.page--careers .summary__ethos-graphic,
.page--careers .summary__ethos-graphic::before,
.page--careers .summary__ethos-title,
.page--careers .summary__ethos-description {
    transition: transform 0.6s, opacity 0.6s;
}
.page--careers .summary__bio {
    opacity: 0;
    transform: translateX(-50px);
}
.page--careers .summary__bio.is-active {
    opacity: 1;
    transform: none;
}
.page--careers .summary__bio-name {
    position: relative;
}
.page--careers .summary__bio-name::before {
    background: url("../assets/careers/description-shape.svg") center/contain no-repeat;
    bottom: 5px;
    content: "";
    left: -10px;
    position: absolute;
    right: -10px;
    top: -15px;
    z-index: -1;
}
.page--careers .summary__ethos {
    margin-top: 100px;
}
.page--careers .summary__ethos.is-active .summary__ethos-label,
.page--careers .summary__ethos.is-active .summary__ethos-graphic,
.page--careers .summary__ethos.is-active .summary__ethos-graphic::before,
.page--careers .summary__ethos.is-active .summary__ethos-title,
.page--careers .summary__ethos.is-active .summary__ethos-description {
    opacity: 1;
    transform: none;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:first-child .summary__ethos-graphic {
    transition-delay: 0.2s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:first-child .summary__ethos-graphic::before {
    transition-delay: 0.1s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:first-child .summary__ethos-title {
    transition-delay: 0.7s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:first-child .summary__ethos-description {
    transition-delay: 0.75s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(2) .summary__ethos-graphic {
    transition-delay: 0.4s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(2) .summary__ethos-graphic::before {
    transition-delay: 0.3s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(2) .summary__ethos-title {
    transition-delay: 0.8s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(2) .summary__ethos-description {
    transition-delay: 0.85s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(3) .summary__ethos-graphic {
    transition-delay: 0.6s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(3) .summary__ethos-graphic::before {
    transition-delay: 0.5s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(3) .summary__ethos-title {
    transition-delay: 0.9s;
}
.page--careers .summary__ethos.is-active .summary__ethos-item:nth-child(3) .summary__ethos-description {
    transition-delay: 0.95s;
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-container {
        flex-flow: row wrap;
    }
}
.page--careers .summary__ethos-label {
    align-self: flex-start;
    opacity: 0;
    position: relative;
    text-align: center;
    top: 82px;
    transform: translateX(-50px);
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-label {
        text-align: left;
        top: initial;
    }
}
.page--careers .summary__ethos-label::before {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    background: url("../assets/careers/ethos-label-shape.svg") center/contain no-repeat;
    bottom: -15px;
    content: "";
    left: -20px;
    position: absolute;
    right: 20px;
    top: -5px;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-label::before {
        bottom: -12px;
        left: -26px;
        right: auto;
        top: -13px;
        width: 60px;
    }
}
.page--careers .summary__ethos-label::after {
    content: "";
    height: 1px;
    left: 60px;
    position: absolute;
    top: 5px;
    width: 80vw;
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-label::after {
        width: 65vw;
    }
}
.page--careers .summary__ethos-list {
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-list {
        flex-flow: row wrap;
    }
}
.page--careers .summary__ethos-item {
    width: 30%;
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-item {
        margin-top: 5vh;
        width: 100%;
    }
    .page--careers .summary__ethos-item.mobile-flipped img {
        transform: scaleX(-1);
    }
}
.page--careers .summary__ethos-item:first-child .summary__ethos-graphic::before {
    width: 0px;
    left: -5%;
}
@media only screen and (max-width: 1500px) {
    .page--careers .summary__ethos-item:first-child .summary__ethos-graphic::before {
        width: calc(-110.0840336134px + 14.0056022409vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--careers .summary__ethos-item:first-child .summary__ethos-graphic::before {
        width: 100px;
    }
}
.page--careers .summary__ethos-graphic {
    height: 200px;
    margin-bottom: 15px;
    opacity: 0;
    position: relative;
    text-align: center;
    transform: translateX(-50px);
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-graphic {
        display: inline-block;
        margin: 0 10%;
        text-align: left;
        width: auto;
    }
}
.page--careers .summary__ethos-graphic .summary__ethos-image {
    height: 100%;
    max-width: 100%;
    width: auto;
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-graphic .summary__ethos-image {
        height: 120%;
        transform: translateX(-25%);
    }
}
.page--careers .summary__ethos-graphic::before {
    width: 0px;
    content: "";
    left: calc(120px + -16.6666666667vw);
    opacity: 0;
    position: absolute;
    top: 90px;
    transform: scale(0);
    transform-origin: 0 50%;
}
@media only screen and (max-width: 1500px) {
    .page--careers .summary__ethos-graphic::before {
        width: calc(-242.1848739496px + 30.81232493vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--careers .summary__ethos-graphic::before {
        width: 220px;
    }
}
@media only screen and (min-width: 1500px) {
    .page--careers .summary__ethos-graphic::before {
        left: -130px;
    }
}
.page--careers .summary__ethos-text {
    margin: 0 auto;
    width: 80%;
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-text {
        width: 83.33%;
    }
}
.page--careers .summary__ethos-title {
    min-height: 100px;
    opacity: 0;
    transform: translateY(50px);
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-title {
        margin-bottom: 20px;
        min-height: initial;
    }
}
.page--careers .summary__ethos-description {
    opacity: 0;
    transform: translateY(50px);
}
@media only screen and (max-width: 786px) {
    .page--careers .summary__ethos-description {
        width: 85%;
    }
}
.page--careers .photos {
    margin: 30vw 0 150px;
    padding-top: 10vw;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos {
        margin: 0;
        padding-top: 300px;
    }
}
@media only screen and (max-width: 475px) {
    .page--careers .photos {
        padding-top: 400px;
    }
}
.page--careers .photos.is-active .photos__title-text,
.page--careers .photos.is-active .photos__subtitle,
.page--careers .photos.is-active .photos__title-blobby {
    opacity: 1;
    transform: none;
}
.page--careers .photos.is-active .photos__subtitle {
    transition-delay: 0.3s;
}
.page--careers .photos__title-text,
.page--careers .photos__subtitle,
.page--careers .photos__grid-cell {
    transition: opacity 0.6s, transform 0.6s;
}
.page--careers .photos__bg {
    align-items: flex-start;
    position: absolute;
    top: 75%;
    z-index: -1;
}
.page--careers .photos__bg-shape {
    height: 75vh;
    padding: 0;
    position: relative;
    width: 100%;
}
.page--careers .photos__bg-shape:nth-child(2) {
    top: 20vh;
}
.page--careers .photos__bg-shape:nth-child(3) {
    top: 40vh;
}
.page--careers .photos__bg-shape-inner {
    background: #f7f7f6;
    height: 100%;
    width: 100%;
}
.page--careers .photos__grid {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    display: flex;
    width: 150vw;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__grid {
        width: 200vw;
        z-index: 2;
    }
}
.page--careers .photos__grid-col {
    flex: 0 0 25%;
    position: relative;
}
.page--careers .photos__grid-col:nth-child(1) {
    top: -5vw;
}
.page--careers .photos__grid-col:nth-child(2) {
    top: -20vw;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__grid-col:nth-child(2) {
        top: -5vw;
    }
}
.page--careers .photos__grid-col:nth-child(4) {
    top: -10vw;
}
.page--careers .photos__grid-cell {
    opacity: 0;
    padding: 2px;
    transform: translateY(50px);
}
.page--careers .photos__grid-cell.is-active {
    opacity: 1;
    transform: none;
}
.page--careers .photos__grid-cell-inner {
    overflow: hidden;
    padding-top: 75%;
    position: relative;
}
.page--careers .photos__grid-photos {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.page--careers .photos__grid-photos.is-revealed {
    transform: translateY(-100%);
    transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.page--careers .photos__grid-photo {
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.page--careers .photos__grid-photo--next {
    transform: translateY(100%);
}
.page--careers .photos__grid-quote {
    display: none;
    position: relative;
    z-index: 1;
}
.page--careers .photos__grid-quote .photos__grid-cell-inner {
    background: none;
    padding-top: 125%;
}
.page--careers .photos__grid-quote-inner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    width: 150%;
}
.page--careers .photos__grid-quote-bg {
    background: url("../assets/careers/quote-bg.png") center/cover no-repeat;
    bottom: 10%;
    left: 15%;
    position: absolute;
    right: 15%;
    top: 10%;
}
.page--careers .photos__grid-quote-symbol {
    left: 0;
    position: absolute;
    top: 0;
}
.page--careers .photos__grid-quote-symbol .symbol__bg {
    background: url("../assets/careers/quote-shape.svg") center/contain no-repeat;
    bottom: -80%;
    left: -80%;
    position: absolute;
    right: -80%;
    top: -80%;
}
.page--careers .photos__grid-quote-symbol .symbol__image {
    height: 25px;
    position: relative;
    width: 28px;
}
.page--careers .photos__grid-quote-text {
    display: inline;
    color: #d8d8d8;
    position: relative;
}
.page--careers .photos__grid-quote-attribution {
    display: inline;
    margin-left: 30px;
    position: relative;
    top: 30px;
}
.page--careers .photos__grid-quote-attribution::before {
    background: #000;
    content: "";
    display: block;
    height: 60px;
    left: -16px;
    position: absolute;
    top: -33px;
    transform: rotate(50deg);
    width: 1px;
}
.page--careers .photos__title {
    position: absolute;
    top: -8vw;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__title {
        top: 0vw;
    }
}
.page--careers .photos__title-row {
    position: relative;
}
.page--careers .photos__title-blobby {
    bottom: -10px;
    top: -10px;
    position: absolute;
    transform: rotateZ(225deg) scaleX(0.2) scaleY(0);
    transition: transform 0.8s cubic-bezier(0.4, 0.62, 0, 1);
    width: 100%;
}
.page--careers .photos__title-blobby canvas {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__title-blobby {
        bottom: 80px;
        max-width: 417px;
    }
}
.page--careers .photos__title-inner {
    position: relative;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__title-inner {
        width: 80vw;
    }
}
.page--careers .photos__title-text {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateX(-50px);
    text-align: center;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__title-text {
        text-align: left;
    }
}
.page--careers .photos__subtitle {
    left: 5%;
    margin: 0 auto;
    opacity: 0;
    position: relative;
    transform: translateX(-50px);
    width: 80%;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__subtitle {
        left: 0;
        width: 100%;
    }
}
.page--careers .photos__big-image {
    margin-top: -37vw;
    position: relative;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--careers .photos__big-image {
        margin-top: -15vw;
    }
    .page--careers .photos__big-image img {
        height: 80vh;
        -o-object-fit: cover;
        object-fit: cover;
    }
}
.page--careers .perks {
    margin: 100px 0 200px;
}
@media only screen and (max-width: 786px) {
    .page--careers .perks {
        margin: 100px 0;
    }
}
.page--careers .perks__label.is-active .perks__label-text,
.page--careers .perks__label.is-active .perks__label-line {
    opacity: 1;
    transform: none;
}
.page--careers .perks__label-text,
.page--careers .perks__label-line {
    transition: opacity 0.6s, transform 0.6s;
}
.page--careers .perks__label-inner {
    align-items: center;
    display: flex;
}
.page--careers .perks__label-text {
    flex: 0 0 60px;
    opacity: 0;
    position: relative;
    transform: translateX(-50px);
}
.page--careers .perks__label-text::before {
    background: url("../assets/careers/perks-shape.svg") center/contain no-repeat;
    bottom: -5px;
    content: "";
    left: -10px;
    position: absolute;
    right: -10px;
    top: -15px;
    z-index: -1;
}
.page--careers .perks__label-line {
    background: #000;
    flex: 1 1 auto;
    height: 1px;
    margin-left: 20px;
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.page--careers .perks__text {
    margin-top: 50px;
}
@media only screen and (max-width: 786px) {
    .page--careers .perks__text {
        margin-top: 30px;
    }
}
.page--careers .careers__grid-inner {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
}
.page--careers .careers__grid-item {
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: 0;
    padding: 4vw 5%;
    width: 33%;
}
@media only screen and (max-width: 786px) {
    .page--careers .careers__grid-item {
        flex: 0 0 100%;
        margin: 10px 0;
        padding: 8.33vw;
    }
}
.page--careers .careers__grid-name {
    margin-bottom: 20px;
}
.page--careers .positions {
    padding-bottom: 150px;
    position: relative;
}
.page--careers .positions__bg {
    align-items: flex-start;
    left: 0;
    position: absolute;
    top: 20vh;
    z-index: -1;
}
.page--careers .positions__bg-shape {
    height: 150vh;
    padding: 0;
    position: relative;
    width: 100%;
}
.page--careers .positions__bg-shape:nth-child(2) {
    height: 100vh;
}
.page--careers .positions__bg-shape:nth-child(3) {
    height: 50vh;
}
.page--careers .positions__bg-shape-inner {
    background: #f7f7f6;
    height: 100%;
    width: 100%;
}
.page--careers .positions__title-shape {
    position: relative;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--careers .positions__title-shape img {
        transform: translate(-30%, 10%);
    }
}
.page--careers .positions__title-blobby {
    right: 120px;
    position: relative;
    transform: rotateZ(225deg) scaleX(0.2) scaleY(0);
    transition: transform 0.8s cubic-bezier(0.4, 0.62, 0, 1);
    width: 100%;
}
.page--careers .positions__title-blobby canvas {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--careers .positions__image img {
        height: 80vh;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 0%;
        object-position: 0%;
        width: 100%;
    }
}
.page--careers .positions__label {
    position: absolute;
    top: 40%;
}
@media only screen and (max-width: 786px) {
    .page--careers .positions__label {
        top: 87vh;
        z-index: 2;
    }
}
.page--careers .positions__label.is-active .positions__label-line,
.page--careers .positions__label.is-active .positions__label-text {
    opacity: 1;
    transform: none;
}
.page--careers .positions__label-line,
.page--careers .positions__label-text {
    transition: opacity 0.6s, transform 0.6s;
}
.page--careers .positions__label-inner {
    align-items: center;
    display: flex;
}
.page--careers .positions__label-line {
    background: black;
    flex: 1 1 auto;
    height: 1px;
    margin-right: 20px;
    transform: scaleX(0);
    transform-origin: 100% 50%;
}
.page--careers .positions__label-text {
    flex: 0 0 100px;
    opacity: 0;
    position: relative;
    transform: translateX(50px);
}
.page--careers .positions__label-text::before {
    background: url("../assets/careers/positions-shape.svg") center/contain no-repeat;
    bottom: -5px;
    content: "";
    left: -10px;
    position: absolute;
    right: -10px;
    top: -15px;
    z-index: -1;
}
.page--careers .positions__title {
    pointer-events: none;
    position: absolute;
    top: 32%;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .page--careers .positions__title {
        position: relative;
        top: initial;
        z-index: 0;
    }
}
.page--careers .positions__title.is-active .positions__title-text,
.page--careers .positions__title.is-active .positions__title-blobby {
    opacity: 1;
    transform: none;
}
.page--careers .positions__title-text {
    opacity: 0;
    pointer-events: all;
    position: absolute;
    top: 35%;
    transform: translateX(-50px);
    transition: opacity 0.6s, transform 0.6s;
    width: 100%;
}
.page--careers .position__description {
    margin: 20px 0;
}
.page--careers .position__link {
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.page--careers .positions__position {
    background-color: rgba(255, 255, 255, 0);
    box-shadow: none;
    cursor: pointer;
    display: none;
    position: relative;
    transform: translateY(50px);
}
.page--careers .positions__position:hover {
    background-color: #fff;
    box-shadow: 27px 23px 107px -6px rgba(0, 0, 0, 0.32);
    transition-delay: 0s;
}
.page--careers .positions__position.is-visible {
    display: block;
}
.page--careers .positions__list {
    margin-top: 550px;
    position: relative;
}
.page--careers .positions__list.is-active .positions__position {
    opacity: 1;
    transform: none;
}
.page--careers .positions__list.is-active .positions__position:nth-child(1) {
    transition: opacity 0.6s 0.1s, transform 0.6s 0.1s, background-color 0.3s 0s, box-shadow 0.3s 0s;
}
.page--careers .positions__list.is-active .positions__position:nth-child(2) {
    transition: opacity 0.6s 0.2s, transform 0.6s 0.2s, background-color 0.3s 0s, box-shadow 0.3s 0s;
}
.page--careers .positions__list.is-active .positions__position:nth-child(3) {
    transition: opacity 0.6s 0.3s, transform 0.6s 0.3s, background-color 0.3s 0s, box-shadow 0.3s 0s;
}
.page--careers .positions__list.is-active .positions__position:nth-child(4) {
    transition: opacity 0.6s 0.4s, transform 0.6s 0.4s, background-color 0.3s 0s, box-shadow 0.3s 0s;
}
.page--careers .positions__list.is-active .positions__position:nth-child(5) {
    transition: opacity 0.6s 0.5s, transform 0.6s 0.5s, background-color 0.3s 0s, box-shadow 0.3s 0s;
}
.page--careers .positions__list.is-active .positions__position:nth-child(6) {
    transition: opacity 0.6s 0.6s, transform 0.6s 0.6s, background-color 0.3s 0s, box-shadow 0.3s 0s;
}
@media only screen and (max-width: 786px) {
    .page--careers .positions__list {
        margin-top: 10vw;
    }
}
.page--careers .positions__list-cities {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: -100px;
}
@media only screen and (max-width: 786px) {
    .page--careers .positions__list-cities {
        top: 8vw;
    }
}
.page--careers .positions__list-city {
    cursor: pointer;
    padding: 20px;
    position: relative;
}
.page--careers .positions__list-city::after {
    background: #000;
    bottom: 13px;
    content: "";
    height: 2px;
    left: 20px;
    position: absolute;
    right: 20px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease-out;
}
.page--careers .positions__list-city.is-active::after {
    transform: scaleX(1);
}
@media only screen and (max-width: 786px) {
    .page--careers .positions__list-inner {
        margin-top: 20vw;
    }
}
section.error {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    min-height: 600px;
}
.error__inner {
    position: relative;
}
.error__line {
    background: black;
    display: inline-block;
    height: 0.1em;
    vertical-align: middle;
    width: 1em;
}
.error__shape {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    top: 20%;
}
.error__shape canvas {
    max-width: 100%;
}
.error__number {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    top: 43%;
    opacity: 0.05;
    position: absolute;
    z-index: -1;
}
.error__title {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: "Superior Black", serif;
    font-size: 5.5714285714rem;
    top: 47%;
    white-space: nowrap;
}
.error__subtitle {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    top: 70%;
}
.error__subtitle a {
    border-bottom: 1px solid black;
}
.page--home {
    position: relative;
}
.page--home::after {
    background-color: #1f1d1d;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateZ(0);
    transition: opacity 0.6s;
    will-change: opacity;
    z-index: -1;
}
.page--home.is-active::after {
    opacity: 1;
}
.page--home.is-active .header__logo-inner::after,
.page--home.is-active .sidebar__logo::after,
.page--home.is-active .header__logotype-inner::after {
    opacity: 1;
}
.page--home.is-active .sidebar .line--vertical-sm,
.page--home.is-active .header__logotype .line--horizontal-custom,
.page--home.is-active .header__logotype .menu .menu__link-upper::after,
.menu .page--home.is-active .header__logotype .menu__link-upper::after,
.page--home.is-active .header__logotype .requirements__label-inner::before,
.page--home.is-active .header__logotype section.text .text__label-inner::before,
section.text .page--home.is-active .header__logotype .text__label-inner::before,
.page--home.is-active .header__logotype .page--careers .summary__ethos-label::after,
.page--careers .page--home.is-active .header__logotype .summary__ethos-label::after,
.page--home.is-active .header__logotype .page--careers .summary__ethos-graphic::before,
.page--careers .page--home.is-active .header__logotype .summary__ethos-graphic::before,
.page--home.is-active .header__logotype .project.valencia .project__client::before,
.page--home.is-active .project.valencia .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.android-wear .project__client::before,
.page--home.is-active .project.android-wear .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.athome .project__client::before,
.page--home.is-active .project.athome .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.blue-heart .project__client::before,
.page--home.is-active .project.blue-heart .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.chromebooks .project__client::before,
.page--home.is-active .project.chromebooks .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.famsf .project__client::before,
.page--home.is-active .project.famsf .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.git-merge .project__client::before,
.page--home.is-active .project.git-merge .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.jigsaw .project__client::before,
.page--home.is-active .project.jigsaw .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.le-tote .project__client::before,
.page--home.is-active .project.le-tote .header__logotype .project__client::before,
.page--home.is-active .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text .page--home.is-active .header__logotype .text__label-inner::after,
.page--home.is-active .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text .page--home.is-active .header__logotype .text__label-inner::after,
.page--home.is-active .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small .page--home.is-active .header__logotype .text__label-inner::after,
.page--home.is-active .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text .page--home.is-active .header__logotype .text__label-inner::after,
.page--home.is-active .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .page--home.is-active .header__logotype .text__label-inner::after,
.page--home.is-active .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .page--home.is-active .header__logotype .text__label-inner::after,
.page--home.is-active .header__logotype .project.wethepower .project__client::before,
.page--home.is-active .project.wethepower .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.wisesystems .project__client::before,
.page--home.is-active .project.wisesystems .header__logotype .project__client::before,
.page--home.is-active .header__logotype .project.youtubee3 .project__client::before,
.page--home.is-active .project.youtubee3 .header__logotype .project__client::before {
    background-color: #fff;
}
.page--home.is-active .header__open--text {
    color: #fff;
}
.page--home.is-active .header__open--text::before {
    background-color: #fff;
}
.page--home.is-active .header__open--text::after {
    background-color: #1a1919;
}
.page--home.is-active.menu-active .header__logo-inner::after,
.page--home.is-active.menu-active .sidebar__logo::after,
.page--home.is-active.menu-active .header__logotype-inner::after {
    opacity: 0;
}
.page--home.is-active.menu-active .sidebar .line--vertical-sm,
.page--home.is-active.menu-active .header__logotype .line--horizontal-custom,
.page--home.is-active.menu-active .header__logotype .menu .menu__link-upper::after,
.menu .page--home.is-active.menu-active .header__logotype .menu__link-upper::after,
.page--home.is-active.menu-active .header__logotype .requirements__label-inner::before,
.page--home.is-active.menu-active .header__logotype section.text .text__label-inner::before,
section.text .page--home.is-active.menu-active .header__logotype .text__label-inner::before,
.page--home.is-active.menu-active .header__logotype .page--careers .summary__ethos-label::after,
.page--careers .page--home.is-active.menu-active .header__logotype .summary__ethos-label::after,
.page--home.is-active.menu-active .header__logotype .page--careers .summary__ethos-graphic::before,
.page--careers .page--home.is-active.menu-active .header__logotype .summary__ethos-graphic::before,
.page--home.is-active.menu-active .header__logotype .project.valencia .project__client::before,
.page--home.is-active.menu-active .project.valencia .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.android-wear .project__client::before,
.page--home.is-active.menu-active .project.android-wear .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.athome .project__client::before,
.page--home.is-active.menu-active .project.athome .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.blue-heart .project__client::before,
.page--home.is-active.menu-active .project.blue-heart .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.chromebooks .project__client::before,
.page--home.is-active.menu-active .project.chromebooks .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.famsf .project__client::before,
.page--home.is-active.menu-active .project.famsf .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.git-merge .project__client::before,
.page--home.is-active.menu-active .project.git-merge .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.jigsaw .project__client::before,
.page--home.is-active.menu-active .project.jigsaw .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.le-tote .project__client::before,
.page--home.is-active.menu-active .project.le-tote .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text .page--home.is-active.menu-active .header__logotype .text__label-inner::after,
.page--home.is-active.menu-active .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text .page--home.is-active.menu-active .header__logotype .text__label-inner::after,
.page--home.is-active.menu-active .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small .page--home.is-active.menu-active .header__logotype .text__label-inner::after,
.page--home.is-active.menu-active .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text .page--home.is-active.menu-active .header__logotype .text__label-inner::after,
.page--home.is-active.menu-active .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .page--home.is-active.menu-active .header__logotype .text__label-inner::after,
.page--home.is-active.menu-active .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .page--home.is-active.menu-active .header__logotype .text__label-inner::after,
.page--home.is-active.menu-active .header__logotype .project.wethepower .project__client::before,
.page--home.is-active.menu-active .project.wethepower .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.wisesystems .project__client::before,
.page--home.is-active.menu-active .project.wisesystems .header__logotype .project__client::before,
.page--home.is-active.menu-active .header__logotype .project.youtubee3 .project__client::before,
.page--home.is-active.menu-active .project.youtubee3 .header__logotype .project__client::before {
    background-color: #000;
}
.page--home.is-active.menu-active .header__open--text {
    color: #000;
}
@media only screen and (max-width: 786px) {
    .page--home.menu-active .header__logo {
        opacity: 1;
        transform: translateX(0);
    }
    .page--home.menu-active .header__logotype {
        opacity: 0 !important;
        transform: translateX(20px) !important;
        transition-delay: 0s !important;
    }
    .page--home.menu-active .header__logotype a {
        pointer-events: none;
    }
}
@media only screen and (max-width: 786px) {
    .page--home header.is-active .header__logotype {
        opacity: 1;
        transform: none;
        transition: all 0.3s ease-in-out 0.35s;
    }
    .page--home header .header__logo {
        opacity: 0;
        pointer-events: none;
        transform: translateX(20px);
        transition: all 0.3s ease-in-out;
    }
    .page--home header .header__logotype {
        margin-top: 17px;
    }
    .page--home header.is-expanded .header__logo {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
    .page--home header.is-expanded .header__logotype {
        opacity: 0;
        transform: translateX(20px);
        transition-delay: 0s;
    }
    .page--home header.is-expanded .header__logotype a {
        pointer-events: none;
    }
}
.page--home .header__opener {
    opacity: 0;
}
.page--home .header__opener.is-active {
    opacity: 1;
    transition-delay: 0.55s;
}
.page--home .hero {
    padding: 10vh 0 20vh;
    position: relative;
}
.page--home .hero.is-active .hero__title .hero__subtitle-text,
.page--home .hero.is-active .hero__title .line--horizontal-custom,
.page--home .hero.is-active .hero__title .menu .menu__link-upper::after,
.menu .page--home .hero.is-active .hero__title .menu__link-upper::after,
.page--home .hero.is-active .hero__title .requirements__label-inner::before,
.page--home .hero.is-active .hero__title section.text .text__label-inner::before,
section.text .page--home .hero.is-active .hero__title .text__label-inner::before,
.page--home .hero.is-active .hero__title .page--careers .summary__ethos-label::after,
.page--careers .page--home .hero.is-active .hero__title .summary__ethos-label::after,
.page--home .hero.is-active .hero__title .page--careers .summary__ethos-graphic::before,
.page--careers .page--home .hero.is-active .hero__title .summary__ethos-graphic::before,
.page--home .hero.is-active .hero__title .project.valencia .project__client::before,
.page--home .project.valencia .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.android-wear .project__client::before,
.page--home .project.android-wear .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.athome .project__client::before,
.page--home .project.athome .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.blue-heart .project__client::before,
.page--home .project.blue-heart .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.chromebooks .project__client::before,
.page--home .project.chromebooks .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.famsf .project__client::before,
.page--home .project.famsf .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.git-merge .project__client::before,
.page--home .project.git-merge .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.jigsaw .project__client::before,
.page--home .project.jigsaw .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.le-tote .project__client::before,
.page--home .project.le-tote .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .project.wethepower .project__client::before,
.page--home .project.wethepower .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.wisesystems .project__client::before,
.page--home .project.wisesystems .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title h1 {
    opacity: 1;
    transform: none;
}
.page--home .hero.is-active .hero__title .hero__subtitle-text {
    transition-delay: 0.65s;
}
.page--home .hero.is-active .hero__title .line--horizontal-custom,
.page--home .hero.is-active .hero__title .menu .menu__link-upper::after,
.menu .page--home .hero.is-active .hero__title .menu__link-upper::after,
.page--home .hero.is-active .hero__title .requirements__label-inner::before,
.page--home .hero.is-active .hero__title section.text .text__label-inner::before,
section.text .page--home .hero.is-active .hero__title .text__label-inner::before,
.page--home .hero.is-active .hero__title .page--careers .summary__ethos-label::after,
.page--careers .page--home .hero.is-active .hero__title .summary__ethos-label::after,
.page--home .hero.is-active .hero__title .page--careers .summary__ethos-graphic::before,
.page--careers .page--home .hero.is-active .hero__title .summary__ethos-graphic::before,
.page--home .hero.is-active .hero__title .project.valencia .project__client::before,
.page--home .project.valencia .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.android-wear .project__client::before,
.page--home .project.android-wear .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.athome .project__client::before,
.page--home .project.athome .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.blue-heart .project__client::before,
.page--home .project.blue-heart .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.chromebooks .project__client::before,
.page--home .project.chromebooks .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.famsf .project__client::before,
.page--home .project.famsf .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.git-merge .project__client::before,
.page--home .project.git-merge .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.jigsaw .project__client::before,
.page--home .project.jigsaw .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.le-tote .project__client::before,
.page--home .project.le-tote .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .page--home .hero.is-active .hero__title .text__label-inner::after,
.page--home .hero.is-active .hero__title .project.wethepower .project__client::before,
.page--home .project.wethepower .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.wisesystems .project__client::before,
.page--home .project.wisesystems .hero.is-active .hero__title .project__client::before,
.page--home .hero.is-active .hero__title .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 .hero.is-active .hero__title .project__client::before {
    transition-delay: 0.55s;
}
.page--home .hero.is-active .hero__title h1 {
    transition-delay: 0.35s;
}
@media only screen and (max-width: 786px) {
    .page--home .hero.is-active .hero__title h1 {
        transition-delay: 0.55s;
    }
}
.page--home .hero.is-active .hero__video-group .hero__video-inner {
    box-shadow: 3px 7px 16px -6px rgba(0, 0, 0, 0.07), 15px 20px 37px -2px rgba(0, 0, 0, 0.07), 20px 42px 80px 6px rgba(0, 0, 0, 0.07), 20px 42px 120px 10px rgba(0, 0, 0, 0.07);
    opacity: 1;
    transform: scale(1) translateZ(0);
    transition-delay: 0.95s;
}
@media only screen and (max-width: 786px) {
    .page--home .hero.is-active .hero__video-group .hero__video-inner {
        box-shadow: 3px 4px 9px -4px rgba(0, 0, 0, 0.05), 8px 12px 20px -2px rgba(0, 0, 0, 0.04), 12px 23px 42px 5px rgba(0, 0, 0, 0.04), 14px 26px 64px 7px rgba(0, 0, 0, 0.04);
    }
}
@media only screen and (max-width: 786px) {
    .page--home .hero.is-active .hero__video-group .hero__video-inner {
        box-shadow: none;
    }
}
.page--home .hero.is-active .hero__video-group .hero__video-inner::before {
    transform: scaleY(0) translateZ(0);
    transition-delay: 1.05s;
}
.page--home .hero__bg {
    bottom: 15%;
    position: absolute;
    top: 20%;
    width: 100%;
    z-index: -1;
}
.page--home .hero__bg-shape {
    height: 100%;
    transform: skewY(-20deg);
    transform-origin: 50% 0;
}
.page--home .hero__bg-shape-inner {
    background: #f7f7f6;
    height: 100%;
    width: 100%;
}
.page--home .hero__video-inner {
    height: 75vh;
    opacity: 0;
    overflow: hidden;
    position: relative;
    transform: scale(0.95) translateZ(0);
    transition: box-shadow 1.7s cubic-bezier(0.2, 0.57, 0, 1.04), opacity 1s, transform 1s cubic-bezier(0.2, 0.57, 0, 1.04);
}
.page--home .hero__video-inner video {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--home .hero__video-inner video {
        height: 100%;
        width: auto;
    }
}
.page--home .hero__video-inner::before {
    background: #edf0f0;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scaleY(1) translateZ(0);
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.12, 0.475, 0, 0.995);
    z-index: 1;
}
.page--home .hero__title {
    transform: translateY(-60%) translateZ(0);
    z-index: 1;
}
.page--home .hero__title h1 {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.6s cubic-bezier(0.42, 0, 0.11, 1);
}
.page--home .hero__title h1 span {
    letter-spacing: -0.05em;
}
@media only screen and (max-width: 390px) {
    .page--home .hero__title h1 {
        font-size: 65px;
    }
}
@media only screen and (max-width: 360px) {
    .page--home .hero__title h1 {
        font-size: 65px;
    }
}
.page--home .hero__subtitle {
    align-items: center;
    display: flex;
}
.page--home .hero__subtitle-text {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.4s cubic-bezier(0.42, 0, 0.11, 1);
}
.page--home .hero__subtitle .line--horizontal-custom,
.page--home .hero__subtitle .menu .menu__link-upper::after,
.menu .page--home .hero__subtitle .menu__link-upper::after,
.page--home .hero__subtitle .requirements__label-inner::before,
.page--home .hero__subtitle section.text .text__label-inner::before,
section.text .page--home .hero__subtitle .text__label-inner::before,
.page--home .hero__subtitle .page--careers .summary__ethos-label::after,
.page--careers .page--home .hero__subtitle .summary__ethos-label::after,
.page--home .hero__subtitle .page--careers .summary__ethos-graphic::before,
.page--careers .page--home .hero__subtitle .summary__ethos-graphic::before,
.page--home .hero__subtitle .project.valencia .project__client::before,
.page--home .project.valencia .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.android-wear .project__client::before,
.page--home .project.android-wear .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.athome .project__client::before,
.page--home .project.athome .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.blue-heart .project__client::before,
.page--home .project.blue-heart .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.chromebooks .project__client::before,
.page--home .project.chromebooks .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.famsf .project__client::before,
.page--home .project.famsf .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.git-merge .project__client::before,
.page--home .project.git-merge .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.jigsaw .project__client::before,
.page--home .project.jigsaw .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.le-tote .project__client::before,
.page--home .project.le-tote .hero__subtitle .project__client::before,
.page--home .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text .page--home .hero__subtitle .text__label-inner::after,
.page--home .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text .page--home .hero__subtitle .text__label-inner::after,
.page--home .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small .page--home .hero__subtitle .text__label-inner::after,
.page--home .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text .page--home .hero__subtitle .text__label-inner::after,
.page--home .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .page--home .hero__subtitle .text__label-inner::after,
.page--home .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .page--home .hero__subtitle .text__label-inner::after,
.page--home .hero__subtitle .project.wethepower .project__client::before,
.page--home .project.wethepower .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.wisesystems .project__client::before,
.page--home .project.wisesystems .hero__subtitle .project__client::before,
.page--home .hero__subtitle .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 .hero__subtitle .project__client::before {
    flex: 1 0 0;
    margin: 0 15px;
    opacity: 0;
    transform: translateX(-50px) scale(0);
    transform-origin: center left;
    transition: all 0.3s cubic-bezier(0.42, 0, 0.11, 1);
    width: 0;
}
@media only screen and (max-width: 1500px) {
    .page--home .hero__subtitle .line--horizontal-custom,
    .page--home .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--home .hero__subtitle .menu__link-upper::after,
    .page--home .hero__subtitle .requirements__label-inner::before,
    .page--home .hero__subtitle section.text .text__label-inner::before,
    section.text .page--home .hero__subtitle .text__label-inner::before,
    .page--home .hero__subtitle .page--careers .summary__ethos-label::after,
    .page--careers .page--home .hero__subtitle .summary__ethos-label::after,
    .page--home .hero__subtitle .page--careers .summary__ethos-graphic::before,
    .page--careers .page--home .hero__subtitle .summary__ethos-graphic::before,
    .page--home .hero__subtitle .project.valencia .project__client::before,
    .page--home .project.valencia .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.android-wear .project__client::before,
    .page--home .project.android-wear .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.athome .project__client::before,
    .page--home .project.athome .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.famsf .project__client::before,
    .page--home .project.famsf .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.git-merge .project__client::before,
    .page--home .project.git-merge .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.le-tote .project__client::before,
    .page--home .project.le-tote .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .project.wethepower .project__client::before,
    .page--home .project.wethepower .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .hero__subtitle .project__client::before {
        margin: 0 calc(-1.512605042px + 2.1008403361vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .hero__subtitle .line--horizontal-custom,
    .page--home .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--home .hero__subtitle .menu__link-upper::after,
    .page--home .hero__subtitle .requirements__label-inner::before,
    .page--home .hero__subtitle section.text .text__label-inner::before,
    section.text .page--home .hero__subtitle .text__label-inner::before,
    .page--home .hero__subtitle .page--careers .summary__ethos-label::after,
    .page--careers .page--home .hero__subtitle .summary__ethos-label::after,
    .page--home .hero__subtitle .page--careers .summary__ethos-graphic::before,
    .page--careers .page--home .hero__subtitle .summary__ethos-graphic::before,
    .page--home .hero__subtitle .project.valencia .project__client::before,
    .page--home .project.valencia .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.android-wear .project__client::before,
    .page--home .project.android-wear .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.athome .project__client::before,
    .page--home .project.athome .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.famsf .project__client::before,
    .page--home .project.famsf .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.git-merge .project__client::before,
    .page--home .project.git-merge .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.le-tote .project__client::before,
    .page--home .project.le-tote .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .project.wethepower .project__client::before,
    .page--home .project.wethepower .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .hero__subtitle .project__client::before {
        margin: 0 30px;
    }
}
.page--home .hero__summary {
    position: relative;
}
.page--home .hero__summary .hero__summary-bgtext-height-holder {
    width: 100%;
}
@media only screen and (min-width: 787px) {
    .page--home .hero__summary .hero__summary-bgtext-height-holder {
        font-size: 3.81vw;
        line-height: 1.53;
    }
}
.page--home .hero__summary .hero__summary-bgtext-wrap {
    margin: 0 -0.25em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s cubic-bezier(0.32, 0.08, 0.39, 0.94);
}
.page--home .hero__summary .hero__summary-bgtext {
    transition: transform 0.6s cubic-bezier(0.76, 0, 1, 0.4);
    text-align: justify;
    text-indent: calc((100% - 0.5em) * 0.125 + 0.25em);
    width: 200%;
}
.page--home .hero__summary .hero__summary-bgtext .line {
    display: block;
    transform: translateY(600%);
    transition: transform 1ms 0.6s;
    height: 1.53em;
    overflow: hidden;
}
.page--home .hero__summary .hero__summary-bgtext .line:not(:first-child) {
    text-indent: 0;
}
.page--home .hero__summary .hero__summary-bgtext .line:not(:last-child):after {
    content: "";
    display: inline-block;
    width: 100%;
}
.page--home .hero__summary .hero__summary-bgtext__left,
.page--home .hero__summary .hero__summary-bgtext__right {
    overflow: hidden;
}
.page--home .hero__summary .hero__summary-bgtext__left {
    width: 50%;
}
.page--home .hero__summary .hero__summary-bgtext__left .hero__summary-bgtext {
    transform: translate(45%, 50%);
}
.page--home .hero__summary .hero__summary-bgtext__right {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}
.page--home .hero__summary .hero__summary-bgtext__right .hero__summary-bgtext {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-45%, 50%);
}
.page--home .hero__summary.is-active .hero__summary-bgtext-wrap {
    transition: max-height 0.8s cubic-bezier(0.32, 0.08, 0.39, 0.94);
}
.page--home .hero__summary.is-active .hero__summary-bgtext__left .hero__summary-bgtext,
.page--home .hero__summary.is-active .hero__summary-bgtext__right .hero__summary-bgtext {
    transform: none;
}
.page--home .hero__summary.is-active .hero__summary-bgtext {
    transition: transform 1.2s cubic-bezier(0.2, 0.57, 0, 1);
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line {
    transform: none;
    transition: transform 0.8s cubic-bezier(0.2, 0.57, 0, 1.04);
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(1) {
    transition-delay: 0.06272s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(2) {
    transition-delay: 0.12288s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(3) {
    transition-delay: 0.18048s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(4) {
    transition-delay: 0.23552s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(5) {
    transition-delay: 0.288s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(6) {
    transition-delay: 0.33792s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(7) {
    transition-delay: 0.38528s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(8) {
    transition-delay: 0.43008s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(9) {
    transition-delay: 0.47232s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(10) {
    transition-delay: 0.512s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(11) {
    transition-delay: 0.54912s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(12) {
    transition-delay: 0.58368s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(13) {
    transition-delay: 0.61568s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(14) {
    transition-delay: 0.64512s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(15) {
    transition-delay: 0.672s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(16) {
    transition-delay: 0.69632s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(17) {
    transition-delay: 0.71808s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(18) {
    transition-delay: 0.73728s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(19) {
    transition-delay: 0.75392s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(20) {
    transition-delay: 0.768s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(21) {
    transition-delay: 0.77952s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(22) {
    transition-delay: 0.78848s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(23) {
    transition-delay: 0.79488s;
}
.page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(24) {
    transition-delay: 0.79872s;
}
.page--home .hero__summary:not(.is-active) .hero__summary-bgtext-wrap {
    max-height: 0 !important;
}
.page--home .hero__ctas {
    margin: 100px 0;
}
.page--home .hero__ctas.is-active .hero__ctas-label-line {
    opacity: 1;
    transform: scaleX(1.3) translateX(-4%);
}
.page--home .hero__ctas.is-active .hero__cta {
    transform: scaleY(1);
}
.page--home .hero__ctas-label-line {
    background: #000;
    height: 1px;
    opacity: 0;
    transform: scaleX(0) translateX(20%);
    transform-origin: 0 50%;
    transition: opacity 0.6s, transform 0.6s cubic-bezier(0.2, 0.57, 0, 1.04);
    will-change: transform;
}
.page--home .hero__ctas-inner {
    display: flex;
    justify-content: space-between;
}
.page--home .hero__cta {
    display: inline-block;
    height: 64px;
    position: relative;
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.09, 0.655, 0.305, 1.65) 0.4s;
    will-change: transform;
}
.page--home .hero__cta:nth-child(2) {
    transition-delay: 0.5s;
}
.page--home .hero__cta .transition__expander-wrapper {
    z-index: -1;
}
.page--home .hero__cta img {
    height: 100%;
    position: absolute;
}
.page--home .hero__cta:nth-child(2n) img {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    animation-direction: reverse;
}
.page--home .hero__cta-text {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    transform: translateZ(100px);
}
.page--home .hero__work {
    margin: 100px 15px 30px 0;
    text-align: right;
}
.page--home .hero__work.is-active .hero__work-selected::before,
.page--home .hero__work.is-active .hero__work-selected::after {
    opacity: 1;
    transform: scale(1);
}
.page--home .hero__work.is-active .hero__work-selected::before {
    transition-delay: 0s, 0s;
}
.page--home .hero__work.is-active .hero__work-selected::after {
    transition-delay: 0.5s, 0.5s;
}
.page--home .hero__work-title {
    display: inline-block;
    position: relative;
}
.page--home .hero__work-text {
    color: #ebebeb;
}
.page--home .hero__work-text::first-letter {
    margin-right: -0.15em;
}
.page--home .hero__work-selected {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    top: -10%;
}
@media only screen and (max-width: 786px) {
    .page--home .hero__work-selected {
        right: 10vw;
        top: 50%;
    }
}
@media only screen and (max-width: 320px) {
    .page--home .hero__work-selected {
        right: 20vw;
    }
}
.page--home .hero__work-selected::before,
.page--home .hero__work-selected::after {
    content: "";
    opacity: 0;
    transform: scale(0);
    transform-origin: center top;
}
.page--home .hero__work-selected::before {
    height: 160px;
    margin-bottom: 2px;
    transition: opacity 0.6s, transform 0.6s;
    transition-delay: 0.4s, 0.4s;
}
.page--home .hero__work-selected::after {
    height: 93px;
    transition: opacity 0.4s, transform 0.4s;
}
.page--home .project {
    position: relative;
}
.page--home .project .project__inner,
.page--home .project .project__image {
    position: relative;
}
.page--home .project video,
.page--home .project .project__image {
    display: block;
}
.page--home .project video,
.page--home .project .project__background,
.page--home .project .project__background-shape,
.page--home .project .project__background-shape-image,
.page--home .project .project__image,
.page--home .project .project__details-bg-image,
.page--home .project .project__cta-bg {
    width: 100%;
}
.page--home .project video {
    background: #d0d0d0;
    width: 100.1%;
}
.page--home .project .project__background,
.page--home .project .project__details,
.page--home .project .project__details-blobby,
.page--home .project .project__client,
.page--home .project .project__description,
.page--home .project .project__cta,
.page--home .project .project__cta-blobby,
.page--home .project .project__cta-text {
    position: absolute;
}
.page--home .project .project__cta-text {
    transform: translateZ(100px);
}
.page--home .project .project__background {
    z-index: -2;
}
.page--home .project .project__background-shape,
.page--home .project .project__background-shape-image {
    z-index: -1;
}
.page--home .project .project__background-shape,
.page--home .project .project__background-shape-image {
    transform-origin: 50% 0;
}
.page--home .project .project__background-shape {
    background: #f7f7f6;
    height: 100%;
}
.page--home .project .project__client,
.page--home .project .project__cta-text {
    white-space: nowrap;
}
.page--home .project .project__details {
    z-index: 2;
}
.page--home .project .project__details-blobby,
.page--home .project .project__cta-blobby {
    height: 100%;
    position: relative;
    transform: perspective(1600px) rotateX(0deg) rotateY(0deg) rotateZ(225deg) scaleX(0.2) scaleY(0) translate3d(0, 0, 0);
    transition: transform 0.6s cubic-bezier(0.2, 0.57, 0, 1.04) 0.1s;
    width: 100%;
}
.page--home .project .project__details-blobby + .project__cta-bg,
.page--home .project .project__cta-blobby + .project__cta-bg {
    visibility: hidden;
}
@media only screen and (max-width: 786px) {
    .page--home .project .project__details-blobby + .project__cta-bg,
    .page--home .project .project__cta-blobby + .project__cta-bg {
        visibility: visible;
    }
}
.page--home .project .project__client {
    opacity: 0;
    transform: translateX(100px) scale(1);
    transition: all 0.6s ease-in-out 0.3s;
    z-index: 2;
}
.page--home .project .project__description {
    opacity: 0;
    transform: translateX(100px) scale(1);
    transition: all 0.6s ease-in-out 0.4s;
    z-index: 2;
}
.page--home .project .project__cta {
    transform: scaleY(0);
    transition: all 0.3s cubic-bezier(0.09, 0.655, 0.305, 1.65) 0.6s;
    z-index: 2;
}
.page--home .project .project__cta-inner {
    position: relative;
}
.page--home .project .project__cta img {
    height: 100%;
}
.page--home .project .project__cta:nth-child(2n) img {
    animation-direction: reverse;
}
.page--home .project .project__play-button {
    background: transparent;
    border-radius: 50%;
    border: none;
    height: 100px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
}
.page--home .project .project__play-button::before {
    background: #000;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.57, 0, 1.04), box-shadow 0.5s cubic-bezier(0.2, 0.57, 0, 1.04);
    width: 100%;
}
.page--home .project .project__play-button::after {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
}
.page--home .project .project__image {
    transform: scale(1);
    transition: transform 0.35s cubic-bezier(0.2, 0.57, 0, 1.04) 0.1s;
}
.page--home .project .shadow {
    z-index: -1;
    transition: box-shadow 1.7s cubic-bezier(0.2, 0.57, 0, 1.04) 0.1s;
}
@media only screen and (min-width: 787px) {
    .page--home .project .project__inner.is-active .project__client,
    .page--home .project .project__inner.is-active .project__description {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
        transition: all 0.6s cubic-bezier(0.42, 0, 0.11, 1);
    }
    .page--home .project .project__inner.is-active .project__cta {
        transform: scaleY(1);
    }
    .page--home .project .project__inner.is-active .project__cta-inner {
        transform: scaleY(1);
        transition: all 0.4s cubic-bezier(0.625, 0.62, 0.235, 1.645);
    }
    .page--home .project .project__inner.is-active .project__details-bg {
        transform: rotateY(0) rotateX(0) translate3d(0, 0, 0);
        transition: transform 0.4s ease-in-out;
    }
    .page--home .project .project__inner.is-active .project__image {
        transform: scale(1);
        transition: transform 1.7s cubic-bezier(0.2, 0.57, 0, 1.04);
    }
}
.page--home .project .project__inner.is-active .project__details-bg {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.page--home .project .project__inner.is-active .project__details-blobby {
    transform: perspective(1600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transition: all 0.8s cubic-bezier(0.4, 0.62, 0, 1);
}
.page--home .project .project__inner .project__details:hover .project__details-blobby {
    -webkit-animation: project-hover 0.7s cubic-bezier(0.315, 0.605, 0.375, 0.925) 1;
    animation: project-hover 0.7s cubic-bezier(0.315, 0.605, 0.375, 0.925) 1;
    transform: perspective(1600px) rotateY(0) rotateX(0) translate3d(0, 0, 130px);
}
.page--home .project .project__inner .project__details:hover .project__client {
    transform: translateX(-1.5vw) translateY(0) scale(1.08);
    transition: all 0.6s cubic-bezier(0.625, 0.62, 0.235, 1.645) 0.05s;
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .page--home .project .project__inner .project__details:hover .project__client {
        transform: translateX(-50px) translateY(0) scale(1.08);
    }
}
.page--home .project .project__inner .project__details:hover .project__description {
    transform: translateX(-1.5vw) translateY(0) scale(1.08);
    transition: all 0.4s cubic-bezier(0.625, 0.62, 0.235, 1.645);
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .page--home .project .project__inner .project__details:hover .project__description {
        transform: translateX(-50px) translateY(0) scale(1.08);
    }
}
.page--home .project .project__inner .project__details:hover .project__cta-inner {
    transform: translateX(-20px) translateY(0) scale(1.15);
    transition: all 0.6s cubic-bezier(0.625, 0.62, 0.235, 1.645) 0.1s;
}
.page--home .project .project__inner:not(.is-fullsize) .project__details:hover + .project__image {
    transform: scale(1.02);
    transition: transform 1.7s cubic-bezier(0.2, 0.57, 0, 1.04) 0.1s;
}
.page--home .project .project__inner:not(.is-fullsize) .project__details:hover + .project__image + .shadow {
    box-shadow: 3px 7px 19.2px -6px rgba(0, 0, 0, 0.06), 15px 20px 44.4px -2px rgba(0, 0, 0, 0.06), 20px 42px 96px 6px rgba(0, 0, 0, 0.06), 20px 42px 144px 10px rgba(0, 0, 0, 0.06);
}
.page--home .project .project__inner.left .project__details:hover .project__client,
.page--home .project .project__inner.left .project__details:hover .project__description {
    transform: translateX(-1.5vw) translateY(0) scale(1.08);
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .page--home .project .project__inner.left .project__details:hover .project__client,
    .page--home .project .project__inner.left .project__details:hover .project__description {
        transform: translateX(-50px) translateY(0) scale(1.08);
    }
}
.page--home .project .project__inner.left .project__details:hover .project__cta-inner {
    transform: translateX(-1.5vw) translateY(0) scale(1.04);
}
.page--home .project .project__inner.right .project__details:hover .project__client,
.page--home .project .project__inner.right .project__details:hover .project__description {
    transform: translateX(1.5vw) translateY(0) scale(1.08);
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .page--home .project .project__inner.right .project__details:hover .project__client,
    .page--home .project .project__inner.right .project__details:hover .project__description {
        transform: translateX(50px) translateY(0) scale(1.08);
    }
}
.page--home .project .project__inner.right .project__details:hover .project__cta-inner {
    transform: translateX(1.5vw) translateY(0) scale(1.04);
}
.page--home .project .project__inner.top .project__details:hover .project__client,
.page--home .project .project__inner.top .project__details:hover .project__description {
    transform: translateX(0) translateY(-1.5vw) scale(1.08);
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .page--home .project .project__inner.top .project__details:hover .project__client,
    .page--home .project .project__inner.top .project__details:hover .project__description {
        transform: translateX(0) translateY(-50px) scale(1.08);
    }
}
.page--home .project .project__inner.top .project__details:hover .project__cta-inner {
    transform: translateX(0) translateY(-1.5vw) scale(1.04);
}
.page--home .project .project__inner.bottom .project__details:hover .project__client,
.page--home .project .project__inner.bottom .project__details:hover .project__description {
    transform: translateX(0) translateY(1.5vw) scale(1.08);
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .page--home .project .project__inner.bottom .project__details:hover .project__client,
    .page--home .project .project__inner.bottom .project__details:hover .project__description {
        transform: translateX(0) translateY(50px) scale(1.08);
    }
}
.page--home .project .project__inner.bottom .project__details:hover .project__cta-inner {
    transform: translateX(0) translateY(1.5vw) scale(1.04);
}
.page--home .project .project__inner:active .project__details {
    transform: scale(1);
    transition: transform 0.15s ease-in-out;
}
.page--home .project .project__inner:active .project__image {
    transform: scale(1);
    transition: transform 0.15s ease-in-out;
}
.page--home .expand {
    cursor: pointer;
    margin-top: -100px;
}
.page--home .expand.is-hidden {
    display: none;
}
.page--home .expand__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.page--home .expand__line {
    flex: 1 1 auto;
}
.page--home .expand__text {
    padding-right: 30px;
    position: relative;
    white-space: nowrap;
}
.page--home .expand__text-inner {
    position: relative;
}
.page--home .expand__shape {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20%;
}
.page--home .office {
    margin-bottom: 300px;
    margin-top: 400px;
    position: relative;
}
.page--home .office .office__how,
.page--home .office .office__work {
    position: relative;
}
.page--home .office .office__background,
.page--home .office .office__text,
.page--home .office .office__cta-text {
    position: absolute;
}
.page--home .office .office__background {
    top: 20%;
    width: 100%;
}
.page--home .office .office__how-inner,
.page--home .office .office__work-inner,
.page--home .office .office__cta {
    position: relative;
}
.page--home .office .office__how-inner,
.page--home .office .office__work-inner {
    transform: none !important;
}
.page--home .office .office__how-inner.is-expanded {
    z-index: auto !important;
}
.page--home .office .office__how-inner.is-expanded .office__text {
    z-index: 15;
}
.page--home .office .office__background-inner {
    background: #000;
    height: 300px;
    position: relative;
}
.page--home .office .office__background-inner::after {
    background: #000;
    bottom: -40%;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: skewY(-10deg);
}
.page--home .office img {
    width: 100%;
}
.page--home .office h2,
.page--home .office .office__cta-text {
    color: #fff;
}
.page--home .office h2 {
    margin-bottom: 10px;
}
.page--home .office .office__cta {
    margin-left: 30px;
    position: absolute;
    width: 100%;
}
.page--home .office .office__cta:nth-child(2) img {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.page--home .office .office__cta-inner {
    height: 4.5vw;
    width: 19%;
}
.page--home .office .office__cta-bg {
    height: 100%;
    width: 100%;
}
.page--home .office .office__cta-text {
    left: 45%;
    top: 30%;
    transform: translateZ(100px);
    white-space: nowrap;
}
.page--home .office .office__how {
    width: 100%;
}
.page--home .office .office__how .office__text {
    left: 10%;
    top: 20%;
}
.page--home .office .office__title-inner {
    opacity: 0;
    transform: translateX(100px) scale(1);
    transition: all 0.6s ease-in-out 0.3s;
}
.page--home .office .office__title-inner {
    opacity: 0;
    transform: translateX(100px) scale(1);
    transition: all 0.6s ease-in-out 0.3s;
}
.page--home .office .office__cta-inner {
    transform: translateX(0) translateY(0) scaleY(0) scaleX(1);
    transition: all 0.3s cubic-bezier(0.09, 0.655, 0.305, 1.65) 0.6s;
}
.page--home .office .office__work {
    transform: translateY(-60%);
    width: 100%;
    pointer-events: none;
}
.page--home .office .office__work .office__text {
    left: -10%;
    top: 40%;
}
.page--home .office .office__work-inner {
    pointer-events: all;
}
.page--home .office .office__image .animated-image__inner {
    transform: scale(1);
    transition: transform 1.7s cubic-bezier(0.2, 0.57, 0, 1.04) 0.1s;
}
.page--home .office .office__image.is-active + .office__text .office__title {
    transform: translateX(0) translateY(0px) scale(1);
    transition: all 0.4s cubic-bezier(0.625, 0.62, 0.235, 1.645) 0.1s;
}
.page--home .office .office__image.is-active + .office__text .office__title-inner {
    opacity: 1;
    transform: translateX(0) translateY(0px) scale(1);
    transition: all 0.6s ease-in-out 0.3s;
}
.page--home .office .office__image.is-active + .office__text .office__cta {
    transform: translateX(-20px) translateY(0) scaleX(1) scaleY(1);
    transition: all 0.6s cubic-bezier(0.625, 0.62, 0.235, 1.645);
}
.page--home .office .office__image.is-active + .office__text .office__cta-inner {
    transform: translateX(0) translateY(0) scaleY(1) scaleX(1);
    transition: all 0.3s cubic-bezier(0.09, 0.655, 0.305, 1.65) 0.6s;
}
.page--home .office__work-inner:hover .animated-image__inner,
.page--home .office__how-inner:hover .animated-image__inner {
    transform: scale(1.02);
}
.page--home .office__work-inner:hover .office__image.is-active + .office__text .office__title,
.page--home .office__how-inner:hover .office__image.is-active + .office__text .office__title {
    transform: translateX(-20px) translateY(0) scale(1.15);
    transition: all 0.4s cubic-bezier(0.625, 0.62, 0.235, 1.645);
}
.page--home .office__work-inner:hover .office__image.is-active + .office__text .office__cta,
.page--home .office__how-inner:hover .office__image.is-active + .office__text .office__cta {
    transform: translateX(-20px) translateY(0) scaleX(1.15) scaleY(1.15);
    transition: all 0.6s cubic-bezier(0.625, 0.62, 0.235, 1.645) 0.1s;
}
@media only screen and (max-width: 786px) {
    .page--home .hero {
        padding: 0;
    }
    .page--home .hero.is-active .hero__subtitle .line--horizontal-custom,
    .page--home .hero.is-active .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--home .hero.is-active .hero__subtitle .menu__link-upper::after,
    .page--home .hero.is-active .hero__subtitle .requirements__label-inner::before,
    .page--home .hero.is-active .hero__subtitle section.text .text__label-inner::before,
    section.text .page--home .hero.is-active .hero__subtitle .text__label-inner::before,
    .page--home .hero.is-active .hero__subtitle .page--careers .summary__ethos-label::after,
    .page--careers .page--home .hero.is-active .hero__subtitle .summary__ethos-label::after,
    .page--home .hero.is-active .hero__subtitle .page--careers .summary__ethos-graphic::before,
    .page--careers .page--home .hero.is-active .hero__subtitle .summary__ethos-graphic::before,
    .page--home .hero.is-active .hero__subtitle .project.valencia .project__client::before,
    .page--home .project.valencia .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.android-wear .project__client::before,
    .page--home .project.android-wear .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.athome .project__client::before,
    .page--home .project.athome .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.famsf .project__client::before,
    .page--home .project.famsf .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.git-merge .project__client::before,
    .page--home .project.git-merge .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.le-tote .project__client::before,
    .page--home .project.le-tote .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--home .hero.is-active .hero__subtitle .text__label-inner::after,
    .page--home .hero.is-active .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--home .hero.is-active .hero__subtitle .text__label-inner::after,
    .page--home .hero.is-active .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--home .hero.is-active .hero__subtitle .text__label-inner::after,
    .page--home .hero.is-active .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--home .hero.is-active .hero__subtitle .text__label-inner::after,
    .page--home .hero.is-active .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--home .hero.is-active .hero__subtitle .text__label-inner::after,
    .page--home .hero.is-active .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--home .hero.is-active .hero__subtitle .text__label-inner::after,
    .page--home .hero.is-active .hero__subtitle .project.wethepower .project__client::before,
    .page--home .project.wethepower .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .hero.is-active .hero__subtitle .project__client::before,
    .page--home .hero.is-active .hero__subtitle .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .hero.is-active .hero__subtitle .project__client::before {
        transition-delay: 0.7s;
    }
    .page--home .hero.is-active .hero__title h1 {
        transition-delay: 0.7s;
    }
    .page--home .hero.is-active .hero__title h1::after {
        transform: none;
        transition-delay: 1s;
    }
    .page--home .hero__video-group {
        display: flex;
        flex-direction: column;
    }
    .page--home .hero__video-inner {
        min-height: 105vh;
    }
    .page--home .hero__video-inner video {
        transform: translate(-50%, -50%);
    }
    .page--home .hero__video-inner::after {
        background: #fff;
        bottom: -36vh;
        content: "";
        height: 50vh;
        left: 0;
        position: absolute;
        transform: skewY(13deg);
        right: 0;
    }
    .page--home .hero__title {
        margin-bottom: 0;
        margin-top: -61vh;
        position: relative;
        transform: none;
    }
    .page--home .hero__title h1 {
        margin-top: 23px;
        padding: 0;
        position: relative;
    }
    .page--home .hero__title h1::after {
        background: #000;
        display: block;
        content: "";
        height: 170px;
        margin: 30px 0 30px 55px;
        transform: scale(0);
        transform-origin: top center;
        transition: transform 0.3s cubic-bezier(0.42, 0, 0.11, 1);
        width: 1px;
    }
    .page--home .hero__title-inner {
        display: block;
    }
    .page--home .hero__subtitle {
        align-items: flex-start;
        flex-direction: column;
        height: 12vh;
        width: auto;
    }
    .page--home .hero__subtitle span {
        margin-left: 20px;
    }
    .page--home .hero__subtitle .line--horizontal-custom,
    .page--home .hero__subtitle .menu .menu__link-upper::after,
    .menu .page--home .hero__subtitle .menu__link-upper::after,
    .page--home .hero__subtitle .requirements__label-inner::before,
    .page--home .hero__subtitle section.text .text__label-inner::before,
    section.text .page--home .hero__subtitle .text__label-inner::before,
    .page--home .hero__subtitle .page--careers .summary__ethos-label::after,
    .page--careers .page--home .hero__subtitle .summary__ethos-label::after,
    .page--home .hero__subtitle .page--careers .summary__ethos-graphic::before,
    .page--careers .page--home .hero__subtitle .summary__ethos-graphic::before,
    .page--home .hero__subtitle .project.valencia .project__client::before,
    .page--home .project.valencia .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.android-wear .project__client::before,
    .page--home .project.android-wear .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.athome .project__client::before,
    .page--home .project.athome .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.blue-heart .project__client::before,
    .page--home .project.blue-heart .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.chromebooks .project__client::before,
    .page--home .project.chromebooks .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.famsf .project__client::before,
    .page--home .project.famsf .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.git-merge .project__client::before,
    .page--home .project.git-merge .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.jigsaw .project__client::before,
    .page--home .project.jigsaw .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.le-tote .project__client::before,
    .page--home .project.le-tote .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .video-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.santatracker .tracker-text--small .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .icon-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .case-study.tiltbrush .art-long-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .page--home .hero__subtitle .text__label-inner::after,
    .page--home .hero__subtitle .project.wethepower .project__client::before,
    .page--home .project.wethepower .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.wisesystems .project__client::before,
    .page--home .project.wisesystems .hero__subtitle .project__client::before,
    .page--home .hero__subtitle .project.youtubee3 .project__client::before,
    .page--home .project.youtubee3 .hero__subtitle .project__client::before {
        margin-left: 55px;
        height: 0;
        transform-origin: top center;
        width: 1px;
    }
    .page--home .hero__summary {
        position: relative;
        margin-bottom: 1.7em;
    }
    .page--home .hero__summary .hero__summary-bgtext-wrap {
        margin: 0 -0.3em 0 -0.25em;
    }
    .page--home .hero__summary .hero__summary-bgtext {
        text-indent: calc((100% - 0.55em) * 0.18 + 0.25em);
    }
    .page--home .hero__summary .hero__summary-bgtext .line {
        transform: translateY(200%);
    }
    .page--home .hero__summary .hero__summary-bgtext .line:not(:first-child) {
        text-indent: 0;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(1) {
        transition-delay: 0.03332s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(2) {
        transition-delay: 0.06528s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(3) {
        transition-delay: 0.09588s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(4) {
        transition-delay: 0.12512s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(5) {
        transition-delay: 0.153s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(6) {
        transition-delay: 0.17952s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(7) {
        transition-delay: 0.20468s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(8) {
        transition-delay: 0.22848s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(9) {
        transition-delay: 0.25092s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(10) {
        transition-delay: 0.272s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(11) {
        transition-delay: 0.29172s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(12) {
        transition-delay: 0.31008s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(13) {
        transition-delay: 0.32708s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(14) {
        transition-delay: 0.34272s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(15) {
        transition-delay: 0.357s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(16) {
        transition-delay: 0.36992s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(17) {
        transition-delay: 0.38148s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(18) {
        transition-delay: 0.39168s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(19) {
        transition-delay: 0.40052s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(20) {
        transition-delay: 0.408s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(21) {
        transition-delay: 0.41412s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(22) {
        transition-delay: 0.41888s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(23) {
        transition-delay: 0.42228s;
    }
    .page--home .hero__summary.is-active .hero__summary-bgtext .line:nth-of-type(24) {
        transition-delay: 0.42432s;
    }
    .page--home .hero__summary h2.hero__summary-bgtext-height-holder {
        font-size: 6.5vw;
        letter-spacing: -0.004em;
        line-height: 1.2328;
        margin: 0;
    }
    .page--home .hero__summary h2.hero__summary-bgtext-height-holder .hero__summary-bgtext .line {
        height: 1.3em;
    }
    .page--home .project {
        display: none;
    }
    .page--home .project.is-expanded {
        display: block;
        opacity: 0;
    }
    .page--home .project.is-visible {
        opacity: 1;
        transition: opacity 0.6s;
    }
    .page--home .project.is-visible .project__inner.is-active .project__client,
    .page--home .project.is-visible .project__inner.is-active .project__description {
        opacity: 1;
        transform: translateX(0) scale(1);
        transition-delay: 0s;
    }
    .page--home .project.is-visible .project__inner.is-active .project__cta {
        transform: scaleY(1);
    }
    .page--home .project.is-visible .project__inner.is-active .project__cta-blobby {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1);
    }
    .page--home .project .grid__row {
        max-width: 450px;
    }
    .page--home .project:nth-child(odd) div.project__details {
        bottom: -10% !important;
        top: auto !important;
        left: auto !important;
        right: -40% !important;
    }
    .page--home .project:nth-child(odd) div.project__client::before {
        height: 1px;
        left: auto;
        right: 110%;
        top: 42%;
        width: 120px;
    }
    .page--home .project:nth-child(even) .grid__row {
        margin-left: auto;
        margin-right: 0;
    }
    .page--home .project:nth-child(even) div.project__details {
        bottom: -10% !important;
        top: auto !important;
        left: -45% !important;
        right: auto !important;
    }
    .page--home .project:nth-child(even) div.project__client::before {
        left: 110%;
        height: 1px;
        right: auto;
        top: 45%;
        width: 160px;
    }
    .page--home h3.project__description {
        max-width: 100%;
    }
    .page--home .office {
        margin-bottom: 0;
        margin-top: 300px;
    }
    .page--home .office h2 {
        margin-bottom: 0;
    }
    .page--home .office .office__how {
        margin: 200px 0 100px;
        position: relative;
        transform: none;
    }
    .page--home .office .office__how .office__text {
        left: -10%;
        top: 50%;
    }
    .page--home .office .office__how .office__cta {
        margin-left: 10px;
    }
    .page--home .office .office__work .office__text {
        left: auto;
        right: -10%;
        top: 60%;
    }
    .page--home .office .office__work .office__cta {
        margin-left: -30px;
    }
    .page--home .office .office__cta-inner {
        height: 10.5vw;
    }
}
@media only screen and (max-width: 550px) {
    .page--home .project:nth-child(odd) a.project__inner {
        flex: 0 0 83.3333333333%;
        margin-left: 0;
    }
    .page--home .project:nth-child(odd) div.project__details {
        bottom: -10% !important;
        top: auto !important;
        left: auto !important;
        right: -15% !important;
    }
    .page--home .project:nth-child(odd) div.project__client::before {
        height: 1px;
        left: auto;
        right: 110%;
        top: 42%;
        width: 120px;
    }
    .page--home .project:nth-child(even) .grid__row {
        margin-left: auto;
        margin-right: 0;
    }
    .page--home .project:nth-child(even) a.project__inner {
        flex: 0 0 83.3333333333%;
        margin-left: 16.6666666667%;
    }
    .page--home .project:nth-child(even) div.project__details {
        bottom: -10% !important;
        top: auto !important;
        left: -20% !important;
        right: auto !important;
    }
    .page--home .project:nth-child(even) div.project__client::before {
        height: 1px;
        left: 110%;
        right: auto;
        top: 45%;
        width: 160px;
    }
}
.page--home footer {
    background: none;
}
@media only screen and (max-width: 786px) {
    .page--impressum section.hero h1 {
        font-size: 12vw;
    }
}
.page--impressum section.details {
    padding-bottom: 100px;
}
.page--impressum section.details .detail {
    margin-bottom: 50px;
}
.page--impressum section.details .detail__title {
    margin-bottom: 10px;
}
.page--job section.hero {
    margin-bottom: 15vw;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--job section.hero {
        margin-bottom: 20vw;
    }
}
.page--job section.hero::before {
    background: #f7f7f6;
    content: "";
    height: 75%;
    position: absolute;
    width: 100%;
}
.page--job section.hero::after {
    background: #f7f7f6;
    bottom: -20%;
    content: "";
    height: 100%;
    position: absolute;
    width: 62.5%;
    z-index: -1;
}
.page--job section.hero .hero__text {
    margin-bottom: 150px;
    padding-top: 230px;
}
@media only screen and (max-width: 786px) {
    .page--job section.hero .hero__text {
        padding-top: 30vw;
    }
    .page--job section.hero .hero__text-label-inner {
        border-top: 0;
        margin-bottom: 12.5vw;
        padding: 0;
        width: 100%;
    }
    .page--job section.hero .hero__text-label-inner::before {
        background: #000;
        content: "";
        display: inline-block;
        height: 1px;
        margin-right: 15px;
        vertical-align: middle;
        width: 50%;
    }
}
.page--job section.hero .hero__blobby {
    max-width: 40%;
    opacity: 0;
    position: absolute;
    transform: translate(-40%, -20%) rotateX(0deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    transition-delay: 0.3s;
    z-index: -1;
}
.page--job section.hero .hero__blobby canvas {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--job section.hero .hero__blobby {
        max-width: 120%;
        z-index: 0;
    }
}
.page--job section.hero .hero__client-name {
    left: -3%;
    position: relative;
    white-space: normal;
}
.page--job section.hero .hero__image {
    margin-top: -8%;
    position: relative;
}
.page--job section.hero .hero__image-inner {
    position: relative;
}
.page--job section.hero .hero__image img {
    display: block;
    width: 100%;
}
.page--job section.hero.is-active .hero__blobby {
    opacity: 1;
    transform: translate(-40%, -20%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1);
}
.page--job section.benefits {
    position: relative;
}
.page--job section.benefits .benefits__label {
    margin-bottom: 20px;
}
.page--job section.apply {
    background: #f7f7f6;
    margin-top: 16.6666666667vw;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--job section.apply {
        margin-top: 29.1666666667vw;
    }
}
.page--job section.apply::before {
    background: #f7f7f6;
    bottom: 100%;
    content: "";
    height: 40%;
    position: absolute;
    right: 0;
    width: 33%;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .page--job section.apply::before {
        height: 50%;
        width: 20%;
    }
}
.page--job section.apply .apply__title.is-active .apply__title-inner {
    opacity: 1;
    transform: none;
}
.page--job section.apply .apply__title-inner {
    margin-top: -4.5%;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.page--job section.apply .apply__inner {
    padding: 12.5vw 0;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .page--job section.apply .apply__inner {
        padding: 29.1666666667vw 0 50vw;
    }
}
.page--job section.apply .apply__inner.is-active .apply__blobby {
    opacity: 1;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) translateY(0);
}
.page--job section.apply .apply__inner.is-active .apply__label,
.page--job section.apply .apply__inner.is-active .apply__email,
.page--job section.apply .apply__inner.is-active .apply__email a::after,
.page--job section.apply .apply__inner.is-active .apply__text,
.page--job section.apply .apply__inner.is-active .apply__footnotes {
    opacity: 1;
    transform: none;
}
.page--job section.apply .apply__label,
.page--job section.apply .apply__email,
.page--job section.apply .apply__text,
.page--job section.apply .apply__footnotes {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}
.page--job section.apply .apply__blobby {
    margin: -10% 0 0 -10%;
    max-width: 25%;
    opacity: 0;
    position: absolute;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0) translateY(50px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    z-index: -1;
}
.page--job section.apply .apply__blobby canvas {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--job section.apply .apply__blobby {
        margin: -20% 0 0 -20%;
        max-width: 75%;
    }
}
.page--job section.apply .apply__email {
    margin: 5% 0 15%;
    position: relative;
    transition-delay: 0.1s;
}
.page--job section.apply .apply__email a {
    position: relative;
}
.page--job section.apply .apply__email a::after {
    background: #000;
    bottom: -5px;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: scale(0);
    transform-origin: center left;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    transition-delay: 0.4s;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--job section.apply .apply__email a::after {
        height: 1px;
    }
}
@media only screen and (max-width: 320px) {
    .page--job section.apply .apply__email {
        font-size: 28px;
    }
}
.page--job section.apply .apply__text {
    margin: 5% 0;
    transition-delay: 0.2s;
}
.page--job section.apply .apply__footnotes {
    transition-delay: 0.3s;
}
.page--job section.apply .apply__footnotes::before {
    background: rgba(0, 0, 0, 0.2);
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 4%;
    margin-left: 0;
    width: 3vw;
}
@media only screen and (max-width: 786px) {
    .page--job section.apply .apply__footnotes::before {
        width: 12.5vw;
    }
}
.page--job section.apply .apply__footnotes p {
    margin: 0;
}
.page--home .project.valencia {
    margin-bottom: 200px;
}
.page--home .project.valencia .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.valencia .project__details {
    left: -60%;
    top: 20.5%;
    width: 70%;
}
.page--home .project.valencia .project__client {
    left: 0%;
    top: 10%;
    white-space: nowrap;
}
.page--home .project.valencia .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 350px;
    content: "";
    left: 105%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.valencia .project__client::before {
        width: calc(129.8319327731px + 28.0112044818vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.valencia .project__client::before {
        width: 550px;
    }
}
.page--home .project.valencia .project__description {
    left: 18%;
    max-width: 350px;
    top: 20%;
}
.page--home .project.valencia .project__cta {
    bottom: 1%;
    right: 59%;
    width: 16%;
}
.page--home .project.valencia .project__cta-text {
    left: 29%;
    top: 46%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.valencia {
        margin-bottom: 250px;
    }
    .page--home .project.valencia .project__details {
        width: 105%;
    }
    .page--home .project.valencia .project__client {
        left: 5%;
    }
    .page--home .project.valencia .project__description {
        max-width: 240px;
    }
    .page--home .project.valencia .project__cta {
        bottom: auto;
        right: 25%;
        top: 86%;
    }
    .page--home .project.valencia .project__cta-text {
        left: auto;
        right: 30%;
    }
}
.case-study.valencia .hero__services-list {
    height: 374px;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia .hero__image {
        margin-top: 120px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.valencia .hero-floating {
        margin-top: -55vw;
    }
}
.case-study.valencia .scroll-arrow__inner {
    flex: 0 0 48%;
}
.case-study.valencia .color-grid {
    margin-bottom: 19vw;
}
.case-study.valencia section.student {
    margin-bottom: 120px;
    margin-top: 140px;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.student {
        margin-bottom: 40px;
        margin-top: 70px;
    }
}
.case-study.valencia section.student .student__background {
    position: relative;
}
.case-study.valencia section.student .student__overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.case-study.valencia section.student .student__image {
    position: absolute;
}
.case-study.valencia section.student .student__image:first-child {
    right: 8.3333333333vw;
    top: 33.7%;
    width: 33%;
}
.case-study.valencia section.student .student__image:last-child {
    left: 21.1666666667vw;
    top: 50%;
    width: 29%;
}
.case-study.valencia section.student--short {
    margin-bottom: 230px;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.student--short {
        margin-bottom: 70px;
    }
}
.case-study.valencia section.student--short .student__image {
    position: absolute;
}
.case-study.valencia section.student--short .student__image:first-child {
    left: auto;
    right: 8.75vw;
    top: 29%;
    width: 45%;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.student--short .student__image:first-child {
        right: 0;
        top: 31%;
        width: 57%;
    }
}
.case-study.valencia section.student--voices {
    margin-bottom: 240px;
    margin-top: 240px;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.student--voices {
        margin-bottom: 100px;
        margin-top: 100px;
    }
}
.case-study.valencia section.student--voices .student__image:first-child {
    left: 7vw;
    right: auto;
    top: -18.3%;
    width: 27.6%;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.student--voices .student__image:first-child {
        left: -2.5vw;
        top: -15.3%;
        width: 60.6%;
    }
}
.case-study.valencia section.student--voices .student__image:last-child {
    left: auto;
    right: 7.3vw;
    top: 11%;
    width: 29%;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.student--voices .student__image:last-child {
        display: none;
    }
}
.case-study.valencia section.design-mobile {
    margin-bottom: 310px;
    margin-top: 200px;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.design-mobile {
        margin-bottom: 120px;
        margin-top: 60px;
    }
}
.case-study.valencia section.design-mobile .scroll-arrow.top {
    bottom: 95%;
}
@media only screen and (max-width: 786px) {
    .case-study.valencia section.long-browsers {
        margin-top: 40px;
    }
}
.case-study.valencia section.long-browsers .long-browser__browser:nth-child(1),
.case-study.valencia section.long-browsers .long-browser__browser:nth-child(3) {
    top: 25%;
}
.case-study.valencia section.long-browsers .long-browsers-mobile {
    padding-bottom: 0;
}
.case-study.valencia section.image.table-image {
    margin-bottom: 10vw;
}
.page--home .project.affirm {
    margin-bottom: 200px;
}
.page--home .project.affirm .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.affirm .project__details {
    left: -72%;
    top: 20%;
    width: 85%;
}
.page--home .project.affirm .project__client {
    left: 45%;
    top: 30%;
}
.page--home .project.affirm .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    left: 130%;
    top: calc(50% - 1px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
}
.page--home .project.affirm .project__description {
    left: 18%;
    max-width: 380px;
    top: 30%;
    width: 100%;
}
.page--home .project.affirm .project__cta {
    bottom: 15%;
    left: 40%;
    width: 18%;
}
.page--home .project.affirm .project__cta-text {
    bottom: 30%;
    left: 35%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.affirm div.project__details {
        bottom: -25% !important;
        right: -40% !important;
        width: 100%;
    }
    .page--home .project.affirm .project__description {
        top: 27%;
        width: 80%;
    }
    .page--home .project.affirm .project__client {
        top: 30%;
    }
    .page--home .project.affirm .project__client::before {
        transform-origin: 100% 50%;
    }
    .page--home .project.affirm .project__cta {
        bottom: auto;
        left: 30%;
        top: 70%;
    }
}
@media only screen and (max-width: 550px) {
    .page--home .project.affirm div.project__details {
        right: -30% !important;
    }
}
.case-study.affirm .stories .text__label {
    margin-top: 4.1666666667vw;
}
.case-study.affirm .hero-floating--video {
    margin-top: -11vw;
}
.case-study.affirm section.text-overlay {
    margin-top: 8.3333333333vw;
}
@media only screen and (max-width: 786px) {
    .case-study.affirm section.text-overlay {
        margin-top: 8.3333333333vw;
    }
}
.case-study.affirm section.text-overlay .text-overlay__inner {
    position: relative;
}
.case-study.affirm section.text-overlay .text-overlay__text-wrapper {
    position: absolute;
    width: 36%;
    z-index: 1;
}
.case-study.affirm section.text-overlay .text-overlay__body {
    margin-top: 4.1666666667vw;
}
.case-study.affirm section.text-overlay .text-overlay__sample-name {
    margin-bottom: 30px;
}
.case-study.affirm section.text-overlay .text-overlay__main-image {
    width: 100%;
}
.case-study.affirm section.text-overlay .text-overlay__main-image .animated-image {
    margin-left: auto;
    width: 60%;
}
.case-study.affirm section.text-overlay .text-overlay__colors {
    margin: 4.1666666667vw 12.5% 0;
}
.case-study.affirm section.product-text {
    margin: 12.5vw 0 4.1666666667vw;
}
@media only screen and (max-width: 786px) {
    .case-study.affirm section.product-text {
        margin-bottom: 20.8333333333vw;
    }
}
.case-study.affirm section.image--affirm {
    margin-top: 12.5vw;
}
.case-study.affirm section.image--affirm-shapes {
    margin-top: -10vw;
}
@media only screen and (min-width: 787px) {
    .case-study.affirm section.image--affirm-shopping {
        margin-top: 0vw;
        transform: translateX(20vw);
    }
}
.case-study.affirm section.image--affirm-wave {
    margin-top: 50vw;
}
@media only screen and (max-width: 786px) {
    .case-study.affirm section.image--affirm-wave {
        display: none;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.affirm section.text.affirm-shapes .text__inner {
        margin-top: -42vw;
    }
}
.case-study.affirm section.text.affirm-text-center {
    text-align: center;
}
.case-study.affirm section.mobile-section {
    margin-top: -15vw;
}
.case-study.affirm .design-browser {
    background: url("../assets/projects/affirm/shape1.png") top left 7%/25% no-repeat, url("../assets/projects/affirm/shape2.png") bottom right 7%/15% no-repeat;
    padding: 10vw 0;
}
@media only screen and (max-width: 786px) {
    .case-study.affirm .design-browser {
        background: none;
        padding: 0;
    }
}
.case-study.affirm .design-intro {
    margin-top: -40vw !important;
}
.case-study.affirm .hero__services-list .hero__service:nth-child(2) {
    margin-bottom: 40px;
}
.case-study.affirm .hero__services-label-inner:nth-child(1) {
    padding-right: 200px;
}
.case-study.affirm .hero__services-label-inner:nth-child(1)::after {
    width: 190px;
}
.case-study.affirm .hero__services-label-inner:nth-child(2) {
    top: 262px;
}
@media only screen and (max-width: 786px) {
    .case-study.affirm .hero__credits-list .hero__service-item {
        min-width: 80px;
    }
}
.case-study.affirm .hero__image {
    background: #cfedf5;
}
@media only screen and (max-width: 1300px) {
    .case-study.affirm .hero__image {
        padding-top: 200px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.affirm .hero__image {
        padding-top: 0;
    }
}
.case-study.affirm .intro-video {
    margin-top: -16%;
    position: relative;
}
.case-study.affirm .animated-image--flat .animated-image__inner {
    opacity: 0.2;
    transition: transform 0.6s, opacity 0.6s;
}
.case-study.affirm .animated-image--flat .animated-image__inner::after {
    display: none;
}
.case-study.affirm .animated-image--flat.is-active .animated-image__inner {
    opacity: 1;
}
@media only screen and (min-width: 787px) {
    .case-study.affirm section.mobile-shopping {
        margin-top: -50vw;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.affirm section.mobile-shopping .mobile__phone {
        flex: 0 0 100%;
    }
}
.page--home .project.amp {
    margin-bottom: 200px;
}
.page--home .project.amp .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.amp .project__details {
    left: -45%;
    top: 20%;
    width: 55%;
}
.page--home .project.amp .project__client {
    left: 45%;
    top: 20%;
}
.page--home .project.amp .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    left: 130%;
    top: calc(50% - 1px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
}
.page--home .project.amp .project__description {
    left: 18%;
    max-width: 380px;
    top: 17%;
    width: 100%;
}
.page--home .project.amp .project__cta {
    bottom: 22%;
    left: 40%;
    width: 18%;
}
.page--home .project.amp .project__cta-text {
    bottom: 30%;
    left: 35%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.amp div.project__details {
        bottom: -25% !important;
        right: -40% !important;
        width: 100%;
    }
    .page--home .project.amp .project__description {
        top: 27%;
        width: 80%;
    }
    .page--home .project.amp .project__client {
        top: 30%;
    }
    .page--home .project.amp .project__client::before {
        transform-origin: 100% 50%;
    }
    .page--home .project.amp .project__cta {
        bottom: auto;
        left: 30%;
        top: 70%;
    }
}
@media only screen and (max-width: 550px) {
    .page--home .project.amp div.project__details {
        right: -30% !important;
    }
}
.case-study.amp .hero {
    background-image: linear-gradient(240deg, #fafcfe 0%, #f4fdff 100%);
}
@media only screen and (max-width: 786px) {
    .case-study.amp .hero {
        background-image: none;
    }
}
.case-study.amp .hero__image {
    padding-top: 800px;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .hero__image {
        padding-top: 0;
    }
}
.case-study.amp .hero__client-name {
    color: #247abe;
    opacity: 0.03;
}
.case-study.amp .hero-floating {
    margin-top: -70%;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .hero-floating {
        margin-top: -100%;
    }
}
.case-study.amp .evoking-speed {
    margin-top: -5%;
}
.case-study.amp .docs-text {
    position: relative;
}
.case-study.amp .docs-text::before {
    background: url("../assets/projects/amp/docs-bg.svg") left top/contain no-repeat;
    content: "";
    display: block;
    height: 150vw;
    position: absolute;
    top: 0;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .docs-text::before {
        background-size: cover;
        height: 250vw;
    }
}
.case-study.amp section.notes {
    margin-top: 8.3333333333vw;
    position: relative;
}
.case-study.amp section.notes img {
    display: block;
    width: 100%;
}
.case-study.amp section.notes .shadow {
    transition: 0.3s opacity ease;
}
.case-study.amp section.notes .note {
    margin-bottom: 4.16667%;
    padding: 0;
    position: relative;
}
.case-study.amp section.notes .note .shadow {
    opacity: 0;
}
.case-study.amp section.notes .note:hover .shadow {
    opacity: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.amp section.notes .grid__row {
        flex-direction: column;
    }
    .case-study.amp section.notes img {
        max-height: 60px;
        width: auto;
    }
}
.case-study.amp .phones-text {
    margin-top: 25%;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .phones-text {
        margin-top: -35% !important;
    }
}
.case-study.amp .phones-image {
    margin-top: -35%;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .phones-image {
        margin-top: 0;
    }
}
.case-study.amp .home-video {
    z-index: -1;
}
@media only screen and (min-width: 787px) {
    .case-study.amp .home-video {
        margin-top: -15% !important;
    }
}
.case-study.amp .home-video video {
    background: #fff;
}
.case-study.amp .mobile-section {
    position: relative;
}
.case-study.amp .mobile-section::before {
    background: url("../assets/projects/amp/mobile-bg.svg") right top/contain no-repeat;
    content: "";
    height: 100vw;
    left: 0;
    position: absolute;
    top: -90%;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .mobile-section {
        margin-top: 20.8333333333vw;
    }
    .case-study.amp .mobile-section::before {
        background-size: cover;
        height: 275vw;
        top: -20%;
    }
}
.case-study.amp section.long-browsers {
    margin-bottom: 35%;
    z-index: 0;
}
.case-study.amp section.long-browsers::before {
    background: url("../assets/projects/amp/long-browser-bg.svg") right top/cover no-repeat;
    content: "";
    height: 170vw;
    position: absolute;
    top: 10%;
    width: 100%;
}
.case-study.amp section.long-browsers .long-browser__browser.grid__row {
    width: 100%;
}
.case-study.amp section.long-browsers .long-browser__browser:nth-child(1),
.case-study.amp section.long-browsers .long-browser__browser:nth-child(3) {
    top: 25%;
}
@media only screen and (max-width: 786px) {
    .case-study.amp section.long-browsers {
        margin-bottom: 20.8333333333vw;
    }
    .case-study.amp section.long-browsers::before {
        top: 85%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.amp .amp-conf {
        margin-bottom: 16.6666666667vw;
    }
}
.case-study.amp .conf-video {
    margin: 10% 0 0 !important;
}
.case-study.amp .conf-video::before {
    background: url("../assets/projects/amp/conf0-bg-triangle.svg") left top/contain no-repeat;
    bottom: 10.75%;
    content: "";
    height: 200%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.case-study.amp .conf-video .grid__row {
    position: relative;
}
.case-study.amp .conf-video .grid__row::after {
    background: url("../assets/projects/amp/conf0-lines-fg.svg") left/contain no-repeat;
    bottom: 53.75%;
    content: "";
    height: 37%;
    left: 17%;
    position: absolute;
    width: 100%;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .conf-video .grid__row::after {
        background: url("../assets/projects/amp/conf0-lines-fg-m.svg") left/contain no-repeat;
        bottom: 18.75%;
        height: 60%;
        left: 0;
    }
}
.case-study.amp .conf-video .grid__row::before {
    background: url("../assets/projects/amp/conf0-bg-lines.svg") bottom left/cover no-repeat;
    bottom: 17.75%;
    content: "";
    display: block;
    height: 200%;
    left: 0;
    position: absolute;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .conf-video .grid__row::before {
        background: url("../assets/projects/amp/conf0-bg-lines-m.svg") bottom left/cover no-repeat;
        bottom: 10.5%;
        height: 122%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.amp .conf-video::before {
        bottom: 10.5%;
        height: 70%;
    }
}
.case-study.amp .conf-doors {
    margin-top: -5%;
    position: relative;
}
.case-study.amp .conf-cafe {
    margin-top: -16%;
    position: relative;
    z-index: 1;
}
.case-study.amp .conf-cafe::before {
    background: url("../assets/projects/amp/conf2-lines-fg.svg") left/contain no-repeat;
    content: "";
    height: 63%;
    left: 7%;
    position: absolute;
    top: 2%;
    width: 100%;
    z-index: 1;
}
.case-study.amp .conf-badges {
    margin-top: -11%;
    position: relative;
}
.case-study.amp .conf-badges .image__inner {
    position: relative;
}
.case-study.amp .conf-badges .image__inner::after {
    background: url("../assets/projects/amp/conf3-lines-fg.svg") right/contain no-repeat;
    bottom: -4%;
    content: "";
    height: 12%;
    position: absolute;
    right: 1%;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .conf-badges .image__inner::after {
        background: url("../assets/projects/amp/conf3-lines-fg-m.svg") right/contain no-repeat;
        bottom: 13%;
        height: 35%;
        right: -30%;
    }
}
.case-study.amp .conf-badges .image__inner::before {
    background: url("../assets/projects/amp/conf3-lines-bg.svg") right/contain no-repeat;
    bottom: -41%;
    content: "";
    height: 100%;
    position: absolute;
    right: -46%;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .conf-badges .image__inner::before {
        background: url("../assets/projects/amp/conf3-lines-bg-m.svg") right/contain no-repeat;
        bottom: 11%;
        height: 94%;
        right: -30%;
    }
}
.case-study.amp .conf-bg {
    background-image: linear-gradient(-240deg, #fafcfe 0%, #f4fdff 100%);
    margin-top: -85%;
    padding-bottom: 10%;
    position: relative;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.amp .conf-bg {
        margin-top: -160%;
    }
}
.page--home .project.android-wear {
    margin-bottom: 100px;
}
.page--home .project.android-wear .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.android-wear .project__details {
    left: 120%;
    top: 35%;
    width: 30%;
}
.page--home .project.android-wear .project__client {
    left: 20%;
    top: 0%;
    z-index: 1;
}
.page--home .project.android-wear .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    right: 110%;
    top: calc(50% - 1px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
    width: 90px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.android-wear .project__client::before {
        width: calc(-9.0756302521px + 12.6050420168vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.android-wear .project__client::before {
        width: 180px;
    }
}
.page--home .project.android-wear .project__description {
    max-width: 420px;
    position: relative;
    width: 200%;
    z-index: 1;
}
.page--home .project.android-wear .project__cta {
    bottom: -10%;
    left: 42%;
    width: 27%;
}
.page--home .project.android-wear .project__cta-text {
    left: 50%;
    top: 20%;
}
.page--home .project.android-wear video {
    -o-object-fit: initial;
    object-fit: initial;
}
@media only screen and (min-width: 787px) {
    .page--home .project.android-wear .project__cta-inner {
        height: 3.3vw;
    }
}
@media only screen and (max-width: 786px) {
    .page--home .project.android-wear {
        margin-bottom: 220px;
    }
    .page--home .project.android-wear .project__details {
        width: 90%;
    }
    .page--home .project.android-wear .project__details-blobby {
        left: -20%;
        position: relative;
    }
    .page--home .project.android-wear .project__client {
        left: 12%;
        top: 20%;
    }
    .page--home .project.android-wear .project__client::before {
        transform-origin: 0 50%;
    }
    .page--home .project.android-wear .project__description {
        left: 10%;
        max-width: 80%;
        position: absolute;
        top: 20%;
    }
    .page--home .project.android-wear .project__cta {
        bottom: auto;
        left: 12%;
        top: 80%;
        width: 15%;
    }
}
.case-study.android-wear .hero__services-list {
    height: 430px;
}
.case-study.android-wear .hero__image {
    padding-top: 20vw;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear .hero__image {
        padding-top: 0;
    }
}
.case-study.android-wear .hero__client-name {
    z-index: -1;
}
.case-study.android-wear .brand-identity {
    margin-top: 12.5vw;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear .brand-logo {
        margin-top: 12.5vw;
    }
}
.case-study.android-wear .brand-illustrations {
    margin: -4.1666666667vw 0 8.3333333333vw;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear .brand-illustrations {
        margin-top: 8.3333333333vw;
    }
}
.case-study.android-wear .type {
    opacity: 0.2;
    transition: opacity 0.6s;
}
.case-study.android-wear .type.is-active {
    opacity: 1;
}
.case-study.android-wear .type img {
    width: 100%;
}
.case-study.android-wear .type .type__samples {
    position: relative;
    z-index: 1;
}
.case-study.android-wear .type .type__sample-name {
    margin-bottom: 7%;
}
.case-study.android-wear .type .type__headline {
    margin-bottom: 10%;
}
.case-study.android-wear .type .type__body {
    left: 10%;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear .type .type__body {
        left: 0;
    }
}
.case-study.android-wear .type .type__icons {
    margin: 17% 0;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear .type {
        margin-top: 12.5vw;
    }
    .case-study.android-wear .type .grid__row {
        flex-wrap: wrap;
    }
    .case-study.android-wear .type .grid__row > div:first-child {
        padding-right: 0;
    }
    .case-study.android-wear .type .type__image {
        padding-bottom: 8px;
        padding-left: 0;
        white-space: nowrap;
    }
    .case-study.android-wear .type .type__image-gif {
        display: inline-block;
        padding-right: 5px;
        vertical-align: top;
        width: 33.3333333333vw;
    }
    .case-study.android-wear .type .type__image-photo {
        display: inline-block;
        margin-left: -1px;
        padding-left: 5px;
        transform: none !important;
        width: 66.6666666667vw;
    }
}
.case-study.android-wear .web-design {
    margin-top: 5px;
    padding-bottom: 20.8333333333vw;
    padding-top: 12.5vw;
    position: relative;
}
.case-study.android-wear .web-design::before {
    background: #fe3;
    content: "";
    display: block;
    height: 100%;
    left: -5px;
    position: absolute;
    top: 0;
    width: calc(100% / 24 * 11);
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear .web-design::before {
        height: 66.6666666667vw;
        width: 33.3333333333vw;
    }
}
.case-study.android-wear .web-hero {
    margin-bottom: 0;
    margin-top: -13%;
}
.case-study.android-wear .web-page {
    margin-top: 0;
    position: relative;
    z-index: 2;
}
.case-study.android-wear .web-page .image__inner {
    position: relative;
}
.case-study.android-wear .gif {
    margin-top: 8.3333333333vw;
}
.case-study.android-wear .gif .image__inner {
    position: relative;
}
.case-study.android-wear section.gifs img,
.case-study.android-wear section.gifs video {
    display: block;
    position: relative;
    width: 100%;
}
.case-study.android-wear section.gifs .gifs-top {
    padding-bottom: 5px;
    position: relative;
}
.case-study.android-wear section.gifs .gifs-top > div:nth-child(2) {
    padding-right: 0;
}
.case-study.android-wear section.gifs .gifs-top::after {
    background: #eee;
    content: "";
    height: calc(100% - 5px);
    position: absolute;
    right: -10px;
    width: 4.1666666667vw;
}
.case-study.android-wear section.gifs .gifs-bottom {
    margin-left: calc(-100% / 24);
    padding-top: 5px;
    position: relative;
    width: 100%;
}
.case-study.android-wear section.gifs .gifs-bottom__left .grid__row {
    padding-bottom: 5px;
}
.case-study.android-wear section.gifs .gifs-bottom__left .grid__row:nth-child(2) {
    padding-top: 5px;
}
.case-study.android-wear section.gifs .gifs-bottom__right {
    padding-bottom: 5px;
    padding-right: 0;
}
.case-study.android-wear section.gifs .gifs-bottom::after {
    background: #278ae2;
    content: "";
    height: calc(50% - 10px);
    position: absolute;
    right: calc(-10px - 4.1666666667vw);
    top: 5px;
    width: 4.1666666667vw;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear section.gifs .gifs-bottom {
        margin-left: 0;
    }
    .case-study.android-wear section.gifs .gifs-bottom__left .grid__row div:last-child {
        padding-left: 0;
    }
    .case-study.android-wear section.gifs .gifs-bottom__right {
        margin-left: 5px;
        padding-left: 0;
    }
}
.case-study.android-wear .mobile {
    margin-bottom: 7%;
    margin-top: 3.5%;
}
@media only screen and (max-width: 786px) {
    .case-study.android-wear .mobile {
        margin-top: 25%;
    }
}
.case-study.android-wear .mobile .mobile__inner::before {
    content: none;
}
.case-study.android-wear .moves-page {
    margin: 8.3333333333vw 0;
}
.page--home .project.athome {
    margin-bottom: 200px;
}
.page--home .project.athome .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.athome .project__details {
    right: -32%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.athome .project__details {
        width: 73%;
        top: 65% !important;
    }
}
@media only screen and (min-width: 787px) {
    .page--home .project.athome .project__details {
        top: 34%;
        width: 45%;
    }
}
.page--home .project.athome .project__client {
    white-space: nowrap;
}
@media only screen and (max-width: 786px) {
    .page--home .project.athome .project__client {
        left: 0;
        top: 17%;
    }
}
@media only screen and (min-width: 787px) {
    .page--home .project.athome .project__client {
        left: 70%;
        top: -20%;
    }
}
.page--home .project.athome .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    content: "";
    right: 130%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.athome .project__client::before {
        width: calc(4.4117647059px + 14.7058823529vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.athome .project__client::before {
        width: 225px;
    }
}
.page--home .project.athome .project__description {
    top: 10%;
    left: 15%;
    max-width: 343px;
    width: 115%;
}
.page--home .project.athome .project__cta {
    bottom: 18%;
    right: 20%;
}
.page--home .project.athome .project__cta-text {
    top: 30%;
    right: -50%;
}
body.athome {
    position: relative;
}
body.athome::after {
    background-color: black;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateZ(0);
    transition: opacity 0.6s;
    will-change: opacity;
    z-index: -1;
}
body.athome.is-active:not(.is-reverted) {
    color: white;
}
body.athome.is-active:not(.is-reverted)::after {
    opacity: 1;
}
body.athome.is-active:not(.is-reverted) .header__logo-inner::after,
body.athome.is-active:not(.is-reverted) .sidebar__logo::after,
body.athome.is-active:not(.is-reverted) .header__logotype-inner::after {
    opacity: 1;
}
body.athome.is-active:not(.is-reverted) .sidebar .line--vertical-sm,
body.athome.is-active:not(.is-reverted) .header__logotype .line--horizontal-custom,
body.athome.is-active:not(.is-reverted) .header__logotype .menu .menu__link-upper::after,
.menu body.athome.is-active:not(.is-reverted) .header__logotype .menu__link-upper::after,
body.athome.is-active:not(.is-reverted) .header__logotype .requirements__label-inner::before,
body.athome.is-active:not(.is-reverted) .header__logotype section.text .text__label-inner::before,
section.text body.athome.is-active:not(.is-reverted) .header__logotype .text__label-inner::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--careers .summary__ethos-label::after,
.page--careers body.athome.is-active:not(.is-reverted) .header__logotype .summary__ethos-label::after,
body.athome.is-active:not(.is-reverted) .header__logotype .page--careers .summary__ethos-graphic::before,
.page--careers body.athome.is-active:not(.is-reverted) .header__logotype .summary__ethos-graphic::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.valencia .project__client::before,
.page--home .project.valencia body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.android-wear .project__client::before,
.page--home .project.android-wear body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.athome .project__client::before,
.page--home .project.athome body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.blue-heart .project__client::before,
.page--home .project.blue-heart body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.chromebooks .project__client::before,
.page--home .project.chromebooks body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.famsf .project__client::before,
.page--home .project.famsf body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.git-merge .project__client::before,
.page--home .project.git-merge body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.jigsaw .project__client::before,
.page--home .project.jigsaw body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.le-tote .project__client::before,
.page--home .project.le-tote body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text body.athome.is-active:not(.is-reverted) .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted) .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text body.athome.is-active:not(.is-reverted) .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted) .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small body.athome.is-active:not(.is-reverted) .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted) .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text body.athome.is-active:not(.is-reverted) .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted) .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text body.athome.is-active:not(.is-reverted) .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted) .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text body.athome.is-active:not(.is-reverted) .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.wethepower .project__client::before,
.page--home .project.wethepower body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.wisesystems .project__client::before,
.page--home .project.wisesystems body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted) .header__logotype .page--home .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 body.athome.is-active:not(.is-reverted) .header__logotype .project__client::before {
    background-color: #fff;
}
body.athome.is-active:not(.is-reverted) .header__open--text {
    color: #fff;
}
body.athome.is-active:not(.is-reverted) .header__open--text::before {
    background-color: #fff;
}
body.athome.is-active:not(.is-reverted) .header__open--text::after {
    background-color: #1a1919;
}
body.athome.is-active:not(.is-reverted).menu-active .header__logo-inner::after,
body.athome.is-active:not(.is-reverted).menu-active .sidebar__logo::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype-inner::after {
    opacity: 0;
}
body.athome.is-active:not(.is-reverted).menu-active .sidebar .line--vertical-sm,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .line--horizontal-custom,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .menu .menu__link-upper::after,
.menu body.athome.is-active:not(.is-reverted).menu-active .header__logotype .menu__link-upper::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .requirements__label-inner::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype section.text .text__label-inner::before,
section.text body.athome.is-active:not(.is-reverted).menu-active .header__logotype .text__label-inner::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--careers .summary__ethos-label::after,
.page--careers body.athome.is-active:not(.is-reverted).menu-active .header__logotype .summary__ethos-label::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--careers .summary__ethos-graphic::before,
.page--careers body.athome.is-active:not(.is-reverted).menu-active .header__logotype .summary__ethos-graphic::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.valencia .project__client::before,
.page--home .project.valencia body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.android-wear .project__client::before,
.page--home .project.android-wear body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.athome .project__client::before,
.page--home .project.athome body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.blue-heart .project__client::before,
.page--home .project.blue-heart body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.chromebooks .project__client::before,
.page--home .project.chromebooks body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.famsf .project__client::before,
.page--home .project.famsf body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.git-merge .project__client::before,
.page--home .project.git-merge body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.jigsaw .project__client::before,
.page--home .project.jigsaw body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.le-tote .project__client::before,
.page--home .project.le-tote body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .video-text body.athome.is-active:not(.is-reverted).menu-active .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text body.athome.is-active:not(.is-reverted).menu-active .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .case-study.santatracker .tracker-text--small .text__label-inner::after,
.case-study.santatracker .tracker-text--small body.athome.is-active:not(.is-reverted).menu-active .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .icon-text body.athome.is-active:not(.is-reverted).menu-active .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .ui-text body.athome.is-active:not(.is-reverted).menu-active .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .case-study.tiltbrush .art-long-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text body.athome.is-active:not(.is-reverted).menu-active .header__logotype .text__label-inner::after,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.wethepower .project__client::before,
.page--home .project.wethepower body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.wisesystems .project__client::before,
.page--home .project.wisesystems body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before,
body.athome.is-active:not(.is-reverted).menu-active .header__logotype .page--home .project.youtubee3 .project__client::before,
.page--home .project.youtubee3 body.athome.is-active:not(.is-reverted).menu-active .header__logotype .project__client::before {
    background-color: #000;
}
body.athome.is-active:not(.is-reverted).menu-active .header__open--text {
    color: #000;
}
body.athome.is-active:not(.is-reverted) .animated-image__inner::after {
    background-color: #000;
}
body.athome.is-reverted .video.storytelling-video.is-reverted .video__inner::after {
    opacity: 0;
}
.case-study.athome .theme--white {
    background: white;
    color: #000;
}
.case-study.athome .theme--black {
    background: #000;
    color: #fff;
}
.case-study.athome .theme--black .animated-image .animated-image__inner::after {
    background: #000;
}
.case-study.athome .hero .hero__image {
    padding-top: 220px;
}
@media only screen and (min-width: 787px) {
    .case-study.athome .hero .hero__image {
        padding-top: 800px;
    }
}
.case-study.athome .video.home-video .video__inner::before,
.case-study.athome .video.storytelling-video .video__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.athome .video.home-video .video__inner::before,
    .case-study.athome .video.storytelling-video .video__inner::before {
        transform: translateY(1%);
    }
}
.case-study.athome .video.home-video .video__inner::before,
.case-study.athome .video.storytelling-video .video__inner::before {
    background: url("../assets/browser-top-dark-2.png") center bottom/contain no-repeat;
    width: 100%;
    left: 0;
}
.case-study.athome .video.storytelling-video .video__inner::after {
    background: #000;
}
.case-study.athome .support-image-1.image .image__inner::before,
.case-study.athome .support-image-2.image .image__inner::before,
.case-study.athome .support-image-3.image .image__inner::before {
    background: url("../assets/browser-top-dark.png") center bottom/contain no-repeat;
    content: "";
    left: -0.1%;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.athome .support-image-1.image .image__inner::before,
    .case-study.athome .support-image-2.image .image__inner::before,
    .case-study.athome .support-image-3.image .image__inner::before {
        transform: translateY(1%);
    }
}
.case-study.athome .support-image-1.image .image__inner::before,
.case-study.athome .support-image-2.image .image__inner::before,
.case-study.athome .support-image-3.image .image__inner::before {
    background: url("../assets/browser-top-dark-2.png") center bottom/contain no-repeat;
    width: 100%;
    left: 0;
}
.case-study.athome .support-image-1 .animated-image .animated-image__inner::after,
.case-study.athome .support-image-3 .animated-image .animated-image__inner::after {
    background-color: #000;
}
.case-study.athome .video.home-video,
.case-study.athome .image.image-interviews,
.case-study.athome .text.chapters-text,
.case-study.athome .image.chapters-image,
.case-study.athome .video.storytelling-video,
.case-study.athome .text.photography-text {
    margin: 0;
    padding: 106px 0 0;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .video.home-video,
    .case-study.athome .image.image-interviews,
    .case-study.athome .text.chapters-text,
    .case-study.athome .image.chapters-image,
    .case-study.athome .video.storytelling-video,
    .case-study.athome .text.photography-text {
        margin: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .video.home-video,
    .case-study.athome .image.image-interviews,
    .case-study.athome .text.chapters-text,
    .case-study.athome .image.chapters-image,
    .case-study.athome .video.storytelling-video,
    .case-study.athome .text.photography-text {
        margin: 0;
    }
}
.case-study.athome .video.home-video.no-chrome:not(.lifted),
.case-study.athome .image.image-interviews.no-chrome:not(.lifted),
.case-study.athome .text.chapters-text.no-chrome:not(.lifted),
.case-study.athome .image.chapters-image.no-chrome:not(.lifted),
.case-study.athome .video.storytelling-video.no-chrome:not(.lifted),
.case-study.athome .text.photography-text.no-chrome:not(.lifted) {
    margin: 0;
}
.case-study.athome .text.storytelling-text,
.case-study.athome .text.chapters-text,
.case-study.athome .image.chapters-image,
.case-study.athome .image.image-interviews-cont,
.case-study.athome .mobile.screenshots-mobile {
    margin: 0;
    padding: 56px 0 0;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .text.storytelling-text,
    .case-study.athome .text.chapters-text,
    .case-study.athome .image.chapters-image,
    .case-study.athome .image.image-interviews-cont,
    .case-study.athome .mobile.screenshots-mobile {
        margin: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .text.storytelling-text,
    .case-study.athome .text.chapters-text,
    .case-study.athome .image.chapters-image,
    .case-study.athome .image.image-interviews-cont,
    .case-study.athome .mobile.screenshots-mobile {
        margin: 0;
    }
}
.case-study.athome .text.storytelling-text.no-chrome:not(.lifted),
.case-study.athome .text.chapters-text.no-chrome:not(.lifted),
.case-study.athome .image.chapters-image.no-chrome:not(.lifted),
.case-study.athome .image.image-interviews-cont.no-chrome:not(.lifted),
.case-study.athome .mobile.screenshots-mobile.no-chrome:not(.lifted) {
    margin: 0;
}
@media only screen and (min-width: 360px) {
    .case-study.athome .text.interviews-text {
        margin-top: -265%;
    }
}
@media only screen and (min-width: 380px) {
    .case-study.athome .text.interviews-text {
        margin-top: -251%;
    }
}
@media only screen and (min-width: 401px) {
    .case-study.athome .text.interviews-text {
        margin-top: -240%;
    }
}
@media only screen and (min-width: 450px) {
    .case-study.athome .text.interviews-text {
        margin-top: -230%;
    }
}
@media only screen and (min-width: 500px) {
    .case-study.athome .text.interviews-text {
        margin-top: -197%;
    }
}
@media only screen and (min-width: 600px) {
    .case-study.athome .text.interviews-text {
        margin-top: -180%;
    }
}
@media only screen and (min-width: 701px) {
    .case-study.athome .text.interviews-text {
        margin-top: -170%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .text.interviews-text {
        margin-top: -89%;
    }
}
@media only screen and (min-width: 1100px) {
    .case-study.athome .text.interviews-text {
        margin-top: -88%;
    }
}
@media only screen and (min-width: 1440px) {
    .case-study.athome .text.interviews-text {
        margin-top: -91%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .text.support-text {
        margin-top: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .text.support-text {
        padding-top: 12%;
    }
}
@media only screen and (min-width: 2000px) {
    .case-study.athome .text.support-text {
        padding-top: 20%;
    }
}
@media only screen and (min-width: 2000px) {
    .case-study.athome .text.photography-text {
        padding-top: 206px;
    }
}
.case-study.athome .image[class*="creators-image-"] {
    margin-top: 4px;
}
.case-study.athome .image.creators-image-3 {
    margin-top: 160%;
    margin-bottom: -40%;
}
@media only screen and (min-width: 380px) {
    .case-study.athome .image.creators-image-3 {
        margin-top: 146%;
        margin-bottom: 0;
    }
}
@media only screen and (min-width: 401px) {
    .case-study.athome .image.creators-image-3 {
        margin-top: 146%;
    }
}
@media only screen and (min-width: 450px) {
    .case-study.athome .image.creators-image-3 {
        margin-top: 137%;
    }
}
@media only screen and (min-width: 500px) {
    .case-study.athome .image.creators-image-3 {
        margin-top: 96%;
    }
}
@media only screen and (min-width: 600px) {
    .case-study.athome .image.creators-image-3 {
        margin-top: 80%;
    }
}
@media only screen and (min-width: 701px) {
    .case-study.athome .image.creators-image-3 {
        margin-top: 65%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-3 {
        margin-top: -9%;
    }
}
.case-study.athome .image.creators-image-4 {
    margin-top: 147px;
}
@media only screen and (min-width: 380px) {
    .case-study.athome .image.creators-image-4 {
        margin-top: 4px;
    }
}
.case-study.athome .image.creators-image-1 {
    margin-top: -44%;
}
@media only screen and (min-width: 380px) {
    .case-study.athome .image.creators-image-1 {
        margin-top: -42%;
    }
}
@media only screen and (min-width: 401px) and (max-width: 786px) {
    .case-study.athome .image.creators-image-1 {
        margin-top: -42%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-1 {
        margin-top: -58%;
    }
}
@media only screen and (min-width: 1376px) {
    .case-study.athome .image.creators-image-1 {
        margin-top: -57%;
    }
}
@media only screen and (min-width: 1440px) {
    .case-study.athome .image.creators-image-1 {
        margin-top: -54%;
    }
}
@media only screen and (min-width: 1600px) {
    .case-study.athome .image.creators-image-1 {
        margin-top: -49%;
    }
}
@media only screen and (min-width: 1800px) {
    .case-study.athome .image.creators-image-1 {
        margin-top: -44%;
    }
}
.case-study.athome .image.creators-image-2 {
    margin-top: 1px;
}
.case-study.athome .image.creators-image-5 {
    z-index: 2;
}
.case-study.athome .image.creators-image-6 {
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.creators-image-6 {
        margin-top: 3%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-6 {
        margin-top: 3%;
    }
}
.case-study.athome .image.creators-image-8 {
    z-index: 3;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.creators-image-8 {
        margin-top: -8%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-8 {
        margin-top: -26%;
    }
}
.case-study.athome .image.creators-image-9 {
    z-index: 4;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.creators-image-9 {
        margin-top: -2%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-9 {
        margin-top: -8%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.creators-image-7 {
        z-index: 3;
        margin-top: -22%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-7 {
        z-index: 1;
        margin-top: -26%;
    }
}
.case-study.athome .image.creators-image-10 {
    z-index: 1;
}
@media only screen and (min-width: 360px) {
    .case-study.athome .image.creators-image-10 {
        margin-top: -104px;
    }
}
@media only screen and (min-width: 380px) {
    .case-study.athome .image.creators-image-10 {
        margin-top: -76px;
    }
    .case-study.athome .image.creators-image-10 .image__inner {
        margin-top: -4px;
    }
}
@media only screen and (min-width: 401px) and (max-width: 786px) {
    .case-study.athome .image.creators-image-10 {
        margin-top: -76px;
    }
    .case-study.athome .image.creators-image-10 .image__inner {
        margin-top: -4px;
    }
}
.case-study.athome .image.creators-image-10 .animated-image .animated-image__inner::after {
    background-color: #000;
}
.case-study.athome .image.creators-image-11 {
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.creators-image-11 {
        margin-top: -48%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-11 {
        margin-top: -40%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.creators-image-11 .image__inner {
        margin-top: 32%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.creators-image-11 .image__inner {
        margin-top: -6%;
    }
}
.case-study.athome .image.chapters-image {
    margin-top: -16px;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.support-image-1 {
        margin-top: 76px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.support-image-1 {
        margin-top: -17%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.support-image-2 {
        margin-top: -40%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.support-image-2 {
        margin-top: -40%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.support-image-3 {
        margin-top: -6%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.support-image-3 {
        margin-top: -6%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image[class*="photography-image-"] {
        margin-top: 37px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image[class*="photography-image-"] {
        margin-top: -106px;
        padding-top: 106px;
    }
}
.case-study.athome .text.mobile-text {
    margin-top: 0;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .text.mobile-text {
        padding-top: 84px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .text.mobile-text {
        padding-top: 4.1667vw;
    }
}
@media only screen and (min-width: 1376px) {
    .case-study.athome .text.mobile-text {
        padding-top: 6.1667vw;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.photography-image-1 {
        margin-top: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.photography-image-2 {
        margin-top: -65px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.photography-image-4 {
        margin-top: calc(-15% - 106px);
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.photography-image-4 {
        margin-top: calc(-15% - 106px);
    }
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.photography-image-5 {
        margin-top: calc(-18% - 106px);
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.photography-image-5 {
        margin-top: calc(-22% - 106px);
    }
}
.case-study.athome .image.photography-image-6 {
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.photography-image-6 {
        margin-top: -27%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.photography-image-6 {
        margin-top: calc(-27% - 106px);
    }
}
.case-study.athome .image.photography-image-7 {
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.athome .image.photography-image-7 {
        margin-top: -25%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.athome .image.photography-image-7 {
        margin-top: calc(-25% - 106px);
    }
}
.page--home .project.bears-ears {
    margin-bottom: 200px;
}
.page--home .project.bears-ears .hero__text-content {
    width: 100%;
}
@media only screen and (min-width: 787px) {
    .page--home .project.bears-ears .project__inner.is-active .project__client::before {
        transform: translateX(-50%) scaleY(1);
    }
}
.page--home .project.bears-ears .project__background {
    top: -10%;
}
.page--home .project.bears-ears .project__background-inner {
    height: 100vh;
    position: relative;
}
.page--home .project.bears-ears .project__background-shape {
    position: relative;
}
.page--home .project.bears-ears .project__background-shape::after {
    background: #f7f7f6;
    bottom: -40%;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 70%;
    transform: skewY(-20deg);
}
.page--home .project.bears-ears .project__details {
    left: 10%;
    top: 5%;
    width: 30%;
}
.page--home .project.bears-ears .project__details-bg canvas {
    max-width: 253px;
}
.page--home .project.bears-ears .project__client {
    left: -30%;
    top: -130%;
    z-index: 1;
}
.page--home .project.bears-ears .project__client::before {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    content: "";
    height: 160px;
    top: 30px;
    transition: transform 0.6s ease-in-out 0.5s;
    height: 160px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.bears-ears .project__client::before {
        height: calc(-16.1344537815px + 22.4089635854vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.bears-ears .project__client::before {
        height: 320px;
    }
}
@media only screen and (min-width: 787px) {
    .page--home .project.bears-ears .project__client::before {
        transform: translateX(-50%) scaleY(0);
        transform-origin: top center;
    }
}
.page--home .project.bears-ears .project__description {
    max-width: 550px;
    position: relative;
    width: 120%;
    z-index: 1;
}
.page--home .project.bears-ears .project__cta {
    left: 17%;
    max-width: 45px;
}
.page--home .project.bears-ears .project__cta-text {
    left: 18%;
    top: 31%;
}
.page--home .project.bears-ears .project__details-bg {
    left: -30%;
    position: absolute;
    top: 20%;
}
.page--home .project.bears-ears .project__details-blobby {
    position: relative;
}
@media only screen and (max-width: 786px) {
    .page--home .project.bears-ears {
        margin-bottom: 300px;
    }
    .page--home .project.bears-ears div.project__details {
        width: 95%;
    }
    .page--home .project.bears-ears .project__details-bg {
        left: initial;
        position: relative;
        top: initial;
    }
    .page--home .project.bears-ears .project__details-bg canvas {
        max-width: none;
    }
    .page--home .project.bears-ears .project__details-blobby {
        position: relative;
    }
    .page--home .project.bears-ears .project__description {
        left: 10%;
        max-width: 95%;
        position: absolute;
        top: 30%;
    }
    .page--home .project.bears-ears .project__cta {
        bottom: auto;
        left: 60%;
        top: 85%;
        width: 20%;
    }
    .page--home .project.bears-ears .project__client {
        left: 40%;
        top: 30%;
    }
    .page--home .project.bears-ears .project__client::before {
        right: 30%;
        transform: scaleX(0);
        transform-origin: 100% 50%;
    }
    .page--home .project.bears-ears .project__inner.is-active .project__client::before {
        transform: none;
    }
}
@media only screen and (max-width: 360px) {
    .page--home .project.bears-ears .project__cta-text {
        left: -20%;
    }
}
.case-study.bears-ears .hero__services-list .hero__service:nth-child(2) {
    margin-bottom: 40px;
}
.case-study.bears-ears .hero__services-label-inner:nth-child(1) {
    padding-right: 200px;
}
.case-study.bears-ears .hero__services-label-inner:nth-child(1)::after {
    width: 190px;
}
.case-study.bears-ears .hero__services-label-inner:nth-child(2) {
    top: 262px;
}
@media only screen and (max-width: 786px) {
    .case-study.bears-ears .hero__credits-list .hero__service-item {
        min-width: 80px;
    }
}
@media only screen and (max-width: 1300px) {
    .case-study.bears-ears .hero__image {
        padding-top: 200px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.bears-ears .hero__image {
        padding-top: 0;
    }
}
.case-study.bears-ears .intro-climbing .image__inner,
.case-study.bears-ears .intro-landscape .image__inner,
.case-study.bears-ears .design-running .image__inner,
.case-study.bears-ears .design-ute .image__inner,
.case-study.bears-ears .ending-lyle .image__inner {
    position: relative;
}
.case-study.bears-ears .intro-climbing {
    background: center/cover no-repeat transparent url("../assets/projects/bearsears/01_photo_bg.png");
    margin-top: -13%;
    padding: 18% 0;
}
.case-study.bears-ears .intro-video {
    margin-top: -25%;
    position: relative;
}
.case-study.bears-ears .intro-bear {
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.bears-ears .intro-bear {
        margin-top: 8.3333333333vw;
    }
}
.case-study.bears-ears .intro-landscape {
    margin-top: -21%;
}
.case-study.bears-ears .overview-video {
    margin-bottom: 8.3333333333vw;
}
.case-study.bears-ears .thumbnails {
    margin-top: -21%;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 787px) {
    .case-study.bears-ears .design {
        margin-top: 4.1666666667vw;
    }
}
.case-study.bears-ears .design-running {
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.bears-ears .design-running {
        margin-top: 15vw;
    }
}
.case-study.bears-ears .design-escaping {
    margin-top: -40%;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.bears-ears .design-escaping {
        margin-top: -12.5vw;
    }
}
.case-study.bears-ears .design-ute {
    margin-top: -8%;
}
.case-study.bears-ears .map {
    margin-top: 8.3333333333vw !important;
}
.case-study.bears-ears .ending-climbing {
    margin-top: -12%;
    position: relative;
    z-index: 1;
}
.case-study.bears-ears .ending-lyle {
    margin-top: -35%;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.bears-ears .ending-lyle {
        margin-top: -12.5vw;
    }
}
.case-study.bears-ears .ending-iconography {
    margin-top: -12%;
}
.case-study.bears-ears .tech {
    margin-bottom: 2.0833333333vw;
}
.case-study.bears-ears .tech-small p:not(:last-child) {
    margin-bottom: 2%;
}
.page--home .project.blue-heart {
    margin-bottom: 200px;
}
.page--home .project.blue-heart .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.blue-heart .project__details {
    right: -30%;
    top: 10%;
    width: 60%;
}
.page--home .project.blue-heart .project__client {
    left: 50%;
    top: 30%;
}
.page--home .project.blue-heart .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    right: 110%;
    top: calc(50% - 2px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
    width: 80px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.blue-heart .project__client::before {
        width: calc(-8.0672268908px + 11.2044817927vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.blue-heart .project__client::before {
        width: 160px;
    }
}
.page--home .project.blue-heart .project__description {
    left: 25%;
    top: 30%;
    max-width: 470px;
    width: 120%;
}
.page--home .project.blue-heart .project__cta {
    bottom: 15%;
    right: 30%;
    width: 18%;
}
.page--home .project.blue-heart .project__cta-text {
    top: 30%;
    left: -15%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.blue-heart {
        margin-bottom: 200px;
    }
    .page--home .project.blue-heart div.project__details {
        width: 75%;
    }
    .page--home .project.blue-heart .project__description {
        max-width: 80%;
    }
    .page--home .project.blue-heart div.project__cta {
        bottom: auto;
        right: 15%;
        top: 95%;
        width: 18%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .hero__text {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .hero__link {
        margin-top: -88px;
        margin-bottom: 160px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .hero__text-content {
        margin-bottom: 150px;
    }
}
.case-study.blue-heart .hero__image {
    padding-top: 80px;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .hero__image {
        margin-top: -57vw;
        padding-top: 0;
    }
}
.case-study.blue-heart .hero-floating--video {
    margin-top: -11vw;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .hero__service {
        color: #fff;
    }
}
.case-study.blue-heart .hero__service:nth-child(1) .hero__service-name-decorator {
    left: 58%;
    right: auto;
}
@media only screen and (min-width: 787px) {
    .case-study.blue-heart .hero__service:nth-child(2) {
        flex: 0 0 50%;
    }
}
.case-study.blue-heart .hero__service:nth-child(2) .hero__service-name-decorator {
    left: -60%;
}
.case-study.blue-heart .hero__service:nth-child(3) .hero__service-name-decorator {
    left: 25%;
    top: -25%;
}
.case-study.blue-heart .hero__service:nth-child(4) .hero__service-name-decorator {
    left: 15%;
}
.case-study.blue-heart .drinking-collage {
    margin-top: -25vw;
}
@media only screen and (min-width: 1169px) {
    .case-study.blue-heart .drinking-collage {
        margin-top: -300px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .drinking-collage {
        margin-top: 0;
    }
}
.case-study.blue-heart .img-sheep-man {
    margin-top: -12%;
    z-index: 2;
}
.case-study.blue-heart .img-sheep-man .image__inner {
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .img-sheep-man .image__caption {
        display: none;
    }
}
.case-study.blue-heart .img-split-river {
    margin-top: -15%;
    z-index: 1;
}
.case-study.blue-heart .img-split-river .image__inner {
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .img-split-river .image__caption {
        display: none;
    }
}
.case-study.blue-heart .img-poster {
    margin-bottom: 10%;
    margin-top: -58%;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .img-poster {
        margin-top: -266%;
    }
}
.case-study.blue-heart .img-splash {
    margin-top: 8%;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .img-splash {
        margin-top: 82%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .img-desktop-home {
        margin-top: 165%;
    }
}
.case-study.blue-heart .img-home-river {
    margin-top: -50%;
}
.case-study.blue-heart .img-linked-arms {
    margin-top: -10%;
    z-index: 2;
}
.case-study.blue-heart .img-river-aerial {
    margin-top: -15%;
    z-index: 1;
}
.case-study.blue-heart .img-footer {
    margin-top: -65vw;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart .peicing-text {
        margin-top: 160vw;
    }
}
.case-study.blue-heart .home-river-text {
    margin-top: -25vw;
}
.case-study.blue-heart section.images-overlap {
    margin-bottom: 220px;
    margin-top: 140px;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart section.images-overlap {
        margin-bottom: 40px;
        margin-top: 70px;
    }
}
.case-study.blue-heart section.images-overlap .images-overlap__background {
    position: relative;
}
.case-study.blue-heart section.images-overlap .images-overlap__overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.case-study.blue-heart section.images-overlap .images-overlap__image {
    position: absolute;
}
.case-study.blue-heart section.images-overlap .images-overlap__image:first-child {
    right: 12.5vw;
    top: 33.7%;
    width: 25vw;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart section.images-overlap .images-overlap__image:first-child {
        right: 50%;
        top: 34.5%;
        transform: translateX(50%);
        width: 83.3333333333vw;
    }
}
.case-study.blue-heart section.images-overlap .images-overlap__image:last-child {
    bottom: -10%;
    right: 4.1666666667vw;
    width: 37.5vw;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.blue-heart section.images-overlap .images-overlap__image:last-child {
        bottom: -20%;
        right: 50%;
        transform: translateX(50%);
        width: 83.3333333333vw;
    }
}
.page--home .project.chromebooks {
    margin-bottom: 200px;
}
.page--home .project.chromebooks .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.chromebooks .project__background {
    top: 15%;
}
.page--home .project.chromebooks .project__background-inner {
    height: 200vh;
}
.page--home .project.chromebooks .project__details {
    left: -40%;
    top: 23%;
    width: 50%;
}
.page--home .project.chromebooks .project__client {
    left: 10%;
    z-index: 1;
}
.page--home .project.chromebooks .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    left: 120%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
    width: 175px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.chromebooks .project__client::before {
        width: calc(-17.6470588235px + 24.5098039216vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.chromebooks .project__client::before {
        width: 350px;
    }
}
.page--home .project.chromebooks .project__description {
    position: relative;
    width: 100%;
    z-index: 1;
}
.page--home .project.chromebooks .project__cta {
    bottom: -10%;
    left: 33%;
    width: 15%;
}
.page--home .project.chromebooks .project__cta-text {
    left: 30%;
    top: 32%;
}
@media only screen and (min-width: 787px) {
    .page--home .project.chromebooks .project__cta-inner {
        height: 4vw;
    }
}
@media only screen and (max-width: 786px) {
    .page--home .project.chromebooks {
        margin-bottom: 300px;
    }
    .page--home .project.chromebooks div.project__details {
        bottom: -30% !important;
        right: -40% !important;
        width: 110%;
    }
    .page--home .project.chromebooks .project__details-blobby {
        position: relative;
    }
    .page--home .project.chromebooks .project__client {
        left: 50%;
        top: 30%;
    }
    .page--home .project.chromebooks .project__client::before {
        transform-origin: 100% 50%;
    }
    .page--home .project.chromebooks .project__description {
        left: 20%;
        position: absolute;
        top: 30%;
        width: 80%;
    }
    .page--home .project.chromebooks .project__cta {
        bottom: 20%;
        left: 65%;
    }
    .page--home .project.chromebooks .project__cta-text {
        left: auto;
        right: 50%;
    }
}
@media only screen and (max-width: 550px) {
    .page--home .project.chromebooks div.project__details {
        right: -25% !important;
    }
}
.case-study.chromebooks .hero-floating {
    margin-top: -20.8333333333vw;
}
.case-study.chromebooks .hero__services-list {
    height: 460px;
}
.case-study.chromebooks section.brand {
    margin-top: 8.3333333333vw;
    position: relative;
}
.case-study.chromebooks section.brand .grid__row,
.case-study.chromebooks section.brand img {
    width: 100%;
}
.case-study.chromebooks section.brand .brand__headline,
.case-study.chromebooks section.brand .brand__body,
.case-study.chromebooks section.brand .brand__links {
    margin-bottom: 4.1666666667vw;
}
.case-study.chromebooks section.brand .brand__body {
    margin-left: 8.3333333333vw;
    width: 50%;
}
.case-study.chromebooks section.brand .brand__links,
.case-study.chromebooks section.brand .brand__icons {
    width: 90%;
}
.case-study.chromebooks section.brand .brand__sample-name {
    margin-bottom: 30px;
}
.case-study.chromebooks section.brand div.color-grid .color-grid__colors-col {
    flex: 1;
    top: auto;
}
@media only screen and (min-width: 787px) {
    .case-study.chromebooks section.brand div.color-grid .color-grid__colors-col:first-child {
        margin-right: 15px;
    }
    .case-study.chromebooks section.brand div.color-grid .color-grid__colors-col:last-child {
        margin-left: 15px;
    }
}
.case-study.chromebooks section.brand div.color-grid .color-grid__color {
    position: relative;
}
@media only screen and (min-width: 787px) {
    .case-study.chromebooks section.brand div.color-grid .color-grid__color {
        height: auto;
        padding-top: 100%;
        width: 100%;
    }
    .case-study.chromebooks section.brand div.color-grid .color-grid__color-name {
        background: none;
        bottom: 0;
        height: 30%;
        position: absolute;
        width: 100%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks section.brand div.color-grid {
        margin: 16.6666666667vw 0;
        order: 2;
    }
    .case-study.chromebooks section.brand div.color-grid .color-grid__colors {
        transform: none !important;
    }
    .case-study.chromebooks section.brand div.color-grid .color-grid__color div.shadow {
        display: none;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.chromebooks section.brand div.color-grid {
        left: 0;
        position: absolute;
        top: 20%;
        width: 100%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks section.brand {
        display: flex;
        flex-direction: column;
        margin-top: 16.6666666667vw;
    }
    .case-study.chromebooks section.brand .brand__top {
        order: 1;
    }
    .case-study.chromebooks section.brand .brand__middle {
        order: 3;
    }
    .case-study.chromebooks section.brand .brand__headline {
        margin-bottom: 12.5vw;
    }
    .case-study.chromebooks section.brand .brand__body {
        margin: 0;
        width: 100%;
    }
    .case-study.chromebooks section.brand .brand__links {
        margin-bottom: 8.3333333333vw;
    }
    .case-study.chromebooks section.brand .brand__links,
    .case-study.chromebooks section.brand .brand__icons {
        width: 100%;
    }
}
.case-study.chromebooks .devices-text {
    margin-top: 12.5vw;
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks .devices-text {
        margin-top: 29.1666666667vw;
    }
}
.case-study.chromebooks .devices-video {
    margin-top: -20% !important;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks .devices-video {
        margin-top: -10% !important;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .case-study.chromebooks .devices-video {
        margin-top: -3% !important;
    }
}
.case-study.chromebooks section.photos {
    margin-top: 8.3333333333vw;
    position: relative;
}
.case-study.chromebooks section.photos img,
.case-study.chromebooks section.photos .grid__row {
    width: 100%;
}
.case-study.chromebooks section.photos .grid__row > div {
    position: relative;
}
.case-study.chromebooks section.photos .grid__row > div img {
    display: block;
}
.case-study.chromebooks section.photos .grid__row:nth-child(2) {
    margin-top: -22%;
}
.case-study.chromebooks section.photos .grid__row:nth-child(3) {
    margin-top: 20.5%;
}
.case-study.chromebooks section.photos .grid__row:nth-child(4) {
    margin-top: -56%;
    position: relative;
}
.case-study.chromebooks section.photos .grid__row:nth-child(5) {
    margin-top: -20%;
    position: relative;
    top: 60px;
}
.case-study.chromebooks section.photos .grid__row:nth-child(6) {
    margin-top: -20%;
    position: relative;
    z-index: -1;
}
.case-study.chromebooks section.photos .photos__label {
    position: absolute !important;
    text-align: center;
    top: -30%;
}
.case-study.chromebooks section.photos .photos__label-text {
    margin: 2em 0;
    position: relative;
}
.case-study.chromebooks section.photos .photos__label-decorator {
    left: -15px;
    position: absolute;
    top: -15px;
    z-index: -1;
}
.case-study.chromebooks section.photos .photos__label .line--vertical-custom,
.case-study.chromebooks section.photos .photos__label .page--home .hero__work-selected::before,
.page--home .case-study.chromebooks section.photos .photos__label .hero__work-selected::before,
.case-study.chromebooks section.photos .photos__label .page--home .hero__work-selected::after,
.page--home .case-study.chromebooks section.photos .photos__label .hero__work-selected::after,
.case-study.chromebooks section.photos .photos__label .page--home .project.bears-ears .project__client::before,
.page--home .project.bears-ears .case-study.chromebooks section.photos .photos__label .project__client::before,
.case-study.chromebooks section.photos .photos__label .page--home .project.santatracker .project__client::before,
.page--home .project.santatracker .case-study.chromebooks section.photos .photos__label .project__client::before {
    height: 10.4166666667vw;
}
.case-study.chromebooks section.photos .photos__label + div {
    padding: 0;
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks section.photos {
        margin-top: 20.8333333333vw;
    }
    .case-study.chromebooks section.photos .grid__row:nth-child(2) {
        margin-top: -4%;
    }
    .case-study.chromebooks section.photos .grid__row:nth-child(4) {
        margin-top: -11%;
        position: relative;
        z-index: -1;
    }
    .case-study.chromebooks section.photos .grid__row:nth-child(5) {
        margin-top: -6%;
    }
    .case-study.chromebooks section.photos .photos__label {
        bottom: -16%;
        top: auto;
    }
    .case-study.chromebooks section.photos .photos__label .line--vertical-custom,
    .case-study.chromebooks section.photos .photos__label .page--home .hero__work-selected::before,
    .page--home .case-study.chromebooks section.photos .photos__label .hero__work-selected::before,
    .case-study.chromebooks section.photos .photos__label .page--home .hero__work-selected::after,
    .page--home .case-study.chromebooks section.photos .photos__label .hero__work-selected::after,
    .case-study.chromebooks section.photos .photos__label .page--home .project.bears-ears .project__client::before,
    .page--home .project.bears-ears .case-study.chromebooks section.photos .photos__label .project__client::before,
    .case-study.chromebooks section.photos .photos__label .page--home .project.santatracker .project__client::before,
    .page--home .project.santatracker .case-study.chromebooks section.photos .photos__label .project__client::before {
        height: 25vw;
    }
}
.case-study.chromebooks .website-text {
    margin-top: 12.5vw;
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks .website-text {
        margin-top: 29.1666666667vw;
    }
}
.case-study.chromebooks .product-grid {
    margin-top: -30vw;
}
.case-study.chromebooks section.cards {
    margin-top: -25vw;
    position: relative;
    z-index: -1;
}
.case-study.chromebooks section.cards .grid__row,
.case-study.chromebooks section.cards img,
.case-study.chromebooks section.cards video {
    width: 100%;
}
.case-study.chromebooks section.cards .cards__video {
    position: absolute;
    right: 1.8%;
    top: 38.9%;
    width: 26.1%;
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks section.cards .cards__video {
        right: 0;
        top: 51.4%;
        width: 33%;
    }
}
.case-study.chromebooks .carousel-video {
    z-index: 0;
}
.case-study.chromebooks .audiences-text {
    margin-top: 8.3333333333vw;
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks .audiences-text {
        margin-top: 20.8333333333vw;
    }
}
.case-study.chromebooks section.long-browsers {
    margin-top: -20%;
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks section.long-browsers {
        margin-top: 0;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.chromebooks .outro-image {
        margin-top: -60%;
    }
}
.page--home .project.dschool {
    margin-bottom: 200px;
}
.page--home .project.dschool .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.dschool .project__details {
    left: -48%;
    top: 25%;
    width: 70%;
}
.page--home .project.dschool .project__client {
    left: 15%;
    top: 17%;
    white-space: nowrap;
}
.page--home .project.dschool .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    left: 105%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
}
.page--home .project.dschool .project__description {
    left: 10%;
    max-width: 470px;
    top: 20%;
}
.page--home .project.dschool .project__cta {
    bottom: 12%;
    right: 50%;
    width: 12%;
}
.page--home .project.dschool .project__cta-text {
    left: 33%;
    top: 25%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.dschool {
        margin-bottom: 250px;
    }
    .page--home .project.dschool .project__details {
        width: 105%;
    }
    .page--home .project.dschool .project__client {
        left: 5%;
    }
    .page--home .project.dschool .project__description {
        max-width: 240px;
    }
    .page--home .project.dschool .project__cta {
        bottom: auto;
        right: 30%;
        top: 62%;
    }
    .page--home .project.dschool .project__cta-text {
        left: auto;
        right: 30%;
    }
}
.case-study.dschool .hero-floating {
    margin-top: -33.3333333333vw;
    position: relative;
}
@media only screen and (max-width: 950px) {
    .case-study.dschool .hero-floating {
        margin-top: -15vw;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .hero-floating {
        margin-top: -60vw;
    }
}
.case-study.dschool .process-diagram {
    position: relative;
    z-index: 1;
}
.case-study.dschool .process-map {
    margin-top: -37%;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .process-map {
        margin-top: -20%;
    }
}
.case-study.dschool .process-photo {
    margin-top: -10%;
    position: relative;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .process-photo {
        margin-top: -15%;
    }
}
.case-study.dschool section.elements {
    margin-top: 3%;
    position: relative;
}
.case-study.dschool section.elements::before {
    background: url("../assets/projects/dschool/03_element_lines_grid.svg") center top/78% no-repeat transparent;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: -5%;
    width: 100%;
    z-index: -1;
}
.case-study.dschool section.elements img,
.case-study.dschool section.elements video,
.case-study.dschool section.elements .grid__row {
    width: 100%;
}
.case-study.dschool section.elements .element {
    position: relative;
}
.case-study.dschool section.elements .element.accordion {
    margin-left: -2%;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool section.elements .element.accordion {
        margin-left: 0;
    }
}
.case-study.dschool section.elements .element.event {
    margin-top: -10%;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool section.elements .element.event {
        margin-top: -25%;
    }
}
.case-study.dschool section.elements .element.pin {
    margin-top: -52%;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool section.elements .element.pin {
        z-index: -1;
    }
}
.case-study.dschool section.elements .element.icons {
    margin-top: 4%;
}
.case-study.dschool section.elements .element.icons > div {
    position: relative;
}
.case-study.dschool section.elements .element.icons img {
    display: block;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool section.elements .element.icons {
        margin-top: 5%;
        z-index: -2;
    }
}
.case-study.dschool section.elements .element.diagram {
    margin-top: -11%;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool section.elements .element.diagram {
        margin-left: -16.6666666667vw;
        margin-top: -20.8333333333vw;
        z-index: -3;
    }
}
.case-study.dschool section.elements .element.lines {
    margin-top: -13%;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool section.elements .element.lines {
        margin-top: 20.8333333333vw;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.dschool section.elements {
        margin-top: 12.5vw;
    }
}
.case-study.dschool .bringing-together {
    margin-top: -55%;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .bringing-together {
        margin-top: -110%;
    }
}
.case-study.dschool .design-intro {
    margin-top: -18%;
    z-index: 0;
}
.case-study.dschool .design-mobile {
    background: url("../assets/projects/dschool/04_design_lines_grid.svg") center top/54.5% no-repeat transparent;
    margin-bottom: 0;
    margin-top: -4.1666666667vw;
    padding-bottom: 5%;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .design-mobile {
        margin-top: 0;
    }
}
.case-study.dschool .design-events {
    margin-top: 0;
}
.case-study.dschool .design-events div.shadow {
    display: none;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .design-events div.shadow {
        display: block;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .system-colors {
        margin-top: 20.8333333333vw;
    }
}
.case-study.dschool section.browsers {
    margin-top: 8.3333333333vw;
}
.case-study.dschool section.browsers .scroll-arrow.top {
    bottom: 96%;
}
.case-study.dschool section.browsers div.above-smartphone section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .page--careers div.photos__bg section.long-browsers:first-child .long-browser__browser:nth-child(1),
.page--careers .case-study.dschool section.browsers div.photos__bg section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .page--careers div.positions__bg section.long-browsers:first-child .long-browser__browser:nth-child(1),
.page--careers .case-study.dschool section.browsers div.positions__bg section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .case-study.santatracker .video-text div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.santatracker .video-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.santatracker .tracker-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text--small div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.santatracker .tracker-text--small .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers div.above-smartphone section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .page--careers div.photos__bg section.long-browsers:first-child .long-browser__browser:nth-child(3),
.page--careers .case-study.dschool section.browsers div.photos__bg section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .page--careers div.positions__bg section.long-browsers:first-child .long-browser__browser:nth-child(3),
.page--careers .case-study.dschool section.browsers div.positions__bg section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .case-study.santatracker .video-text div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.santatracker .video-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.santatracker .tracker-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text--small div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(3),
.case-study.santatracker .tracker-text--small .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(3) {
    top: 0;
}
.case-study.dschool section.browsers div.above-smartphone section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .page--careers div.photos__bg section.long-browsers:first-child .long-browser__browser:nth-child(2),
.page--careers .case-study.dschool section.browsers div.photos__bg section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .page--careers div.positions__bg section.long-browsers:first-child .long-browser__browser:nth-child(2),
.page--careers .case-study.dschool section.browsers div.positions__bg section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .case-study.santatracker .video-text div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.santatracker .video-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.santatracker .tracker-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text--small div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(2),
.case-study.santatracker .tracker-text--small .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:first-child .long-browser__browser:nth-child(2) {
    padding-top: 10%;
}
.case-study.dschool section.browsers div.above-smartphone section.long-browsers:last-child,
.case-study.dschool section.browsers .page--careers div.photos__bg section.long-browsers:last-child,
.page--careers .case-study.dschool section.browsers div.photos__bg section.long-browsers:last-child,
.case-study.dschool section.browsers .page--careers div.positions__bg section.long-browsers:last-child,
.page--careers .case-study.dschool section.browsers div.positions__bg section.long-browsers:last-child,
.case-study.dschool section.browsers .case-study.santatracker .video-text div.text__label-inner::after section.long-browsers:last-child,
.case-study.santatracker .video-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child,
.case-study.dschool section.browsers .case-study.santatracker .tracker-text div.text__label-inner::after section.long-browsers:last-child,
.case-study.santatracker .tracker-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child,
.case-study.dschool section.browsers .case-study.santatracker .tracker-text--small div.text__label-inner::after section.long-browsers:last-child,
.case-study.santatracker .tracker-text--small .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child {
    margin-top: -35%;
}
.case-study.dschool section.browsers div.above-smartphone section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .page--careers div.photos__bg section.long-browsers:last-child .long-browser__browser:nth-child(1),
.page--careers .case-study.dschool section.browsers div.photos__bg section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .page--careers div.positions__bg section.long-browsers:last-child .long-browser__browser:nth-child(1),
.page--careers .case-study.dschool section.browsers div.positions__bg section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .case-study.santatracker .video-text div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.santatracker .video-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.santatracker .tracker-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text--small div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.santatracker .tracker-text--small .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(1),
.case-study.dschool section.browsers div.above-smartphone section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .page--careers div.photos__bg section.long-browsers:last-child .long-browser__browser:nth-child(3),
.page--careers .case-study.dschool section.browsers div.photos__bg section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .page--careers div.positions__bg section.long-browsers:last-child .long-browser__browser:nth-child(3),
.page--careers .case-study.dschool section.browsers div.positions__bg section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .case-study.santatracker .video-text div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.santatracker .video-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.santatracker .tracker-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text--small div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(3),
.case-study.santatracker .tracker-text--small .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(3) {
    top: 0;
}
.case-study.dschool section.browsers div.above-smartphone section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .page--careers div.photos__bg section.long-browsers:last-child .long-browser__browser:nth-child(2),
.page--careers .case-study.dschool section.browsers div.photos__bg section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .page--careers div.positions__bg section.long-browsers:last-child .long-browser__browser:nth-child(2),
.page--careers .case-study.dschool section.browsers div.positions__bg section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .case-study.santatracker .video-text div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.santatracker .video-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.santatracker .tracker-text .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.dschool section.browsers .case-study.santatracker .tracker-text--small div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(2),
.case-study.santatracker .tracker-text--small .case-study.dschool section.browsers div.text__label-inner::after section.long-browsers:last-child .long-browser__browser:nth-child(2) {
    padding-top: 15%;
}
.case-study.dschool .system-classes,
.case-study.dschool .system-field,
.case-study.dschool .system-programs,
.case-study.dschool .system-resources {
    position: relative;
}
.case-study.dschool .system-classes .image__inner,
.case-study.dschool .system-field .image__inner,
.case-study.dschool .system-programs .image__inner,
.case-study.dschool .system-resources .image__inner {
    position: relative;
}
.case-study.dschool .system-classes .image__inner::before,
.case-study.dschool .system-field .image__inner::before,
.case-study.dschool .system-programs .image__inner::before,
.case-study.dschool .system-resources .image__inner::before {
    background: url("../assets/browser-top-light.png") center bottom/contain no-repeat;
    content: "";
    left: 0;
    height: 100px;
    position: absolute;
    right: -0.2%;
    top: -100px;
    transform: translateY(2%);
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .system-classes .image__inner::before,
    .case-study.dschool .system-field .image__inner::before,
    .case-study.dschool .system-programs .image__inner::before,
    .case-study.dschool .system-resources .image__inner::before {
        transform: translateY(1%);
    }
}
.case-study.dschool .system-classes {
    margin-top: 4.1666666667vw;
}
.case-study.dschool .system-field {
    margin-top: -227%;
}
.case-study.dschool .system-programs {
    margin-top: -203%;
}
.case-study.dschool .system-resources {
    margin-top: -253%;
}
.case-study.dschool .system-tools {
    margin: 0;
}
.case-study.dschool .system-tools video {
    display: block;
    margin: 0 auto;
}
@media only screen and (max-width: 786px) {
    .case-study.dschool .system-tools {
        margin-top: -35%;
        z-index: 0;
    }
}
.case-study.dschool .outro img {
    display: block;
    margin: 0 auto;
}
.page--home .project.famsf {
    margin-bottom: 200px;
}
.page--home .project.famsf .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.famsf .project__background {
    top: 65%;
}
.page--home .project.famsf .project__background-inner {
    height: 100vh;
}
.page--home .project.famsf .project__details {
    right: -55%;
    top: 26%;
    width: 70%;
}
.page--home .project.famsf .project__client {
    left: 15%;
    top: 17%;
    white-space: nowrap;
}
.page--home .project.famsf .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    content: "";
    right: 105%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.famsf .project__client::before {
        width: calc(35.9663865546px + 5.6022408964vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.famsf .project__client::before {
        width: 120px;
    }
}
.page--home .project.famsf .project__description {
    left: 15%;
    top: 20%;
}
.page--home .project.famsf .project__cta {
    bottom: 20%;
    right: 40%;
    width: 15%;
}
.page--home .project.famsf .project__cta-text {
    left: 33%;
    top: 25%;
}
.page--home .project.famsf video {
    -o-object-fit: initial;
    object-fit: initial;
}
@media only screen and (max-width: 786px) {
    .page--home .project.famsf {
        margin-bottom: 250px;
    }
    .page--home .project.famsf .project__details {
        width: 100%;
    }
    .page--home .project.famsf .project__client {
        left: 18%;
        max-width: 170px;
        top: 21%;
        white-space: normal;
    }
    .page--home .project.famsf .project__description {
        top: 30%;
    }
    .page--home .project.famsf .project__cta {
        bottom: auto;
        right: 30%;
        top: 72%;
    }
    .page--home .project.famsf .project__cta-text {
        left: auto;
        right: 30%;
    }
}
.case-study.famsf .hero .hero__image-caption {
    bottom: 15px;
    right: 0;
    width: 12%;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .hero .hero__image-caption {
        bottom: 10%;
        left: 15px;
        width: 80%;
    }
}
.case-study.famsf .hero-intro {
    margin-top: -15%;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .hero-intro {
        margin-top: -10%;
    }
}
.case-study.famsf .strategy-table {
    margin-top: 15%;
}
.case-study.famsf .strategy-people {
    margin-top: -50%;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .strategy-people {
        margin-top: -15%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .branding-logo {
        margin-top: 12.5vw;
    }
}
.case-study.famsf .branding-type {
    margin-bottom: 8.3333333333vw;
    margin-top: 4.1666666667vw;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .branding-type {
        margin-top: 8.3333333333vw;
    }
}
.case-study.famsf .branding-colors {
    margin-bottom: 8.3333333333vw;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .branding-colors {
        margin-bottom: 12.5vw;
    }
}
.case-study.famsf .branding-art {
    margin-bottom: 60px;
}
@media only screen and (min-width: 787px) {
    .case-study.famsf .branding-art {
        margin-bottom: auto;
        margin-top: 25%;
    }
}
.case-study.famsf .branding-art1 .image__caption {
    width: 58%;
}
@media only screen and (min-width: 787px) {
    .case-study.famsf .branding-art1 {
        margin-top: -20%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .branding-art1 .image__caption {
        top: 0;
        transform: translateY(-100%);
        width: 100%;
    }
    .case-study.famsf .branding-art1 .image__caption span {
        margin: 0 0 15px 15px;
    }
}
.case-study.famsf .branding-art2 {
    margin-top: -40%;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .branding-art2 {
        margin-top: -10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.famsf .expansion-ui1 {
        margin-top: -10%;
    }
}
.case-study.famsf .expansion-ui2 {
    margin-top: -35%;
}
.case-study.famsf .expansion-ui3 {
    margin-top: 10%;
}
.case-study.famsf .expansion-ui4 {
    margin-top: -50%;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .expansion-ui4 {
        margin-top: -55%;
    }
}
.case-study.famsf .expansion-ui5 {
    margin-top: 10%;
}
.case-study.famsf .long-browsers {
    margin-bottom: 40%;
    margin-top: -10%;
}
@media only screen and (max-width: 786px) {
    .case-study.famsf .long-browsers {
        margin-bottom: 20%;
        margin-top: 20%;
    }
}
.case-study.famsf section.mobile {
    margin-bottom: 2.0833333333vw;
}
@media only screen and (min-width: 787px) {
    .case-study.famsf section.mobile .mobile__phone:nth-child(even) {
        margin-bottom: -4.1666666667vw;
        margin-top: 4.1666666667vw;
    }
}
.case-study.famsf .outro {
    margin-top: 15%;
    padding-bottom: 36px;
}
.page--home .project.git-merge {
    margin-bottom: 225px;
}
.page--home .project.git-merge .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.git-merge .project__background {
    top: -230%;
}
.page--home .project.git-merge .project__background-inner {
    height: 200vh;
}
.page--home .project.git-merge .project__details {
    left: -31%;
    top: 16%;
    width: 40%;
}
.page--home .project.git-merge .project__client {
    left: 10%;
    top: 10%;
}
.page--home .project.git-merge .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    left: 120%;
    top: calc(50% - 1px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
    width: 150px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.git-merge .project__client::before {
        width: calc(-26.1344537815px + 22.4089635854vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.git-merge .project__client::before {
        width: 310px;
    }
}
.page--home .project.git-merge .project__description {
    left: -25%;
    max-width: 500px;
    top: 5%;
    width: 150%;
}
.page--home .project.git-merge .project__cta {
    bottom: -5%;
    left: 10%;
    width: 23%;
}
.page--home .project.git-merge .project__cta-text {
    left: 25%;
    top: 40%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.git-merge div.project__details {
        bottom: -20% !important;
        width: 100%;
    }
    .page--home .project.git-merge .project__client {
        left: 70%;
    }
    .page--home .project.git-merge .project__client::before {
        transform-origin: 100% 50%;
    }
    .page--home .project.git-merge .project__description {
        left: 35%;
        top: 10%;
        width: 70%;
    }
    .page--home .project.git-merge .project__cta {
        bottom: auto;
        left: 50%;
        top: 70%;
    }
}
.case-study.git-merge .hero .hero__client-name {
    color: rgba(255, 255, 255, 0.07);
    z-index: -1;
}
.case-study.git-merge .hero__image {
    padding-top: 15vw;
}
@media only screen and (max-width: 786px) {
    .case-study.git-merge .hero__image {
        padding-top: 0;
    }
}
.case-study.git-merge .hero-floating {
    margin-top: -30%;
    position: relative;
    z-index: 1;
}
.case-study.git-merge .hero__services-list {
    height: 350px;
}
.case-study.git-merge .color-grid {
    position: relative;
    z-index: 2;
}
.case-study.git-merge .video--logo {
    background: #000;
    margin-bottom: 6%;
    margin-top: -25%;
    padding: 20% 0;
}
@media only screen and (max-width: 786px) {
    .case-study.git-merge .video--logo {
        margin-top: 1.6666666667vw;
    }
}
.case-study.git-merge .scroll-shape {
    bottom: 0;
    position: absolute;
    top: -100%;
    width: 100%;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.git-merge .scroll-shape {
        top: -200%;
    }
}
.case-study.git-merge .scroll-shape .scroll-shape__shape {
    background: url("../assets/projects/gitmerge/video-scroll-shape.svg") left top 100% no-repeat;
    height: 100%;
    transform-origin: 50% 0;
}
.case-study.git-merge .graph .image__caption {
    bottom: -90px;
    right: 0;
}
.case-study.git-merge .design-banner {
    margin-top: 8.3333333333vw;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.git-merge .design-banner {
        margin-top: 20.8333333333vw;
    }
}
.case-study.git-merge .design-shirt {
    margin-top: -35%;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.git-merge .design-shirt {
        margin-top: -15%;
    }
}
.case-study.git-merge .design-lanyard {
    margin-bottom: 4%;
    margin-top: -27%;
    position: relative;
    z-index: 1;
}
.case-study.git-merge .site-browser {
    margin-bottom: 0;
    margin-top: 2%;
}
.case-study.git-merge .site-mobile {
    margin-bottom: 0;
    margin-top: -38%;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.git-merge .site-mobile {
        margin-top: 5%;
    }
}
.case-study.git-merge .site-mobile .mobile__inner {
    justify-content: flex-end;
}
@media only screen and (max-width: 786px) {
    .case-study.git-merge .site-mobile .mobile__inner {
        justify-content: space-around;
    }
}
.case-study.git-merge .site-text {
    margin: 0;
    position: relative;
}
.case-study.git-merge .image--bag {
    margin-top: 20%;
}
.page--home .project.jigsaw {
    margin-bottom: 200px;
}
.page--home .project.jigsaw .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.jigsaw .project__details {
    right: -40%;
    top: 45%;
    width: 50%;
}
.page--home .project.jigsaw .project__client {
    left: 70%;
    top: 15%;
    white-space: nowrap;
}
.page--home .project.jigsaw .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    content: "";
    right: 130%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.jigsaw .project__client::before {
        width: calc(-130.2521008403px + 42.0168067227vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.jigsaw .project__client::before {
        width: 500px;
    }
}
.page--home .project.jigsaw .project__description {
    left: 40%;
    top: 18%;
    width: 80%;
}
.page--home .project.jigsaw .project__cta {
    bottom: 10%;
    right: 25%;
    width: 15%;
}
.page--home .project.jigsaw .project__cta-text {
    left: 33%;
    top: 25%;
}
.page--home .project.jigsaw video {
    -o-object-fit: initial;
    object-fit: initial;
}
@media only screen and (max-width: 786px) {
    .page--home .project.jigsaw {
        margin-bottom: 250px;
    }
    .page--home .project.jigsaw .project__details {
        width: 85%;
    }
    .page--home .project.jigsaw .project__client {
        left: 48%;
        max-width: 170px;
        top: 21%;
        white-space: normal;
    }
    .page--home .project.jigsaw .project__description {
        top: 20%;
        left: 25%;
    }
    .page--home .project.jigsaw .project__cta {
        bottom: auto;
        right: 30%;
        top: 72%;
    }
    .page--home .project.jigsaw .project__cta-text {
        left: auto;
        right: 30%;
    }
}
.case-study.jigsaw .hero-floating--video {
    margin-top: -25%;
}
@media only screen and (max-width: 786px) {
    .case-study.jigsaw .hero-floating--video {
        margin-top: -10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.jigsaw .image.jigsaw-puzzle {
        margin-top: -12%;
    }
}
.case-study.jigsaw .image.jigsaw-logos {
    margin-top: -10%;
}
.case-study.jigsaw .image.jigsaw-anti {
    margin-top: 15%;
}
@media only screen and (max-width: 786px) {
    .case-study.jigsaw .image.jigsaw-anti {
        width: 400vw !important;
    }
}
.case-study.jigsaw .image.jigsaw-poster {
    margin-top: 8.3333333333vw;
}
.case-study.jigsaw .image.jigsaw-branding-mocks {
    margin-top: 4.1666666667vw;
}
.case-study.jigsaw .image.jigsaw-sans {
    margin-top: 15%;
    transform: translateX(5vw);
}
@media only screen and (max-width: 786px) {
    .case-study.jigsaw .image.jigsaw-sans {
        width: 300vw !important;
    }
}
.case-study.jigsaw .image.jigsaw-palette {
    margin-bottom: 8.3333333333vw;
    margin-top: 8.3333333333vw;
}
.case-study.jigsaw .image.jigsaw-art {
    margin-top: -25%;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.jigsaw .image.jigsaw-art {
        margin-top: 15%;
    }
}
.case-study.jigsaw .image.jigsaw-face {
    margin-top: -24%;
}
.case-study.jigsaw .image.jigsaw-line-icons {
    margin-top: -2%;
}
@media only screen and (max-width: 786px) {
    .case-study.jigsaw .image.jigsaw-line-icons {
        margin-top: 15%;
    }
}
.case-study.jigsaw .image.jigsaw-dataviz {
    margin-top: 8.3333333333vw;
}
.case-study.jigsaw .mobile.jigsaw-dataviz-mobile {
    margin-top: 4.1666666667vw;
}
.case-study.jigsaw .video.jigsaw-deepfake.no-chrome {
    margin-top: -25%;
}
@media only screen and (min-width: 787px) {
    .case-study.jigsaw .video.jigsaw-icons.no-chrome {
        margin-top: -10%;
    }
}
.case-study.jigsaw .image-video {
    margin: 8.3333333333vw 0;
}
.case-study.jigsaw .image-video video {
    width: 100%;
}
.case-study.jigsaw .image-video img {
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .case-study.jigsaw .image-video .image-video__items {
        display: block;
    }
    .case-study.jigsaw .image-video .image-video__item {
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        width: 83.333%;
    }
    .case-study.jigsaw .image-video .image-video__item:nth-child(2) {
        margin-top: 8.3333333333vw;
    }
}
.page--home .project.le-tote {
    margin-bottom: 200px;
}
.page--home .project.le-tote .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.le-tote .project__details {
    right: -30%;
    top: 10%;
    width: 60%;
}
.page--home .project.le-tote .project__client {
    left: 50%;
    top: 30%;
}
.page--home .project.le-tote .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    right: 110%;
    top: calc(50% - 2px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
    width: 80px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.le-tote .project__client::before {
        width: calc(-8.0672268908px + 11.2044817927vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.le-tote .project__client::before {
        width: 160px;
    }
}
.page--home .project.le-tote .project__description {
    left: 25%;
    top: 30%;
    max-width: 470px;
    width: 120%;
}
.page--home .project.le-tote .project__cta {
    bottom: 15%;
    right: 30%;
    width: 18%;
}
.page--home .project.le-tote .project__cta-text {
    top: 30%;
    left: -15%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.le-tote {
        margin-bottom: 200px;
    }
    .page--home .project.le-tote div.project__details {
        width: 75%;
    }
    .page--home .project.le-tote .project__description {
        max-width: 80%;
    }
    .page--home .project.le-tote div.project__cta {
        bottom: auto;
        right: 15%;
        top: 95%;
        width: 18%;
    }
}
.case-study.le-tote .hero {
    background: #fff7e8;
}
.case-study.le-tote .hero-floating {
    margin-top: -15%;
    position: relative;
}
.case-study.le-tote section.type {
    margin-bottom: 12.5vw;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.type {
        margin-top: 20.8333333333vw;
    }
    .case-study.le-tote section.type .grid__row:last-child {
        flex-wrap: wrap;
        margin-top: -10vw;
    }
}
.case-study.le-tote section.type .type__samples,
.case-study.le-tote section.type .type__belt-image {
    position: absolute;
}
.case-study.le-tote section.type img {
    width: 100%;
}
.case-study.le-tote section.type .type__top {
    position: relative;
    z-index: 2;
}
.case-study.le-tote section.type .type__samples {
    width: 50%;
    right: 90%;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.type .type__samples {
        right: auto;
        position: relative;
        width: 100%;
    }
}
.case-study.le-tote section.type .type__body {
    left: 10%;
    margin: 11% 0;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.type .type__body {
        left: 25%;
    }
}
.case-study.le-tote section.type .type__body-sample {
    max-width: 195px;
}
.case-study.le-tote section.type .type__sample-name {
    margin-bottom: 4.5%;
}
.case-study.le-tote section.type .type__icons {
    max-width: 406px;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.type .type__icons {
        margin: 11% 0;
    }
}
.case-study.le-tote section.type .type__top-image {
    position: relative;
    z-index: 1;
}
.case-study.le-tote section.type .type__middle-image {
    padding-right: 0;
    position: relative;
    top: -5vw;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.type .type__middle-image {
        padding-right: 0;
    }
}
.case-study.le-tote section.type .type__bottom-image {
    left: -4.1vw;
    padding: 5.2vw;
    position: relative;
    top: 3vw;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.type .type__bottom-image {
        flex: 1 0 100%;
        left: auto;
        padding: 14vw 5.2vw;
        top: -12vw;
    }
}
.case-study.le-tote section.type .type__bottom-image img {
    position: relative;
}
.case-study.le-tote section.type .type__bottom-image-background {
    background: #f8f8f8;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.case-study.le-tote section.type .type__belt-image {
    bottom: 0;
    max-width: 427px;
    right: 0;
    transform: translate(20%, 90%);
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.type .type__belt-image {
        max-width: 90%;
        transform: translate(20%, 15%);
    }
}
.case-study.le-tote .mobile-text {
    margin-left: 7%;
    margin-right: 7%;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote .mobile-text {
        margin-left: 0;
        margin-right: 0;
    }
    .case-study.le-tote .mobile-text .text__decorator {
        display: none;
    }
}
.case-study.le-tote .product-text {
    margin-bottom: 8.3333333333vw;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote .product-text {
        margin-bottom: 20.8333333333vw;
        margin-top: 20.8333333333vw;
    }
    .case-study.le-tote .product-text .grid__row {
        position: relative;
    }
    .case-study.le-tote .product-text .grid__row::after {
        background: #f2af95;
        bottom: 0;
        content: "";
        position: absolute;
        right: 0;
        top: -18vw;
        width: 14.5%;
    }
}
.case-study.le-tote .grid-popout {
    margin-bottom: 12.5vw;
    margin-top: -4.1666666667vw;
}
.case-study.le-tote .grid-popout img {
    display: block;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote .grid-popout {
        margin-bottom: 25vw;
        margin-top: -25vw;
        position: relative;
    }
}
.case-study.le-tote .grid-popout__inner {
    position: relative;
}
.case-study.le-tote .grid-popout__background {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 130%;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote .grid-popout__background {
        left: 0;
        width: 270%;
    }
}
.case-study.le-tote .grid-popout__foreground {
    position: absolute;
}
.case-study.le-tote .grid-popout__foreground img {
    position: relative;
}
.case-study.le-tote .items-popout .grid-popout__foreground {
    width: 33%;
    left: 57.8%;
    top: -20%;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote .items-popout .grid-popout__foreground {
        left: 18%;
        width: 65%;
    }
}
.case-study.le-tote section.long-browsers {
    margin-top: -15%;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote section.long-browsers {
        margin-top: 0;
    }
}
.case-study.le-tote .save-popout {
    margin-bottom: 8.3333333333vw;
    margin-top: 8.3333333333vw;
}
.case-study.le-tote .save-popout .grid-popout__foreground {
    width: 64%;
    left: 9.8%;
    top: -15%;
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote .save-popout {
        margin-bottom: 16.6666666667vw;
        margin-top: 16.6666666667vw;
    }
    .case-study.le-tote .save-popout .grid-popout__background {
        left: 50%;
        width: 262%;
    }
    .case-study.le-tote .save-popout .grid-popout__foreground {
        left: -34%;
        top: -20%;
        width: 134%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.le-tote .table-image {
        margin-top: -40%;
        position: relative;
    }
}
.page--home .project.lightstep {
    margin-bottom: 200px;
}
.page--home .project.lightstep .project__details {
    bottom: 10%;
    left: -23%;
    width: 40%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.lightstep .project__details {
        width: 94%;
    }
}
.page--home .project.lightstep .project__description {
    left: -10%;
    line-height: 1.1;
    top: 25%;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.lightstep .project__description {
        left: 16%;
        width: 87%;
    }
}
.page--home .project.lightstep .project__client {
    left: -5%;
    top: 23%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.lightstep .project__client {
        left: 17%;
        top: 21%;
    }
}
.page--home .project.lightstep .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    left: 130%;
    top: calc(50% - 1px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
}
.page--home .project.lightstep .project__cta {
    bottom: -5%;
    left: 55%;
    width: 22%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.lightstep .project__cta {
        left: 22%;
        top: 81%;
    }
}
.page--home .project.lightstep .project__cta-inner {
    width: 80%;
}
.page--home .project.lightstep .project__cta-text {
    top: 31%;
}
.page--home .project.lightstep .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.case-study.lightstep .hero {
    background: #db3236;
    display: flex;
    flex-direction: column;
}
.case-study.lightstep .hero__text-label-inner {
    border-top-color: #000;
}
.case-study.lightstep .hero__image {
    order: 2;
    margin-top: 25vw;
    padding-top: 0;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .hero__image {
        margin-top: 450px;
    }
}
.case-study.lightstep .hero__content-wrapper {
    position: relative;
}
@media only screen and (min-width: 787px) {
    .case-study.lightstep .hero__services-list {
        height: 300px;
    }
}
.case-study.lightstep .hero-floating {
    margin-top: -30%;
    position: relative;
}
.case-study.lightstep .better-future {
    margin-bottom: 12.5vw;
    margin-top: 4.1666666667vw;
    position: relative;
}
.case-study.lightstep .better-future img {
    display: block;
    position: relative;
    width: 100%;
}
.case-study.lightstep .better-future__inner {
    position: relative;
}
.case-study.lightstep .better-future__caption {
    color: #71777a;
    position: absolute;
}
.case-study.lightstep .better-future__caption-1 {
    bottom: 60%;
    right: 98%;
    width: 28.5714285714%;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .better-future__caption-1 {
        bottom: 90%;
        right: 64%;
        width: 140px;
    }
}
.case-study.lightstep .better-future__caption-2 {
    right: 100%;
    top: 53.7%;
    transform: translateY(-50%);
    width: 96px;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .better-future__caption-2 {
        right: 93%;
        top: 56%;
        transform: none;
        width: 50px;
    }
}
.case-study.lightstep .better-future__caption-3 {
    left: 102%;
    top: 53.7%;
    transform: translateY(-50%);
    width: 103px;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .better-future__caption-3 {
        bottom: 48%;
        left: 86%;
        top: auto;
        transform: none;
        width: 56px;
    }
}
.case-study.lightstep .better-future__caption-4 {
    left: 83%;
    top: 74%;
    width: 175px;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .better-future__caption-4 {
        left: 63%;
        top: 99%;
        width: 115px;
    }
}
.case-study.lightstep .better-future__caption p {
    margin-bottom: 1em;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .better-future {
        margin-bottom: 130px;
        margin-top: 160px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.lightstep .identity-text {
        margin-top: -35%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .identity-text {
        margin-top: 8.3333333333vw;
    }
}
.case-study.lightstep .img-identity-detail {
    position: relative;
}
.case-study.lightstep .img-identity-detail .image__caption {
    color: #71777a;
    height: auto;
    margin-left: 50%;
    margin-top: 34px;
    position: relative;
    width: 202px;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .img-identity-detail .image__caption {
        margin-left: calc(100% - 202px);
    }
}
.case-study.lightstep .img-identity-detail .image__caption span {
    position: relative;
}
.case-study.lightstep .img-identity-grid {
    margin-bottom: 12.5vw;
    margin-top: 12.5vw;
}
@media only screen and (min-width: 787px) {
    .case-study.lightstep .logo-text {
        height: 350px;
        padding-top: 100px;
        position: relative;
        z-index: 2;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.lightstep .logo-shape.video.no-chrome {
        margin-top: -350px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .logo-shape.video.no-chrome {
        margin-bottom: 12.5vw;
    }
}
.case-study.lightstep .data-chaos .video__inner {
    margin-left: -30%;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .data-chaos .video__inner {
        margin-left: -60%;
    }
}
.case-study.lightstep .poster-mockup.video.no-chrome {
    margin-top: -54.12%;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .poster-mockup.video.no-chrome {
        margin-top: -79.1%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .cards-mockup {
        margin-top: 12.5vw;
    }
}
.case-study.lightstep .sides {
    margin-top: -16%;
    padding-bottom: 8.3333333333vw;
    position: relative;
}
.case-study.lightstep .sides__backgrund {
    left: 12.5vw;
    position: absolute;
    top: 4.1666666667vw;
    width: 75vw;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .sides__backgrund {
        top: 12.5vw;
    }
}
.case-study.lightstep .sides__video-wrapper {
    position: relative;
}
.case-study.lightstep .sides__video-wrapper img {
    display: block;
    width: 100%;
}
.case-study.lightstep .sides__video-wrapper__shadowbox {
    position: absolute;
}
.case-study.lightstep .sides__video-wrapper__shadowbox video {
    display: block;
    width: 100%;
}
.case-study.lightstep .sides__video-wrapper__shadowbox::after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.case-study.lightstep .sides__video-wrapper-1 {
    margin-left: 8.3333333333vw;
    width: 41.6666666667vw;
}
.case-study.lightstep .sides__video-wrapper-1 .sides__video-wrapper__shadowbox {
    left: 10%;
    top: 10%;
    width: 80%;
}
.case-study.lightstep .sides__video-wrapper-1 .sides__video-wrapper__shadowbox::after {
    background: linear-gradient(to bottom, #ffaac7, rgba(255, 170, 199, 0) 20%, rgba(255, 170, 199, 0) 80%, #ffaac7), linear-gradient(to right, #ffaac7, rgba(255, 170, 199, 0) 20%, rgba(255, 170, 199, 0) 80%, #ffaac7);
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .sides__video-wrapper-1 {
        margin-left: 4.1666666667vw;
        width: 75vw;
    }
}
.case-study.lightstep .sides__video-wrapper-2 {
    margin-left: 58.3333333333vw;
    margin-top: -12.5vw;
    width: 33.3333333333vw;
}
.case-study.lightstep .sides__video-wrapper-2 .sides__video-wrapper__shadowbox {
    left: 12%;
    top: 7%;
    width: 80%;
}
.case-study.lightstep .sides__video-wrapper-2 .sides__video-wrapper__shadowbox::after {
    background: linear-gradient(to bottom, #0083ce, rgba(0, 131, 206, 0) 20%, rgba(0, 131, 206, 0) 80%, #0083ce), linear-gradient(to right, #0083ce, rgba(0, 131, 206, 0) 20%, rgba(0, 131, 206, 0) 80%, #0083ce);
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .sides__video-wrapper-2 {
        margin-left: 29.1666666667vw;
        margin-top: 8.3333333333vw;
        width: 66.6666666667vw;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .sides {
        margin-top: 12.5vw;
    }
}
.case-study.lightstep .instagram {
    margin-bottom: 0;
    margin-top: 0;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .instagram {
        padding-bottom: 0;
    }
    .case-study.lightstep .instagram .mobile__inner {
        padding-bottom: 0;
    }
    .case-study.lightstep .instagram .mobile__phone-inner {
        width: 84%;
    }
}
.case-study.lightstep .instagram .mobile__phone::before {
    padding-top: 166%;
}
.case-study.lightstep .instagram .mobile__phone-inner {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .service-diagram {
        margin-top: 8.3333333333vw;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.lightstep .system-diagram {
        margin-top: -20%;
    }
}
.case-study.lightstep .icons {
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .icons {
        margin-top: 12.5vw;
    }
}
.case-study.lightstep .icons .animated-image .animated-image__inner::after {
    display: none;
}
.case-study.lightstep .yellow-background {
    height: 0;
    margin-top: 0;
    transform: translateY(-30vw);
}
.case-study.lightstep .screens.screens-follow {
    margin-top: -3%;
}
.case-study.lightstep .screens .animated-image .animated-image__inner::after {
    display: none;
}
.case-study.lightstep .mobile-bg {
    margin-top: 8.3333333333vw;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .mobile-bg {
        margin-top: 12.5vw;
    }
}
.case-study.lightstep .mobile-text {
    margin-top: -50%;
}
@media only screen and (max-width: 786px) {
    .case-study.lightstep .mobile-text {
        margin-top: -142%;
    }
}
.page--home .project.reel {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
}
.page--home .project.reel::after {
    background-color: rgba(240, 240, 240, 0.9);
    content: "";
    cursor: pointer;
    display: block;
    height: 100vh;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity 0.3s linear 0.3s;
    width: 100vw;
    z-index: 15;
}
.page--home .project.reel .project__preview {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.page--home .project.reel .project__inner {
    cursor: pointer;
    transform: translateX(5.555%);
}
.page--home .project.reel .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.reel .project__inner:hover .project__image {
    transform: scale(1.02);
}
.page--home .project.reel .project__inner:hover .project__image .project__play-button::before {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    transform: scale(1.2);
}
.page--home .project.reel .project__inner:hover .project__cta-inner {
    transform: translateX(1.5vw) translateY(0) scale(1.04);
}
.page--home .project.reel .project__details {
    right: -45%;
    top: 32%;
    width: 55%;
}
.page--home .project.reel .project__cta {
    bottom: 5%;
    left: 94%;
    opacity: 1;
    transition: opacity 0.3s linear 0.3s !important;
    width: 15em;
}
.page--home .project.reel .project__cta-text {
    bottom: 40%;
    left: -4%;
}
.page--home .project.reel .project__image {
    padding-bottom: 92.6%;
    transition: opacity 0.3s linear 0.3s, transform 1.7s cubic-bezier(0.2, 0.57, 0, 1.04) !important;
}
.page--home .project.reel .project__image .project__image-wrapper {
    height: 100%;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: height 0.3s cubic-bezier(0.12, 0.475, 0, 0.995) 0.3s, width 0.3s cubic-bezier(0.12, 0.475, 0, 0.995) 0.3s, transform 0.3s cubic-bezier(0.12, 0.475, 0, 0.995) 0.3s;
    width: 100%;
}
.page--home .project.reel .project__image video {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}
.page--home .project.reel .project__video {
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s linear;
    width: 100%;
    z-index: 16;
}
.page--home .project.reel .project__video .project__video-inner {
    position: relative;
}
.page--home .project.reel .project__video .project__video-thumbnail {
    padding-bottom: 56.25%;
    width: 100%;
}
.page--home .project.reel .project__video iframe {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100.01%;
}
.page--home .project.reel .shadow {
    background: #fff;
    transition: transform 0.3s cubic-bezier(0.12, 0.475, 0, 0.995) 0.3s;
    transform: scale(1, 1);
}
.page--home .project.reel.youtube--is-playing {
    z-index: 100;
}
.page--home .project.reel.youtube--is-playing .project__cta {
    opacity: 0;
    transition: opacity 0.1s linear !important;
}
.page--home .project.reel.youtube--is-playing .project__image {
    opacity: 0;
    transition: opacity 0.3s linear !important;
}
.page--home .project.reel.youtube--is-playing .project__image .project__image-wrapper {
    height: 121.49%;
    transition: height 0.3s cubic-bezier(0.12, 0.475, 0, 0.995), width 0.3s cubic-bezier(0.12, 0.475, 0, 0.995), transform 0.3s cubic-bezier(0.12, 0.475, 0, 0.995);
    width: 200%;
}
.page--home .project.reel.youtube--is-playing .project__video {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s linear 0.3s;
}
.page--home .project.reel.youtube--is-playing .shadow {
    transform: scale(2, 1.2149);
    transition: transform 0.3s cubic-bezier(0.12, 0.475, 0, 0.995);
}
.page--home .project.reel.youtube--is-playing::after {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s linear;
}
@media only screen and (max-width: 786px) {
    .page--home .project.reel {
        display: block;
        margin-bottom: 200px;
    }
    .page--home .project.reel .project__image {
        padding-bottom: 112%;
    }
    .page--home .project.reel.youtube--is-playing .project__image .project__image-wrapper {
        height: 60.5%;
        width: 100%;
    }
    .page--home .project.reel.youtube--is-playing .shadow {
        transform: scale(1, 0.605);
    }
    .page--home .project.reel .project__preview.grid__row {
        max-width: none;
    }
    .page--home .project.reel a.project__inner {
        flex: 0 0 83.33337%;
        margin-left: 8.33333%;
        transform: none;
    }
    .page--home .project.reel .project__details {
        width: 80%;
    }
    .page--home .project.reel .project__description {
        left: 12%;
        width: 90%;
    }
    .page--home .project.reel div.project__client {
        left: 10%;
        right: auto;
    }
    .page--home .project.reel div.project__client::before {
        transform-origin: 0% 50%;
    }
    .page--home .project.reel .project__cta {
        bottom: -8%;
        left: auto;
        top: auto;
        right: 5%;
    }
}
@media only screen and (max-width: 360px) {
    .page--home .project.reel .project__details-blobby {
        width: 110%;
    }
    .page--home .project.reel .project__description {
        width: 100%;
    }
    .page--home .project.reel .project__cta {
        top: auto;
    }
}
.page--home .project.santatracker {
    margin-bottom: 200px;
}
@media only screen and (min-width: 787px) {
    .page--home .project.santatracker .project__inner.is-active .project__client::before {
        transform: translateX(-50%) scaleY(1);
    }
}
.page--home .project.santatracker .project__details {
    left: 60%;
    top: -7%;
    width: 30%;
}
.page--home .project.santatracker .project__client {
    left: 7%;
    top: -20%;
}
.page--home .project.santatracker .project__client::before {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    content: "";
    top: 30px;
    transition: transform 0.6s ease-in-out 0.5s;
    height: 130px;
}
@media only screen and (max-width: 1800px) {
    .page--home .project.santatracker .project__client::before {
        height: calc(-1.775147929px + 16.7652859961vw);
    }
}
@media only screen and (min-width: 1800px) {
    .page--home .project.santatracker .project__client::before {
        height: 300px;
    }
}
@media only screen and (min-width: 787px) {
    .page--home .project.santatracker .project__client::before {
        transform: translateX(-50%) scaleY(0);
        transform-origin: top center;
    }
}
.page--home .project.santatracker .project__description {
    left: 30%;
    max-width: 470px;
    top: 11%;
    width: 110%;
}
.page--home .project.santatracker .project__cta {
    bottom: 18%;
    left: 33%;
    width: 12%;
}
.page--home .project.santatracker .project__cta-text {
    left: 30%;
    top: 50%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.santatracker div.project__details {
        width: 85%;
    }
    .page--home .project.santatracker .project__client {
        left: 57%;
        top: 15%;
    }
    .page--home .project.santatracker .project__client::before {
        transform: scaleX(0);
        transform-origin: 100% 50%;
    }
    .page--home .project.santatracker .project__inner.is-active .project__client::before {
        transform: none;
    }
    .page--home .project.santatracker .project__description {
        left: 15%;
        max-width: 100%;
        top: 15%;
    }
    .page--home .project.santatracker .project__cta {
        bottom: auto;
        top: 75%;
    }
}
@media only screen and (max-width: 360px) {
    .page--home .project.santatracker .project__cta-text {
        left: -90%;
    }
}
.case-study.santatracker .hero__services-list {
    height: 490px;
}
.case-study.santatracker .intro-video {
    margin-top: -25vw;
}
@media only screen and (max-width: 950px) {
    .case-study.santatracker .intro-video {
        margin-top: -12vw;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .intro-video {
        margin-top: -25vw;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .village-text {
        margin-top: 29.1666666667vw;
    }
}
.case-study.santatracker .village-browser {
    margin-bottom: 8.3333333333vw;
    margin-top: 15vw;
}
.case-study.santatracker section.village {
    margin: -20vw 0 8.3333333333vw;
    position: relative;
    z-index: -1;
}
.case-study.santatracker section.village img {
    width: 100%;
}
.case-study.santatracker section.village .grid__row {
    width: 100%;
}
.case-study.santatracker section.village .village__circles,
.case-study.santatracker section.village .village__text {
    position: absolute;
}
.case-study.santatracker section.village .village__circles {
    top: 20%;
}
.case-study.santatracker section.village .village__circles .village__circle {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s, transform 0.6s;
}
.case-study.santatracker section.village .village__circles.is-active .village__circle {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s, transform 0.6s cubic-bezier(0.005, 0.425, 0.175, 1);
}
.case-study.santatracker section.village .village__circles.is-active .village__circle:nth-child(2) {
    transition-delay: 0.2s;
}
.case-study.santatracker section.village .village__circles.is-active .village__circle:nth-child(3) {
    transition-delay: 0.4s;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker section.village .village__circles {
        top: 20%;
    }
}
.case-study.santatracker section.village .village__text {
    top: 70%;
}
.case-study.santatracker section.village .village__circles-inner {
    display: flex;
    justify-content: space-between;
}
.case-study.santatracker section.village .village__circle {
    flex: 0 0 31%;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker section.village .village__circles-inner {
        justify-content: center;
    }
    .case-study.santatracker section.village .village__circle {
        flex: 0 0 50%;
    }
    .case-study.santatracker section.village .village__text {
        margin-top: 8.3333333333vw;
        position: relative;
        top: auto;
        z-index: -1;
    }
}
.case-study.santatracker section.characters {
    margin-top: 16.6666666667vw;
    position: relative;
}
.case-study.santatracker section.characters img,
.case-study.santatracker section.characters video,
.case-study.santatracker section.characters .grid__row {
    width: 100%;
}
.case-study.santatracker section.characters .characters__video {
    position: relative;
}
.case-study.santatracker section.characters .characters__video::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark .case-study.santatracker section.characters .characters__video::after {
    background: #1a1919;
}
body.is-black .case-study.santatracker section.characters .characters__video::after {
    background: #000;
}
.case-study.santatracker section.characters .characters__video.is-active::after {
    opacity: 0;
}
.case-study.santatracker section.characters .characters__video video {
    background: #d0d0d0;
    display: block;
    width: 100.1%;
}
.case-study.santatracker section.characters .characters__text,
.case-study.santatracker section.characters .characters__top,
.case-study.santatracker section.characters .characters__center {
    position: absolute;
}
.case-study.santatracker section.characters .characters__top {
    top: -10%;
}
.case-study.santatracker section.characters .characters__center {
    top: 31%;
}
.case-study.santatracker section.characters .characters__text {
    left: 1.5%;
    top: 31%;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker section.characters {
        display: flex;
        flex-direction: column;
    }
    .case-study.santatracker section.characters .characters__text {
        left: auto;
        margin-bottom: 25vw;
        order: -1;
        position: relative;
        top: auto;
    }
    .case-study.santatracker section.characters .characters__top {
        margin-top: -215vw;
        position: relative;
        top: auto;
    }
    .case-study.santatracker section.characters .characters__center {
        margin-top: 75vw;
        position: relative;
        top: auto;
    }
}
.case-study.santatracker .games-text .text__label-inner::before {
    width: 140px;
}
@media only screen and (max-width: 1500px) {
    .case-study.santatracker .games-text .text__label-inner::before {
        width: calc(-14.1176470588px + 19.6078431373vw);
    }
}
@media only screen and (min-width: 1500px) {
    .case-study.santatracker .games-text .text__label-inner::before {
        width: 280px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .games-text .text__label-inner::before {
        width: 120px;
    }
}
@media only screen and (max-width: 786px) and (max-width: 1500px) {
    .case-study.santatracker .games-text .text__label-inner::before {
        width: calc(75.9663865546px + 5.6022408964vw);
    }
}
@media only screen and (max-width: 786px) and (min-width: 1500px) {
    .case-study.santatracker .games-text .text__label-inner::before {
        width: 160px;
    }
}
.case-study.santatracker .games-text .text__label-text {
    margin-left: 20px;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .games-text .text__label-text {
        margin-left: 0;
    }
}
.case-study.santatracker .games-text .text__decorator {
    left: -10px;
    top: -15px;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .games-text {
        margin-top: 29.1666666667vw;
    }
}
.case-study.santatracker .barber-video {
    margin-bottom: 0;
}
.case-study.santatracker section.games {
    margin-top: -10%;
    position: relative;
    z-index: 1;
}
.case-study.santatracker section.games img,
.case-study.santatracker section.games video,
.case-study.santatracker section.games .grid__row {
    width: 100%;
}
.case-study.santatracker section.games .games__video-inner {
    position: relative;
}
.case-study.santatracker section.games .games__video-inner::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark .case-study.santatracker section.games .games__video-inner::after {
    background: #1a1919;
}
body.is-black .case-study.santatracker section.games .games__video-inner::after {
    background: #000;
}
.case-study.santatracker section.games .games__video-inner.is-active::after {
    opacity: 0;
}
.case-study.santatracker section.games .games__grid-top,
.case-study.santatracker section.games .games__grid-bottom {
    position: relative;
}
.case-study.santatracker section.games .games__video-top,
.case-study.santatracker section.games .games__video-bottom {
    position: absolute;
}
.case-study.santatracker section.games .games__video-top > div,
.case-study.santatracker section.games .games__video-bottom > div {
    position: relative;
}
.case-study.santatracker section.games .games__video-top div.shadow,
.case-study.santatracker section.games .games__video-bottom div.shadow {
    display: none;
}
.case-study.santatracker section.games .games__video-top video,
.case-study.santatracker section.games .games__video-bottom video {
    display: block;
}
.case-study.santatracker section.games .games__video-top {
    top: 18%;
}
.case-study.santatracker section.games .games__video-bottom {
    top: 46%;
}
.case-study.santatracker section.games .games__grid-bottom {
    margin-top: 20vw;
}
.case-study.santatracker section.games .games__screenshot {
    margin: 2.8vw 0;
    position: relative;
}
.case-study.santatracker section.games .games__screenshot img {
    display: block;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker section.games .games__video-top,
    .case-study.santatracker section.games .games__video-bottom {
        position: relative;
        top: auto;
    }
    .case-study.santatracker section.games .games__video-top div.shadow,
    .case-study.santatracker section.games .games__video-bottom div.shadow {
        display: block;
    }
    .case-study.santatracker section.games .games__video-top {
        margin-top: -12.5vw;
        z-index: 1;
    }
    .case-study.santatracker section.games .games__video-bottom {
        margin-top: -12.5vw;
    }
}
.case-study.santatracker .search-image {
    margin-top: -25%;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .search-image {
        margin-top: -35%;
    }
}
.case-study.santatracker .video-text,
.case-study.santatracker .tracker-text,
.case-study.santatracker .tracker-text--small {
    margin-top: 12.5vw;
}
.case-study.santatracker .video-text .text__label-inner,
.case-study.santatracker .tracker-text .text__label-inner,
.case-study.santatracker .tracker-text--small .text__label-inner {
    white-space: nowrap;
}
.case-study.santatracker .video-text .text__label-inner::before,
.case-study.santatracker .tracker-text .text__label-inner::before,
.case-study.santatracker .tracker-text--small .text__label-inner::before {
    display: none;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .video-text .text__label-inner::before,
    .case-study.santatracker .tracker-text .text__label-inner::before,
    .case-study.santatracker .tracker-text--small .text__label-inner::before {
        display: inline-block;
    }
}
.case-study.santatracker .video-text .text__label-inner::after,
.case-study.santatracker .tracker-text .text__label-inner::after,
.case-study.santatracker .tracker-text--small .text__label-inner::after {
    width: 140px;
    content: "";
    vertical-align: middle;
}
@media only screen and (max-width: 1500px) {
    .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .text__label-inner::after {
        width: calc(-14.1176470588px + 19.6078431373vw);
    }
}
@media only screen and (min-width: 1500px) {
    .case-study.santatracker .video-text .text__label-inner::after,
    .case-study.santatracker .tracker-text .text__label-inner::after,
    .case-study.santatracker .tracker-text--small .text__label-inner::after {
        width: 280px;
    }
}
.case-study.santatracker .video-text .text__label-text,
.case-study.santatracker .tracker-text .text__label-text,
.case-study.santatracker .tracker-text--small .text__label-text {
    margin-right: 20px;
}
.case-study.santatracker .video-text .text__label-text .text__decorator,
.case-study.santatracker .tracker-text .text__label-text .text__decorator,
.case-study.santatracker .tracker-text--small .text__label-text .text__decorator {
    left: -10px;
    top: -15px;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker .video-text,
    .case-study.santatracker .tracker-text,
    .case-study.santatracker .tracker-text--small {
        margin-top: 29.1666666667vw;
    }
}
.case-study.santatracker section.photogrid {
    margin-top: 8.3333333333vw;
    position: relative;
}
.case-study.santatracker section.photogrid img,
.case-study.santatracker section.photogrid video,
.case-study.santatracker section.photogrid .grid__row {
    width: 100%;
}
.case-study.santatracker section.photogrid img,
.case-study.santatracker section.photogrid video {
    display: block;
}
.case-study.santatracker section.photogrid .photogrid__text,
.case-study.santatracker section.photogrid .photogrid__video-top,
.case-study.santatracker section.photogrid .photogrid__video-bottom {
    position: absolute;
}
.case-study.santatracker section.photogrid .photogrid__text {
    top: 30%;
    transform: translateY(-50%);
    z-index: 1;
}
.case-study.santatracker section.photogrid .photogrid__text .photogrid__text-inner {
    background: #fff;
    padding: 2vw;
}
.case-study.santatracker section.photogrid .photogrid__video-top {
    top: 5%;
}
.case-study.santatracker section.photogrid .photogrid__video-bottom {
    top: 75%;
}
.case-study.santatracker section.photogrid .photogrid__video-inner {
    position: relative;
}
.case-study.santatracker section.photogrid .photogrid__video-inner::after {
    background: #fff;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s;
}
body.is-dark .case-study.santatracker section.photogrid .photogrid__video-inner::after {
    background: #1a1919;
}
body.is-black .case-study.santatracker section.photogrid .photogrid__video-inner::after {
    background: #000;
}
.case-study.santatracker section.photogrid .photogrid__video-inner.is-active::after {
    opacity: 0;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker section.photogrid {
        display: flex;
        flex-direction: column;
        margin-top: 20.8333333333vw;
    }
    .case-study.santatracker section.photogrid .photogrid__text {
        margin-bottom: 8.3333333333vw;
        order: 1;
        position: relative;
        top: auto;
        transform: none !important;
    }
    .case-study.santatracker section.photogrid .photogrid__text .photogrid__text-inner {
        background: transparent;
        padding: 0;
    }
    .case-study.santatracker section.photogrid .photogrid__background {
        margin-top: -40%;
        order: 3;
        position: relative;
    }
    .case-study.santatracker section.photogrid .photogrid__video-top {
        order: 2;
        position: relative;
        top: auto;
    }
    .case-study.santatracker section.photogrid .photogrid__video-bottom {
        margin-top: -65%;
        order: 4;
        position: relative;
        top: auto;
    }
}
.case-study.santatracker .tracker-text--small .text__label {
    margin-bottom: 10px;
}
.case-study.santatracker .tracker-text--small .text__label-text .text__decorator {
    left: auto;
    right: -35px;
    top: -30px;
}
.case-study.santatracker section.tracker {
    margin-top: 8.3333333333vw;
    margin-bottom: 25vw;
    position: relative;
}
.case-study.santatracker section.tracker img,
.case-study.santatracker section.tracker .grid__row {
    width: 100%;
}
.case-study.santatracker section.tracker .tracker__image {
    position: relative;
}
.case-study.santatracker section.tracker .tracker__image img {
    display: block;
}
.case-study.santatracker section.tracker .tracker__right {
    position: absolute;
    top: 5%;
}
.case-study.santatracker section.tracker .tracker__right .animated-image {
    display: block;
    margin: 4.1666666667vw;
}
@media only screen and (max-width: 786px) {
    .case-study.santatracker section.tracker {
        margin-top: 8.3333333333vw;
    }
    .case-study.santatracker section.tracker .tracker__left .animated-image div.shadow {
        display: none;
    }
    .case-study.santatracker section.tracker .tracker__right {
        position: relative;
        top: auto;
    }
    .case-study.santatracker section.tracker .tracker__right .animated-image {
        margin-left: 0;
        margin-right: 0;
    }
}
.case-study.santatracker section.video-top-grid {
    margin-bottom: -15vw;
    margin-top: 12.5vw;
}
.case-study.santatracker section.video-top-grid .video-top-grid__container {
    align-items: baseline;
}
.case-study.santatracker section.video-top-grid .video-top-grid__video {
    width: 100%;
}
.case-study.santatracker section.video-top-grid .video-top-grid__color {
    padding-bottom: 100%;
}
.case-study.santatracker section.video-top-grid + section.youtube {
    z-index: 2;
}
.case-study.santatracker section.video-bottom-grid {
    margin-top: -10vw;
}
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__container {
    align-items: start;
}
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__container > div:last-child .video-bottom-grid__video {
    padding-bottom: 10px;
}
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__video,
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__image {
    width: 100%;
}
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__video video,
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__video img,
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__image video,
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__image img {
    width: 100%;
}
.case-study.santatracker section.video-bottom-grid .video-bottom-grid__color {
    padding-bottom: 100%;
}
.case-study.santatracker section.video-bottom-grid .lifted {
    transform: translateY(-10vw);
}
.case-study.santatracker section.video-bottom-grid .lifted .video-bottom-grid__video {
    padding-top: 10px;
}
.page--home .project.sandhillcollection {
    margin-bottom: 200px;
}
.page--home .project.sandhillcollection .project__details {
    bottom: 10%;
    left: -23%;
    width: 40%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.sandhillcollection .project__details {
        width: 94%;
    }
}
.page--home .project.sandhillcollection .project__description {
    left: -10%;
    line-height: 1.1;
    top: 25%;
    width: 100%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.sandhillcollection .project__description {
        left: 16%;
        width: 87%;
    }
}
.page--home .project.sandhillcollection .project__client {
    left: -5%;
    top: 23%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.sandhillcollection .project__client {
        left: 17%;
        top: 21%;
    }
}
.page--home .project.sandhillcollection .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    left: 130%;
    top: calc(50% - 1px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
}
.page--home .project.sandhillcollection .project__cta {
    bottom: 25%;
    left: 35%;
    width: 22%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.sandhillcollection .project__cta {
        left: 22%;
        top: 81%;
    }
}
.page--home .project.sandhillcollection .project__cta-inner {
    width: 80%;
}
.page--home .project.sandhillcollection .project__cta-text {
    top: 31%;
}
.page--home .project.sandhillcollection .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.case-study.sandhillcollection .intro-video {
    margin-top: -10vw;
}
@media only screen and (max-width: 786px) {
    .case-study.sandhillcollection .intro-video {
        margin-top: 80vw;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.sandhillcollection .hero--case-study .hero__image {
        display: none;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.sandhillcollection .hero--case-study .hero__image img {
        max-height: 1100px;
    }
}
@media only screen and (min-width: 1169px) {
    .case-study.sandhillcollection .hero--case-study .hero__image img {
        max-height: 1300px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.sandhillcollection .video-logo {
        margin-bottom: 15vw;
        margin-top: 20vw;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.sandhillcollection .image-campuses {
        margin-top: 10%;
    }
}
.case-study.sandhillcollection .experience-text {
    margin-top: -6.25vw;
}
@media only screen and (max-width: 786px) {
    .case-study.sandhillcollection .experience-text {
        margin-top: 12.5vw;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.sandhillcollection .image-brand-guidelines {
        margin-top: 8vw;
    }
}
.case-study.sandhillcollection .tighter-text {
    margin-top: 0;
}
.case-study.sandhillcollection .never-just {
    margin-top: -18vw;
}
@media only screen and (max-width: 786px) {
    .case-study.sandhillcollection .never-just {
        margin-top: 12.5vw;
        margin-bottom: 3vw;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.sandhillcollection .image-flora-3 {
        margin-top: -14.5vw;
    }
}
.case-study.sandhillcollection .image-flora-2 {
    margin-top: -33%;
}
.case-study.sandhillcollection .image-flora-1 {
    margin-top: -17%;
}
.case-study.sandhillcollection .grid-space {
    margin-top: 3.3333%;
}
.case-study.sandhillcollection .section-space {
    margin-top: 16vw !important;
}
.case-study.sandhillcollection .more-space {
    margin-top: 16vw;
}
.page--home .project.spaces {
    margin-bottom: 300px;
}
.page--home .project.spaces .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.spaces .project__details {
    left: 110%;
    top: 35%;
    width: 30%;
}
.page--home .project.spaces .project__client {
    left: 20%;
    top: 0%;
    z-index: 1;
}
.page--home .project.spaces .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    right: 130%;
    top: calc(50% - 2px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
}
.page--home .project.spaces .project__description {
    max-width: 400px;
    position: relative;
    width: 140%;
    z-index: 1;
}
.page--home .project.spaces .project__cta {
    bottom: 0%;
    left: 22%;
    width: 17%;
}
.page--home .project.spaces .project__cta-text {
    left: 50%;
    top: 20%;
}
@media only screen and (min-width: 787px) {
    .page--home .project.spaces .project__cta-inner {
        height: 2.5vw;
    }
}
@media only screen and (max-width: 786px) {
    .page--home .project.spaces .project__details-blobby {
        left: -20%;
        position: relative;
    }
    .page--home .project.spaces div.project__details {
        bottom: -20% !important;
        width: 100%;
    }
    .page--home .project.spaces .project__client {
        top: 10%;
    }
    .page--home .project.spaces .project__client::before {
        transform-origin: 0 50%;
    }
    .page--home .project.spaces .project__description {
        left: 10%;
        max-width: 60%;
        position: absolute;
        top: 10%;
    }
    .page--home .project.spaces .project__cta {
        bottom: 30%;
    }
}
.case-study.spaces .bringing-life {
    margin-top: 12.5vw;
}
@media only screen and (max-width: 786px) {
    .case-study.spaces .bringing-life {
        margin-top: 29.1666666667vw;
    }
}
.case-study.spaces .walkthrough-video {
    z-index: auto;
}
.case-study.spaces .walkthrough-video::before {
    background: #f7f7f6;
    content: "";
    display: block;
    height: 95%;
    left: 10%;
    opacity: 0.5;
    position: absolute;
    top: -27%;
    width: 45%;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.spaces .walkthrough-video::before {
        display: none;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.spaces .illustration-text {
        margin-top: 12.5vw !important;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.spaces .illustration-phone {
        margin-top: 20%;
    }
}
.case-study.spaces .illustration-video {
    margin: -15% 0 10% !important;
}
@media only screen and (max-width: 786px) {
    .case-study.spaces .illustration-video {
        margin-top: 10% !important;
    }
}
.case-study.spaces .motion-text {
    margin: -25% 0 10% !important;
}
@media only screen and (max-width: 786px) {
    .case-study.spaces .motion-text {
        margin-top: 12.5vw !important;
    }
}
.case-study.spaces .motion-video {
    margin-top: -25% !important;
}
@media only screen and (max-width: 786px) {
    .case-study.spaces .motion-video {
        margin-top: -12.5vw !important;
    }
}
.case-study.spaces .stylized-app {
    margin: 15% 0 4%;
}
.case-study.spaces .outro-video {
    margin: -15% 0 0 !important;
    z-index: -1;
}
.case-study.spaces section.animation {
    height: 850px;
    position: relative;
}
.case-study.spaces section.animation .animation__graphic {
    height: 798px;
    left: 50%;
    margin: 0 auto;
    opacity: 1;
    position: absolute;
    top: 0;
    transform: translate3d(-40%, 0, 0);
    transform-origin: top center;
    transition: opacity 0.3s;
    width: 1679px;
}
@media only screen and (max-width: 1500px), only screen and (max-height: 820px) {
    .case-study.spaces section.animation {
        height: 700px;
    }
    .case-study.spaces section.animation .animation__graphic {
        transform: translate3d(-40%, 0, 0) scale(0.85);
    }
}
@media only screen and (max-width: 1207px) {
    .case-study.spaces section.animation {
        height: 600px;
    }
    .case-study.spaces section.animation .animation__graphic {
        transform: translate3d(-40%, 0, 0) scale(0.7);
    }
}
.case-study.spaces section.animation .animation__graphicAssets {
    height: 100%;
    position: absolute;
    width: 100%;
}
.case-study.spaces section.animation .asset--background {
    background: url("/assets/projects/spaces/anim-phone.svg") center center no-repeat;
    height: 100%;
    position: absolute;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.5s;
    width: 100%;
    z-index: 1;
}
.case-study.spaces section.animation .asset--shadow {
    background: url("/assets/projects/spaces/anim-phone-shadow.svg") center center no-repeat;
    height: 100%;
    position: absolute;
    top: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.5s;
    width: 100%;
}
.case-study.spaces section.animation .asset--screen {
    background: url("/assets/projects/spaces/anim-screen.png") center center no-repeat;
    height: 100%;
    position: absolute;
    top: 0;
    transform: translate3d(0, 0, 0);
    width: 100%;
    z-index: 2;
}
html.no-cssmask .case-study.spaces section.animation .asset--screen {
    background: url("/assets/projects/spaces/anim-screen-static.jpg") center center no-repeat;
}
.case-study.spaces section.animation .asset--comics {
    height: 254px;
    left: 464px;
    opacity: 0 !important;
    position: absolute;
    top: 98px;
    transition: opacity 0.3s;
    width: 575px;
    z-index: 3;
}
.case-study.spaces section.animation .asset--comics.is-visible {
    opacity: 1 !important;
}
.case-study.spaces section.animation .asset--comics .square--background {
    background: url("/assets/projects/spaces/anim/anim-comics-platform.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--comics .square--foreground {
    background: url("/assets/projects/spaces/anim/anim-comics-platform-cover.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--comics .square--door1 {
    background: url("/assets/projects/spaces/anim/anim-comics-door01.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--comics .square--door2 {
    background: url("/assets/projects/spaces/anim/anim-comics-door02.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--comics .square--item-book {
    background: url("/assets/projects/spaces/anim/anim-comics-book.svg") center center no-repeat;
    height: 237px;
    left: 146px;
    top: 600px;
    width: 222px;
    z-index: 34;
}
.case-study.spaces section.animation .asset--comics .square--item-bag {
    background: url("/assets/projects/spaces/anim/anim-comics-bag.svg") center center no-repeat;
    height: 179px;
    left: 395px;
    top: 600px;
    width: 134px;
}
.case-study.spaces section.animation .asset--comics .square--item-beaker {
    background: url("/assets/projects/spaces/anim/anim-comics-beaker.svg") center center no-repeat;
    height: 154px;
    left: 325px;
    top: 600px;
    width: 90px;
    z-index: 30;
}
.case-study.spaces section.animation .asset--comics .square--item-beaker-animation {
    background: url("/assets/projects/spaces/anim/anim-comics-beaker-animation.png");
    height: 155px;
    left: 0;
    top: 0;
    width: 90px;
}
.case-study.spaces section.animation .asset--comics .square--item-moon {
    background: url("/assets/projects/spaces/anim/anim-comics-moon.svg") center center no-repeat;
    height: 43px;
    left: 146px;
    top: 600px;
    width: 44px;
    z-index: 31;
}
.case-study.spaces section.animation .asset--comics .square--item-saturn {
    background: url("/assets/projects/spaces/anim/anim-comics-saturn.svg") center center no-repeat;
    height: 95px;
    left: 173px;
    top: 600px;
    width: 142px;
    z-index: 32;
}
.case-study.spaces section.animation .asset--comics .square--item-word {
    background: url("/assets/projects/spaces/anim/anim-comics-word.svg") center center no-repeat;
    height: 220px;
    left: 334px;
    opacity: 0;
    top: 550px;
    transform: translate3d(0, -335px, 0);
    width: 294px;
    z-index: 10;
}
.case-study.spaces section.animation .asset--animation-comics {
    height: 379px;
    left: 519px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: translate3d(0, 0, 0);
    width: 615px;
    z-index: 3;
}
.case-study.spaces section.animation .asset--animation-comics canvas {
    opacity: 0;
    transition: opacity 0.3s;
}
.case-study.spaces section.animation .asset--animation-comics canvas.is-visible {
    opacity: 1;
}
.case-study.spaces section.animation .asset--study {
    height: 254px;
    left: 207px;
    opacity: 0 !important;
    position: absolute;
    top: 212px;
    transition: opacity 0.3s;
    width: 575px;
    z-index: 3;
}
.case-study.spaces section.animation .asset--study.is-visible {
    opacity: 1 !important;
}
.case-study.spaces section.animation .asset--study .square--background {
    background: url("/assets/projects/spaces/anim/anim-study-platform.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--study .square--foreground {
    background: url("/assets/projects/spaces/anim/anim-study-platform-cover.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--study .square--door1 {
    background: url("/assets/projects/spaces/anim/anim-study-door01.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--study .square--door2 {
    background: url("/assets/projects/spaces/anim/anim-study-door02.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--study .square--item-book1 {
    background: url("/assets/projects/spaces/anim/anim-study-01.svg") center center no-repeat;
    height: 128px;
    left: 175px;
    top: 600px;
    width: 142px;
    z-index: 33;
}
.case-study.spaces section.animation .asset--study .square--item-book2 {
    background: url("/assets/projects/spaces/anim/anim-study-02.svg") center center no-repeat;
    height: 91px;
    left: 182px;
    top: 600px;
    width: 174px;
}
.case-study.spaces section.animation .asset--study .square--item-apple {
    background: url("/assets/projects/spaces/anim/anim-study-apple.svg") center center no-repeat;
    height: 63px;
    left: 345px;
    top: 600px;
    width: 59px;
}
.case-study.spaces section.animation .asset--study .square--item-apple-animation {
    background: url("/assets/projects/spaces/anim/anim-study-apple-animation.png");
    background-position: 0 0;
    height: 63px;
    left: 0;
    position: relative;
    top: 0;
    width: 60px;
}
.case-study.spaces section.animation .asset--study .square--item-calc {
    background: url("/assets/projects/spaces/anim/anim-study-calc.svg") center center no-repeat;
    height: 124px;
    left: 245px;
    top: 600px;
    width: 144px;
}
.case-study.spaces section.animation .asset--study .square--item-chart {
    background: url("/assets/projects/spaces/anim/anim-study-chart.svg") center center no-repeat;
    height: 100px;
    left: 365px;
    top: 600px;
    width: 101px;
    z-index: 33;
}
.case-study.spaces section.animation .asset--study .square--item-chart-animation {
    background: url("/assets/projects/spaces/anim/anim-study-chart-animation.png");
    background-position: 0 0;
    height: 100px;
    left: 0;
    position: relative;
    top: 0;
    width: 101px;
}
.case-study.spaces section.animation .asset--study .square--item-level {
    background: url("/assets/projects/spaces/anim/anim-study-level.svg") center center no-repeat;
    height: 180px;
    left: 400px;
    top: 600px;
    width: 205px;
    z-index: 32;
}
.case-study.spaces section.animation .asset--study .square--item-mug {
    background: url("/assets/projects/spaces/anim/anim-study-mug.svg") center center no-repeat;
    height: 84px;
    left: 300px;
    top: 600px;
    width: 85px;
}
.case-study.spaces section.animation .asset--study .square--item-pencil1 {
    background: url("/assets/projects/spaces/anim/anim-study-pencil01.svg") center center no-repeat;
    height: 109px;
    left: 434px;
    top: 600px;
    width: 41px;
    z-index: 34;
}
.case-study.spaces section.animation .asset--study .square--item-pencil2 {
    background: url("/assets/projects/spaces/anim/anim-study-pencil02.svg") center center no-repeat;
    height: 83px;
    left: 413px;
    top: 600px;
    width: 83px;
    z-index: 35;
}
.case-study.spaces section.animation .asset--study .square--item-post1 {
    background: url("/assets/projects/spaces/anim/anim-study-post01.svg") center center no-repeat;
    height: 78px;
    left: 111px;
    opacity: 0;
    top: 600px;
    transform: translate3d(0, -313px, 0);
    width: 62px;
    z-index: 33;
}
.case-study.spaces section.animation .asset--study .square--item-post2 {
    background: url("/assets/projects/spaces/anim/anim-study-post02.svg") center center no-repeat;
    height: 73px;
    left: 100px;
    opacity: 0;
    top: 600px;
    transform: translate3d(0, -288px, 0);
    width: 58px;
}
.case-study.spaces section.animation .asset--animation-study {
    height: 165px;
    left: 309px;
    opacity: 0;
    position: absolute;
    top: 253px;
    transform: translate3d(0, 0, 0);
    width: 440px;
    z-index: 3;
}
.case-study.spaces section.animation .asset--animation-study canvas {
    opacity: 0;
    transition: opacity 0.3s;
}
.case-study.spaces section.animation .asset--animation-study canvas.is-visible {
    opacity: 1;
}
.case-study.spaces section.animation .asset--travel {
    height: 254px;
    left: 538px;
    opacity: 0 !important;
    position: absolute;
    top: 358px;
    transition: opacity 0.3s;
    width: 575px;
    z-index: 3;
}
.case-study.spaces section.animation .asset--travel.is-visible {
    opacity: 1 !important;
}
.case-study.spaces section.animation .asset--travel .square--background {
    background: url("/assets/projects/spaces/anim/anim-travel-platform.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--travel .square--foreground {
    background: url("/assets/projects/spaces/anim/anim-travel-platform-cover.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--travel .square--door1 {
    background: url("/assets/projects/spaces/anim/anim-travel-door01.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--travel .square--door2 {
    background: url("/assets/projects/spaces/anim/anim-travel-door02.svg") center center no-repeat;
}
.case-study.spaces section.animation .asset--travel .square--item-calendar {
    background: url("/assets/projects/spaces/anim/anim-travel-calendar.svg") center center no-repeat;
    height: 209px;
    left: 115px;
    opacity: 0;
    top: 600px;
    transform: translate3d(0, -410px, 0);
    width: 167px;
}
.case-study.spaces section.animation .asset--travel .square--item-calendar-animation {
    background: url("/assets/projects/spaces/anim/anim-travel-calendar-animation.png");
    background-position: 0 0;
    height: 210px;
    left: 0;
    top: 0;
    width: 168px;
}
.case-study.spaces section.animation .asset--travel .square--item-case {
    background: url("/assets/projects/spaces/anim/anim-travel-case.svg") center center no-repeat;
    height: 140px;
    left: 430px;
    top: 600px;
    width: 150px;
    z-index: 33;
}
.case-study.spaces section.animation .asset--travel .square--item-globe {
    background: url("/assets/projects/spaces/anim/anim-travel-globe.svg") center center no-repeat;
    height: 167px;
    left: 340px;
    top: 600px;
    width: 190px;
    z-index: 31;
}
.case-study.spaces section.animation .asset--travel .square--item-pass {
    background: url("/assets/projects/spaces/anim/anim-travel-pass.svg") center center no-repeat;
    height: 178px;
    left: 150px;
    top: 600px;
    width: 176px;
}
.case-study.spaces section.animation .asset--travel .square--item-sun {
    background: url("/assets/projects/spaces/anim/anim-travel-sun-animation.png");
    background-position: 0 0;
    height: 160px;
    left: 390px;
    top: 600px;
    width: 160px;
    z-index: 30;
}
.case-study.spaces section.animation .asset--travel .square--item-tower {
    background: url("/assets/projects/spaces/anim/anim-travel-tower.svg") center center no-repeat;
    height: 221px;
    left: 300px;
    top: 600px;
    width: 142px;
}
.case-study.spaces section.animation .asset--animation-travel {
    height: 197px;
    left: 564px;
    opacity: 0;
    position: absolute;
    top: 366px;
    transform: translate3d(0, 0, 0);
    width: 436px;
    z-index: 3;
}
.case-study.spaces section.animation .asset--animation-travel canvas {
    opacity: 0;
    transition: opacity 0.3s;
}
.case-study.spaces section.animation .asset--animation-travel canvas.is-visible {
    opacity: 1;
}
.case-study.spaces section.animation .square--background {
    height: 254px;
    left: 0;
    position: absolute;
    top: 0;
    width: 575px;
    z-index: 10;
}
.case-study.spaces section.animation .square--foreground {
    height: 254px;
    left: 0;
    position: absolute;
    top: 0;
    width: 575px;
    z-index: 80;
}
.case-study.spaces section.animation .square--doors {
    height: 254px;
    left: 0;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="574.9" height="254.1" viewBox="0 0 574.9 254.1"><defs><mask id="maskid" maskUnits="objectBoundingBox"><path d="M511.5 143.1l-187.8 83.2L63.2 111.2 251.1 28" fill="%23FFFFFF"/></mask></defs></svg>#maskid');
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="574.9" height="254.1" viewBox="0 0 574.9 254.1"><defs><mask id="maskid" maskUnits="objectBoundingBox"><path d="M511.5 143.1l-187.8 83.2L63.2 111.2 251.1 28" fill="%23FFFFFF"/></mask></defs></svg>#maskid');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="574.9" height="254.1" viewBox="0 0 574.9 254.1"><path d="M511.5 143.1l-187.8 83.2L63.2 111.2 251.1 28"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="574.9" height="254.1" viewBox="0 0 574.9 254.1"><path d="M511.5 143.1l-187.8 83.2L63.2 111.2 251.1 28"/></svg>');
    position: absolute;
    top: 0;
    transform: scale(1.03);
    width: 575px;
    z-index: 90;
}
.case-study.spaces section.animation .square--door1 {
    height: 254px;
    left: 0;
    position: absolute;
    top: 0;
    width: 575px;
    z-index: 90;
}
.case-study.spaces section.animation .square--door2 {
    height: 254px;
    left: 0;
    position: absolute;
    top: 0;
    width: 575px;
    z-index: 90;
}
.case-study.spaces section.animation .square--items {
    height: 579px;
    left: -77px;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="796.7" height="579.1" viewBox="0 0 796.7 579.1"><defs><mask id="maskid" maskUnits="objectBoundingBox"><path d="M0 402V0h796.7v404.2L400.8 579.1" fill="%23FFFFFF"/></mask></defs></svg>#maskid');
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="796.7" height="579.1" viewBox="0 0 796.7 579.1"><defs><mask id="maskid" maskUnits="objectBoundingBox"><path d="M0 402V0h796.7v404.2L400.8 579.1" fill="%23FFFFFF"/></mask></defs></svg>#maskid');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="796.7" height="579.1" viewBox="0 0 796.7 579.1"><path d="M0 402V0h796.7v404.2L400.8 579.1"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="796.7" height="579.1" viewBox="0 0 796.7 579.1"><path d="M0 402V0h796.7v404.2L400.8 579.1"/></svg>');
    position: absolute;
    top: -326px;
    width: 798px;
    z-index: 10;
}
.case-study.spaces section.animation .square--item {
    left: 75px;
    position: absolute;
    top: 225px;
    transform: translate3d(0, 0, 0);
    z-index: 30;
}
.page--home .project.tiltbrush {
    margin-bottom: 200px;
}
.page--home .project.tiltbrush .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.tiltbrush .project__details {
    right: -45%;
    top: 32%;
    width: 55%;
}
.page--home .project.tiltbrush .project__client {
    right: 15%;
    top: 12%;
}
.page--home .project.tiltbrush .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    right: 110%;
    top: calc(50% - 2px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
}
.page--home .project.tiltbrush .project__description {
    top: 10%;
    left: 15%;
    width: 130%;
}
.page--home .project.tiltbrush .project__cta {
    bottom: -2%;
    left: 45%;
    width: 20%;
}
.page--home .project.tiltbrush .project__cta-text {
    bottom: 10%;
    left: 5%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.tiltbrush {
        margin-bottom: 200px;
    }
    .page--home .project.tiltbrush .project__details {
        width: 80%;
    }
    .page--home .project.tiltbrush .project__description {
        left: 12%;
        width: 90%;
    }
    .page--home .project.tiltbrush div.project__client {
        left: 10%;
        right: auto;
    }
    .page--home .project.tiltbrush div.project__client::before {
        transform-origin: 0% 50%;
    }
    .page--home .project.tiltbrush .project__cta {
        bottom: auto;
        top: 75%;
    }
}
@media only screen and (max-width: 360px) {
    .page--home .project.tiltbrush .project__details-blobby {
        width: 110%;
    }
    .page--home .project.tiltbrush .project__description {
        width: 100%;
    }
    .page--home .project.tiltbrush .project__cta {
        top: 85%;
    }
}
.case-study.tiltbrush {
    background: #1a1919;
}
.case-study.tiltbrush .icon-text .text__label,
.case-study.tiltbrush .ui-text .text__label,
.case-study.tiltbrush .art-long-text .text__label {
    margin-bottom: 0;
}
.case-study.tiltbrush .icon-text .text__label-inner::before,
.case-study.tiltbrush .ui-text .text__label-inner::before,
.case-study.tiltbrush .art-long-text .text__label-inner::before {
    display: none;
}
.case-study.tiltbrush .icon-text .text__label-inner::after,
.case-study.tiltbrush .ui-text .text__label-inner::after,
.case-study.tiltbrush .art-long-text .text__label-inner::after {
    width: 20px;
    background: #fff;
    content: "";
    vertical-align: middle;
}
@media only screen and (max-width: 1500px) {
    .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .text__label-inner::after {
        width: calc(-2.0168067227px + 2.8011204482vw);
    }
}
@media only screen and (min-width: 1500px) {
    .case-study.tiltbrush .icon-text .text__label-inner::after,
    .case-study.tiltbrush .ui-text .text__label-inner::after,
    .case-study.tiltbrush .art-long-text .text__label-inner::after {
        width: 40px;
    }
}
.case-study.tiltbrush .icon-text .text__label-text .text__decorator,
.case-study.tiltbrush .ui-text .text__label-text .text__decorator,
.case-study.tiltbrush .art-long-text .text__label-text .text__decorator {
    left: -10px;
    top: -5px;
}
.case-study.tiltbrush .icon-image {
    margin-top: -20.8333333333vw;
    position: relative;
    z-index: 1;
}
.case-study.tiltbrush .icon-text {
    margin-top: -25vw;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .icon-text {
        margin-top: 15vw;
    }
}
.case-study.tiltbrush .grid-icon-image {
    margin-bottom: 8.3333333333vw;
    margin-top: -33.3333333333vw;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .grid-icon-image {
        margin-top: -12.5vw;
    }
}
.case-study.tiltbrush .lockup-image {
    margin-top: 12.5vw;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .lockup-image {
        margin-top: 8.3333333333vw;
    }
}
.case-study.tiltbrush .ui-text {
    margin-top: 21%;
    position: relative;
}
.case-study.tiltbrush .video + section.text.ui-text {
    margin-top: 12.5vw;
}
.case-study.tiltbrush section.art--short {
    margin: -18% 0 14%;
    position: relative;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush section.art--short {
        margin-top: 20%;
    }
}
.case-study.tiltbrush section.art--short img,
.case-study.tiltbrush section.art--short .grid__row {
    width: 100%;
}
.case-study.tiltbrush section.art--short .art__image {
    position: relative;
}
.case-study.tiltbrush section.art--short .art__image img {
    display: block;
}
.case-study.tiltbrush section.art--short .art__left .art__image {
    margin-bottom: 5.5vw;
}
.case-study.tiltbrush section.art--short .art__right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    top: 57%;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush section.art--short .art__right {
        position: relative;
        top: initial;
        transform: initial;
    }
}
.case-study.tiltbrush .air-text,
.case-study.tiltbrush .perspective-text {
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .air-text {
        margin-top: 30vw;
    }
}
.case-study.tiltbrush .air-video .video__background {
    position: absolute;
    top: -45vw;
    width: 100%;
    z-index: -1;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .air-video .video__background {
        top: -63vw;
    }
}
@media screen and (min-width: 1615px) {
    .case-study.tiltbrush .air-video .video__background {
        top: -35vw;
    }
}
.case-study.tiltbrush .air-video .video__background-inner {
    height: 95vw;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .air-video .video__background-inner {
        height: 130vw;
    }
}
.case-study.tiltbrush .air-video .video__background-inner-inner {
    background: #000;
    height: 100%;
    width: 100%;
}
.case-study.tiltbrush section.text.small.perspective-text {
    margin-top: 28%;
}
.case-study.tiltbrush .text + section.video.perspective-video {
    margin: -18% 0 3.5%;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .text + section.video.perspective-video {
        margin-top: 8%;
    }
}
.case-study.tiltbrush section.long-browsers {
    margin-top: -20%;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush section.long-browsers {
        margin-top: 0%;
    }
}
.case-study.tiltbrush section.long-browsers .long-browser__browser:nth-child(1),
.case-study.tiltbrush section.long-browsers .long-browser__browser:nth-child(3) {
    top: 30%;
}
.case-study.tiltbrush .artist-video {
    margin-top: 55%;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush .artist-video {
        margin-top: 0%;
    }
}
.case-study.tiltbrush .artist-text {
    margin-bottom: 12.5vw !important;
    margin-top: 0 !important;
}
.case-study.tiltbrush .art-long-text {
    margin-top: 18%;
}
.case-study.tiltbrush section.art--long {
    margin: -14% 0 10.5%;
}
@media only screen and (max-width: 786px) {
    .case-study.tiltbrush section.art--long {
        margin-top: 16%;
    }
}
.case-study.tiltbrush section.art--long .grid__row,
.case-study.tiltbrush section.art--long img {
    width: 100%;
}
.case-study.tiltbrush section.art--long .art__images-top {
    align-items: flex-end;
}
.case-study.tiltbrush section.art--long .art__image {
    margin: 5.5vw 0;
}
.case-study.tiltbrush section.art--long .art__images-bottom {
    margin-top: 16vw;
}
.case-study.tiltbrush section.art--long .art__images-bottom-right {
    position: relative;
    top: -14vw;
}
.case-study.tiltbrush section.mobile {
    margin-top: 10.5%;
}
.case-study.tiltbrush .epilogue-image {
    padding: 21% 0;
}
.page--home .project.wethepower {
    margin-bottom: 200px;
}
.page--home .project.wethepower .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.wethepower .project__details {
    right: -30%;
    top: 10%;
    width: 60%;
}
.page--home .project.wethepower .project__client {
    left: 50%;
    top: 30%;
}
.page--home .project.wethepower .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    right: 110%;
    top: calc(50% - 2px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
    width: 80px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.wethepower .project__client::before {
        width: calc(-8.0672268908px + 11.2044817927vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.wethepower .project__client::before {
        width: 160px;
    }
}
.page--home .project.wethepower .project__description {
    left: 25%;
    top: 30%;
    max-width: 470px;
    width: 120%;
}
.page--home .project.wethepower .project__cta {
    bottom: 15%;
    right: 30%;
    width: 18%;
}
.page--home .project.wethepower .project__cta-text {
    top: 30%;
    left: -15%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.wethepower {
        margin-bottom: 200px;
    }
    .page--home .project.wethepower div.project__details {
        width: 75%;
    }
    .page--home .project.wethepower .project__description {
        max-width: 80%;
    }
    .page--home .project.wethepower div.project__cta {
        bottom: auto;
        right: 15%;
        top: 95%;
        width: 18%;
    }
}
.case-study.wethepower {
    background: #f0f0f0;
}
.case-study.wethepower .animated-image .animated-image__inner::after {
    background: #f0f0f0;
}
.case-study.wethepower .image.identity-forms-image,
.case-study.wethepower .text.film-text,
.case-study.wethepower .video.film-video,
.case-study.wethepower .image.film-four-up,
.case-study.wethepower .text.collage-text,
.case-study.wethepower .image.fragments,
.case-study.wethepower .image.screenshot,
.case-study.wethepower .text.screenshots-mobile-text,
.case-study.wethepower .mobile.screenshots-mobile,
.case-study.wethepower .image.end {
    background: #cdbeac;
    margin: 0;
    padding: 56px 0 0;
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .image.identity-forms-image,
    .case-study.wethepower .text.film-text,
    .case-study.wethepower .video.film-video,
    .case-study.wethepower .image.film-four-up,
    .case-study.wethepower .text.collage-text,
    .case-study.wethepower .image.fragments,
    .case-study.wethepower .image.screenshot,
    .case-study.wethepower .text.screenshots-mobile-text,
    .case-study.wethepower .mobile.screenshots-mobile,
    .case-study.wethepower .image.end {
        margin: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .image.identity-forms-image,
    .case-study.wethepower .text.film-text,
    .case-study.wethepower .video.film-video,
    .case-study.wethepower .image.film-four-up,
    .case-study.wethepower .text.collage-text,
    .case-study.wethepower .image.fragments,
    .case-study.wethepower .image.screenshot,
    .case-study.wethepower .text.screenshots-mobile-text,
    .case-study.wethepower .mobile.screenshots-mobile,
    .case-study.wethepower .image.end {
        margin: 0;
    }
}
.case-study.wethepower .image.identity-forms-image.no-chrome:not(.lifted),
.case-study.wethepower .text.film-text.no-chrome:not(.lifted),
.case-study.wethepower .video.film-video.no-chrome:not(.lifted),
.case-study.wethepower .image.film-four-up.no-chrome:not(.lifted),
.case-study.wethepower .text.collage-text.no-chrome:not(.lifted),
.case-study.wethepower .image.fragments.no-chrome:not(.lifted),
.case-study.wethepower .image.screenshot.no-chrome:not(.lifted),
.case-study.wethepower .text.screenshots-mobile-text.no-chrome:not(.lifted),
.case-study.wethepower .mobile.screenshots-mobile.no-chrome:not(.lifted),
.case-study.wethepower .image.end.no-chrome:not(.lifted) {
    margin: 0;
}
.case-study.wethepower .image.identity-forms-image .animated-image .animated-image__inner::after,
.case-study.wethepower .text.film-text .animated-image .animated-image__inner::after,
.case-study.wethepower .video.film-video .animated-image .animated-image__inner::after,
.case-study.wethepower .image.film-four-up .animated-image .animated-image__inner::after,
.case-study.wethepower .text.collage-text .animated-image .animated-image__inner::after,
.case-study.wethepower .image.fragments .animated-image .animated-image__inner::after,
.case-study.wethepower .image.screenshot .animated-image .animated-image__inner::after,
.case-study.wethepower .text.screenshots-mobile-text .animated-image .animated-image__inner::after,
.case-study.wethepower .mobile.screenshots-mobile .animated-image .animated-image__inner::after,
.case-study.wethepower .image.end .animated-image .animated-image__inner::after {
    background: #cdbeac;
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .text.identity-forms,
    .case-study.wethepower .video.collage-video {
        background: #cdbeac;
        margin: 0;
        padding: 56px 0 0;
    }
    .case-study.wethepower .text.identity-forms .animated-image .animated-image__inner::after,
    .case-study.wethepower .video.collage-video .animated-image .animated-image__inner::after {
        background: #cdbeac;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .text.identity-forms.no-chrome:not(.lifted),
    .case-study.wethepower .video.collage-video.no-chrome:not(.lifted) {
        margin: 0;
    }
}
.case-study.wethepower .hero .hero__services-list {
    height: 300px;
}
.case-study.wethepower .hero .hero__image {
    padding-top: 300px;
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .hero .hero__image {
        padding-top: 800px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .text.identity-text {
        padding-top: 100px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .text.identity-text {
        margin-top: 10%;
        position: relative;
        z-index: 3;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .video.identity-video.no-chrome {
        margin-top: -25%;
    }
}
@media only screen and (min-width: 2000px) {
    .case-study.wethepower .video.identity-video.no-chrome {
        margin-top: -15%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .image.background1-desktop {
        display: none;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .image.background1-desktop {
        margin-top: -25%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .image.background1-mobile {
        margin-top: 50px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .image.background1-mobile {
        display: none;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .text.storytelling {
        margin-top: -12%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .image.four-split {
        margin-top: -5%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .text.identity-forms {
        margin-top: 0;
    }
}
.case-study.wethepower .image.identity-forms-image {
    padding-bottom: 20%;
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .image.identity-forms-image {
        padding-top: 0;
        margin-top: -30%;
    }
}
@media only screen and (min-width: 1700px) {
    .case-study.wethepower .image.identity-forms-image {
        margin-top: -25%;
    }
}
.case-study.wethepower .image.identity-forms-image .animated-image .animated-image__inner::after {
    background: #cdbeac;
}
.case-study.wethepower .image.banner {
    z-index: 2;
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .image.banner {
        margin-top: -15%;
    }
}
.case-study.wethepower .image.banner .animated-image .animated-image__inner::after {
    display: none;
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .video.nine-split.no-chrome {
        margin-top: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .video.nine-split.no-chrome {
        margin-top: -15%;
    }
}
.case-study.wethepower .mobile.social {
    background: url(../assets/projects/wethepower/social-background.jpg) bottom/100% no-repeat;
    margin-bottom: 0;
    padding-bottom: 50%;
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .text.identity-forms {
        padding-top: 80px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .text.collage-text {
        padding: 15% 0 30%;
    }
}
.case-study.wethepower .video.collage-video.no-chrome .shadow {
    display: none;
}
.case-study.wethepower .video.collage-video.no-chrome .video__inner::after {
    background: linear-gradient(to bottom, #cdbeac, rgba(205, 190, 172, 0) 20%, rgba(205, 190, 172, 0) 80%, #cdbeac), linear-gradient(to right, #cdbeac, rgba(205, 190, 172, 0) 20%, rgba(205, 190, 172, 0) 80%, #cdbeac);
    opacity: 1;
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .video.collage-video.no-chrome {
        margin: -55% 0 0;
    }
}
@media only screen and (min-width: 1960px) {
    .case-study.wethepower .video.collage-video.no-chrome {
        margin-top: -48%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .image.screenshot {
        padding-top: 100px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .image.screenshot {
        padding-top: 200px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wethepower .text.screenshots-mobile-text {
        padding-top: 100px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .text.screenshots-mobile-text {
        padding: 200px 0 20px;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wethepower .mobile.screenshots-mobile {
        padding: 56px 0 150px;
    }
}
.page--home .project.wisesystems {
    margin-bottom: 200px;
}
.page--home .project.wisesystems .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.wisesystems .project__details {
    right: -30%;
    top: 10%;
    width: 60%;
}
.page--home .project.wisesystems .project__client {
    left: 50%;
    top: 30%;
}
.page--home .project.wisesystems .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    right: 110%;
    top: calc(50% - 2px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center right;
    transition: transform 0.3s ease-in-out 0.5s;
    width: 80px;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.wisesystems .project__client::before {
        width: calc(-8.0672268908px + 11.2044817927vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.wisesystems .project__client::before {
        width: 160px;
    }
}
.page--home .project.wisesystems .project__description {
    left: 25%;
    top: 30%;
    max-width: 470px;
    width: 120%;
}
.page--home .project.wisesystems .project__cta {
    bottom: 15%;
    right: 30%;
    width: 18%;
}
.page--home .project.wisesystems .project__cta-text {
    top: 30%;
    left: -15%;
}
@media only screen and (max-width: 786px) {
    .page--home .project.wisesystems {
        margin-bottom: 200px;
    }
    .page--home .project.wisesystems div.project__details {
        width: 75%;
    }
    .page--home .project.wisesystems .project__description {
        max-width: 80%;
    }
    .page--home .project.wisesystems div.project__cta {
        bottom: auto;
        right: 15%;
        top: 95%;
        width: 18%;
    }
}
.case-study.wisesystems .hero .hero__services-list {
    height: 300px;
}
.case-study.wisesystems .identity-video {
    margin-top: 10%;
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .text.intro {
        padding-top: 0;
        margin-top: 20%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .text.intro {
        position: relative;
        z-index: 3;
        margin-top: -40%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .text.visuals {
        padding-top: 0;
        margin-top: 20%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .text.visuals {
        position: relative;
        z-index: 3;
        margin-top: -40%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.make-every {
        margin-top: 10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.make-every {
        margin-top: 10%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .video.routesloop {
        margin-top: 20%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .video.routesloop {
        margin-top: 35%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .video.threedroutes {
        margin-top: 20%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .video.threedroutes {
        margin-top: 10%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.routesyellow {
        margin-top: -30%;
        z-index: 3;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.routesyellow {
        margin-top: -20%;
        z-index: 3;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .video.webscroll {
        margin-top: 20%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .video.webscroll {
        margin-top: 20%;
        margin-bottom: 20%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.whitepaper {
        margin-top: 20%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.whitepaper {
        margin-top: -34%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .video.machinelearning {
        margin-top: -22%;
        z-index: 3;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .video.polymorphgrid {
        margin-top: -22%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .text.photograhy-text {
        margin-top: 10%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.people01 {
        margin-top: 10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.people01 {
        margin-top: -15%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.people02 {
        margin-top: -10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.people02 {
        margin-top: -50%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.people03 {
        margin-top: -10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.people03 {
        margin-top: -10%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.productsuite {
        margin-top: 10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.productsuite {
        margin-top: 10%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.people {
        margin-top: 10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.people {
        margin-top: 10%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.webscreens {
        margin-top: 10%;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.webscreens {
        margin-top: 10%;
        margin-bottom: 10%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .video.ig02 {
        margin-top: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .video.ig02 {
        margin-top: -57.5%;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .image.netting {
        margin-top: 0;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .image.netting {
        z-index: 3;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.wisesystems .video.engine {
        margin-top: -20%;
        z-index: 3;
    }
}
@media only screen and (min-width: 787px) {
    .case-study.wisesystems .video.engine {
        margin-top: -20%;
    }
}
.page--home .project.youtubee3 {
    margin-bottom: 350px;
}
.page--home .project.youtubee3 .project__inner.is-active .project__client::before {
    transform: translateY(-50%) scaleX(1);
}
.page--home .project.youtubee3 .project__details {
    bottom: -45%;
    left: 5%;
    width: 40%;
}
.page--home .project.youtubee3 .project__client {
    left: 10%;
    top: 15%;
}
.page--home .project.youtubee3 .project__client::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 75px;
    content: "";
    left: 120%;
    top: calc(50% - 2px);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center left;
    transition: transform 0.3s ease-in-out 0.5s;
}
@media only screen and (max-width: 1500px) {
    .page--home .project.youtubee3 .project__client::before {
        width: calc(-7.5630252101px + 10.5042016807vw);
    }
}
@media only screen and (min-width: 1500px) {
    .page--home .project.youtubee3 .project__client::before {
        width: 150px;
    }
}
.page--home .project.youtubee3 .project__description {
    left: -5%;
    top: 12%;
    width: 100%;
}
.page--home .project.youtubee3 .project__cta {
    bottom: 18%;
    left: 10%;
    width: 15%;
}
.page--home .project.youtubee3 .project__cta-text {
    left: 60%;
    top: 20%;
}
.page--home .project.youtubee3 video {
    -o-object-fit: initial;
    object-fit: initial;
}
@media only screen and (max-width: 786px) {
    .page--home .project.youtubee3 {
        margin-bottom: 300px;
    }
    .page--home .project.youtubee3 div.project__details {
        width: 75%;
    }
    .page--home .project.youtubee3 .project__client {
        left: 15%;
    }
    .page--home .project.youtubee3 .project__description {
        left: 15%;
        top: 15%;
        white-space: normal;
    }
    .page--home .project.youtubee3 .project__cta {
        bottom: auto;
        left: 15%;
        top: 75%;
    }
    .page--home .project.youtubee3 .project__cta-text {
        left: 0;
    }
}
.case-study.youtubee3 {
    background: #1a1919;
}
.case-study.youtubee3 .hero__client-name {
    z-index: -1;
}
.case-study.youtubee3 .video-text {
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.youtubee3 .video-text {
        margin-top: 29.1666666667vw;
    }
}
.case-study.youtubee3 .video-image {
    margin-top: -14%;
}
.case-study.youtubee3 .characters-text {
    margin-top: 0 !important;
}
.case-study.youtubee3 .trailer-grid {
    margin-top: 8.3333333333vw;
    position: relative;
    z-index: 1;
}
.case-study.youtubee3 .trailer-grid img,
.case-study.youtubee3 .trailer-grid video {
    width: 100%;
}
.case-study.youtubee3 .trailer-grid__gun {
    padding-right: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.case-study.youtubee3 .trailer-grid__fox,
.case-study.youtubee3 .trailer-grid__civ {
    padding-left: 10px;
}
.case-study.youtubee3 .trailer-grid__civ {
    padding-top: 8px;
}
@media only screen and (max-width: 786px) {
    .case-study.youtubee3 .trailer-grid__civ {
        padding-top: 25px;
    }
}
@media only screen and (max-width: 786px) {
    .case-study.youtubee3 .trailer-grid {
        display: flex;
        flex-direction: column;
    }
    .case-study.youtubee3 .trailer-grid__gun {
        order: 2;
        padding: 0;
        position: relative;
        margin-top: -8vw;
        top: auto;
        transform: none;
        width: auto;
    }
    .case-study.youtubee3 .trailer-grid__fox {
        order: 1;
        padding: 0;
        z-index: 1;
    }
    .case-study.youtubee3 .trailer-grid__civ {
        order: 3;
        padding-left: 0;
    }
}
.case-study.youtubee3 .trailer-image {
    margin-top: -20%;
}
.case-study.youtubee3 .touchdown-video {
    margin-top: -15% !important;
}
.case-study.youtubee3 .web-text {
    margin-bottom: 8.3333333333vw;
}
.case-study.youtubee3 .voting-image {
    margin: 8.3333333333vw 0;
}
.case-study.youtubee3 .voting-video {
    margin: 10.8333333333vw 0 8.3333333333vw;
}
.case-study.youtubee3 .items-video {
    margin-bottom: 8px;
}
.case-study.youtubee3 .bosses-video {
    margin-top: 8px;
}
.case-study.youtubee3 .bosses-text {
    margin-top: -16.6666666667vw !important;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 786px) {
    .case-study.youtubee3 .bosses-text {
        margin-top: 12.5vw !important;
    }
}
.case-study.youtubee3 .inventory-video {
    background: #1a1a1a;
}
@media only screen and (max-width: 786px) {
    .case-study.youtubee3 .inventory-video {
        margin: 16.6666666667vw 0 !important;
    }
}
.case-study.youtubee3 .end-text {
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 786px) {
    .case-study.youtubee3 .end-text {
        margin-top: 8.3333333333vw !important;
    }
}
.case-study.youtubee3 .end-video {
    margin-bottom: 0;
    margin-top: -27% !important;
    padding: 10.5% 0;
}
@media only screen and (max-width: 786px) {
    .case-study.youtubee3 .end-video {
        margin-top: 0 !important;
    }
}