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

html,body{
background:#0F0F0F;
overflow-x:hidden;
}

/* FONT */

@font-face{
font-family:"UncutPlan8";
src:url("fonts/UncutPlan8-Variable.ttf") format("truetype");
}

.zen-kaku-gothic-new-regular{
font-family:"Zen Kaku Gothic New",sans-serif;
font-weight:400;
font-style:normal;
}

/* =========================
PANELS
========================= */

.panel{
position:relative;
}

.panel img{
width:100%;
height:auto;
display:block;
}

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

.hero{
position:relative;
}

.hero-text{
position:fixed;
top:50%;
left:40%;
transform:translate(-50%,-50%);
text-align:left;
z-index:1000;
pointer-events:none;
}

.hero-text h1{
font-size:11vw;
font-family:"UncutPlan8",monospace;
line-height:1.5;
letter-spacing:2px;
transition:opacity .2s ease-out;
}

/* =========================
SECOND PANEL TEXT
========================= */

.second-panel{
position:relative;
}

.text-top-left{
position:absolute;
top:25%;
left:5%;
font-family:"UncutPlan8",monospace;
font-size:1vw;
color:#910A12;
opacity:0;
transition:opacity 1.2s ease;
}

.text-bottom-right{
position:absolute;
bottom:25%;
right:10%;
font-family:"UncutPlan8",monospace;
font-size:1vw;
color:#E9AF98;
opacity:0;
transition:opacity 1.2s ease;
}

/* =========================
CENTER LINKS
========================= */

.center-text,
.video-text,
.contact-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-family:"UncutPlan8",monospace;
font-size:12vw;
color:black;
z-index:20;
cursor:pointer;
display:inline-block;
text-decoration:none;
}

.center-text:hover,
.video-text:hover,
.contact-text:hover{
color:white;
}

/* =========================
VIDEO PANEL
========================= */

.video-panel{
width:100%;
}

.video-panel video{
width:100%;
height:auto;
display:block;
}

.video-description{
position:absolute;
bottom:6%;
right:5%;
max-width:28%;
color:#F5F2ED;
font-family:"UncutPlan8",monospace;
font-size:.7vw;
line-height:1.6;
opacity:.7;
}

/* =========================
HEADER
========================= */

.main-header{
width:100%;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}

.logo{
font-family:"UncutPlan8",monospace;
font-size:1.2vw;
color:#F5F2ED;
letter-spacing:2px;
}

/* desktop nav */

.nav-links{
display:flex;
}

.nav-links a{
margin-left:40px;
font-family:"UncutPlan8",monospace;
font-size:.9vw;
color:#F5F2ED;
text-decoration:none;
transition:opacity .3s ease;
}

.nav-links a:hover{
opacity:.6;
}

/* hamburger hidden desktop */

.menu-toggle{
display:none;
background:none;
border:none;
color:#F5F2ED;
font-size:1.6rem;
cursor:pointer;
}

/* =========================
PHOTO CAROUSEL
========================= */

.photo-carousel{
position:relative;
display:flex;
align-items:center;
padding:60px 0;
}

.carousel-track{
display:flex;
gap:40px;
overflow-x:auto;
}

.carousel-track::-webkit-scrollbar{
display:none;
}

.carousel-track img{
height:calc(100vh - 120px);
width:auto;
flex-shrink:0;
}

.arrow{
background:none;
border:none;
font-size:2rem;
color:#F5F2ED;
cursor:pointer;
padding:10px;
opacity:.4;
transition:opacity .3s ease;
}

.arrow:hover{
opacity:.9;
}

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

.video-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:60px;
padding:40px 60px 120px;
}

.video-item video{
width:100%;
display:block;
}

/* =========================
VIDEO CAROUSEL
========================= */

.video-carousel{
position:relative;
display:flex;
align-items:center;
padding:60px 0;
overflow:hidden;
}

.video-track{
display:flex;
gap:40px;
overflow-x:auto;
}

.video-track::-webkit-scrollbar{
display:none;
}

.video-track video{
width:100%;
height:90vh;
}

/* =========================
CONTACT
========================= */

.contact-section{
height:80vh;
display:flex;
flex-direction:column;
justify-content:center;
padding:0 60px;
}

.contact-title{
font-family:"UncutPlan8",monospace;
font-size:4vw;
color:#F5F2ED;
margin-bottom:20px;
}

.contact-question{
font-family:"UncutPlan8",monospace;
font-size:1.5vw;
color:#E9AF98;
margin-bottom:40px;
}

.contact-select-wrapper select{
background:transparent;
border:1px solid #F5F2ED;
color:#F5F2ED;
font-family:"UncutPlan8",monospace;
font-size:1.2vw;
padding:12px 20px;
cursor:pointer;
}

.contact-button{
margin-top:40px;
background:transparent;
border:1px solid #F5F2ED;
color:#F5F2ED;
font-family:"UncutPlan8",monospace;
font-size:1.2vw;
padding:12px 30px;
cursor:pointer;
opacity:0;
pointer-events:none;
transition:opacity .4s ease;
}

.contact-button.active{
opacity:1;
pointer-events:auto;
}

.contact-button:hover{
background:#F5F2ED;
color:#0F0F0F;
}

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

@media (max-width:768px){

.panel{
height:100vh;
overflow:hidden;
}

.panel img{
width:100%;
height:100%;
object-fit:cover;
}

.video-panel{
height:100vh;
}

.video-panel video{
width:100%;
height:100%;
object-fit:cover;
}

/* hamburger visible */

.menu-toggle{
display:block;
}

/* mobile nav */

.nav-links{
display:none;
position:absolute;
top:70px;
right:16px;
flex-direction:column;
background:rgba(15,15,15,0.96);
padding:14px;
border-radius:6px;
box-shadow:0 8px 24px rgba(0,0,0,.6);
}

nav-open .nav-links{
display:flex;
}

.nav-links a{
margin:0;
font-size:14px;
padding:6px 0;
}

/* hide extra texts */

.text-top-left,
.text-bottom-right,
.top-right-text,
.video-description{
display:none;
}

/* big center links */

.center-text,
.video-text,
.contact-text{
font-size:11vw;
color:white;
}

/* mobile typography */

.logo{
font-size:14px;
}

.video-grid{
grid-template-columns:1fr;
padding:20px;
gap:40px;
}

}