@font-face {
  font-family: Outfit variablefont wght;
  src: url('../fonts/Outfit-VariableFont_wght.ttf') format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --dark-grey: #2e2c2f;
  --black: black;
  --primary-color: #1583fa;
  --white: white;
  --light-gray: #e8eef2;
  --highlight-color: #f81;
  --primary-font: Ubuntu, Helvetica, sans-serif;
  --h1: 42px;
  --h2: 36px;
  --h3: 24px;
  --normal-text: 14px;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('../images/checkbox-checkmark.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-pagination-wrapper {
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.w-pagination-previous, .w-pagination-next {
  color: #333;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 9px 20px;
  font-size: 14px;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: var(--dark-grey);
  font-family: Ubuntu, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 28px;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 70px;
  font-weight: 700;
  line-height: 78px;
  position: relative;
}

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

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

h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 46px;
}

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

h6 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 34px;
}

p {
  margin-bottom: 0;
}

a {
  color: var(--black);
  text-decoration: none;
  position: relative;
}

ul, ol {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 22px;
  line-height: 32px;
}

label {
  display: block;
}

blockquote {
  border-left: 5px solid var(--primary-color);
  color: var(--primary-color);
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 10px 0 10px 20px;
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
}

figure {
  margin-top: 40px;
  margin-bottom: 40px;
}

figcaption {
  color: var(--dark-grey);
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
}

.nav-bar {
  background-color: var(--white);
  border-radius: 10rem;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
  box-shadow: 0 0 3px 3px #0003;
}

.nav-bar.dark {
  background-color: var(--dark-grey);
}

.section {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: auto;
  overflow: hidden;
}

.section.brand-color-background {
  background-color: var(--primary-color);
}

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

.section.footer {
  background-color: var(--dark-grey);
  color: var(--dark-grey);
}

.section.background {
  background-color: #f5f5f5;
  height: auto;
  position: static;
}

.section._404 {
  background-color: var(--primary-color);
  align-items: center;
  height: 100vh;
  display: flex;
}

.section.sticky {
  overflow: visible;
}

.nav-text {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  transition: color .2s;
}

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

.nav-text.black {
  color: var(--dark-grey);
  font-weight: 600;
}

.nav-text.black:hover {
  color: var(--primary-color);
}

.nav-link.footer {
  margin-bottom: 20px;
}

.nav-link.mixpanel-trigger {
  color: var(--black);
}

.nav-link.mixpanel-trigger.light {
  color: var(--dark-grey);
}

.nav-link.mixpanel-trigger.dark {
  color: var(--white);
}

.nav-divider {
  background-color: #ffffff1a;
  width: 100%;
  height: 1px;
  margin-bottom: 0;
  display: none;
}

.nav-divider.black {
  background-color: #0000001a;
  margin-top: 0;
  margin-bottom: 0;
}

.main-heading {
  color: var(--primary-color);
  width: 100%;
  padding-bottom: 10px;
  font-size: 94px;
  font-weight: 600;
  line-height: 96px;
}

.container {
  color: var(--dark-grey);
  max-width: 1400px;
  padding-top: 40px;
  padding-bottom: 100px;
  position: relative;
}

.container.home {
  padding-top: 180px;
  padding-bottom: 180px;
}

.container.team-view-image {
  margin-top: 520px;
  padding-bottom: 0;
}

.container.team-view-text {
  z-index: 132;
  clear: none;
  margin-top: 0;
  margin-bottom: 80px;
  padding-bottom: 0;
  position: relative;
}

.container.current-portfolio {
  padding-top: 80px;
  padding-bottom: 80px;
}

.bigger-paragraph {
  font-size: 24px;
  line-height: 32px;
}

.bigger-paragraph.home {
  color: var(--black);
  width: 100%;
  margin-top: 40px;
  margin-bottom: 250px;
}

.background-image {
  opacity: .09;
  color: var(--black);
  object-fit: cover;
  background-color: #0000;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.background-image._6 {
  opacity: .26;
}

.text-68px {
  color: var(--dark-grey);
  font-size: 68px;
  line-height: 80px;
}

.text-68px.home {
  opacity: 1;
  color: var(--white);
}

.text-120px {
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  font-size: 120px;
  font-weight: 500;
  line-height: 116px;
}

.home-key-number-wrapper {
  margin-top: 100px;
  display: flex;
}

.key-number-description {
  opacity: .76;
  color: var(--black);
  text-align: center;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 600;
}

.home-key-number {
  margin-right: 120px;
}

.h6-title-brand-color {
  color: var(--primary-color);
  margin-bottom: 56px;
}

.h6-title-brand-color._404 {
  color: var(--white);
  margin-bottom: 36px;
}

.portfolio-logo-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-top: 1px solid #dddddd80;
  border-bottom: 1px solid #dddddd80;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 80px;
  padding-top: 60px;
  padding-bottom: 60px;
  display: grid;
}

.portfolio-logo-link {
  border: 1px solid var(--white);
  justify-content: center;
  align-items: center;
  height: 220px;
  transition: border-color .4s linear;
  display: flex;
}

.portfolio-logo-link:hover {
  border: 1px solid var(--light-gray);
}

.portfolio-logo-wrapper {
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 40%;
  display: flex;
}

