html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
    scroll-behavior: smooth;  
}

.ScrollTo{
    scroll-snap-align: start;
    scroll-snap-stop: always;
      width: 100%;
      min-height: 100vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
}


/* =========================================
   DESKTOP HERO BACKGROUNDS
========================================= */



    #hero{
        position:relative;
        width:100%;
        height:100vh;
        height:auto;
        overflow:hidden;
        margin:0;
        padding:0;
        box-sizing: border-box;
    }

    #bg0,
    #bg1,
    #bg2{
        position:absolute;
        inset:0;
        margin:0;
        padding:0;
        box-sizing: border-box;
    }        


    #bg1,
    #bg2{
        opacity:0;
        will-change:opacity;
        transition:opacity 1s ease-in-out;
    }

    #bg0{ z-index:1; }
    #bg1{ z-index:2; }
    #bg2{ z-index:3; }

    #bg0 img,
    #bg1 img,
    #bg2 img{
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
    }

    #bg0::after,
    #bg1::after,
    #bg2::after{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
    }

    .hero-content{
        position:relative;
        z-index:4;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        align-items:flex-start;
        height:100vh;
        width:100%;
        box-sizing: border-box;
        padding:6vh 4vh 12vh 4vw!important;
        box-sizing: border-box;
        background-image: linear-gradient(to bottom, rgba(35, 36, 37, 0.45), rgba(35, 36, 37, 0.88));
    }        
    
.hero-content {
    animation: rise 0.9s ease-out both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}    

@media (prefers-reduced-motion: reduce) {
    .hero-content {
        animation: none;
    }
}
    
     .hero-content h1{
        max-width: 600px;
        color: var(--paper);
    font-weight: 400;
    font-size: clamp(44px, 5.4vw, 92px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 17ch;
    text-wrap: pretty;
    margin-bottom: 3vh;
     }
     
      .hero-content p{
        max-width: 600px;  
        font-weight:300;
        font-size: 1.2rem;
        line-height: 1.5;
        margin-bottom: 3vh;  
        color: var(--dk-muted);        
      }

.hero-content-lower {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.hero-content-lower-left {
    max-width: 600px;
}

.hero-content-lower-right {
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    gap: 2vw;
}

.hero-link {
    padding:1rem .57rem;
    font-size: .9375rem;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 300;
    background-color: var(--paper);
    border: none;
    text-decoration: none;
    display: inline-block;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.5s ease;
}

.hero-link:hover {
    color: var(--paper);
    background-color: var(--accent);
    border-color: none;
    transform: translateY(-5px);
}
    

            @media (max-width: 720px) {
                .hero-content-lower {
                    flex-direction: column;
                    align-items: center;
                    gap: 2rem;
                }
            
                .hero-content-lower-left {
                    width: 100%;
                    max-width: 600px;
                }
            
                .hero-content-lower-right {
                    width: 100%;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 1rem;
                }
            
                .hero-content-lower-right .hero-link {
                    text-align: center;
                }
            }



/* =========================================
   MOBILE HERO BACKGROUND
========================================= */

@media (max-width:767px){


    #bg0{
        position:absolute;
        inset:0;
        z-index:1;
    }

    #bg0 img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    #bg1,
    #bg2{
        display:none;
    }

    #bg0::after{
        content:"";
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.6);
    }

    .hero-content{
        position:relative;
        z-index:4;
        padding:4vw!important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;       
        background: linear-gradient(to bottom, rgba(35, 36, 37, 0.45), rgba(35, 36, 37, 0.88));
    }
}