:root{
 --bg:#000;
 --text:#fff;
 --gold:#d4af37;
}

body{
 background:#000;
 color:#fff;
 font-family:Inter,sans-serif;
 overflow-x:hidden;
}

.hero{
 min-height:100vh;
 position:relative;
}

.hero video{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
}

.hero-overlay{
 position:absolute;
 inset:0;

 background:
 linear-gradient(
 180deg,
 rgba(0,0,0,.15),
 rgba(0,0,0,.75)
 );
}

.hero-content{
 position:relative;
 z-index:2;

 display:flex;
 justify-content:space-between;
 align-items:center;

 width:min(1400px,90%);
 margin:auto;
 min-height:100vh;
}

.hero h1{
 font-size:clamp(72px,9vw,160px);
 line-height:.9;
}

.role{
 color:var(--gold);
 margin-top:20px;
}

section{
 padding:120px 10%;
}

.fullscreen-image{
 min-height:100vh;
 position:relative;
}

.fullscreen-image img{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
 filter:grayscale(100%);
}

.fullscreen-image .overlay{
 position:absolute;
 inset:0;
 background:rgba(0,0,0,.5);
}

.fullscreen-image .text{
 position:relative;
 z-index:2;
 text-align:center;
 padding-top:40vh;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#000;
    color:white;
    font-family:Inter,sans-serif;
    overflow-x:hidden;
}

section{
    position:relative;
}


/* HERO */

.hero{
    min-height:100vh;
}

.hero video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.75)
    );
}

.hero-content{
    position:relative;
    z-index:2;

    min-height:100vh;

    width:min(1400px,90%);
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:80px;
}

.hero h1{
    font-size:clamp(72px,10vw,160px);
    line-height:.9;
}

.role{
    margin-top:20px;
    color:#d4af37;
}

.hero p{
    margin-top:30px;
    color:#b8b8b8;
    max-width:500px;
}

.hero-right img{
    max-width:500px;
    width:100%;
    border-radius:30px;
}


/* STATEMENT */

.statement{
    padding:150px 10%;
}

.statement h2{
    font-size:clamp(40px,6vw,90px);
    max-width:1000px;
}

.statement p{
    margin-top:40px;
    color:#999;
}


/* PHILOSOPHY */

.philosophy{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.philosophy img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.philosophy .overlay{
    position:absolute;
    inset:0;

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

.philosophy .content{
    position:relative;
    z-index:2;

    padding:10%;
}

.philosophy h2{
    font-size:clamp(50px,8vw,120px);
}


/* FULLSCREEN */

.fullscreen-image{
    min-height:100vh;
}

.fullscreen-image img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.text{
    position:relative;
    z-index:2;

    min-height:100vh;

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

    text-align:center;
}


/* EXPERTISE */

.expertise{
    padding:150px 10%;
}

.expertise div{
    font-size:clamp(50px,10vw,150px);
    opacity:.15;
    margin:20px 0;
}


/* SLEEP */

.sleep{
    text-align:center;
    padding:150px 10%;
}

.sleep img{
    width:250px;
}

.tags{
    margin-top:40px;

    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}


/* QUOTE */

.quote{
    padding:150px 10%;
    text-align:center;
}

blockquote{
    font-size:clamp(40px,6vw,90px);
}


/* FOOTER */

footer{
    text-align:center;
    padding:120px 20px;
}


/* MOBILE */

@media(max-width:900px){

.hero-content{
    flex-direction:column;
    justify-content:center;
}

.hero-right img{
    max-width:320px;
}

}