/*-------
VARIABLES
---------*/

:root {
  --white: #ffffff;
  --beige: #f9F9F9;
  --black: #000000;
  --grey: #5B5B5B;
  --grey-dark: #414141;
  --grey-darker: #323232;
  --grey-darkest: #212121;
  --grey-light: #888888;
  --grey-lighter: #AAAAAA;
  --grey-lightest: #F2F2F2;
  --light: var(--white);
  --dark: var(--grey-darkest);
  --primary: #0054ff;
  --primary-light: #1f69ff;
}

/*---
RESET
-----*/

html {
box-sizing: border-box;
scroll-behavior: smooth;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}

body {
min-height: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
}

*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
}


/*--------
TYPOGRAPHY
----------*/

@font-face {
font-family: 'DrukWide';
font-weight: 700;
font-display: swap;
src: local(''),
  url(/assets/fonts/DrukWide-BoldItalic.woff2) format('woff2'),
  url(/assets/fonts/DrukWide-BoldItalic.woff) format('woff');
}

body {
font-size: 100%;
line-height: 1.48;
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
font-family: 'DrukWide', sans-serif;
line-height: 1.24;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
display: block;
font-weight: 500;
font-family: 'Cormorant', serif;
}

.italic {
font-size: 1.25em;
font-weight: 500;
font-family: 'Cormorant', serif;
color: var(--primary);
}

.blue {
color: var(--primary);
}

p {
margin-bottom: 1rem;
}

.section__label {
position: absolute;
top: 0;
}

.section__label span {
  position: absolute;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--grey-light);
  font-size: 3.5rem;
}

.section__label[data-position='left'] {
  left: 0;
}

.section__label[data-position='left'] span {
    transform: rotate(-90deg) translate(-100%, -100%);
    transform-origin: 0 0;
}

.section__label[data-position='right'] {
right: 0;
}

.section__label[data-position='right'] span {
    transform: rotate(90deg) translate(0, -100%);
    transform-origin: 0 0;
}
.framedTitle {
margin-bottom: 2rem;
font-size: 2rem;
}

.framedTitle span {
  display: inline-block;
  padding: .25rem .75rem;
line-height: 1;
color: var(--light);
  background-color: var(--dark);
}


/*----
LAYOUT
------*/

.body {
display: flex;
      flex-direction: column;
}

.content {
flex: 1 0 auto;
}
  .footer {
flex: 0 0 auto;
  }

  .container {
  position: relative;
  width: 72rem;
  max-width: 96%;
  margin: 0 auto;
  }

.container--large {
  width: 80rem;
  }

      .flex {
  display: flex;
  flex-wrap: wrap;
      }

[class*="column"] {
  flex: 1 1 auto;
  margin: 0 1rem;
  }

.column--1  { flex: 0 0 calc(100% / 12 - 2rem); }
.column--2  { flex: 0 0 calc(100% / 6 - 2rem); }
.column--3  { flex: 0 0 calc(100% / 4 - 2rem); }
.column--4  { flex: 0 0 calc(100% / 3 - 2rem); }
.column--5  { flex: 0 0 calc((100% / 12) * 5 - 2rem); }
.column--6  { flex: 0 0 calc(100% / 2 - 2rem); }
.column--7  { flex: 0 0 calc((100% / 12) * 7 - 2rem); }
.column--8  { flex: 0 0 calc((100% / 12) * 8 - 2rem); }
.column--9  { flex: 0 0 calc((100% / 12) * 9 - 2rem); }
.column--10 { flex: 0 0 calc((100% / 12) * 10 - 2rem); }
.column--11 { flex: 0 0 calc((100% / 12) * 11 - 2rem); }
.column--12 { flex: 0 0 calc(100% - 2rem); }

.offset--1 { margin-left: calc(100% / 12); }


/*--------
COMPONENTS
----------*/
.header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
padding-top: 2rem;
background: transparent;
border-bottom: 1px solid rgba(255,255,255,.4);
transform: translateY(-2rem);
  }

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8rem;
  }

