@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", Helvetica, sans-serif;
  overscroll-behavior-y: none;
}

.desktop-wrapper {
  display: none;
  overscroll-behavior-y: none;
}

@media (min-width: 992px) {
  .mobile-wrapper {
    display: none;
  }

  .desktop-wrapper {
    display: block;
  }
}
.reorient-prompt {
  display: none;
}

@media screen and (orientation: landscape) and (max-width: 992px) {
  .desktop-wrapper {
    display: none;
  }

  .mobile-wrapper {
    display: none;
  }

  .reorient-prompt {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: -webkit-fill-available;
    width: 100vw;
  }
  .reorient-prompt p {
    width: 50%;
    font-size: 1rem;
    line-height: 1.25rem;
    text-align: center;
  }
}
.content-wrapper-desktop {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background-image: url("../assets/hexagon-background.png");
}

.desktop-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 125px;
  z-index: 10;
}
.desktop-header-link {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  height: 65px;
}
.desktop-header-link-logo {
  height: 65px;
  position: absolute;
}
.desktop-header-link-logo-white {
  height: 65px;
  opacity: 0;
  position: absolute;
}
.desktop-header-scroll {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.desktop-header-toggle {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
}
.desktop-header-toggle .hamburger {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.desktop-header-toggle .hamburger--white {
  opacity: 0;
  pointer-events: none;
}

.hex {
  position: absolute;
  height: 50px;
  width: 50px;
  z-index: 10;
  transform: translate(-50%, -50%);
}
.hex-pre {
  fill: #d3d3d3;
}

.line {
  position: absolute;
  height: 75px;
  z-index: 9;
}
.line-pre {
  fill: #d3d3d3;
}
.line-rotate {
  width: 75px;
}

.desktop-load-screen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}
.desktop-load-screen svg {
  height: 750px;
  width: 750px;
  fill: none;
  stroke: #4d4c90;
  stroke-width: 5px;
}

.desktop-loader {
  position: absolute;
  top: 50%;
  left: 0;
  width: 80vw;
  transform: translateY(-50%);
}
.desktop-loader-progress {
  position: absolute;
  top: 50%;
  left: 40vw;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 1.75rem;
}

@media (min-width: 992px) {
  body {
    height: 2000vh;
    overflow-y: hidden;
  }
}
@media (min-width: 1200px) {
  p {
    font-size: 1.25rem;
  }
}
@media (min-width: 1600px) {
  p {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
}
.desktop-nav {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}
.desktop-nav-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  height: -webkit-fill-available;
  width: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
}
.desktop-nav-main {
  list-style: none;
  position: absolute;
  top: 0;
  left: 10vw;
  height: 100vh;
  width: 40vw;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
.desktop-nav-main-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: clamp(1em, 1vw, 2em) 0;
}
.desktop-nav-main-item-number {
  height: clamp(3rem, 5.5vw, 6rem);
  width: clamp(3rem, 5.5vw, 6rem);
}
.desktop-nav-main-item-number-pre {
  fill: white;
  font-size: 50px;
}
.desktop-nav-main-item-number-fill {
  fill: #f68b43;
  font-size: 50px;
  -webkit-clip-path: polygon(0 0, 1px 0, 1px 100%, 0 100%);
          clip-path: polygon(0 0, 1px 0, 1px 100%, 0 100%);
}
.desktop-nav-main-item-text {
  color: white;
  font-weight: bold;
}
.desktop-nav-main-item-text h2 {
  margin: 0;
  cursor: pointer;
  font-size: clamp(1.5rem, 6vw, 5rem);
  line-height: clamp(1.5rem, 6vw, 5rem);
}
.desktop-nav-sub {
  margin-top: 3rem;
  display: flex;
  width: 50%;
  min-width: 500px;
  align-items: center;
  left: calc(10vw + clamp(3rem, 5.5vw, 6rem));
  justify-content: space-between;
}
.desktop-nav-sub-item {
  color: white;
  list-style: none;
}
.desktop-nav-sub-item:first-of-type {
  position: relative;
}
.desktop-nav-sub-item:first-of-type .bottom {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 1px;
  width: 0%;
  background-color: "white";
}
.desktop-nav-sub-item a {
  text-decoration: none;
}
.desktop-nav-sub-item:last-child {
  color: #f68b43;
}
.desktop-nav-expand {
  list-style: none;
  display: flex;
  margin-top: 1rem;
  flex-flow: column nowrap;
  visibility: hidden;
  opacity: 0;
}
.desktop-nav-expand li {
  margin-bottom: 0.5rem;
}
.desktop-nav-expand li a {
  color: white;
  text-decoration: none;
}

.desktop-intro {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  height: -webkit-fill-available;
  width: 100vw;
}
.desktop-intro-text-main {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  height: -webkit-fill-available;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: column;
  padding-left: 20vw;
}
.desktop-intro-text-main video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.desktop-intro-text-main h1 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  top: 0;
  left: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  background-color: white;
  background-image: linear-gradient(to left, #ececec 1px, transparent 1px, transparent), url("../assets/hexagon-background.png");
  background-size: 20% 100%, auto;
  text-align: center;
  font-size: clamp(0vw, 10vh, 8vw);
  mix-blend-mode: screen;
  padding-left: 20vw;
}
.desktop-intro-text-header {
  z-index: 10;
  opacity: 0;
  width: 100vw;
  font-size: clamp(0vw, 6.5vh, 5.2vw);
  margin: 0;
  margin-bottom: clamp(0vw, 11.5vh, 9.2vw);
  line-height: clamp(0vw, 7.5vh, 6vw);
}
.desktop-intro-text-copy {
  opacity: 0;
  width: clamp(0vw, 60vh, 48vw);
  z-index: 10;
  font-size: clamp(0vw, 2vh, 1.6vw);
  line-height: clamp(0vw, 2.5vh, 2vw);
  margin-bottom: clamp(0vw, 10vh, 8vw);
}
.desktop-intro-scroll {
  opacity: 0;
  height: 65px;
  width: 40px;
  border-radius: 30px;
  border: 3px solid #ececec;
  position: absolute;
  bottom: clamp(25px, 2.5vh, 50px);
  left: 50%;
  transform: translateX(-50%);
}
.desktop-intro-scroll-inner {
  width: 3px;
  height: 15px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ececec;
}

.hex-1 {
  top: 50vh;
  left: 80vw;
}

.desktop-excellence {
  width: 380vw;
  height: 100vh;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 100vw;
  background-image: url("../assets/hexagon-background.png");
}
.desktop-excellence-video-1 {
  height: 100%;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center top;
}
.desktop-excellence-video-2 {
  height: 100%;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 180vw;
  -o-object-fit: cover;
     object-fit: cover;
}
.desktop-excellence-video-2-header {
  text-transform: uppercase;
  position: absolute;
  left: 178.6vw;
  bottom: 0;
  color: white;
  margin: 0;
  font-size: 21.68vw;
  line-height: 14.4vw;
  opacity: 0.15;
}
.desktop-excellence-overlay {
  position: absolute;
  height: 100%;
  top: 0;
  background-image: linear-gradient(to left, #ececec 1px, transparent 1px, transparent);
}
.desktop-excellence-overlay-1 {
  width: 100vw;
  left: 0;
  background-size: 20% 100%;
  opacity: 0.25;
}
.desktop-excellence-overlay-2 {
  width: 80vw;
  left: 100vw;
  background-size: 25% 100%;
}
.desktop-excellence-overlay-3 {
  width: 100vw;
  left: 180vw;
  background-size: 20% 100%;
  opacity: 0.25;
}
.desktop-excellence-overlay-4 {
  width: 100vw;
  left: 280vw;
  background-size: 20% 100%;
}
.desktop-excellence-header {
  font-size: 7vw;
  font-weight: bold;
  color: white;
  text-align: center;
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 50%;
}
.desktop-excellence-subheader {
  color: white;
  width: 25vw;
  position: absolute;
  text-align: center;
  left: 50vw;
  top: 55%;
  transform: translateX(-50%);
}
.desktop-excellence-item {
  text-align: left;
  position: absolute;
  width: 30vw;
}
.desktop-excellence-item h2 {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.desktop-excellence-item-1 {
  bottom: 55vh;
  left: 120vw;
  color: black;
  width: 40vw;
}
.desktop-excellence-item-2 {
  top: 55vh;
  left: 200vw;
  color: white;
}
.desktop-excellence-item-3 {
  bottom: 55vh;
  left: 300vw;
  color: black;
  width: 45vw;
}
@media (min-width: 1600px) {
  .desktop-excellence-item-3 {
    width: 40vw;
  }
}

.line-1 {
  top: 50%;
  left: -20vw;
  width: 70vw;
  transform: translateY(-50%) scaleX(0);
  transform-origin: 0% 0%;
}
.line-2 {
  top: 50%;
  left: 50vw;
  width: 70vw;
  transform: translateY(-50%);
}
.line-3 {
  top: 50%;
  left: 120vw;
  width: 80vw;
  transform: translateY(-50%);
}
.line-4 {
  top: 50%;
  left: 200vw;
  width: 100vw;
  transform: translateY(-50%);
}
.line-5 {
  top: 50%;
  left: 300vw;
  width: calc(100vw + 4px);
  transform: translateY(-50%);
}

.hex-2 {
  top: 50%;
  left: 50vw;
}
.hex-3 {
  top: 50%;
  left: 120vw;
}
.hex-4 {
  top: 50%;
  left: 200vw;
}
.hex-5 {
  top: 50%;
  left: 300vw;
}

.desktop-innovation {
  position: absolute;
  left: 480vw;
  top: 0;
  width: 100vw;
  height: 525vh;
  background-image: linear-gradient(to left, #ececec 1px, transparent 1px, transparent), url("../assets/hexagon-background.png");
  background-size: 20% 100%, auto;
}
.desktop-innovation-header {
  display: flex;
  flex-flow: column;
  position: absolute;
  top: 50vh;
  left: 50vw;
  width: 50vw;
  max-width: 800px;
  text-align: center;
  transform: translateX(-50%);
  background: transparent;
}
.desktop-innovation-header h1 {
  font-size: 7vw;
  font-weight: bold;
  text-align: center;
  margin: 0;
}
.desktop-innovation-header-copy {
  margin: 0;
  padding: 3rem 0;
  opacity: 0;
}
.desktop-innovation-header-logos {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem;
  opacity: 0;
}
.desktop-innovation-header-logos img {
  width: 35%;
  margin: 0 7.5%;
}
.desktop-innovation-header-tag {
  font-weight: bold;
  opacity: 0;
}
.desktop-innovation-flask {
  position: fixed;
  top: 50vh;
  left: 100vw;
  transform: translateY(-50%);
  height: 80vh;
  width: 45.33333333vh;
  max-width: 40vw;
  max-height: 70.5882354vw;
}
.desktop-innovation-flask-inner {
  position: absolute;
  top: 3.5%;
  left: 0;
  height: 92%;
  width: 92%;
  background-size: cover;
  background-position: 0% 0%;
}
.desktop-innovation-flask-video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.desktop-innovation-flask-video-wrapper {
  position: absolute;
  top: 1%;
  left: 2%;
  height: 98%;
  width: 97%;
  opacity: 0;
  background-size: cover;
  background-position: 0% 0%;
}
.desktop-innovation-flask-video-wrapper-1 {
  opacity: 0;
}
.desktop-innovation-flask-video-wrapper-2 {
  opacity: 0;
}
.desktop-innovation-flask-video-wrapper-3 {
  opacity: 0;
}
.desktop-innovation-item {
  text-align: left;
  position: absolute;
  width: 25vw;
}
.desktop-innovation-item h2 {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 2rem;
}
.desktop-innovation-item-1 {
  top: 275vh;
  left: 70vw;
  transform: translateY(-50%);
}
.desktop-innovation-item-2 {
  top: 375vh;
  left: 5vw;
  transform: translateY(-50%);
}
.desktop-innovation-item-3 {
  top: 475vh;
  left: 70vw;
  transform: translateY(-50%);
}
.desktop-innovation-globe {
  position: absolute;
  top: 350vh;
  left: 80vw;
  min-height: 300px;
  min-width: 300px;
  max-height: 600px;
  max-width: 600px;
  height: 15vw;
  width: 15vw;
  transform: translate(-50%, -50%);
}
.desktop-innovation-globe-bg {
  height: 150%;
  width: 150%;
  transform: rotate(45deg) scale(0);
  position: absolute;
  top: -25%;
  left: -25%;
}
.desktop-innovation-globe-bg-1 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 50%;
  width: 100%;
  border-bottom: 1.5px solid #ececec;
}
.desktop-innovation-globe-bg-2 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 50%;
  border-right: 1.5px solid #ececec;
}
.desktop-innovation-globe-svg {
  height: 100%;
  width: 100%;
}
.desktop-innovation-globe-dot {
  fill: #4d4c90;
}
.desktop-innovation-globe-dot-gray {
  fill: #ececec;
}
.desktop-innovation-hex {
  height: 400px;
  width: 400px;
  position: absolute;
  top: 250vh;
  left: 20vw;
  transform: translate(-50%, -50%) rotate(90deg);
}
@media (min-width: 1600px) {
  .desktop-innovation-hex {
    width: 500px;
    height: 500px;
  }
  .desktop-innovation-globe {
    height: 20vw;
    width: 20vw;
  }
  .desktop-innovation-subheader {
    width: 30vw;
  }
}

.line-6 {
  top: calc(50vh - 2.5px);
  left: 20vw;
  height: 200vh;
  transform: translateX(-50%);
  z-index: 8;
}
.line-7 {
  top: 250vh;
  left: 20vw;
  height: calc(100vh + 2.5px);
  transform: translateX(-50%);
}
.line-8 {
  top: 350vh;
  left: calc(20vw - 4px);
  width: 60vw;
  transform: translateY(-50%);
}
.line-9 {
  top: 350vh;
  left: 80vw;
  width: 20vw;
  transform: translateY(-50%);
}

.hex-6 {
  top: 250vh;
  left: 20vw;
  transform: translate(-50%, -50%) rotate(90deg);
}
.hex-7 {
  top: 350vh;
  left: 80vw;
  transform: translate(-50%, -50%);
}

.desktop-solutions {
  position: absolute;
  left: 480vw;
  top: 425vh;
  height: 100vh;
  width: 100vw;
}
.desktop-solutions-background {
  height: 100%;
  width: 100%;
  background-image: url("../assets/periodic-table.jpeg");
  opacity: 0;
  background-position: bottom center;
}
.desktop-solutions-map {
  width: 200%;
  height: 200%;
  position: absolute;
  top: -50%;
  left: -50%;
  transform: scale(0.5);
}
.desktop-solutions-map-wrapper {
  position: absolute;
  width: 70vw;
  height: 45.836vw;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  max-width: 91.6310324vh;
  max-height: 60vh;
}
.desktop-solutions-map-inner {
  height: 100%;
  width: 100%;
  background: url("../assets/map.svg");
  background-size: cover;
}
.desktop-solutions-header {
  font-size: 7vw;
  font-weight: bold;
  text-align: center;
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 50%;
}
.desktop-solutions-subheader {
  width: 35vw;
  position: absolute;
  text-align: center;
  left: 50vw;
  top: 55%;
  transform: translateX(-50%);
}
.desktop-solutions-cta {
  opacity: 0;
  pointer-events: none;
  width: 250px;
  color: white;
  text-transform: uppercase;
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  font-weight: normal;
  margin: 0;
  letter-spacing: 0.25rem;
}
.desktop-solutions-bottom {
  pointer-events: none;
  opacity: 0;
  position: absolute;
  bottom: 15px;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.desktop-solutions-bottom-next {
  height: 100px;
  width: 100px;
  background: linear-gradient(to left, #4d4c90, #8818ff);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5%;
  border: none;
}
.desktop-solutions-bottom-next svg {
  height: 40px;
  width: 40px;
  fill: white;
}
.desktop-solutions-back {
  opacity: 0;
  pointer-events: none;
  border: none;
  background: transparent;
  cursor: pointer;
  position: absolute;
  top: 150px;
  left: 2.5%;
  color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.desktop-solutions-back svg {
  height: 25px;
  width: 25px;
  fill: black;
  margin-right: 5px;
}
.desktop-solutions-back h2 {
  text-transform: uppercase;
}
.desktop-solutions-toggles {
  width: calc(95% - 100px);
  margin-left: 2.5%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.desktop-solutions-toggle {
  cursor: pointer;
  width: 22.5%;
}
.desktop-solutions-toggle-header {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 1rem;
  align-items: center;
}
.desktop-solutions-toggle-header-button {
  position: relative;
  height: 25px;
  width: 45px;
  border-radius: 25px;
  border: 1px solid black;
  background: #d3d3d3;
  margin-right: 5px;
}
.desktop-solutions-toggle-header-button:before {
  content: "";
  display: block;
  position: absolute;
  background-color: #8818ff;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  transition: all 0.5s ease;
}
.desktop-solutions-toggle-header-button-active:before {
  width: 40px;
  transition: all 0.5s ease;
}
.desktop-solutions-toggle-header-button-inner {
  height: 25px;
  width: 25px;
  border-radius: 25px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}
.desktop-solutions-toggle-header-button-inner-active {
  transition: all 0.5s ease;
  left: 20px;
}
.desktop-solutions-toggle-header-text {
  text-transform: uppercase;
  margin: 0;
}
.desktop-solutions-toggle-copy {
  font-size: 1rem !important;
}
@media (min-width: 1600px) {
  .desktop-solutions-toggle-copy {
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
  }
}

.hex-9 {
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.line-13 {
  top: 50vh;
  left: 0;
  width: 50vw;
  transform: translateY(-50%);
}

.desktop-solutions-city {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.desktop-solutions-city svg {
  height: 100%;
  width: 100%;
}
.desktop-solutions-city .hex-green {
  fill: #a3c96c;
}
.desktop-solutions-city .hex-green-left {
  fill: #709738;
  opacity: 0;
}
.desktop-solutions-city .hex-green-center {
  fill: #8cbb47;
  opacity: 0;
}
.desktop-solutions-city .hex-green-right {
  fill: #d2e4b7;
  opacity: 0;
}
.desktop-solutions-city .hex-green-final {
  fill: #a3c96c;
  visibility: hidden;
}
.desktop-solutions-city .hex-green-final-left {
  fill: #709738;
  visibility: hidden;
}
.desktop-solutions-city .hex-green-final-center {
  fill: #8cbb47;
  visibility: hidden;
}
.desktop-solutions-city .hex-green-final-right {
  fill: #d2e4b7;
  visibility: hidden;
}
.desktop-solutions-city .hex-purple {
  fill: #8818ff;
}
.desktop-solutions-city .hex-purple-left {
  fill: #5600b1;
  opacity: 0;
}
.desktop-solutions-city .hex-purple-center {
  fill: #6f00e4;
  opacity: 0;
}
.desktop-solutions-city .hex-purple-right {
  fill: #bd7eff;
  opacity: 0;
}
.desktop-solutions-city .hex-purple-final {
  fill: #8818ff;
  visibility: hidden;
}
.desktop-solutions-city .hex-purple-final-left {
  fill: #5600b1;
  visibility: hidden;
}
.desktop-solutions-city .hex-purple-final-center {
  fill: #6f00e4;
  visibility: hidden;
}
.desktop-solutions-city .hex-purple-final-right {
  fill: #bd7eff;
  visibility: hidden;
}
.desktop-solutions-city .hex-orange {
  fill: #f68b43;
}
.desktop-solutions-city .hex-orange-left {
  fill: #c9570a;
  opacity: 0;
}
.desktop-solutions-city .hex-orange-center {
  fill: #f46d12;
  opacity: 0;
}
.desktop-solutions-city .hex-orange-right {
  fill: #fbc7a4;
  opacity: 0;
}
.desktop-solutions-city .hex-orange-final {
  fill: #f68b43;
  visibility: hidden;
}
.desktop-solutions-city .hex-orange-final-left {
  fill: #c9570a;
  visibility: hidden;
}
.desktop-solutions-city .hex-orange-final-center {
  fill: #f46d12;
  visibility: hidden;
}
.desktop-solutions-city .hex-orange-final-right {
  fill: #fbc7a4;
  visibility: hidden;
}
.desktop-solutions-city .hex-blue {
  fill: #34ddea;
}
.desktop-solutions-city .hex-blue-left {
  fill: #119ca7;
  opacity: 0;
}
.desktop-solutions-city .hex-blue-center {
  fill: #16c7d5;
  opacity: 0;
}
.desktop-solutions-city .hex-blue-right {
  fill: #90ecf4;
  opacity: 0;
}
.desktop-solutions-city .hex-blue-final {
  fill: #34ddea;
  visibility: hidden;
}
.desktop-solutions-city .hex-blue-final-left {
  fill: #119ca7;
  visibility: hidden;
}
.desktop-solutions-city .hex-blue-final-center {
  fill: #16c7d5;
  visibility: hidden;
}
.desktop-solutions-city .hex-blue-final-right {
  fill: #90ecf4;
  visibility: hidden;
}
.desktop-solutions-city-sprites {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.desktop-solutions-city-sprites-teal {
  width: 85%;
  height: 83%;
  position: absolute;
  bottom: 26.9%;
  left: -25.1%;
  opacity: 0;
}
.desktop-solutions-city-sprites-green {
  height: 77%;
  width: 83%;
  position: absolute;
  bottom: 5%;
  left: -1%;
  opacity: 0;
}
.desktop-solutions-city-sprites-purple {
  width: 81%;
  height: 75%;
  position: absolute;
  bottom: -2%;
  left: 40%;
  opacity: 0;
}
.desktop-solutions-city-sprites-orange {
  width: 78%;
  height: 72%;
  position: absolute;
  bottom: 34.5%;
  left: 36.8%;
  opacity: 0;
}

.desktop-cta {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background-image: url("../assets/cta-bg.png");
  background-size: cover;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
}
.desktop-cta-wrapper {
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  color: white;
}
.desktop-cta-wrapper-inner {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.desktop-cta-wrapper-inner > svg {
  width: 50%;
}
.desktop-cta-header-1 {
  font-size: clamp(4rem, 5vw, 5rem);
  font-style: italic;
  align-self: flex-start;
  text-transform: uppercase;
  margin: 0;
}
.desktop-cta-header-1 span {
  font-size: clamp(5.5rem, 7.5vw, 7rem);
}
.desktop-cta-header-2 {
  font-size: clamp(4rem, 5vw, 5rem);
  font-style: italic;
  align-self: flex-end;
  text-transform: uppercase;
  margin: 0;
  margin-top: -1.5rem;
  margin-bottom: 1rem;
}
.desktop-cta-header-2 span {
  font-size: clamp(5.5rem, 7.5vw, 7rem);
}
.desktop-cta-copy {
  text-align: left;
}
.desktop-cta-copy-wrapper {
  width: 40%;
}
.desktop-cta-copy a {
  color: white;
}
.desktop-cta-restart {
  text-transform: uppercase;
  color: #f68b43;
  align-self: flex-end;
  margin-top: 2rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}
.desktop-cta-restart svg {
  height: 1rem;
  width: 1rem;
  margin-left: 0.5rem;
}
.desktop-cta svg image {
  pointer-events: none;
}
.desktop-cta-hex-green {
  fill: #a3c96c;
}
.desktop-cta-hex-green-left {
  fill: #709738;
}
.desktop-cta-hex-green-center {
  fill: #8cbb47;
}
.desktop-cta-hex-green-right {
  fill: #d2e4b7;
}
.desktop-cta-hex-orange {
  fill: #f68b43;
}
.desktop-cta-hex-orange-left {
  fill: #c9570a;
}
.desktop-cta-hex-orange-center {
  fill: #f46d12;
}
.desktop-cta-hex-orange-right {
  fill: #fbc7a4;
}
.desktop-cta-hex-blue {
  fill: #34ddea;
}
.desktop-cta-hex-blue-left {
  fill: #119ca7;
}
.desktop-cta-hex-blue-center {
  fill: #16c7d5;
}
.desktop-cta-hex-blue-right {
  fill: #90ecf4;
}
.desktop-cta-sub {
  margin-top: 3rem;
  display: flex;
  width: 50%;
  min-width: 500px;
  align-items: center;
  left: calc(10vw + clamp(3rem, 5.5vw, 6rem));
  justify-content: space-between;
}
.desktop-cta-sub-wrapper {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 100%;
}
.desktop-cta-sub-wrapper-inner {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}
.desktop-cta-sub-item {
  color: white;
  list-style: none;
}
.desktop-cta-sub-item:first-of-type {
  position: relative;
}
.desktop-cta-sub-item:first-of-type .bottom {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  height: 1px;
  width: 0%;
  background-color: "white";
}
.desktop-cta-sub-item a {
  text-decoration: none;
}
.desktop-cta-sub-item:last-child {
  color: #f68b43;
}
.desktop-cta-expand {
  list-style: none;
  display: flex;
  margin-top: 1rem;
  flex-flow: column nowrap;
  visibility: hidden;
  opacity: 0;
}
.desktop-cta-expand li {
  margin-bottom: 0.5rem;
}
.desktop-cta-expand li a {
  color: white;
  text-decoration: none;
}

/* ===================   =================   */
/* ===============  UTILITIES   =============   */
/*  ===================   =================   */
.scrollY {
  overflow-y: scroll;
}

.absoluteBottom {
  position: absolute;
  bottom: 0;
}

.textPadding {
  padding: 2rem 1rem;
}

.flexGrow {
  flex-grow: 1;
}

.flexWrap {
  flex-wrap: wrap;
}

.mx-auto {
  margin: 0 auto;
}

.my-auto {
  margin: auto 0;
}

.m-auto {
  margin: auto;
}

html {
  touch-action: pan-x;
}

.mobile-bg {
  height: 100vh;
  width: 100vw;
  background-image: url("../assets/hexagon-background.png");
  background-size: cover;
}

.content-wrapper-mobile {
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
}

.mobile-header {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - 2rem);
  height: 50px;
  padding: 1rem;
  z-index: 2000;
}
.mobile-header-relative-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.mobile-header-relative-wrapper .mobile-hamburger {
  position: absolute;
  top: 0;
  right: 0;
}
.mobile-header-relative-wrapper .hamburger--white-mobile {
  opacity: 0;
  pointer-events: none;
}
.mobile-header-link img {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
}
.mobile-header-link-logo-white {
  opacity: 0;
}
.mobile-header-scroll {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mobile-header-toggle {
  opacity: 0;
  pointer-events: none;
}

.mobile-intro {
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100vw;
  margin: 0 auto;
  background-image: linear-gradient(to left, #ececec 1px, white 1px, white);
  background-size: 20% 100%;
  padding: 5rem 0 0;
  position: relative;
}
.mobile-intro-heading-container {
  display: flex;
  flex-direction: column-reverse;
  width: 90vw;
  margin-left: 5vw;
}
.mobile-intro-text-main {
  width: 100vw;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.mobile-intro-text-main video {
  position: absolute;
  top: 0;
  left: -330px;
  width: 240%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mobile-intro-text-main h1 {
  width: 100%;
  margin: 0;
  background-image: linear-gradient(to left, #ececec 1px, white 1px, white), url("../assets/hexagon-background.png");
  background-size: 20% 100%, auto;
  text-align: left;
  font-size: 7.4vw;
  font-size: min(max(2rem, (1.25rem + 6vw)), 4rem);
  font-size: clamp(2rem, 1.25rem + 6vw, 4rem);
  mix-blend-mode: screen;
  background-position: -5vw;
}
.mobile-intro-text-header {
  margin: 0;
  font-size: 7.4vw;
  font-size: min(max(1.75rem, (1rem + 4vw)), 3.25rem);
  font-size: clamp(1.75rem, 1rem + 4vw, 3.25rem);
}
.mobile-intro-text-copy {
  width: 90vw;
  margin-left: 5vw;
  margin-bottom: 4rem;
}
.mobile-intro-swipe-prompt {
  position: absolute;
  bottom: 0%;
  right: 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  opacity: 0;
}
.mobile-intro-swipe-prompt p {
  font-size: 0.9rem;
}
.mobile-intro-swipe-prompt svg {
  margin-left: 5px;
}

.mobile-progress {
  width: 500vw;
  position: fixed;
  bottom: 0.5rem;
  left: 0;
  display: flex;
  justify-content: flex-start;
}
.mobile-progress-item {
  height: 0.65rem;
  background-color: #ececec;
}
.mobile-progress-item-filled {
  height: 100%;
  width: 100%;
  background-color: #8818ff;
  transform: scaleX(0);
  transform-origin: 0%;
}
.mobile-progress-intro {
  width: 100vw;
}
.mobile-progress-excellence-1 {
  margin-left: 0;
  width: 24vw;
}
.mobile-progress-excellence-2, .mobile-progress-excellence-3, .mobile-progress-excellence-4 {
  width: 24vw;
  margin-left: 1.333333333vw;
}
.mobile-progress-innovation-1 {
  margin-left: 0;
  width: 32vw;
}
.mobile-progress-innovation-2, .mobile-progress-innovation-3 {
  width: 32vw;
  margin-left: 1.333333333vw;
}
.mobile-progress-solutions-1 {
  margin-left: 0;
  width: 19vw;
}
.mobile-progress-solutions-2, .mobile-progress-solutions-3, .mobile-progress-solutions-4, .mobile-progress-solutions-5 {
  width: 19vw;
  margin-left: 1.333333333vw;
}

.mobile-loader-progress {
  font-size: 20vw;
  margin: 0;
  font-weight: bold;
  position: fixed;
  top: 50%;
  left: 50vw;
  transform: translate(-50%, -50%);
}

@media (max-width: 1200px) {
  p {
    font-size: 1.15rem;
  }
}
.mobile-excellence {
  width: 100vw;
  top: 5rem;
  height: calc( 100vh - 160px );
  height: -webkit-fill-available;
  position: absolute;
  left: 100vw;
}
.mobile-excellence-intro-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: calc(100% + 1rem);
  color: white;
  background-image: url("../assets/tl1/tl1.jpg");
  background-size: cover;
  background-position: 100% 100%;
}
.mobile-excellence-intro-wrapper {
  position: absolute;
  bottom: 0;
  padding-bottom: 2rem;
  background-image: linear-gradient(to bottom, transparent 0%, black 50%);
}
.mobile-excellence-intro-wrapper h1, .mobile-excellence-intro-wrapper p {
  color: white;
}
.mobile-excellence-header {
  margin: 0;
  padding-top: 1rem;
  font-size: 8vw;
  font-size: clamp(2rem, 15vw, 4rem);
  font-weight: bold;
  color: black;
  text-align: center;
  width: 100vw;
  z-index: 1;
}
.mobile-excellence-subheader {
  color: black;
  text-align: center;
  margin: 1rem;
}
.mobile-excellence-progress-container {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  bottom: 0rem;
  position: fixed;
  padding-top: 3rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
  overflow-x: hidden;
}
.mobile-excellence-progress {
  width: 25vw;
  height: 0.75rem;
  background: #ddd;
  margin: 0 0.25rem;
}
.mobile-excellence-progress:first-child {
  margin-left: -1px;
}
.mobile-excellence-progress:last-child {
  margin-right: -5px;
}
.mobile-excellence-progress-filled {
  width: 100%;
  height: 100%;
}
.mobile-excellence-item {
  text-align: left;
  position: absolute;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-excellence-item-video-1, .mobile-excellence-item-video-2, .mobile-excellence-item-video-3 {
  height: 60%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mobile-excellence-item-video-1-overlay {
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
}
.mobile-excellence-item-text-container {
  flex-grow: 1;
  color: black;
  padding: 1rem;
}
.mobile-excellence-item h2 {
  font-weight: bold;
  text-transform: uppercase;
  margin: 0.25rem 0;
  font-size: 1rem;
  font-size: min(max(1.125rem, (1rem + 2vw)), 1.75rem);
  font-size: clamp(1.125rem, (1rem + 2vw), 1.75rem);
  margin-bottom: 1rem;
}
.mobile-excellence-item p {
  margin: 0;
}
.mobile-excellence-item-1 {
  top: 0rem;
  left: 100vw;
  color: black;
}
.mobile-excellence-item-2 {
  top: 0rem;
  left: 200vw;
  color: black;
}
.mobile-excellence-item-3 {
  top: 0rem;
  left: 300vw;
  color: black;
}
@media (min-width: 768px) {
  .mobile-excellence-header {
    font-size: clamp(2rem, 15vw, 6rem);
  }
  .mobile-excellence-subheader {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
  .mobile-excellence-item p {
    font-size: 1.25rem;
  }
}

.mobile-innovation {
  width: 100vw;
  top: 5rem;
  position: absolute;
  left: 500vw;
}
.mobile-innovation-intro-slide {
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
}
.mobile-innovation-header {
  margin: 0;
  font-size: clamp(2rem, 15vw, 4rem);
  font-weight: bold;
  color: black;
  text-align: center;
  width: 100vw;
  z-index: 1;
}
.mobile-innovation-flask {
  height: 47.5vh;
  width: 25.5vh;
  margin: 0 auto;
  position: relative;
}
.mobile-innovation-flask-inner {
  position: absolute;
  top: 2.5%;
  left: 0;
  height: 92%;
  width: 92%;
  background-size: cover;
  background-position: 100% 0%;
}
.mobile-innovation-flask-video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mobile-innovation-flask-video-wrapper {
  position: absolute;
  top: 0;
  left: -2%;
  height: 98%;
  width: 100%;
  opacity: 0;
  background-size: cover;
}
.mobile-innovation-header-copy {
  padding: 1rem;
  margin: 0;
}
.mobile-innovation-header-logos {
  display: flex;
  padding: 1rem;
  justify-content: center;
}
.mobile-innovation-header-logos img {
  width: 45%;
  max-width: 250px;
}
.mobile-innovation-header-logos img:last-child {
  margin-left: 5vw;
}
.mobile-innovation-grouped-copy {
  padding: 1rem;
}
.mobile-innovation-subheader {
  color: black;
  text-align: center;
  font-size: 7.4vw;
  font-size: min(max(1.5rem, (1.25rem + 3vw)), 3rem);
  font-size: clamp(1.5rem, 1.25rem + 3vw, 3rem);
  line-height: 1.7;
  margin: 0;
}
.mobile-innovation-progress-container {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  position: fixed;
  bottom: 0rem;
  padding-top: 3rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
  overflow-x: hidden;
}
.mobile-innovation-progress {
  width: 25vw;
  height: 0.75rem;
  background: #ddd;
  margin: 0 0.25rem;
}
.mobile-innovation-progress:first-child {
  margin-left: -5px;
}
.mobile-innovation-progress:last-child {
  margin-right: -5px;
}
.mobile-innovation-progress-filled {
  width: 100%;
  height: 100%;
}
.mobile-innovation-globe {
  margin: 1rem auto;
  min-height: 300px;
  min-width: 300px;
  max-height: 400px;
  max-width: 400px;
  height: 40vh;
  width: 40vh;
  position: relative;
}
.mobile-innovation-globe-bg {
  height: 120%;
  width: 120%;
  transform: rotate(45deg) scale(0);
  position: relative;
  left: -10%;
  top: -10%;
}
.mobile-innovation-globe-bg-1 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 50%;
  width: 100%;
  border-bottom: 1.5px solid #ececec;
}
.mobile-innovation-globe-bg-2 {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 50%;
  border-right: 1.5px solid #ececec;
}
.mobile-innovation-globe-svg {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}
.mobile-innovation-item {
  text-align: left;
  position: absolute;
  width: 100vw;
  display: flex;
  flex-direction: column;
}
.mobile-innovation-item-text-container {
  flex-grow: 1;
  color: white;
  color: black;
}
.mobile-innovation-item h2 {
  font-weight: bold;
  text-transform: uppercase;
  margin: 0.25rem 0;
  font-size: 1rem;
  font-size: min(max(1.125rem, (1rem + 2vw)), 1.75rem);
  font-size: clamp(1.125rem, (1rem + 2vw), 1.75rem);
  margin-bottom: 1rem;
}
.mobile-innovation-item p {
  margin: 0;
}
.mobile-innovation-item-1 {
  top: 0rem;
  left: 100vw;
  color: black;
  overflow-x: hidden;
}
.mobile-innovation-item-2 {
  top: 0rem;
  left: 200vw;
  color: black;
}
.mobile-innovation-item-3 {
  top: 0rem;
  left: 300vw;
  color: black;
  display: flex;
}
.mobile-innovation-item-3-concentric-hexes {
  position: relative;
  height: 38vh;
}
.mobile-innovation-circles {
  width: 70vw;
  margin: 1rem auto;
  max-width: 400px;
}
@media (min-width: 768px) {
  .mobile-innovation-header {
    font-size: clamp(2rem, 15vw, 6rem);
  }
  .mobile-innovation-header-copy {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
  .mobile-innovation-item-1 p, .mobile-innovation-item-2 p, .mobile-innovation-item-3 p {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

.mobile-innovation-hex {
  height: 40vh;
  width: 40vh;
  margin: 1rem auto;
  min-height: 300px;
  max-height: 400px;
}
.mobile-innovation-hex polygon {
  fill: #8818ff;
}

.mobile-nav {
  height: calc(100vh - var(--vh-offset, 0px));
  height: -webkit-fill-available;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mobile-nav-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
}
.mobile-nav-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100vh - var(--vh-offset, 0px));
  height: -webkit-fill-available;
  width: 90vw;
  max-width: 500px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: 20vh 0 5vh 10vw;
}
.mobile-nav-main {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}
.mobile-nav-main-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 2vw 0;
}
.mobile-nav-main-item-number {
  height: clamp(3rem, 5.5vw, 6rem);
  width: clamp(3rem, 5.5vw, 6rem);
}
.mobile-nav-main-item-number-pre {
  fill: white;
  opacity: 0.8;
  font-size: 50px;
}
.mobile-nav-main-item-number-fill {
  fill: #f68b43;
  font-size: 50px;
}
.mobile-nav-main-item-text {
  color: white;
  font-size: clamp(1.5rem, 11vw, 6rem);
  line-height: clamp(1.5rem, 12vw, 6rem);
  font-weight: bold;
}
.mobile-nav-main-item-text a {
  color: white;
  text-decoration: none;
}
.mobile-nav-sub-wrapper {
  display: flex;
  flex-flow: row nowrap;
}
.mobile-nav-sub, .mobile-nav-expand {
  padding: 0;
  list-style: none;
}
.mobile-nav-sub li, .mobile-nav-expand li {
  margin-bottom: 0.75rem;
}
.mobile-nav-sub li:last-of-type, .mobile-nav-expand li:last-of-type {
  margin-bottom: 0;
}
.mobile-nav-sub li a, .mobile-nav-expand li a {
  color: white;
  text-decoration: none;
}
.mobile-nav-sub {
  position: relative;
  margin-right: 2rem;
  opacity: 0;
  visibility: hidden;
}
.mobile-nav-sub-after {
  position: absolute;
  right: -1rem;
  top: 0;
  height: 0%;
  width: 1px;
  background-color: white;
}
.mobile-nav-expand {
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 768px) {
  .mobile-nav-inner {
    padding-top: 10vh;
    max-width: 800px;
  }
  .mobile-nav-main-item-number {
    height: clamp(3rem, 6.5vw, 6rem);
    width: clamp(3rem, 6.5vw, 6rem);
  }
  .mobile-nav-main-item-number-pre {
    font-size: 60px;
  }
  .mobile-nav-main-item-number-fill {
    font-size: 60px;
  }
  .mobile-nav-main-item-text {
    font-size: clamp(1.5rem, 10vw, 5rem);
  }
}

.mobile-solutions {
  width: 100vw;
  top: 5rem;
  position: absolute;
  left: 800vw;
  z-index: 5000;
  pointer-events: none;
}
.mobile-solutions-intro-slide {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.mobile-solutions-background {
  height: 100vh;
  width: 100vh;
  background-image: url("../assets/periodic-table.jpeg");
  opacity: 0;
  position: fixed;
  background-position: center;
  pointer-events: none;
  z-index: -1;
  top: 0;
  left: 0;
}
.mobile-solutions-map {
  width: 100%;
  height: 100%;
  position: relative;
  transform: scale(1);
}
.mobile-solutions-map-wrapper {
  position: fixed;
  left: 100vw;
  width: 100vw;
  height: 65.48vw;
  opacity: 0;
}
.mobile-solutions-map-inner {
  height: 100%;
  width: 100%;
  background: url("../assets/map.svg");
  background-size: cover;
}
.mobile-solutions-header {
  margin: 0;
  font-size: 8vw;
  font-size: min(max(2rem, (1.25rem + 5vw)), 3.25rem);
  font-size: clamp(2rem, 1.25rem + 5vw, 3.25rem);
  font-weight: bold;
  color: black;
  text-align: center;
  width: 100vw;
  z-index: 1;
}
.mobile-solutions-grouped-copy {
  padding: 1rem 1rem 1rem;
  height: calc(100% - 2rem);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.mobile-solutions-grouped-copy h2 {
  font-weight: bold;
  width: 100%;
  font-size: clamp(2rem, 15vw, 4rem);
}
.mobile-solutions-transparent-background {
  background: rgba(255, 255, 255, 0.4);
}
.mobile-solutions-progress-container {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  position: fixed;
  bottom: 0rem;
  padding-top: 3rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
  overflow-x: hidden;
}
.mobile-solutions-progress {
  width: 25vw;
  height: 0.75rem;
  background: #ddd;
  margin: 0 0.25rem;
}
.mobile-solutions-progress:first-child {
  margin-left: -5px;
}
.mobile-solutions-progress:last-child {
  margin-right: -5px;
}
.mobile-solutions-progress-filled {
  width: 100%;
  height: 100%;
}
.mobile-solutions-item {
  height: calc(100vh - var(--vh-offset, 0px) - 50px) !important;
  text-align: left;
  position: absolute;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 0rem;
  color: black;
}
.mobile-solutions-item-1 {
  left: 100vw;
}
.mobile-solutions-item-1 .mobile-solutions-grouped-copy {
  opacity: 0;
}
.mobile-solutions-item-2 {
  left: 200vw;
}
.mobile-solutions-item-3 {
  left: 300vw;
}
.mobile-solutions-item-4 {
  left: 400vw;
}
.mobile-solutions-item .mobile-solutions-grouped-copy {
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, white);
}
.mobile-solutions-item .mobile-solutions-grouped-copy h2 {
  font-size: 2rem;
  margin: 0;
}
.mobile-solutions-item .mobile-solutions-grouped-copy p {
  margin-bottom: 2.5rem;
}
.mobile-solutions-blurbs {
  opacity: 0;
  width: 400vw;
  position: fixed;
  bottom: 0;
  left: 100vw;
  display: flex;
  flex-flow: row nowrap;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.01), white 45%);
  padding-top: 1rem;
}
.mobile-solutions-blurb {
  width: 100vw;
  padding: 1rem;
}
.mobile-solutions-blurb h2 {
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .mobile-solutions-header {
    font-size: clamp(2rem, 15vw, 6rem) !important;
  }
  .mobile-solutions-transparent-background {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

.mobile-solutions-city {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mobile-solutions-city svg {
  height: 100%;
  width: 100%;
}
.mobile-solutions-city .mobile-hex-green {
  fill: #a3c96c;
}
.mobile-solutions-city .mobile-hex-green-left {
  fill: #709738;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-green-center {
  fill: #8cbb47;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-green-right {
  fill: #d2e4b7;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-green-final {
  fill: #a3c96c;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-green-final-left {
  fill: #709738;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-green-final-center {
  fill: #8cbb47;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-green-final-right {
  fill: #d2e4b7;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-purple {
  fill: #8818ff;
}
.mobile-solutions-city .mobile-hex-purple-left {
  fill: #5600b1;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-purple-center {
  fill: #6f00e4;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-purple-right {
  fill: #bd7eff;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-purple-final {
  fill: #8818ff;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-purple-final-left {
  fill: #5600b1;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-purple-final-center {
  fill: #6f00e4;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-purple-final-right {
  fill: #bd7eff;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-orange {
  fill: #f68b43;
}
.mobile-solutions-city .mobile-hex-orange-left {
  fill: #c9570a;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-orange-center {
  fill: #f46d12;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-orange-right {
  fill: #fbc7a4;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-orange-final {
  fill: #f68b43;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-orange-final-left {
  fill: #c9570a;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-orange-final-center {
  fill: #f46d12;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-orange-final-right {
  fill: #fbc7a4;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-blue {
  fill: #34ddea;
}
.mobile-solutions-city .mobile-hex-blue-left {
  fill: #119ca7;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-blue-center {
  fill: #16c7d5;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-blue-right {
  fill: #90ecf4;
  opacity: 0;
}
.mobile-solutions-city .mobile-hex-blue-final {
  fill: #34ddea;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-blue-final-left {
  fill: #119ca7;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-blue-final-center {
  fill: #16c7d5;
  visibility: hidden;
}
.mobile-solutions-city .mobile-hex-blue-final-right {
  fill: #90ecf4;
  visibility: hidden;
}
.mobile-solutions-city-sprites {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mobile-solutions-city-sprites-teal {
  width: 86%;
  height: 84%;
  position: absolute;
  bottom: 16.6%;
  left: -25.9%;
  opacity: 0;
}
.mobile-solutions-city-sprites-green {
  height: 78.7%;
  width: 85%;
  position: absolute;
  bottom: -5%;
  left: -2%;
  opacity: 0;
}
.mobile-solutions-city-sprites-purple {
  width: 82%;
  height: 75.9%;
  position: absolute;
  bottom: -11%;
  left: 40%;
  opacity: 0;
  pointer-events: none;
}
.mobile-solutions-city-sprites-orange {
  width: 78%;
  height: 72.2%;
  position: absolute;
  bottom: 24%;
  left: 37%;
  opacity: 0;
}

.mobile-cta {
  width: 100vw;
  padding-top: 6rem;
  padding-bottom: 1rem;
  top: 0rem;
  position: absolute;
  left: 1300vw;
  pointer-events: none;
  background-image: url("../assets/cta-bg.png");
  background-size: cover;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  overflow-y: scroll;
}
.mobile-cta-wrapper {
  width: 90%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
  color: white;
}
.mobile-cta-header-1 {
  font-size: 1.25rem;
  font-style: italic;
  align-self: start;
  text-transform: uppercase;
  margin: 0;
}
.mobile-cta-header-1 span {
  font-size: 2.25rem;
}
.mobile-cta-header-2 {
  font-size: 1.25rem;
  font-style: italic;
  align-self: end;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 0.5rem;
}
.mobile-cta-header-2 span {
  font-size: 2.25rem;
}
.mobile-cta-copy {
  align-self: end;
  text-align: left;
  width: 100%;
  margin-top: 0.5rem;
}
.mobile-cta-copy a {
  color: white;
}
.mobile-cta svg {
  margin-top: 1rem;
  max-width: 600px;
}
.mobile-cta svg image {
  pointer-events: none;
}
.mobile-cta-hex-green {
  fill: #a3c96c;
}
.mobile-cta-hex-green-left {
  fill: #709738;
}
.mobile-cta-hex-green-center {
  fill: #8cbb47;
}
.mobile-cta-hex-green-right {
  fill: #d2e4b7;
}
.mobile-cta-hex-orange {
  fill: #f68b43;
}
.mobile-cta-hex-orange-left {
  fill: #c9570a;
}
.mobile-cta-hex-orange-center {
  fill: #f46d12;
}
.mobile-cta-hex-orange-right {
  fill: #fbc7a4;
}
.mobile-cta-hex-blue {
  fill: #34ddea;
}
.mobile-cta-hex-blue-left {
  fill: #119ca7;
}
.mobile-cta-hex-blue-center {
  fill: #16c7d5;
}
.mobile-cta-hex-blue-right {
  fill: #90ecf4;
}
.mobile-cta-restart {
  text-transform: uppercase;
  color: #f68b43;
  width: 50%;
  align-self: start;
  margin-top: 2rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}
.mobile-cta-restart svg {
  height: 1rem;
  width: 1rem;
  margin-left: 0.5rem;
  margin-top: 0;
}
.mobile-cta-sub-wrapper {
  display: flex;
  flex-flow: row nowrap;
}
.mobile-cta-sub, .mobile-cta-expand {
  padding: 0;
  list-style: none;
}
.mobile-cta-sub li, .mobile-cta-expand li {
  margin-bottom: 0.75rem;
}
.mobile-cta-sub li:last-of-type, .mobile-cta-expand li:last-of-type {
  margin-bottom: 0;
}
.mobile-cta-sub li a, .mobile-cta-expand li a {
  color: white;
  text-decoration: none;
}
.mobile-cta-sub {
  position: relative;
  margin-right: 2rem;
}
.mobile-cta-sub-after {
  position: absolute;
  right: -1rem;
  top: 0;
  height: 0%;
  width: 1px;
  background-color: white;
}
.mobile-cta-expand {
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 768px) {
  .mobile-cta-header-1 {
    font-size: 3rem;
  }
  .mobile-cta-header-1 span {
    font-size: 4rem;
  }
  .mobile-cta-header-2 {
    font-size: 3rem;
  }
  .mobile-cta-header-2 span {
    font-size: 4rem;
  }
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger:hover {
  opacity: 0.7;
}
.hamburger:hover .hamburger-inner:after {
  width: 35px;
  transition: width 0.15s ease;
}
.hamburger.is-active:hover {
  opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: white;
}
.hamburger.is-active .hamburger-inner::after {
  width: 35px;
}
.hamburger--white .hamburger-inner,
.hamburger--white .hamburger-inner::before,
.hamburger--white .hamburger-inner::after {
  background-color: white;
}

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

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1.5px;
}
.hamburger-inner, .hamburger-inner::before {
  width: 35px;
  height: 3px;
  background-color: black;
  border-radius: 10px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::after {
  width: 17.5px;
  height: 3px;
  background-color: black;
  border-radius: 10px;
  position: absolute;
  transition: all 0.15s ease;
}
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -9px;
}
.hamburger-inner::after {
  bottom: -9px;
}

/*
 * Emphatic
 */
.hamburger--emphatic {
  overflow: hidden;
}
.hamburger--emphatic .hamburger-inner {
  transition: background-color 0.125s 0.175s ease-in;
}
.hamburger--emphatic .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}
.hamburger--emphatic .hamburger-inner::after {
  top: 9px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, width 0.15s ease;
}
.hamburger--emphatic.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}
.hamburger--emphatic.is-active .hamburger-inner::before {
  left: -70px;
  top: -70px;
  transform: translate3d(70px, 70px, 0) rotate(45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic.is-active .hamburger-inner::after {
  right: -70px;
  top: -70px;
  transform: translate3d(-70px, 70px, 0) rotate(-45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}