/**   GLOBALS   */

:root {
    --clr-white: #fff;
    --clr-light-grey: #ededed;
    --clr-dark-grey: #b1b1b1;
    --clr-red: #ff3a0e;
    --clr-black: #000;

    --ff-body: acumin-pro,sans-serif;
    
}


html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
}

body{
    margin:0;
    height: 100%;
    min-height:100%;
    background-color: var(--clr-black);
    font-family:var(--ff-body);
    color:var(--clr-white);
    font-size: 1rem;
    line-height:1.6;
    letter-spacing: 0.4px;
    font-kerning: normal;
    font-variant-ligatures: normal;
    overflow: unset;
    scroll-behavior: smooth;

}

@supports (overflow: overlay) {
    body {
        overflow: overlay;
    }
}



.container{
    width: 100%;
    margin: 0 auto;
    padding: 0 5rem 0 5rem;
}

button,input,optgroup,select,textarea{
    color:inherit;
    font:inherit;
    margin:0
}

button{
    overflow:visible
}

button,select{
    text-transform:none
}

button[disabled],html input[disabled]{
    cursor:default
}

button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}

button,html input[type=button],input[type=reset]{
    -webkit-appearance:button;
    border:0;
    cursor:pointer;
    -webkit-appearance:button
}


img, picture{
    border:0;
    display: block;
    max-width:100%;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}





/**   SCROLL BAR   */

/**width */
::-webkit-scrollbar {
    width: .75rem;
    background-color: transparent;
    transition: 0.3s;
}
  
/**Track */
::-webkit-scrollbar-track {
    border-radius: .75rem;
}
   
/**Handle */
::-webkit-scrollbar-thumb {
    background: var(--clr-light-grey); 
    border-radius: .75rem;
    height: 1.5rem;
}
  
/**Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--clr-dark-grey); 
}


/**   ANIMATION   */

.progress {
    position: relative;
    height: 2px;
    display: block;
    z-index: 9999;
    width: 100%;
    background-color: white;
    border-radius: 2px;
    background-clip: padding-box;
    overflow: hidden;
}

.progress .indeterminate {
    background-color: black;
}

.progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: var(--clr-red);
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.progress .indeterminate:after {
    content: '';
    position: absolute;
    background-color: var(--clr-red);
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}


.fade {
    opacity: 0;
}

.fade.show {
    opacity: 1;
    -webkit-animation: fade 1s both;
    -moz-animation: fade 1s both;
    -o-animation: fade 1s both;
    animation: fade 1s both;
}

