/* ==========================================================
   TABLET & MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .mobile-toggle {

        display: block;

        z-index: 1001;

    }

    /* ==========================================================
   MOBILE NAVIGATION PANEL
========================================================== */

/* ==========================================================
   MOBILE EXPANDING HEADER
========================================================== */

@media (max-width:768px){

    .site-header{

        position:fixed;

        top:0;

        left:0;

        width:100%;

        z-index:1000;

        overflow:hidden;

        transition:
            background .45s ease,
            height .45s cubic-bezier(.22,1,.36,1);

    }

    .navbar{

        min-height:80px;

        align-items:flex-start;

        flex-wrap:wrap;

    }

    .nav-links{

    width:100%;

    max-height:0;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    justify-content:flex-start;

    padding:0 2rem;

    gap:0;

    transition:max-height .45s cubic-bezier(.22,1,.36,1);

}

}

  .nav-links.active{

    max-height:500px;

}

.nav-links li{

    width:auto;

    border:none;

}

.nav-links a{

    color:#fff;

    transition:color .35s ease;

}

.site-header.scrolled .nav-links a{

    color:#fff;

}
/* ==========================================================
   GALLERY INTRO
   ========================================================== */

@media (max-width: 768px) {

    .gallery-intro {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 2rem;

        max-width: 100%;

        margin: 0 auto 3rem;

        padding: 0 2rem;

    }

    .gallery-intro-left,
    .gallery-intro-right {

        width: 100%;

        max-width: 100%;

        justify-self: unset;

    }

    .gallery-title {

        font-size: clamp(2.5rem, 10vw, 3.5rem);

        line-height: 0.95;

    }

    .gallery-copy {

        max-width: 100%;

        font-size: 1rem;

        line-height: 1.8;

    }

}

/* ==========================================================
   HERO - MOBILE FOUNDATION
========================================================== */

@media (max-width:768px){

    .hero{

        align-items:center;

        justify-content:center;

        padding-top:env(safe-area-inset-top);

        padding-bottom:env(safe-area-inset-bottom);

    }

    .hero-content{

        width:100%;

        max-width:420px;

        margin:0 auto;

        padding:0 24px;

        text-align:center;

        transform:translateY(6vh);

    }
    .hero-title{

    line-height:1.02;

}

.hero-line-inner{

    padding-bottom:.18em;

}
.hero-image img{

    transform: scale(1.03);

}

}

@media (max-width:768px){

    .logo img{

        width:190px;

    }

    .site-header.scrolled .navbar{

        height:68px;

    }

    .site-header.scrolled .logo img{

        width:135px;

    }

}
.site-header .logo{

    opacity:1;

    transform:translateY(0) scale(1);

    transition:
        opacity .45s ease,
        transform .45s cubic-bezier(.22,1,.36,1);

    transform-origin:left center;

}

.logo-image{

    opacity:1;

    transition:
        opacity .45s ease,
        transform .45s ease;

}


.site-header.scrolled .logo-image{

    opacity:0;

    transform:translateY(-8px);

}

}