@font-face {
  font-family: Tt Hoves Pro Webfont;
  src: url('../fonts/tt_hoves_pro_medium-webfont.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Tt Hoves Pro Trial Variable;
  src: url('../fonts/TT-Hoves-Pro-Trial-Variable.ttf') format("truetype");
  font-weight: 50 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --clear: transparent;
  --dark-brand: #b8c2c7;
  --mainbrandcolour: #f0f5ff;
  --variable-bg-services: #f0f5ff;
  --variable-colour-new: #f0f5ff;
  --service-text-variable: #b8c2c7;
  --brand-light-difference: #f0f5ff;
  --project-colour-variable-light: #c4ff03;
  --variable-nav-dark: #b8c2c7;
  --pink: #ffb4b4;
  --services-variable: #f0f5ff;
  --nav: 145px;
  --variable-bg-light: #fab4b233;
  --topspace: 25px;
  --servicecolour: var(--mainbrandcolour);
  --variable-new-service: #cbcbcb;
  --noth-variable-services: #f0f5ff;
  --test-colour: #36ff73;
  --project-variable-dark: #cbcbcb;
  --project-text-variable-light: #f0f5ff;
  --button-variable: #00247780;
  --metal: #cbcbcb;
}

.textarea {
  z-index: 0;
  background-color: var(--clear);
  mix-blend-mode: normal;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.innerpagecontainer {
  z-index: 300;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: scroll;
}

.innerpagecontainer.sticky {
  position: sticky;
  top: 50px;
}

.notch {
  z-index: 50;
  background-color: #f85353;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex: none;
  width: 95vw;
  height: 90vh;
  margin-bottom: 0;
  position: sticky;
  top: 20px;
  overflow: scroll;
}

.page {
  background-color: #831f1f;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.page.spacer {
  background-color: #0000;
  flex: none;
  width: 100vw;
  height: 95vh;
}

.stickpage {
  z-index: 1;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 95vw;
  height: 400vh;
  display: flex;
  position: relative;
  top: 1px;
  overflow: auto;
}

.studiotext {
  z-index: 1;
  color: var(--dark-brand);
  mix-blend-mode: normal;
  background-color: #0000;
  margin-top: -70px;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 32em;
  font-weight: 400;
  position: absolute;
}

.studiotext.blue {
  z-index: 2;
  color: var(--mainbrandcolour);
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 32em;
  font-weight: 400;
  position: static;
}

.mask {
  width: 95vw;
  position: sticky;
  top: 100px;
}

.fullpage {
  background-color: var(--clear);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.fullpage.light {
  background-color: var(--mainbrandcolour);
  justify-content: center;
  align-items: center;
  height: auto;
}

.fullpage.light.long {
  height: auto;
}

.fullpage.light.inner {
  background-color: var(--mainbrandcolour);
}

.fullpage.light.inner.new {
  background-color: var(--mainbrandcolour);
  position: relative;
}

.fullpage.light.inner.dark {
  background-color: var(--dark-brand);
  position: relative;
}

.fullpage.clear {
  justify-content: flex-start;
  align-items: center;
  height: auto;
  margin-top: 0;
  position: relative;
}

.fullpage.dark, .fullpage.long {
  background-color: var(--mainbrandcolour);
  height: auto;
}

.pages {
  z-index: 11;
  background-color: var(--clear);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 96vw;
  height: 100vh;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  position: sticky;
  top: 0;
  overflow: scroll;
}

.notch-start-funtions {
  z-index: 100;
  background-color: var(--dark-brand);
  opacity: 1;
  border-radius: 50px;
  flex: none;
  width: 200px;
  height: 6px;
  margin-top: 0;
  position: absolute;
}

.notch-start-funtions.clear {
  background-color: #c4ff0300;
}

.notch-start-funtions.day {
  background-color: var(--mainbrandcolour);
}

.stopsrolltop {
  background-color: #a528288c;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.scrollblock {
  z-index: 300;
  background-color: var(--clear);
  flex: none;
  width: 100%;
  height: 95vh;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 95vh;
}

.button-button {
  aspect-ratio: 1;
  border: 1px solid var(--mainbrandcolour);
  background-color: var(--clear);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin-left: 9px;
  margin-right: 9px;
  display: flex;
  position: static;
}

.div-block-362 {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background-color: #000000b0;
  border-radius: 25px 25px 0 0;
  width: 90%;
  height: 100vh;
}

.popupforms {
  background-color: #0000;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  display: flex;
}

.div-block-365 {
  background-color: var(--mainbrandcolour);
  border-radius: 10px;
  width: 25px;
  height: 2px;
  position: absolute;
  transform: rotate(0);
}

.div-block-365.cross {
  background-color: var(--mainbrandcolour);
  width: 25px;
  height: 2px;
  transform: rotate(90deg);
}

.projectbutton-form {
  z-index: 1000;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 100vh 0% 0%;
  overflow: visible;
}

.projectbutton-form.test {
  top: 100vh;
}

.navigation-menu {
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #111;
  border-radius: 15px;
  justify-content: flex-start;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: -13vh;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 5px;
  display: flex;
  overflow: hidden;
}

.button {
  mix-blend-mode: difference;
  background-color: #171719;
  border-radius: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
}

.projecttext {
  color: var(--variable-bg-services);
  text-align: center;
  width: auto;
  font-size: 20px;
  position: absolute;
}

.logonav {
  z-index: 370;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: flex-start;
  align-items: center;
  width: 15%;
  height: 80px;
  margin-top: 49px;
  margin-left: 100px;
  padding-bottom: 0;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.logonav.dark {
  z-index: 150;
  mix-blend-mode: normal;
  margin-top: 60px;
  margin-left: 120px;
}

.logoblock {
  width: auto;
  height: auto;
  display: flex;
}

.lightlogo {
  width: 40px;
  position: absolute;
}

.lightlogo.light {
  position: static;
}

.lightlogo.dark {
  opacity: 0;
  position: absolute;
}

.logotextblock {
  display: flex;
}

.studoilogo {
  color: var(--variable-colour-new);
  letter-spacing: 0;
  -webkit-text-stroke-color: #000;
  margin-left: 15px;
  font-size: 19px;
  font-style: normal;
  font-weight: 300;
  text-decoration: none;
  display: flex;
}

.share {
  -webkit-text-stroke-color: #0000;
  background-color: #1a1a1aeb;
  border-radius: 50px;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 330px;
  height: 60px;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 10px;
  display: flex;
}

.hello-open {
  cursor: auto;
  background-color: #0000;
  border-radius: 50px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 10px;
  display: flex;
}

.contactstripmove {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  width: 100%;
  height: 60px;
  margin-right: 0;
  padding-left: 10px;
  padding-right: 0;
  display: flex;
  overflow: visible;
}

.thanks {
  color: #fc7d79;
  font-size: 18px;
  font-weight: 500;
}

.helloopendesktop {
  width: 100%;
  height: 100%;
  display: flex;
}

.rightbutton {
  color: #d4dede8c;
  cursor: pointer;
}

.rightbutton.message, .rightbutton.address {
  cursor: pointer;
}

.whatsapp {
  -webkit-text-stroke-color: #0000;
  background-color: #2e1f213d;
  border-radius: 50px;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 330px;
  height: 60px;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 10px;
  text-decoration: none;
  display: flex;
}

.contact-points {
  z-index: 200;
  opacity: 1;
  mix-blend-mode: normal;
  background-color: #0000;
  border-radius: 10px;
  flex-flow: column;
  flex: 0 auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  padding-left: 10px;
  padding-right: 10px;
  display: none;
  position: static;
  overflow: visible;
}

.image-203 {
  mix-blend-mode: difference;
  width: 25px;
  display: block;
}

.controlbuttons {
  border-radius: 100px;
  order: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.closeconnectmobile {
  cursor: pointer;
  background-color: #0000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 0;
  margin-right: 0;
  display: flex;
}

.closeconnectmobile.dark {
  background-color: #00000029;
  width: 55px;
  height: 55px;
  margin-top: 10px;
  display: none;
}

.sound-icon-dark {
  z-index: 1;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 55%;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: absolute;
}

.sound-icon-dark.night {
  z-index: 1;
  width: 55%;
  height: auto;
  margin-left: 0;
  position: absolute;
}

.sound-icon-dark.day {
  opacity: 0;
  position: absolute;
}

.image-160-large {
  width: 30px;
  margin-bottom: 15px;
  margin-left: 9px;
  padding-bottom: 0;
}

.lightdot {
  opacity: 1;
  width: 30px;
  display: inline-block;
  position: absolute;
}

.entrytext {
  background-color: #0000;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 49px;
  margin-left: 0;
  font-family: roboto-mono, sans-serif;
  display: flex;
}

.closeconnect, .closeconnectdesktop {
  cursor: pointer;
  background-color: #0000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 0;
  margin-right: 0;
  display: flex;
}

.closeconnectdesktop.dark {
  border: 0px solid var(--variable-colour-new);
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  margin-top: 10px;
}

.disableanimation {
  z-index: 2000;
  width: 100%;
  height: 100%;
  padding-left: 0;
  position: absolute;
}

.buttons-connect {
  aspect-ratio: 1;
  border: 1px solid var(--variable-colour-new);
  opacity: 1;
  color: #0000;
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #0000;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 55px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  text-decoration: none;
  display: flex;
  position: relative;
}

.buttons-connect:hover {
  background-color: var(--service-text-variable);
  border-color: #f37570;
  flex: 0 auto;
}

.connecttext {
  box-sizing: border-box;
  color: #2b2d36;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  overflow: visible;
}

.connecttext.light {
  color: #fc7d79;
}

.lightimage {
  z-index: 2;
  mix-blend-mode: normal;
  width: auto;
  max-width: none;
  height: auto;
  max-height: 100%;
  position: absolute;
}

.image-204 {
  width: 13px;
  position: absolute;
}

.imageprofile {
  background-color: #35d35f;
  background-image: url('../images/Image-29_1Image 29.png');
  background-position: 0 0;
  background-size: cover;
  border-radius: 50px;
  width: 45px;
  height: 45px;
}

.email {
  color: #fd0505;
  -webkit-text-stroke-color: #0000;
  background-color: #000;
  border: 0 solid #ff3c3c78;
  border-radius: 50px;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 330px;
  height: 60px;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 10px;
  text-decoration: none;
  display: flex;
}

.text-block-100 {
  color: #ff615b;
  margin-left: 0;
  margin-right: 0;
  font-size: 18px;
  line-height: 30px;
}

.controlholder {
  color: var(--clear);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 65px;
  margin-left: 0;
  margin-right: 0;
  padding: 0 10px;
  display: flex;
}

.controlsnew {
  aspect-ratio: auto;
  border: 0px solid var(--variable-colour-new);
  background-color: var(--clear);
  cursor: pointer;
  border-radius: 0;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  margin-top: 0;
  margin-right: 0;
  display: flex;
}

.div-block-322 {
  border: 1px solid #000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  display: flex;
}

.div-block-322.light {
  border-color: #f56a65;
}

.askaddress {
  color: #fc7d79;
  font-size: 18px;
  font-weight: 500;
}

.day-nightbutton {
  cursor: pointer;
  background-color: #0000;
  justify-content: center;
  width: auto;
  height: auto;
  margin-right: 0;
  display: flex;
}

.image-207 {
  width: 20px;
}

.blurbg {
  z-index: -2;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #0000;
  border-radius: 15px;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

.lightmode {
  opacity: .39;
  width: auto;
  height: auto;
  transform: rotate(0);
}

.lightmode.light {
  opacity: 1;
  width: 10px;
  transform: none;
}

.lightmode.dark {
  z-index: 3;
  aspect-ratio: auto;
  opacity: .75;
  width: auto;
  max-width: none;
  height: 18px;
  position: absolute;
  transform: none;
}

.hellotext {
  box-sizing: border-box;
  color: #232327;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: 42px;
  margin-right: 0;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  overflow: visible;
}

.hellotext.light {
  color: var(--variable-colour-new);
  width: 100%;
  margin-left: 0;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.connectlogo {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
  margin: 10px auto;
  display: none;
}

.closearea {
  z-index: 6000;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 65px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-right: 10px;
  display: none;
  position: static;
}

.logoanimation {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: static;
}

.lightconnectlogo {
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  display: flex;
  position: static;
}

.image-216 {
  mix-blend-mode: difference;
  width: auto;
  height: 25px;
}

.sound {
  opacity: 1;
  cursor: auto;
  width: 100%;
  height: auto;
}

.connectlinksnew {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: #0000;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  margin-left: -10px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: static;
  overflow: visible;
}

.image-217 {
  mix-blend-mode: difference;
  width: 25px;
  height: 25px;
}

.connectnav {
  z-index: 10000;
  opacity: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  cursor: pointer;
  background-color: #00000017;
  border-radius: 25px;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  height: 300px;
  margin-top: 0;
  padding: 0;
  display: flex;
  position: fixed;
  inset: 5% 5% auto auto;
}

.connectnav.home {
  cursor: pointer;
  background-color: #ff383817;
  border-radius: 45px;
}

.connectnav.home.light {
  z-index: 150;
  background-color: var(--clear);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
  mix-blend-mode: normal;
  border: 2px solid #fff;
  border-radius: 33px;
  height: 65px;
  padding-bottom: 0;
  top: 70px;
  right: 85px;
  overflow: hidden;
}

.connectlogotext {
  color: #232327;
  margin-left: 20px;
  margin-right: 0;
  font-size: 50px;
}

.connectlogotext.light {
  color: var(--variable-colour-new);
  margin-top: 0;
  margin-left: 0;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 60px;
  line-height: 30px;
}

.connectlogotext.light.small {
  font-size: 29px;
}

.div-block-318 {
  background-color: var(--variable-colour-new);
  width: 30px;
  height: 3px;
  margin-left: 7px;
  margin-right: 7px;
  display: flex;
}

.play {
  opacity: .5;
  width: 18px;
}

.call {
  -webkit-text-stroke-color: #0000;
  background-color: #2e1f213d;
  border-radius: 50px;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 330px;
  height: 60px;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 10px;
  text-decoration: none;
  display: flex;
}

.lightbuttoncontrols {
  background-color: var(--mainbrandcolour);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: static;
}

.askemail {
  color: #fc7d79;
  mix-blend-mode: normal;
  font-size: 18px;
  font-weight: 500;
}

.connectlinks {
  position: relative;
}

.helloopenmobile {
  width: 100%;
  height: 100%;
  display: none;
}

.image-206 {
  width: 20px;
}

.contacts {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  opacity: 1;
  mix-blend-mode: normal;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  margin: 0 0 -60px;
  padding: 30px 5px 0;
  display: flex;
}

.social {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-end;
  align-items: center;
  width: 25%;
  height: 100%;
  padding: 25px 0;
  display: flex;
}

.lottie-image-holder {
  z-index: 6;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.lottieholderin {
  z-index: 0;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-right: 0;
  padding-left: 0%;
  padding-right: 0;
  display: flex;
  position: relative;
  overflow: clip;
}

.frontlottie {
  z-index: 1;
  opacity: 0;
  flex: none;
  width: auto;
  height: 180%;
  margin: 0 0 10% 78%;
  padding-left: 0;
  display: flex;
  position: static;
  right: -100px;
  overflow: visible;
}

.image-220 {
  z-index: 1;
  width: 50%;
  max-width: none;
  position: absolute;
  inset: auto 0% 0% 25%;
}

.blurout {
  z-index: 100;
  opacity: 1;
  background-color: #a6ada970;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.textbig {
  color: var(--brand-light-difference);
  mix-blend-mode: difference;
  background-color: #0000;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 16em;
  font-weight: 500;
  position: absolute;
}

.blockout {
  z-index: 0;
  background-color: var(--dark-brand);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: static;
  top: 0;
  overflow: hidden;
}

.projectoutput {
  z-index: 150;
  background-color: var(--clear);
  opacity: 1;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  padding-bottom: 100vh;
  display: none;
  position: absolute;
  inset: 0%;
  overflow: visible;
}

.outputframe {
  z-index: 700;
  background-color: #0000;
  border-radius: 0;
  flex: 0 auto;
  align-self: auto;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  display: none;
  position: static;
  inset: 0%;
  overflow: hidden;
}

.outputdiv {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
}

.image-223 {
  width: 50%;
}

.projectpage {
  background-color: var(--dark-brand);
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 150vh;
  display: flex;
  overflow: visible;
}

.projectpage.green {
  background-color: #3be2ab;
}

.project-holder {
  background-color: var(--mainbrandcolour);
  cursor: auto;
  border-radius: 0;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: static;
  overflow: auto;
}

.projectname {
  z-index: 4;
  color: var(--brand-light-difference);
  -webkit-text-stroke-color: #fdb6b8;
  mix-blend-mode: difference;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 250px;
  font-weight: 500;
  position: static;
}

.image {
  z-index: 5;
  cursor: auto;
  background-color: #0000;
  border-radius: 0;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.image-222 {
  aspect-ratio: auto;
  flex: none;
  width: 60vw;
  max-width: none;
  height: auto;
  margin-top: 90%;
  margin-left: 500px;
  margin-right: -109px;
  display: block;
  overflow: clip;
}

.header {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
}

.image-224 {
  width: 50%;
}

.base {
  z-index: 1;
  background-color: var(--project-colour-variable-light);
  cursor: auto;
  border-radius: 0;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.base.green {
  background-color: #01fa01;
  border-radius: 25px;
}

.image-219 {
  z-index: 1;
  max-width: none;
  height: 100vh;
  position: relative;
}

.cursor-wrapper {
  z-index: 5000;
  opacity: 1;
  mix-blend-mode: normal;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.cursor-wrapper.dark {
  z-index: 5000;
  opacity: 100;
  mix-blend-mode: normal;
}

.cursor {
  opacity: 1;
  mix-blend-mode: difference;
  background-color: #0000;
  border: 0 solid #fff;
  border-radius: 0%;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  display: flex;
}

.code-embed {
  display: block;
}

.maincursor {
  mix-blend-mode: normal;
  background-color: #0000;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: static;
}

.mouse-styles {
  background-color: #7d868b75;
  border-radius: 100px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 65px;
  height: 65px;
  padding: 0;
  display: flex;
  position: relative;
}

.stopicon {
  background-color: var(--dark-brand);
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: none;
}

.playicon {
  mix-blend-mode: normal;
  width: 26px;
  height: auto;
  margin-left: 0;
  padding-left: 5px;
}

.body {
  background-color: var(--mainbrandcolour);
  color: #222;
  cursor: none;
  overflow: hidden;
}

.innerpage {
  background-color: var(--variable-nav-dark);
  border-radius: 50px 50px 0 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 125vh;
  padding-top: 15vh;
  display: flex;
}

.innerpage.dark.services {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 400vh;
}

.innerpage.dark._100 {
  height: 100vh;
}

.innerpage.dark.long {
  background-color: var(--mainbrandcolour);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  height: auto;
  margin-top: 0;
}

.innerpage.dark.long.colourservice {
  background-color: #8d8dff;
  height: 100vh;
}

.innerpage.dark.white {
  background-color: #fff;
}

.innerpage.light.unrounded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.innerpage.light.unrounded._100.variable._150 {
  background-color: var(--variable-nav-dark);
  border-radius: 0;
  height: 150vh;
}

.innerpage.dark {
  background-color: var(--mainbrandcolour);
  background-color: #40444d;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 150vh;
  margin-top: -6px;
  padding-top: 0;
}

.innerpage.dark.long {
  height: auto;
}

.innerpage.dark {
  background-color: #ffb4b4;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 135vh;
  margin-top: -6px;
  padding-top: 0;
}

.innerpage.light {
  background-color: #ffb4b4;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  justify-content: center;
  align-items: center;
  height: 150vh;
  margin-top: -6px;
  padding-top: 0;
}

.innerpage.light._100 {
  height: 100vh;
}

.innerpage.light._100.variable {
  background-color: #f9b4b4;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.innerpage.light.unrounded._100.variable._150 {
  border-radius: 0;
  height: 150vh;
}

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

.innerpage.white {
  background-color: var(--mainbrandcolour);
}

.innerpage._100 {
  height: 100vh;
}

.innerpage.unrounded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.innerpage.video {
  background-color: var(--clear);
  border-radius: 0;
  height: 100vh;
  padding-top: 0;
}

.innerpage.video.short {
  height: 90vh;
}

.innerpage.video.long {
  justify-content: center;
  align-items: center;
  height: 85vh;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 5vh;
}

.main-hero_heading {
  color: var(--dark-brand);
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 10%;
  padding-right: 3%;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 7.5em;
  font-weight: 400;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.main-hero_heading.dark {
  color: #232327;
  width: 100%;
  margin-bottom: 0%;
  font-size: 8.1em;
  line-height: 1.1;
}

.main-hero_heading.night {
  color: var(--dark-brand);
}

.main-hero_heading.light {
  color: var(--mainbrandcolour);
}

.largeheader {
  color: #232327;
  text-align: center;
  letter-spacing: -.01em;
  object-fit: fill;
  flex: none;
  width: 75%;
  max-width: 15em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0%;
  padding-top: 0%;
  padding-right: 0%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 18em;
  font-weight: 500;
  line-height: 1.2;
  display: block;
  position: static;
  top: 5%;
}

.largeheader.pageoverview {
  color: var(--mainbrandcolour);
  font-size: 18em;
}

.buildbutton {
  background-color: var(--dark-brand);
  border-radius: 25px;
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 600px;
  height: 600px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 35px;
  padding: 40px;
  text-decoration: none;
  display: flex;
  overflow: clip;
}

.text-block-105 {
  color: #2b2d36;
  margin-right: 22px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 20px;
  display: none;
}

.topspacerclear {
  background-color: #0000;
  border-radius: 35px 35px 0 0;
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  height: 25vh;
  display: flex;
}

.div-block-319 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  display: flex;
}

.growthbutton {
  background-color: var(--dark-brand);
  border-radius: 30px;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  margin-right: 0;
  padding: 25px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.growthbutton.topgap {
  background-color: #292929;
  background-image: url('../images/Evolve.png');
  background-position: 300% -20%;
  background-repeat: no-repeat;
  background-size: 40vw;
  border-radius: 40px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 0;
  margin-right: 0;
  padding: 40px;
  text-decoration: none;
}

.growthbutton.topgap.red {
  background-color: #54e2bc;
  background-image: none;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: clip;
}

.growthbutton.topgap.red.short {
  background-color: var(--dark-brand);
  background-color: #3511b1;
  border-radius: 35px;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  position: relative;
}

.div-block-332 {
  flex-flow: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.pageinner {
  background-color: #232327;
  border-radius: 25px 25px 0 0;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  padding-top: 27px;
  display: flex;
}

.pageinner.noround {
  background-color: #232327;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding-top: 21px;
}

.notch-2 {
  background-color: #ff615b;
  border-radius: 100px;
  width: 190px;
  height: 6px;
  margin-top: 0;
  margin-bottom: 0;
  position: static;
  top: 0;
  left: 42%;
}

.notch-2.dark {
  background-color: #232327;
  margin-top: 25px;
  padding-top: 0;
}

.digital-button {
  background-color: #ff9f9f;
  border-radius: 40px;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 25px;
  padding: 40px;
  text-decoration: none;
  display: flex;
  overflow: clip;
}

.digital-button._50 {
  background-color: #a6e2c4;
  background-image: none;
  border-radius: 55px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 50%;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: clip;
}

.div-block-294 {
  opacity: 1;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-top: 0;
  padding: 0;
  display: flex;
}

.div-block-296 {
  opacity: 1;
  background-color: #2b2d36;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.div-block-296.grey {
  opacity: 1;
  background-color: #2b2d36;
  width: 70px;
  height: 30px;
  padding-right: 3px;
}

.buildrow {
  width: 100%;
  margin-top: 20%;
  margin-bottom: 30%;
  display: flex;
}

.div-block-297 {
  background-color: #ff615b;
  border: 0 solid #ff615b;
  border-radius: 200px;
  width: 27px;
  height: 27px;
}

.div-block-297.rednew {
  background-color: #000;
  width: 23px;
  height: 23px;
}

.div-block-297.bluenew {
  background-color: #d6d6d6;
  width: 23px;
  height: 23px;
}

.div-block-297.green {
  background-color: #ff615b;
  width: 23px;
  height: 23px;
}

.div-block-297.greennew {
  background-color: #6d6e6d;
  width: 23px;
  height: 23px;
}

.image-214 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -84px;
  position: relative;
  overflow: visible;
}

.div-block-333 {
  width: 100%;
  height: 100%;
  padding-right: 40px;
}

.row {
  width: 70vw;
  height: 50vh;
  margin-bottom: 50px;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.row.big.secondrolw {
  height: 600px;
  margin-top: 0;
}

.row.big {
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  width: 80%;
  height: 800px;
  margin: 50px auto 40px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.row.big.secondrolw {
  width: 80%;
  height: 600px;
  margin-top: 0;
}

.productbutton {
  background-color: #ff615b;
  border-radius: 30px;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  margin-right: 0;
  padding: 25px;
  display: flex;
}

.productbutton.lightbox {
  background-color: #d7dbb8;
  border-radius: 40px;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100%;
  margin-bottom: 0;
  margin-left: 25px;
  margin-right: auto;
  padding: 40px;
  text-decoration: none;
  overflow: clip;
}

.productbutton.lightbox.build {
  background-color: var(--pink);
  border-radius: 50px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 45%;
  margin-bottom: 40px;
  margin-left: 0;
  position: relative;
}

.brandbutton {
  background-color: var(--dark-brand);
  border-radius: 40px;
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 80vw;
  height: 70vh;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 25px;
  padding: 40px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
}

.brandbutton.build {
  background-color: var(--dark-brand);
  background-color: #3511b1;
  border-radius: 35px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  position: relative;
}

.div-block-329 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.image-198 {
  width: 50px;
  display: block;
}

.text-block-92 {
  color: #2b2d36;
  padding-top: 0;
  padding-bottom: 23px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 13px;
  text-decoration: none;
}

.text-block-92.lighttext {
  color: #232327;
  padding-bottom: 0;
  font-size: 48px;
  line-height: 15px;
}

.text-block-92.darktext {
  color: #050505;
  padding-bottom: 0;
  font-size: 48px;
  line-height: 15px;
}

.text-block-92.darktext.light {
  color: #ff615b;
}

.text-block-92.soft {
  opacity: .41;
  font-size: 33px;
  display: none;
}

.div-block-323 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

.content-holder {
  background-color: var(--dark-brand);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.fullloaderline {
  z-index: 5000;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  display: flex;
  position: absolute;
}

.basecolourholder {
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.basecolourholder.stick {
  z-index: 1;
  background-color: #0000;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.image-225 {
  width: 40px;
  position: absolute;
}

.image-225.dark {
  position: static;
}

.image-225.dark.loadlarge {
  z-index: 10;
  width: auto;
  max-width: 50%;
  position: absolute;
}

.loaderline {
  z-index: 200;
  background-color: var(--mainbrandcolour);
  border-radius: 100px;
  width: 200px;
  height: 6px;
  margin-top: 0;
  position: static;
  inset: auto 0% 0% 40%;
}

.discovervideoholder {
  z-index: 8;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  overflow: hidden;
}

.wb-video-styles-controller {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
}

.videostop {
  z-index: 9;
  background-color: var(--clear);
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.getilluminated {
  color: var(--mainbrandcolour);
  mix-blend-mode: difference;
  background-color: #0000;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 16em;
  font-weight: 400;
  position: absolute;
}

.getilluminated.dark {
  z-index: 2;
  color: var(--dark-brand);
  display: none;
}

.pageinnerholder {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.brand-videos {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  padding-left: 5vw;
  display: flex;
  overflow: auto;
}

.brandtools {
  background-color: var(--clear);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.text-block-112 {
  color: var(--mainbrandcolour);
  margin-right: 22px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 18px;
  line-height: 25px;
  display: flex;
}

.div-block-366 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  font-size: 45px;
  display: flex;
}

.content2 {
  flex-flow: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.div-block-368 {
  opacity: 1;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 43px;
  margin-top: 0;
  padding: 0;
  display: flex;
}

.div-block-369 {
  opacity: 1;
  background-color: #2b2d36;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.div-block-369.grey {
  border-width: 1.2px;
  border-color: var(--dark-brand);
  background-color: var(--clear);
  opacity: 1;
  border-radius: 50px;
  width: 120px;
  height: 43px;
  margin-right: 5px;
  padding-right: 0;
  display: flex;
}

.div-block-369.grey.light {
  border-color: var(--mainbrandcolour);
  background-color: var(--clear);
}

.div-block-369.grey.white {
  border-color: var(--variable-bg-services);
}

.div-block-370 {
  background-color: #ff615b;
  border: 0 solid #ff615b;
  border-radius: 200px;
  width: 27px;
  height: 27px;
}

.div-block-370.bluenew {
  background-color: #d6d6d6;
  width: 23px;
  height: 23px;
}

.div-block-370.green {
  background-color: var(--mainbrandcolour);
  width: 23px;
  height: 23px;
  display: none;
}

.div-block-370.greennew {
  background-color: #6d6e6d;
  width: 23px;
  height: 23px;
}

.image-226 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -25vh;
  position: relative;
  overflow: visible;
}

.image-226._1 {
  width: 180%;
  margin-bottom: -36vh;
}

.content {
  width: 100%;
  height: 100%;
  padding-right: 40px;
}

.cover-design {
  background-color: var(--dark-brand);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 5vh 5vw;
  display: none;
  position: absolute;
}

.cover-design.form {
  background-color: #ffb4b4;
}

.cover-design.flux {
  background-color: #9ee2e8;
}

.cover-design.atlas {
  background-color: #cca9fc;
}

.image-227 {
  width: 50px;
  display: block;
}

.text-block-113 {
  color: #2b2d36;
  padding-top: 0;
  padding-bottom: 23px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 13px;
  text-decoration: none;
}

.text-block-113.darktext {
  color: var(--mainbrandcolour);
  padding-bottom: 0;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 200px;
  font-weight: 400;
  line-height: 30px;
}

.text-block-113.darktext.light {
  color: var(--mainbrandcolour);
}

.text-block-113.darktext.light.white {
  color: #fff;
}

.text-block-113.soft {
  opacity: .41;
  font-size: 33px;
  display: none;
}

.text-block-113.lightnew {
  color: var(--mainbrandcolour);
  padding-bottom: 0;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 120px;
  line-height: 30px;
}

.text-block-113.lightnew.light {
  color: var(--mainbrandcolour);
}

.text-block-113.lightnew.light.white {
  color: #fff;
}

.text-block-114 {
  color: #2b2d36;
  margin-right: 22px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 20px;
  display: none;
}

.div-block-373 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.div-block-374 {
  opacity: 1;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-top: 0;
  padding: 0;
  display: flex;
}

.div-block-375 {
  opacity: 1;
  background-color: #2b2d36;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.div-block-375.grey {
  background-color: var(--mainbrandcolour);
  opacity: 1;
  width: 70px;
  height: 30px;
  padding-right: 3px;
}

.div-block-376 {
  background-color: #ff615b;
  border: 0 solid #ff615b;
  border-radius: 200px;
  width: 27px;
  height: 27px;
}

.div-block-376.rednew {
  background-color: #000;
  width: 23px;
  height: 23px;
}

.image-228 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -84px;
  position: relative;
  overflow: visible;
}

.image-228._4 {
  width: 120%;
  margin-top: -10vh;
  margin-bottom: 0;
}

.div-block-377 {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.image-229 {
  width: 50px;
  display: block;
}

.text-block-115 {
  color: #2b2d36;
  margin-right: 22px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 20px;
  display: none;
}

.div-block-378 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  display: flex;
}

.div-block-379 {
  opacity: 1;
  background-color: #2b2d36;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.div-block-379.grey {
  background-color: var(--mainbrandcolour);
  opacity: 1;
  width: 70px;
  height: 30px;
  padding-right: 3px;
}

.div-block-380 {
  background-color: var(--dark-brand);
  border: 0 solid #ff615b;
  border-radius: 200px;
  width: 27px;
  height: 27px;
}

.image-230 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -84px;
  position: relative;
  overflow: visible;
}

.div-block-381 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.image-231 {
  width: 50px;
  display: block;
}

.text-block-116 {
  color: #2b2d36;
  padding-top: 0;
  padding-bottom: 23px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 13px;
  text-decoration: none;
}

.text-block-116.lighttext {
  color: var(--mainbrandcolour);
  padding-bottom: 0;
  font-size: 48px;
  line-height: 15px;
}

.text-block-116.soft {
  opacity: .41;
  font-size: 33px;
  display: none;
}

.cmspages {
  background-color: var(--mainbrandcolour);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.headertext, .description {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.headercms {
  color: var(--dark-brand);
  text-align: center;
  letter-spacing: -.01em;
  object-fit: fill;
  flex: none;
  width: 75%;
  max-width: 15em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0%;
  padding-top: 0%;
  padding-right: 0%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 18em;
  font-weight: 500;
  line-height: 1.2;
  display: block;
  position: static;
  top: 5%;
}

.headercms.pageoverview {
  color: var(--mainbrandcolour);
  font-size: 18em;
}

.descriptioncms {
  color: var(--dark-brand);
  letter-spacing: -.01em;
  width: 80%;
  max-width: 15em;
  margin-top: 0;
  margin-bottom: 5%;
  margin-left: 0%;
  padding-top: 0%;
  padding-right: 0%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 7.5em;
  font-weight: 500;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.descriptioncms.dark {
  color: #232327;
  width: 80%;
  margin-bottom: 0%;
  font-size: 8.1em;
  line-height: 1.1;
}

.workview {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.work-video-holder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.growwork {
  background-color: #232327;
  border-radius: 25px 25px 0 0;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  display: flex;
  overflow: hidden;
}

.videoholder {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #222;
  border-radius: 50px 50px 0 0;
  flex-flow: column;
  flex: 0 auto;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-bottom: 0%;
  padding-top: 0;
  display: flex;
  position: static;
  overflow: hidden;
}

.push-video-holder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.videoouter {
  background-color: var(--dark-brand);
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding-bottom: 0;
  padding-left: 0;
  display: flex;
  overflow: hidden;
}

.videoouter.light {
  background-color: var(--clear);
  height: 100vh;
  margin-top: 0;
  margin-bottom: 0;
}

.growholder {
  background-color: var(--clear);
  border-radius: 25px 25px 0 0;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 101%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  overflow: hidden;
}

.push-video-holder-2, .work-video-holder-2 {
  object-fit: cover;
  width: 80vw;
  height: 70vh;
  position: absolute;
}

.trigger-div {
  z-index: 5;
  background-color: var(--mainbrandcolour);
  border-radius: 100px;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  width: 100px;
  height: 6px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  position: relative;
  inset: 70px 0% auto;
  overflow: hidden;
}

.trigger-div.dark {
  background-color: #232327;
  flex: none;
  width: 100px;
  height: 6px;
  margin-top: 0;
  padding-top: 0;
  top: 30px;
}

.trigger-div.dark.night {
  background-color: var(--mainbrandcolour);
  width: 200px;
  top: 60px;
}

.trigger-div.dark.light {
  background-color: var(--mainbrandcolour);
}

.trigger-div.light {
  background-color: var(--dark-brand);
  opacity: 1;
  margin-top: 0;
  top: 60px;
}

.trigger-div.light.purple {
  background-color: #8d8dff;
}

.trigger-div.hide {
  opacity: 0;
}

.bottom-video-area {
  object-fit: cover;
  width: auto;
  max-height: none;
  display: flex;
}

.videostart {
  z-index: 11;
  background-color: var(--clear);
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.darkimage {
  z-index: 1;
  mix-blend-mode: normal;
  width: auto;
  max-width: none;
  height: auto;
  max-height: 100%;
  position: absolute;
}

.darklogo {
  width: 40px;
  position: absolute;
}

.darklogo.light, .darklogo.dark {
  position: static;
}

.darkdot {
  width: 30px;
  display: inline-block;
}

.darmode {
  opacity: .39;
  width: auto;
  height: auto;
  transform: rotate(0);
}

.darmode.light {
  opacity: 1;
  width: 10px;
  transform: none;
}

.darmode.dark {
  aspect-ratio: auto;
  opacity: .75;
  width: auto;
  max-width: none;
  height: 19px;
  transform: none;
}

.learntext {
  color: var(--variable-bg-services);
  text-align: center;
  width: auto;
  font-size: 20px;
}

.learn-button {
  z-index: 5;
  background-color: var(--clear);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  text-decoration: none;
  display: flex;
  position: static;
  inset: 0% 0% auto;
}

.learn-button.w--current {
  background-color: #0000;
}

.closebuttonin {
  border: 3px solid var(--dark-brand);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #0000;
  border-radius: 150px;
  width: 60px;
  height: 60px;
}

.disablescrollstart {
  z-index: 110;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
}

.middleheader {
  color: #232327;
  text-align: center;
  letter-spacing: -.01em;
  object-fit: fill;
  flex: none;
  width: 75%;
  max-width: 15em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0%;
  padding-top: 0%;
  padding-right: 0%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 11em;
  font-weight: 500;
  line-height: 1.2;
  display: block;
  position: static;
  top: 5%;
}

.middleheader.pageoverview {
  color: var(--mainbrandcolour);
  font-size: 18em;
}

.middleheadertext {
  color: var(--dark-brand);
  text-align: center;
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 0%;
  padding-right: 0%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 13em;
  font-weight: 500;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.middleheadertext.dark {
  color: #232327;
  width: 80%;
  margin-bottom: 0%;
  font-size: 8.1em;
  line-height: 1.1;
}

.middleheadertext.night {
  color: var(--dark-brand);
}

.servicepages {
  z-index: 20;
  background-color: var(--clear);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  margin-left: 0;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: auto;
}

.servicescrollholder {
  background-color: var(--clear);
  cursor: auto;
  border-radius: 25px 25px 0 0;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 95vw;
  height: auto;
  margin-top: 20px;
  display: flex;
  position: sticky;
  top: 20px;
  overflow: scroll;
}

.spacepage {
  width: 100vw;
  height: 100vh;
}

.contentpage {
  background-color: #67bed6;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  width: 95vw;
  height: 100%;
}

.popupholder {
  z-index: 10;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: scroll;
}

.popupholder.sticky {
  position: sticky;
  top: 50px;
}

.main-hero_heading-copy {
  color: var(--mainbrandcolour);
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 12%;
  padding-right: 3%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 7.5em;
  font-weight: 500;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.main-hero_heading-copy.dark {
  color: #232327;
  text-align: center;
  width: 100%;
  margin-bottom: 0%;
  padding-left: 0%;
  padding-right: 0%;
  font-size: 20em;
  line-height: 1.1;
}

.main-hero_heading-copy.night {
  color: var(--dark-brand);
}

.servicepageholder {
  background-color: var(--services-variable);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 95vh;
  margin-top: 0;
  display: flex;
}

.servicepageholder.roundtop {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  box-shadow: 0 -4px 16px 18px #00000038;
}

.servicepageinner {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin-top: -6px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.popupscroller {
  z-index: 11;
  background-color: var(--clear);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 95vw;
  height: 95vh;
  margin-top: 5vh;
  margin-bottom: 0;
  display: flex;
  position: sticky;
  top: 20px;
  overflow: scroll;
}

.popuppage {
  background-color: var(--clear);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 0;
  display: flex;
  overflow: hidden;
}

.popuppage.light {
  background-color: var(--mainbrandcolour);
  justify-content: center;
  align-items: center;
  height: auto;
}

.popuppage.light.long {
  height: auto;
}

.popuppage.clear {
  justify-content: flex-start;
  align-items: center;
  margin-top: -6px;
}

.popuppage.dark {
  background-color: var(--mainbrandcolour);
  height: 100vh;
}

.popuppage.long {
  background-color: var(--dark-brand);
  height: auto;
}

.textbutton {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding-left: 0;
  display: flex;
}

.pageimage {
  width: 75vw;
  max-width: none;
  margin-top: 0%;
  position: relative;
  top: 55%;
  overflow: visible;
}

.open-services {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #000000c2;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: -13vh;
  margin-bottom: 0;
  padding-left: 4px;
  padding-right: 5px;
  display: flex;
  overflow: hidden;
}

.dynamictext {
  color: var(--variable-colour-new);
  letter-spacing: -10px;
  margin-top: -64px;
  margin-bottom: 0;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 300px;
  font-weight: 300;
  position: absolute;
}

.smalltext {
  color: var(--dark-brand);
  text-align: center;
  width: 100%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

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

.smalltext.white {
  color: var(--variable-bg-services);
}

.smalltext.green {
  color: var(--mainbrandcolour);
}

.servicetext {
  color: var(--mainbrandcolour);
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 12%;
  padding-right: 3%;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 7.5em;
  font-weight: 500;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.servicetext.dark {
  color: var(--service-text-variable);
  width: 100%;
  margin-bottom: 0%;
  font-size: 8.1em;
  line-height: 1.1;
}

.servicetext.night {
  color: var(--dark-brand);
}

.space {
  width: 100%;
  height: 300px;
}

.space._10 {
  height: 4vh;
}

.lightswitchvariable {
  width: 100%;
  height: 100%;
}

.dynamicdescription {
  color: var(--mainbrandcolour);
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 15%;
  padding-right: 5%;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 7.5em;
  font-weight: 400;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.dynamicdescription.dark {
  color: var(--service-text-variable);
  width: 100%;
  margin-bottom: 0%;
  font-size: 8.1em;
  line-height: 1.1;
}

.dynamicdescription.night {
  color: var(--dark-brand);
}

.div-block-382 {
  flex: none;
  width: 500px;
}

.serviceimage {
  width: 70vw;
  max-width: none;
  margin-top: 60%;
  position: relative;
  top: 0%;
  overflow: visible;
}

.move-image {
  width: 70%;
  height: 8px;
}

.div-block-383 {
  z-index: 5;
  background-color: #66171700;
  width: 100%;
  height: 98vh;
  position: absolute;
}

.close-project {
  z-index: 6;
  background-color: var(--clear);
  cursor: pointer;
  mix-blend-mode: normal;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 4px;
  padding-right: 5px;
  text-decoration: none;
  display: none;
  position: fixed;
  overflow: hidden;
}

.buttonbase {
  justify-content: space-between;
  align-items: center;
  width: 225px;
  height: 65px;
  padding-right: 5px;
  display: flex;
}

.close-output {
  z-index: 5;
  background-color: var(--clear);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  text-decoration: none;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.close-output.w--current {
  background-color: #0000;
}

.open-output {
  z-index: 6;
  background-color: var(--clear);
  cursor: pointer;
  mix-blend-mode: normal;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 5px;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.text-block-117 {
  background-color: var(--clear);
  opacity: 1;
  color: var(--mainbrandcolour);
  font-size: 17px;
  display: flex;
}

.show-project-button {
  z-index: 6;
  background-color: var(--clear);
  width: 100%;
  height: 100%;
  position: absolute;
}

.page-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  display: none;
  overflow: hidden;
}

.project-track {
  width: 100%;
  height: 100vh;
  display: flex;
}

.work-holder {
  z-index: 1000;
  background-color: #0000;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 95vh;
  display: flex;
  position: fixed;
  inset: -90% 0% 0%;
  overflow: visible;
}

.project {
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
  overflow: scroll;
}

.hold-header {
  background-color: var(--dark-brand);
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: static;
}

.start-project-button {
  z-index: 6;
  width: 50%;
  height: 100%;
  position: absolute;
}

.divanchor {
  width: 100%;
  height: 5px;
  position: absolute;
  inset: 0% 0% auto;
}

.top-anchor {
  width: 100vw;
  height: 2px;
  position: absolute;
  inset: 0% 0% auto;
}

.horizontal-scroll-wrapper {
  width: 100%;
  height: 200vh;
  overflow: scroll;
}

.image-232 {
  aspect-ratio: auto;
  flex: none;
  width: 60vw;
  max-width: none;
  height: auto;
  margin-top: 90%;
  margin-left: 500px;
  margin-right: -109px;
  display: block;
  overflow: clip;
}

.projectname-2 {
  z-index: 4;
  color: #fff;
  -webkit-text-stroke-color: #fdb6b8;
  mix-blend-mode: difference;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 250px;
  font-weight: 500;
  position: static;
}

.projectname-2.green {
  color: #09fa05;
  mix-blend-mode: difference;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-weight: 400;
}

.workviewpanel {
  background-color: var(--clear);
  border-radius: 0;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  overflow: scroll;
}

.projectoutput-2 {
  background-color: #ff4d4600;
  width: 100%;
  height: auto;
  padding-bottom: 100vh;
}

.image-18 {
  z-index: 5;
  cursor: auto;
  background-color: #0000;
  border-radius: 25px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.sticky-element.disable-overflow {
  width: auto;
  height: 100vh;
  position: sticky;
  top: 0%;
  overflow: hidden;
}

.show-project-button-2 {
  z-index: 6;
  background-color: var(--clear);
  width: 50%;
  height: 100%;
  position: absolute;
}

.section-height {
  width: 100%;
  height: auto;
  position: relative;
}

.track-2 {
  border-radius: 0;
  width: auto;
  height: 100vh;
  margin-right: 0;
  overflow: hidden;
}

.div-block-384 {
  width: 100vw;
  height: auto;
  overflow: auto;
}

.medium-header {
  z-index: 4;
  color: #ff6761;
  -webkit-text-stroke-color: #fdb6b8;
  mix-blend-mode: difference;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 120px;
  font-weight: 500;
  position: static;
}

.medium-header.green {
  color: #61ffca;
}

.div-block-385 {
  background-color: var(--dark-brand);
  width: 80%;
  height: 30%;
  margin-left: 20%;
}

.image-233 {
  max-width: none;
  height: 100%;
  overflow: visible;
}

.image-234 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -25vh;
  position: relative;
  overflow: visible;
}

.image-234._1 {
  width: 180%;
  margin-bottom: -36vh;
}

.image-234._1.new {
  width: 100%;
  margin-top: 0;
  margin-bottom: -35vh;
  margin-left: 0;
  position: absolute;
  inset: auto 0% 0%;
}

.image-235 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -25vh;
  position: relative;
  overflow: visible;
}

.image-235._1 {
  width: 180%;
  margin-bottom: -36vh;
}

.image-235._1.new {
  width: 200%;
  margin-top: 16vh;
  margin-bottom: 0;
  margin-left: -20vh;
  position: absolute;
  inset: 0%;
}

.image-236 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -25vh;
  position: relative;
  overflow: visible;
}

.image-236._1 {
  width: 180%;
  margin-bottom: -36vh;
}

.image-236._1.new {
  width: 190%;
  margin-top: 10vh;
  margin-bottom: 0;
  margin-left: 0;
  position: absolute;
  inset: 0%;
}

.image-237 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -25vh;
  position: relative;
  overflow: visible;
}

.image-237._1 {
  width: 180%;
  margin-bottom: -36vh;
}

.image-237._1.new {
  width: 120%;
  margin-top: 146px;
  margin-bottom: -20vh;
  margin-left: 5vw;
  position: absolute;
  inset: 20vh 0% 0%;
}

.div-block-386 {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.scroll-sequence-wrapper {
  height: 400vh;
  position: relative;
}

.scroll-image {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.image-238 {
  aspect-ratio: auto;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.image-238._10 {
  object-fit: cover;
  flex: 0 auto;
  width: 150%;
  max-width: 200%;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  position: static;
  overflow: visible;
}

.link-block {
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
  text-decoration: none;
}

.link-block-2 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
  text-decoration: none;
  display: flex;
}

.link-block-3, .link-block-4 {
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
  text-decoration: none;
}

.div-block-387 {
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
  display: flex;
  position: relative;
}

.text-side {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  margin-left: 25px;
  display: flex;
}

.div-block-389 {
  width: 100%;
  height: 100%;
}

.text-block-118 {
  color: var(--variable-colour-new);
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 18px;
  text-decoration: none;
}

.icons {
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 30px;
  display: flex;
}

.connect-button {
  border: 0px solid var(--variable-colour-new);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background-color: #cfcfc640;
  border-radius: 33px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 17px;
  display: flex;
}

.hello-button {
  cursor: pointer;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.contect-connect {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.main-hero_heading-2 {
  color: #141414;
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 7.8em;
  font-weight: 500;
  line-height: 1.2;
  display: block;
  position: static;
}

.main-hero_heading-2.lighttext {
  color: #ff9f9f;
}

.place-holder {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
}

.differecetextholder {
  z-index: 6;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.differnceholder {
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.topnotchstart {
  width: 100%;
  position: relative;
  inset: 0% 0% auto;
}

.topnotchstart._180.dark {
  z-index: 1;
  transform: none;
}

.topnotchstart.dark {
  z-index: 1;
  position: absolute;
  inset: 0% 0% auto;
}

.topnotchholder {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.topnotchholder.top {
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
}

.topnotchholder.bottom {
  z-index: 1000;
  inset: auto 0% 0%;
}

.notchmain {
  width: 25%;
  position: static;
  inset: 0% 0% auto;
}

.notchmain._180 {
  width: 100%;
  height: 100%;
  position: static;
  inset: auto 0% 0%;
  transform: rotate(180deg);
}

.notchtop {
  z-index: 1000;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 30px;
  display: flex;
  position: relative;
}

.notchholder {
  justify-content: center;
  align-items: flex-end;
  width: auto;
  height: 20px;
  display: flex;
  overflow: hidden;
}

.holdeimagehaed {
  background-color: var(--mainbrandcolour);
  border-radius: 25px 25px 0 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.notchholderinner {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.notchtinner {
  width: auto;
  height: 20px;
  position: static;
  inset: 0% 0% auto;
}

.notchtinner._180 {
  width: 100%;
  height: 100%;
  position: static;
  inset: auto 0% 0%;
  transform: rotate(180deg);
}

.sound-icon-light {
  z-index: 2;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 55%;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: absolute;
}

.sound-icon-light.day {
  z-index: 3;
  opacity: 1;
  width: 55%;
  height: auto;
  margin-left: 0;
  position: absolute;
}

.soundnew {
  opacity: 1;
  width: 18px;
}

.sound-dark {
  opacity: 1;
  width: 100%;
}

.topnotchcontainer {
  justify-content: center;
  align-items: flex-start;
  width: 25%;
  height: 50px;
  display: flex;
  position: relative;
}

.bottomnotchcontainer {
  justify-content: center;
  align-items: flex-end;
  width: 25%;
  height: 50px;
  display: flex;
  position: relative;
}

.bottomnotchwhite {
  width: 100%;
  position: relative;
  inset: 0% 0% auto;
}

.bottomnotchwhite._180.dark {
  z-index: 1;
  transform: none;
}

.bottomnotchwhite.dark {
  z-index: 1;
  position: absolute;
  inset: 0% 0% auto;
}

.botomnotchwhite {
  width: 100%;
  position: relative;
  inset: 0% 0% auto;
}

.botomnotchwhite._180.dark {
  z-index: 1;
  transform: none;
}

.botomnotchwhite.dark {
  z-index: 1;
  position: absolute;
  inset: 0% 0% auto;
}

.topnotchwhite {
  width: 100%;
  position: relative;
  inset: 0% 0% auto;
}

.topnotchwhite._180.dark {
  z-index: 1;
  transform: none;
}

.topnotchwhite.dark {
  z-index: 1;
  position: absolute;
  inset: 0% 0% auto;
}

.bottomnotchgrey {
  width: 100%;
  position: relative;
  inset: 0% 0% auto;
}

.bottomnotchgrey._180.dark {
  z-index: 1;
  transform: none;
}

.bottomnotchgrey.dark {
  z-index: 1;
  position: absolute;
  inset: 0% 0% auto;
}

.lightmetalnotch {
  z-index: 2;
  width: 100%;
  margin-top: -1px;
  position: relative;
  inset: 0% 0% auto;
}

.lightmetalnotch._180.dark {
  z-index: 1;
  transform: none;
}

.lightmetalnotch.dark {
  z-index: 1;
  position: absolute;
  inset: 0% 0% auto;
}

.topnotchholdernew {
  z-index: 3;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.topnotchholdernew.top {
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
}

.topnotchholdernew.bottom {
  z-index: 1000;
  inset: auto 0% 0%;
}

.botomnotchholdernew {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.botomnotchholdernew.top {
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
}

.botomnotchholdernew.bottom {
  z-index: 1000;
  inset: auto 0% 0%;
}

.div-block-390 {
  width: 15px;
  height: 15px;
}

.enter-text {
  background-color: var(--clear);
  color: var(--dark-brand);
  text-align: center;
  font-family: roboto-mono, sans-serif;
  font-size: 16px;
  position: static;
}

.text-enter {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: auto 0% -20vh;
}

.play-sound {
  background-color: var(--mainbrandcolour);
  border-radius: 100px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  padding: 0;
  display: flex;
  position: static;
  inset: auto 0% 0%;
}

.playicon-static {
  mix-blend-mode: normal;
  width: 26px;
  height: auto;
  margin-left: 0;
  padding-left: 5px;
}

.start-button {
  z-index: 120;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 65px;
  margin-bottom: 15%;
  display: flex;
  position: fixed;
  inset: auto 0% 0%;
}

.loop2s {
  opacity: .5;
}

.loopstop, .loop1s {
  position: absolute;
}

.contentholder {
  aspect-ratio: 1;
  background-color: #0000002e;
  border-radius: 45px;
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  width: 25%;
  height: 100%;
  margin-right: 35px;
  padding: 30px;
  display: flex;
  position: relative;
  overflow: clip;
}

.contentholder._8925bb {
  aspect-ratio: 1;
  background-color: #9d2ecc;
  border-radius: 45px;
  width: 50vw;
  position: relative;
  overflow: clip;
}

.contentholder.grey {
  z-index: 1;
  aspect-ratio: 1;
  background-color: #d2d1d3;
  border-radius: 45px;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: clip;
}

.contentholder.ff960e {
  aspect-ratio: 1;
  background-color: #ff960e;
  border-radius: 45px;
  position: relative;
  overflow: clip;
}

.contentholder._1c4dff {
  aspect-ratio: 1;
  background-color: #1c4dff;
  border-radius: 45px;
  position: relative;
  overflow: clip;
}

.contentholder._1 {
  overflow: hidden;
}

.sliderholder {
  background-color: var(--variable-bg-services);
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  height: 150vh;
  padding-top: 0;
  display: flex;
}

.sliderholder.dark {
  background-color: var(--dark-brand);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 150vh;
  margin-top: -6px;
  padding-top: 0;
}

.sliderholder.dark.services {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 400vh;
}

.sliderholder.dark._100 {
  height: 100vh;
}

.sliderholder.dark.long {
  height: auto;
}

.sliderholder.dark.long.colourservice {
  background-color: #8d8dff;
  height: 100vh;
}

.sliderholder.dark.white {
  background-color: #fff;
}

.sliderholder.light {
  background-color: var(--mainbrandcolour);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  justify-content: center;
  align-items: center;
  height: 150vh;
  margin-top: -6px;
  padding-top: 0;
}

.sliderholder.light._100 {
  height: 100vh;
}

.sliderholder.light._100.variable {
  background-color: var(--variable-bg-services);
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.sliderholder.light.unrounded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.sliderholder.light.unrounded._100.variable._150 {
  border-radius: 0;
  height: 150vh;
}

.slide-content {
  flex: 1;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 70vh;
  display: flex;
}

.text-block-119 {
  text-align: left;
  width: 100%;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 99px;
}

.spacer {
  background-color: var(--clear);
  opacity: 1;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.spacer.grey {
  border-width: 1.2px;
  border-color: var(--dark-brand);
  background-color: var(--clear);
  opacity: 1;
  border-radius: 50px;
  width: 120px;
  height: 43px;
  margin-right: 5px;
  padding-right: 0;
  display: flex;
}

.spacer.grey.light {
  border-color: var(--mainbrandcolour);
  background-color: var(--clear);
}

.inside-image {
  z-index: 2;
  object-fit: fill;
  width: 200%;
  max-width: none;
  margin-top: 0;
  margin-bottom: 0;
  position: absolute;
  inset: auto 0% 0%;
  overflow: visible;
}

.inside-image._1 {
  width: 180%;
  margin-bottom: -36vh;
}

.inside-image._1.new {
  width: 190%;
  margin-top: 71vh;
  margin-bottom: 0;
  margin-left: 0;
  position: absolute;
  inset: -22% 0% 0% 4vw;
  transform: rotate(-90deg);
}

.blur {
  z-index: 3;
  opacity: 0;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  pointer-events: auto;
  background-color: #ffffff78;
  border-radius: 35px;
  width: 100%;
  height: 100%;
  transition: opacity .7s;
  position: absolute;
  inset: 0%;
}

.blur:hover {
  opacity: 100;
}

.blur._1 {
  z-index: 10;
  border-radius: 45px;
}

.blur._2 {
  z-index: 10;
  border-radius: 45px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 33% 30px 30px;
  display: flex;
}

.blur._3 {
  z-index: 10;
  border-radius: 45px;
}

.blur._3:hover {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

.blur._4 {
  z-index: 10;
  border-radius: 45px;
}

.blur._4:hover {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

.text-block-120 {
  color: var(--variable-bg-services);
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 55px;
  line-height: 60px;
}

.blur-overlay {
  z-index: 5;
  opacity: 0;
  border-radius: 45px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 30px 25% 30px 30px;
  display: flex;
  position: absolute;
  inset: 0%;
}

.blur-overlay:hover {
  opacity: 100;
}

.blur-overlay2 {
  z-index: 5;
  opacity: 0;
  -webkit-backdrop-filter: blur(45px);
  backdrop-filter: blur(45px);
  border-radius: 45px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 30px 25% 30px 30px;
  transition: opacity .7s;
  display: flex;
  position: absolute;
  inset: 0%;
}

.blur-overlay2:hover {
  opacity: 100;
}

.blur-overlay-3 {
  z-index: 5;
  opacity: 0;
  -webkit-backdrop-filter: blur(45px);
  backdrop-filter: blur(45px);
  border-radius: 45px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 30px 25% 30px 30px;
  transition: opacity .7s;
  display: flex;
  position: absolute;
  inset: 0%;
}

.blur-overlay-3:hover {
  opacity: 1;
}

.blur-native {
  z-index: 3;
  opacity: 0;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #eeecec54;
  border-radius: 45px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 30px 25% 30px 30px;
  transition: opacity .7s;
  display: flex;
  position: absolute;
  inset: 0%;
}

.blur-native:hover {
  opacity: 100;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: #000;
}

.blur-native._1 {
  opacity: 0;
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  background-color: #e2e2e230;
  transition: opacity .6s;
}

.blur-native._1:hover {
  opacity: 1;
}

.div-block-391 {
  z-index: -1;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  object-fit: fill;
  border-radius: 45px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.contentholder-copy {
  aspect-ratio: 1;
  background-color: #b5bdbb;
  border-radius: 45px;
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  width: 45%;
  height: 100%;
  margin-right: 35px;
  padding: 30px;
  display: flex;
  position: relative;
  overflow: clip;
}

.contentholder-copy._8925bb {
  aspect-ratio: 1;
  background-color: #9d2ecc;
  border-radius: 45px;
  width: 50vw;
  position: relative;
  overflow: clip;
}

.contentholder-copy.grey {
  z-index: 1;
  aspect-ratio: 1;
  background-color: #d2d1d3;
  border-radius: 45px;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: clip;
}

.contentholder-copy.ff960e {
  aspect-ratio: 1;
  background-color: #ff960e;
  border-radius: 45px;
  position: relative;
  overflow: clip;
}

.contentholder-copy._1c4dff {
  aspect-ratio: 1;
  background-color: #1c4dff;
  border-radius: 45px;
  position: relative;
  overflow: clip;
}

.blur-native-copy {
  z-index: 3;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border-radius: 45px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 30px 25% 30px 30px;
  display: flex;
  position: absolute;
  inset: 0%;
}

.blur-native-copy._1 {
  opacity: 0;
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  transition: opacity .6s;
}

.blur-native-copy._1:hover {
  opacity: 1;
}

.div-block-392 {
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  display: flex;
}

.output {
  z-index: 700;
  background-color: var(--clear);
  border-radius: 0;
  flex: 0 auto;
  align-self: auto;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  display: flex;
  position: static;
  inset: 0%;
  overflow: hidden;
}

.buttonon {
  height: 100%;
  display: flex;
}

.text-block-97 {
  color: #9b9a9a;
  -webkit-text-stroke-color: #eee;
  margin-left: 30px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 25px;
}

.text-block-97.dark {
  color: var(--variable-bg-services);
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
}

.navsidebutton {
  mix-blend-mode: difference;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 300px;
  margin-left: 10vw;
  display: flex;
}

.textbuttonoverlay {
  background-color: #000;
  border-radius: 0 10px 10px 0;
  justify-content: flex-start;
  align-items: center;
  width: 150px;
  height: 100%;
  margin-left: -10px;
  display: flex;
}

.textbuttonoverlay.pink {
  background-color: var(--dark-brand);
}

.buttonlink {
  background-color: #0000;
  border-radius: 40px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100px;
  height: 60px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 0;
  padding: 0;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 0%;
}

.image-193 {
  width: auto;
  max-width: none;
  height: 100%;
}

.buttonside {
  background-color: #0000;
  border-radius: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 65px;
  height: 65px;
  margin-top: 0;
  display: flex;
}

.buttonoff {
  height: 100%;
  display: flex;
}

.side-nav {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 15%;
  display: flex;
  position: fixed;
  inset: 0% auto 0% 0%;
}

.side-nav.dark {
  z-index: 400;
}

.side-nav.dark.light {
  width: 1px;
  margin-left: -50vw;
  left: 0%;
}

.trigger-div-2 {
  z-index: 5;
  background-color: #222;
  border-radius: 100px;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  width: 100px;
  height: 6px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  position: relative;
  inset: 40px 0% auto;
  overflow: hidden;
}

.trigger-div-2.dark {
  background-color: #232327;
  flex: none;
  width: 100px;
  height: 6px;
  margin-top: 0;
  padding-top: 0;
  top: 30px;
}

.trigger-div-2.dark.night {
  background-color: #e9edf5;
  width: 200px;
}

.trigger-div-2.light {
  background-color: #e9edf5;
  margin-top: -6px;
}

.trigger-div-2.lightconnectlogo.dark {
  background-color: var(--dark-brand);
  margin-right: 0;
  position: static;
  top: 70px;
  left: 45%;
}

.trigger-div-2.lightconnectlogo {
  background-color: #ffb4b4;
  top: 60px;
}

.fullpage-2 {
  background-color: #0000;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.fullpage-2.light {
  background-color: #ffb4b4;
  justify-content: center;
  align-items: center;
  height: auto;
}

.fullpage-2.light.inner, .fullpage-2.light.inner.new {
  background-color: #ffb4b4;
}

.fullpage-2.long {
  background-color: #ffb4b4;
  height: auto;
}

.fullpage-2.dark {
  background-color: #f9b4b4;
  height: auto;
}

.fullpage-2.clear {
  justify-content: flex-start;
  align-items: center;
  height: auto;
  margin-top: 0;
}

.main-hero_heading-3 {
  color: #222;
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 10%;
  padding-right: 3%;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 7.5em;
  font-weight: 400;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.main-hero_heading-3.light {
  color: var(--dark-brand);
}

.text-block-122 {
  color: var(--dark-brand);
  letter-spacing: -10px;
  font-family: Tt Hoves Pro Trial Variable, Arial, sans-serif;
  font-size: 250px;
}

.close-folio {
  z-index: 1000;
  background-color: var(--clear);
  color: var(--mainbrandcolour);
  text-align: center;
  cursor: pointer;
  font-family: roboto-mono, sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: static;
  inset: auto 0% 10%;
}

.topnotchgrey {
  width: 100%;
  position: absolute;
}

.topnotchgrey.dark {
  z-index: 3;
  opacity: 0;
}

.topnotchgrey-2 {
  width: 100%;
  position: relative;
  inset: 0% 0% auto;
}

.topnotchgrey-2.dark {
  z-index: 1;
  position: absolute;
  inset: 0% 0% auto;
}

.blurout-folio {
  z-index: 1000;
  opacity: 1;
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  background-color: #141414;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
}

.stop-mouse-interaction {
  z-index: 1000;
  background-color: var(--clear);
  width: 100%;
  height: 95%;
  position: absolute;
}

.project-finder {
  background-color: var(--mainbrandcolour);
  width: 100%;
  height: 100%;
  padding-top: 0;
  display: flex;
  overflow: hidden;
}

.topnotchdark {
  z-index: 4;
  opacity: 0;
  width: 100%;
  margin-top: -1px;
  position: absolute;
}

.topnotchdark.dark {
  z-index: 3;
  opacity: 0;
}

.div-block-393 {
  width: 2px;
}

.div-block-394 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: auto 0% 10%;
}

.line {
  background-color: #f9b4b1;
  width: 25px;
  height: 2px;
  margin-bottom: 15px;
}

.navigation-menu-2 {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #666666a6;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 65px;
  margin-top: -13vh;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  overflow: hidden;
}

.open-output-new {
  z-index: 6;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #55555557;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 65px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.text-block-123 {
  opacity: 1;
  color: #fab4b2;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  font-family: roboto-mono, sans-serif;
  font-size: 16px;
  display: flex;
}

.button-button--new {
  aspect-ratio: 1;
  background-color: #0000;
  border: 1px solid #fab4b2;
  border-radius: 200px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-left: 9px;
  margin-right: 9px;
  display: flex;
  position: static;
}

.div-block-396 {
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  display: flex;
}

.div-block-395 {
  background-color: #fab4b2;
  border-radius: 10px;
  width: 25px;
  height: 2px;
  position: absolute;
  transform: rotate(0);
}

.div-block-395.cross {
  background-color: #fab4b2;
  width: 25px;
  height: 2px;
  transform: rotate(90deg);
}

.closer {
  z-index: 100000;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 20vw;
  height: 0;
  margin-right: 0%;
  padding-right: 0%;
  display: flex;
  position: static;
  inset: auto 0% -4% 50%;
}

.div-block-397 {
  background-color: var(--clear);
  cursor: pointer;
  border-radius: 10px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 6px;
  display: flex;
}

.close-folio-2 {
  z-index: 1000;
  color: var(--variable-colour-new);
  text-align: center;
  cursor: pointer;
  background-color: #0000;
  margin-top: 80px;
  font-family: roboto-mono, sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: static;
  inset: auto 0% 10%;
}

.horizontal {
  background-color: var(--variable-colour-new);
  border-radius: 15px;
  width: 30px;
  height: 3px;
  margin-top: 0;
  position: absolute;
}

.horizontal.flip {
  width: 30px;
  margin-top: 0;
  position: static;
  transform: rotate(90deg);
}

.div-block-399 {
  margin-top: var(--nav);
  background-color: var(--variable-bg-light);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  display: flex;
  position: absolute;
}

.vertcialline {
  background-color: var(--variable-colour-new);
  border-radius: 15px;
  width: 30px;
  height: 3px;
  margin-top: 0;
  position: absolute;
}

.vertcialline.flip {
  width: 30px;
  margin-top: 0;
  position: static;
  transform: rotate(90deg);
}

.vertical {
  background-color: var(--variable-colour-new);
  border-radius: 15px;
  width: 30px;
  height: 3px;
  margin-top: 0;
  position: absolute;
  transform: rotate(90deg);
}

.vertical.flip {
  width: 30px;
  margin-top: 0;
  position: static;
  transform: rotate(90deg);
}

.mousefunction-holder {
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  display: flex;
}

.div-block-400 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.rollovernav {
  width: 100vw;
  height: 10vh;
  position: absolute;
  inset: auto 0% 5vh;
}

.smalltextdata {
  box-sizing: border-box;
  color: var(--dark-brand);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: 65px;
  margin-right: 0;
  font-family: roboto-mono, sans-serif;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  position: absolute;
  overflow: visible;
}

.smalltextdata.light {
  color: var(--variable-colour-new);
  width: 100%;
  margin-left: 0;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.smalltextdata.work {
  width: auto;
  margin-left: 0;
  position: static;
  inset: 0%;
}

.smalltextdata.scroll {
  width: auto;
  margin-left: 0;
  font-size: 16px;
  position: static;
  inset: 0%;
}

.div-block-401 {
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  margin-left: 65px;
  padding-left: 0;
  display: flex;
  position: absolute;
}

.image-13 {
  height: 45px;
}

.image-13.light {
  max-width: 80%;
  height: 30px;
  margin-left: 35px;
  margin-right: 35px;
  position: static;
}

.section-panel-home {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.sliderholder-2 {
  background-color: #f9b4b4;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  height: 150vh;
  padding-top: 0;
  display: flex;
}

.text-block-124 {
  text-align: left;
  width: 100%;
  font-size: 99px;
}

.videostart-2 {
  z-index: 11;
  background-color: #0000;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.handles-home {
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 22vh;
  margin-top: 0;
  display: flex;
  position: static;
  inset: auto 0% -25%;
}

.handles-home.bottom, .handles-home.top {
  height: 24vh;
}

.image-239 {
  width: 50px;
  display: block;
}

.div-block-403 {
  opacity: 1;
  background-color: #2b2d36;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.div-block-403.grey {
  opacity: 1;
  background-color: #0000;
  border-width: 1.2px;
  border-color: #3511b1;
  border-radius: 50px;
  width: 120px;
  height: 43px;
  margin-right: 5px;
  padding-right: 0;
  display: flex;
}

.div-block-403.grey.white {
  border-color: #f9b4b4;
}

.notch-start-funtions-2 {
  z-index: 100;
  opacity: 1;
  background-color: #3511b1;
  border-radius: 50px;
  flex: none;
  width: 200px;
  height: 6px;
  margin-top: 0;
  position: absolute;
}

.notch-start-funtions-2.day {
  background-color: #ffb4b4;
}

.div-block-404 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  font-size: 45px;
  display: flex;
}

.div-block-405 {
  opacity: 1;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-top: 0;
  padding: 0;
  display: flex;
}

.dynamictext-2 {
  color: #3511b1;
  letter-spacing: -10px;
  margin-top: -64px;
  margin-bottom: 0;
  font-size: 300px;
  font-weight: 300;
  position: absolute;
}

.holdeimagehaed-2 {
  background-color: #ffb4b4;
  border-radius: 25px 25px 0 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.div-block-406 {
  z-index: 5;
  background-color: #66171700;
  width: 100%;
  height: 98vh;
  position: absolute;
}

.div-block-407 {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.section-panel-about {
  z-index: 10;
  color: #4b1515;
  background-color: #0000;
  height: 100vh;
  padding-top: 4vh;
  position: absolute;
  overflow: hidden;
}

.trigger-trigger-about {
  background-color: #0000;
  width: 100vw;
  height: 1px;
  position: absolute;
  inset: 4% 0% auto;
}

.scrollblock-2 {
  z-index: 300;
  background-color: #0000;
  flex: none;
  width: 100%;
  height: 95vh;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 95vh;
}

.div-block-408 {
  z-index: -1;
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  object-fit: fill;
  border-radius: 45px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.image-240 {
  width: 50px;
  display: block;
}

.growholder-2 {
  background-color: #0000;
  border-radius: 25px 25px 0 0;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 101%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  overflow: hidden;
}

.iframe-holder-2 {
  background-color: #0000;
  width: 100vw;
  height: 93vh;
  padding-top: 5vh;
}

.main-hero_heading-4 {
  color: #222;
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 10%;
  padding-right: 3%;
  font-size: 7.5em;
  font-weight: 400;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.main-hero_heading-4.light {
  color: #3511b1;
}

.div-block-409 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.div-block-410 {
  background-color: var(--mainbrandcolour);
  border-radius: 50px;
  width: 15%;
  height: 6px;
}

.div-block-411 {
  opacity: 1;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 43px;
  margin-top: 0;
  padding: 0;
  display: flex;
}

.text-block-125 {
  color: #2b2d36;
  padding-top: 0;
  padding-bottom: 23px;
  font-size: 33px;
  font-weight: 400;
  line-height: 13px;
  text-decoration: none;
}

.text-block-125.soft {
  opacity: .41;
  font-size: 33px;
  display: none;
}

.text-block-125.darktext {
  color: #ffb4b4;
  padding-bottom: 0;
  font-size: 120px;
  font-weight: 400;
  line-height: 30px;
}

.div-block-412 {
  opacity: 1;
  background-color: #2b2d36;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.div-block-412.grey {
  opacity: 1;
  background-color: #ffb4b4;
  width: 70px;
  height: 30px;
  padding-right: 3px;
}

.videoouter-2 {
  background-color: #3511b1;
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding-bottom: 0;
  padding-left: 0;
  display: flex;
  overflow: hidden;
}

.videoouter-2.light {
  background-color: #0000;
  height: 98vh;
}

.text-block-126 {
  color: #3511b1;
  letter-spacing: -10px;
  font-size: 250px;
}

.image-241 {
  z-index: 1;
  max-width: none;
  height: 100vh;
  position: relative;
}

.text-block-127 {
  color: #2b2d36;
  margin-right: 22px;
  font-size: 20px;
  display: none;
}

.output-2 {
  z-index: 700;
  background-color: #0000;
  border-radius: 0;
  flex: 0 auto;
  align-self: auto;
  width: 100vw;
  height: 88vh;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  display: flex;
  position: static;
  inset: 0%;
  overflow: hidden;
}

.dynamicdescription-2 {
  color: #3511b1;
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 15%;
  padding-right: 5%;
  font-size: 7.5em;
  font-weight: 400;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.trigger-trigger-home {
  background-color: #0000;
  width: 100vw;
  height: 1px;
  position: absolute;
}

.spacer-2 {
  opacity: 1;
  background-color: #0000;
  border: 0 solid #ff615b;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 100px;
  height: 40px;
  padding-right: 7px;
  display: flex;
}

.div-block-413 {
  background-color: #ff615b;
  border: 0 solid #ff615b;
  border-radius: 200px;
  width: 27px;
  height: 27px;
}

.div-block-413.greennew {
  background-color: #6d6e6d;
  width: 23px;
  height: 23px;
}

.div-block-413.green {
  background-color: #ffb4b4;
  width: 23px;
  height: 23px;
  display: none;
}

.div-block-413.bluenew {
  background-color: #d6d6d6;
  width: 23px;
  height: 23px;
}

.div-block-413.rednew {
  background-color: #000;
  width: 23px;
  height: 23px;
}

.smalltext-2 {
  color: #3511b1;
  text-align: center;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
}

.smalltext-2.white {
  color: #f9b4b4;
}

.smalltext-2.grey {
  color: #3511b1;
}

.image-242 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -25vh;
  position: relative;
  overflow: visible;
}

.image-242._1 {
  width: 180%;
  margin-bottom: -36vh;
}

.image-242._1.new {
  inset: 0%;
  inset: -22% 0% 0% 4vw;
  inset: 20vh 0% 0%;
  width: 200%;
  margin-top: 16vh;
  margin-bottom: 0;
  margin-left: -20vh;
  position: absolute;
  inset: 0%;
  transform: rotate(-90deg);
}

.div-block-414 {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.trigger-trigger-work {
  background-color: #0000;
  width: 100vw;
  height: 1px;
  position: absolute;
  inset: auto 0% 5%;
}

.section-panel-work {
  z-index: 200;
  background-color: #0000;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.trigger-div-3 {
  z-index: 5;
  background-color: #ffb4b4;
  border-radius: 100px;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  width: 100px;
  height: 6px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  position: relative;
  inset: 40px 0% auto;
  overflow: hidden;
}

.trigger-div-3.dark {
  background-color: #232327;
  flex: none;
  width: 100px;
  height: 6px;
  margin-top: 0;
  padding-top: 0;
  top: 30px;
}

.trigger-div-3.dark.night {
  background-color: #3511b1;
  width: 200px;
  top: 60px;
}

.trigger-div-3.light {
  opacity: 0;
  background-color: #3511b1;
  margin-top: -6px;
  top: 60px;
}

.image-243 {
  z-index: 0;
  object-fit: fill;
  width: 150%;
  max-width: none;
  margin-top: 0;
  margin-bottom: -84px;
  position: relative;
  overflow: visible;
}

.image-243._4 {
  width: 120%;
  margin-top: -10vh;
  margin-bottom: 0;
}

.pages-2 {
  z-index: 11;
  background-color: #0000;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 96vw;
  height: 97.1vh;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  position: sticky;
  top: 9vh;
  overflow: scroll;
}

.main-hero_heading-5 {
  color: #3511b1;
  letter-spacing: -.01em;
  width: 100%;
  max-width: 15em;
  margin: 0 0% 5%;
  padding-top: 0%;
  padding-left: 10%;
  padding-right: 3%;
  font-size: 7.5em;
  font-weight: 400;
  line-height: 1.1;
  display: block;
  position: static;
  top: 5%;
}

.text-block-128 {
  color: #f9b4b4;
  font-size: 55px;
  line-height: 60px;
}

.stack {
  z-index: 100;
  position: fixed;
  overflow: visible;
}

.div-block-415 {
  width: 10vw;
  height: 80%;
}

.work-holder-outer {
  z-index: -1;
  background-color: var(--clear);
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: static;
  overflow: hidden;
}

.blur-bg {
  z-index: 70;
  opacity: 0;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background-color: #41474b85;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
}

.image-244 {
  opacity: 1;
  max-width: 80%;
}

.number-text {
  opacity: .27;
  color: #fff;
  width: auto;
  height: auto;
  margin-top: 50px;
  margin-bottom: 30px;
  margin-left: 50px;
  font-family: roboto-mono, sans-serif;
  font-size: 16px;
  display: none;
  transform: rotate(-90deg);
}

.fade-spacer {
  flex: none;
  justify-content: flex-end;
  align-items: flex-end;
  width: 40vw;
  height: 85vh;
  padding: 34px 20px 7px 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.spacerimage {
  box-sizing: border-box;
  opacity: .28;
  mix-blend-mode: difference;
  object-fit: fill;
  transform-style: preserve-3d;
  width: 100%;
  min-width: auto;
  max-width: none;
  height: 100%;
  min-height: auto;
  max-height: none;
  display: none;
  position: absolute;
  overflow: clip;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.row-2 {
  background-color: #0000;
  width: auto;
  height: auto;
  margin-bottom: 0;
  overflow: visible;
}

.plusspacer {
  z-index: 20;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  cursor: pointer;
  background-color: #0000;
  border: 2px solid #6b6b6b;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 15px 15px 0 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: absolute;
}

.iframeproject {
  z-index: 4;
  flex: 0 auto;
  align-self: auto;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  overflow: auto;
}

.column {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #0000;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  overflow: hidden;
}

.go-centre {
  width: 20px;
  height: 20px;
}

.grid-today {
  z-index: 9;
  pointer-events: auto;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: static;
  inset: 0%;
  overflow: visible;
}

.holder-spacer {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: auto;
  height: auto;
  display: flex;
}

.holder {
  border-radius: 35px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: auto;
  height: auto;
  display: flex;
}

.centre-holder {
  z-index: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: visible;
}

.plus {
  background-color: #fff;
  width: 8px;
  height: 40px;
  position: absolute;
}

.plus.vertical {
  background-color: #fff;
  width: 3px;
  height: 30px;
}

.plus.vertical.white {
  z-index: 0;
  cursor: pointer;
  background-color: #6b6b6b;
  width: 2px;
  height: 20px;
}

.plus.horizontal {
  background-color: #fff;
  width: 3px;
  height: 30px;
  transform: rotate(90deg);
}

.plus.horizontal.white {
  z-index: 0;
  cursor: pointer;
  background-color: #6b6b6b;
  width: 2px;
  height: 20px;
}

.fade-target {
  aspect-ratio: auto;
  cursor: pointer;
  object-fit: contain;
  border-radius: 35px;
  flex: none;
  width: 40vw;
  height: 85vh;
  position: relative;
  overflow: hidden;
}

.video-service {
  background-color: var(--clear);
  border-radius: 0;
  flex-flow: row;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 25px;
  padding: 0;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
}

.video-service.build {
  background-color: var(--dark-brand);
  background-color: #3511b1;
  border-radius: 35px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  position: relative;
}

.video-services {
  object-fit: cover;
  border-radius: 50px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  max-height: none;
  margin-right: 0;
  display: flex;
  overflow: hidden;
}

.video-holder {
  border-radius: 50px;
  flex: none;
  width: 80vw;
  height: 70vh;
  margin-right: 2vw;
  position: relative;
  overflow: hidden;
}

.image-245 {
  max-width: 120%;
  position: absolute;
  inset: 37% 0% 0%;
}

.work-finder {
  background-color: var(--clear);
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  display: flex;
  overflow: auto;
}

.video-work {
  background-color: #d3d3d3;
  border-radius: 35px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 92vw;
  height: 90vh;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  overflow: hidden;
}

.video-work._100 {
  height: 100%;
}

.project-2 {
  background-color: #e0e0e0;
  border-radius: 35px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 37vw;
  height: 88vh;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
}

.project-3 {
  background-color: #505050;
  border-radius: 35px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 37vw;
  height: 88vh;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
}

.project-1-copy {
  background-color: #e0e0e0;
  border-radius: 50px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 37vw;
  height: 85vh;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
}

.prject-image {
  max-width: 80%;
}

.handles-home-new {
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 22vh;
  margin-top: 0;
  display: flex;
  position: relative;
  inset: 100vh 0% 0%;
}

.pull-bar {
  background-color: #f0f5ff;
  border-radius: 50px;
  width: 15%;
  height: 6px;
}

.screen-elements {
  object-fit: fill;
  position: fixed;
  inset: 0%;
}

.cta-button {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  color: #fff;
  background-color: #0000001a;
  border-radius: 50px;
  flex-flow: row;
  flex: 0 auto;
  justify-content: center;
  align-self: auto;
  align-items: center;
  width: 250px;
  height: 65px;
  margin-top: 0;
  margin-bottom: 36vh;
  padding: 0 10px;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 18px;
  display: flex;
  position: relative;
  inset: auto 0% 0%;
}

.cta-holder {
  z-index: 100;
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  height: 30vh;
  max-height: 100vh;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: fixed;
  inset: auto 0% -30vh;
}

.div-block-418 {
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  display: flex;
}

.div-block-419 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 50%;
  height: 100%;
  display: none;
}

.text-block-129 {
  color: #fff;
  text-align: center;
  width: 100%;
}

.image-246 {
  width: 50px;
  max-width: none;
  margin-left: 0;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.image-holder {
  object-fit: cover;
  background-image: url('../images/crop.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.trigger-holder {
  justify-content: center;
  align-items: center;
  width: 100vw;
  display: flex;
  position: absolute;
  top: 7vh;
}

.div-block-421 {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  top: 7vh;
}

.link-block-5 {
  width: auto;
  height: auto;
  text-decoration: none;
}

.div-block-422 {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.div-block-423 {
  width: 50px;
  height: 50px;
  position: relative;
}

.start, .gomail {
  color: #fff;
  text-align: center;
  width: 100%;
}

.handle-page {
  z-index: 75;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.buttondiv {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #000000c2;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: -13vh;
  margin-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  overflow: hidden;
}

.div-block-424 {
  background-color: #232327;
  border-radius: 10px;
  width: 38px;
  height: 4px;
  position: absolute;
  transform: rotate(0);
}

.div-block-424.cross {
  height: 4px;
  transform: rotate(90deg);
}

.open-output-2 {
  z-index: 6;
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #0000;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 4px;
  padding-right: 5px;
  text-decoration: none;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.projectbutton-form-2 {
  z-index: 200;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 113vh 0% 0%;
  overflow: visible;
}

.projectbutton-form-2.test {
  position: absolute;
  top: 100vh;
}

.button-button-2 {
  aspect-ratio: 1;
  background-color: #ff4d46;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-left: 0%;
  margin-right: 0;
  display: flex;
  position: static;
}

.close-output-2 {
  z-index: 5;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  text-decoration: none;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.close-output-2.w--current {
  background-color: #0000;
}

.text-block-130 {
  opacity: 1;
  color: #ff4d46;
  background-color: #0000;
  font-size: 20px;
  display: flex;
}

.close-project-2 {
  z-index: 6;
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #0000;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 4px;
  padding-right: 5px;
  text-decoration: none;
  display: none;
  position: fixed;
  overflow: hidden;
}

.learn-button-2 {
  z-index: 5;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  text-decoration: none;
  display: flex;
  position: static;
  inset: 0% 0% auto;
}

.learn-button-2.w--current {
  background-color: #0000;
}

.projectpage-2 {
  background-color: #1d1d1f;
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 150vh;
  display: flex;
  overflow: visible;
}

.base-2 {
  z-index: 1;
  cursor: auto;
  background-color: #ff4d46;
  border-radius: 0;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.show-project-button-3 {
  z-index: 6;
  background-color: #0000;
  width: 50%;
  height: 100%;
  position: absolute;
}

.projectoutput-3 {
  z-index: 150;
  opacity: 1;
  background-color: #0000;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  padding-bottom: 100vh;
  display: none;
  position: absolute;
  inset: 0%;
  overflow: visible;
}

.workviewpanel-2 {
  background-color: #ff514a;
  border-radius: 0;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  overflow: scroll;
}

.hold-header-2 {
  background-color: #1d1d1f;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: static;
}

.image-247 {
  aspect-ratio: auto;
  flex: none;
  width: 60vw;
  max-width: none;
  height: auto;
  margin-top: 90%;
  margin-left: 500px;
  margin-right: -109px;
  display: block;
  overflow: clip;
}

.projectname-3 {
  z-index: 4;
  color: #ff6761;
  -webkit-text-stroke-color: #fdb6b8;
  mix-blend-mode: difference;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 250px;
  font-weight: 500;
  position: static;
}

.image-248 {
  z-index: 5;
  cursor: auto;
  background-color: #0000;
  border-radius: 0;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.basecolour {
  z-index: 20;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: none;
  position: absolute;
  inset: 0%;
}

.blockout-2 {
  z-index: 0;
  background-color: #1d1d1f;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  width: 95vw;
  height: 95vh;
  position: absolute;
  top: 5vh;
}

.base-3 {
  z-index: 1;
  cursor: auto;
  background-color: #ff4d46;
  border-radius: 0;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.projectoutput-4 {
  z-index: 150;
  opacity: 1;
  background-color: #0000;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  padding-bottom: 100vh;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: visible;
}

.show-project-button-4 {
  z-index: 6;
  background-color: #0000;
  width: 50%;
  height: 100%;
  position: absolute;
}

.show-project-button-5 {
  z-index: 6;
  background-color: #0000;
  width: 100%;
  height: 100%;
  position: absolute;
}

.workviewpanel-3 {
  background-color: #ff514a;
  border-radius: 0;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  overflow: scroll;
}

.hold-header-3 {
  background-color: #1d1d1f;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: static;
}

.image-249 {
  aspect-ratio: auto;
  flex: none;
  width: 60vw;
  max-width: none;
  height: auto;
  margin-top: 90%;
  margin-left: 500px;
  margin-right: -109px;
  display: block;
  overflow: clip;
}

.projectname-4 {
  z-index: 4;
  color: #ff6761;
  -webkit-text-stroke-color: #fdb6b8;
  mix-blend-mode: difference;
  font-family: Tt Hoves Pro Webfont, Arial, sans-serif;
  font-size: 250px;
  font-weight: 500;
  position: static;
}

.image-250 {
  z-index: 5;
  cursor: auto;
  background-color: #0000;
  border-radius: 0;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.basecolour-2 {
  z-index: 20;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0%;
}

.blockout-3 {
  z-index: 0;
  background-color: #1d1d1f;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  width: 95vw;
  height: 95vh;
  position: absolute;
  top: 5vh;
}

.open-output-3 {
  z-index: 6;
  cursor: pointer;
  mix-blend-mode: normal;
  background-color: #0000;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 65px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 4px;
  padding-right: 5px;
  text-decoration: none;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.button-button-3 {
  aspect-ratio: 1;
  background-color: #ff4d46;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-left: 0%;
  margin-right: 0;
  display: flex;
  position: static;
}

.learn-button-3 {
  z-index: 5;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  text-decoration: none;
  display: flex;
  position: static;
  inset: 0% 0% auto;
}

.learn-button-3.w--current {
  background-color: #0000;
}

.close-output-3 {
  z-index: 5;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  text-decoration: none;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.close-output-3.w--current {
  background-color: #0000;
}

.projectbutton-form-3 {
  z-index: 200;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 113vh 0% 0%;
  overflow: visible;
}

.projectbutton-form-3.test {
  top: 100vh;
}

.text-block-131 {
  opacity: 1;
  color: #ff4d46;
  background-color: #0000;
  font-size: 20px;
  display: flex;
}

.div-block-425 {
  background-color: #232327;
  border-radius: 10px;
  width: 38px;
  height: 4px;
  position: absolute;
  transform: rotate(0);
}

.div-block-425.cross {
  height: 4px;
  transform: rotate(90deg);
}

.video-project {
  object-fit: cover;
  border-radius: 50px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
  max-height: none;
  margin-right: 0;
  display: flex;
  overflow: hidden;
}

@media screen and (max-width: 991px) {
  .main-hero_heading, .largeheader {
    font-size: 5em;
  }

  .div-block-297, .div-block-370, .div-block-376, .div-block-380 {
    height: 26px;
  }

  .headercms, .descriptioncms, .middleheader, .middleheadertext, .main-hero_heading-copy, .servicetext, .dynamicdescription, .main-hero_heading-2 {
    font-size: 5em;
  }

  .buttonside {
    margin-top: 20px;
  }

  .main-hero_heading-3, .main-hero_heading-4, .dynamicdescription-2 {
    font-size: 5em;
  }

  .div-block-413 {
    height: 26px;
  }

  .main-hero_heading-5 {
    font-size: 5em;
  }
}

@media screen and (max-width: 767px) {
  .studiotext {
    font-size: 6em;
  }

  .logonav.dark {
    display: none;
  }

  .connectnav.home.light {
    display: flex;
  }

  .textbig {
    font-size: 6em;
  }

  .cursor-wrapper.dark {
    z-index: 13;
    display: none;
  }

  .innerpage {
    height: 150vh;
  }

  .main-hero_heading {
    font-size: 3.5em;
  }

  .largeheader {
    margin-left: 10vw;
    padding-right: 12%;
    font-size: 2.7em;
    line-height: 1.2;
  }

  .div-block-319 {
    height: 100%;
  }

  .growthbutton.topgap.red.short {
    border-radius: 20px;
    height: 80vh;
  }

  .div-block-332 {
    height: auto;
  }

  .pageinner {
    padding-top: 15px;
  }

  .notch-2 {
    width: 130px;
    height: 4px;
  }

  .digital-button._50 {
    border-radius: 20px;
    height: 80vh;
  }

  .div-block-294 {
    height: 100%;
  }

  .div-block-333 {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
    padding-right: 0;
  }

  .row.big {
    flex-flow: column;
    width: 90%;
    height: auto;
  }

  .productbutton.lightbox.build {
    border-radius: 20px;
    height: 80vh;
  }

  .brandbutton.build {
    border-radius: 20px;
    height: 70vh;
  }

  .div-block-329 {
    height: 300px;
  }

  .text-block-92.lighttext, .text-block-92.darktext {
    font-size: 35px;
  }

  .spacerloader {
    width: 45px;
    height: 45px;
  }

  .div-block-323 {
    height: 10%;
  }

  .content-holder {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .fullloaderline {
    justify-content: center;
    align-items: center;
    height: 45px;
    position: static;
  }

  .image-225.dark.loadlarge {
    width: 80px;
    position: static;
    overflow: visible;
  }

  .loaderline {
    width: 130px;
    height: 4px;
    margin-top: 0;
  }

  .discovervideoholder {
    display: flex;
  }

  .getilluminated {
    font-size: 6em;
  }

  .div-block-366 {
    height: 100%;
  }

  .content2 {
    height: auto;
  }

  .div-block-368 {
    height: 100%;
  }

  .content {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
    padding-right: 0;
  }

  .cover-design {
    height: 300px;
  }

  .text-block-113.darktext, .text-block-113.lightnew {
    font-size: 35px;
  }

  .div-block-373, .div-block-374 {
    height: 100%;
  }

  .div-block-377 {
    height: 300px;
  }

  .div-block-378 {
    height: 100%;
  }

  .div-block-381 {
    height: 300px;
  }

  .text-block-116.lighttext {
    font-size: 35px;
  }

  .headercms {
    margin-left: 10vw;
    padding-right: 12%;
    font-size: 2.7em;
    line-height: 1.2;
  }

  .descriptioncms {
    font-size: 3.5em;
  }

  .growwork, .growholder {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .trigger-div {
    width: 130px;
    height: 4px;
  }

  .middleheader {
    margin-left: 10vw;
    padding-right: 12%;
    font-size: 2.7em;
    line-height: 1.2;
  }

  .middleheadertext, .main-hero_heading-copy, .servicetext, .dynamicdescription, .main-hero_heading-2 {
    font-size: 3.5em;
  }

  .sliderholder {
    height: 150vh;
  }

  .trigger-div-2 {
    width: 130px;
    height: 4px;
  }

  .main-hero_heading-3 {
    font-size: 3.5em;
  }

  .sliderholder-2 {
    height: 150vh;
  }

  .div-block-404, .div-block-405 {
    height: 100%;
  }

  .div-block-407 {
    height: 300px;
  }

  .growholder-2 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .main-hero_heading-4 {
    font-size: 3.5em;
  }

  .div-block-409, .div-block-411 {
    height: 100%;
  }

  .text-block-125.darktext {
    font-size: 35px;
  }

  .dynamicdescription-2 {
    font-size: 3.5em;
  }

  .div-block-414 {
    height: 300px;
  }

  .trigger-div-3 {
    width: 130px;
    height: 4px;
  }

  .main-hero_heading-5 {
    font-size: 3.5em;
  }

  .video-service.build {
    border-radius: 20px;
    height: 70vh;
  }
}

@media screen and (max-width: 479px) {
  .logonav.dark, .helloopendesktop {
    display: none;
  }

  .closeconnectmobile.dark {
    display: flex;
  }

  .closeconnectdesktop.dark {
    display: none;
  }

  .connectnav {
    margin-top: 10px;
    display: flex;
  }

  .connectnav.home {
    top: 2%;
  }

  .helloopenmobile {
    display: flex;
  }

  .lottie-image-holder {
    display: none;
  }

  .frontlottie {
    width: auto;
    height: 100vh;
    margin-top: 32vh;
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    overflow: visible;
  }

  .outputframe {
    border-radius: 15px;
    width: 92vw;
    height: 100vh;
    margin-left: 4vw;
    display: none;
  }

  .cursor-wrapper {
    display: none;
  }

  .main-hero_heading {
    width: 90%;
    font-size: 2.7em;
    line-height: 1.15;
  }

  .largeheader {
    width: 70%;
    font-size: 2.8em;
    line-height: 1.15;
  }

  .buildbutton {
    background-image: none;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }

  .topspacerclear {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    height: 5vh;
  }

  .div-block-319 {
    flex-flow: column;
  }

  .growthbutton.topgap.red {
    background-image: none;
    border-radius: 20px;
    width: 90%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }

  .growthbutton.topgap.red.short {
    border-radius: 35px;
    width: 90vw;
  }

  .div-block-332 {
    width: 100%;
  }

  .pageinner {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .digital-button {
    background-image: none;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }

  .digital-button._50 {
    background-image: none;
    border-radius: 20px;
    width: 90%;
    height: 300px;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
  }

  .div-block-294 {
    flex-flow: column;
    width: 60px;
  }

  .div-block-296 {
    width: 60px;
    height: 30px;
  }

  .image-214 {
    width: 500px;
    margin-top: 0;
  }

  .div-block-333 {
    width: 100%;
    padding-right: 0;
  }

  .row.big {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 100vw;
    height: auto;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0%;
    padding-right: 0%;
    overflow: visible;
  }

  .productbutton.lightbox {
    aspect-ratio: 1;
    background-image: none;
    border-radius: 20px;
    height: 300px;
    margin-bottom: 20px;
    margin-left: 0;
    padding: 20px;
  }

  .productbutton.lightbox.build {
    width: 100%;
    margin-bottom: 20px;
  }

  .brandbutton {
    background-image: none;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }

  .brandbutton.build {
    width: 100%;
  }

  .text-block-92, .text-block-92.lighttext, .text-block-92.darktext {
    font-size: 35px;
  }

  .basecolourholder.stick, .videostop {
    display: none;
  }

  .div-block-366 {
    flex-flow: column;
  }

  .content2 {
    width: 100%;
  }

  .div-block-368 {
    flex-flow: column;
    width: 60px;
  }

  .div-block-369 {
    width: 60px;
    height: 30px;
  }

  .image-226 {
    width: 500px;
    margin-top: 0;
  }

  .content {
    width: 100%;
    padding-right: 0;
  }

  .text-block-113, .text-block-113.darktext {
    font-size: 35px;
  }

  .text-block-113.lightnew {
    font-size: 55px;
  }

  .div-block-373 {
    flex-flow: column;
  }

  .div-block-374 {
    flex-flow: column;
    width: 60px;
  }

  .div-block-375 {
    width: 60px;
    height: 30px;
  }

  .image-228 {
    width: 500px;
    margin-top: 0;
  }

  .div-block-378 {
    flex-flow: column;
  }

  .div-block-379 {
    width: 60px;
    height: 30px;
  }

  .image-230 {
    width: 500px;
    margin-top: 0;
  }

  .text-block-116, .text-block-116.lighttext {
    font-size: 35px;
  }

  .headercms {
    width: 70%;
    font-size: 2.8em;
    line-height: 1.15;
  }

  .descriptioncms {
    width: 90%;
    font-size: 2.7em;
    line-height: 1.15;
  }

  .videostart {
    display: none;
  }

  .middleheader {
    width: 70%;
    font-size: 2.8em;
    line-height: 1.15;
  }

  .middleheadertext, .main-hero_heading-copy {
    width: 90%;
    font-size: 2.7em;
    line-height: 1.15;
  }

  .dynamictext {
    font-size: 80px;
  }

  .servicetext {
    width: 90%;
    font-size: 2.7em;
    line-height: 1.15;
  }

  .dynamicdescription {
    width: 90%;
    font-size: 3em;
    line-height: 1.15;
  }

  .serviceimage {
    width: 100vw;
    margin-top: 87%;
  }

  .image-234, .image-235, .image-236, .image-237 {
    width: 500px;
    margin-top: 0;
  }

  .image-237._1.new {
    width: 150%;
  }

  .main-hero_heading-2 {
    font-size: 2.4em;
  }

  .spacer {
    width: 60px;
    height: 30px;
  }

  .inside-image {
    width: 500px;
    margin-top: 0;
  }

  .output {
    border-radius: 15px;
    width: 92vw;
    height: 100vh;
    margin-left: 4vw;
    display: none;
  }

  .main-hero_heading-3 {
    width: 90%;
    font-size: 2.7em;
    line-height: 1.15;
  }

  .videostart-2 {
    display: none;
  }

  .div-block-403 {
    width: 60px;
    height: 30px;
  }

  .div-block-404 {
    flex-flow: column;
  }

  .div-block-405 {
    flex-flow: column;
    width: 60px;
  }

  .dynamictext-2 {
    font-size: 80px;
  }

  .main-hero_heading-4 {
    width: 90%;
    font-size: 2.7em;
    line-height: 1.15;
  }

  .div-block-409 {
    flex-flow: column;
  }

  .div-block-411 {
    flex-flow: column;
    width: 60px;
  }

  .text-block-125, .text-block-125.darktext {
    font-size: 35px;
  }

  .div-block-412 {
    width: 60px;
    height: 30px;
  }

  .output-2 {
    border-radius: 15px;
    width: 92vw;
    height: 100vh;
    margin-left: 4vw;
    display: none;
  }

  .dynamicdescription-2 {
    width: 90%;
    font-size: 3em;
    line-height: 1.15;
  }

  .spacer-2 {
    width: 60px;
    height: 30px;
  }

  .image-242 {
    width: 500px;
    margin-top: 0;
  }

  .image-242._1.new {
    width: 150%;
  }

  .image-243 {
    width: 500px;
    margin-top: 0;
  }

  .main-hero_heading-5 {
    width: 90%;
    font-size: 2.7em;
    line-height: 1.15;
  }

  .video-service {
    background-image: none;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }

  .video-service.build {
    width: 100%;
  }
}


@font-face {
  font-family: 'Tt Hoves Pro Webfont';
  src: url('../fonts/tt_hoves_pro_medium-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tt Hoves Pro Trial Variable';
  src: url('../fonts/TT-Hoves-Pro-Trial-Variable.ttf') format('truetype');
  font-weight: 50 900;
  font-style: normal;
  font-display: swap;
}