/* =========================
LANDING PAGE
========================= */

.hero{

position:relative;

min-height:100vh;

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

overflow:hidden;

padding:
20px 0 40px;
isolation:isolate;

}

/* =========================
BOTTOM FADE
========================= */

.hero::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:160px;


z-index:4;

pointer-events:none;

}

/* =========================
BACKGROUND VIDEO
========================= */

.hero-video{

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:cover;



transform:scale(1.02);

z-index:0;

}

/* =========================
FILM SEQUENCE
========================= */

.film-sequence{

display:none;

}

/* =========================
OVERLAY
========================= */

.hero-overlay{

position:absolute;

inset:0;

z-index:2;

}

/* =========================
FILM GRAIN
========================= */

.film-grain{

position:absolute;

inset:0;

background-image:
url("../images/grain.png");

background-size:cover;

mix-blend-mode:soft-light;

opacity:.02;

pointer-events:none;

z-index:3;

}

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

.hero-content{

position:relative;

z-index:10;

width:100%;
max-width:1320px;

padding-inline:40px;

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

text-align:center;

margin-top:-10px;

}

/* =========================
LOGO
========================= */

.logo-wrap{

margin-bottom:52px;

}

.logo-image{

width:100%;
max-width:190px;

margin:auto;

display:block;

}

/* =========================
HEADLINE CONTAINER
========================= */

.headline-container{

position:relative;

width:100%;
max-width:1200px;

height:120px;

margin-bottom:30px;

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

}

/* =========================
HEADLINE
========================= */
.headline{

position:absolute;

top:50%;
left:50%;

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

width:100%;

margin:0;

text-align:center;

font-size:
clamp(52px,5vw,88px);

line-height:1;

letter-spacing:-2px;

font-weight:400;

color:#fff;

opacity:0;
visibility:hidden;

pointer-events:none;

transition:
opacity 1.4s ease-in-out;

}


/* =========================
ACTIVE HEADLINE
========================= */

.headline.active{

opacity:1;

visibility:visible;

z-index:2;

}

/* =========================
SUBTEXT
========================= */

.hero-subtext{

max-width:920px;

margin:
0 auto 42px;

font-size:22px;

line-height:1.85;

font-weight:400;

color:#dcd7d2;

}

/* =========================
BUTTON
========================= */

.hero-btn{

width:280px;
height:58px;

border-radius:10px;

background:#B8D1CB;

border:none;

display:flex;
align-items:center;
justify-content:center;
gap:16px;

font-size:16px;

font-weight:600;

letter-spacing:3px;

color:#111111;

transition:
all .8s cubic-bezier(.16,1,.3,1);

}

.hero-btn:hover{

transform:
translateY(-1px);

background:#AEC8C1;

}

/* =========================
BUTTON ICON
========================= */

.hero-btn span{

font-size:20px;

transition:
transform .8s ease;

}

.hero-btn:hover span{

transform:
translateX(2px);

}

/* =========================
PROGRESS
========================= */

.progress{

margin-top:42px;

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

}

/* NUMBER */

.progress-number{

font-size:12px;

font-weight:500;

letter-spacing:3px;

margin-bottom:16px;

color:#c8c8c8;

}

/* LINE */

.progress-line{

width:120px;
height:1px;

background:#D8D2CC;

overflow:hidden;

position:relative;

}

/* FILL */

.progress-fill{

position:absolute;

left:0;
top:0;

width:36%;
height:100%;

background:#AFC8C2;

}

/* =========================
VIGNETTE
========================= */

.hero-vignette{

position:absolute;

inset:0;

background:
radial-gradient(
circle,
transparent 56%,
rgba(0,0,0,.05) 100%
);

pointer-events:none;

z-index:5;

}

/* =========================
PAGE TRANSITION
========================= */

.page-transition{

position:fixed;

inset:0;

background:#F5F2EE;

opacity:0;

pointer-events:none;

z-index:9999;

}

.page-transition.active{

opacity:1;

pointer-events:auto;

}

/* =========================
TRANSITION OVERLAY
========================= */

.transition-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
to bottom,
rgba(245,242,238,.96),
rgba(245,242,238,1)
);

}

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

.hero-fade{

opacity:0;

transform:
translateY(12px);

}

/* =========================
TABLET
========================= */

@media(max-width:992px){

.hero-content{

padding-inline:30px;

}

.logo-wrap{

margin-bottom:44px;

}

.logo-image{

max-width:170px;

}

.headline-container{

height:140px;

}

.headline{

font-size:
clamp(42px,7vw,68px);

letter-spacing:-1.5px;

}

.hero-subtext{

font-size:16px;

max-width:620px;

}

.hero-btn{

width:300px;
height:66px;

}

}

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

@media(max-width:768px){

.hero{

padding:
10px 0 36px;

}

.hero-content{

padding-inline:22px;

margin-top:0;

}

.logo-wrap{

margin-bottom:34px;

}

.logo-image{

max-width:145px;

}

.headline-container{

height:100px;

margin-bottom:18px;

}

.headline{

font-size:
clamp(32px,10vw,52px);

line-height:1.02;

letter-spacing:-1px;

}

.hero-subtext{

font-size:14px;

line-height:1.8;

margin-bottom:30px;

max-width:95%;

}

.hero-btn{

width:100%;
max-width:300px;

height:60px;

font-size:12px;

letter-spacing:2.5px;

border-radius:8px;

}

.progress{

margin-top:32px;

}

}
/* Desktop by default */
.hero-video-desktop {
    display: block;
}

.hero-video-mobile {
    display: none;
}


/* Mobile */
@media (max-width: 767px) {

    .hero-video-desktop {
        display: none;
    }

    .hero-video-mobile {
        display: block;
    }

}