:root {
  --colour-1: #131217;
  --typeface: Onest, sans-serif;
  --colour-3: #999;
  --fontsize-desktop: 18px;
  --fontsize-1440: 22px;
  --fontsize-mobile: 16px;
  --margin-desktop-m: 100px;
  --margin-desktop-s: 50px;
  --margin-1440-m: 150px;
  --margin-1440-s: 75px;
  --margin-mobile-l: 100px;
  --margin-mobile-m: 50px;
  --margin-mobile-s: 25px;
  --colour-4: white;
  --colour-2: #07f472;
  --margin-desktop-l: 200px;
  --margin-1440-l: 300px;
  --colour-6: #9a68f1;
  --colour-5: #2e2e2e;
  --colour-7: #35be73;
}

body {
  background-color: var(--colour-1);
  font-family: var(--typeface);
  color: var(--colour-3);
  font-size: var(--fontsize-desktop);
  font-weight: 400;
  line-height: 1.75em;
}

a {
  text-decoration: underline;
}

.hero {
  justify-content: space-between;
  align-items: stretch;
  max-width: 1920px;
  height: 100vh;
  max-height: 100vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.hero-left {
  padding: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.hero-right {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: row;
  width: 50%;
  padding-right: 2em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.title-small {
  color: var(--colour-4);
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.33em;
  font-weight: 400;
  line-height: 1.33em;
}

.caption-small {
  font-weight: 700;
  line-height: 1.3em;
}

.caption-small.green {
  color: var(--colour-2);
}

.paragraph-small {
  margin-bottom: 0;
}

.stack-vertical-small {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.button {
  z-index: 2;
  border: 2px solid var(--colour-2);
  background-color: var(--colour-1);
  color: #fff;
  cursor: pointer;
  border-radius: 100px;
  flex: none;
  align-items: flex-start;
  padding: .7em 1.1em;
  text-decoration: none;
  transition: box-shadow 1s cubic-bezier(.165, .84, .44, 1), border-color 1s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 3px #00000040;
}

.button:hover {
  border-color: #9a68f1;
  box-shadow: 0 7px 10px #00000059;
}

.hero-work-thumbnails {
  flex-flow: column;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  display: flex;
}

.hero-work-thumbnail-frame {
  border-radius: 1em;
  flex: none;
  margin-bottom: 1em;
  overflow: hidden;
}

.services {
  padding-top: var(--margin-desktop-l);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: column;
  align-items: stretch;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}

.title-large {
  color: var(--colour-4);
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.33em;
  font-weight: 400;
  line-height: 1.25em;
  display: flex;
}

.services-columns {
  padding-right: var(--margin-desktop-m);
  padding-left: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  display: flex;
}

.services-column {
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  flex-flow: column;
  flex: 1;
  display: flex;
}

.services-icon {
  width: 80px;
  height: 80px;
}

.expertise {
  padding-top: var(--margin-desktop-l);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: column;
  align-items: stretch;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}

.title-medium {
  color: var(--colour-4);
  letter-spacing: -.01em;
  margin-bottom: 0;
  font-size: 1.7em;
  line-height: 1.6em;
}

.client-logo-image {
  opacity: .75;
  width: 120px;
}

.client-logos-stack {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex: none;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
}

.logo-slider {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: hidden;
}

.grad-logos {
  background-image: linear-gradient(90deg, var(--colour-1), #13121700 30%, #13121700 70%, var(--colour-1));
  width: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.client-logos-stack-x2 {
  flex: none;
  display: flex;
}

.hero-work-thumbnail-image {
  filter: none;
}

.hero-work-thumbnails-x2 {
  flex-flow: column;
  flex: none;
  align-items: flex-start;
  display: flex;
}

.hero-work-slider {
  z-index: 1;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.grad-hero {
  z-index: 2;
  background-image: linear-gradient(180deg, var(--colour-1), #13121700 30%, #13121700 70%, var(--colour-1));
  width: 100%;
  position: absolute;
  inset: 0%;
}

.work-card {
  padding-top: var(--margin-desktop-m);
  padding-bottom: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: column;
  display: flex;
  position: relative;
}

.work-card-block {
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.work-cards {
  flex-flow: column;
  display: flex;
}

.work-hero-image-wrapper {
  z-index: 1;
  opacity: 0;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  height: 10%;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: 0%;
  overflow: hidden;
}

.work-hero-image {
  width: 100%;
}

.navigation-home {
  z-index: 10;
  background-color: var(--colour-1);
  flex-flow: row;
  justify-content: center;
  align-items: stretch;
  height: 60px;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
  overflow: visible;
}

.navigation-link {
  border-top: 2px solid var(--colour-1);
  border-bottom: 2px solid var(--colour-1);
  color: var(--colour-3);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: color .5s, border-color .5s;
  display: flex;
  position: relative;
}

.navigation-link:hover, .navigation-link.w--current {
  color: var(--colour-4);
}

.navigation-link.getintouch {
  color: var(--colour-2);
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.navigation-link.getintouch:hover {
  color: var(--colour-6);
}

.navigation-anchors {
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.work {
  padding-top: var(--margin-desktop-l);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: column;
  align-items: stretch;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}

.work.subpage {
  padding-top: var(--margin-desktop-m);
}

.footer {
  padding: var(--margin-desktop-l) var(--margin-desktop-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}

.navigation-inside {
  flex: 1;
  justify-content: center;
  align-items: stretch;
  max-width: 1920px;
  display: flex;
  position: relative;
}

.navigation-gradient {
  z-index: 9;
  pointer-events: none;
  background-image: linear-gradient(#0003, #0000);
  width: 100%;
  height: 60px;
  position: absolute;
  inset: auto 0% 0%;
  transform: translate(0, 100%);
}

.paragraph-large {
  letter-spacing: -.015em;
  margin-bottom: 0;
  font-size: 1.7em;
  line-height: 1.6em;
}

.stack-vertical-medium {
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.tag-wrapper {
  flex: none;
  display: flex;
}

.work-title {
  z-index: 2;
  margin-left: var(--margin-desktop-m);
  position: relative;
}

.work-detail-intro-text {
  margin-right: var(--margin-desktop-m);
  margin-left: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: row;
  align-items: flex-start;
  display: flex;
}

.work-detail-left {
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.work-detail-title {
  z-index: 2;
  position: relative;
}

.work-detail-intro-right {
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  flex-flow: column;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.work-detail-intro {
  padding-top: var(--margin-desktop-l);
  padding-bottom: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: column;
  align-items: stretch;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}

.work-detail-main-image {
  aspect-ratio: 2;
  pointer-events: none;
  object-fit: cover;
  width: 100%;
}

.work-detail-process {
  padding: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.work-detail-process-steps {
  border-bottom: 1px solid var(--colour-5);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.work-detail-process-step {
  padding-top: var(--margin-desktop-s);
  padding-bottom: var(--margin-desktop-s);
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  border-top: 1px solid var(--colour-5);
  flex-flow: row;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.work-detail-process-right {
  width: 75%;
}

.work-detail-design {
  padding: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  flex-flow: column;
  align-items: stretch;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.device-phone {
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
  container-type: inline-size;
}

.slider-desktop-slide {
  width: 100%;
  height: auto;
  margin-right: 30px;
}

.slider-desktop-mask {
  width: 100%;
  height: auto;
  overflow: visible;
}

.slider-desktop-arrow-left {
  border: 2px solid var(--colour-4);
  background-color: var(--colour-1);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: border-color 1s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  inset: 0% auto 0% 0%;
  transform: translate(-150%);
  box-shadow: 0 10px 20px #0000001a;
}

.slider-desktop-arrow-left:hover {
  border-color: var(--colour-6);
}

.slider-desktop-arrow-right {
  border: 2px solid var(--colour-4);
  background-color: var(--colour-1);
  color: var(--colour-4);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: border-color 1s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  inset: 0% 0% 0% auto;
  transform: translate(150%);
  box-shadow: 0 10px 20px #0000001a;
}

.slider-desktop-arrow-right:hover {
  border-color: var(--colour-6);
}

.slider-nav {
  justify-content: center;
  align-items: stretch;
  display: none;
  inset: 0% 40% auto;
}

.work-detail-image-fullwidth {
  display: block;
}

.work-detail-image-fullwidth-image {
  width: 100%;
}

.seperator {
  background-color: var(--colour-5);
  width: 100%;
  height: 2px;
}

.work-detail-main-image-wrapper {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.work-right-tags {
  margin-right: var(--margin-desktop-m);
  grid-column-gap: 1.5em;
  grid-row-gap: .5em;
  color: var(--colour-3);
  flex-flow: wrap;
  align-items: flex-start;
  display: flex;
}

.device-phone-image {
  z-index: 2;
  pointer-events: none;
  border-radius: 10cqw;
  position: relative;
}

.device-phone-frame {
  z-index: 1;
  border-top-style: solid;
  border-top-color: var(--colour-5);
  border-right-style: solid;
  border-right-color: var(--colour-5);
  border-bottom-style: solid;
  border-bottom-color: var(--colour-5);
  border-left-style: solid;
  border-left-color: var(--colour-5);
  background-color: #000;
  border-width: 1cqw;
  border-radius: 14cqw;
  position: absolute;
  inset: -4cqw;
  box-shadow: 0 2vw 3vw #00000080;
}

.nda {
  padding: var(--margin-desktop-s);
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  border-radius: var(--fontsize-desktop);
  background-color: var(--colour-6);
  background-image: url('../images/unify-1.webp');
  background-position: 50%;
  background-size: cover;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.slider-arrow-icon {
  width: 50%;
  height: 50%;
}

.device-desktop {
  pointer-events: none;
  flex: none;
  width: 100%;
  position: relative;
  container-type: inline-size;
}

.device-desktop-image {
  z-index: 2;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--colour-5);
  border-bottom-right-radius: 1.8cqw;
  border-bottom-left-radius: 1.8cqw;
  position: relative;
}

.device-desktop-frame {
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--colour-5);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--colour-5);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--colour-5);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--colour-5);
  background-color: var(--colour-1);
  border-radius: 2cqw;
  position: absolute;
  inset: -4cqw -.2cqw -.2cqw;
  box-shadow: 0 20px 40px #0003;
}

.device-desktop-controls {
  z-index: 2;
  grid-column-gap: 1cqw;
  grid-row-gap: 1cqw;
  justify-content: flex-end;
  height: 1.5cqw;
  display: flex;
  position: absolute;
  inset: -2.75cqw 1.5cqw auto auto;
}

.device-desktop-control {
  aspect-ratio: 1;
  background-color: var(--colour-5);
  border-radius: 100px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-desktop {
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
  position: static;
}

.slider-mobile {
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: auto;
  display: flex;
  position: static;
}

.slider-mobile-mask {
  width: 100%;
  height: auto;
  overflow: visible;
}

.slider-mobile-slide {
  width: 100%;
  height: auto;
  margin-right: 60px;
}

.slider-mobile-arrow-left {
  border: 2px solid var(--colour-4);
  background-color: var(--colour-1);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: border-color 1s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  inset: 0% auto 0% 0%;
  transform: translate(-150%);
  box-shadow: 0 10px 20px #0000001a;
}

.slider-mobile-arrow-left:hover {
  border-color: var(--colour-6);
}

.slider-mobile-arrow-right {
  border: 2px solid var(--colour-4);
  background-color: var(--colour-1);
  color: var(--colour-4);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: border-color 1s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  inset: 0% 0% 0% auto;
  transform: translate(150%);
  box-shadow: 0 10px 20px #0000001a;
}

.slider-mobile-arrow-right:hover {
  border-color: var(--colour-6);
}

.slider-mobile-wrapper, .slider-desktop-wrapper {
  position: relative;
}

.list {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 1em;
  display: flex;
}

.slider-image {
  width: 100%;
}

.div-block {
  margin-right: auto;
}

.button-workcard {
  z-index: 2;
  margin-left: var(--margin-desktop-m);
  border: 2px solid var(--colour-2);
  background-color: var(--colour-1);
  color: #fff;
  cursor: pointer;
  border-radius: 100px;
  padding: .7em 1.1em;
  text-decoration: none;
  transition: box-shadow 1s cubic-bezier(.165, .84, .44, 1), border-color 1s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 3px #00000040;
}

.button-workcard:hover {
  border-color: #9a68f1;
  box-shadow: 0 7px 10px #00000059;
}

.text-group {
  padding-right: var(--margin-desktop-m);
  padding-left: var(--margin-desktop-m);
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.work-right-description {
  margin-right: var(--margin-desktop-m);
}

.work-card-blocks {
  grid-column-gap: var(--margin-desktop-m);
  grid-row-gap: var(--margin-desktop-m);
  display: flex;
}

.work-card-seperator-top {
  margin-right: var(--margin-desktop-m);
  margin-left: var(--margin-desktop-m);
  background-color: var(--colour-5);
  height: 1px;
  position: absolute;
  inset: 0% 0% auto;
}

.work-card-seperator-bottom {
  margin-right: var(--margin-desktop-m);
  margin-left: var(--margin-desktop-m);
  background-color: var(--colour-5);
  height: 1px;
  position: absolute;
  inset: auto 0% 0%;
}

.work-detail-tags {
  grid-column-gap: 1.5em;
  grid-row-gap: .5em;
  color: var(--colour-3);
  flex-flow: wrap;
  align-items: flex-start;
  display: flex;
}

.navigation-anchor {
  border-top: 2px solid var(--colour-1);
  border-bottom: 2px solid var(--colour-1);
  color: var(--colour-3);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: color .5s, border-color .5s;
  display: flex;
  position: relative;
}

.navigation-anchor:hover {
  color: var(--colour-4);
}

.navigation-anchor.w--current {
  border-bottom-color: var(--colour-2);
  color: var(--colour-4);
}

.navigation-links {
  grid-column-gap: var(--margin-desktop-s);
  grid-row-gap: var(--margin-desktop-s);
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

@media screen and (min-width: 1440px) {
  body {
    font-size: var(--fontsize-1440);
  }

  .hero-left {
    padding: var(--margin-1440-m);
    grid-column-gap: var(--margin-1440-s);
    grid-row-gap: var(--margin-1440-s);
  }

  .services {
    padding-top: var(--margin-1440-l);
    grid-column-gap: var(--margin-1440-m);
    grid-row-gap: var(--margin-1440-m);
  }

  .services-columns {
    padding-right: var(--margin-1440-m);
    padding-left: var(--margin-1440-m);
    grid-column-gap: var(--margin-1440-m);
    grid-row-gap: var(--margin-1440-m);
  }

  .services-column {
    grid-column-gap: var(--margin-1440-s);
    grid-row-gap: var(--margin-1440-s);
  }

  .expertise {
    padding-top: var(--margin-1440-l);
    grid-column-gap: var(--margin-1440-m);
    grid-row-gap: var(--margin-1440-m);
  }

  .work-card {
    padding-top: var(--margin-1440-m);
    padding-bottom: var(--margin-1440-m);
    grid-column-gap: var(--margin-1440-m);
    grid-row-gap: var(--margin-1440-m);
  }

  .work-card-block, .navigation-anchors {
    grid-column-gap: var(--margin-1440-s);
    grid-row-gap: var(--margin-1440-s);
  }

  .work {
    padding-top: var(--margin-1440-l);
  }

  .work.subpage {
    padding-top: var(--margin-1440-m);
  }

  .footer {
    padding: var(--margin-1440-l) var(--margin-1440-m);
  }

  .stack-vertical-medium {
    grid-column-gap: var(--margin-1440-s);
    grid-row-gap: var(--margin-1440-s);
  }

  .work-title {
    margin-left: var(--margin-1440-m);
  }

  .work-detail-intro-text {
    grid-column-gap: var(--margin-1440-m);
    grid-row-gap: var(--margin-1440-m);
  }

  .work-detail-intro-right {
    grid-column-gap: var(--margin-1440-s);
    grid-row-gap: var(--margin-1440-s);
  }

  .work-detail-intro {
    padding-top: var(--margin-1440-l);
    padding-bottom: var(--margin-1440-m);
  }

  .work-detail-process {
    padding: var(--margin-1440-m);
    grid-column-gap: var(--margin-1440-m);
    grid-row-gap: var(--margin-1440-m);
  }

  .work-detail-process-step {
    padding-top: var(--margin-1440-s);
    padding-bottom: var(--margin-1440-s);
    grid-column-gap: var(--margin-1440-s);
    grid-row-gap: var(--margin-1440-s);
  }

  .work-detail-design {
    padding: var(--margin-1440-m);
  }

  .work-right-tags {
    margin-right: var(--margin-1440-m);
  }

  .slider-mobile {
    width: 300px;
  }

  .slider-mobile-slide {
    margin-right: 80px;
  }

  .button-workcard {
    margin-left: var(--margin-1440-m);
  }

  .text-group {
    padding-right: var(--margin-1440-m);
    padding-left: var(--margin-1440-m);
    grid-column-gap: var(--margin-1440-s);
    grid-row-gap: var(--margin-1440-s);
  }

  .work-right-description {
    margin-right: var(--margin-1440-m);
  }

  .work-card-blocks {
    grid-column-gap: var(--margin-1440-m);
    grid-row-gap: var(--margin-1440-m);
  }

  .work-card-seperator-top, .work-card-seperator-bottom {
    margin-right: var(--margin-1440-m);
    margin-left: var(--margin-1440-m);
  }
}

@media screen and (max-width: 991px) {
  .hero {
    flex-flow: column;
    height: auto;
    max-height: 1000vw;
  }

  .hero-left {
    width: 100%;
  }

  .hero-right {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100vw;
    padding-left: 1em;
    padding-right: 1em;
  }

  .services-columns {
    flex-flow: column;
  }

  .work-hero-image-wrapper {
    margin-right: var(--margin-desktop-m);
    margin-left: var(--margin-desktop-m);
    aspect-ratio: 16 / 9;
    opacity: 100;
    justify-content: flex-start;
    align-items: flex-end;
    position: static;
  }

  .work-hero-image {
    width: 150%;
    max-width: 200%;
  }

  .navigation-anchors {
    display: none;
  }

  .work-title {
    margin-right: var(--margin-desktop-m);
  }

  .work-detail-intro-text {
    grid-column-gap: var(--margin-desktop-s);
    grid-row-gap: var(--margin-desktop-s);
    flex-flow: column;
  }

  .work-detail-left, .work-detail-intro-right {
    width: 100%;
  }

  .slider-desktop-arrow-right {
    width: 60px;
    height: 60px;
  }

  .work-right-tags {
    margin-left: var(--margin-desktop-m);
  }

  .slider-mobile {
    width: 200px;
  }

  .slider-mobile-slide {
    margin-right: 30px;
  }

  .slider-mobile-arrow-right {
    width: 60px;
    height: 60px;
  }

  .work-right-description {
    margin-left: var(--margin-desktop-m);
  }

  .work-card-blocks {
    flex-flow: column;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: var(--fontsize-mobile);
  }

  .hero-left {
    padding: var(--margin-mobile-l) var(--margin-mobile-m) var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .services {
    padding-top: var(--margin-mobile-l);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .title-large {
    font-size: 3em;
  }

  .services-columns {
    padding-right: var(--margin-mobile-m);
    padding-left: var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .services-column {
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .services-icon {
    width: 60px;
    height: 60px;
  }

  .expertise {
    padding-top: var(--margin-mobile-l);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .client-logo-image {
    width: 80px;
  }

  .work-card {
    padding-top: var(--margin-mobile-m);
    padding-bottom: var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .work-card-block {
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .work-hero-image-wrapper {
    margin-right: var(--margin-mobile-m);
    margin-left: var(--margin-mobile-m);
  }

  .navigation-home {
    height: 50px;
  }

  .navigation-anchors {
    display: none;
  }

  .work {
    padding-top: var(--margin-mobile-l);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .work.subpage {
    padding-top: var(--margin-mobile-m);
  }

  .footer {
    padding: var(--margin-mobile-l) var(--margin-mobile-m);
  }

  .paragraph-large {
    font-size: 1.5em;
  }

  .stack-vertical-medium {
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .work-title {
    margin-right: var(--margin-mobile-m);
    margin-left: var(--margin-mobile-m);
  }

  .work-detail-intro-text {
    margin-right: var(--margin-mobile-m);
    margin-left: var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .work-detail-intro-right {
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .work-detail-intro {
    padding-top: var(--margin-mobile-l);
    padding-bottom: var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .work-detail-process {
    padding: var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .work-detail-process-step {
    padding-top: var(--margin-mobile-s);
    padding-bottom: var(--margin-mobile-s);
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
    flex-flow: column;
  }

  .work-detail-process-right {
    width: 100%;
  }

  .work-detail-design {
    padding: var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .slider-desktop-slide {
    margin-right: 15px;
  }

  .slider-desktop-arrow-left {
    width: 40px;
    height: 40px;
    transform: translate(-50%);
  }

  .slider-desktop-arrow-right {
    width: 40px;
    height: 40px;
    transform: translate(50%);
  }

  .work-right-tags {
    margin-right: var(--margin-mobile-m);
    margin-left: var(--margin-mobile-m);
  }

  .nda {
    padding: var(--margin-mobile-s);
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .slider-mobile {
    width: 160px;
  }

  .slider-mobile-arrow-left {
    width: 40px;
    height: 40px;
    transform: translate(-50%);
  }

  .slider-mobile-arrow-right {
    width: 40px;
    height: 40px;
    transform: translate(50%);
  }

  .button-workcard {
    margin-left: var(--margin-mobile-m);
  }

  .text-group {
    padding-right: var(--margin-mobile-m);
    padding-left: var(--margin-mobile-m);
    grid-column-gap: var(--margin-mobile-s);
    grid-row-gap: var(--margin-mobile-s);
  }

  .work-right-description {
    margin-right: var(--margin-mobile-m);
    margin-left: var(--margin-mobile-m);
  }

  .work-card-blocks {
    grid-column-gap: var(--margin-mobile-m);
    grid-row-gap: var(--margin-mobile-m);
  }

  .work-card-seperator-top {
    margin-right: var(--margin-mobile-m);
    margin-left: var(--margin-mobile-m);
  }

  .work-card-seperator-bottom {
    margin-right: var(--margin-desktop-s);
    margin-left: var(--margin-desktop-s);
  }
}

@media screen and (max-width: 479px) {
  .title-small {
    font-size: 1.25em;
  }

  .hero-work-thumbnail-frame {
    border-radius: 12px;
  }

  .title-large {
    font-size: 2.5em;
  }

  .title-medium {
    font-size: 1.5em;
  }

  .navigation-home {
    padding-left: 1em;
    padding-right: 1em;
  }

  .paragraph-large {
    font-size: 1.25em;
  }

  .slider-mobile {
    width: 240px;
  }

  .slider-mobile-slide {
    margin-right: 30px;
  }
}