.header.is-stuck {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--light);
padding-top: 0;
transform: translateY(0);
transition:
  background 400ms cubic-bezier(0.37, 0, 0.63, 1),
  transform 400ms cubic-bezier(0.37, 0, 0.63, 1);
  }

.header.is-stuck .container {
  height: 6rem;
  }

.header__logo {
      display: none;
flex: 0 0 6rem;
margin-right: 6rem;
  }

.header__logo img {
  display: block;
  width: 6rem;
  }

.is-stuck .header__logo {
  display: block;
}
.nav {
flex: 1 1 auto;
display: flex;
justify-content: space-around;
}

.nav__item {
text-decoration: none;
text-transform: uppercase;
color: var(--light);
font-size: .8rem;
letter-spacing: .12rem;
}

.is-stuck .nav__item {
  color: var(--dark);
}

.nav__item a {
  color: var(--primary);
  text-decoration: none;
}

a.nav__item:hover,
.nav__item a:hover {
  color: var(--primary);
}

.is-stuck a.nav__item:hover,
.is-stuck .nav__item a:hover {
  color: var(--primary);
}

.nav__item a[disabled] {
color: var(--light);
cursor-event: none;
}

.is-stuck .nav__item a[disabled] {
  color: var(--dark);
}

.footer {
  padding: 6rem 0;
  color: var(--light);
  background-color: var(--black);
}

.footer a {
      color: var(--primary-light);
      text-decoration: none;
      font-weight: 600;
}

.footer .flex {
      align-items: center;
}

.footer__left {
  position: relative;
}

.footer__left .icon--pin {
      position: absolute;
      top: 0;
      right: 100%;
      margin-right: 1rem;
      display: block;
      width: 2rem;
      height: 2rem;
      fill: var(--light);
}

.footer__left strong {
      display: block;
      margin-bottom: .5rem;
}

.footer__right {
  text-align: right;
}

.footer__logos {
display: flex;
flex-direction: column;
align-items: center;
}

.social {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

.social__item {
  display: inline-block;
  margin: 2rem .75rem 1rem;
}

.social__link {
  display: inline-block;
}

.social__link .icon {
      width: 1.5rem;
      height: 1.5rem;
      fill: var(--light);
}

.social__link .icon--linkedin {
      position: relative;
      top: -.1rem;
}

.footer__small {
  display: block;
  margin-top: 4rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: var(--grey-light);
  font-size: .88rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  appearance: none;
  padding: 2rem 0;
  color: var(--light);
  border: 0;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1rem;
  transition:
      color 160ms cubic-bezier(0.37, 0, 0.63, 1),
      background 160ms cubic-bezier(0.37, 0, 0.63, 1);
}

.button:hover,
.button *:hover {
      cursor: pointer;
}

.button--outline {
  padding: 2rem 3rem;
  border: 1px solid currentColor;
}

.button--outline:hover {
      color: var(--primary);
      background-color: var(--light);
}

.button--block {
  display: block;
}

.button .icon--arrowRight {
  display: inline-block;
  margin-left: 3rem;
  width: 115px;
  min-width: 115px;
  height: 38px;
  fill: currentColor;
  transition: transform 160ms cubic-bezier(0.45, 0, 0.55, 1);
}

.button:hover .icon--arrowRight {
  transform: translateX(1rem);
}

.accordion__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
      max-height 400ms cubic-bezier(0.5, 1, 0.89, 1),
      opacity 400ms cubic-bezier(0.5, 1, 0.89, 1);
}

.accordion__panel[aria-hidden="false"] {
      max-height: 50rem;
      opacity: 1;
      transition-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
}

.accordion__trigger {
  appearance: none;
  background: none;
  border: none;
}

.accordion__trigger:hover {
      cursor: pointer;
}

.accordion__trigger:hover .icon {
          fill: var(--primary);
}

.accordion__trigger span {
      display: block;
      max-width: 12ch;
      margin: 0 auto .75rem;
      text-transform: uppercase;
      letter-spacing: .2rem;
      line-height: 1.6;
      font-size: .72rem;
      font-weight: 600;
}

