body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}

h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 38px;
  line-height: 44px;
  font-weight: 700;
}

h2 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 700;
}

h3 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}

a {
  color: #000;
  text-decoration: underline;
}

.n--body {
  background-color: #e5e3de;
  font-family: Matter, sans-serif;
  color: #000;
  line-height: 1.28;
}

.n--wrapper {
  width: 94vw;
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
}

.nav {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 1000;
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #e5e3de;
}

.paragraph--m {
  font-size: 18px;
  line-height: 1.28;
}

.paragraph--m.n--grey-text {
  color: #6e6d6b;
  font-weight: 400;
}

.paragraph--m.n--grey-text.n--center {
  text-align: center;
}

.nav__wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.nav__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  grid-column-gap: 82px;
  grid-row-gap: 82px;
}

.nav__item.nav__item--menu {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.nav__item.nav__item--appear {
  opacity: 1;
}

.nav__link {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  color: #000;
  font-size: 18px;
  text-decoration: none;
}

.hero {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.heading--l {
  font-size: 66px;
  line-height: 1.2;
  font-weight: 400;
}

.hero__headline-wrapper {
  position: relative;
}

.hero__image {
  position: absolute;
  left: 101px;
  top: 4px;
  width: 66px;
  height: 66px;
  -webkit-transition: -webkit-transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
  transition: -webkit-transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
  transition: transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
  transition: transform 400ms cubic-bezier(.68, -.55, .265, 1.55), -webkit-transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
}

.hero__image:hover {
  -webkit-transform: scale(1.28);
  -ms-transform: scale(1.28);
  transform: scale(1.28);
}

.hero__image.hero__image-nav {
  position: static;
  width: 24px;
  height: 24px;
}

.hero__image.hero__image--small {
  position: relative;
  left: 0px;
  top: 0px;
  width: 24px;
  height: 24px;
}

.n--grey-text {
  color: #6e6d6b;
}

.nav__name {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.work {
  padding-bottom: 0px;
}

.work__video {
  overflow: hidden;
  height: auto;
  min-width: 502px;
  margin-bottom: 8px;
  border-radius: 12px;
}

.work__video.work__video--2 {
  max-width: 840px;
  min-width: 0px;
}

.work__video.work__video--3 {
  min-width: 780px;
}

.work__bg-video {
  position: relative;
  margin-top: -1px;
  margin-bottom: -2px;
}

.work__bg-video.work__bg-video--2 {
  margin-top: -12px;
}

.work__bg-video.work__bg-video--3 {
  margin-right: 0px;
  margin-left: 0px;
}

.work__project {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.work__project:hover {
  position: relative;
}

.work__project.work__project--2 {
  margin-top: 120px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.work__project.work__project--3 {
  margin-top: 120px;
}

.heading--m {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 400;
}

.work__link {
  display: block;
  -webkit-transition: -webkit-transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
  transition: -webkit-transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
  transition: transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
  transition: transform 400ms cubic-bezier(.68, -.55, .265, 1.55), -webkit-transform 400ms cubic-bezier(.68, -.55, .265, 1.55);
  text-decoration: none;
  cursor: pointer;
}

.work__link:hover {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
}

.work__link.work__link--locked {
  cursor: not-allowed;
}

.work__locked-img {
  width: 32px;
  height: 32px;
}

.work__locked {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.heading--s {
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 400;
}

.heading--s.n--grey-text {
  display: inline-block;
}

.hero__toggle {
  display: inline-block;
  padding: 12px 0px;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.hero__toggle.w--open {
  display: inline-block;
}

.hero__more-content {
  position: relative;
  display: none;
  overflow: hidden;
  background-color: #e5e3de;
}

.hero__more-content.w--open {
  z-index: 0;
  background-color: #e5e3de;
}

.hero__more {
  display: block;
}

.hero__toggle-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.hero__more-content--height {
  overflow: hidden;
  height: 0px;
}

.html-embed {
  width: 700px;
  height: 300px;
}

.work__text {
  margin-left: 12px;
}

.div-block {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.image {
  width: 100%;
  border-radius: 12px;
}

.image-2 {
  width: 100%;
}

.div-block-2 {
  border-radius: 24px;
  background-image: url('../images/case__mockup-1.jpg');
  background-position: 0px 0px;
  background-size: cover;
}

.footer {
  padding-top: 160px;
  padding-bottom: 24px;
}

.footer__grid {
  display: -ms-grid;
  display: grid;
  margin-bottom: 12px;
  grid-auto-columns: 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  -ms-grid-columns: 1fr minmax(360px, auto);
  grid-template-columns: 1fr minmax(360px, auto);
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.footer__item {
  padding: 24px;
  border-radius: 12px;
  background-color: #f4f3f1;
}

.footer__item.footer__item--low {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #edece8;
}

.footer__sub-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.footer__sub-wrapper.footer__sub-wrapper--first {
  margin-top: 0px;
}

.n--link-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.link-block {
  text-decoration: none;
}

.n--arrow.footer__arrow--small {
  width: 22px;
  height: 22px;
}

.n--arrow.n--arrow--mobile {
  display: none;
}

.footer__wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.n--link {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  text-decoration: none;
}

.hero__image-content {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  border-radius: 50%;
}

.hero__image-content.hero__image-content--2 {
  opacity: 0;
}

.hero__image-content.hero__image-content--3 {
  opacity: 0;
}

.hero__image-content.hero__image-content--4 {
  opacity: 0;
}

.hero__image-content.hero__image-content--5 {
  opacity: 0;
}

.hero__image-wrapper {
  position: relative;
  height: 66px;
}

.hero__image-wrapper.hero__image-wrapper--nav {
  height: 24px;
}

.case {
  margin-top: 160px;
  padding-bottom: 0px;
}

.case__top-grid {
  display: -ms-grid;
  display: grid;
  margin-bottom: 82px;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr minmax(auto, 64%);
  grid-template-columns: 1fr minmax(auto, 64%);
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.case__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
}

.case__item.case__item--2 {
  margin-top: 8px;
}

.case__item.case__item--no-margin {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.heading--xs {
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
}

.heading--xs.n--grey-text {
  display: inline-block;
}

.case__main {
  display: -ms-grid;
  display: grid;
  padding: 12px;
  grid-auto-columns: 1fr;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  border-radius: 12px;
  background-color: #f4f3f1;
}

.case__img {
  border-radius: 6px;
}

.case__grid {
  display: -ms-grid;
  display: grid;
  margin-top: 12px;
  grid-auto-columns: 1fr;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

.case__img-full {
  width: 100%;
  border-radius: 12px;
}

.case_video {
  overflow: hidden;
  height: 100%;
  min-width: 740px;
  border-radius: 12px;
}

.case_video.work__video--2 {
  max-width: 840px;
  min-width: 0px;
}

.case_video.work__video--3 {
  min-width: 780px;
}

.case__bg-video {
  position: relative;
  height: 101%;
  margin-top: -1px;
  margin-bottom: -4px;
}

.case__bg-video.work__bg-video--2 {
  margin-top: -12px;
}

.case__bg-video.work__bg-video--3 {
  margin-right: -3px;
  margin-left: -3px;
}

.case__big-img {
  margin-top: 12px;
  border-radius: 12px;
}

.navigation {
  background-color: #e5e3de;
}

.case__link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 82px;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.transition {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 999;
  display: none;
  width: 100vw;
  height: 100vh;
}

.transition-trigger {
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #e5e3de;
}

.div-block-3 {
  display: none;
}

.nav--lolink {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  text-decoration: none;
}

.imprint {
  padding-top: 160px;
}

.paragraph--s {
  margin-top: 18px;
  font-size: 16px;
}

.paragraph--s.n--grey-text {
  color: #6e6d6b;
}

.paragraph--s.n--grey-text.n--center {
  text-align: center;
}

.html-embed-2 {
  position: relative;
  width: 430px;
}

@media screen and (max-width: 991px) {
  .heading--l {
    font-size: 52px;
  }

  .hero__image {
    left: 81px;
    width: 52px;
    height: 52px;
  }

  .work__video {
    max-width: 502px;
  }

  .work__video.work__video--3 {
    width: 100%;
    max-width: 780px;
    min-width: 0px;
  }

  .work__project.work__project--2 {
    width: 100%;
  }

  .work__project.work__project--3 {
    width: 100%;
  }

  .work__link {
    width: 100%;
  }

  .footer__grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .hero__image-wrapper {
    height: 52px;
  }

  .case_video {
    width: 54vw;
    max-width: 740px;
    min-width: 0px;
  }
}

@media screen and (max-width: 767px) {
  .paragraph--m {
    font-size: 16px;
  }

  .paragraph--m.n--grey-text.paragraph--nav {
    display: none;
  }

  .heading--l {
    font-size: 42px;
  }

  .hero__image {
    left: 64px;
    top: 0px;
    width: 46px;
    height: 46px;
  }

  .work__video {
    height: 94vw;
    max-height: 494px;
    min-width: 0px;
  }

  .work__video.work__video--2 {
    height: auto;
    max-height: none;
    max-width: none;
  }

  .work__video.work__video--3 {
    height: 51vw;
    max-height: 325px;
    max-width: 570px;
  }

  .work__bg-video {
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }

  .heading--s {
    font-size: 24px;
  }

  .hero__toggle-wrapper {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .hero__toggle-img {
    height: 24px;
  }

  .hero__image-wrapper {
    height: 46px;
  }

  .case {
    padding-bottom: 0px;
  }

  .case__top-grid {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .case__item {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .heading--xs {
    font-size: 22px;
  }

  .case__main {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .case__grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .case_video {
    width: 100%;
    height: 64vw;
  }

  .work__img {
    border-radius: 12px;
  }

  .paragraph--s {
    font-size: 16px;
  }

  .paragraph--s.n--grey-text.paragraph--nav {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .nav__link {
    font-size: 16px;
  }

  .heading--l {
    font-size: 32px;
  }

  .hero__image {
    left: 49px;
    top: 1px;
    width: 32px;
    height: 32px;
  }

  .work__video.work__video--3 {
    height: 56vw;
    max-height: 340px;
  }

  .work__bg-video {
    overflow: hidden;
  }

  .heading--m {
    font-size: 26px;
  }

  .heading--s {
    font-size: 20px;
  }

  .hero__toggle-img {
    height: 20px;
  }

  .footer__item {
    padding: 12px;
  }

  .footer__item.footer__item--low {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .n--arrow {
    display: none;
    height: 32px;
  }

  .n--arrow.footer__arrow--small {
    display: block;
  }

  .n--arrow.n--arrow--mobile {
    display: block;
  }

  .hero__image-wrapper {
    height: 32px;
  }
}

#w-node-_9fcd7426-0cef-ddb1-e5cf-480e1554e657-2bdb6329 {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

#w-node-_2cfca1d8-7f73-c2e5-34e8-dc84b0a3bbaa-2bdb6329 {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

#w-node-e0270d1e-28d6-19f1-8efb-542b13e835c5-2bdb6329 {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

#w-node-_9fcd7426-0cef-ddb1-e5cf-480e1554e657-2bdb632a {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

#w-node-c776c7df-60f6-2314-366a-0d101ee8f69b-2bdb632a {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

#w-node-_6fe6daf1-7272-817b-5f89-c5049434c2b5-2bdb632a {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

#w-node-_45a41567-dcfa-4ae7-9378-d4a32c20a759-2bdb632a {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

#w-node-dab37635-660e-75c0-d7e8-7abf5d301dfb-2bdb632a {
  -ms-grid-column: span 1;
  grid-column-start: span 1;
  -ms-grid-column-span: 1;
  grid-column-end: span 1;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

@font-face {
  font-family: 'Matter';
  src: url('../fonts/Matter-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}