/*=========================================
THE EXPERIENCE
PART 1
=========================================*/

.experience-section{

    position:relative;

    padding:100px 0;

    background:#050505;

    overflow:hidden;

}



.experience-section .container{

    width:min(92%,1320px);

    margin:auto;

}

/*=========================================
GRID
=========================================*/

.experience-grid{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:110px;

    align-items:center;

}

/*=========================================
IMAGE
=========================================*/

.experience-image{

    position:sticky;

    top:120px;

    overflow:hidden;

    border-radius:28px;

    height:720px;

}

.experience-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:1s ease;

}

/*=========================================
CONTENT
=========================================*/

.experience-content{

    max-width:640px;

}

.experience-content h2{

    margin:25px 0 35px;

    color:#fff;

    font-size:62px;

    line-height:.95;

    font-weight:800;

    letter-spacing:-2px;
    margin-top: 0px;

}
.experience-content h2 span{
    color: #ffc402;
}
.experience-intro{

    color:#9d9d9d;

    font-size:19px;

    line-height:2;

    margin-bottom:50px;

}

/*=========================================
TIMELINE
=========================================*/

.experience-list{

    position:relative;

    padding-left:55px;

}

.experience-list::before{

    content:"";

    position:absolute;

    left:18px;

    top:0;

    bottom:0;

    width:1px;

    background:rgba(255,255,255,.12);

}

/*=========================================
ITEM
=========================================*/

.experience-item{

    position:relative;

    display:flex;

    gap:30px;

    padding-bottom:55px;

}

.experience-item:last-child{

    padding-bottom:0;

}

/*=========================================
NUMBER
=========================================*/

.step-number{

    position:absolute;

    left:-55px;

    top:2px;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#0f0f0f;

    border:1px solid rgba(255,196,2,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffc402;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    z-index:5;

}

/*=========================================
TEXT
=========================================*/

.experience-item h3{

    color:#fff;

    font-size:28px;

    font-weight:700;

    margin-bottom:14px;

}

.experience-item p{

    color:#8f8f8f;

    font-size:17px;

    line-height:1.9;

}

/*=========================================
WHAT IS FLOATING?
=========================================*/

.floating-section{

    position:relative;

    padding:100px 0;

    background:#0a0a0a;

    overflow:hidden;

}

.floating-section .container{

    width:min(92%,1320px);

    margin:auto;

}

/*=========================================
GRID
=========================================*/

.floating-grid{

    display:grid;

    grid-template-columns:42% 58%;

    gap:100px;

    align-items:flex-start;

}

/*=========================================
LEFT
=========================================*/

.floating-left{

    position:sticky;

    top:120px;

}

.floating-left h2{

    margin-top:25px;

    color:#fff;

    font-size:clamp(60px,7vw,100px);

    line-height:.95;

    font-weight:800;

    letter-spacing:-2px;

}

/*=========================================
RIGHT
=========================================*/

.floating-right{

    max-width:720px;

}

.floating-intro{

    color:#fff !important;

    font-size:30px !important;

    line-height:1.55 !important;

    font-weight:600;

    margin-bottom:45px !important;

}

.floating-right p{

    color:#9a9a9a;

    font-size:18px;

    line-height:2;

    margin-bottom:28px;

}

/*=========================================
HIGHLIGHTS
=========================================*/

.floating-highlights{

    margin-top:140px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

}

.highlight{

    position:relative;

    padding-top:35px;

}

.highlight::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:70px;

    height:2px;

    background:#ffc402;

    transition:.45s;

}

.highlight h3{

    color:#fff;

    font-size:26px;

    line-height:1.3;

    font-weight:700;

    transition:.35s;

}

.highlight:hover::before{

    width:120px;

}

.highlight:hover h3{

    color:#ffc402;

    transform:translateX(10px);

}

/*=========================================
BACKGROUND GLOW
=========================================*/

.floating-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-250px;

    right:-250px;

    background:radial-gradient(circle,
    rgba(255,196,2,.06),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

    .floating-section{

        padding:120px 0;

    }

    .floating-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .floating-left{

        position:relative;

        top:auto;

    }

    .floating-left h2{

        font-size:56px;

    }

    .floating-highlights{

        grid-template-columns:repeat(2,1fr);

        gap:30px;

        margin-top:80px;

    }

}

@media(max-width:768px){

    .floating-section{

        padding:90px 0;

    }

    .floating-left h2{

        font-size:42px;

    }

    .floating-intro{

        font-size:22px !important;

    }

    .floating-right p{

        font-size:16px;

    }

    .floating-highlights{

        grid-template-columns:1fr;

        gap:25px;

        margin-top:60px;

    }

    .highlight{

        padding-top:20px;

    }

    .highlight h3{

        font-size:22px;

    }

}

/*=========================================
SPA PURPOSE
=========================================*/

.spa-purpose{

    position:relative;

    padding:100px 0;

    background:#050505;

    overflow:hidden;

}

.spa-purpose .container{

    width:min(92%,1280px);

    margin:auto;

}