.accordion__trigger .icon {
      width: 96px;
      height: 96px;
      transform-origin: center;
      transition:
          fill 160ms cubic-bezier(0.37, 0, 0.63, 1),
          transform 160ms cubic-bezier(0.37, 0, 0.63, 1);
}

.accordion__trigger[aria-expanded="true"] .icon {
      transform: rotate(45deg);
}

.svgSprite {
  display: none;
}

.icon {
  display: inline-block;
}

.animate-on-scroll > * {
      display: inline-block;
      opacity: 0;
      transform: translate(-3rem, 0);
      transition:
      opacity 640ms 400ms cubic-bezier(0.61, 1, 0.88, 1),
      transform 640ms 400ms cubic-bezier(0.61, 1, 0.88, 1);
      will-change: opacity, transform;
}

.animate-on-scroll > *:nth-child(2) { transition-delay: 600ms }
.animate-on-scroll > *:nth-child(3) { transition-delay: 800ms }
.animate-on-scroll > *:nth-child(4) { transition-delay: 1000ms }
.animate-on-scroll > *:nth-child(5) { transition-delay: 1200ms }
.animate-on-scroll > *:nth-child(6) { transition-delay: 1400ms }

.animate-on-scroll.is-visible > * {
      opacity: 1;
      transform: translate(0, 0);
}

.hamburger {
  padding: 15px 0 15px;
  display: none;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
          background-color: var(--primary);
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 2px;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
      width: 40px;
      height: 4px;
      background-color: var(--dark);
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
      content: "";
      display: block;
}

.hamburger-inner::before {
      top: 10px;
      transition-property: transform, opacity;
      transition-timing-function: ease;
      transition-duration: 0.15s;
}

.hamburger-inner::after {
      top: 20px;
}

.hamburger.is-active .hamburger-inner {
      transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger.is-active .hamburger-inner::before {
      transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
      opacity: 0;
}

.hamburger.is-active .hamburger-inner::after {
      transform: translate3d(0, -20px, 0) rotate(-90deg);
}


/*------
SECTIONS
--------*/

.section {
  scroll-margin: 6rem;
}

/* COVER */
.cover {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background: black url('assets/img/z0.jpg') no-repeat top center;
background-size: cover;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 1;
transition: opacity 400ms cubic-bezier(0.11, 0, 0.5, 0);
}

.cover.is-hidden {
  opacity: 0;
}

.cover__title {
margin: 6em auto 0;
transition:
  opacity 400ms cubic-bezier(0.12, 0, 0.39, 0),
  transform 400ms cubic-bezier(0.12, 0, 0.39, 0);
}

.cover__title img {
  width: 320px;
}

.is-hidden .cover__title {
  opacity: 0;
  transform: translateY(-2rem);
}

.cover__subtitle {
margin-top: .75rem;
font-size: 2rem;
transition:
  opacity 400ms cubic-bezier(0.12, 0, 0.39, 0),
  transform 400ms cubic-bezier(0.12, 0, 0.39, 0);
}

.cover__subtitle em {
  font-weight: 700;
  color: var(--light);
}

.is-hidden .cover__subtitle {
  opacity: 0;
  transform: translateY(-2rem);
}


/* INTRO */
.intro {
height: 160vh;
min-height: 48rem;
display: flex;
flex-direction: column;
justify-content: center;
background-color: black;
color: var(--light);
}

.intro__title {
margin: 8rem 0;
font-size: 2.25rem;
text-wrap: balance;
}

.intro__title.is-hidden {
  display: none;
}

.intro__title em {
  font-size: 3.2rem;
  display: inline;
  line-height: 1;
  color: var(--primary);
  font-weight: bold;
  white-space: nowrap;
}


/* MANIFESTO */
.manifesto {
padding: 4rem 0;
font-size: 1.25rem;
background-color: var(--grey-lightest);
}

/*.icon--arrowDown {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  width: 4rem;
  height: 4rem;
  margin-left: -2rem;
}*/

.manifesto .section__title {
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 3.5rem;
  font-style: italic;
  line-height: .88;
}

.manifesto .section__title em {
    display: block;
    color: var(--primary);
}

.manifesto .flex {
  justify-content: space-between;
  align-items: flex-end;
}

.manifesto .accordion__panel + .icon--more {
      display: block;
      margin: 1rem auto 0;
      width: 3rem;
      height: 3rem;
      opacity: 0;
      transition: opacity 120ms 240ms ease-in-out;
}

.manifesto .accordion__panel[aria-hidden="true"] + .icon--more {
      opacity: 1;
}


/* MODEL */
.model {
  padding: 5rem 0 3rem;
  font-size: 1.25rem;
  color: var(--light);
  background-color: var(--black);
}

.model-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding-inline: 1rem;
}