@-webkit-keyframes fade {
    0%{
        opacity: 0;
        -webkit-transform: translateY(75px);
    }

    100%{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@-moz-keyframes fade {
    0%{
        opacity: 0;
        -moz-transform: translateY(75px);
    }

    100%{
        opacity: 1;
        -moz-transform: translateY(0px);
    }
}

@-o-keyframes fade {
    0%{
        opacity: 0;
        -o-transform: translateY(75px);
    }

    100%{
        opacity: 1;
        -o-transform: translateY(0px);
    }
}

@keyframes fade {
    0%{
        opacity: 0;
        transform: translateY(75px);
    }

    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

.faded {
    opacity: 1;
    -webkit-animation: faded 1s both;
    -moz-animation: faded 1s both;
    -o-animation: faded 1s both;
    animation: faded 1s both;
}

@-webkit-keyframes faded {
    0%{
        opacity: 0;
        -webkit-transform: translateY(75px);
    }

    100%{
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@-moz-keyframes faded {
    0%{
        opacity: 0;
        -moz-transform: translateY(75px);
    }

    100%{
        opacity: 1;
        -moz-transform: translateY(0px);
    }
}

@-o-keyframes faded {
    0%{
        opacity: 0;
        -o-transform: translateY(75px);
    }

    100%{
        opacity: 1;
        -o-transform: translateY(0px);
    }
}

@keyframes faded {
    0%{
        opacity: 0;
        transform: translateY(75px);
    }

    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}




.zoom {
    transition: transform .3s;
    margin: 0 auto;
  }
  
.zoom:hover {
    -ms-transform: scale(0.98); /**IE 9 */
    -webkit-transform: scale(0.98); /**Safari 3-8 */
    transform: scale(0.98);
}





/**   UTILITY   */

.flex {
    display: flex;
    gap: var(--gap, 4rem);
}

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

.w-link:hover{
    border-bottom: var(--clr-dark-grey) solid 1px;
}


.g-link:hover{
    border-bottom: var(--clr-dark-grey) solid 1px;
}

/**   NAVIGATION   */

nav {
    position:sticky;
    top: 0;
    width:100%;
    z-index:4;
    background-color: var(transparent);

}

.navbar {
    height: 5rem;
    padding: 1.5rem 0 1.5rem 0;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    background-color: transparent;
    justify-content: space-between;
    transition: 0.3s;
}

.nav-size {    
    padding: 1.5em 5em 1.5em 5em;
}

.nav-logo{
    position: relative;
    text-decoration:none;
    color:var(--clr-white);
    transition: 700ms ease;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wght" 500;
    font-size: 1.25rem;
    letter-spacing: 0.6;
    line-height: 1.6;
    transform: 0.3s;
}

.nav-logo:hover {
    font-variation-settings: "slnt" -12, "wght" 700; 
}

.mobile-nav-toggle {
    display: none;
}

.nav-menu{
    position: relative;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li{
    position: relative;
    list-style: none;
}

.nav-link{
    text-decoration:none;
    -webkit-transition:opacity 0.6s;
    transition:opacity 0.6s;
    color:var(--clr-white);
    font-size:1.25rem;
    font-weight:500;
}
 
.nav-link:hover{
    border-bottom: var(--clr-white) solid 1px;
}

@media (max-width: 600px) {
    .nav-menu {
        position: fixed;
        inset: 0 0 0 0;
        flex-direction: column;
        text-align: center;
        background: var(--clr-black);
        border-top: 1px solid var(--clr-dark-grey);
        opacity: 1;
        transform: translateY(100%);
        -webkit-transition:transform .4s ease-out;
        transition:transform .4s ease-out;
    }

    .nav-menu[data-visible="true"]{
        opacity: 1;
        transform: translateY(0%);
        -webkit-transition:transform .4s ease-out;
        transition:transform .4s ease-out;    
    }

    .nav-link{

        text-decoration:none;
        -webkit-transition:opacity .2s;
        transition:opacity .2s;
        color:var(--clr-white);
        font-size:2.5rem;
        font-weight:500;    
    }
    
    .mobile-nav-toggle {
        display: block;
        width: 1.5em;
        aspect-ratio: 1;
        z-index: 9999;
        background: url(burger-icon.svg);
        background-repeat: no-repeat;
    }

    .mobile-nav-toggle[aria-expanded="true"] {
        background: url(x-icon.svg);
    }
}

/**   MAIN   */

.main {
    position:-webkit-sticky;
    position: sticky;
    background: var(--clr-black);
    z-index: 3;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 10rem;
    border-bottom: var(--clr-dark-grey) solid 1px;
    scroll-margin-top: 5rem;
  }

  .footer {
    position:-webkit-sticky;
    position: sticky;
    background: var(--clr-black);
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}



.red-arrow {
    color: var(--clr-red);
    font-weight: 300;
}

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

h1{
    margin:0;
    color:var(--clr-white);
    font-size:4rem;
    line-height:1.3;
    font-weight:700
}

h2{
    margin:0;
    color:var(--clr-white);
    font-size:3.5rem;
    line-height:1.3;
    font-weight:500;
}

h3{
    margin:0;
    color:var(--clr-white);
    font-size:3rem;
    line-height:1.3;
    font-weight:700
}

h4{
    margin:0;
    font-size:2rem;
    line-height:1.4;
    font-weight:400
}

h5 {
    margin-top:0;
    font-size:1.5rem;
    line-height:1.6;
    font-weight:500
}

h6{
    margin:0;
    font-size:1.125rem;
    line-height:1.6;
    font-weight:700
}

p{
    margin:0;
    font-size:1rem;
    font-weight: 200;
}

a{
    margin:0;
    color:var(--clr-white);
    font-size:1rem;
    font-weight:400;
    letter-spacing: 0.4px;
    text-decoration:none
}

.italic {
    font-style: italic;
    margin-top:0;
    margin-bottom:0;
    line-height:1.1;
    font-weight:500
}

.inline-block {
    max-width: 100%;
    display: inline-block;
}






/**   CONTACT   */

.footer-flex{
    min-height: 25vh;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    gap: var(--gap, 3rem);
    flex-direction: column;
}

.footer-wrapper {
    margin-top: 5vh;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vh;
}

.copyright-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vh;
    list-style: none;
    padding-top: 0.5rem;
    border-top: 1px solid var(--clr-dark-grey);


}

.contact-title{
    font-size:2.5rem;
    font-weight:400;
    line-height: 1;
}

.contact-link{
    -webkit-transition:opacity 250ms;
    transition: transform .3s;
    margin: 0 auto;
    border-bottom:1px solid var(--clr-white);

}

.contact-link:hover{
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}


/**   BACK TO TOP  */

.up:hover{
    -ms-transform: scale(0.96); /**IE 9 */
    -webkit-transform: scale(0.96); /**Safari 3-8 */
    transform: scale(0.96);
}

.pointer {
    font-size: 2.75rem;
    font-weight: 400;
    z-index: 3;
}


/**   SMALLPRINT   */


.smallprint {
    width: 100%;
}

.smallprint-wrapper {
    display: flex;
    justify-content: space-between;
    gap: var(--gap, 10rem);
}
  
.smallprint-link-wrapper{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    gap: var(--gap, 0.35rem);
    flex-direction: column;
    list-style: none;
}

.smallprint-header{
    color: var(--clr-white);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.smallprint-header-void{
    color: var(--clr-black);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.smallprint{
    color: var(--clr-dark-grey);
    font-size: 0.95rem;
}





/**   BREAK POINTS   */

@media screen and (min-width:1600px){
    .container{
        width: 95vw;
    }
}

@media screen and (max-width:1600px){
    .contact-title{
        font-size:2.25rem;
    }
}

@media screen and (max-width:1350px){
    .contact-title{
        font-size:2rem;
    }

    .smallprint-wrapper {
        gap: var(--gap, 6rem);
    }
}


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

    .container{
        padding: 0 4rem 0 4rem;
    }

}

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

    .navbar {
        padding: 2rem 0 1.5rem 0;
    }

    .nav-size {
        padding: 1.5em 3em 1.5em 3em;
    }

    .container{
        padding: 0 3rem 0 3rem;
    }

    .footer-wrapper {
        flex-direction: column;
        gap: 5vh;
    }

    .contact-title{
        font-size: 2rem;
        font-weight:400;
        line-height: 1.4;
    }     
}
    


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

    .contact-title{
        font-size: 1.75rem;
    }
    
    .pointer {
        font-size: 2.25rem;

    }

    .smallprint{
        -webkit-box-align:start;
        -webkit-align-items:flex-start;
        -ms-flex-align:start;
        align-items:flex-start;
    }

    .smallprint-wrapper{
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -webkit-flex-direction:row;
        -ms-flex-direction:row;
        flex-direction:row;
        justify-content: space-between;
        gap: 5rem;
    }
        
    .smallprint-link-wrapper{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-flex-direction:column;
        -ms-flex-direction:column;
        flex-direction:column;
        justify-content: unset;
        gap: var(--gap, 0.5rem);
        align-items: unset;
    }    
}


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

    .navbar {
        padding: 2rem 0 1.5rem 0;
    }

    .nav-size {
        padding: 1.5em 2em 1.5em 2em;
    }

    .container{
        padding: 0 2rem 0 2rem;
    }

    .main {
        padding-top: 6rem;
    }

    .contact-link,.contact-title{
        font-size:2rem;
    }

}

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

    .navbar {
        padding: 2rem 0 1.5rem 0;
    }

    .nav-size {
        padding: 1.5em 1.5em 1.5em 1.5em;
    }

    .container{
        padding: 0 2rem 0 2rem;
    }

    .nav-logo{
        text-decoration:none;
        color:var(--clr-white);
        font-size: 1.125rem;
        line-height: 1.6;
        z-index: 9999;
    }

    .mobile-nav-toggle {
        width: 1.25em;
        top: 1.75em;
        right: 1.5em;
    }

    .footer-flex{
        gap: 0;
    }

    .footer-wrapper, .smallprint-wrapper {
        gap: 3vh;
        flex-direction: column;
    }

    .contact-link,.contact-title{
        font-size: 1.75rem;
    }

}

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

    .contact-link,.contact-title{
        font-size:1.5rem;
    }
}

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

    .contact-link,.contact-title{
        font-size:1.35rem;
    }
}



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

    .contact-link,.contact-title{
        font-size:1.15rem;
    }
}