/* ==========================================
   LUMINA
   Main Stylesheet
   ========================================== */

/* Reset */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;
background:#F5F3EF;
color:#111111;
overflow-x:hidden;

}

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

header{

position:fixed;

top:0;
left:0;

width:100%;

padding:28px 8%;

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

background:rgba(15,15,15,.18);

backdrop-filter:blur(14px);

z-index:999;

transition:.4s;

}

/* Brand */

.brand h1{

font-family:'Cormorant Garamond',serif;

font-size:40px;

font-weight:600;

letter-spacing:10px;

color:white;

margin-bottom:6px;

}

.brand p{

font-size:11px;

letter-spacing:4px;

color:#D8C3A5;

}

/* Navigation */

nav{

display:flex;

gap:38px;

}

nav a{

text-decoration:none;

font-size:14px;

font-weight:500;

letter-spacing:1px;

color:white;

transition:.3s;

}

nav a:hover{

color:#B08D57;

}

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

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

padding-left:10%;

background:url("images/hero.jpg");

background-size:cover;

background-position:center;

overflow:hidden;

}

.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

rgba(0,0,0,.55) 0%,

rgba(0,0,0,.35) 45%,

rgba(0,0,0,.55) 100%

);

}

/* Hero Text */

.hero-content{

position:relative;

z-index:2;

max-width:650px;

animation:fadeUp 1.4s ease;

}

.hero-content h1{

font-family:'Cormorant Garamond',serif;

font-size:88px;

line-height:.95;

font-weight:600;

color:white;

margin-bottom:30px;

}

.hero-content p{

font-size:22px;

line-height:1.8;

color:white;

margin-bottom:45px;

max-width:600px;

}

/* Button */

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:20px 48px;

    background:#B08D57;
    color:white;

    text-decoration:none;
    text-align:center;

    border-radius:60px;

    font-weight:600;
    letter-spacing:1px;

    transition:.35s;

    /* Responsive protection */
    max-width:100%;
    white-space:normal;
    line-height:1.3;
}

/* Scroll */

.hero::after{

content:"⌄";

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

font-size:38px;

color:white;

animation:bounce 2s infinite;

}

/* ===========================
 ABOUT
=========================== */

.about{

padding:140px 12%;

background:white;

}

.container{

max-width:950px;

margin:auto;

}

.about h5{

font-size:13px;

letter-spacing:5px;

color:#6A9FB5;

margin-bottom:25px;

font-weight:600;

}

.about h2{

font-family:'Cormorant Garamond',serif;

font-size:62px;

font-weight:600;

margin-bottom:35px;

line-height:1.1;

}

.about p{

font-size:21px;

line-height:2;

color:#555;

}

/* ===========================
 Animations
=========================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes bounce{

0%{

transform:translate(-50%,0);

}

50%{

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

}

100%{

transform:translate(-50%,0);

}

}

/* ===========================
   EXPLORE LUMINA / SITE PLAN
=========================== */
.site-plan{
    padding:120px 10%;
    background:#F5F3EF;
}
.site-plan-inner{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(280px,.75fr) minmax(420px,1.25fr);
    gap:70px;
    align-items:center;
}
.site-plan-heading{max-width:520px;}
.site-plan-heading h5,
.directory h5{
    font-size:12px;
    letter-spacing:4px;
    color:#B08D57;
    margin-bottom:20px;
    font-weight:600;
}
.site-plan-heading h2{
    font-family:'Cormorant Garamond',serif;
    font-size:54px;
    font-weight:500;
    line-height:1.08;
    margin-bottom:25px;
}
.site-plan-heading p{
    font-size:18px;
    line-height:1.8;
    color:#666;
    margin-bottom:28px;
}
.text-link{
    display:inline-block;
    color:#111;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    border-bottom:1px solid #B08D57;
    padding-bottom:5px;
}
.site-plan-image{
    display:block;
    width:min(100%,720px);
    max-height:680px;
    margin-left:auto;
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    background:#E8E5DF;
}
.site-plan-image img{
    width:100%;
    max-height:680px;
    object-fit:contain;
    display:block;
}