.model__item {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.model__item em {
      display: inline-block;
      padding: 0 .5rem;
      font-style: normal;
      color: var(--dark);
      background-color: var(--light);
}


/* PROJECTS */
.projects {
  padding-top: 2rem;
  background-color: var(--black);
}

.projects__item {
  align-items: stretch;
}

.projects__info {
  position: relative;
  z-index: 1;
  margin-right: 0;
  padding: 4rem 8rem 5rem 0;
  color: var(--light);
  background-color: var(--grey-darkest);
}

.projects__info::before {
      content: "";
      position: absolute;
      top: 0;
      right: 100%;
      bottom: 0;
      width: 50vw;
      background-color: var(--grey-darkest);
}

.projects__item--2 .projects__info,
.projects__item--2 .projects__info::before {
      background-color: var(--grey-darker);
}

.projects__item--3 .projects__info,
.projects__item--3 .projects__info::before {
      background-color: var(--grey-dark);
}

.projects__item--4 .projects__info,
.projects__item--4 .projects__info::before {
      background-color: var(--grey);
}

.projects__logo img {
      display: block;
      max-width: 16rem;
      margin-bottom: 2rem;
}

.projects__description {
  font-size: 1.25rem;
}

.projects__button {
  margin-top: 3rem;
}

.projects__picture {
  margin-left: 0;
  overflow: hidden;
}

.projects__picture img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
}


/* SLOGAN (The side scrolling message) */
@keyframes marquee {
0% {
  opacity: 0;
  transform: translateX(-50%);
}
4% {
  opacity: 1;
  transform: translateX(-48%);
}
96% {
  opacity: 1;
  transform: translateX(-2%);
}
100% {
  opacity: 0;
  transform: translateX(0);
}
}
.slogan {
  overflow: hidden;
  padding: 3rem 0;
}

.slogan h1 {
      transform: translateX(-50%);
      font-size: 3rem;
      white-space: nowrap;
      color: var(--primary);
}

.slogan h1.is-visible {
          animation-name: marquee;
          animation-duration: 20s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
}


/* CULTURE */
.culture {
padding: 6rem 0;
color: var(--light);
background-color: var(--black);
font-size: 1.25rem;
}

.culture__item {
margin-bottom: 2rem;
}

.culture__item:nth-of-type(2) .animate-on-scroll > * {
  transition-delay: 600ms;
}
.culture__item:nth-of-type(3) .animate-on-scroll > * {
  transition-delay: 800ms;
}
.culture__item:nth-of-type(4) .animate-on-scroll > * {
  transition-delay: 1000ms;
}

.culture__title {
font-style: italic;
font-size: 1.6rem;
margin: 2rem 0;
}

.culture__title strong {
  color: var(--primary);
}


/* TEAM */
.team {
padding: 6rem 0;
color: var(--dark);
background-color: var(--grey-lightest);
font-size: 1.25rem;
}

.team__item {
position: relative;
min-height: 160px;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
margin-right: 1.5rem;
display: flex;
align-items: stretch;
background-color: var(--light);
}

.team__item.accordion__trigger {
  padding: 2rem 0;
  justify-content: center;
  align-items: center;
  background-color: var(--beige);
}

.team__item.accordion__trigger:hover,
.team__item.accordion__trigger *:hover {
      cursor: pointer;
}

