@charset "UTF-8";

.splitting .word,
.splitting .char {
    display: inline-block
}

.splitting .char {
    position: relative
}

.splitting .char:before,
.splitting .char:after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none
}

.splitting {
    --word-center: calc((var(--word-total) - 1) / 2);
    --char-center: calc((var(--char-total) - 1) / 2);
    --line-center: calc((var(--line-total) - 1) / 2)
}

.splitting .word {
    --word-percent: calc(var(--word-index) / var(--word-total));
    --line-percent: calc(var(--line-index) / var(--line-total))
}

.splitting .char {
    --char-percent: calc(var(--char-index) / var(--char-total));
    --char-offset: calc(var(--char-index) - var(--char-center));
    --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));
    --distance-sine: calc(var(--char-offset) / var(--char-center));
    --distance-percent: calc((var(--distance) / var(--char-center)))
}

.splitting.cells img {
    width: 100%;
    display: block
}

@supports (display: grid) {
    .splitting.cells {
        position: relative;
        overflow: hidden;
        background-size: cover;
        visibility: hidden
    }

    .splitting .cell-grid {
        background: inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template: repeat(var(--row-total), 1fr)/repeat(var(--col-total), 1fr)
    }

    .splitting .cell {
        background: inherit;
        position: relative;
        overflow: hidden
    }

    .splitting .cell-inner {
        background: inherit;
        position: absolute;
        visibility: visible;
        width: calc(100% * var(--col-total));
        height: calc(100% * var(--row-total));
        left: calc(-100% * var(--col-index));
        top: calc(-100% * var(--row-index))
    }

    .splitting .cell {
        --center-x: calc((var(--col-total) - 1) / 2);
        --center-y: calc((var(--row-total) - 1) / 2);
        --offset-x: calc(var(--col-index) - var(--center-x));
        --offset-y: calc(var(--row-index) - var(--center-y));
        --distance-x: calc((var(--offset-x) * var(--offset-x)) / var(--center-x));
        --distance-y: calc((var(--offset-y) * var(--offset-y)) / var(--center-y))
    }
}

.flickity-enabled {
    position: relative
}

.flickity-enabled:focus {
    outline: none
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
    touch-action: pan-y
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0
}

.flickity-rtl .flickity-slider {
    left: unset;
    right: 0
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    user-select: none
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: grab
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: grabbing
}

.flickity-cell {
    position: absolute;
    left: 0
}

.flickity-rtl .flickity-cell {
    left: unset;
    right: 0
}

.flickity-button {
    position: absolute;
    background: hsl(0 0% 100%/75%);
    border: none;
    color: #333
}

.flickity-button:hover {
    background: white;
    cursor: pointer
}

.flickity-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19f
}

.flickity-button:active {
    opacity: .6
}

.flickity-button:disabled {
    opacity: .3;
    cursor: auto;
    pointer-events: none
}

.flickity-button-icon {
    fill: currentColor
}

.flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateY(-50%)
}

.flickity-prev-next-button.previous {
    left: 10px
}

.flickity-prev-next-button.next {
    right: 10px
}

.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px
}

.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.flickity-rtl .flickity-page-dots {
    direction: rtl
}

.flickity-page-dot {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0 8px;
    background: hsl(0 0% 20%/25%);
    border-radius: 50%;
    cursor: pointer;
    appearance: none;
    border: none;
    text-indent: -9999px;
    overflow: hidden
}

.flickity-rtl .flickity-page-dot {
    text-indent: 9999px
}

.flickity-page-dot:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19f
}

.flickity-page-dot.is-selected {
    background: hsl(0 0% 20%/100%)
}

*,
*:before,
*:after {
    box-sizing: border-box
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0
}

ul[role=list],
ol[role=list] {
    list-style: none
}

