/* ========================================
   INVITED - PHILOSOPHY
======================================== */

:root{
    --navy:#021018;
    --white:#ffffff;
}

body{
    background:var(--navy);
    color:var(--white);
}



/* ========================================
   HERO
======================================== */

.hero{

    min-height:100vh;

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

    text-align:center;

    padding:140px 20px 80px;
}

.hero span{

    letter-spacing:8px;

    font-size:.85rem;

    opacity:.55;
}

.hero h1{

    margin-top:24px;

    max-width:900px;

    font-family:"Cormorant Garamond",serif;

    font-size:5.8rem;

    font-weight:500;

    line-height:1.1;
}

.hero p{

    margin-top:35px;

    font-size:1.25rem;

    opacity:.8;
}



/* ========================================
   VALUE
======================================== */

.value{

    max-width:1350px;

    margin:180px auto;

    padding:0 80px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;
}

.value.reverse{

    direction:rtl;
}

.value.reverse>*{

    direction:ltr;
}

.value-image img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:4px;

    transition:.5s;
}

.value-image img:hover{

    transform:scale(1.02);
}

.value-text span{

    display:inline-block;

    margin-bottom:20px;

    font-size:.85rem;

    letter-spacing:5px;

    opacity:.45;
}

.value-text h2{

    font-family:"Cormorant Garamond",serif;

    font-size:4rem;

    font-weight:500;

    margin-bottom:35px;
}

.value-text p{

    font-size:1.08rem;

    line-height:2.2;

    opacity:.82;
}



/* ========================================
   ENDING
======================================== */

.ending{

    text-align:center;

    padding:180px 20px 220px;
}

.ending h2{

    font-family:"Cormorant Garamond",serif;

    font-size:4rem;

    font-weight:500;

    margin-bottom:30px;
}

.ending p{

    font-size:1.15rem;

    opacity:.75;

    margin-bottom:55px;
}

.cta{

    display:inline-block;

    padding:18px 48px;

    border:1px solid rgba(255,255,255,.35);

    color:#fff;

    letter-spacing:2px;

    transition:.35s;
}

.cta:hover{

    background:#fff;

    color:#021018;
}



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

@media (max-width:900px){

    .hero h1{

        font-size:3.5rem;
    }

    .hero p{

        font-size:1rem;
    }

    .value{

        grid-template-columns:1fr;

        gap:50px;

        margin:120px auto;

        padding:0 30px;
    }

    .value.reverse{

        direction:ltr;
    }

    .value-text h2{

        font-size:2.8rem;
    }

    .ending{

        padding:120px 20px 150px;
    }

    .ending h2{

        font-size:2.8rem;
    }

}