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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#08111f;
color:white;
overflow-x:hidden;
line-height:1.7;
}

/* NAVBAR */
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 60px;
z-index:10000;
background:rgba(8,17,31,0.75);
backdrop-filter:blur(10px);
transition:.4s ease;
}

.navbar.scrolled{
padding:15px 60px;
background:rgba(8,17,31,0.92);
border-bottom:1px solid rgba(201,161,95,0.12);
}

.logo{
font-size:20px;
font-weight:600;
letter-spacing:4px;
color:#c9a15f;
}

/* MENU */
.menu{
display:flex;
align-items:center;
gap:25px;
}

/* DROPDOWN */
.dropdown{
position:relative;
}

.dropbtn{
color:white;
text-decoration:none;
transition:.3s;
}

.dropbtn:hover{
color:#c9a15f;
}

/* FIX: Z-INDEX + POSITION */
.dropdown-content{
display:none;
position:absolute;
top:100%;
left:0;
background:rgba(8,17,31,0.95);
backdrop-filter:blur(12px);
min-width:180px;
border:1px solid rgba(201,161,95,0.15);
z-index:10001;
}

.dropdown-content a{
display:block;
padding:12px 15px;
color:white;
text-decoration:none;
transition:.3s;
font-size:14px;
}

.dropdown-content a:hover{
background:rgba(201,161,95,0.1);
color:#c9a15f;
}

.dropdown:hover .dropdown-content{
display:block;
}

/* NAV LINKS */
.menu a{
color:white;
text-decoration:none;
transition:.3s;
}

.menu a:hover{
color:#c9a15f;
}

/* HERO */
.hero{
height:100vh;
background:url("images/luxury-building-night.jpg") center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.45));
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
padding:120px 80px;
max-width:800px;
}

.tag{
color:#c9a15f;
letter-spacing:3px;
font-size:12px;
}

.hero h1{
font-family:'Cormorant Garamond',serif;
font-size:92px;
line-height:.95;
margin:20px 0;
}

.hero h1 span{
color:#c9a15f;
}

/* BUTTON */
.btn{
display:inline-block;
padding:14px 32px;
background:#c9a15f;
color:#000;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(201,161,95,0.25);
}

/* ABOUT */
.about{
display:grid;
grid-template-columns:1fr 1fr;
min-height:750px;
align-items:center;
}

.about-left{
display:flex;
flex-direction:column;
justify-content:center;
padding:90px 70px;
background:linear-gradient(90deg,rgba(8,17,31,.96),rgba(8,17,31,.55));
}

.about-left h2{
font-family:'Cormorant Garamond', serif;
font-size:64px;
line-height:1.05;
letter-spacing:1px;
margin-bottom:20px;
}

.about-left p{
font-size:16px;
line-height:1.8;
max-width:520px;
opacity:0.85;
}

.about-right{
background:url("images/modern-building-day.jpg") center center;
background-size:cover;
background-repeat:no-repeat;

min-height:750px;

filter:contrast(1.05) brightness(0.95);
}

/* INNER PAGES */
.page{
min-height:100vh;
max-width:900px;
margin:0 auto;
padding:160px 40px 90px;
}

.page h1{
font-family:'Cormorant Garamond',serif;
font-size:64px;
line-height:1.05;
margin-bottom:30px;
color:#c9a15f;
}

.page p{
font-size:18px;
opacity:.86;
margin-bottom:20px;
}

.about-page .brand-name{
font-family:'Cormorant Garamond',serif;
font-size:42px;
line-height:1;
margin-bottom:8px;
}

.about-page .brand-values{
font-size:14px;
color:#c9a15f;
opacity:1;
margin-bottom:38px;
}

.about-page .brand-tagline{
font-family:'Cormorant Garamond',serif;
font-size:34px;
color:#c9a15f;
opacity:1;
margin-top:42px;
}

.back-home{
display:inline-block;
margin-top:25px;
color:#c9a15f;
text-decoration:none;
font-weight:600;
}

.back-home:hover{
color:white;
}

/* STATS */
.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
padding:80px 40px;
background:#0b1a2b;
text-align:center;
}

.stats h3{
font-size:48px;
color:#c9a15f;
}

/* PROJECTS */
.projects{
padding:120px 80px;
}

.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}