.text-button {
  color: var(--dark-grey);
  margin-right: 26px;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

.text-button-wrapper {
  align-items: center;
  width: 100%;
  display: flex;
}

.text-button-wrapper.hover {
  position: absolute;
  left: -101%;
}

.text-button-link {
  color: var(--dark-grey);
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  position: relative;
  left: 119px;
  overflow: hidden;
}

.text-button-link._404 {
  margin-top: 100px;
}

.text-button-link.mixpanel-trigger {
  z-index: 10;
  margin-top: 4rem;
  display: inline-block;
  left: 5.6rem;
  right: auto;
}

.top-text {
  white-space: nowrap;
  font-size: 148px;
  font-weight: 500;
  line-height: 200px;
  position: absolute;
  inset: auto 0% 0%;
}

.gray {
  color: var(--light-gray);
}

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

.top-animation-wrapper {
  align-items: flex-end;
  padding-top: 160px;
  padding-bottom: 86px;
  display: flex;
  position: relative;
}

.image-cover {
  text-align: left;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: static;
}

.image-cover.our-values {
  opacity: .6;
  position: absolute;
}

.top-animation-image1 {
  flex: none;
  width: 620px;
  height: 240px;
  margin-left: 50vw;
}

.bottom-animation-wrapper {
  align-items: flex-start;
  padding-top: 86px;
  padding-bottom: 160px;
  display: flex;
  position: relative;
}

.top-animation-image2 {
  flex: none;
  width: 380px;
  height: 280px;
  margin-left: 20vw;
}

.bottom-text {
  white-space: nowrap;
  font-size: 148px;
  font-weight: 500;
  line-height: 200px;
  position: absolute;
  inset: 0% 0% auto;
}

.top-animation-image3 {
  flex: none;
  width: 480px;
  height: 220px;
  margin-left: 30vw;
}

.bottom-animation-image1 {
  flex: none;
  width: 400px;
  height: 280px;
  margin-left: -80vw;
}

.bottom-animation-image2 {
  flex: none;
  width: 460px;
  height: 320px;
  margin-left: 10vw;
}

.bottom-animation-image3 {
  flex: none;
  width: 620px;
  height: 240px;
  margin-left: 20vw;
}

.slider {
  background-color: var(--light-gray);
  height: 740px;
  margin-top: 80px;
}

.slider-image {
  z-index: 5;
  width: 600px;
  position: absolute;
  inset: auto 5% 0 auto;
}

.gray-extended-background {
  background-color: var(--light-gray);
  width: 100vw;
  position: absolute;
  inset: 0%;
}

.brand-color-extended-background {
  z-index: 2;
  background-color: var(--primary-color);
  width: 90vw;
  height: 55rem;
  position: absolute;
  inset: auto 0% 0% -32%;
}

.slide-nav {
  display: none;
}

.right-arrow {
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
  inset: auto 30px 140px auto;
}

.left-arrow {
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
  inset: auto 120px 140px auto;
}

.quate-wrapper {
  z-index: 2;
  width: 40%;
  margin-top: 12rem;
  position: relative;
  inset: auto auto 0% 0%;
}

.text-42px {
  color: var(--dark-grey);
  font-size: 42px;
  line-height: 52px;
}

.text-42px.quate-home {
  color: var(--white);
  margin-bottom: 60px;
}

.text-42px.light-gray-semibold {
  color: var(--light-gray);
  font-weight: 600;
  transition: color .2s;
}

.text-42px.light-gray-semibold:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.text-42px.category-selected {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}

.text-42px.medium {
  font-weight: 500;
}

.white-semibold {
  color: var(--white);
  font-weight: 600;
}

.white {
  color: var(--white);
}

.quotation-mark {
  color: var(--white);
  font-size: 80px;
  font-weight: 800;
  line-height: 80px;
  position: absolute;
  inset: -40px -40px auto auto;
}

.text-160px-semibold {
  font-size: 160px;
  font-weight: 600;
  line-height: 160px;
}

.text-160px-semibold.slide-no {
  position: absolute;
  inset: auto 40px -40px auto;
}

.focus-grid {
  grid-column-gap: 60px;
  grid-row-gap: 80px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 80px;
  display: grid;
}

.focus-image {
  background-color: var(--black);
  height: 460px;
  margin-bottom: 30px;
  position: relative;
}

.focus-date {
  color: var(--dark-grey);
  margin-bottom: 10px;
}

.focus-paragraph {
  color: var(--dark-grey);
  height: 58px;
  margin-top: 24px;
  overflow: hidden;
}

.footer-grid {
  grid-column-gap: 100px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr .5fr .5fr 1.5fr;
}

.address-footer {
  color: var(--primary-color);
  margin-bottom: 26px;
}

.address-footer.bold {
  color: var(--primary-color);
}

.footer-logo {
  width: 320px;
  transition: none;
}

a.footer-logo:hover img.footer-logo {
  filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1500%) hue-rotate(197deg);
}

.footer-column-wrapper {
  color: var(--light-gray);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.nav-footer-text {
  color: var(--white);
  text-transform: uppercase;
  font-weight: 500;
  transition: color .2s;
}

.nav-footer-text:hover {
  color: var(--primary-color);
}

.nav-footer-text.temp {
  text-transform: capitalize;
  font-weight: 300;
}

.bold {
  font-weight: 700;
}

.dark-gray {
  color: var(--primary-color);
}

.footer-phone-link {
  margin-top: 6px;
}

.social-media-hover {
  opacity: 0;
  color: var(--dark-grey);
  mix-blend-mode: difference;
  background-color: #fff;
  border-radius: 0%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.social-media-link {
  color: var(--dark-grey);
  width: 30px;
  height: 30px;
  margin-right: 6px;
}

.social-media-link img.image-contain {
  transition: filter 0.2s;
}

#footer-linkedin-icon-button {
  position: relative;
}

#footer-linkedin-icon-button .social-media-hover {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  transition: none !important;
}

#footer-linkedin-icon-button.social-media-link {
  transition: none;
}

#footer-linkedin-icon-button.social-media-link img.image-contain {
  filter: none;
  transition: none;
}

#footer-linkedin-icon-button.social-media-link:hover img.image-contain {
  filter: brightness(0) saturate(100%) invert(35%) sepia(100%) saturate(2000%) hue-rotate(200deg) !important;
}

#footer-linkedin-icon-button.social-media-link:hover .social-media-hover {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
}

.social-media-link.hidden {
  display: none;
}

.social-media-wrapper {
  margin-top: 30px;
  display: flex;
}

.social-media-wrapper.team-view {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: 80px;
  padding-right: 0;
}

.social-media-wrapper.portfolio {
  grid-column-gap: 18px;
  margin-top: 40px;
}

.social-media-wrapper.utility {
  grid-column-gap: 12px;
  margin-top: 0;
}

.footer-claim {
  color: var(--dark-grey);
  margin-top: 80px;
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 22px;
}

.private-policy-link {
  float: right;
  text-align: right;
  flex: 0 auto;
  margin-top: 0;
  position: static;
}

.footer-link-text {
  color: var(--light-gray);
  text-align: right;
  text-transform: uppercase;
  width: auto;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
  transition: color .2s;
  display: inline-block;
}

.footer-link-text:hover {
  color: var(--primary-color);
}

.float-left {
  float: left;
}

.footer-link-divider {
  color: var(--white);
  text-transform: uppercase;
  margin-left: 6px;
  margin-right: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  display: inline-block;
}

.back-to-top-wrapper {
  z-index: 98;
  background-color: #0000001a;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  padding-top: 2px;
  transition: background-color .2s;
  display: flex;
  position: fixed;
  inset: auto 20px 20px auto;
}

.back-to-top-wrapper:hover {
  background-color: var(--black);
}

.icon-top {
  width: 12px;
  margin-bottom: 2px;
  transform: rotate(-90deg);
}

.text-top {
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
}

.back-to-top {
  position: absolute;
  inset: 0% 0% auto;
}

.submain-heading {
  color: var(--dark-grey);
  margin-top: 40px;
  font-weight: 300;
}

.portfolio-grid {
  grid-column-gap: 60px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 280px auto 160px 32px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  overflow: hidden;
}

.text-18px {
  font-size: 18px;
  line-height: 22px;
}

.text-18px.semibold {
  font-weight: 600;
}