body {
    text-rendering: optimizeSpeed;
    line-height: 1.5
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

img,
iframe,
picture,
video {
    max-width: 100%;
    height: auto;
    display: block
}

input,
button,
textarea,
select {
    font: inherit
}

@media (prefers-reduced-motion: reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

@font-face {
    font-family: ABCRepro;
    src: url(ABCRepro-Light-TUUI3Q3S.woff) format("woff"), url(ABCRepro-Light-76JP5KPX.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: ABCReproHairline;
    src: url(ABCRepro-Hairline-GNPT5RHU.woff) format("woff"), url(ABCRepro-Hairline-NJ6HHKOG.woff2) format("woff2");
    font-weight: light;
    font-style: normal
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 400
}

h1,
.h1 {
    font-size: 4rem;
    line-height: 1;
    letter-spacing: -.05em
}

@media screen and (min-width: 56.25em) {

    h1,
    .h1 {
        font-size: 6rem
    }
}

h2,
.h2 {
    font-size: 2.5rem;
    line-height: 1.1
}

@media screen and (min-width: 56.25em) {

    h2,
    .h2 {
        font-size: 4rem
    }
}

h3,
.h3 {
    font-size: 2.5rem;
    line-height: 1.1
}

@media screen and (min-width: 56.25em) {

    h3,
    .h3 {
        font-size: 4rem
    }
}

h4,
.h4 {
    font-size: 2rem;
    line-height: 1.2
}

@media screen and (min-width: 56.25em) {

    h4,
    .h4 {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

h5,
.h5 {
    font-size: 1.6rem;
    line-height: 1.5
}

@media screen and (min-width: 56.25em) {

    h5,
    .h5 {
        font-size: 2rem
    }
}

h6,
.h6 {
    font-size: 1.5rem;
    line-height: 1.3
}

p {
    margin-bottom: 1em
}

p:last-child {
    margin: 0
}

.letter-fade {
    overflow: hidden
}

:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-white-fade: rgba(255, 255, 255, .2);
    --color-lightgrey: #ededed;
    --color-grey: #808080;
    --color-darkgrey: #434343;
    --font-family-body: "ABCRepro", "Helvetica", sans-serif;
    --font-size-body: 2rem;
    --font-weight-body: 400;
    --font-spacing-body: -.025em;
    --font-family-light: "ABCReproHairline", "Helvetica", sans-serif;
    --font-size-light: ;
    --font-weight-light: ;
    --font-spacing-light: ;
    --spacing-xsmall: 1rem;
    --spacing-small: 2rem;
    --spacing-medium: 3rem;
    --spacing-large: 5rem;
    --spacing-xlarge: 6rem;
    --spacing-section: 20rem;
    --timing-fast: .1s;
    --timing-reg: .3s;
    --timing-slow: .5s;
    --level1: 100;
    --level2: 200;
    --level3: 300;
    --level4: 400;
    --level5: 500;
    --vh: 100vh;
    --scrollbar: 0px;
    --col-spacing: .5rem;
    --site-gutter: .6rem;
    --col-gutter: calc(var(--col-spacing) * 2);
    --site-margin: calc(var(--site-gutter) + var(--col-spacing));
    --grid-width: calc((100vw - var(--scrollbar)) - (2 * var(--site-gutter)));
    --col-1: calc(var(--grid-width) * .0833);
    --col-1--gutters: calc(var(--grid-width) * .0833 - (var(--col-gutter)));
    --col-2: calc(var(--grid-width) * .1666);
    --col-2--gutters: calc(var(--grid-width) * .1666 - (var(--col-gutter)));
    --col-3: calc(var(--grid-width) * .25);
    --col-3--gutters: calc(var(--grid-width) * .25 - (var(--col-gutter)));
    --col-4: calc(var(--grid-width) * .333);
    --col-4--gutters: calc(var(--grid-width) * .333 - (var(--col-gutter)));
    --col-5: calc(var(--grid-width) * .4166);
    --col-5--gutters: calc(var(--grid-width) * .4166 - (var(--col-gutter)));
    --col-6: calc(var(--grid-width) * .5);
    --col-6--gutters: calc(var(--grid-width) * .5 - (var(--col-gutter)));
    --col-7: calc(var(--grid-width) * .5833);
    --col-7--gutters: calc(var(--grid-width) * .5833 - (var(--col-gutter)));
    --col-8: calc(var(--grid-width) * .666);
    --col-8--gutters: calc(var(--grid-width) * .666 - (var(--col-gutter)));
    --col-9: calc(var(--grid-width) * .75);
    --col-9--gutters: calc(var(--grid-width) * .75 - (var(--col-gutter)));
    --col-10: calc(var(--grid-width) * .833);
    --col-10--gutters: calc(var(--grid-width) * .833 - (var(--col-gutter)));
    --col-11: calc(var(--grid-width) * .9166);
    --col-11--gutters: calc(var(--grid-width) * .9166 - (var(--col-gutter)));
    --col-12: calc(var(--grid-width) * 1);
    --col-12--gutters: calc(var(--grid-width) * 1 - (var(--col-gutter)))
}

@media screen and (min-width: 56.25em) {
    :root {
        --col-spacing: .8rem;
        --site-gutter: 1.2rem
    }
}

::selection {
    background-color: var(--color-white);
    color: var(--color-black)
}

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--f-sans);
    font-weight: 300
}

body {
    font-size: var(--font-size-body);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    letter-spacing: var(--font-spacing-body);
    background-color: var(--color-black);
    color: var(--color-white)
}

body.working {
    cursor: wait
}

body.stop-scrolling {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

a {
    display: inline-block;
    text-decoration: none;
    color: var(--c-link);
    cursor: pointer
}

a:active,
a:focus {
    outline: none
}

.dots {
    opacity: 0;
    transform: scale(.5);
    transition: opacity 1.5s, transform 1.25s ease;
    transition-delay: var(--timing-fast)
}

.dots.show {
    opacity: 1;
    transform: scale(1)
}

.page--four {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.page--four .site-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.grid-outer {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter)
}

.grid-inner {
    padding-left: var(--col-spacing);
    padding-right: var(--col-spacing)
}

.col-1 {
    width: var(--col-1)
}

.col-1--gutters {
    width: calc(var(--col-1) + (var(--col-gutter)))
}

.col--offset-1 {
    margin-left: var(--col-1)
}

.col-2 {
    width: var(--col-2)
}

.col-2--gutters {
    width: calc(var(--col-2) + (var(--col-gutter)))
}

.col--offset-2 {
    margin-left: var(--col-2)
}

.col-3 {
    width: var(--col-3)
}

.col-3--gutters {
    width: calc(var(--col-3) + (var(--col-gutter)))
}

.col--offset-3 {
    margin-left: var(--col-3)
}

.col-4 {
    width: var(--col-4)
}

.col-4--gutters {
    width: calc(var(--col-4) + (var(--col-gutter)))
}

.col--offset-4 {
    margin-left: var(--col-4)
}

.col-5 {
    width: var(--col-5)
}

.col-5--gutters {
    width: calc(var(--col-5) + (var(--col-gutter)))
}

.col--offset-5 {
    margin-left: var(--col-5)
}

.col-6 {
    width: var(--col-6)
}

.col-6--gutters {
    width: calc(var(--col-6) + (var(--col-gutter)))
}

.col--offset-6 {
    margin-left: var(--col-6)
}

.col-7 {
    width: var(--col-7)
}

.col-7--gutters {
    width: calc(var(--col-7) + (var(--col-gutter)))
}

.col--offset-7 {
    margin-left: var(--col-7)
}

.col-8 {
    width: var(--col-8)
}

.col-8--gutters {
    width: calc(var(--col-8) + (var(--col-gutter)))
}

.col--offset-8 {
    margin-left: var(--col-8)
}

.col-9 {
    width: var(--col-9)
}

.col-9--gutters {
    width: calc(var(--col-9) + (var(--col-gutter)))
}

.col--offset-9 {
    margin-left: var(--col-9)
}

.col-10 {
    width: var(--col-10)
}

.col-10--gutters {
    width: calc(var(--col-10) + (var(--col-gutter)))
}

.col--offset-10 {
    margin-left: var(--col-10)
}

.col-11 {
    width: var(--col-11)
}

.col-11--gutters {
    width: calc(var(--col-11) + (var(--col-gutter)))
}

.col--offset-11 {
    margin-left: var(--col-11)
}

.col-12 {
    width: var(--col-12)
}

.col-12--gutters {
    width: calc(var(--col-12) + (var(--col-gutter)))
}

.col--offset-12 {
    margin-left: var(--col-12)
}

.js-load-in {
    opacity: 0;
    visibility: hidden
}

video.js-lazy {
    opacity: 0;
    transition: opacity var(--timing-reg) ease
}

video.js-lazy.loaded {
    opacity: 1
}

iframe.js-lazy {
    opacity: 0;
    transition: opacity var(--timing-reg) ease
}

iframe.js-lazy.loaded {
    opacity: 1
}

.flow-xsmall>*+* {
    margin-top: var(--spacing-xsmall)
}

.margin-xsmall {
    margin: var(--spacing-xsmall)
}

.margin-top-xsmall {
    margin-top: var(--spacing-xsmall)
}

.margin-bottom-xsmall {
    margin-bottom: var(--spacing-xsmall)
}

.margin-vertical-xsmall {
    margin-top: var(--spacing-xsmall);
    margin-bottom: var(--spacing-xsmall)
}

.margin-left-xsmall {
    margin-left: var(--spacing-xsmall)
}

.margin-right-xsmall {
    margin-right: var(--spacing-xsmall)
}

.margin-horizontal-xsmall {
    margin-left: var(--spacing-xsmall);
    margin-right: var(--spacing-xsmall)
}

.padding-xsmall {
    padding: var(--spacing-xsmall)
}

.padding-top-xsmall {
    padding-top: var(--spacing-xsmall)
}

.padding-bottom-xsmall {
    padding-bottom: var(--spacing-xsmall)
}

.padding-vertical-xsmall {
    padding-top: var(--spacing-xsmall);
    padding-bottom: var(--spacing-xsmall)
}

.padding-left-xsmall {
    padding-left: var(--spacing-xsmall)
}

.padding-right-xsmall {
    padding-right: var(--spacing-xsmall)
}

.padding-horizontal-xsmall {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.flow-small>*+* {
    margin-top: var(--spacing-small)
}

.margin-small {
    margin: var(--spacing-small)
}

.margin-top-small {
    margin-top: var(--spacing-small)
}

.margin-bottom-small {
    margin-bottom: var(--spacing-small)
}

.margin-vertical-small {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small)
}

.margin-left-small {
    margin-left: var(--spacing-small)
}

.margin-right-small {
    margin-right: var(--spacing-small)
}

.margin-horizontal-small {
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small)
}

.padding-small {
    padding: var(--spacing-small)
}

.padding-top-small {
    padding-top: var(--spacing-small)
}

.padding-bottom-small {
    padding-bottom: var(--spacing-small)
}

.padding-vertical-small {
    padding-top: var(--spacing-small);
    padding-bottom: var(--spacing-small)
}

.padding-left-small {
    padding-left: var(--spacing-small)
}

.padding-right-small {
    padding-right: var(--spacing-small)
}

.padding-horizontal-small {
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small)
}

.flow-medium>*+* {
    margin-top: var(--spacing-medium)
}

.margin-medium {
    margin: var(--spacing-medium)
}

.margin-top-medium {
    margin-top: var(--spacing-medium)
}

.margin-bottom-medium {
    margin-bottom: var(--spacing-medium)
}

.margin-vertical-medium {
    margin-top: var(--spacing-medium);
    margin-bottom: var(--spacing-medium)
}

.margin-left-medium {
    margin-left: var(--spacing-medium)
}

.margin-right-medium {
    margin-right: var(--spacing-medium)
}

.margin-horizontal-medium {
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium)
}

.padding-medium {
    padding: var(--spacing-medium)
}

.padding-top-medium {
    padding-top: var(--spacing-medium)
}

.padding-bottom-medium {
    padding-bottom: var(--spacing-medium)
}

.padding-vertical-medium {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium)
}

.padding-left-medium {
    padding-left: var(--spacing-medium)
}

.padding-right-medium {
    padding-right: var(--spacing-medium)
}

.padding-horizontal-medium {
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium)
}

.flow-large>*+* {
    margin-top: var(--spacing-large)
}

.margin-large {
    margin: var(--spacing-large)
}

.margin-top-large {
    margin-top: var(--spacing-large)
}

.margin-bottom-large {
    margin-bottom: var(--spacing-large)
}

.margin-vertical-large {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large)
}

.margin-left-large {
    margin-left: var(--spacing-large)
}

.margin-right-large {
    margin-right: var(--spacing-large)
}

.margin-horizontal-large {
    margin-left: var(--spacing-large);
    margin-right: var(--spacing-large)
}

.padding-large {
    padding: var(--spacing-large)
}

.padding-top-large {
    padding-top: var(--spacing-large)
}

.padding-bottom-large {
    padding-bottom: var(--spacing-large)
}

.padding-vertical-large {
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-large)
}

.padding-left-large {
    padding-left: var(--spacing-large)
}

.padding-right-large {
    padding-right: var(--spacing-large)
}

.padding-horizontal-large {
    padding-left: var(--spacing-large);
    padding-right: var(--spacing-large)
}

.flow-xlarge>*+* {
    margin-top: var(--spacing-xlarge)
}

.margin-xlarge {
    margin: var(--spacing-xlarge)
}

.margin-top-xlarge {
    margin-top: var(--spacing-xlarge)
}

.margin-bottom-xlarge {
    margin-bottom: var(--spacing-xlarge)
}

.margin-vertical-xlarge {
    margin-top: var(--spacing-xlarge);
    margin-bottom: var(--spacing-xlarge)
}

.margin-left-xlarge {
    margin-left: var(--spacing-xlarge)
}

.margin-right-xlarge {
    margin-right: var(--spacing-xlarge)
}

.margin-horizontal-xlarge {
    margin-left: var(--spacing-xlarge);
    margin-right: var(--spacing-xlarge)
}

.padding-xlarge {
    padding: var(--spacing-xlarge)
}

.padding-top-xlarge {
    padding-top: var(--spacing-xlarge)
}

.padding-bottom-xlarge {
    padding-bottom: var(--spacing-xlarge)
}

.padding-vertical-xlarge {
    padding-top: var(--spacing-xlarge);
    padding-bottom: var(--spacing-xlarge)
}

.padding-left-xlarge {
    padding-left: var(--spacing-xlarge)
}

.padding-right-xlarge {
    padding-right: var(--spacing-xlarge)
}

.padding-horizontal-xlarge {
    padding-left: var(--spacing-xlarge);
    padding-right: var(--spacing-xlarge)
}

.flow-section>*+* {
    margin-top: var(--spacing-section)
}

.margin-section {
    margin: var(--spacing-section)
}

.margin-top-section {
    margin-top: var(--spacing-section)
}