.team__item.accordion__trigger span {
      margin: 0;
      opacity: 1;
      text-align: right;
      transition: opacity 120ms 160ms cubic-bezier(0.37, 0, 0.63, 1);
}

.team__item.accordion__trigger .icon--plus {
      margin: 0 2rem;
}

.team__item.accordion__trigger[aria-expanded="true"] span {
          opacity: 0;
}

.team__portrait {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 160px;
display: block;
}

.team__portrait img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team__info {
padding: 0.5rem 1.5rem;
padding-left: calc(160px + 1.5rem);
display: flex;
flex-direction: column;
justify-content: center;
}

.team__name {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1.25rem;
margin-bottom: .25rem;
}

.team__title {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 1rem;
font-weight: 400;
}

.team__bio {
margin: .75rem 0 0 0;
font-size: 1rem;
}

.team__bio span {
  display: block;
}

.team__linkedin,
.team__url {
display: block;
margin-top: .25rem;
font-size: 1rem;
color: var(--primary);
text-decoration: none;
}

.team__linkedin:hover,
.team__url:hover {
  opacity: .72;
}

.team__sectionTitle {
  position: relative;
  margin: 1rem 0;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .1rem;
}

.team__sectionTitle span {
      position: relative;
      z-index: 1;
      display: inline-block;
      padding-right: 4rem;
      background: var(--grey-lightest);
}

.team__sectionTitle::after {
      content: '';
      position: absolute;
      z-index: 0;
      top: 50%;
      right: 0;
      left: 0;
      height: 1px;
      margin-top: -1px;
      background-color: var(--dark);
}


/* CTA SECTIONS */
.cta {
  padding: 2.5rem 0;
  background-color: var(--primary);
  color: var(--light);
}

.cta .flex {
      justify-content: space-between;
      align-items: center;
}

.cta__title {
  font-size: 2.25rem;
}

.cta__title span {
      display: block;
}

.cta__info {
  font-size: 1.25rem;
}

.cta__info .button {
      display: flex;
}

.cta__info .button .icon--arrowRight {
          margin-left: 6rem;
}


/*---
PAGES
-----*/

.jobs,
.proposals {
background-color: var(--grey-lightest);
}

.jobs .content,
.proposals .content {
  padding-top: 10rem;
  padding-bottom: 6rem;
}

.jobs .framedTitle,
.proposals .framedTitle {
  margin-top: 2rem;
}

.project {
background-color: var(--grey-lightest);
}

.project .content {
  padding-top: 6rem;
}

.project__cover {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
height: 56vh;
min-height: 24rem;
background-color: black;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}

.project__cover::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 33.3333%;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.8));
}

.project__title {
position: relative;
z-index: 1;
margin-bottom: 1rem;
padding: .5rem 1rem;
color: var(--light);
}

.project__title img {
    display: block;
    max-width: 16rem;
    margin-bottom: 2rem;
}

.project__content {
padding: 4rem 0;
}

.project__content img {
  display: block;
  max-width: 100%;
}

.project--wip .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 64vh;
  min-height: 56rem;
  background: black url('/assets/img/projects/projects_cover.jpg') no-repeat top center;
  background-size: cover;
}

@keyframes marqueeWip {
0% {
  opacity: 0;
  transform: translateX(0);
}
4% {
  opacity: 1;
  transform: translateX(-2%);
}
96% {
  opacity: 1;
  transform: translateX(-98%);
}
100% {
  opacity: 0;
  transform: translateX(-100%);
}
}

.marquee--wip {
display: block;
width: 100%;
font-family: 'DrukWide', sans-serif;
font-size: 32rem;
line-height: 1;
white-space: nowrap;
animation-name: marqueeWip;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.wip {
margin: 0 auto 3rem;
text-align: center;
}
.wip__title {
margin-bottom: 1rem;
padding: .5rem 1rem;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-size: 1.5rem;
font-weight: 400;
line-height: 1;
color: var(--light);
background-color: var(--black);
}
.wip__button {
margin: 0 auto;
justify-content: center;
}


/*---
CARDS
-----*/

.card {
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--grey-lighter);
}

