.overflow-hidden {
  width: 100%;
  overflow: hidden; 
}

                      .cls-1,
                      .cls-3,
                      .cls-5,
                      .cls-8 {
                        fill: none;
                      }

                      .cls-2 {
                        clip-path: url(#clip-path);
                      }

                      .cls-3 {
                        stroke: #231f20;
                        stroke-width: 0.37px;
                      }

                      .cls-3,
                      .cls-5,
                      .cls-8 {
                        stroke-miterlimit: 10;
                      }

                      .cls-4 {
                        fill: #231f20;
                        opacity: 0.1;
                      }

                      .cls-5,
                      .cls-8 {
                        stroke: #000;
                      }

                      .cls-5 {
                        stroke-width: 0.21px;
                      }

                      .cls-6 {
                        font-size: 6.39px;
                      }

                      .cls-6,
                      .cls-9 {
                        fill: #303030;
                        font-family: Comico-Regular, Comico;
                      }

                      .cls-7 {
                        letter-spacing: -0.02em;
                      }

                      .cls-8 {
                        stroke-width: 0.2px;
                      }

                      .cls-9 {
                        font-size: 10.34px;
                        letter-spacing: 0em;
                      }

                      .cls-10 {
                        letter-spacing: -0.02em;
                      }

                      .cls-11 {
                        letter-spacing: 0em;
                      }

                      .cls-12 {
                        letter-spacing: 0.02em;
                      }

                      .cls-13 {
                        letter-spacing: -0.03em;
                      }

                      .cls-14 {
                        letter-spacing: 0em;
                      }

                      .cls-15 {
                        letter-spacing: -0.02em;
                      }

                      .cls-16 {
                        letter-spacing: -0.01em;
                      }

                      .cls-17 {
                        letter-spacing: -0.02em;
                      }

                      .cls-18 {
                        letter-spacing: 0em;
                      }

                      .cls-19 {
                        letter-spacing: 0em;
                      }

                      .cls-20 {
                        letter-spacing: 0em;
                      }

                      .cls-21 {
                        letter-spacing: 0em;
                      }

                      .cls-22 {
                        letter-spacing: -0.02em;
                      }

                      .cls-23 {
                        letter-spacing: 0.03em;
                      }

                      .cls-24 {
                        letter-spacing: -0.02em;
                      }

.menu-link__inner {
  font-family: Dmsans, sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
}

.typography-inner {
  padding-top: 80px;
  padding-bottom: 80px;
 min-height: 900px;
}

.history-text {
  align-self: flex-start;
}

.text-scroll {
  display: flex;
  justify-content: center;
}

.case-study-footer {
  padding-left: 58px;
  z-index: 3;
  padding-bottom: 60px;
}

.conclusion-video {
  position: relative;
}


.typography-inner__header svg {
  position: absolute;
  width: 100%;
}



/* .bg-video__svg svg .svg-line path {
  visibility:hidden;
} */

/* .cls-3 {
  visibility:hidden;
   transform:scale(1.1); 
} */



.note-img {
 -webkit-perspective: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}

.svg-label__container {
  position: absolute;
  left: 0;
  right: 0;bottom: 0;
  top: 0;
  width: 1550px;
  margin-left: -35px;
  margin-top: 70px;
  height: 100vh;
}       

.hero-svg__label.stairwell {
  left: 12vw;
  bottom: 23vh;
}

.hero-svg__label.secondary {
  right: 10%;
  bottom: 20vh;
}

.hero-svg__label.demarcation {
  right: 37%;
  bottom: 11.5vh;
}

.hero-svg__label.floral {
  right: 7%;
  bottom: 30vh;
}

.hero-svg__label.roof {
  top: 9vh;
  right: 85px;
}
.relative {
position: relative;
}


.page-wrapper {
  overflow: hidden !important;
}

html.has-scroll-smooth {
  overflow: hidden;
}

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.has-scroll-smooth body {
  overflow: hidden;
}

.exit-loader {
  display: none;
}

.letterhead-text {
  font-size: 0.8vw;
}

.letterhead-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 50px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 10px;
  line-height: 12px;
}