.margin-bottom-section {
    margin-bottom: var(--spacing-section)
}

.margin-vertical-section {
    margin-top: var(--spacing-section);
    margin-bottom: var(--spacing-section)
}

.margin-left-section {
    margin-left: var(--spacing-section)
}

.margin-right-section {
    margin-right: var(--spacing-section)
}

.margin-horizontal-section {
    margin-left: var(--spacing-section);
    margin-right: var(--spacing-section)
}

.padding-section {
    padding: var(--spacing-section)
}

.padding-top-section {
    padding-top: var(--spacing-section)
}

.padding-bottom-section {
    padding-bottom: var(--spacing-section)
}

.padding-vertical-section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section)
}

.padding-left-section {
    padding-left: var(--spacing-section)
}

.padding-right-section {
    padding-right: var(--spacing-section)
}

.padding-horizontal-section {
    padding-left: var(--spacing-section);
    padding-right: var(--spacing-section)
}

.scroll-to--section {
    scroll-margin-top: var(--spacing-section)
}

.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: .1rem;
    width: .1rem;
    margin: -.1rem;
    padding: 0;
    border: 0
}

.site-wrapper {
    margin-top: var(--header-height)
}

.behind-header {
    margin-top: calc(-1 * var(--header-height))
}

.content-wrapper {
    background-color: var(--color-black)
}

.page--privacy .content-wrapper {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .page--privacy .content-wrapper {
        width: var(--col-8);
        margin-left: auto;
        margin-right: auto
    }
}

@media screen and (min-width: 75em) {
    .page--privacy .content-wrapper {
        width: var(--col-6)
    }
}

button,
.button {
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    color: currentColor
}

button svg,
.button svg {
    fill: currentColor
}

.button-pill,
.primary-nav__list .menu-item a {
    position: relative;
    display: block;
    transition: color var(--timing-reg);
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1
}

.button-pill:hover,
.primary-nav__list .menu-item a:hover,
.button-pill.active,
.primary-nav__list .menu-item a.active {
    color: var(--color-black)
}

.button-pill:hover:before,
.primary-nav__list .menu-item a:hover:before,
.button-pill.active:before,
.primary-nav__list .menu-item a.active:before {
    opacity: 1;
    transform: scaleX(1)
}

.button-pill:before,
.primary-nav__list .menu-item a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: .2rem;
    right: .2rem;
    bottom: 0;
    border-radius: .75rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transform-origin: left;
    transform: scaleX(0);
    transition: opacity var(--timing-reg), transform var(--timing-reg) ease
}

.hamburger-button {
    position: relative;
    display: block;
    width: 4.2rem;
    height: 3.6rem;
    pointer-events: auto;
    z-index: var(--level6);
    background-color: var(--color-black)
}

.hamburger-button.is-working {
    pointer-events: none
}

.x,
.y,
.z {
    position: absolute;
    display: block;
    margin: auto;
    left: 1.2rem;
    background-color: var(--color-lightgrey);
    border-radius: 0;
    height: .1rem;
    width: 1.8rem;
    transition: transform var(--timing-reg) ease
}

.is-active .x,
.is-active .y,
.is-active .z {
    background-color: var(--color-white)
}

.x {
    top: 1.2rem
}

.is-active .x {
    top: 1.8rem;
    transform: rotate(45deg)
}

.y {
    top: 1.8rem
}

.is-active .y {
    opacity: 0
}

.z {
    top: 2.4rem
}

.is-active .z {
    top: 1.8rem;
    transform: rotate(-45deg)
}

.form-control {
    background-color: transparent;
    color: #4d4242cc;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none
}

.form-control::placeholder {
    color: var(--color-grey)
}

.select-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.select-wrap select {
    width: 100%;
    cursor: pointer
}

.select-wrap:after {
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    right: 1.4rem;
    background-image: url("data:image/svg+xml,%3Csvg class='svg-fill' viewBox='0 0 18 18' width='18' height='18' fill='%23fcfcfc' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.144 9.206A8.231 8.231 0 0 1 8.79.826a8.226 8.226 0 0 1 8.626 8.38 8.253 8.253 0 0 1-8.626 8.4 8.25 8.25 0 0 1-8.646-8.4Zm8.646 7.481a7.184 7.184 0 0 0 7.6-7.461 7.199 7.199 0 0 0-7.6-7.48 7.2 7.2 0 0 0-7.624 7.48 7.19 7.19 0 0 0 7.624 7.461ZM5.131 9.553l3.193 3.209V5.139h.94l-.02 7.624 3.209-3.23.613.633-4.276 4.292-4.292-4.292.633-.613Z'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none
}

.checkbox {
    position: relative
}

.checkbox input:checked+.checkbox__label:before {
    border-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve' fill='white'%3E%3Cpath d='M96.7,24.5l-9.8-10.2L34.2,65.2L13.9,42.6L3.4,52.2l30.1,33.5L96.7,24.5z'/%3E%3C/svg%3E");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center
}

.checkbox__label {
    cursor: pointer;
    display: inline-block;
    display: flex;
    align-items: center;
    font-weight: 400
}

.checkbox__label:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-grey);
    margin-right: .8rem
}

.optional {
    color: var(--color-grey);
    font-size: 1.1rem;
    letter-spacing: -.02em;
    line-height: 1.3
}

textarea {
    min-height: 15rem
}

label {
    color: var(--color-white)
}

.card.fade {
    opacity: 0;
    transition: opacity var(--timing-reg) linear
}

.card.fade-in {
    transition-delay: .1s;
    opacity: 1;
    visibility: visible
}

.journal-card {
    display: flex;
    flex-direction: column;
    color: var(--color-grey);
    transition: color var(--timing-reg)
}

.journal-card:hover {
    color: var(--color-white)
}

.journal-card .journal-card__media-wrap {
    position: relative;
    height: 0;
    padding-top: 79.1208791209%
}

.journal-card .journal-card__media-wrap img,
.journal-card .journal-card__media-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.journal-card .journal-card__text {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    line-height: 1.3;
    border-bottom: 1px solid var(--color-white-fade)
}

.journal-card .journal-card__text h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-right: 1px solid var(--color-white-fade)
}

.journal-card .journal-card__date {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 50%;
    padding: 1rem
}

.journal-card .journal-card__date span {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1
}

.journal-card-simple {
    width: var(--col-12);
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative
}

.journal-card-simple:before,
.journal-card-simple:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: var(--col-spacing);
    right: var(--col-spacing)
}

.journal-card-simple:before {
    border-top: 1px solid var(--color-white-fade)
}

.journal-card-simple:after {
    border-top: 2px solid var(--color-white);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform var(--timing-reg) ease, opacity var(--timing-slow)
}

.journal-card-simple:hover:after {
    transform: scaleX(1);
    opacity: 1
}

.journal-card-simple .journal-card__date {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 1.6rem
}

.journal-card-simple h2 {
    font-size: 2rem;
    line-height: 1.2
}

@media screen and (min-width: 56.25em) {
    .journal-card-simple h2 {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

.journal-card-simple--featured {
    position: relative;
    border: none;
    padding: 0;
    margin-bottom: 7rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.journal-card-simple--featured:before,
.journal-card-simple--featured:after {
    display: none
}

.journal-card-simple--featured .journal-card__media-wrap {
    transition: opacity var(--timing-reg)
}

.journal-card-simple--featured:hover .journal-card__media-wrap {
    opacity: .65
}

.journal-card-simple--featured h2 {
    font-size: 2.5rem;
    line-height: 1.1;
    max-width: 20ch
}

@media screen and (min-width: 56.25em) {
    .journal-card-simple--featured h2 {
        font-size: 4rem
    }
}

@media screen and (min-width: 37.5em) {
    .journal-card-simple--featured {
        margin-left: auto;
        margin-right: auto;
        width: var(--col-10);
        margin-bottom: 4rem
    }
}

@media screen and (min-width: 56.25em) {
    .journal-card-simple--featured {
        width: var(--col-8)
    }
}

@media screen and (min-width: 75em) {
    .journal-card-simple--featured {
        width: var(--col-6)
    }
}

.journal-card-simple--featured .journal-card__text {
    position: absolute
}

.journal-card-simple .journal-card__media-wrap {
    position: relative;
    padding-top: 69.5652173913%;
    width: 100%;
    height: 0
}

.journal-card-simple .journal-card__media-wrap img,
.journal-card-simple .journal-card__media-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.journal-card-simple .journal-card__media-wrap:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 60%)
}

.cookie-popup {
    position: fixed;
    bottom: var(--site-margin);
    left: var(--site-margin);
    max-width: 100%;
    padding: 1rem;
    color: var(--color-grey);
    background-color: var(--color-black);
    border: .1rem solid var(--color-white-fade);
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--timing-reg), z-index var(--timing-reg)
}

.page--home .cookie-popup {
    background-color: transparent;
    bottom: calc(var(--site-margin) + 8rem)
}

@media screen and (min-width: 56.25em) {
    .page--home .cookie-popup {
        bottom: calc(var(--site-margin) + 7rem)
    }
}

.cookie-popup.show {
    opacity: 1;
    pointer-events: all;
    z-index: var(--level4)
}

.cookie-popup p {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    line-height: 1.3;
    max-width: 37ch
}

.cookie-popup a {
    text-decoration: underline
}