.card{
display:block;
color:white;
text-decoration:none;
overflow:hidden;
border-radius:14px;
transition:.4s;
scroll-margin-top:120px;
min-height:180px;
padding:32px;
border:1px solid rgba(201,161,95,0.18);
background:rgba(255,255,255,0.03);
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

.card img{
width:100%;
height:380px;
object-fit:cover;
transition:.5s;
}

.card:hover img{
transform:scale(1.05);
}

.card h3{
padding:0;
font-family:'Cormorant Garamond',serif;
font-size:34px;
line-height:1.1;
}

.card-with-image{
padding:0;
}

.card-with-image img{
display:block;
height:auto;
aspect-ratio:3/4;
object-fit:cover;
}

.card-image{
display:block;
aspect-ratio:3/4;
overflow:hidden;
}

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

.card-image-novalife img{
object-position:center center;
}

.card-with-image h3{
margin:0;
padding:24px 28px 28px;
}

.project-page .grid{
margin-top:30px;
}

.project-cover{
width:100%;
aspect-ratio:3/4;
margin:30px 0 40px;
overflow:hidden;
border-radius:8px;
border:1px solid rgba(201,161,95,0.2);
background:#050b14;
}

.project-cover img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.project-cover-novalife img{
object-position:center center;
}

.project-media{
margin-top:45px;
}

.project-media h2{
font-family:'Cormorant Garamond',serif;
font-size:38px;
margin:35px 0 18px;
}

.project-video{
overflow:hidden;
border-radius:8px;
border:1px solid rgba(201,161,95,0.2);
background:#050b14;
}

.project-video video{
display:block;
width:100%;
max-height:700px;
background:#000;
}

.project-gallery{
columns:2 280px;
column-gap:18px;
}

.project-gallery figure{
break-inside:avoid;
margin:0 0 18px;
overflow:hidden;
border-radius:8px;
background:#0b1a2b;
}

.project-gallery img{
display:block;
width:100%;
height:auto;
margin:0;
transition:transform .4s;
}

.project-gallery figure:hover img{
transform:scale(1.025);
}

/* CONTACT */
.contact{
padding:140px 40px;
text-align:center;
background:#0b1a2b;
position:relative;
overflow:hidden;
}

.contact::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at center, rgba(201,161,95,0.08), transparent 70%);
}

.contact *{
position:relative;
z-index:2;
}

.contact h2{
font-family:'Cormorant Garamond',serif;
font-size:82px;
line-height:0.95;
margin:25px 0;
}

.contact p{
max-width:700px;
margin:auto;
opacity:.8;
margin-bottom:50px;
}

.contact-info{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin:50px auto;
max-width:1000px;
}

.phone-item{
background:rgba(255,255,255,0.03);
border:1px solid rgba(201,161,95,0.15);
padding:25px 20px;
text-align:center;
transition:.3s;
backdrop-filter:blur(6px);
}

.phone-item:hover{
transform:translateY(-6px);
border-color:#c9a15f;
background:rgba(201,161,95,0.05);
}

.phone-item span{
display:block;
font-size:11px;
letter-spacing:2px;
color:#c9a15f;
margin-bottom:10px;
text-transform:uppercase;
}

.phone-item a{
display:block;
color:white;
text-decoration:none;
font-size:18px;
font-weight:600;
transition:.3s;
}

.phone-item a:hover{
color:#c9a15f;
}

.contact-btn{
font-size:15px;
letter-spacing:1px;
padding:16px 40px;
margin-top:20px;
}

.contact-btn:hover{
transform:translateY(-4px);
}

/* FOOTER */
.footer{
padding:40px;
text-align:center;
background:#050b14;
}

/* SCROLL TOP */
#topBtn{
position:fixed;
bottom:25px;
right:25px;
width:50px;
height:50px;
border:none;
background:#c9a15f;
color:black;
display:none;
}

/* REVEAL */
.reveal{
opacity:0;
transform:translateY(40px);
transition:1s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* RESPONSIVE */
@media(max-width:992px){

.hero h1{font-size:62px;}

.about{grid-template-columns:1fr;}

.about-left{
padding:70px 30px;
}

.about-left h2{
font-size:42px;
}

.stats{grid-template-columns:1fr 1fr;}

.grid{grid-template-columns:1fr;}

.menu{gap:15px;}

.contact-info{
grid-template-columns:1fr;
max-width:500px;
}

.contact h2{
font-size:52px;
}

.page{
padding-left:20px;
padding-right:20px;
}

.project-media h2{
font-size:32px;
}

}

@media(max-width:600px){

.navbar,
.navbar.scrolled{
padding:14px 18px;
flex-direction:column;
align-items:flex-start;
gap:8px;
}

.logo{
font-size:16px;
letter-spacing:2px;
}

.menu{
width:100%;
justify-content:space-between;
gap:8px;
font-size:12px;
}

}