@font-face { font-family: graphik-xcond; src: url("/assets/fonts/GraphikXCondensed-Medium-Web.woff2") format("woff2"), url("/assets/fonts/GraphikXCondensed-Medium-Web.woff") format("woff"); font-weight: 500; font-style: normal; font-stretch: normal; }
@font-face { font-family: graphik-xcond; src: url("/assets/fonts/GraphikXCondensed-Regular-Web.woff2") format("woff2"), url("/assets/fonts/GraphikXCondensed-Regular-Web.woff") format("woff"); font-weight: 400; font-style: normal; font-stretch: normal; }
@font-face { font-family: graphik; src: url("/assets/fonts/Graphik-Regular-Web.woff2") format("woff2"), url("/assets/fonts/Graphik-Regular-Web.woff") format("woff"); font-weight: 400; font-style: normal; font-stretch: normal; }
h1, h2, h3, h4, h5, h6 { margin: 0; }

.f-body { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; }
.f-body { font-size: 18px; }
@media screen and (min-width: 400px) { .f-body { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .f-body { font-size: 24px; } }
@media (max-width: 680px) { .f-body { letter-spacing: -0.01em; } }

.nav { padding: var(--siteMargin); display: flex; justify-content: space-between; position: fixed; top: 0px; left: 0px; width: calc(100vw - var(--siteMargin)*2); z-index: 2; background: white; }
.nav ul { display: flex; }
.nav li { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; margin-left: 36px; }
.nav li { font-size: 18px; }
@media screen and (min-width: 400px) { .nav li { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .nav li { font-size: 24px; } }
@media (max-width: 680px) { .nav li { letter-spacing: -0.01em; } }
.nav li::last-child { margin-left: 30px; }
.nav #hamburger { display: none; width: 35px; height: 27px; justify-content: space-between; flex-direction: column; }
.nav #hamburger span { width: 100%; height: 3px; background: #000; transition: transform 300ms; }

#logo { display: block; z-index: 2; position: relative; }
#logo img { width: 240px; }
#logo #df-letters { opacity: 0; color: #000; position: absolute; left: 235px; width: 600px; transition: opacity 300ms, left 300ms; display: block; top: 0; width: 600px; font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; font-size: 65px !important; line-height: 0.6; }
@media (max-width: 680px) { #logo #df-letters { letter-spacing: -0.01em; } }
#logo #df-letters { font-size: 28px; }
@media screen and (min-width: 400px) { #logo #df-letters { font-size: calc(28px + 37 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { #logo #df-letters { font-size: 65px; } }
#logo:hover #df-letters { opacity: 1; left: 255px; }
@media (max-width: 960px) { #logo #df-letters { display: none; } }

#menu { display: flex; align-items: center; opacity: 1; position: relative; left: 0px; font-family: graphik; line-height: 1.333; letter-spacing: -0.02em; font-weight: 300; font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; }
#menu { font-size: 18px; }
@media screen and (min-width: 400px) { #menu { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { #menu { font-size: 24px; } }
@media (max-width: 680px) { #menu { letter-spacing: -0.01em; } }

#philosophy-toggle { border: 2px solid #3696FF; border-radius: 50%; width: 25px; height: 25px; transform: translateY(0.1em); display: inline-block; overflow: hidden; position: relative; margin-left: 10px; cursor: pointer; z-index: 3; }
#philosophy-toggle span:first-child { background: #3696FF; position: absolute; width: 100%; height: 100%; transform: rotate(45deg); left: -60%; top: 0px; transition: left 300ms; }
#philosophy-toggle span:last-child { background: white; position: absolute; width: 100%; height: 100%; transform: rotate(45deg); left: -160%; top: 0px; transition: left 300ms; }

#philosophy-toggle:hover span:first-child { left: 0px; }
#philosophy-toggle:hover span:last-child { left: -60%; }

.marquee { pointer-events: none; user-select: none; -webkit-user-select: none; width: 100vw; overflow: hidden; color: #3696FF; animation: name duration timing-function delay iteration-count direction fill-mode; }
.marquee span { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.03em; white-space: nowrap; margin-left: var(--siteMargin); display: block; position: relative; animation: marquee 15s 1s linear infinite; }
@media (max-width: 680px) { .marquee span { letter-spacing: -0.01em; } }
.marquee span { font-size: 70px; }
@media screen and (min-width: 400px) { .marquee span { font-size: calc(70px + 314 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .marquee span { font-size: 384px; } }
@media (max-width: 680px) { .marquee span { letter-spacing: -0.02em; } }

@keyframes marquee { 0% { transform: translateX(0); }
  66.667% { transform: translateX(-200%); }
  66.668% { transform: translateX(100%); }
  100% { transform: translateX(0); } }
.thumb h4 { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; margin-bottom: 10px; }
.thumb h4 { font-size: 18px; }
@media screen and (min-width: 400px) { .thumb h4 { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .thumb h4 { font-size: 24px; } }
@media (max-width: 680px) { .thumb h4 { letter-spacing: -0.01em; } }
.thumb img { vertical-align: top; }
.thumb .thumb-title { position: absolute; bottom: 0px; left: 0px; transform: translateX(-100%); opacity: 0; transition: 300ms; padding: 10px 24px; color: #fff; font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; }
.thumb .thumb-title { font-size: 18px; }
@media screen and (min-width: 400px) { .thumb .thumb-title { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .thumb .thumb-title { font-size: 24px; } }
@media (max-width: 680px) { .thumb .thumb-title { letter-spacing: -0.01em; } }
.thumb .thumb-title-container { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100px; overflow: hidden; mix-blend-mode: difference; }
.thumb .thumb-title::after { content: ''; display: block; width: 0; height: 2px; background-color: #fff; transition: width 300ms 100ms; }
@media (max-width: 680px) { .thumb .thumb-title::after { width: 100%; height: 1px; } }

.thumb:hover .thumb-title { opacity: 1; transform: translateX(0); }
.thumb:hover .thumb-title::after { width: 100%; }

.thumb-large { position: relative; display: block; }
.thumb-large img { width: 100%; height: 820px; }
.thumb-large .thumb-title-container .thumb-title { padding-left: 32px; }

.thumb-md { margin: 10px; }
.thumb-md img { width: 100%; }

.thumbs-2-col { display: flex; margin: -10px; flex-wrap: wrap; }

.thumbs-2-col > * { width: calc(50% - 20px); }

.cta { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; display: inline-block; position: relative; margin-top: 26px; padding-right: 0.75em; }
@media (max-width: 680px) { .cta { letter-spacing: -0.01em; } }
.cta { font-size: 26px; }
@media screen and (min-width: 400px) { .cta { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .cta { font-size: 50px; } }
@media (max-width: 680px) { .cta { letter-spacing: 0; } }
.cta::after { content: ''; display: block; width: 0; height: 3px; background: #000; transition: width 300ms; }
.cta:hover::after { width: 100%; }
@media (max-width: 680px) { .cta::after { height: 2px; width: 100%; } }

.black { background: black; color: white; }
.black h1, .black a { color: white; }

.col-3 { display: flex; margin: -10px; }
.col-3 > * { margin: 10px; flex: 1; }
.col-3 img { width: 100%; }

.card { display: flex; flex-direction: column; }
.card img { flex-grow: 0; margin-bottom: 36px; }
.card h5 { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; margin-bottom: 38px; flex-grow: 1; }
.card h5 { font-size: 18px; }
@media screen and (min-width: 400px) { .card h5 { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .card h5 { font-size: 24px; } }
@media (max-width: 680px) { .card h5 { letter-spacing: -0.01em; } }
.card .cta { flex-grow: 0; font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; }
@media (max-width: 680px) { .card .cta { letter-spacing: -0.01em; } }
.card .cta { font-size: 26px; }
@media screen and (min-width: 400px) { .card .cta { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .card .cta { font-size: 50px; } }
@media (max-width: 680px) { .card .cta { letter-spacing: 0; } }
.card .cta svg { height: 26px; width: 26px; }
.card:hover .cta span { left: 0.5em; }
.card:hover .cta svg { left: 0.25em; color: #fff; }
@media (max-width: 680px) { .card { margin-bottom: 30px; }
  .card h5 { margin-bottom: 16px; } }

.prefooter { color: #000; text-align: center; padding: 100px 20px; border-top: 1px solid #808080; }
.prefooter h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .prefooter h2 { letter-spacing: -0.01em; } }
.prefooter h2 { font-size: 35px; }
@media screen and (min-width: 400px) { .prefooter h2 { font-size: calc(35px + 39 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .prefooter h2 { font-size: 74px; } }
.prefooter .btn { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; border: 1px solid #808080; }
@media (max-width: 680px) { .prefooter .btn { letter-spacing: -0.01em; } }
.prefooter .btn { font-size: 26px; }
@media screen and (min-width: 400px) { .prefooter .btn { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .prefooter .btn { font-size: 50px; } }
@media (max-width: 680px) { .prefooter .btn { letter-spacing: 0; } }
.prefooter .btn-container { margin-top: 40px; margin-bottom: 0; }
.prefooter.black { color: #fff; }

.footer { background: #000; color: #fff; padding: 10px var(--siteMargin); display: flex; justify-content: space-between; align-items: center; }
.footer .social-icons { height: 100%; display: flex; align-items: center; }
.footer .social-icons a { display: inline-block; width: 35px; height: 35px; background-color: #fff; border-radius: 99px; display: flex; align-items: center; justify-content: center; margin-right: 8px; }
.footer .social-icons a:nth-child(2) { margin-right: 0; }
.footer svg { color: #000; }
@media (max-width: 680px) { .footer { justify-content: center; padding: 30px var(--siteMargin); }
  .footer .social-icons { justify-content: center; margin-top: 12px; } }

input#mce-EMAIL { background: #000; border: 0px; border-bottom: 1px solid #fff; padding: 5px 0px 5px 0px; width: 350px; border-radius: 0; }
@media (max-width: 680px) { input#mce-EMAIL { width: unset; text-align: center; } }

input#mce-EMAIL, input#mce-EMAIL::placeholder { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; line-height: 0.85; color: #fff; }
@media (max-width: 680px) { input#mce-EMAIL, input#mce-EMAIL::placeholder { letter-spacing: -0.01em; } }
input#mce-EMAIL, input#mce-EMAIL::placeholder { font-size: 26px; }
@media screen and (min-width: 400px) { input#mce-EMAIL, input#mce-EMAIL::placeholder { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { input#mce-EMAIL, input#mce-EMAIL::placeholder { font-size: 50px; } }
@media (max-width: 680px) { input#mce-EMAIL, input#mce-EMAIL::placeholder { letter-spacing: 0; } }

input#mce-EMAIL:focus { outline: none; border-color: #fff; }

input#mce-EMAIL:focus::placeholder { color: var(--mainColor); }

input[type="submit"] { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; color: #fff; background: transparent; border-color: #fff; cursor: pointer; }
@media (max-width: 680px) { input[type="submit"] { letter-spacing: -0.01em; } }
input[type="submit"] { font-size: 26px; }
@media screen and (min-width: 400px) { input[type="submit"] { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { input[type="submit"] { font-size: 50px; } }
@media (max-width: 680px) { input[type="submit"] { letter-spacing: 0; } }

input[type="submit"]:hover { color: white; background: black; }

#mc_embed_signup_scroll div { display: inline-block; }
@media (max-width: 680px) { #mc_embed_signup_scroll div { display: flex; flex-direction: column; justify-content: center; align-items: center; } }

#mc_embed_signup div.mce_inline_error { margin: 0 0 1em 0; padding: 0px !important; font-weight: bold; z-index: 1; color: red !important; position: absolute !important; left: var(--siteMargin) !important; font-size: 18px !important; opacity: 0; /* bottom: 50px; */ }

#mc_embed_signup div.mce_inline_error { background-color: transparent !important; }

#mc_embed_signup input.mce_inline_error { border-color: red !important; }

#mc_embed_signup input.mce_inline_error:focus::placeholder { color: red !important; }

form { position: relative; left: -362px; transition: left 300ms; }

form #mce-EMAIL { opacity: 0; }

form:hover { left: 0px; }

form:hover #mce-EMAIL { opacity: 1; }

@media (max-width: 960px) { form { left: 0; }
  form .mc-field-group { margin-bottom: 8px; }
  form #mce-EMAIL { opacity: 1; width: auto; } }
.btn-container { margin: 50px; display: inline-block; }

.btn { border: 1px solid black; border-radius: 2em; padding: 0.3em 0.8em 0.4em; display: inline-block; background: linear-gradient(to right, black 50%, white 50%); background-size: 210% 100%; background-position: right bottom; transition: all .3s ease-out; }

.btn:hover { background-position: left bottom; }

.btn-text { text-align: center; color: black; transition: all .4s ease-out; display: block; }

.btn:hover .btn-text { color: white; }

:root { --mainColor: #00F783; --inverseColor: white; --siteMargin: 40px; }

html { font-size: 24px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body { margin: 0; margin-top: 90px; transition: background-color 300ms; font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; }
body { font-size: 18px; }
@media screen and (min-width: 400px) { body { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { body { font-size: 24px; } }
@media (max-width: 680px) { body { letter-spacing: -0.01em; } }

body.inverse { background-color: var(--mainColor); color: var(--inverseColor); }
body.inverse h1, body.inverse .marquee, body.inverse .thumb h3 { color: var(--inverseColor); }
body.inverse .nav { background-color: var(--mainColor); color: var(--inverseColor); }
body.inverse .nav #philosophy-toggle { border-color: var(--inverseColor); }
body.inverse .nav #philosophy-toggle span:first-child, body.inverse .nav #hamburger span { background: var(--inverseColor); }
body.inverse .nav #philosophy-toggle span:last-child { background: var(--mainColor); }
body.inverse .nav #logo #df-letters { color: var(--inverseColor); }
body.inverse .nav a.underline::after { background: var(--inverseColor); }
body.inverse .comma { color: var(--inverseColor); font-weight: 500; }

.accordion-open { display: none; }

.less { display: none; }

.more, .less { left: 0px !important; }

.accordion.open .accordion-open { display: flex; }
.accordion.open .less { display: inline; }
.accordion.open .more { display: none; }
.accordion.open svg { transform: rotate(-180deg); }

img { object-fit: cover; }

.full { width: 100%; }

iframe { width: 100%; height: 660px; margin: calc(var(--siteMargin)/2); }

iframe.half { height: auto; }

.flex { display: flex; margin: -10px; }
.flex > * { margin: 10px; flex: 1; }

ul { padding: 0px; margin: 0px; list-style-type: none; }

a { color: black; text-decoration: none; cursor: pointer; }

a.underline::after { content: ''; display: block; width: 0; height: 2px; background: #000; transition: width 300ms; }

a:hover::after { width: 100%; }

.comma { color: var(--mainColor); }

#future-sayings { display: none; }

#page-transition { background: white; width: 100vw; height: 100%; position: fixed; left: -100vw; top: 0px; transition: left 300ms; z-index: 1; }

.container { padding: var(--siteMargin); }

.color-bg { background: var(--mainColor); }
.color-bg h1 { color: white; }

.color-secondary { background: var(--secondaryColor); }

.color-tertiary { background: var(--tertiaryColor); }

.arrow { transform: scale(1.8); display: inline-block; position: relative; font-weight: 400; top: -0.12em; margin-left: 5px; }

h1.description { margin-top: 100px; margin-bottom: 100px; }

.featured-project h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; margin-top: 70px; margin-bottom: 6px; }
@media (max-width: 680px) { .featured-project h2 { letter-spacing: -0.01em; } }
.featured-project h2 { font-size: 26px; }
@media screen and (min-width: 400px) { .featured-project h2 { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .featured-project h2 { font-size: 50px; } }
@media (max-width: 680px) { .featured-project h2 { letter-spacing: 0; } }
@media (max-width: 680px) { .featured-project h2 { margin-top: 40px; } }

.mission { margin: 100px 0; }
.mission h1 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .mission h1 { letter-spacing: -0.01em; } }
.mission h1 { font-size: 42px; }
@media screen and (min-width: 400px) { .mission h1 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .mission h1 { font-size: 100px; } }
@media (max-width: 680px) { .mission { margin: 40px 0; } }

.more-projects { margin: 0 0 110px; }
@media (max-width: 680px) { .more-projects { margin-bottom: 50px; } }

.homepage-news { background-color: #000; color: #fff; padding-top: 78px !important; padding-bottom: 78px !important; }
.homepage-news h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; margin-bottom: 64px; }
@media (max-width: 680px) { .homepage-news h2 { letter-spacing: -0.01em; } }
.homepage-news h2 { font-size: 42px; }
@media screen and (min-width: 400px) { .homepage-news h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .homepage-news h2 { font-size: 100px; } }
.homepage-news .card { color: #fff; align-items: flex-start; }
.homepage-news .card .cta::after { background-color: #fff; }
@media (max-width: 680px) { .homepage-news { padding-top: 50px !important; padding-bottom: 50px !important; }
  .homepage-news .col-3 { flex-direction: column; }
  .homepage-news h2 { margin-bottom: 20px; } }

.work h4 { margin-top: 30px; }
.work .thumb { width: calc(50% - 20px); }
.work .thumb:first-child, .work .thumb:nth-child(2) { width: 100%; position: relative; display: block; }
.work .thumb:first-child img, .work .thumb:nth-child(2) img { width: 100%; height: 820px; }
.work .thumbs-main { display: flex; flex-wrap: wrap; margin: -10px; }
.work .thumbs-main a > div { pointer-events: none; }
.work .prefooter { margin-top: 40px; }

.project { margin-top: 0px; }
.project .hero { height: auto; overflow: hidden; }
.project .hero img { height: 100%; object-fit: cover; }
.project .content { display: flex; margin-top: 44px; }
.project .content > * { width: 50%; }
.project .content .description { margin-bottom: 40px; }
.project .content .description h2 { margin-top: 0px; font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .project .content .description h2 { letter-spacing: -0.01em; } }
.project .content .description h2 { font-size: 42px; }
@media screen and (min-width: 400px) { .project .content .description h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .project .content .description h2 { font-size: 100px; } }
.project .content .description p { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; margin-top: 26px; }
.project .content .description p { font-size: 18px; }
@media screen and (min-width: 400px) { .project .content .description p { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .project .content .description p { font-size: 24px; } }
@media (max-width: 680px) { .project .content .description p { letter-spacing: -0.01em; } }
.project .content .description h3 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .project .content .description h3 { letter-spacing: -0.01em; } }
.project .content .description h3 { font-size: 35px; }
@media screen and (min-width: 400px) { .project .content .description h3 { font-size: calc(35px + 39 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .project .content .description h3 { font-size: 74px; } }
.project .content .description .accordion-open { margin-top: 50px; }
.project .content .title h2 { text-align: right; font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; font-weight: 300; }
@media (max-width: 680px) { .project .content .title h2 { letter-spacing: -0.01em; } }
.project .content .title h2 { font-size: 42px; }
@media screen and (min-width: 400px) { .project .content .title h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .project .content .title h2 { font-size: 100px; } }
@media (max-width: 680px) { .project .content { margin-top: 14px; }
  .project .content .description p { margin-bottom: 0; }
  .project .content .cta { margin-top: 10px; } }
.project .accordion.open .accordion-open { display: block; }
.project .images { display: flex; flex-wrap: wrap; margin: 0 calc(var(--siteMargin)*-1/2); }
.project .images img { width: 100%; margin: calc(var(--siteMargin)/2); }
.project .images .half { width: calc(50% - var(--siteMargin)); }
.project .images img.half { height: 100%; }
.project .images .video--half { width: 50%; }
.project .images img.full { width: calc(100% - var(--siteMargin)); }
@media (max-width: 680px) { .project { margin-top: 65px; }
  .project .images .video-container { padding-top: 0 !important; } }

.project.inverse { background: white; color: black; }
.project.inverse .nav { background: white; }
.project.inverse .content .description .cta { color: black; }
.project.inverse .nav { --inverseColor: var(--mainColor); }
.project.inverse .content .description svg path { stroke: black; }

.mobile-only { display: none; }

.about .capabilities { margin-top: 100px; margin-bottom: 100px; }
.about .capabilities h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .about .capabilities h2 { letter-spacing: -0.01em; } }
.about .capabilities h2 { font-size: 42px; }
@media screen and (min-width: 400px) { .about .capabilities h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .capabilities h2 { font-size: 100px; } }
.about .capabilities .col-3 { margin-top: 30px; }
.about .capabilities ul li { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; }
.about .capabilities ul li:first-child { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; margin-bottom: 8px; }
@media (max-width: 680px) { .about .capabilities ul li:first-child { letter-spacing: -0.01em; } }
.about .capabilities ul li:first-child { font-size: 26px; }
@media screen and (min-width: 400px) { .about .capabilities ul li:first-child { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .capabilities ul li:first-child { font-size: 50px; } }
@media (max-width: 680px) { .about .capabilities ul li:first-child { letter-spacing: 0; } }
.about .capabilities ul li { font-size: 18px; }
@media screen and (min-width: 400px) { .about .capabilities ul li { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .capabilities ul li { font-size: 24px; } }
@media (max-width: 680px) { .about .capabilities ul li { letter-spacing: -0.01em; } }
@media (max-width: 680px) { .about .capabilities { margin-top: 40px; margin-bottom: 40px; }
  .about .capabilities .col-3 > * { flex-basis: calc(50% - 10px); flex-grow: 0; } }
.about .challenges h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .about .challenges h2 { letter-spacing: -0.01em; } }
.about .challenges h2 { font-size: 42px; }
@media screen and (min-width: 400px) { .about .challenges h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .challenges h2 { font-size: 100px; } }
.about .challenge { background-color: var(--bg-color); }
.about .challenge h1 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; color: #fff; }
@media (max-width: 680px) { .about .challenge h1 { letter-spacing: -0.01em; } }
.about .challenge h1 { font-size: 35px; }
@media screen and (min-width: 400px) { .about .challenge h1 { font-size: calc(35px + 39 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .challenge h1 { font-size: 74px; } }
.about .challenge .desc { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; max-width: 600px; }
.about .challenge .desc { font-size: 18px; }
@media screen and (min-width: 400px) { .about .challenge .desc { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .challenge .desc { font-size: 24px; } }
@media (max-width: 680px) { .about .challenge .desc { letter-spacing: -0.01em; } }
.about .challenge .accordion-open { width: 100%; }
.about .challenge .accordion-open > div { flex-basis: calc(33.3% - var(--siteMargin)); margin-top: 24px; }
.about .challenge .accordion-open > div h5 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; letter-spacing: -0.015em; margin-bottom: 20px; }
@media (max-width: 680px) { .about .challenge .accordion-open > div h5 { letter-spacing: -0.01em; } }
.about .challenge .accordion-open > div h5 { font-size: 26px; }
@media screen and (min-width: 400px) { .about .challenge .accordion-open > div h5 { font-size: calc(26px + 24 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .challenge .accordion-open > div h5 { font-size: 50px; } }
@media (max-width: 680px) { .about .challenge .accordion-open > div h5 { letter-spacing: 0; } }
.about .challenge .accordion-open > div p { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; }
.about .challenge .accordion-open > div p { font-size: 18px; }
@media screen and (min-width: 400px) { .about .challenge .accordion-open > div p { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .challenge .accordion-open > div p { font-size: 24px; } }
@media (max-width: 680px) { .about .challenge .accordion-open > div p { letter-spacing: -0.01em; } }
.about .accordion { padding-bottom: 70px; }
.about .accordion h1 { margin: 20px 0px; }
.about .accordion .cta { color: #fff; }
.about .accordion .cta::after { background-color: #fff; }
@media (max-width: 680px) { .about .accordion .cta { margin-top: 0; } }
.about .accordion svg path { stroke: white; }
.about .accordion .accordion-open { display: none; flex-wrap: wrap; }
.about .accordion .accordion-open > div { margin-right: var(--siteMargin); }
.about .accordion .accordion-open h5 { margin: var(--siteMargin) 0px; }
.about .accordion h5 { font-weight: 500; }
@media (max-width: 680px) { .about .accordion { padding-bottom: 40px; } }
.about .accordion.open .accordion-open { display: flex; }
.about .clients { padding-top: 100px; padding-bottom: 100px; text-align: center; background-color: #000; }
.about .clients h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; margin-bottom: 20px; }
@media (max-width: 680px) { .about .clients h2 { letter-spacing: -0.01em; } }
.about .clients h2 { font-size: 42px; }
@media screen and (min-width: 400px) { .about .clients h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .clients h2 { font-size: 100px; } }
.about .clients ul { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1440px; margin: auto; }
.about .clients ul li { flex-basis: calc(20% - 20px); margin: 10px; }
.about .clients ul li img { width: 170px; height: 120px; object-fit: contain; object-position: center; }
@media (max-width: 680px) { .about .clients { padding-top: 40px; padding-bottom: 40px; } }
.about .featured { background-color: #3696FF; padding-top: 80px; padding-bottom: 80px; text-align: center; }
.about .featured h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; margin-bottom: 20px; }
@media (max-width: 680px) { .about .featured h2 { letter-spacing: -0.01em; } }
.about .featured h2 { font-size: 42px; }
@media screen and (min-width: 400px) { .about .featured h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .featured h2 { font-size: 100px; } }
.about .featured ul { color: white; }
.about .featured ul li { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .about .featured ul li { letter-spacing: -0.01em; } }
.about .featured ul li { font-size: 35px; }
@media screen and (min-width: 400px) { .about .featured ul li { font-size: calc(35px + 39 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .about .featured ul li { font-size: 74px; } }
@media (max-width: 680px) { .about .featured { padding-top: 40px; padding-bottom: 40px; } }
.about .prefooter { border: none; }

.contact .hero { padding-top: 0; }
.contact .hero img { width: calc(100% + var(--siteMargin) * 2); margin-left: calc(-1 * var(--siteMargin)); }
.contact .content { display: flex; margin-bottom: var(--siteMargin); }
.contact .content h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; }
@media (max-width: 680px) { .contact .content h2 { letter-spacing: -0.01em; } }
.contact .content h2 { font-size: 28px; }
@media screen and (min-width: 400px) { .contact .content h2 { font-size: calc(28px + 37 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .contact .content h2 { font-size: 65px; } }
.contact .content p { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; }
.contact .content p { font-size: 18px; }
@media screen and (min-width: 400px) { .contact .content p { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { .contact .content p { font-size: 24px; } }
@media (max-width: 680px) { .contact .content p { letter-spacing: -0.01em; } }
.contact .content p a { border-bottom: 1px solid #000; }
.contact .content > div { flex-basis: 50%; flex-grow: 0; }
.contact .content .info { display: flex; }
.contact .content .info__item { flex-basis: 50%; flex-grow: 0; }
.contact .content #map-container { position: relative; padding-top: 55.6%; }
.contact .content #map-container img { width: 100%; }
.contact .marker { width: 25px; height: 25px; border-radius: 99px; background-color: #3696FF; }
@media (max-width: 960px) { .contact { margin-top: 65px; }
  .contact .content { flex-direction: column; }
  .contact .content h2 { font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; } }
@media (max-width: 960px) and (max-width: 680px) { .contact .content h2 { letter-spacing: -0.01em; } }
@media (max-width: 960px) { .contact .content h2 { font-size: 42px; } }
@media screen and (max-width: 960px) and (min-width: 400px) { .contact .content h2 { font-size: calc(42px + 58 * ((100vw - 400px) / 800)); } }
@media screen and (max-width: 960px) and (min-width: 1200px) { .contact .content h2 { font-size: 100px; } }
@media (max-width: 960px) { .contact .info { flex-direction: column; margin-bottom: 20px; } }

.people p { font-family: graphik; font-style: normal; font-weight: normal; font-size: 18px; line-height: 1.4; display: none; }
.people p.active { display: block; }
.people .description { background-color: var(--mainColor); width: 0%; height: 0px; overflow: hidden; padding: 0px; position: relative; flex-wrap: wrap; }
.people .description.active { width: calc(100% - var(--siteMargin)*2); display: flex; padding: var(--siteMargin); min-height: 30vw; height: auto; }
.people .description.active + a { display: none; }
.people .description .img { height: calc(33vw - var(--siteMargin)); padding: 0px; width: calc(33vw - var(--siteMargin)); }
.people .description .text { width: calc(66% - var(--siteMargin)*2); margin: 0px var(--siteMargin); max-width: 600px; }
.people .description .text h4 { font-size: 1.5rem; margin: 0px; }
.people .description .text h5 { font-weight: 500; color: white; }
.people .img { width: 100%; padding-top: 100%; height: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.people .img-top { position: relative; z-index: 1; }
.people .people-thumbs { display: flex; flex-wrap: wrap; margin: -10px; }
.people .people-thumbs > a { width: calc(33.333% - 20px); margin: 10px; transition: width 400ms; position: relative; }
.people .people-thumbs .img-bottom { position: absolute; top: 0px; z-index: 0; }
.people .people-thumbs .img-top:hover { opacity: 0; }
.people .people-thumbs img { width: 100%; height: 30vw; }
.people .people-thumbs h4 { margin: 6px 0 12px; }
.people .people-thumbs span { opacity: 0; position: relative; left: -30px; transition: opacity 300ms, left 300ms; color: var(--mainColor); }
.people .people-thumbs svg path { stroke: var(--mainColor); }
.people .people-thumbs a:hover span { left: 0px; opacity: 1; }
.people .people-thumbs .before-active { transition: transform 300ms; transform: translateY(0px); }
.people .people-thumbs a.active .before-active { transform: translateY(-30vw); }
.people .people-thumbs a.active .description { opacity: 1; }
.people .people-thumbs a.active span { color: white; left: 0px; opacity: 1; }

.contact .flex h2 { margin: 0px; color: var(--mainColor); }
.contact .flex { margin-bottom: 80px; }
.contact .flex * > :not(h2) { font-family: graphik; font-style: normal; font-weight: normal; font-size: 18px; line-height: 1.4; }
.contact .locations li:hover { text-decoration: underline; cursor: default; }
.contact .contact-slideshow { position: relative; margin-bottom: 40px; }
.contact .contact-slideshow img { height: 800px; object-fit: cover; position: absolute; top: 0px; left: -30px; opacity: 0; transition: opacity 300ms, left 300ms; }
.contact .contact-slideshow img:first-child { position: static; opacity: 1; }
.contact .contact-slideshow img.visible1, .contact .contact-slideshow img.visible2 { opacity: 1; left: 0px; }

#philosophy { position: fixed; width: 100vw; height: 100vh; overflow: scroll; top: 0px; left: -110vw; background: #3696FF; z-index: 2; transition: left 300ms; }
#philosophy h1 { color: #fff; font-family: graphik-xcond; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin: 0; margin: 30px; padding-top: 100px; }
@media (max-width: 680px) { #philosophy h1 { letter-spacing: -0.01em; } }
#philosophy h1 { font-size: 60px; }
@media screen and (min-width: 400px) { #philosophy h1 { font-size: calc(60px + 100 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { #philosophy h1 { font-size: 160px; } }
@media (max-width: 680px) { #philosophy h1 { margin: var(--siteMargin); } }
#philosophy h3 { color: #fff; font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; position: absolute; right: calc(var(--siteMargin) + 50px); top: var(--siteMargin); margin: 0px; line-height: 45px; }
#philosophy h3 { font-size: 18px; }
@media screen and (min-width: 400px) { #philosophy h3 { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (min-width: 1200px) { #philosophy h3 { font-size: 24px; } }
@media (max-width: 680px) { #philosophy h3 { letter-spacing: -0.01em; } }
@media (max-width: 680px) { #philosophy h3 { display: none; } }

.view-philosophy #philosophy, .philosophy #philosophy { left: 0px; }
.view-philosophy #philosophy-toggle, .philosophy #philosophy-toggle { border: 2px solid white; }
.view-philosophy #philosophy-toggle span:first-child, .philosophy #philosophy-toggle span:first-child { background: white; }
.view-philosophy #philosophy-toggle span:last-child, .philosophy #philosophy-toggle span:last-child { background-color: #3696FF; }
.view-philosophy #philosophy h3, .philosophy #philosophy h3 { position: fixed; }

@media screen and (max-width: 900px) { #philosophy h1 { font-size: 100px; line-height: 1; } }
@media screen and (max-width: 680px) { :root { --siteMargin: 16px; }
  .hide-mobile { display: none; }
  .mobile-only { display: block; }
  .marquee { height: auto; }
  .marquee span { position: static; }
  #df-letters { display: none; }
  .nav #hamburger { display: flex; z-index: 2; }
  .nav:not(.menu-visible) #menu { transform: translateY(-100%); }
  #logo { line-height: 0.7; }
  .nav.menu-visible { background-color: #fff; }
  .nav.menu-visible #logo { color: var(--mainColor); }
  .nav.menu-visible #hamburger span { transform-origin: center; }
  .nav.menu-visible #hamburger span:first-child { transform: translateY(12px) rotate(45deg); }
  .nav.menu-visible #hamburger span:nth-child(2) { display: none; }
  .nav.menu-visible #hamburger span:last-child { transform: translateY(-12px) rotate(-45deg); }
  #menu { position: fixed; width: 100vw; background-color: #3696FF; overflow: scroll; z-index: 0; top: 0px; left: 0px; transition: transform 300ms; padding-top: 100px; padding-bottom: 20px; }
  #menu ul { display: block; }
  #menu ul li { font-family: graphik; font-weight: 300; letter-spacing: -0.02em; line-height: 1.333; margin-bottom: 10px; margin-left: var(--siteMargin); }
  #menu ul li { font-size: 18px; } }
@media screen and (max-width: 680px) and (min-width: 400px) { #menu ul li { font-size: calc(18px + 6 * ((100vw - 400px) / 800)); } }
@media screen and (max-width: 680px) and (min-width: 1200px) { #menu ul li { font-size: 24px; } }
@media screen and (max-width: 680px) and (max-width: 680px) { #menu ul li { letter-spacing: -0.01em; } }
@media screen and (max-width: 680px) { #menu ul li:last-child { margin-bottom: 0; }
  #menu ul li a { color: white; }
  #menu ul li a:hover::after { display: none; }
  #menu #philosophy-toggle { border: 0px; width: auto; height: auto; margin: 0px; border-radius: 0px; transform: none; }
  #menu #philosophy-toggle span { display: none; }
  #menu #philosophy-toggle:after { content: 'Philosophy'; display: block; color: white; }
  .view-philosophy #philosophy-toggle, .philosophy #philosophy-toggle { display: none; }
  .view-philosophy #hamburger span, .philosophy #hamburger span { background: black; }
  .view-philosophy #menu, .philosophy #menu { min-height: calc(100vh - 120px); }
  .thumbs-2-col { display: block; margin: 0px; }
  .thumb-large img, .thumb-md img { height: auto; }
  .thumb-md { margin: inherit; display: inline-block; }
  .thumbs-2-col > * { width: 100%; }
  .col-3 { display: flex; margin: 0px; align-items: flex-start; flex-wrap: wrap; }
  .col-3 > * { margin-left: 0; }
  .marquee span { white-space: inherit; animation: none; line-height: 0.9; }
  .work .thumbs-main { margin-top: 48px; }
  .work .thumbs-main a.thumb.thumb-md { margin-left: calc(var(--siteMargin)/2); width: calc(100% - var(--siteMargin)); margin-top: 0; }
  .thumb .thumb-title { opacity: 1; transform: translateX(0); padding-left: 10px !important; padding-bottom: 0 !important; margin-bottom: 8px !important; }
  .thumb + .thumb { margin-top: 30px; }
  .results .thumb:first-child img, .results .thumb:nth-child(2) img { height: auto; }
  .results .thumb + .thumb { margin-top: 0px; }
  .people .people-thumbs > a { width: calc(100% - 20px); }
  .capabilities { display: flex; flex-wrap: wrap; }
  .capabilities ul { margin-right: 10px; width: calc(50% - 10px); margin-bottom: 20px; }
  .about .accordion.open .accordion-open { display: block; }
  .about .accordion .accordion-open > div { width: auto; }
  .about .clients ul li img { width: calc(50% - var(--siteMargin)*); height: 100px; }
  .project .content > * { width: 100%; }
  .project .content .description h2 { margin-bottom: 0px; }
  .project .content .description h2.title { font-weight: 400; margin: 0px !important; }
  .project .images img { width: calc(100% - var(--siteMargin)); }
  .project .images .half { width: calc(100% - var(--siteMargin)); }
  .project .images div.half { width: 100%; padding-top: 65.56%; }
  form { position: static; }
  form #mce-EMAIL { opacity: 1; }
  .mc-field-group { margin-bottom: 10px; }
  .footer { display: block; }
  #logo img { width: 172px; }
  #philosophy h1 { font-size: 60px; }
  .prefooter { padding: 50px 38px; } }