.cookie-popup .button {
    border-color: transparent;
    background-color: var(--color-black);
    color: var(--color-white);
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    border: .1rem var(--color-white) solid;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none
}

.cookie-popup .button:hover {
    background-color: var(--color-white);
    color: var(--color-black)
}

.project-card-simple {
    position: relative;
    display: block;
    width: var(--col-12);
    margin-top: 4.5rem
}

.project-card-simple:first-of-type {
    margin-top: 0
}

.project-card-simple:hover .project-card-simple__media {
    opacity: .7
}

@media screen and (min-width: 56.25em) {
    .project-card-simple {
        width: var(--col-6);
        margin-top: 0
    }
}

.project-card-simple__media-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 68%
}

.project-card-simple__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--timing-reg)
}

.project-card-simple__text {
    text-align: center;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem
}

@media screen and (min-width: 37.5em) {
    .project-card-simple__text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: var(--level1)
    }
}

.project-card-simple__title {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15em;
    line-height: 1.5;
    margin-bottom: .5rem
}

@media screen and (min-width: 56.25em) {
    .project-card-simple__title {
        margin-bottom: 2rem
    }
}

.project-card-simple__tagline {
    font-size: 2rem;
    line-height: 1.2;
    max-width: 20ch;
    margin: auto
}

@media screen and (min-width: 56.25em) {
    .project-card-simple__tagline {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

@media screen and (min-width: 56.25em) {
    .project-card-simple__tagline {
        max-width: 16ch
    }
}

.project-card-complex {
    display: block;
    width: var(--col-12);
    margin-bottom: 4rem
}

.project-card-complex:hover .project-card-complex__media {
    opacity: .7
}

@media screen and (min-width: 56.25em) {
    .project-card-complex {
        width: var(--col-6)
    }
}

.project-card-complex__media-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 68%;
    margin-bottom: 1.6rem
}

.project-card-complex__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--timing-reg)
}

.project-card-complex__text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    font-size: 1.5rem;
    line-height: 1.3;
    border-top: .1rem solid var(--color-white-fade);
    border-bottom: .1rem solid var(--color-white-fade);
    padding-top: 1.6rem
}

.project-card-complex__title {
    font-size: 1.5rem;
    line-height: 1.3;
    width: 100%;
    display: block;
    padding-bottom: 1.6rem;
    border-bottom: .1rem solid var(--color-white-fade)
}

.project-card-complex__details {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start
}

@media screen and (min-width: 75em) {
    .project-card-complex__details {
        flex-wrap: nowrap
    }
}

.project-card-complex__info {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    border-right: .1rem solid var(--color-white-fade);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start
}

.project-card-complex__info--location {
    width: 100%;
    border: none;
    border-bottom: .1rem solid var(--color-white-fade)
}

@media screen and (min-width: 75em) {
    .project-card-complex__info--location {
        flex-grow: 1;
        max-width: 50%;
        border: none;
        border-right: .1rem solid var(--color-white-fade)
    }
}

.project-card-complex__info--category {
    flex-grow: 1
}

@media screen and (min-width: 75em) {
    .project-card-complex__info--category {
        padding-left: var(--col-spacing)
    }
}

.project-card-complex__info--year {
    flex-grow: 1;
    padding-left: var(--col-spacing)
}

@media screen and (min-width: 75em) {
    .project-card-complex__info--year {
        padding-right: 3.6rem
    }
}

.project-card-complex__info:last-child {
    border: none
}

.project-card-complex__info span {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1;
    margin-right: .8rem
}

.flickity-button {
    background-color: transparent;
    line-height: 0;
    box-shadow: none !important;
    width: 2rem;
    height: 2rem;
    opacity: .5;
    transition: background-color var(--timing-reg), opacity var(--timing-reg)
}

@media screen and (min-width: 56.25em) {
    .flickity-button {
        width: 2.75rem;
        height: 2.75rem
    }
}

.flickity-button.previous {
    left: 2rem
}

.flickity-button.next {
    right: 2rem
}

.flickity-button:hover {
    background-color: var(--color-white-fade);
    opacity: 1
}

.flickity-button svg {
    fill: var(--color-white);
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important
}

.primary-nav {
    margin-left: auto
}

.primary-nav__list {
    display: flex;
    text-align: center;
    list-style: none;
    flex-direction: row;
    gap: .5rem;
    align-items: center
}

@media screen and (min-width: 56.25em) {
    .primary-nav__list {
        gap: .8rem
    }
}

.primary-nav__list .menu-item.current_page_item a {
    color: var(--color-black)
}

.primary-nav__list .menu-item.current_page_item a:before {
    opacity: 1;
    transform: scaleX(1)
}

.hero-wrapper--fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    min-height: var(--vh);
    z-index: -1
}

.hero-wrapper--fixed+* {
    margin-top: 100vh;
    margin-top: var(--vh)
}

.hero {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%
}

.hero.hide {
    opacity: 0;
    pointer-events: none
}

.hero img,
.hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--timing-reg) linear;
    opacity: 0
}

.hero img.loaded,
.hero video.loaded {
    opacity: 1
}

.loading {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 5rem;
    height: 5rem;
    z-index: var(--level2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--timing-reg) linear;
    pointer-events: none
}

.loading.show {
    opacity: 1
}

.load-more {
    margin: 8rem auto;
    text-align: center
}

.page--single .load-more {
    margin-bottom: 10rem
}

@media screen and (min-width: 56.25em) {
    .page--single .load-more {
        margin-bottom: 20rem
    }
}

.load-more__button {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 1.5rem 3rem;
    background: var(--color-black);
    color: var(--color-white);
    transition: opacity var(--timing-reg) linear;
    transition-delay: .75s;
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1
}

.load-more__button>* {
    pointer-events: none
}

.load-more__button[disabled] {
    opacity: .5;
    cursor: not-allowed
}

.load-more__button.hide {
    opacity: 0;
    pointer-events: none;
    transition-delay: 0s
}

.load-more__loader {
    position: fixed;
    right: calc(var(--site-gutter) + var(--col-spacing));
    bottom: 2rem;
    width: 5rem;
    height: 5rem;
    z-index: var(--level3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--timing-reg) linear;
    pointer-events: none
}

.load-more__loader.show {
    opacity: 1
}

.fetch-container {
    position: fixed;
    display: block;
    transform: translateY(100%);
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    z-index: var(--level5);
    opacity: 0;
    visibility: hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.fetch-container__close {
    position: fixed;
    top: 1rem;
    right: calc(var(--site-gutter) + var(--col-spacing));
    cursor: pointer;
    z-index: var(--level5);
    opacity: 0;
    visibility: hidden
}

.fetch-container__close>* {
    pointer-events: none
}

.fetch-container__close .x,
.fetch-container__close .y {
    position: absolute;
    top: 50%;
    left: calc(50% - 3rem);
    width: 6rem;
    height: .1rem;
    background-color: var(--color-black);
    border-radius: .02rem;
    transform: rotate(45deg);
    transition: transform var(--timing-reg) ease
}

@media screen and (min-width: 56.25em) {

    .fetch-container__close .x,
    .fetch-container__close .y {
        left: calc(50% - 3.5rem);
        width: 7rem
    }
}

.fetch-container__close .y {
    transform: rotate(-45deg)
}

.pagination {
    margin: 2rem auto;
    text-align: center
}

.pagination__button {
    display: inline-block;
    width: 3rem;
    padding: .5rem;
    margin: 0 .5rem;
    border: .1rem solid var(--color-black);
    font-size: 1.4rem;
    text-align: center;
    color: var(--color-black);
    opacity: .4;
    pointer-events: none
}

.pagination__button.active {
    opacity: 1;
    pointer-events: all
}

.pagination__button.active:hover {
    background: var(--color-black);
    color: var(--color-white)
}

.pagination__button.current-page {
    background: var(--color-black);
    color: var(--color-white);
    opacity: 1
}

.alert-wrapper {
    position: absolute;
    top: -6rem;
    right: var(--site-margin);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--timing-reg) linear;
    transition-delay: 0s;
    max-width: 100%;
    width: auto !important;
    padding: 1rem;
    color: var(--color-grey);
    background-color: var(--color-black);
    border: .1rem solid var(--color-white-fade);
    display: flex;
    align-items: center;
    gap: 1.2rem
}

.alert-wrapper>div {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    line-height: 1.3;
    max-width: 37ch
}

.alert-wrapper .button {
    border-color: transparent;
    background-color: var(--color-black);
    color: var(--color-white);
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    border: .1rem var(--color-white) solid;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none
}

.alert-wrapper .button:hover {
    background-color: var(--color-white);
    color: var(--color-black)
}

.alert-wrapper.show {
    opacity: 1;
    pointer-events: all;
    transition-delay: .5s
}

.video-embed__btn-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.video-embed__btn-wrapper:hover .video-embed__btn {
    background-color: var(--color-white);
    color: var(--color-black)
}

.video-embed__btn {
    position: absolute;
    color: var(--color-white);
    width: 6.5rem;
    height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: transparent;
    border: .1rem solid var(--color-white);
    backdrop-filter: blur(.25rem);
    transition: all var(--timing-reg) linear
}

.video-embed__btn svg {
    fill: currentColor;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    left: .1rem;
    top: .1rem
}

.video-embed__popup {
    position: fixed;
    display: flex;
    flex-direction: column;
    inset: 0;
    opacity: 0;
    background-color: var(--color-black);
    padding: 0 var(--site-margin);
    padding-top: 7rem;
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--timing-reg) linear, z-index 0s linear var(--timing-reg)
}