/* ===========================
   DIRECTORY / 5Rs
=========================== */
.directory{
    padding:120px 10%;
    background:#F8F8F6;
}
.directory-intro-wrap{max-width:760px;}
.directory h2{
    font-family:'Cormorant Garamond',serif;
    font-size:56px;
    margin-bottom:20px;
    font-weight:600;
}
.directory-intro{
    max-width:700px;
    font-size:19px;
    line-height:1.8;
    color:#666;
    margin-bottom:30px;
}
.tenant-category{margin-top:75px;}
.category-heading{
    margin-bottom:30px;
    padding-bottom:20px;
    border-bottom:1px solid #D8D3CA;
}
.category-heading span{
    display:block;
    font-size:11px;
    letter-spacing:3px;
    color:#B08D57;
    margin-bottom:8px;
}
.category-heading h3{
    font-family:'Cormorant Garamond',serif;
    font-size:42px;
    font-weight:500;
    margin-bottom:6px;
}
.category-heading p{
    font-size:14px;
    letter-spacing:1.5px;
    color:#777;
}
.directory-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
}
.tenant-card{
    background:white;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
    transition:transform .35s ease, box-shadow .35s ease;
}
.tenant-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 38px rgba(0,0,0,.09);
}
.tenant-image{height:190px;background:#DAD7D2;}
.coming-soon-image{
    background:linear-gradient(135deg,#E9E5DE,#DCD7CF);
    display:flex;
    align-items:center;
    justify-content:center;
}
.coming-soon-image span{
    font-size:10px;
    letter-spacing:3px;
    color:#81796F;
}
.tenant-card h3{
    padding:24px 24px 8px;
    font-size:21px;
    font-family:'Cormorant Garamond',serif;
}
.tenant-card p{padding:0 24px 24px;color:#777;font-size:14px;}

/* ===========================
   LEASING
=========================== */
.leasing{padding:140px 10%;background:white;}
.leasing-content{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.leasing h2{font-family:'Cormorant Garamond',serif;font-size:56px;margin:20px 0 30px;}
.leasing p{font-size:19px;line-height:1.9;color:#555;margin-bottom:35px;}
.leasing-list{list-style:none;padding:0;margin:0 0 45px;}
.leasing-list li{margin-bottom:18px;font-size:18px;color:#444;}
.leasing-image{height:620px;border-radius:22px;background:#ddd;overflow:hidden;}

/* ===========================
   NEWS
=========================== */
.news{padding:140px 10%;background:#F8F8F6;}
.news h2{font-family:'Cormorant Garamond',serif;font-size:54px;margin-bottom:60px;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;}
.news-card{background:white;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.08);}
.news-image{height:240px;background:#d8d8d8;}
.news-card h3{padding:30px 30px 15px;font-size:28px;font-family:'Cormorant Garamond',serif;}
.news-card p{padding:0 30px 35px;color:#666;line-height:1.8;}

/* ===========================
   CONTACT
=========================== */
.contact{padding:140px 10%;background:white;}
.contact h2{font-family:'Cormorant Garamond',serif;font-size:56px;margin-bottom:20px;}
.contact-intro{max-width:700px;font-size:20px;line-height:1.8;color:#666;margin-bottom:70px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.contact-info h3{font-family:'Cormorant Garamond',serif;font-size:36px;margin-bottom:25px;}
.contact-info p{margin-bottom:35px;line-height:1.8;color:#555;}
.contact-form input,.contact-form textarea{width:100%;padding:18px 20px;margin-bottom:20px;border:1px solid #ddd;border-radius:10px;font-size:16px;font-family:'Inter',sans-serif;}
.contact-form textarea{resize:vertical;}
.contact-form button{padding:18px 42px;background:#B08D57;color:white;border:none;border-radius:40px;font-size:16px;cursor:pointer;transition:.3s;}
.contact-form button:hover{background:#6A9FB5;}

/* ===========================
   FOOTER
=========================== */
footer{background:#111;color:white;padding:80px 10%;text-align:center;}
.footer-links{display:flex;justify-content:center;gap:35px;flex-wrap:wrap;margin-bottom:50px;}
.footer-links a{color:white;text-decoration:none;transition:.3s;}
.footer-links a:hover{color:#B08D57;}
.copyright{color:#777;font-size:14px;}

/* ===========================
   SHARED IMAGE SLOTS + LOGO
=========================== */
.tenant-image img,.news-image img,.leasing-image img{width:100%;height:100%;object-fit:cover;display:block;}
.brand-logo{width:205px;height:auto;display:block;}
.footer-brand-logo{width:245px;height:auto;display:block;margin:0 auto 50px;}

/* ===========================
   MOBILE NAVIGATION
=========================== */
.menu-toggle{display:none;}

/* ===========================
   RESPONSIVE — TABLET
=========================== */
@media(max-width:1024px){
    header{padding:22px 5%;}
    nav{gap:20px;}
    nav a{font-size:13px;}
    .hero-content h1{font-size:68px;}
    .about h2{font-size:48px;}

    .site-plan{padding:100px 8%;}
    .site-plan-inner{grid-template-columns:.8fr 1.2fr;gap:45px;}
    .site-plan-heading h2{font-size:46px;}
    .site-plan-image,.site-plan-image img{max-height:580px;}

    .directory{padding:100px 8%;}
    .directory-grid{grid-template-columns:repeat(2,1fr);gap:24px;}

    .leasing{padding:110px 8%;}
    .leasing-content{gap:50px;}
    .leasing h2{font-size:48px;line-height:1.15;}
    .leasing p{font-size:18px;line-height:1.8;}
    .leasing-list li{font-size:17px;}
    .leasing-image{height:520px;}

    .news{padding:110px 8%;}
    .news h2{font-size:48px;}
    .news-grid{grid-template-columns:repeat(2,1fr);gap:30px;}
    .news-image{height:230px;}

    .contact{padding:110px 8%;}
    .contact h2{font-size:48px;}
    .contact-intro{font-size:18px;margin-bottom:55px;}
    .contact-grid{gap:50px;}
    footer{padding:70px 8%;}
    .footer-links{gap:25px;}
}

/* ===========================
   RESPONSIVE — MOBILE
=========================== */
@media(max-width:768px){
    header{padding:18px 6%;flex-direction:row;justify-content:space-between;align-items:center;position:fixed;}
    .brand{position:relative;z-index:1002;}
    .menu-toggle{display:flex;width:42px;height:42px;padding:8px;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;position:relative;z-index:1002;}
    .menu-toggle span{display:block;width:25px;height:1.5px;background:#fff;transition:transform .3s ease,opacity .3s ease;}
    header nav{display:flex;position:absolute;top:100%;left:0;width:100%;padding:28px 6% 32px;background:rgba(28,28,28,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-direction:column;align-items:center;gap:0;opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;}
    header nav a{width:100%;padding:15px 0;text-align:center;font-size:14px;letter-spacing:1.5px;border-bottom:1px solid rgba(255,255,255,.1);}
    header nav a:last-child{border-bottom:none;}
    header.nav-open nav{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
    header.nav-open .menu-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
    header.nav-open .menu-toggle span:nth-child(2){opacity:0;}
    header.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

    .hero{min-height:100svh;height:auto;padding:130px 8% 80px;justify-content:center;text-align:center;background-position:center;}
    .hero-content{max-width:650px;margin:auto;}
    .hero-content h1{font-size:56px;line-height:1;}
    .hero-content p{font-size:18px;line-height:1.7;margin-bottom:35px;}
    .button{padding:18px 38px;font-size:15px;}

    .about{padding:90px 8%;}
    .about h2{font-size:42px;line-height:1.15;margin-bottom:28px;}
    .about p{font-size:18px;line-height:1.8;}

    .site-plan{padding:85px 8%;}
    .site-plan-inner{display:block;}
    .site-plan-heading{max-width:620px;margin-bottom:36px;}
    .site-plan-heading h2{font-size:42px;}
    .site-plan-heading p{font-size:17px;}
    .site-plan-image{width:min(100%,560px);max-height:none;margin:0 auto;border-radius:16px;}
    .site-plan-image img{max-height:none;height:auto;}

    .directory{padding:90px 8%;}
    .directory h2{font-size:42px;}
    .directory-intro{font-size:17px;margin-bottom:10px;}
    .tenant-category{margin-top:60px;}
    .category-heading h3{font-size:36px;}
    .directory-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
    .tenant-image{height:180px;}

    .leasing{padding:90px 8%;}
    .leasing-content{grid-template-columns:1fr;gap:50px;}
    .leasing h2{font-size:42px;line-height:1.15;margin:18px 0 25px;}
    .leasing p{font-size:17px;line-height:1.75;margin-bottom:30px;}
    .leasing-list{margin-bottom:35px;}
    .leasing-list li{font-size:16px;line-height:1.5;margin-bottom:15px;}
    .leasing-image{height:450px;}

    .news{padding:90px 8%;}
    .news h2{font-size:42px;line-height:1.15;margin-bottom:45px;}
    .news-grid{grid-template-columns:1fr;gap:30px;}
    .news-image{height:260px;}
    .news-card h3{font-size:26px;padding:25px 25px 12px;}
    .news-card p{padding:0 25px 30px;line-height:1.7;}

    .contact{padding:90px 8%;}
    .contact h2{font-size:42px;line-height:1.15;}
    .contact-intro{font-size:17px;line-height:1.7;margin-bottom:50px;}
    .contact-grid{grid-template-columns:1fr;gap:50px;}
    .contact-info h3{font-size:32px;}
    .contact-info p{margin-bottom:28px;}
    .contact-form input,.contact-form textarea{font-size:16px;padding:16px 18px;}
    .contact-form button{width:100%;padding:16px 24px;}

    footer{padding:65px 8%;}
    .footer-links{gap:20px 28px;}
}

/* ===========================
   RESPONSIVE — SMALL MOBILE
=========================== */
@media(max-width:480px){
    .brand-logo{width:150px;}
    .footer-brand-logo{width:190px;margin:0 auto 35px;}
    .hero{padding:120px 6% 70px;}
    .hero-content h1{font-size:46px;}
    .hero-content p{font-size:16px;line-height:1.6;}
    .button{width:100%;max-width:320px;padding:16px 24px;font-size:14px;line-height:1.3;margin-left:auto;margin-right:auto;}

    .about{padding:70px 6%;}
    .about h5{font-size:11px;letter-spacing:3px;}
    .about h2{font-size:36px;}
    .about p{font-size:16px;line-height:1.75;}

    .site-plan{padding:70px 6%;}
    .site-plan-heading h2{font-size:36px;}
    .site-plan-heading p{font-size:16px;}
    .site-plan-image{width:100%;border-radius:12px;}

    .directory{padding:70px 6%;}
    .directory h2{font-size:36px;}
    .directory-intro{font-size:16px;}
    .tenant-category{margin-top:55px;}
    .category-heading h3{font-size:32px;}
    .category-heading p{font-size:13px;letter-spacing:1px;}
    .directory-grid{grid-template-columns:1fr;gap:22px;}
    .tenant-image{height:220px;}

    .leasing{padding:70px 6%;}
    .leasing-content{gap:40px;}
    .leasing h2{font-size:36px;}
    .leasing p{font-size:16px;line-height:1.7;}
    .leasing-list li{font-size:15px;}
    .leasing-image{height:380px;border-radius:18px;}

    .news{padding:70px 6%;}
    .news h2{font-size:36px;margin-bottom:35px;}
    .news-grid{gap:25px;}
    .news-image{height:220px;}
    .news-card h3{font-size:24px;padding:22px 22px 10px;}
    .news-card p{font-size:15px;padding:0 22px 25px;}

    .contact{padding:70px 6%;}
    .contact h2{font-size:36px;}
    .contact-intro{font-size:16px;margin-bottom:40px;}
    .contact-grid{gap:40px;}
    .contact-info h3{font-size:30px;}
    .contact-info p{font-size:15px;line-height:1.7;margin-bottom:25px;}
    .contact-form input,.contact-form textarea{font-size:16px;padding:15px 16px;margin-bottom:16px;}
    .contact-form textarea{min-height:140px;}
    .contact-form button{width:100%;padding:16px 20px;font-size:15px;}

    footer{padding:55px 6%;}
    .footer-links{flex-direction:column;align-items:center;gap:16px;margin-bottom:35px;}
    .footer-links a{font-size:14px;}
    .copyright{font-size:12px;line-height:1.6;}
}