.text-18px.porfolio-list {
  height: 46px;
  overflow: hidden;
}

.text-18px.white-normal {
  color: var(--white);
}

.text-18px.title {
  color: var(--dark-grey);
  margin-top: 6px;
}

.text-18px.margin-right {
  margin-right: 6px;
}

.text-18px.focus-view-date {
  color: #70707099;
  margin-bottom: 10px;
}

.text-18px.utility-font {
  margin-bottom: 40px;
}

.text-18px.utility-font-last {
  margin-top: 10px;
  margin-bottom: 0;
}

.text-18px.underline {
  text-decoration: underline;
}

.text-18px.punctuation-mark {
  float: left;
  margin-right: 6px;
}

.text-18px.medium {
  font-weight: 500;
  display: inline-block;
}

.text-18px.email-link-2 {
  color: var(--primary-color);
}

.portfolio-list-link {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
  transition: background-color .2s;
}

.portfolio-list-link:hover {
  background-color: #dddddd29;
}

.divider-dark-gray {
  background-color: var(--dark-grey);
  height: 1px;
  margin-top: 20px;
}

.h4-company-name {
  font-weight: 500;
}

.cross-icon-wrapper {
  width: 32px;
  height: 32px;
  position: relative;
}

.cross-icon-wrapper.utility {
  margin-top: 40px;
}

.change-to-brand-color {
  background-color: var(--primary-color);
  mix-blend-mode: overlay;
  position: absolute;
  inset: 0%;
}

.text-28px {
  font-size: 28px;
  line-height: 36px;
}

.text-28px.portfolio-description {
  margin-bottom: 36px;
}

.text-28px.location-sub-title {
  margin-top: 60px;
  margin-bottom: 16px;
}

.portfolio-grid-open {
  grid-column-gap: 24px;
  grid-row-gap: 6px;
  grid-template-rows: auto;
  grid-template-columns: auto 18% 18% 18%;
  margin-top: 30px;
  margin-bottom: 60px;
}

.portfolio-grid-open.current {
  grid-template-columns: auto 17% 17% 17%;
}

.portfolio-logo-wrapper-big {
  justify-content: center;
  align-items: center;
  width: 52%;
  height: 48%;
  display: flex;
}

.portfolio-logo-wrapper-big.current {
  width: 62%;
}

.semibold {
  font-weight: 600;
}

.portfolio-grid-open-mask {
  display: none;
  overflow: hidden;
}

.divider-light-gray {
  background-color: var(--light-gray);
  height: 1px;
}

.website-link {
  background-color: var(--primary-color);
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  height: 46px;
  padding-left: 32px;
  padding-right: 32px;
  transition: background-color .2s;
  display: flex;
}

.website-link:hover {
  background-color: var(--black);
}

.image-contain {
  color: var(--dark-grey);
  text-align: center;
  object-fit: contain;
  width: 100%;
  height: 100%;
  text-decoration: line-through;
  display: block;
  position: absolute;
}

.portfolio-social-media-link {
  opacity: .4;
  width: 46px;
  height: 46px;
  transition: opacity .2s;
}

.portfolio-social-media-link:hover, .portfolio-social-media-link.current {
  opacity: 1;
}

.nav-wrapper {
  z-index: 99;
  display: block;
  position: absolute;
  inset: 0% 0% auto;
}

.category-wrapper {
  z-index: 1;
  grid-column-gap: 32px;
  background-color: var(--white);
  align-items: center;
  margin-top: -42px;
  margin-bottom: 66px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  position: sticky;
  top: 0;
  bottom: 0;
}

.text-24px {
  font-size: 24px;
  line-height: 36px;
}

.text-24px.team-list {
  width: 50%;
  margin-top: -34px;
  margin-bottom: 80px;
}

.text-24px.focus-view-date {
  color: var(--primary-color);
  margin-bottom: 6px;
}

.text-24px.team-view-name {
  color: var(--dark-grey);
  margin-top: 16px;
  margin-bottom: 26px;
}