.playing .video-embed__popup {
    pointer-events: all;
    z-index: var(--level4);
    opacity: 1;
    height: auto;
    width: auto;
    transition: opacity var(--timing-reg) linear, z-index 0s linear
}

.video-embed__popup .iframe-wrapper {
    height: 0;
    width: 100%;
    padding-top: 56.666%;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    overflow: hidden
}

.video-embed__popup iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.video-embed__close {
    position: absolute;
    top: 2.25rem;
    right: var(--site-margin);
    z-index: var(--level5)
}

:root {
    --header-height: 5rem
}

@media screen and (min-width: 56.25em) {
    :root {
        --header-height: 6rem
    }
}

.header {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: var(--level4)
}

.header.hide {
    display: none
}

.page--home .header {
    opacity: 0
}

.header.past-hero:before {
    opacity: 1
}

.header:before {
    content: "";
    display: block;
    position: absolute;
    top: -.5rem;
    left: 0;
    right: 0;
    bottom: -.5rem;
    pointer-events: none;
    background: rgba(0, 0, 0, .1);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, .8) 40%, rgb(0, 0, 0) 100%);
    z-index: -1;
    opacity: 0;
    -webkit-filter: blur(.3rem);
    filter: blur(.3rem);
    transition: opacity var(--timing-reg)
}

.header__inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header__site-link {
    line-height: 0;
    position: absolute
}

@media screen and (min-width: 56.25em) {
    .header__site-link {
        position: relative
    }
}

.header__site-link svg {
    fill: var(--color-white);
    width: auto;
    height: 3rem;
    transform-box: fill-box;
    pointer-events: none
}

.header__site-link svg path {
    display: none;
    transform-box: fill-box
}

.header__site-link svg .logo-mark path {
    display: block
}

.header__site-link svg .word-mark {
    overflow: hidden
}

@media screen and (min-width: 56.25em) {
    .header__site-link svg {
        width: 18rem;
        height: 4.2rem
    }

    .header__site-link svg path {
        display: block
    }
}

.flexible-content {
    margin-top: 5rem;
    margin-bottom: 2rem
}

.contact-form {
    position: relative;
    width: 50%;
    height: auto;
    padding: 2rem 0
}

.four-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 15rem var(--site-margin)
}

.four-content h1 {
    font-size: 1.5rem;
    line-height: 1.3
}

.four-content p {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0
}

@media screen and (min-width: 56.25em) {
    .four-content p {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

.four-content a {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1;
    margin-top: .5rem
}

.footer {
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 1.3;
    background-color: var(--color-black);
    position: relative
}

.footer a {
    color: var(--color-grey);
    transition: color var(--timing-reg)
}

.footer a:hover {
    color: var(--color-white)
}

.footer>* {
    width: 100%
}

@media screen and (min-width: 56.25em) {
    .footer {
        flex-direction: row;
        flex-wrap: wrap
    }

    .footer>* {
        width: var(--col-12)
    }
}

.footer-signup form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--color-white-fade);
    border-bottom: 1px solid var(--color-white-fade);
    padding-top: 1.6rem;
    padding-bottom: 1.6rem
}

@media screen and (min-width: 56.25em) {
    .footer-signup form {
        flex-direction: row;
        align-items: center
    }
}

.footer-signup form input[type=email] {
    margin: 0;
    padding: 0;
    border: 0;
    flex: 1;
    background-color: var(--color-black);
    color: var(--color-white);
    outline: 0
}

.footer-signup form .footer-signup__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.3rem
}

@media screen and (min-width: 56.25em) {
    .footer-signup form .footer-signup__submit {
        margin-top: 0;
        justify-content: flex-start;
        gap: 1.6rem
    }
}

.footer-signup form .footer-signup__submit>span {
    font-size: 1.1rem;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--color-grey)
}

.footer-signup form button {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1
}

.footer-signup form button svg {
    fill: currentColor;
    width: 1.6rem;
    height: 1.6rem
}

.footer-locations {
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 56.25em) {
    .footer-locations {
        flex-direction: row
    }
}

.footer-locations ul {
    list-style: none;
    padding: 0;
    color: var(--color-grey);
    margin: auto 0 0
}

.footer-locations ul>*+* {
    margin-top: .25rem
}

.footer-locations>* {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-white-fade);
    padding-top: 1.6rem;
    padding-bottom: 1.6rem
}

.footer-locations>* p {
    margin-bottom: 2rem
}

.footer-locations>*:first-child {
    border-top: 0
}

@media screen and (min-width: 56.25em) {
    .footer-locations>* {
        padding: 1.6rem;
        border-top: 0;
        border-right: 1px solid var(--color-white-fade)
    }

    .footer-locations>*:first-child {
        padding-left: 0
    }

    .footer-locations>*:last-child {
        padding-right: 0;
        border: 0
    }
}

.footer-links {
    border-top: 1px solid var(--color-white-fade);
    border-bottom: 1px solid var(--color-white-fade);
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    line-height: 1.3
}

@media screen and (min-width: 56.25em) {
    .footer-links {
        flex-direction: row
    }
}

.footer-links>* {
    flex: 1
}

.footer-details,
.footer-socials {
    display: flex
}

.footer-details>*,
.footer-socials>* {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    border-right: 1px solid var(--color-white-fade)
}

.footer-details>*:last-child,
.footer-socials>*:last-child {
    border-right: 0;
    padding-right: 0
}

@media screen and (min-width: 56.25em) {

    .footer-details>*,
    .footer-socials>* {
        padding: 1.6rem
    }
}

.footer-details {
    flex-wrap: wrap;
    border-top: 1px solid var(--color-white-fade);
    color: var(--color-grey)
}

.footer-details>* {
    width: 50%
}

.footer-details>*:first-child {
    width: 100%;
    order: 500;
    flex: none;
    border-top: 1px solid var(--color-white-fade);
    border-right: 0
}

.footer-details>*:last-child {
    padding-left: 1.6rem
}

@media screen and (min-width: 56.25em) {
    .footer-details {
        flex-wrap: nowrap;
        border-top: 0
    }

    .footer-details>* {
        flex: 1
    }

    .footer-details>*:first-child {
        width: auto;
        order: initial;
        flex: 1;
        padding-left: 0;
        margin-left: .1rem;
        border-top: 0;
        border-right: 1px solid var(--color-white-fade)
    }

    .footer-details>*:last-child {
        border-right: 1px solid var(--color-white-fade);
        padding-right: 1.6rem
    }
}

.footer-socials {
    order: -1;
    text-align: center
}

.footer-socials a {
    line-height: 0
}

.footer-socials svg {
    fill: currentColor;
    max-width: 1.6rem;
    max-height: 1.6rem;
    width: auto;
    height: auto
}

.footer-socials>* {
    flex: 1
}

@media screen and (min-width: 56.25em) {
    .footer-socials {
        order: initial
    }
}

.page-header {
    padding-top: 5rem;
    padding-bottom: 2.5rem
}

.home-clients {
    margin-top: 6.5rem;
    margin-bottom: 6.5rem;
    text-align: center
}

@media screen and (min-width: 56.25em) {
    .home-clients {
        margin-top: 13rem;
        margin-bottom: 13rem
    }
}

.home-clients h2 {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15em;
    line-height: 1.5
}

.home-clients__list {
    margin-top: 5rem;
    height: 10rem
}

@media screen and (min-width: 56.25em) {
    .home-clients__list {
        height: 12rem
    }
}

.home-clients__list .flickity-viewport {
    height: 100% !important
}

.home-clients__list .home-clients__logo-wrap {
    margin: 0 5rem;
    height: 100%;
    width: 13%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 56.25em) {
    .home-clients__list .home-clients__logo-wrap {
        width: 9%
    }
}

.home-clients__list .home-clients__logo-wrap img {
    max-width: 10rem;
    max-height: 6rem;
    width: auto;
    height: auto
}

@media screen and (min-width: 56.25em) {
    .home-clients__list .home-clients__logo-wrap img {
        max-width: 12rem;
        max-height: 7.5rem
    }
}

.home-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: var(--col-12--gutters);
    padding-top: var(--spacing-section)
}

@media screen and (min-width: 37.5em) {
    .home-content {
        width: var(--col-10--gutters)
    }
}

@media screen and (min-width: 56.25em) {
    .home-content {
        width: var(--col-8--gutters)
    }
}

@media screen and (min-width: 75em) {
    .home-content {
        width: var(--col-6--gutters)
    }
}

@media screen and (min-width: 56.25em) {
    .home-content--about {
        width: var(--col-12--gutters)
    }
}

@media screen and (min-width: 75em) {
    .home-content--about {
        width: var(--col-10--gutters)
    }
}