.card__project {
margin-bottom: 1rem;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-size: 1.75rem;
text-transform: uppercase;
}

.card__meta {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1.5rem 0 1.75rem;
}

.card__location,
.card__contract {
flex: 0 0 auto;
display: flex;
align-items: center;
}

.card__location .icon,
.card__contract .icon {
  height: 1.5rem;
  margin-right: .25rem;
}

.card__title {
margin-bottom: 0;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-size: 1.15rem;
text-transform: uppercase;
}

.card__button {
padding-bottom: .5rem;
color: var(--dark);
}

.card__button:hover {
  color: var(--primary);
}


/* MEDIA QUERIES */
/* REALLY WIDE SCREENS */
@media (min-width: 80.0625rem) {
  .intro__title {
      margin-left: 0;
      margin-right: 0;
  }

  .intro__title span {
          display: block;
  }

  .model-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* REGULAR DESKTOPS */
@media (max-width: 80rem) {

  .container {
      width: 64rem;
      max-width: 84%;
  }
  .container--large {
      width: 72rem;
      max-width: 88%;
  }

  .intro .animate-on-scroll > * {
      display: inline;
  }

  .projects__info {
      padding-right: 2rem;
  }

  .column--lg-6  { flex: 0 0 calc(100% / 2 - 2rem); }
  .column--lg-12 { flex: 0 0 calc(100% - 2rem); }

  .card__meta {
    display: block;
  }

  .card__location {
    margin-bottom: .25rem;
  }
}

/* SMALL DESKTOPS */
@media (max-width: 63.9375rem) {

  .container--large {
      width: 72rem;
      max-width: 80%;
  }

  [class*="offset"] {
      margin-left: 1rem;
  }

  .column--md-6  { flex: 0 0 calc(100% / 2 - 2rem); }
  .column--md-12 { flex: 0 0 calc(100% - 2rem); }

  .accordion__panel[aria-hidden=false] {
      max-height: initial;
  }

  .projects__info {
      margin: 0;
      padding: 3rem 2rem 1.5rem 1rem;
  }

  .projects__button {
      margin-top: 0;
  }

  .team__item {
      margin: 1rem;
  }

  .cta__info .button .icon--arrowRight {
          margin-left: 3rem;
  }
}

/* TABLETS */
@media (max-width: 59.9375rem) {
  .section__label {
      position: static;
      padding: 2.5rem;
  }

  .container .section__label {
          padding: 2.5rem 1rem;
  }

  .section__label span {
          position: static;
          transform: none !important;
  }

  .container {
      width: 100%;
      max-width: 96%;
      max-width: calc(100% - 3rem);
  }

  .column--sm-6  { flex: 0 0 calc(100% / 2 - 2rem); }
  .column--sm-12 { flex: 0 0 calc(100% - 2rem); }
  .header,
  .header.is-stuck {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--light);
      padding-top: 0;
      transform: none;
      transition: none;
  }

  .header .container,
  .header.is-stuck .container {
          height: 5rem;
  }

  .header__logo {
      display: block;
  }

  .nav {
      position: fixed;
      z-index: 2;
      top: 5rem;
      right: 0;
      bottom: 0;
      left: 0;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      background-color: rgba(0,0,0,.88);
      opacity: 0;
      pointer-events: none;
      transition: opacity 400ms cubic-bezier(0.37, 0, 0.63, 1);
  }

  .nav.is-visible {
          opacity: 1;
          pointer-events: initial;
  }

  .nav__item.nav__item {
      color: var(--light);
      font-size: 2.5rem;
      padding: 1rem 1.5rem;
      text-align: right;
      transition:
          opacity 200ms 200ms cubic-bezier(0.5, 1, 0.89, 1),
          transform 200ms 200ms cubic-bezier(0.5, 1, 0.89, 1);
      opacity: 0;
      transform: translateX(2rem);
  }

  .nav.is-visible .nav__item.nav__item {
          opacity: 1;
          transform: translateX(0);
  }

  .nav.is-visible .nav__item.nav__item:nth-of-type(2) { transition-delay: 300ms; }
  .nav.is-visible .nav__item.nav__item:nth-of-type(3) { transition-delay: 400ms; }
  .nav.is-visible .nav__item.nav__item:nth-of-type(4) { transition-delay: 500ms; }
  .nav.is-visible .nav__item.nav__item:nth-of-type(5) { transition-delay: 600ms; }
  .nav.is-visible .nav__item.nav__item:nth-of-type(6) { transition-delay: 700ms; }

  .footer {
      padding: 4rem 0;
  }

  .footer__left .icon--pin {
          display: none;
  }

  .button .icon--arrowRight {
      margin-left: .5rem;
  }
  .hamburger {
      display: block;
  }

  .section {
      scroll-margin: 5rem;
  }

  .cover__title img {
      width: 16rem;
      max-width: 100%;
  }

  .cover__subtitle {
      font-size: 1.8rem;
  }

  .intro__title {
      margin: 0;
      font-size: 2.5rem;
  }

  .intro__title em {
          font-size: 3.75rem;
          line-height: 1;
  }

  .model-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .manifesto,
  .projects--1,
  .culture,
  .team {
      padding-top: 1rem;
  }

  .projects--1 .section__label {
      padding-left: 2.5rem;
  }

  .projects__item {
      flex-direction: column;
      max-width: 100%;
  }

  .projects__info {
      margin: 0;
      padding: 3rem 2.5rem 1rem;
  }

  .projects__picture {
      margin: 0;
  }

  .projects__button {
      margin-top: 0;
  }

  .culture__item .animate-on-scroll > * {
      transition-delay: initial !important;
  }

  .team > .flex {
      flex-direction: column;
      align-items: stretch;
  }

  .cta .flex {
      flex-direction: column;
      align-items: stretch;
  }

  .cta__info .button .icon--arrowRight {
          margin-left: 1rem;
  }

  .project--wip .content {
    height: 50vh;
    min-height: 48rem;
  }

  .marquee--wip {
    font-size: 24rem;
  }
}