.letterhead-logo__flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.letterhead-logo {
  width: 15vw;
  height: 5vw;
  max-height: 70px;
  max-width: 150px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-image: url('../images/letterhead-logo.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.letterhead-inner {
  text-align: right;
}


.letter-head__footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  align-self: flex-start;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.letterhead-footer__img {
  width: 70px;
  height: 30px;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.letterhead-footer__img.riba {
  background-image: url('../images/letterhead-footer3.svg');
}

.letterhead-footer__img.architect {
  width: 128px;
  background-image: url('../images/letterhead-footer2.svg');
}

.letterhead-footer__img.edge {
  width: 85px;
  height: 35px;
  background-image: url('../images/letterhead-footer1.svg');
}

.letterhead-text__title {
  color: #9fa0a4;
  font-size: 1.45vw;
  line-height: 38px;
}

.branding-img__letterhead {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 528px;
  height: 747px;
  max-height: 747px;
  margin-right: auto;
  margin-left: auto;
  padding: 30px 50px 30px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  background-image: url('../images/white-texture.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.lottie {
  width: 100%;
  height: 100%;
}
.color-code__flex {
  overflow: hidden;
}

.color-code__lottie {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.code-lottie {
  height: 100%;
  max-height: 100%;
}

.marquee-wrapper {
  display: flex;
  overflow: hidden;
}

  .branding {
    margin-top: 2500px;
}


   .typography-flex__text {
    height: 303px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.no-wrap {
  white-space:nowrap;
}

.lottie-container {
  transition: opacity 0.3 ease;
}

  .test-svg {
    margin-left: auto;
  }
  
  video, source {
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        .color-code {
          visibility: hidden;
        }

 .hover-pointer video {
          opacity: 0;
          transition: opacity 0.6s ease;

        }
         .culture-img video {
          opacity: 0;
          transition: opacity 0.6s ease;
        }

       .building-img video {
          opacity: 0;
          transition: opacity 0.6s ease;
        }


        .culture-img {
          position: relative;
          cursor: pointer;
          z-index: 3;
        }

            .building-img {
          position: relative;
          cursor: pointer;
          z-index: 3;
        }

   .video.absolute {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     z-index: 2;
   }     

   .climate-text {
     z-index: 0;
   }

.preloader-lottie {
  width: 70%;
  height: 70%;
}

    .main-content {
      overflow: hidden;
      position: relative;
      z-index: 2;
    }

    .hero {
      position: relative;
      z-index: 1;
    }

    .hero-svg {
      /* padding-left: 0;
      padding-right: 0;
      width: 100%; */
      position: absolute;
    left: 0%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin-left: 58px;
    padding-right: 100px;
    background-image: url('../images/Home-Illustration.svg'), url('../images/white-texture.jpg');

    background-position: 49.5% 50%, 50% 50%, 50% 50%;
    background-size: cover, cover, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
}
    }
    
     .hero-svg__image {
      height: auto;
  width: 100%;
    }
    
        /* .hero-svg__image svg{
      background-position: -10vw 0px;

    } */


    .hero-inner__img {
      z-index: 1;
      position: absolute;
   background-image: url('../images/Studio-E-Hero-Image.jpg');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin-left: 58px;
    }

    .hero-svg__svg {
      width: 100%;
      height: 100%;
    background-size: cover;
  background-repeat: no-repeat;
   background-image: url('../images/Home-Illustration.svg');
  background-position: 50% 50%;

    }

    .img.hero-img {
      object-fit: cover;
      margin-left: 10px;
      position: absolute;
    }

    .hero-inner__absolute, .hero-inner {
      max-height: none;
    }

 
   .svg-bg__text {
     text-align: left !important;
     top: 50%;
     padding-left: 5.5vw;
  /* left: -29px; */
   }

   .color-code__img{ 
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     position: absolute;
     background-image: url('../images/solution-logo.png');
    background-position: 50% 50%;
    background-size: 38%;
  background-repeat: no-repeat;
   }

   .color-code__block {
     position: relative;
     background-color: #fff;
     width: 100% !important;
     max-width: 100% !important;
     left: 0px !important;
   }

   .svg-line {
     margin-top: 10px;
     margin-left: 10px;
     min-height: 850px;
      transform: scale(1.018, 1.07);
   }
.svg-mobile {
  display: none;
}
 

   .color-code__lottie {
     background: transparent;
   }

   .code-lottie {
     scale: 1;
   }

   .form-checkbox.active {
  border-color: #a09f9f;
  background-color :#a09f9f;
  color: #fff;
}

.branding-images {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.branding-inner {
  padding-top: 144px;

}
.branding-inner__video {
  margin-bottom: 144px;
  }
  .hero-inner, .hero-inner__absolute, .hero-inner__fixed, .img.hero-img {
    min-height: 700px;
  }

     .share-icon-section {
       width: 100%;
     margin-right: 0;
  margin-left: 0;
}

.tape {

  overflow-y: hidden;
}
.typing-text__container {
    margin: 0 auto;
}

.tape-svg {
  width: 100%;
  flex-shrink: 0;
}



.hero-svg__inner {
  font-size: 10px;
  line-height: 15px;
  z-index: 2;
}
 .hero-svg__list {
  font-size: 8px;
  line-height: 15px;
}

   .hero-svg__text {
     font-weight: 500;
   max-width: 120px;
  }

  .branding-img__letterhead {
    color: #000;
  }

@media screen and (max-width: 1024px) {
    .svg-mobile {
      transform: scale(0.97, 1.01) ;
      margin-left: -165px;
     object-fit: cover;
   /* width: 100%; */
   max-width: 1440px;
   height: 100vh;
    display: block;
    } 



  .svg-line {
    display: none;
    margin-top: 30px;
    margin-left: 130px;
    min-height: 850px;
    transform: scale(1.63, 1.62);
  }

   .img.hero-img {
      margin-top: 6vw;
      margin-left: -111px;
  scale: 1;
  width: 1150px;

    }


.letterhead-logo {
  width: 10vw;
  height: 5vw;
  max-height: 70px;
  max-width: 120px;
}

  .hero-svg__label.stairwell {
  left: 60px;
  bottom: 190px;
}

.hero-svg__label.secondary {
  right: 400px;
  bottom: 150px;
}

.hero-svg__label.demarcation {
  right: 790px;
  bottom: 100px;
}

.hero-svg__label.floral {
  right: 80px;
  bottom: 30%;
}

.hero-svg__label.roof {
  top: 90px;
  right: 85px;
}



.svg-bg__text {
  line-height: 140px;
  width: 100%;
}

 /* .img.hero-img {
   margin-top: 50px;
      margin-left: -260px;
    } */

  .typography-inner__header {
    width: 350px;
    height: 270px;
  }

   .typography-inner__flex {
    margin-bottom: 30px;
  }

  h2 {
    font-size: 50px;
    line-height: 60px;
  }

  h3 {
    font-size: 40px;
    line-height: 50px;
  }


    h4 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 20px;
  }

  .letterhead-text {
    font-size: 1.1vw;
  }

  .branding-inner__text {
    font-size: 25px;
    line-height: 36px;
  }
}


   @media only screen and (max-width: 991px) {

    .svg-mobile {
      transform: scale(0.97, 1.01) ;
      margin-left: -205px;

     }

     .svg-line {
           margin-top: 20px;
    margin-left: 80px;
    margin-right: 0;
    min-height: 850px;
    transform: scale(1.6, 1.61);
     }

       .main-content {
    padding-left: 45px;
  }


     .svg-bg__text {
  left: -62.5px;
}

 

       .hero-svg__label.stairwell {
  left: 20px;
}

.hero-svg__label.secondary {
  right: 440px;
}

.hero-svg__label.demarcation {
  right: 825px;
  bottom: 100px;
}


     .hero-svg {
overflow: visible;
     }

   .page-wrapper {
     position: static !important;
}

 .img.hero-img {
   margin-top: 50px;
      margin-left: -150px;
      
    }
    } 


@media screen and (max-width: 768px) {

 .svg-mobile {
      transform: scale(0.97, 1.1) ;
      margin-left: -165px;

     }


  .svg-line {
    margin-top: 20px;
    margin-left: 300px;
    margin-right: 0;
    min-height: 850px;
    transform: scale(3.13, 3.15);
  }

   .main-content {
    padding-left: 45px;
  }

   .hover-pointer video {
          opacity: 1;

        }
         .culture-img video {
          opacity: 1;
        }

       .building-img video {
          opacity: 1;
        }

    .hero-inner__img {
  margin-left: 40px;
    }

    .case-study-footer {
  padding-left: 40px;
}

  .letterhead-flex {
    font-size: 8px;
    margin-bottom: 30px;
  }

.tape-svg {
  height: 75vh;
}

.hero-svg__inner {
  justify-content: flex-start;
  padding-top: 150px;
}

 

         .hero-svg__label.stairwell {
  left: -120px;
}

.hero-svg__label.secondary {
  right: 440px;
}

.hero-svg__label.demarcation {
  right: 1025px;
  bottom: 120px;
}

 .svg-bg__text {
   width: 100%;
   left: -62.5px;
   top: 60%;
 }


    .hero-svg {
/* overflow: visible; */
margin-left: 40px;
  }

  .branding-inner {
  padding-top: 100px;
}

 .branding-img__letterhead {
  height: 500px;
  width: 63%;
}

 .branding-img__camera {
  bottom: 50px;
}

.branding-inner__video {
  margin-bottom: 0px;
  }




   h3 {
    font-size: 25px;
    line-height: 35px;
  }

    h4 {
    font-size: 22px;
    line-height: 35px;
    margin-bottom: 20px;
  }

    .typography-inner__header {
    width: 320px;
    height: 240px;
  }

    .typography-inner {
   padding-top: 50px;
   padding-bottom: 50px;
   height: 800px;
  }


      .img.hero-img {
        width: 1250px; 
    margin-left: -180px;
    margin-top: 50px;
    scale: 1;
    }

  
}


  @media only screen and (max-width: 568px) {
   
 .svg-mobile {
      transform: scale(0.97, 1.1) ;
      margin-left: -397px;

     }

    .svg-line {
      margin-top: 20px;
    margin-left: 105px;
    margin-right: 0px;
    min-height: 850px;
    transform: scale(3.15, 3.2);
    }

   .typography-flex__text {
    height: 140px;
}
.tape-svg {
  height:68vh;
}
 
   .main-content {
    padding-left: 40px;
  }

 .typography-inner__header {
    margin-left: -25px;
    margin-bottom: 10px;
}

   .background-inner {
     align-items: flex-start;
     text-align: left;
   }
    .background-inner p{
     text-align: left;
   }

     .bg-video {
     align-items: flex-start;
   }
      .bg-video__inner {
     margin: 0 auto;
     margin-bottom: 50px;
   }

        .bg-video__block {
    padding-top: 0;
   }

   .bg-video__sidetext, .bg-video p{
     width: 100%;
     max-width: 100%;
     padding-left: 30px;
     padding-right: 30px;
   }

   .bg-video__sidetext {
padding-left: 0;
   }

   .bg-video p > div{
     text-align: left !important;
   }

     .svg-bg__text {
    color: #fff;
    opacity: 50%;
 	font-size: clamp(25px, 13.5vw, 15vw) !important;
  line-height: 80px !important;
    top: 80%;
   left: 0;
    transform: translate(0%, -80%);
 }
  
   .next-bar {
     font-size: 16px !important;
     line-height: 22px;
   }

   .next-arrow {
     width: 45px;
   }

   .branding-img__letterhead {
  padding: 30px;
  }

    .branding-inner__video .w-background-video>video {
      object-fit: contain;
     background-image: none !important;
      }
 .letterhead-logo {
   width: 100px;
   height: 50px;
 }

      .letterhead-text {
     line-height: 22px;
      }

    .color-code__block {
    height: 500px !important;
  }

  .color-code__flex {
   flex-wrap: wrap;
   margin-right: -22%;
  }

  .color-code {
    width: 33.33%;
  }

  .color-code.one, .color-code.four {
    width: 33.33%;
    margin-left: -10%;
    padding-left: 10%;
  }

  .color-code.six {
    width: 33.33%;
  }

    .color-code.six  .color-code__rgb{
   margin-top: 42px;
  }

  .color-code__hex {
    font-size: 16px;
    line-height: 20px;
  }

   .color-code__rgb {
    font-size: 10px;
    line-height: 12px;
  }



   .img.hero-img {
     padding-top: 0px;
     margin-left: -390px;
     margin-top: 70px;
     width: 1300px;
  }

     .hero-inner__img {
    margin-left: 30px;
    }

    .hero {
      min-height: 700px;
    }



    .color-code__hex {
    font-size: 10px;
    line-height: 12px;
  }

   .color-code__rgb {
    font-size: 6px;
    line-height: 8px;
  }

    .color-code.six  .color-code__rgb{
   margin-top: 26px;
  }
      .hero-svg {
/* overflow: visible; */
margin-left: 30px;
  }

 
 }


  @media only screen and (max-width: 479px) {

    
    .svg-line {
          margin-top: 20px;
    margin-left: 220px;
    margin-right: 0;
    min-height: 850px;
    transform: scale(5.8, 5.81);
    }

 .hero-svg__text {
     font-size: 8px;
     line-height: 10px;
  }
  .hero-svg__inner {
    padding-left: 30px;
  }

    .hero-svg {
    margin-left: 30px;
  }


      .typography-flex__text {
    height: 190px;
}

    .more-projects-text-block {
      font-size: 30px;
    }

  .more-projects-title {
      font-size: 20px;
      line-height: 20px;
    }

    .similar-project-nameblock {
      font-size: 16px;

    }

    .tape {
      display: none;
    }

     .img.hero-img {
       width: 1310px;
       padding-top: 45px;
     margin-left: -385px;
     margin-top: 0;
  }

        .case-study-footer {
  padding-left: 0;
}
     .main-content {
    padding-left: 0;
  }

     .hero-inner, .hero-inner__absolute, .hero-inner__fixed,  .img.hero-img  {
       min-height: auto;
    height: 100vh;
  }

  .hero {
min-height: auto;
padding-left: 0;
  }

  .hero-svg, .hero-inner__img {
    margin-left: 0;
  }


  .color-code__flex {
   flex-wrap: wrap;
   margin-right: -30%;
  }


  .color-code.one, .color-code.four {
    width: 33.33%;
    margin-left: -12%;
  }
   .color-code.three {
    padding-right: 8%;
  }

   .color-code.six {
    padding-right: 8%;
    padding-left: 10%;
  }

 .typography-inner{
   padding-top: 30px;
}
   .typography-inner__flex {
    margin-bottom: 10px;
  }

  .typography-inner__header {
    width: 220px;
    height: 180px;
  }

  h2 {
    font-size: 28px;
    line-height: 35px;
  }

  h2 {
    font-size: 32px;
  }

  h4 {
    font-size: 18px;
    line-height: 28px;

  }

  .branding-img__letterhead {
    height: 350px !important;
    padding: 20px 15px;
  }

  .letterhead-inner {
    font-size: 6px;
    line-height: 8px;
  }

  .letterhead-flex {
    margin-bottom: 10px;
  }

  .letterhead-logo {
    width: 60px;
    height: 20px;
  }

  .letterhead-text {
    margin-bottom: 30px;
    font-size: 6px;
    line-height: 12px !important;
  }

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




  .hero-note__img {
    margin: 0 auto;
    left: 15px;
    bottom: 0;
  }

  .svg-bg__text {
   left: 0;
    top: 80%;
    font-size: clamp(25px, 13.5vw, 80px) !important;
  line-height: 65px !important;
  }

  .letterhead-footer__img.riba {
 width: 70px;
 height: 25px;
}

.letterhead-footer__img.architect {
  width: 80px;
  height: 25px;
}

.letterhead-footer__img.edge {
  width: 60px;
  height: 25px;
}

.letter-head__footer {
      grid-column-gap: 15px;
    grid-row-gap: 15px;
}

  .branding-img__letterhead {
    width: 70%;
  }
   


.letterhead-text__title {
  margin-bottom: 15px !important;
  line-height: 10px;
  font-size: 8px !important;
}

.bg-video__text {
    font-size: clamp(25px, 17vw, 120px);
}
  }