.home-content__intro {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

@media screen and (min-width: 56.25em) {
    .home-content__intro {
        padding-top: 5rem;
        padding-bottom: 5rem
    }
}

.home-content__intro h2 {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15em;
    line-height: 1.5
}

.home-content__intro p {
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 2rem
}

@media screen and (min-width: 56.25em) {
    .home-content__intro p {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

@media screen and (min-width: 56.25em) {
    .home-content__intro p {
        font-size: 3rem
    }
}

.home-content__about {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%
}

.home-content__about-cols {
    display: flex;
    flex-direction: column
}

.home-content__about-cols>* {
    width: 100%
}

@media screen and (min-width: 56.25em) {
    .home-content__about-cols {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
}

.home-content__about-desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: var(--col-11--gutters)
}

.home-content__about-desc p {
    font-size: 1.8rem;
    margin-bottom: 2.5rem
}

@media screen and (min-width: 37.5em) {
    .home-content__about-desc {
        width: var(--col-8--gutters)
    }
}

@media screen and (min-width: 56.25em) {
    .home-content__about-desc {
        width: var(--col-6--gutters)
    }
}

@media screen and (min-width: 75em) {
    .home-content__about-desc {
        width: var(--col-4--gutters)
    }
}

.home-content__about-title {
    width: 100%;
    text-align: center
}

.home-content__about-title h2 {
    font-size: 4rem;
    line-height: 1;
    letter-spacing: -.05em;
    font-family: var(--font-family-light);
    text-transform: uppercase;
    margin-bottom: 4rem
}

@media screen and (min-width: 56.25em) {
    .home-content__about-title h2 {
        font-size: 8rem
    }
}

@media screen and (min-width: 75em) {
    .home-content__about-title h2 {
        font-size: 11rem
    }
}

.home-hero {
    width: 100%;
    height: 100vh;
    height: var(--vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    z-index: 1
}

@media screen and (min-width: 37.5em) {
    .home-hero {
        height: 100vh
    }
}

.home-hero .home-hero__logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.home-hero .home-hero__logo svg {
    height: 100%;
    width: 100%;
    max-width: 55rem;
    max-height: 55rem;
    position: absolute;
    object-fit: contain;
    display: block
}

.home-hero .home-hero__media-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.home-hero .home-hero__media-wrap img,
.home-hero .home-hero__media-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.home-hero .home-hero__media-wrap video {
    opacity: 0;
    transition: opacity var(--timing-reg) ease
}

.home-hero .home-hero__media-wrap video.loaded {
    opacity: 1
}

.home-hero .home-hero__footer {
    display: flex;
    border-top: 1px solid var(--color-white-fade);
    border-bottom: 1px solid var(--color-white-fade);
    opacity: 0
}

.home-hero .home-hero__footer>a,
.home-hero .home-hero__footer .video-embed__open {
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem calc(var(--col-spacing) * 2);
    gap: 1.4rem
}

.home-hero .home-hero__footer>a:first-child,
.home-hero .home-hero__footer .video-embed__open:first-child {
    border-right: 1px solid var(--color-white-fade)
}

.home-hero .home-hero__footer>a svg,
.home-hero .home-hero__footer .video-embed__open svg {
    fill: currentColor;
    line-height: 0;
    transition: transform var(--timing-reg)
}

.home-hero .home-hero__footer a {
    padding-right: 0;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15em;
    line-height: 1.5;
    width: var(--col-4)
}

@media screen and (min-width: 56.25em) {
    .home-hero .home-hero__footer a {
        width: var(--col-2)
    }

    .home-hero .home-hero__footer a:hover svg {
        transform: translateY(15%)
    }
}

.home-hero .home-hero__footer .video-embed__open {
    padding-left: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    width: var(--col-8)
}

@media screen and (min-width: 56.25em) {
    .home-hero .home-hero__footer .video-embed__open {
        width: var(--col-10)
    }

    .home-hero .home-hero__footer .video-embed__open:hover svg {
        transform: translate(15%)
    }
}

.home-popup {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1
}

.home-latest {
    margin-top: 10rem;
    margin-bottom: 10rem
}

@media screen and (min-width: 56.25em) {
    .home-latest {
        margin-top: 15rem;
        margin-bottom: 15rem
    }
}

.home-latest .journal-card {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .home-latest .journal-card {
        width: var(--col-4)
    }
}

.home-latest__header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.home-projects {
    margin-top: 10rem;
    text-align: center;
    background-color: var(--color-black)
}

@media screen and (min-width: 56.25em) {
    .home-projects {
        margin-top: 20rem
    }
}

.home-projects h2 {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15em;
    line-height: 1.5;
    z-index: 2;
    position: relative
}

.home-projects__list {
    margin-top: 4rem
}

@media screen and (min-width: 56.25em) {
    .home-projects__list {
        margin-top: -5rem
    }
}

.home-projects__list .project-card {
    width: var(--col-12--gutters);
    margin: 0 var(--col-spacing);
    opacity: .65;
    transition: opacity var(--timing-reg)
}

.home-projects__list .project-card:hover .project-card__media {
    opacity: .7
}

@media screen and (min-width: 56.25em) {
    .home-projects__list .project-card {
        width: var(--col-10)
    }
}

.home-projects__list .project-card.is-selected {
    opacity: 1
}

.home-projects__list .project-card.is-selected .project-card__media-wrap {
    transform: translateY(0)
}

.home-projects__list .project-card.is-selected .project-card__text h2,
.home-projects__list .project-card.is-selected .project-card__text .project-card__tagline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--timing-reg)
}

.home-projects__list .project-card.is-selected .project-card__text .project-card__tagline {
    transition-delay: calc(var(--timing-reg) * 1.75)
}

.home-projects__list .project-card .project-card__media-wrap {
    height: 0;
    position: relative;
    padding-top: 68%;
    transform: translateY(7.5%);
    transition: transform var(--timing-slow)
}

.home-projects__list .project-card .project-card__media-wrap:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 40%)
}

@media screen and (min-width: 56.25em) {
    .home-projects__list .project-card .project-card__media-wrap {
        padding-top: 57.6923076923%
    }
}

.home-projects__list .project-card .project-card__media-wrap img,
.home-projects__list .project-card .project-card__media-wrap video,
.home-projects__list .project-card .project-card__media-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--timing-reg)
}

.home-projects__list .project-card .project-card__text {
    text-align: center;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem
}

@media screen and (min-width: 37.5em) {
    .home-projects__list .project-card .project-card__text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 3rem;
        margin-top: 0
    }
}

.home-projects__list .project-card .project-card__text h2 {
    opacity: 0;
    transform: translateY(100%);
    transition: transform var(--timing-reg) ease, opacity var(--timing-reg);
    transition-delay: var(--timing-reg)
}

.home-projects__list .project-card .project-card__tagline {
    font-size: 2rem;
    line-height: 1.2;
    margin-top: .8rem;
    opacity: 0;
    transform: translateY(100%);
    transition: transform var(--timing-reg) ease, opacity var(--timing-reg);
    transition-delay: calc(var(--timing-reg) * 1.75)
}

@media screen and (min-width: 56.25em) {
    .home-projects__list .project-card .project-card__tagline {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

.journal-cards {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 5rem
}

.page--journal .journal-cards {
    padding-top: 5rem;
    margin-bottom: 7rem;
    gap: 0
}

@media screen and (min-width: 56.25em) {
    .page--journal .journal-cards {
        padding-top: 2rem;
        margin-bottom: 10rem
    }
}

.page--single .journal-cards {
    gap: 0;
    margin-top: 10rem
}

@media screen and (min-width: 56.25em) {
    .page--single .journal-cards {
        margin-top: 20rem
    }
}

@media screen and (min-width: 56.25em) {
    .journal-cards {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0
    }
}

.journal-single {
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 56.25em) {
    .journal-single {
        flex-direction: row;
        align-items: flex-start
    }
}

.journal-single__detail {
    display: flex;
    flex-direction: column;
    padding-top: 5rem;
    padding-bottom: 7rem;
    width: var(--col-12)
}

.journal-single__detail h1 {
    margin-bottom: 2.5rem;
    max-width: 15ch
}

@media screen and (min-width: 56.25em) {
    .journal-single__detail {
        width: var(--col-5);
        position: sticky;
        top: var(--header-height);
        left: 0;
        min-height: calc(100vh - var(--header-height));
        padding-top: 2.5rem;
        padding-bottom: 2rem
    }
}

@media screen and (min-width: 75em) {
    .journal-single__detail {
        width: var(--col-6)
    }
}

.journal-single__date {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.5rem;
    line-height: 1.3
}

.journal-single__date span {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1
}

.journal-single__content {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .journal-single__content {
        width: var(--col-7);
        padding-top: 2.5rem
    }
}

@media screen and (min-width: 75em) {
    .journal-single__content {
        width: var(--col-6)
    }
}

.project-hero {
    position: relative;
    height: 100vh;
    height: var(--vh);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start
}

.project-hero:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: var(--site-margin);
    width: var(--col-12--gutters);
    height: .1rem;
    background-color: var(--color-white-fade)
}

@media screen and (min-width: 56.25em) {
    .project-hero {
        height: 100vh
    }

    .project-hero:after {
        display: none
    }
}

.project-hero__media-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

@media screen and (min-width: 56.25em) {
    .project-hero__media-wrap {
        width: 100%;
        height: 100%;
        line-height: 0;
        clip-path: inset(0)
    }
}

.project-hero__media {
    position: absolute;
    object-fit: cover;
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: -1
}

@media screen and (min-width: 56.25em) {
    .project-hero__media {
        position: fixed
    }
}

.project-hero__text {
    width: var(--col-12);
    text-align: center;
    margin-top: auto;
    padding-top: 7rem;
    padding-bottom: 7rem
}

@media screen and (min-width: 56.25em) {
    .project-hero__text {
        padding-top: 0;
        padding-bottom: 15rem
    }
}

.project-hero__title {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15em;
    line-height: 1.5;
    margin-bottom: .8rem
}

.project-hero__tagline {
    font-size: 2rem;
    line-height: 1.2;
    max-width: 17ch;
    margin: auto
}

@media screen and (min-width: 56.25em) {
    .project-hero__tagline {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

.project-hero__scrollto {
    margin-top: auto;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center
}

.project-hero__scrollto svg {
    fill: currentColor;
    line-height: 0;
    transition: transform var(--timing-reg)
}

.project-hero__scrollto:hover svg {
    transform: translateY(15%)
}

.project-info {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 3rem;
    margin-bottom: 15rem
}

.project-info__title {
    width: var(--col-12)
}

.project-info__title h3 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 3rem
}

@media screen and (min-width: 56.25em) {
    .project-info__title h3 {
        font-size: 4rem
    }
}

@media screen and (min-width: 56.25em) {
    .project-info__title {
        width: var(--col-6)
    }
}

.project-info__content {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .project-info__content {
        width: var(--col-6)
    }
}

@media screen and (min-width: 56.25em) {
    .project-info__text {
        width: var(--col-5)
    }
}

.project-info__details {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    margin: 6rem 0
}

.project-info__details:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .1rem;
    background-color: var(--color-white-fade)
}

.project-info__detail {
    position: relative;
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.3;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-right: var(--col-spacing)
}

.project-info__detail--narrow {
    width: 50%
}

.project-info__detail--narrow:nth-child(odd) {
    padding-left: var(--col-spacing)
}

.project-info__detail--narrow:nth-child(odd):before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(-1 * var(--col-spacing));
    width: .1rem;
    height: 100%;
    background-color: var(--color-white-fade)
}

