@font-face {
    font-family: 'Avenir Roman';
    src:
        url('../fonts/avenir_roman_12.woff2') format('woff2'),
        url('../fonts/avenir_roman_12.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body{
    font-family: 'Avenir Roman', Arial, Helvetica, sans-serif; display: block
    
}

/* Background */

.video-bg{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;

    animation:slowZoom 30s linear infinite alternate;
}

.overlay{

    position:fixed;
    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.20),
            rgba(0,0,0,.45)
        );

    z-index:-1;

}

/* Layout */

.hero{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 30px;
}

/* Launch */

.launch{
    margin-bottom:180px;
    font-size: 0.5rem;
}


.launch h2{

    font-size:4rem;
    line-height:1;
    color: white;

}

.launch h1{

    font-size:4rem;
    line-height:1;
    color: white;

}

.launch span{

    color:#d6a24d;

}

/* Brand */

.brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    color: white;
     font-weight: lighter;
}

.brand img{

    width:650px;
    max-width:90vw;

}

.services{

    font-size:1.4rem;
    opacity:.95;

}

.locations{

font-weight:normal;
    font-size:14pt;

}

.brand a{

    color:white;

    text-decoration:none;

    font-size:1.1rem;
    font-weight: lighter;

}

.brand a:hover{

    opacity:.7;

}

/* Animation */

@keyframes slowZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/* Mobile */

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

    .hero{

        min-height:100svh;
        height:100svh;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        text-align:center;

        padding:
            max(env(safe-area-inset-top), 30px)
            20px
            max(env(safe-area-inset-bottom), 30px);

        gap:clamp(40px,8vh,80px);
    }

    /* Launch */

    .launch{

        margin:0;
    }

    .launch h2{

        font-size:clamp(2.3rem,8vw,3.3rem);
        line-height:.95;
        letter-spacing:-1px;

    }

    .launch h1{

        font-size:clamp(2.8rem,10vw,4rem);
        line-height:1;
        margin-top:8px;

    }

    /* Brand */

    .brand{

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:12px;

        width:100%;
    }

    .brand img{
    width:90vw;
    max-width:420px;
    height:auto;
}

    .services{

        font-size:.95rem;
        line-height:1.5;
        max-width:320px;

    }

    .locations{

        margin-top:10px;
        font-size:1rem;

    }

    .brand a{

        font-size:.95rem;

    }

}