._3-column-grid {
  grid-column-gap: 40px;
  grid-row-gap: 80px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

._3-column-grid.featured {
  overflow: hidden;
}

.team-image-wrapper {
  background-color: #dddddd4d;
  height: 460px;
  margin-bottom: 30px;
  position: relative;
}

.about-value-wrapper {
  display: block;
  overflow: hidden;
}

.team-brand-color-block {
  background-color: var(--primary-color);
  width: 86%;
  height: 180px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.team-image-cover {
  object-fit: cover;
  width: 90%;
  position: absolute;
  inset: -6px 0% 0% auto;
}

.member-no {
  color: var(--primary-color);
  font-size: 200px;
  font-weight: 600;
  line-height: 180px;
}

.text-52px {
  font-size: 52px;
  line-height: 64px;
}

.text-52px.about {
  margin-top: 60px;
  margin-bottom: 40px;
}

._50 {
  width: 50%;
}

.our-value-image {
  background-color: var(--black);
  align-items: flex-end;
  height: 620px;
  margin-top: 100px;
  margin-left: -80px;
  margin-right: -80px;
  display: flex;
  position: relative;
}

.our-values-title {
  color: var(--primary-color);
  margin-bottom: 120px;
  margin-left: 80px;
}

.about-paragraph {
  margin-top: 26px;
}

.about-value-icon-wrapper {
  align-items: flex-start;
  height: 220px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  padding-left: 20px;
  display: flex;
  position: relative;
}

.about-value-icon-wrapper.utility {
  height: 160px;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.about-icon {
  height: 100%;
}

.about-value-brand-color-block {
  z-index: -1;
  background-color: var(--primary-color);
  width: 100%;
  height: 50%;
  position: absolute;
  inset: auto 0% 0% auto;
}

.our-values-grid {
  grid-column-gap: 100px;
  grid-row-gap: 120px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 80px;
}

.contact-grid {
  grid-column-gap: 140px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr;
}

.contact-title {
  margin-bottom: 14px;
}

.text-field {
  border: 1px solid var(--dark-grey);
  box-shadow: none;
  color: var(--dark-grey);
  border-radius: 10px;
  height: 72px;
  margin-bottom: 20px;
  font-size: 20px;
  transition: border-color .2s;
}

.text-field:hover {
  border-bottom-color: var(--primary-color);
}

.text-field:focus {
  border-bottom-color: var(--black);
}

.text-field::placeholder {
  color: var(--dark-grey);
  font-size: 16px;
  line-height: 20px;
}

.form-block {
  margin-top: 40px;
}

.textarea {
  border: 1px solid var(--dark-grey);
  box-shadow: none;
  border-radius: 10px;
  min-height: 180px;
  font-size: 20px;
  transition: border-color .2s;
}

.textarea:hover {
  border-bottom-color: var(--primary-color);
}

.textarea:focus {
  border-bottom-color: var(--black);
}

.textarea::placeholder {
  color: var(--dark-grey);
  font-size: 16px;
  line-height: 20px;
}

.checkbox-field {
  font-size: 16px;
}

.link {
  text-decoration: underline;
}

.checkbox {
  border-width: 1px;
  border-color: var(--dark-grey);
  border-radius: 5px;
  width: 20px;
  height: 20px;
  margin-right: 14px;
  transition: border-color .2s;
}

.checkbox.w--redirected-checked {
  background-color: var(--black);
}

.submit-button {
  background-color: var(--primary-color);
  text-align: left;
  border-radius: 100px;
  width: auto;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 36px;
  font-weight: 600;
  display: inline-block;
}

.location-title {
  margin-bottom: 14px;
  font-weight: 500;
}

.location-wrapper {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.email-link {
  margin-top: 6px;
}

.logo {
  width: auto;
  height: 50px;
}

.text-60px {
  font-size: 60px;
  font-weight: 400;
  line-height: 66px;
}

.text-60px.utility {
  margin-bottom: 80px;
}

.content-hero-image {
  text-align: center;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 1400px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.focus-view-name-wrapper {
  color: var(--dark-grey);
  flex-wrap: wrap;
  margin-top: 26px;
  display: flex;
}

.posting {
  color: var(--dark-grey);
}

.posting h1 {
  margin-top: 40px;
  margin-bottom: 20px;
}

.posting h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 700;
}

.posting h3 {
  margin-top: 40px;
  margin-bottom: 20px;
}

.posting h4, .posting h5 {
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 600;
}

.posting h6 {
  text-transform: none;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 600;
}

.focus-view-divider {
  background-color: var(--light-gray);
  height: 1px;
  margin-top: 120px;
  margin-bottom: 60px;
}

.featured-title {
  margin-bottom: 80px;
  font-weight: 400;
}

.text-30px {
  font-size: 30px;
  line-height: 36px;
}

.text-30px.pagination {
  margin-top: 20px;
  font-weight: 500;
}

._2-column-grid-40-50 {
  grid-column-gap: 80px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 40% 50%;
}

.team-view-image-wrapper {
  height: 580px;
  position: relative;
}

.team-view-brand-color-block {
  z-index: -1;
  background-color: var(--primary-color);
  width: 86%;
  height: 240px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.team-view-brand-color-block.extended {
  z-index: 0;
  width: 100vw;
  inset: auto -100% 0% 0%;
}

.utility-grid {
  grid-column-gap: 80px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  grid-template-columns: 28% 66%;
}

.utility-3column-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.utility-divider {
  background-color: var(--light-gray);
  height: 1px;
  margin-top: 80px;
  margin-bottom: 80px;
}

.utility-title {
  margin-bottom: 20px;
  font-weight: 500;
}

.utility-color-block {
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 140px;
  display: flex;
}

.utility-color-block._68dba2 {
  background-color: var(--primary-color);
  color: var(--white);
  font-weight: 500;
}

.utility-color-block._707070 {
  background-color: var(--dark-grey);
  color: var(--white);
  font-weight: 500;
}

.utility-color-block.dddddd {
  background-color: var(--light-gray);
  font-weight: 500;
}

.utility-color-block._000000 {
  background-color: var(--black);
  color: var(--white);
  font-weight: 500;
}

.utility-color-block.ffffff {
  border: 1px solid var(--light-gray);
  background-color: var(--white);
  font-weight: 500;
}

.utility-image-block {
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 160px;
}

.text-link {
  text-decoration: underline;
}

.utility-2-column-grid {
  grid-column-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1.25fr;
}

.next {
  float: right;
  text-align: right;
  background-color: #0000;
  border-width: 0;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 100px;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 0;
}

.pagination {
  display: block;
  position: relative;
}

.previous {
  float: left;
  background-color: #0000;
  border-width: 0;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 100px;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 0;
}

.rotate-z180 {
  transform: rotate(180deg);
}

.empty-state {
  border-top: 1px solid var(--dark-grey);
  border-bottom: 1px solid var(--light-gray);
  background-color: #dddddd29;
  padding: 20px 40px;
}

.empty-state.portfolio {
  border-top-width: 0;
}

.empty-state.featured {
  margin-top: 60px;
}

.green-arrow {
  width: 24px;
}

.partner-category-wrapper {
  position: relative;
}

.text-280px {
  margin-bottom: 10px;
  font-size: 280px;
  line-height: 210px;
}

.utility-typography-wrapper {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.menu-wrapper {
  grid-column-gap: 80px;
  color: var(--black);
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.hamburger-wrapper {
  border: 1px none var(--primary-color);
  flex-direction: column;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding-left: 14px;
  padding-right: 14px;
  display: none;
}

.hamburger-wrapper.open {
  border-style: none;
}

.hamburger-line {
  background-color: var(--white);
  width: 100%;
  height: 2px;
  margin-top: 3px;
  margin-bottom: 3px;
}

.hamburger-line.top {
  display: none;
}

.hamburger-line.bottom {
  width: 60%;
}

.menu-open-wrapper {
  margin-bottom: 837px;
}

.nav-open-text {
  color: var(--white);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color .2s;
}

.nav-open-text:hover {
  color: var(--primary-color);
}

.nav-open-wrapper {
  z-index: 100;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: var(--dark-grey);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: none;
  position: fixed;
  inset: 0%;
}

.close {
  width: 100%;
  transform: rotate(45deg);
}

.go-arrow {
  width: 26px;
}

.slide-icon {
  width: 20px;
}

.underline {
  text-decoration: underline;
}

.footer-link-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-outer-link-wrapper {
  flex: 1;
}

.current-portfolio-brand-color-block {
  background-color: var(--primary-color);
  width: 100vw;
  height: 164px;
  position: absolute;
  inset: auto 0% 0% 460px;
}

.current-portfolio-company-name-wrapper {
  margin-bottom: 20px;
}

.main-title-animation-mask, .main-heading-animation-mask, .title-animation-mask {
  overflow: hidden;
}

.back-link {
  align-items: center;
  margin-bottom: 60px;
  display: inline-block;
}

.back-arrow {
  width: 30px;
  margin-right: 10px;
}

.page-title {
  color: var(--dark-grey);
  font-size: 42px;
  line-height: 46px;
}

.link-block {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.link-block.mixpanel-trigger {
  align-items: stretch;
  width: 16rem;
  height: 2.25rem;
}

.link-block.mixpanel-trigger.w--current, .link-2 {
  color: var(--primary-color);
}

.div-block {
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 52px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  display: flex;
}

.text-block {
  color: var(--primary-color);
  margin-bottom: 0;
  font-size: 32px;
}

.heading {
  max-width: 1400px;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.div-block-2 {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.text-block-2 {
  color: var(--light-gray);
  flex: 1;
  margin-top: 0;
  font-size: 14px;
}

.text-block-3 {
  margin-bottom: 10px;
}

.link-block-2 {
  margin-top: 44px;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.grid {
  border-radius: 2px;
  grid-template: "Area Area-2"
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 ". ."
                 / .5fr 1fr .25fr;
  grid-auto-flow: row;
  margin-top: 50px;
  margin-bottom: 50px;
}

.table-headers {
  font-weight: 700;
}

.link-3, .link-4, .link-5, .link-6, .link-7, .link-8, .link-9, .hyperlink {
  color: var(--primary-color);
}

.div-block-3 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: 0 auto;
  justify-content: flex-end;
  display: flex;
}

.div-block-4 {
  display: flex;
}

.privacy-policy-link {
  color: var(--primary-color);
}

.padding-global {
  padding-left: 5%;
  padding-right: 5%;
}

.page-wrapper, .page-wrapper.doc {
  background-color: #fff;
}

.container-medium {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.padding-vertical-large {
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.nav-section {
  padding-top: 3rem;
}

.navbar-spacer {
  height: 11rem;
}

.navbar-spacer.whitesmoke {
  background-color: #f5f5f5;
}

.footer {
  background-color: var(--dark-grey);
}

.div-block-7 {
  background-color: #f5f5f5;
  height: 11rem;
  position: absolute;
  inset: 0% 0% auto;
}

.trevillyan-labs-logo {
  max-height: 100%;
}

.trevillyan-labs-logo-link {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.trevillyan-labs-logo-link.mixpanel-trigger {
  color: var(--primary-color);
  align-items: stretch;
  width: 16rem;
  height: 2.25rem;
}

.trevillyan-labs-logo-link.mixpanel-trigger:hover {
  color: var(--primary-color);
}

.trevillyan-labs-logo-link.mixpanel-trigger.w--current {
  color: var(--primary-color);
}

.trevillyan-labs-logo-link.mixpanel-trigger.dark {
  color: var(--white);
  transition: color 0.2s;
}

.trevillyan-labs-logo-link.mixpanel-trigger.dark:hover {
  color: var(--primary-color);
}

.padding-vertical-small {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.container-large {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.body {
  justify-content: flex-start;
  display: block;
}

.body-2 {
  display: block;
}

@media screen and (max-width: 991px) {
  .nav-bar {
    margin-left: 30px;
    margin-right: 30px;
  }

  .nav-bar.dark {
    margin-left: auto;
    margin-right: auto;
  }

  .nav-divider.open {
    margin-bottom: 46px;
  }

  .main-heading {
    width: auto;
  }

  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .container.team-view-text {
    margin-top: -40px;
  }

  .bigger-paragraph.home {
    width: auto;
  }

  .home-key-number-wrapper {
    flex-direction: column;
  }

  .key-number-description {
    margin-bottom: 30px;
  }

  .home-key-number {
    margin-right: 0;
  }

  .portfolio-logo-grid {
    grid-column-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .portfolio-logo-link {
    height: 160px;
  }

  .portfolio-logo-wrapper {
    width: 74%;
  }

  .top-text, .bottom-text {
    font-size: 78px;
    line-height: 140px;
  }

  .slider-image {
    width: 420px;
    top: 57%;
    right: 0%;
  }

  .brand-color-extended-background {
    width: 100vw;
    height: 45rem;
    left: 0%;
  }

  .right-arrow {
    right: 0;
  }

  .left-arrow {
    right: 90px;
  }

  .quate-wrapper {
    background-color: #1583fa00;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .text-160px-semibold.slide-no {
    right: 0;
  }

  .focus-grid {
    grid-column-gap: 40px;
  }

  .focus-image {
    height: 260px;
  }

  .footer-grid {
    grid-column-gap: 60px;
    grid-template-columns: 1.25fr .5fr .5fr;
  }

  .portfolio-grid {
    grid-column-gap: 20px;
    grid-template-columns: 200px auto 120px 32px;
    padding-left: 0;
    padding-right: 0;
  }

  .h4-company-name {
    font-size: 32px;
    line-height: 34px;
  }

  .text-28px.portfolio-description {
    margin-top: 20px;
  }

  .text-28px.location-sub-title {
    margin-top: 40px;
  }

  .portfolio-grid-open, .portfolio-grid-open.current {
    grid-template-columns: auto 30% 30%;
  }

  .portfolio-logo-wrapper-big {
    width: 86%;
  }

  .portfolio-logo-wrapper-big.current {
    width: 58%;
    height: 100%;
    margin-bottom: 60px;
  }

  .image-contain {
    bottom: 0;
  }

  .category-link {
    flex: none;
  }

  .category-wrapper {
    overflow: auto;
  }

  .text-24px.team-list {
    width: 100%;
  }

  ._3-column-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }

  ._3-column-grid.featured {
    grid-row-gap: 0px;
    grid-auto-rows: minmax(0, 0);
  }

  .team-image-wrapper {
    height: 360px;
  }

  .team-brand-color-block {
    height: 140px;
  }

  ._50 {
    width: 100%;
  }

  .our-value-image {
    margin-left: -30px;
    margin-right: -30px;
  }

  .our-values-title {
    margin-left: 30px;
  }

  .about-value-icon-wrapper {
    height: 180px;
  }

  .about-value-icon-wrapper.utility {
    justify-content: center;
    align-items: center;
  }

  .our-values-grid {
    grid-column-gap: 60px;
    grid-row-gap: 80px;
    grid-template-columns: 1fr 1fr;
  }

  .contact-grid {
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
  }

  ._2-column-grid-40-50 {
    grid-template-columns: 100%;
  }

  .team-view-image-wrapper {
    height: auto;
    margin-top: 25px;
  }

  .team-view-brand-color-block.extended {
    position: relative;
    right: auto;
  }

  .utility-grid {
    grid-template-columns: 100%;
  }

  .menu-wrapper {
    display: none;
  }

  .hamburger-wrapper {
    border: 1px none var(--primary-color);
    width: 68px;
    display: flex;
  }

  .hamburger-wrapper.open {
    align-items: center;
    width: 5rem;
    height: 5rem;
    display: flex;
    position: absolute;
    inset: 5% 5% auto auto;
  }

  .hamburger-line {
    background-color: var(--primary-color);
    border-radius: 20px;
    height: 6px;
    margin-top: 6px;
  }

  .hamburger-line.top {
    background-color: var(--primary-color);
    width: 80%;
  }

  .hamburger-line.bottom {
    background-color: var(--primary-color);
    width: 100%;
    margin-top: 7px;
  }

  .hamburger-line.bottom.dark {
    background-color: var(--white);
  }

  .hamburger-line.black {
    background-color: var(--primary-color);
  }

  .hamburger-line.dark {
    background-color: var(--white);
  }

  .hamburger-line.light {
    background-color: var(--primary-color);
  }

  .menu-open-wrapper {
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
  }

  .nav-open-link {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .nav-open-text {
    font-size: 68px;
    font-weight: 700;
    line-height: 62px;
  }

  .nav-open-wrapper {
    z-index: 100;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: var(--dark-grey);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    inset: 0%;
    overflow: hidden;
  }

  .current-portfolio-brand-color-block {
    left: 0;
  }

  .current-portfolio-company-name-wrapper {
    margin-bottom: 0;
  }

  .nav-section {
    padding-top: 2rem;
  }

  .navbar-spacer {
    height: 9rem;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 22px;
  }

  h1 {
    font-size: 52px;
    line-height: 62px;
  }

  h2 {
    font-size: 46px;
    line-height: 56px;
  }

  h3 {
    font-size: 38px;
    line-height: 46px;
  }

  h4 {
    font-size: 30px;
    line-height: 38px;
  }

  h5 {
    font-size: 24px;
    line-height: 30px;
  }

  h6 {
    font-size: 18px;
    line-height: 24px;
  }

  p {
    font-size: 16px;
    line-height: 22px;
  }

  ul, ol {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 18px;
    line-height: 26px;
  }

  blockquote {
    border-left-width: 3px;
    margin-top: 30px;
    margin-bottom: 30px;
    padding-left: 14px;
    font-size: 22px;
    line-height: 28px;
  }

  figcaption {
    font-size: 14px;
    line-height: 18px;
  }

  .nav-bar {
    height: 62px;
    margin-left: 16px;
    margin-right: 16px;
  }

  .section.footer {
    margin-top: 20px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-link.footer {
    margin-bottom: 10px;
  }

  .nav-divider, .nav-divider.open {
    margin-bottom: 80px;
  }

  .main-heading {
    font-size: 58px;
    line-height: 66px;
  }

  .container {
    padding: 60px 16px;
  }

  .container.home {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .container.team-view-text {
    margin-top: -40px;
    margin-bottom: 0;
  }

  .bigger-paragraph {
    font-size: 18px;
    line-height: 28px;
  }

  .bigger-paragraph.home {
    margin-bottom: 80px;
  }

  .text-68px {
    font-size: 42px;
    line-height: 50px;
  }

  .text-120px {
    font-size: 24vw;
    font-weight: 700;
    line-height: 24vw;
  }

  .home-key-number-wrapper {
    margin-top: 60px;
  }

  .key-number-description {
    margin-top: 0;
  }

  .h6-title-brand-color {
    margin-bottom: 20px;
  }

  .portfolio-logo-grid {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .portfolio-logo-link {
    height: 140px;
  }

  .portfolio-logo-wrapper {
    width: 78%;
    height: 36%;
  }

  .text-button {
    margin-right: 10px;
    font-size: 20px;
    line-height: 20px;
  }

  .text-button-link {
    margin-top: 30px;
  }

  .text-button-link._404 {
    margin-top: 60px;
  }

  .text-button-link.mixpanel-trigger {
    margin-top: 2rem;
    left: 3.4rem;
  }

  .text-button-link.mixpanel-trigger.team {
    top: -5.7rem;
  }

  .top-text {
    font-size: 68px;
    font-weight: 600;
    line-height: 80px;
  }

  .top-animation-wrapper {
    padding-top: 80px;
    padding-bottom: 36px;
  }

  .top-animation-image1 {
    width: 320px;
    margin-left: 20vw;
  }

  .bottom-animation-wrapper {
    padding-top: 36px;
    padding-bottom: 80px;
  }

  .top-animation-image2 {
    width: 320px;
    margin-left: 20vw;
  }

  .bottom-text {
    font-size: 68px;
    line-height: 80px;
  }

  .top-animation-image3 {
    width: 280px;
    margin-left: 10vw;
  }

  .bottom-animation-image1 {
    width: 340px;
    margin-left: -120vw;
  }

  .bottom-animation-image2 {
    width: 260px;
    height: 200px;
    margin-left: 200px;
  }

  .bottom-animation-image3 {
    width: 280px;
    height: 220px;
    margin-left: 160px;
  }

  .slider {
    height: 520px;
    margin-top: 60px;
  }

  .slider-image {
    width: 82%;
    margin-top: 90px;
    top: 20%;
    right: -6%;
  }

  .brand-color-extended-background {
    width: 100vw;
    height: 35rem;
    left: 0;
  }

  .right-arrow {
    width: 40px;
    height: 40px;
    bottom: 80px;
  }

  .left-arrow {
    width: 40px;
    height: 40px;
    bottom: 80px;
    right: 40px;
  }

  .quate-wrapper {
    background-color: #1583fa00;
    width: auto;
    position: relative;
    top: -145px;
  }

  .text-42px {
    font-size: 28px;
    line-height: 34px;
  }

  .text-42px.quate-home {
    margin-bottom: 20px;
  }

  .quotation-mark {
    font-size: 60px;
    right: 16px;
  }

  .text-160px-semibold.slide-no {
    font-size: 100px;
    line-height: 120px;
  }

  .focus-grid {
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .focus-image {
    height: 66vw;
    margin-bottom: 20px;
  }

  .focus-date {
    margin-bottom: 4px;
  }

  .focus-paragraph {
    height: 48px;
    margin-top: 10px;
  }

  .footer-grid {
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
  }

  .address-footer {
    margin-bottom: 16px;
  }

  .footer-logo {
    width: 60vw;
  }

  .social-media-wrapper.team-view {
    margin-bottom: 40px;
  }

  .social-media-wrapper.portfolio {
    grid-column-gap: 6px;
    margin-top: 30px;
  }

  .footer-claim {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .submain-heading {
    margin-bottom: 80px;
    font-size: 38px;
    line-height: 46px;
  }

  .portfolio-grid {
    grid-column-gap: 20px;
    grid-template-columns: 100px auto 24px;
  }

  .portfolio-grid.hide-mobile {
    display: none;
  }

  .text-18px {
    font-size: 16px;
    line-height: 22px;
  }

  .text-18px.title {
    margin-top: 2px;
  }

  .text-18px.hide-mobile {
    display: none;
  }

  .portfolio-list-link {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .divider-dark-gray {
    margin-top: 6px;
  }

  .h4-company-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
  }

  .cross-icon-wrapper {
    width: 24px;
    height: 24px;
  }

  .text-28px {
    font-size: 20px;
    line-height: 28px;
  }

  .text-28px.location-sub-title {
    margin-top: 26px;
    margin-bottom: 10px;
    font-weight: 500;
  }

  .portfolio-grid-open {
    grid-column-gap: 20px;
    margin-top: 20px;
    margin-bottom: 26px;
  }

  .portfolio-logo-wrapper-big {
    width: 50%;
    height: 100%;
  }

  .portfolio-logo-wrapper-big.current {
    width: 62%;
  }

  .website-link {
    height: 36px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .image-contain {
    bottom: 0;
  }

  .portfolio-social-media-link {
    width: 36px;
    height: 36px;
  }

  .category-wrapper {
    grid-column-gap: 20px;
    margin-top: -10px;
    margin-bottom: 40px;
  }

  .text-24px {
    font-size: 20px;
    line-height: 30px;
  }

  .text-24px.team-list {
    margin-top: 0;
    margin-bottom: 40px;
  }

  .text-24px.focus-view-date {
    margin-bottom: 0;
  }

  .text-24px.team-view-name {
    margin-top: 10px;
  }

  ._3-column-grid {
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  ._3-column-grid.featured {
    grid-row-gap: 40px;
    grid-auto-rows: auto;
    overflow: visible;
  }

  .team-image-wrapper {
    height: 88vw;
    margin-bottom: 20px;
  }

  .team-image-cover {
    width: 82%;
  }

  .member-no {
    font-size: 160px;
    line-height: 140px;
  }

  .text-52px.about {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 36px;
    line-height: 44px;
  }

  .our-value-image {
    justify-content: center;
    align-items: center;
    height: 100vw;
    margin-top: 60px;
    margin-left: -16px;
    margin-right: -16px;
    display: flex;
  }

  .our-values-title {
    margin-bottom: 0;
    margin-left: 0;
  }

  .about-paragraph {
    margin-top: 12px;
  }

  .about-value-icon-wrapper {
    justify-content: center;
    height: 160px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    padding-left: 0;
  }

  .about-value-icon-wrapper.utility {
    height: 22vw;
    margin-bottom: 16px;
  }

  .our-values-grid {
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .contact-grid {
    grid-row-gap: 40px;
  }

  .contact-title {
    margin-bottom: 6px;
  }

  .text-field {
    height: 48px;
    margin-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .form-block {
    margin-top: 20px;
  }

  .textarea {
    min-height: 120px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .checkbox-field {
    font-size: 14px;
  }

  .checkbox {
    margin-top: 2px;
    margin-right: 6px;
  }

  .submit-button {
    margin-top: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .location-title {
    margin-bottom: 10px;
  }

  .logo {
    width: 126px;
  }

  .text-60px {
    font-size: 46px;
    line-height: 52px;
  }

  .text-60px.utility {
    margin-bottom: 20px;
  }

  .content-hero-image {
    height: 74vw;
  }

  .focus-view-name-wrapper {
    margin-top: 10px;
  }

  .posting h1, .posting h2, .posting h3, .posting h4, .posting h5, .posting h6 {
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .focus-view-divider {
    margin-top: 60px;
    margin-bottom: 40px;
  }

  .featured-title {
    margin-bottom: 20px;
    font-weight: 500;
  }

  .text-30px {
    font-size: 20px;
    line-height: 22px;
  }

  .text-30px.pagination {
    margin-top: 6px;
  }

  .team-view-brand-color-block.extended {
    position: relative;
  }

  .utility-grid {
    grid-row-gap: 30px;
  }

  .utility-3column-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: 1fr 1fr;
  }

  .utility-divider {
    margin-top: 60px;
    margin-bottom: 50px;
  }

  .utility-title {
    margin-bottom: 10px;
  }

  .utility-image-block {
    height: 32vw;
  }

  .utility-2-column-grid {
    grid-template-rows: auto;
  }

  .next, .previous {
    margin-top: 20px;
  }

  .empty-state {
    padding-left: 20px;
    padding-right: 20px;
  }

  .text-280px {
    font-size: 50vw;
    line-height: 40vw;
  }

  .hamburger-wrapper {
    border-style: none;
    width: 45px;
    height: 38px;
    padding-left: 9px;
    padding-right: 9px;
    display: flex;
  }

  .hamburger-line {
    margin-top: 2px;
  }

  .hamburger-line.bottom {
    width: 100%;
    height: 6px;
    margin-top: 2px;
    margin-bottom: 3px;
  }

  .hamburger-line.black {
    background-color: var(--primary-color);
  }

  .nav-open-text {
    font-size: 12.6vw;
    line-height: 14vw;
  }

  .go-arrow {
    width: 20px;
  }

  .slide-icon {
    width: 10px;
  }

  .footer-link-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .current-portfolio-brand-color-block {
    height: 124px;
  }

  .page-title {
    font-size: 30px;
    line-height: 38px;
  }

  .div-block-2 {
    margin-top: 445px;
  }

  .padding-vertical-large {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }

  .nav-section {
    padding-top: 2rem;
  }

  .navbar-spacer {
    height: 8rem;
  }

  .trevillyan-labs-logo-link.mixpanel-trigger.dark {
    width: 14rem;
    height: 2rem;
  }

  .trevillyan-labs-logo-link.mixpanel-trigger.dark.w--current {
    width: 13rem;
    height: 1.9rem;
  }
}

@media screen and (max-width: 479px) {
  .nav-bar.dark {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .main-heading {
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: 50px;
    line-height: 66px;
  }

  .container.patent-container {
    background-color: #0000;
    margin-top: 0;
  }

  .container.patent-container-2 {
    margin-top: 0;
  }

  .text-68px {
    font-size: 36px;
  }

  .text-68px.home {
    overflow-wrap: anywhere;
    font-size: 32px;
  }

  .text-button-link.mixpanel-trigger.team {
    top: -2.4rem;
    left: 2rem;
  }

  .slider-image {
    top: auto;
    bottom: -10.8rem;
    right: -8%;
  }

  .brand-color-extended-background {
    width: 100vw;
    left: 0;
  }

  .quate-wrapper {
    background-color: #1583fa00;
    margin-top: 44px;
    padding-top: 57px;
    padding-bottom: 68px;
    padding-left: 10px;
    top: 29px;
  }

  .quotation-mark {
    top: 27px;
  }

  .focus-paragraph {
    height: auto;
  }

  .image-contain {
    margin-bottom: 0;
    position: absolute;
    inset: auto auto 0;
  }

  .content-hero-image {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  ._2-column-grid-40-50 {
    margin-top: 0;
  }

  .team-view-image-wrapper {
    position: relative;
  }

  .team-view-brand-color-block.extended {
    position: relative;
    inset: 0% auto auto 0%;
  }

  .menu-wrapper {
    display: none;
  }

  .hamburger-wrapper {
    border-style: none;
    align-items: center;
    display: flex;
  }

  .hamburger-wrapper.open {
    width: 4rem;
    height: 4rem;
    position: fixed;
    inset: 5% 10% auto auto;
  }

  .hamburger-line {
    background-color: var(--primary-color);
    border-radius: 20px;
    height: 4px;
    margin-top: 0;
    margin-bottom: 3px;
  }

  .hamburger-line.bottom {
    background-color: var(--primary-color);
    width: 100%;
    height: 4px;
    margin-top: 1px;
    margin-bottom: 0;
  }

  .hamburger-line.black {
    background-color: var(--primary-color);
  }

  .hamburger-line.dark {
    background-color: var(--white);
  }

  .menu-open-wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .nav-open-link {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .nav-open-wrapper {
    z-index: 100;
    background-color: var(--dark-grey);
    width: 100vw;
    height: 100vh;
    padding-top: 2rem;
    display: none;
    overflow: hidden;
  }

  .text-block {
    aspect-ratio: auto;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 32px;
    display: block;
    position: static;
  }

  .heading {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .div-block-2 {
    margin-top: 163px;
  }

  .bold-text {
    overflow-wrap: break-word;
    overflow: visible;
  }

  .collection-list-wrapper {
    margin-top: 30px;
  }

  .div-block-5 {
    position: relative;
  }

  .div-block-6 {
    height: 90%;
    display: block;
  }

  .padding-global {
    padding-left: 7%;
    padding-right: 7%;
  }

  .padding-vertical-large {
    padding-top: 3rem;
    padding-bottom: 5rem;
  }

  .nav-section {
    padding-top: 2rem;
  }

  .navbar-spacer {
    height: 8rem;
  }

  .trevillyan-labs-logo-link.mixpanel-trigger.dark {
    width: 9rem;
    height: 1.3rem;
  }

  .trevillyan-labs-logo-link.mixpanel-trigger.dark.w--current {
    width: 8rem;
    height: 1.2rem;
  }
}

#w-node-_6b3db6ef-4a28-ddfe-2d68-b52e77cfdc9f-64ead5b7, #w-node-c3b1268a-6a14-dd3c-598c-5426bbbc8324-bbbc8321 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#footer-logo-button.w-node-c3b1268a-6a14-dd3c-598c-5426bbbc835b-bbbc8321 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: start end;
}

#w-node-_534ba3db-bfe3-a723-c674-5beb2bb3a535-64ead605, #w-node-d91995ea-55b7-ac90-f3eb-179802c7e003-64ead605, #w-node-_341710b6-1eee-b44e-0229-10c4a5297b59-64ead608 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f4f6eaa2-7fcf-87b9-0c6a-bd6b200b73b4-64ead608 {
  align-self: end;
}

#w-node-a9356d2a-8ad3-c849-19bc-b68f32d09e2b-64ead609, #w-node-_8f3c7fea-0100-d7e2-26ec-7e9dc6992ab2-64ead624 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_161d6fae-d7c4-3476-ada4-9ab4a38d6663-64ead624 {
  grid-area: Area-2;
}

#w-node-ca84cf22-3cda-3497-9e55-16698862d9bc-64ead624, #w-node-e986c3e9-7d70-43f9-e22b-fa686a38bf65-64ead624, #w-node-_51e12cb7-5443-6eff-ff0b-993d6c433166-64ead624, #w-node-c137ec33-1966-41f1-10a8-2adad64024f7-64ead624, #w-node-_1c396465-7eb4-74c8-021a-836100d35173-64ead624, #w-node-ab32eff9-6ea9-85ed-ba18-10029c07c96a-64ead624, #w-node-e4e117e7-9594-be67-2626-e61d897f470d-64ead624, #w-node-d2bf158d-9588-33e0-bf8c-5a5d63b279f1-64ead624, #w-node-_813cca54-44e3-bd44-e254-951a152928a7-64ead624, #w-node-_033f938a-8469-8da6-5ecb-5b7c462d721b-64ead624, #w-node-_9dc54fdc-e1fa-de87-60ed-edb48612f4c5-64ead624, #w-node-_75407c3f-6d65-93e7-547b-b3b4fbe23725-64ead624, #w-node-_8b96a033-21b4-299d-cf2f-3bcbf9aa5eff-64ead624, #w-node-_4fd44e1b-a32b-beef-fe98-fd2fa571937e-64ead624, #w-node-_7173dd78-e951-9cc1-812d-5604449a3cd7-64ead624, #w-node-_5db48287-f0c1-3619-a21c-2ebc4f5768d7-64ead624, #w-node-_7eabc82f-9943-e835-2722-46aded98797b-64ead624, #w-node-_77a94137-252a-5093-45f6-7a5c8061efd9-64ead624, #w-node-_9d16ff92-5619-e3a9-4627-cc185b7a456f-64ead624, #w-node-a57eb3bd-3217-87d8-5361-b6e0cb10eabe-64ead624, #w-node-d6835914-4646-dba5-814e-7fe0efb2a87e-64ead624, #w-node-_63ac0541-d969-2e37-f092-49a2b9662c66-64ead624, #w-node-ef1fea09-54c5-d6c2-3361-4a49c11a6bac-64ead624, #w-node-_69660cbf-f163-5f78-9260-5823d85f96f2-64ead624, #w-node-_6cef8732-f1cd-11a4-01ac-e10769441cec-64ead624, #w-node-_9786775e-33c6-246b-65f4-d4d07b503255-64ead624, #w-node-_3ade4f48-ef0f-7792-5173-5060a7113168-64ead624, #w-node-_77537e7e-2065-e321-86f9-c8748e735fac-64ead624, #w-node-_94285c58-91dd-665f-d450-acf669bbf0ff-64ead624, #w-node-_3277ae9c-707e-73d0-bb1b-f499055f54e9-64ead624, #w-node-d3f2f312-1f5c-fdf9-6dac-3d3ef6319134-64ead624, #w-node-f7425805-c5a0-0fd0-02e1-337abb4a6dd4-64ead624, #w-node-_49cf9a00-b156-22ae-cb96-4abe9121387b-64ead624, #w-node-_54edf413-7524-a471-7162-171067a4d6d3-64ead624, #w-node-fa6e41cf-aacb-c256-4292-9e4671e90ef2-64ead624, #w-node-d0f58952-a4ed-930d-122f-d465e73fe9db-64ead624, #w-node-b17acd13-5791-3885-76e8-174a0251a103-64ead624, #w-node-e476cfc2-3f84-cd1f-17ca-75a24485be0b-64ead626 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 767px) {
  #footer-logo-button.w-node-c3b1268a-6a14-dd3c-598c-5426bbbc835b-bbbc8321 {
    justify-self: start;
  }

  #w-node-f4f6eaa2-7fcf-87b9-0c6a-bd6b200b73b4-64ead608 {
    align-self: end;
  }
}


@font-face {
  font-family: 'Outfit variablefont wght';
  src: url('../fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}