.project-info__detail span {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1;
    margin-right: .8rem
}

.project-info__detail:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .1rem;
    background-color: var(--color-white-fade)
}

.project-info__details--odd .project-info__detail:last-child {
    width: 100%
}

.project-quote {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    margin-bottom: 15rem
}

.project-quote__message {
    width: 100%
}

.project-quote__message blockquote {
    position: relative;
    font-size: 2.5rem;
    line-height: 1.1;
    width: var(--col-12);
    margin-bottom: 4rem
}

@media screen and (min-width: 56.25em) {
    .project-quote__message blockquote {
        font-size: 4rem
    }
}

.project-quote__message blockquote:before {
    content: "\201c";
    position: absolute;
    top: -6rem;
    left: -.6rem;
    font-size: 10rem
}

@media screen and (min-width: 56.25em) {
    .project-quote__message blockquote {
        width: var(--col-10);
        margin-bottom: 2rem
    }

    .project-quote__message blockquote:before {
        top: -8rem;
        font-size: 15rem
    }
}

.project-quote__citation {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start
}

.project-quote__citation:before,
.project-quote__citation:after {
    content: "";
    display: block;
    position: absolute;
    left: var(--col-spacing);
    right: var(--col-spacing);
    height: .1rem;
    background-color: var(--color-white-fade)
}

.project-quote__citation:before {
    top: 0
}

.project-quote__citation:after {
    bottom: 0
}

.project-quote__citation span {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1;
    margin-right: .8rem
}

.project-quote__citation-item {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-right: var(--col-spacing);
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.3;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem
}

.project-quote__citation-item--role:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: var(--col-spacing);
    width: var(--col-12--gutters);
    height: .1rem;
    background-color: var(--color-white-fade)
}

@media screen and (min-width: 56.25em) {
    .project-quote__citation-item--role:before {
        width: .1rem;
        height: 100%;
        left: calc(-1 * var(--col-spacing))
    }
}

.project-quote__citation-item cite {
    font-style: normal
}

@media screen and (min-width: 56.25em) {
    .project-quote__citation-item {
        width: 50%
    }
}

.project-awards {
    margin-bottom: 15rem
}

.project-awards__title {
    font-size: 2.5rem;
    line-height: 1.1;
    width: var(--col-12);
    text-align: center;
    margin-bottom: 10rem
}

@media screen and (min-width: 56.25em) {
    .project-awards__title {
        font-size: 4rem
    }
}

.project-awards__row {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--color-grey);
    transition: color var(--timing-reg)
}

.project-awards__row:hover {
    color: var(--color-white)
}

.project-awards__row:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: var(--col-spacing);
    right: var(--col-spacing);
    height: .1rem;
    background-color: var(--color-white-fade)
}

.project-awards__row:first-of-type:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: var(--col-spacing);
    right: var(--col-spacing);
    height: .1rem;
    background-color: var(--color-white-fade)
}

.project-awards__name,
.project-awards__year {
    display: none
}

@media screen and (min-width: 56.25em) {

    .project-awards__name,
    .project-awards__year {
        display: inline-block;
        width: var(--col-3)
    }
}

.project-awards__award {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .project-awards__award {
        width: var(--col-4)
    }
}

.project-awards__image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 10rem;
    max-height: 10rem;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 2
}

.project-awards__image-wrap img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.project-media__media-wrap {
    width: auto;
    max-width: unset;
    margin-bottom: 7rem
}

.project-media__media-wrap--left {
    width: var(--col-10)
}

.project-media__media-wrap--center {
    width: var(--col-12)
}

.project-media__media-wrap--right {
    width: var(--col-10);
    margin-left: var(--col-2)
}

.project-media__media-wrap--smallLeft {
    width: var(--col-8)
}

.project-media__media-wrap--smallRight {
    width: var(--col-8);
    margin-left: var(--col-4)
}

.project-media__media-wrap--two {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .project-media__media-wrap {
        margin-bottom: 15rem
    }

    .project-media__media-wrap--left {
        width: var(--col-9);
        margin-left: var(--col-1)
    }

    .project-media__media-wrap--center {
        width: var(--col-10);
        margin-left: var(--col-1)
    }

    .project-media__media-wrap--right {
        width: var(--col-9);
        margin-left: var(--col-2)
    }

    .project-media__media-wrap--smallLeft {
        width: var(--col-6)
    }

    .project-media__media-wrap--smallRight {
        width: var(--col-6);
        margin-left: var(--col-6)
    }

    .project-media__media-wrap--two {
        width: var(--col-6)
    }
}

.project-media__media {
    width: 100%;
    max-width: none
}

.project-media__media--fullbleed {
    margin-left: calc(-1 * var(--site-margin));
    margin-right: calc(-1 * var(--site-margin));
    width: unset
}

.project-media__two-item-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap
}

.project-media__two-item-row--top {
    align-items: flex-start
}

.project-media__two-item-row--center {
    align-items: center
}

.project-media__two-item-row--bottom {
    align-items: flex-end
}

.project-media__two-item-row .project-media__media-wrap {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .project-media__two-item-row {
        flex-wrap: nowrap
    }

    .project-media__two-item-row .project-media__media-wrap {
        width: var(--col-6)
    }
}

.related {
    margin-bottom: 8rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start
}

@media screen and (min-width: 56.25em) {
    .related {
        margin-bottom: 20rem
    }
}

.related__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4rem
}

.featured-projects {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 5rem;
    margin-bottom: 15rem;
    scroll-margin-top: var(--header-height);
    row-gap: 15rem
}

@media screen and (min-width: 56.25em) {
    .featured-projects {
        row-gap: 20rem
    }
}

.featured-projects__nav {
    position: absolute;
    z-index: var(--level2);
    bottom: 0;
    margin: 0 0 var(--site-margin) var(--col-spacing);
    align-items: center;
    display: none
}

@media screen and (min-width: 56.25em) {
    .featured-projects__nav {
        display: flex
    }
}

.featured-projects__nav.sticky {
    position: fixed
}

.featured-active .featured-projects__nav-link--featured {
    color: var(--color-black)
}

.featured-active .featured-projects__nav-link--featured:before {
    opacity: 1;
    transform: scaleX(1)
}

.all-active .featured-projects__nav-link--all {
    color: var(--color-black)
}

.all-active .featured-projects__nav-link--all:before {
    opacity: 1;
    transform: scaleX(1)
}

.featured-projects__link {
    display: block
}

.featured-projects__link:hover .featured-projects__link-video,
.featured-projects__link:hover .featured-projects__link-media {
    opacity: .7
}

.featured-projects__link--0 {
    width: var(--col-10)
}

@media screen and (min-width: 56.25em) {
    .featured-projects__link--0 {
        width: var(--col-9)
    }
}

.featured-projects__link--1 {
    width: var(--col-10);
    margin-left: var(--col-2)
}

.featured-projects__link--1 .featured-projects__link-video-wrap,
.featured-projects__link--1 .featured-projects__link-media-wrap {
    padding-top: 125%
}

@media screen and (min-width: 56.25em) {
    .featured-projects__link--1 {
        width: var(--col-7);
        margin-left: var(--col-4)
    }
}

.featured-projects__link--2 {
    width: var(--col-12)
}

@media screen and (min-width: 56.25em) {
    .featured-projects__link--2 {
        width: var(--col-9);
        margin-left: var(--col-1)
    }
}

.featured-projects__link--3 {
    width: var(--col-10)
}

.featured-projects__link--3 .featured-projects__link-video-wrap,
.featured-projects__link--3 .featured-projects__link-media-wrap {
    padding-top: 125%
}

@media screen and (min-width: 56.25em) {
    .featured-projects__link--3 {
        width: var(--col-7)
    }
}

.featured-projects__link--4 {
    width: var(--col-10);
    margin-left: var(--col-2)
}

