@font-face {
    font-family: 'NeueMontrealLight';
    src: url('fonts/NeueMontreal-Light.woff2') format('woff2'),
        url('fonts/NeueMontreal-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueMontrealRegular';
    src: url('fonts/NeueMontreal-Regular.woff2') format('woff2'),
        url('fonts/NeueMontreal-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueMontrealMedium';
    src: url('fonts/NeueMontreal-Medium.woff2') format('woff2'),
        url('fonts/NeueMontreal-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueMontrealBold';
    src: url('fonts/NeueMontreal-Bold.woff2') format('woff2'),
        url('fonts/NeueMontreal-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



:root{
   --autoWidth: 106.25em;
    /* 1700px; */

    --family: "NeueMontrealRegular";

    --fw300: "NeueMontrealLight";
    --fw400: "NeueMontrealRegular";
    --fw500: "NeueMontrealMedium";
    --fw700: "NeueMontrealBold";

   --transition: all 0.5s ease;
   --bg_color: #0A0A0A;
    --text_grey: #878787;
   --black: #000;
   --white: #fff;
   --yellow: #FFC300;
   --gray: #878787;
   --dark_gray: #212121;
   --light_gray: #CACACA;
   --light_orange: #7C5F00;
 
   --baseFS: 16px;
   --fs10: 0.6875em;
   --fs12: 0.75em;
   --fs14: 0.875em;
   --fs16: 1em;
   --fs18: 1.125em;
   --fs20: 1.25em;
   --fs22: 1.375em;
   --fs24: 1.3125em;
   --fs26: 1.625em;
   --fs30: 1.875em; 
   --fs36: 2.25em;
   --fs40: 2.5em;
   --fs42: 2.625em;
   --fs60:3.75em;
   --fs70:4.375em;
   --fs100:6.25em;
   --fs210:11.25rem;
   --h1Fs:11.25rem;
   --sacPad: 10em;

}


*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-optical-sizing: auto;
   font-style: normal;
}
a{ text-decoration: none; }
ol, ul{ margin: 0; list-style: none;  margin: 0;}

p, h1, h2, h3, h4, h5, h6, strong, b{ margin: 0; font-weight: normal; }

em{ font-style: normal; }

input, textarea, select, button{ border:0px none; border-radius:0px; background:none; outline:none; -webkit-appearance:none; appearance:none; outline:none; font-family: var(--family); font-weight: 400; }

img{ display: block; height: auto; outline: none; }

input[type='submit']{  border-radius:0px; -webkit-appearance:none; appearance:none; outline:none; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows for Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

body.hidden{ overflow: hidden !important;}

textarea{ resize:none; overflow:auto; }

:focus{ outline:none;}

.clearfix:after{content:""; display:block; clear:both; height:0px; visibility:hidden;}

.clearfix{ display:block; zoom:1; }

i, em{ font-style: normal;}

.overflow_hidden{ overflow: hidden !important; }

html{ min-height: 100%;   }

.wrapper{ width: 100%; max-width: 100%;  }
/* overflow-x: hidden;  */

body { width: 100%; font-family: var(--family);  color: var(--white); font-size: var(--baseFS); overflow-x: hidden; max-width: 100%; background-color: var(--bg_color); overflow: hidden; }

.border_top{ border-top: 1px solid var(--dark_gray); }
.border_bottom{ border-bottom: 1px solid var(--dark_gray); }

.autoContent{ max-width: var(--autoWidth); padding: 0px 20px; margin: auto; width: 100%; }

.loader{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: fixed; left: 0px;
top: 0px; background-color: var(--bg_color); z-index: 222; padding: 30px; }

.loader_inner{ position: relative;}

.loader_inner img{ max-width: 1000px; width: 100%; display: block; }

.loader_posImg{ position: absolute; left: 0px; top: 0px; opacity: 0;}

.header{ padding: 0em 0px; width: 100%; position: absolute; left: 0px; top: 0px; }

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

.logoGif{ width: 16.875em; margin-left: -86px; }
.logoGif img{ display: block; max-width: none; width: 100%; height: auto;}

.brandName{ margin-left: auto;}

.brandName a{ max-width: 6.25em; display: block; color: var(--white); font-size: var(--fs30); font-family: var(--fw700); line-height: 0.8em; text-transform: uppercase; }

.banner{ min-height: 100vh; display: flex; align-items: center; padding-top: 150px;  }

.intro_section{ padding: var(--sacPad) 0px var(--sacPad) 0em; overflow: hidden; border-top: 1px solid #212121; }

.intro_section .big_heading{ padding-bottom: 0em; }

.big_heading h2{ font-size: var(--fs210); line-height: 0.8em; color: var(--white); font-family: var(--fw700); text-transform: uppercase; }

.bannerInner .big_heading h2{ font-size: var(--h1Fs); }

.big_heading.gray h2{ color: var(--gray) }
.big_heading.dark_gray h2{ color: var(--dark_gray) }

.intro_blueprint { padding: 3.125em 2.188em; }

.intro_blueprint{ padding-left: 0px; max-width: 94.6875em;}

.small_heading{ padding-bottom: 2em; }

.small_heading span{ font-size: var(--fs30); line-height: 1em; color: var(--yellow); font-family: var(--fw500); text-transform: uppercase; display: block; position: relative; }

.small_heading span::before{ content: ""; width: 20px; height: 20px; background: var(--yellow); position: absolute; left: -35px; top: 0; }

.small_heading.black span{ color: var(--bg_color); }
.small_heading.black span::before{ background: var(--bg_color); }

.intro_blueprint_text p{ font-size: var(--fs30); line-height: 1.2em; color: var(--gray); }
.intro_blueprint_text p span{ color: var(--white); }

.intro_philosophy_text p{ font-size: var(--fs100); line-height: 1em; color: var(--gray); }
.intro_philosophy_text p span{ color: var(--white); }

.intro_philosophy_list{ padding-top: 6.25em; }

.intro_philosophy_list ul li{ }
.intro_philosophy_list ul li:last-child{ margin-bottom: 0; border: 0; }

.intro_philosophy_list_inner{ display: flex; gap: 2.5em;  border-bottom: 1px solid var(--dark_gray);  padding-bottom: 2.5em; margin-bottom: 1.25em;  }
.intro_philosophy_list ul li:last-child .intro_philosophy_list_inner{ border-bottom: 0px none;  margin-bottom: 0; } 
.intro_philosophy_list_count{ font-size: var(--fs100); line-height: 1em; color: var(--dark_gray); }

.intro_philosophy_list_text span{ font-size: var(--fs100); line-height: 1em; color: var(--white); display: block; padding-bottom: 15px; }
.intro_philosophy_list_text p{ font-size: var(--fs40); line-height: 1em; color: var(--gray); display: block; }


.work_section{ padding: var(--sacPad) 0; background: var(--yellow); }

.work_text{ padding-bottom: var(--sacPad); }

.work_text p{ font-size: var(--fs100); line-height: 1em; color: var(--bg_color); }


.work_categories_row{ display: flex; gap:10em; position: relative; position: sticky;  background: var(--yellow); top: 0px; }

.work_categories_row::before{ content: ""; width: 1px; height: 100%; background: var(--bg_color); position: absolute; left: 50%; top: 0; }

.work_categories_col{ width: 50%; padding: 3.75em 0px; }

.work_categories_text{ width: 80%; }

.work_categories_text strong{ font-size: var(--fs100); line-height: 0.8em; color: var(--bg_color); display: block; text-transform: uppercase; font-family: var(--fw700); }

.work_categories_text ul li{ padding: 1em 0; font-size: var(--fs40); line-height: 1em; color: var(--bg_color); border-bottom: 1px solid var(--bg_color); }



.mission_section{ padding: var(--sacPad) 0; background: var(--bg_color); display: flex; align-items: center; flex-direction: column; }
.mission_section.gray{ background: var(--dark_gray); }
.mission_section.light_gray{ background: var(--text_grey); }


.mission_inner{ display: flex; align-items: flex-end; gap: 3.75em; }

.mission_left, .mission_right{ width: 50%; }

.mission_text p{ font-size: var(--fs30); line-height: 1.2em; color: var(--gray); }

.mission_section.gray .mission_text p{ color: var(--gray); }

.mission_section.light_gray .mission_text p{ color: var(--white); }
.mission_section.light_gray .mission_text h2{ color: var(--white); }


.footer{ padding: 2em 0; background: var(--white); }

.footer_inner{ display: flex; align-items: center; justify-content: space-between; }

.footer_inner span{ width: 33.33%; font-size: var(--fs24); line-height: 1em; display: block; color: var(--dark_gray); text-align: right; }

.footer_inner p{ font-size: var(--fs24); line-height: 1em; color: var(--dark_gray); min-width: 33.33%; text-align: center; }

.footer_inner a{ color: var(--dark_gray); transition: var(--transition); }
.footer_inner a:hover{color: var(--light_orange);}

.footerSocials{ min-width: 33.33%;}

.footerSocials ul{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.footerSocials ul li a{ font-size: var(--fs24); line-height: 1.2em; color: var(--dark_gray); transition: var(--transition); display: block; font-weight: 500; font-family: var(--fw500); text-decoration: underline; }
 
.footerSocials ul li{ padding-left: 10px; position: relative;} 
.footerSocials ul li:before{ background-color: #212121; content: "";  width: 5.572px; height: 5.572px;  position: absolute; left: 0px; top: 50%; transform: translateY(-50%);  }

.footerSocials ul li a:hover{ color: var(--light_orange); text-decoration: none; }

 
#mouse-circle {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -7.4px 0 0 -7.4px;
    border: 1px solid #fff;
    pointer-events: none; z-index: 99999;  
}

body, html{ cursor: none;}

.bubble {
    position: fixed;
    width: 20px;
    height: 20px;
    margin: -7.4px 0 0 -7.4px;
    border: 1px solid #fff;
     
    pointer-events: none; opacity: 0.5;
    transition: transform 0.2s ease-out, opacity 0.5s ease-out;
  }


/* .loader_inner img {
    animation: zoomInOut 3s infinite;
} */

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1); 
    }
    100% {
        transform: scale(1); 
    }
}

.wrapper{ transition: var(--transition);   }
.wrapper.active{ transform: translateY(30vh);  opacity: 0; height: 70vh; overflow: hidden;}
 

.progress-bar {
    width: 100%;
    background-color: var(--bg_color);;
    overflow: hidden;
    position: fixed; left: 0px;
    bottom: 0px;
    padding: 0px;
}

.progress {
    height: 3px;
    width: 0%;
    background-color: var(--yellow);
    text-align: center;
    color: white;
    line-height: 6px;
    border-radius: 0px;
}

/* Percentage number on top of progress bar */
.percentage { display: none; font-size: var(--fs40); font-weight: 300; line-height: 1.5em; padding-bottom: 10px; color: #fff; }



.hello_btn{ position: fixed; right:20px; bottom: 20px; z-index: 22; font-size: var(--fs20); line-height: 1.2em; color: var(--white); text-transform: uppercase; cursor: pointer; min-height: 65px;  width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; background: var(--yellow); transition: var(--transition);  }

/* .hello_btn::before{ content: ""; width: 65px; height: 65px; background: var(--yellow); position: absolute; left: 0; top: 0; } */
.hello_btn svg rect, .hello_btn svg{ transition: var(--transition); }
.hello_btn.whiteBg{ background: var(--bg_color); }
.hello_btn.whiteBg svg rect{ fill: var(--yellow) !important;}

.hello_btn i{transform: rotate(90deg); color: var(--white); font-size: 20px;  font-weight: 400; position: absolute; left: 0%; top: -80%; }


.popup{ width: 100%; max-width: 33.75em; height: auto; position: fixed; right:-12%; bottom: -28%; background: rgba(0, 0, 0, 0.8); z-index: 333; overflow: hidden;  background: var(--yellow); transition: var(--transition); opacity: 0; pointer-events: none; transform: scale(0.1); }


 

.popup.whiteBg{ background-color: var(--white);}

.popup.open{ display: block;  width: 100%; max-width: 33.75em; height: auto; opacity: 1; pointer-events: initial; transform: scale(1); right: 20px; bottom: 20px; }

.popup_overlay{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none; }

.popup_close{ width: 40px; height: 40px; padding: 10px; cursor: pointer; z-index: 22; position: absolute; right: 10px; top: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer;}

.popup_close svg{ display: block; max-width: 25px;}

.popup_box{ padding: 1.25em; overflow-x: hidden; max-height: calc(100vh - 60px); overflow-y: auto;  }

.popup_heading{ max-width: 500px; padding-bottom: 1em; }

.popup_heading h2{ font-size: var(--fs100); line-height: 1em; color: var(--bg_color); text-transform: uppercase; font-family: var(--fw700); }

.popup_thanks { width: 100%; text-align: center; padding: 100px 0px 50px 0px; display: none; }

.popup_thanks h2{ font-size: var(--fs100); line-height: 1em; color: var(--bg_color); text-transform: uppercase; font-family: var(--fw700); }
.popup_thanks p{ font-size: var(--fs36); line-height: 1.2em; color: var(--bg_color); padding-top: 20px;}


.popup_form_row{ display: flex; gap: 1.5em; }

.popup_form_cell{ flex: 1; padding:0 0 1.25em; }

.form_field label{ color: var(--dark_gray); font-size: var(--fs14); font-weight: 500; line-height: 1.2em; padding-bottom: 0.571em; display: block;}

.form_field input, .form_field textarea{ color: var(--bg_color); font-size: var(--fs16); line-height: 1.2em; display: block; padding: .5em 0.75em; border:1px solid var(--light_orange); width: 100%; transition: var(--transition); height: 2.625em;}

.form_field input:focus, .form_field textarea:focus{ border-color: var(--bg_color);  }   

.form_field textarea{ height: 10.375em;}

input::placeholder {
    color: var(--light_orange); 
    opacity: 1;  
  }
  
  textarea::placeholder {
    color: var(--light_orange); 
    opacity: 1;  
  }

  .error_text{ font-size:14px; line-height:1.5em; display:block; color:#d32e2e;  }
  .error_stroke{ border-color:#d32e2e !important; }


  ::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background-color: #EFF0F6;  border-radius: 10px;  }
::-webkit-scrollbar-thumb { background-color: var(--light_orange);  border-radius: 10px;   }


.popup_form_btn{ display: flex; align-items: center; justify-content: space-between; gap: 1.5em; }

.popup_form_btn ul{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.popup_form_btn ul li a, .popup_form_btn ul li span{ font-size: var(--fs16); line-height: 1.2em; color: var(--dark_gray); transition: var(--transition); display: block; font-weight: 500; font-family: var(--fw500); text-decoration: underline; }

.popup_form_btn ul li:first-child{ width: 100%;}

.popup_form_btn ul li:not(:first-child){ padding-left: 10px; position: relative;} 
.popup_form_btn ul li:not(:first-child):before{ background-color: #212121; content: "";  width: 5.572px; height: 5.572px; aspect-ratio: 5.57/5.57; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);  }

.popup_form_btn ul li a:hover{ color: var(--light_orange); text-decoration: none; }

.button{ font-size: var(--fs16); line-height: 1.2em; color: var(--white); display: flex; align-items: center; gap: 0.375em; background: var(--bg_color); transition: var(--transition); padding: 0.75em 1em; cursor: pointer; }

.button:hover{ background: var(--dark_gray); }


::-webkit-input-placeholder {
    color:    var(--dark_gray);
}
:-moz-placeholder {
   color:    var(--dark_gray);
   opacity:  1;
}
::-moz-placeholder {
   color:    var(--dark_gray);
   opacity:  1;
}
:-ms-input-placeholder {
   color:    var(--dark_gray);
}
::-ms-input-placeholder {
   color:    var(--dark_gray);
}

::placeholder { 
   color:    var(--dark_gray);
}


.formSubmitted .popup_heading{ display: none;}
.formSubmitted .popup_thanks{ display: block;}
.formSubmitted .popup_form_box{ display: none;}
.formSubmitted .contactSubmitBtn{ display: none;}

.contactSubmitBtn.disabled{ opacity: 0.4; pointer-events: none;}