/* PHONES */
@media (max-width: 39.9375rem) {

  .section__label,
  .container .section__label {
      padding: 2rem 0;
  }

  .section__label span,
  .container .section__label span {
          font-size: 2.75rem;
  }

  .container {
      width: auto;
      max-width: 96%;
      max-width: calc(100% - 2rem);
  }

  [class*="column"] {
      margin: 0;
  }

  .intro__title {
      font-size: 1.8rem;
  }

  .intro__title em {
          font-size: 2.8rem;
  }

  .manifesto .section__title {
      font-size: 2.5rem;
      line-height: 1;
  }

  .model-container {
    grid-template-columns: 1fr;
  }

  .projects__item {
    max-width: 100%;
  }

  .projects__info {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .projects__button .icon--arrowRight {
          display: block;
          margin-left: 2rem;
  }

  .cta__title {
      margin-bottom: .5rem;
      font-size: 1.7rem;
  }

  .cta__title span {
          display: block;
  }

  .cta__info {
      font-size: 1rem;
  }

  .cta__info .button {
          display: block;
          text-align: center;
  }

  .slogan h1.is-visible {
      animation-duration: 10s;
  }

  .team__item {
      min-height: 120px;
      margin: 1rem 0;
  }

  .team__portrait {
      width: 120px;
  }

  .team__info {
    padding-left: calc(120px + 1.5rem);
  }

  .project--wip .content {
    height: 40vh;
    min-height: 40rem;
  }

  .marquee--wip {
    font-size: 16rem;
  }

  .footer {
      padding: 2rem 0;
  }

  .footer .flex {
          flex-direction: column;
          justify-content: center;
  }

  .footer__left {
      text-align: center;
  }

  .footer__right {
      margin-top: 4rem;
      text-align: center;
  }

  .social {
      text-align: center;
      padding-right: 0;
      justify-content: center;
  }

  .footer__small {
      margin-top: 2rem;
  }

  .button .icon--arrowRight {
      display: none;
  }

  .button--outline {
      padding: 1.5rem 1rem;
  }
}