.featured-projects__link--4 .featured-projects__link-video-wrap,
.featured-projects__link--4 .featured-projects__link-media-wrap {
    padding-top: 125%
}

@media screen and (min-width: 56.25em) {
    .featured-projects__link--4 {
        width: var(--col-7);
        margin-left: var(--col-4)
    }
}

.featured-projects__link-video-wrap,
.featured-projects__link-media-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.985645933%
}

.featured-projects__link-video,
.featured-projects__link-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--timing-reg)
}

.featured-projects__title-list {
    padding: 0;
    margin: 0;
    list-style: none;
    position: fixed;
    width: 100%;
    height: var(--vh);
    top: 0;
    left: 0
}

.featured-projects__title-list li {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.featured-projects__title-list li a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.featured-projects__title-list li a:hover:after {
    opacity: 1;
    transform: translateY(0)
}

.featured-projects__title-list li a:after {
    content: "";
    position: absolute;
    top: calc(100% + 2rem);
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg class='svg-fill' viewBox='0 0 18 18' width='18' height='18' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.206 17.413a8.232 8.232 0 0 1-8.38-8.646A8.226 8.226 0 0 1 9.206.141a8.253 8.253 0 0 1 8.4 8.626 8.25 8.25 0 0 1-8.4 8.646Zm7.481-8.646a7.184 7.184 0 0 0-7.461-7.6 7.2 7.2 0 0 0-7.48 7.6 7.2 7.2 0 0 0 7.48 7.624 7.19 7.19 0 0 0 7.461-7.624Zm-7.134 3.659 3.209-3.193H5.139v-.94l7.624.02-3.23-3.209.633-.613 4.292 4.276-4.292 4.292-.613-.633Z'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity var(--timing-reg), transform var(--timing-reg) ease
}

.featured-projects__title-list h3 {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15em;
    line-height: 1.5;
    margin-bottom: .8rem
}

.featured-projects__title-list h4 {
    font-size: 2rem;
    line-height: 1.2;
    max-width: 17ch
}

@media screen and (min-width: 56.25em) {
    .featured-projects__title-list h4 {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

.all-projects__grid {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: 20rem;
    scroll-margin-top: var(--header-height)
}

.all-projects__title {
    width: var(--col-12);
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 4rem
}

@media screen and (min-width: 56.25em) {
    .all-projects__title {
        font-size: 4rem
    }
}

.all-projects__filter {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    z-index: var(--level5);
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    padding-left: var(--site-margin);
    padding-right: var(--site-margin);
    padding-bottom: 4rem;
    background-color: #000000bf;
    transition: opacity var(--timing-reg)
}

.all-projects__filter.active {
    opacity: 1;
    pointer-events: all
}

@media screen and (max-width: 56.25em) {
    .all-projects__filter button {
        border-radius: 0;
        border: 0;
        border-bottom: .1rem solid var(--color-white-fade);
        background-color: var(--color-black);
        width: 100%;
        padding: 1.5rem 1rem;
        font-size: 2rem;
        font-feature-settings: initial;
        text-transform: none
    }

    .all-projects__filter button.active,
    .all-projects__filter button:hover {
        background-color: transparent;
        color: var(--color-white)
    }

    .all-projects__filter button.active:before,
    .all-projects__filter button:hover:before {
        display: none
    }

    .all-projects__filter button.active {
        background-color: var(--color-white);
        color: var(--color-black)
    }

    .all-projects__filter button:first-child {
        border-top: .1rem solid var(--color-white-fade)
    }
}

@media screen and (min-width: 56.25em) {
    .all-projects__filter {
        margin-bottom: 10rem;
        flex-direction: row;
        gap: .5rem;
        align-items: center;
        justify-content: center;
        min-height: var(--header-height);
        position: sticky;
        inset: 0 0 auto;
        padding: 0;
        max-width: var(--col-6--gutters);
        margin-left: auto;
        margin-right: auto;
        opacity: 1;
        pointer-events: all;
        background-color: transparent
    }
}

.all-projects__filter-toggle {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: var(--site-margin);
    z-index: var(--level5);
    pointer-events: none
}

.all-projects__filter-toggle button {
    pointer-events: all
}

@media screen and (min-width: 56.25em) {
    .all-projects__filter-toggle {
        display: none
    }
}

.contact__intro>* {
    width: var(--col-12);
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
    text-align: center;
    font-size: 2rem;
    line-height: 1.2
}

@media screen and (min-width: 56.25em) {
    .contact__intro>* {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

@media screen and (min-width: 56.25em) {
    .contact__intro>* {
        width: var(--col-8);
        padding-top: 2.5rem
    }
}

@media screen and (min-width: 75em) {
    .contact__intro>* {
        width: var(--col-6)
    }
}

.contact__form {
    margin-bottom: 15rem;
    font-size: 1.5rem;
    line-height: 1.3
}

.contact__form form {
    width: var(--col-12--gutters);
    padding-left: var(--col-spacing);
    padding-right: var(--col-spacing);
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width: 56.25em) {
    .contact__form form {
        width: var(--col-8--gutters)
    }
}

@media screen and (min-width: 75em) {
    .contact__form form {
        width: var(--col-6--gutters)
    }
}

.contact__form form .hf-fields-wrap p {
    display: flex;
    flex-direction: column;
    border-top: .1rem solid var(--color-white-fade);
    margin: 0;
    padding: 1.5rem 0;
    gap: 1.25rem
}

.contact__form form .hf-fields-wrap>p:last-of-type {
    border: 0
}

.contact__form form .form-row {
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 56.25em) {
    .contact__form form .form-row {
        flex-direction: row
    }
}

.contact__form form .form-row>* {
    flex: 1
}

@media screen and (min-width: 56.25em) {
    .contact__form form .form-row>*:first-child {
        border-right: 0rem solid var(--color-white-fade)
    }

    .contact__form form .form-row>*:last-child {
        padding-left: calc(var(--col-spacing) * 2)
    }
}

.contact__form form button {
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto
}

.contact__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4rem;
    width: var(--col-12);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15rem
}

@media screen and (min-width: 56.25em) {
    .contact__contacts {
        width: var(--col-8)
    }
}

@media screen and (min-width: 75em) {
    .contact__contacts {
        width: var(--col-6)
    }
}

.contact__contacts>* {
    width: 100%
}

@media screen and (min-width: 37.5em) {
    .contact__contacts>* {
        flex: 1;
        min-width: 50%;
        max-width: 50%
    }
}

.contact__contacts-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.contact__contacts-item h2 {
    font-size: 2rem;
    line-height: 1.2
}

@media screen and (min-width: 56.25em) {
    .contact__contacts-item h2 {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

.contact__contacts-item a {
    color: var(--color-grey);
    transition: color var(--timing-reg);
    font-size: 1.5rem;
    line-height: 1.3
}

.contact__contacts-item a:hover {
    color: var(--color-white)
}

.quote {
    margin-top: 8rem
}

.quote__message {
    width: 100%
}

.quote__message blockquote {
    font-size: 2rem;
    line-height: 1.2;
    position: relative;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 56.25em) {
    .quote__message blockquote {
        font-size: 2.5rem;
        line-height: 1.1
    }
}

.quote__message blockquote:before {
    content: "\201c";
    line-height: 1;
    font-size: 10rem;
    position: relative;
    margin-bottom: -.4em;
    left: -.05em
}

.quote__citation {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start
}

.quote__citation:before,
.quote__citation:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: .1rem;
    background-color: var(--color-white-fade)
}

.quote__citation:before {
    top: 0
}

.quote__citation:after {
    bottom: 0
}

.quote__citation span {
    font-size: 2rem;
    text-transform: uppercase;
    line-height: .8;
    -webkit-font-feature-settings: "ss16" 1, "medi" 1;
    font-feature-settings: "ss16" 1, "medi" 1;
    margin-right: .8rem
}

.quote__citation-item {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-right: var(--col-spacing);
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.3;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem
}

.quote__citation-item--role:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: var(--col-spacing);
    width: var(--col-12--gutters);
    height: .1rem;
    background-color: var(--color-white-fade)
}

@media screen and (min-width: 56.25em) {
    .quote__citation-item--role:before {
        width: .1rem;
        height: 100%;
        left: calc(-1 * var(--col-spacing))
    }
}

.quote__citation-item cite {
    font-style: normal
}

@media screen and (min-width: 56.25em) {
    .quote__citation-item {
        width: 50%
    }
}

.rich-text h1 span,
.rich-text h2 span,
.rich-text h3 span,
.rich-text h4 span,
.rich-text h5 span,
.rich-text h6 span {
    overflow: hidden
}

.rich-text ul {
    list-style: none;
    padding-left: 0
}

.rich-text ul li:before {
    content: "\2198  ";
    margin-right: .75rem
}

.rich-text ol {
    padding-left: 1.25em
}

.grid {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    z-index: 99999999999;
    pointer-events: none;
    overflow: hidden
}

.grid__inner {
    padding-left: var(--col-spacing);
    padding-right: var(--col-spacing);
    width: var(--col-2)
}

.grid__inner:before {
    display: block;
    content: "";
    width: 100%;
    height: 100vh;
    background: rgba(0, 214, 255, .25)
}

@media screen and (min-width: 56.25em) {
    .grid__inner {
        width: var(--col-1)
    }
}

/*! Flickity v3.0.0
https://flickity.metafizzy.co
---------------------------------------------- */