/*=========================================
LABEL
=========================================*/

.purpose-label{

    display:block;

    color:#ffc402;

    font-size:13px;

    font-weight:700;

    letter-spacing:6px;

    text-transform:uppercase;
    text-align: center;

    margin-bottom:35px;

}

/*=========================================
HEADING
=========================================*/

.purpose-heading{

    margin-bottom:110px;

}

.purpose-heading h2{

    color:#fff;

    font-size:60px;

    line-height:70px;

    font-weight:800;
text-align: center;
    letter-spacing:-2px;

}

.purpose-heading h2 span{
    color: #ffc402;
}

/*=========================================
ROWS
=========================================*/

.purpose-row{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:60px;

    align-items:flex-start;

    padding:55px 0;

    border-top:1px solid rgba(255,255,255,.08);

    transition:.45s ease;

}

.purpose-row:last-of-type{

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*=========================================
NUMBER
=========================================*/

.purpose-number{

    color:#333;

    font-size:56px;

    font-weight:800;

    transition:.35s;

}

/*=========================================
TEXT
=========================================*/

.purpose-text h3{

    color:#fff;

    font-size:42px;

    line-height:1.1;

    margin-bottom:22px;

    transition:.35s;

}

.purpose-text p{

    max-width:720px;

    color:#9b9b9b;

    font-size:18px;

    line-height:2;

}

/*=========================================
HOVER
=========================================*/

.purpose-row:hover{

    padding-left:25px;

}

.purpose-row:hover .purpose-number{

    color:#ffc402;

}

.purpose-row:hover h3{

    color:#ffc402;

}

/*=========================================
QUOTE
=========================================*/

.purpose-quote{

    margin-top:130px;

    max-width:850px;

}

.purpose-quote p{

    color:#fff;

    font-size:clamp(34px,4vw,60px);

    line-height:1.35;

    font-weight:700;

    letter-spacing:-1px;

    position:relative;

    padding-left:35px;

}

.purpose-quote p::before{

    content:"";

    position:absolute;

    left:0;

    top:12px;

    width:5px;

    height:85%;

    background:#ffc402;

}


/*=========================================
FLOAT WAITLIST
=========================================*/

.waitlist-section{

    position:relative;

    padding:100px 0;

    background:#080808;

    overflow:hidden;

}

.waitlist-section .container{

    width:min(92%,1320px);

    margin:auto;

}

/*=========================================
Wrapper
=========================================*/

.waitlist-wrapper{

    max-width:820px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

/*=========================================
Heading
=========================================*/

.waitlist-wrapper h2{

    margin:25px 0 30px;

    color:#fff;

    font-size:75px;

    line-height:.95;

    font-weight:800;

    letter-spacing:-2px;

}
.waitlist-wrapper h2 span{
    color: #ffc402;
}

.waitlist-wrapper p{

    max-width:640px;

    margin:0 auto 60px;

    color:#9a9a9a;

    font-size:19px;

    line-height:2;

}

/*=========================================
Form
=========================================*/

.waitlist-form{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

.waitlist-form input{

    flex:1;

    height:72px;

    background:transparent;

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

    color:#fff;

    padding:0 28px;

    font-size:17px;

    outline:none;

    transition:.35s;

}

.waitlist-form input::placeholder{

    color:#777;

}

.waitlist-form input:focus{

    border-color:#ffc402;

}

.waitlist-form button{

    height:72px;

    padding:0 42px;

    border:none;

    background:#ffc402;

    color:#050505;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.35s;

}

.waitlist-form button:hover{

    background:#fff;

}

/*=========================================
Note
=========================================*/

.waitlist-note{

    display:block;

    color:#666;

    font-size:14px;

    letter-spacing:.5px;

}

.waitlist-form{
    flex-wrap:wrap;
}

.waitlist-form input.is-invalid{
    border-color:#ff5a5a;
}

.waitlist-form .subscribe-error,
.waitlist-form .form-error{
    display:block;
    flex:0 0 100%;
    width:100%;
    margin-top:4px;
    color:#ff5a5a;
    font-size:13px;
}

.waitlist-form .form-inline-message{
    display:none;
    flex:0 0 100%;
    width:100%;
    margin-top:8px;
    font-size:14px;
    letter-spacing:.3px;
}

.waitlist-form .form-inline-message.is-visible{
    display:block;
}

.waitlist-form .form-success{
    color:#7dcea0;
}

.waitlist-form .form-error-message{
    color:#ff5a5a;
}

.waitlist-form button:disabled,
.waitlist-form button.is-loading{
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
}

/*=========================================
Background Text
=========================================*/

.waitlist-section::before{

    content:"WAITLIST";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    font-size:clamp(140px,22vw,360px);

    font-weight:900;

    letter-spacing:12px;

    color:rgba(255,255,255,.02);

    user-select:none;

    pointer-events:none;

    white-space:nowrap;

}

/*=========================================
Glow
=========================================*/

.waitlist-section::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(circle,
    rgba(255,196,2,.08),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

}