:root {
  --ink: #111827;
  --accent: #b08968;
  --bg: #ffffff;
  --muted: #6b7280;
  --line: #f3f4f6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
  margin: 0; 
  font-family: 'Inter', sans-serif; 
  color: var(--ink); 
  background: var(--bg);
  line-height: 1.7;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 25px; }

/* Sticky Navbar */
.topbar { 
  position: sticky; top: 0; z-index: 100; 
  background: rgba(255,255,255,0.9); 
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.row { display: flex; justify-content: space-between; align-items: center; }
.nav-link { 
  margin-left: 30px; text-decoration: none; color: var(--ink); 
  font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
}

/* Immersive Hero */
.hero { 
  height: 85vh; 
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url('../assets/img/hero-exterior.jpg') center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: white; text-align: center;
}
.kicker { display: block; text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent); font-size: 0.75rem; margin-bottom: 20px; font-weight: 700; }
.hero h1 { font-family: 'Playfair Display', serif; font-size: 4.5rem; margin: 0; font-weight: 400; }

/* Sections with Space */
.section-padded { padding: 120px 0; border-bottom: 1px solid var(--line); }
h2 { font-family: 'Playfair Display', serif; font-size: 3rem; margin-bottom: 25px; font-weight: 400; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.luxury-list { list-style: none; padding: 0; margin-top: 40px; }
.luxury-list li { padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--muted); }

.photo-box img { width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,0.08); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }
.gItem img { width: 100%; height: 400px; object-fit: cover; transition: opacity 0.3s; }
.gItem:hover img { opacity: 0.8; }

/* PDF Viewer */
.embed-container iframe { width: 100%; height: 700px; border: 1px solid var(--line); background: #fafafa; }

/* Forms & Buttons */
.btn { 
  display: inline-block; padding: 20px 40px; text-decoration: none; 
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; transition: 0.3s;
}
.btn.primary { background: var(--ink); color: white; }
.btn.primary:hover { background: var(--accent); }
.btn.full { width: 100%; border: none; cursor: pointer; }

input, textarea { width: 100%; padding: 18px; margin-bottom: 15px; border: 1px solid var(--line); background: #f9fafb; outline: none; }
input:focus, textarea:focus { border-color: var(--accent); }

.center-head { text-align: center; max-width: 700px; margin: 0 auto; }
.footer { padding: 60px 0; text-align: center; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.05em; }


.hero-sub{margin:10px 0 0; font-size:1rem; color: rgba(255,255,255,.92);}
.note{color: var(--muted); font-size:0.95rem; margin-top:18px;}

@media (max-width: 850px) {
  .hero h1 { font-size: 3rem; }
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .gallery { grid-template-columns: 1fr; }
}

/* Lightbox */
body.lb-open{overflow:hidden}
.lb{position:fixed; inset:0; display:none; z-index:9999;}
.lb.open{display:block}
.lb-backdrop{position:absolute; inset:0; background: rgba(2,6,23,.72); backdrop-filter: blur(4px);}
.lb-inner{position:relative; width:min(1100px, 92vw); height:min(82vh, 760px); margin: 6vh auto 0; display:flex; align-items:center; justify-content:center;}
.lb-img{max-width:100%; max-height:100%; border-radius: 18px; box-shadow: 0 22px 70px rgba(0,0,0,.45); background:#fff;}
.lb-nav{position:absolute; top:50%; transform: translateY(-50%); width:46px; height:46px; border-radius: 999px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color:#fff; font-size:34px; line-height:40px; cursor:pointer; display:grid; place-items:center; user-select:none;}
.lb-nav:hover{background: rgba(255,255,255,.20)}
.lb-prev{left:-8px}
.lb-next{right:-8px}
.lb-close{position:absolute; top:-10px; right:-10px; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.14); color:#fff; font-size:28px; cursor:pointer;}
.lb-close:hover{background: rgba(255,255,255,.20)}
.lb-count{position:absolute; bottom:-36px; left:50%; transform: translateX(-50%); color: rgba(255,255,255,.92); font-size:13px; letter-spacing:.08em; text-transform:uppercase;}
@media (max-width: 560px){
  .lb-inner{height: min(78vh, 640px)}
  .lb-prev{left:4px}
  .lb-next{right:4px}
  .lb-count{bottom:-30px}
}



/* ===== Premium Mobile Enhancements ===== */
@media (max-width: 820px){
  .wrap{padding:0 16px;}
  .topbar{padding:12px 0;}
  .row{gap:12px;}
  .brand{font-size:14px; letter-spacing:.06em;}
  /* Make nav a single scrollable row */
  .nav{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    max-width: 100%;
  }
  .nav::-webkit-scrollbar{height:0;}
  .nav-link{
    white-space:nowrap;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    font-size:13px;
  }

  /* Hero polish */
  .hero{padding:26px 0 18px;}
  .hero h1{font-size:34px; line-height:1.08;}
  .hero p{font-size:16px;}
  .hero .cta-row{gap:10px;}
  /* Keep one primary CTA visible if you have multiple buttons */
  .hero .cta-row .btn.secondary{display:none;}

  /* Gallery — single column, bigger taps */
  .gallery{
    grid-template-columns: 1fr !important;
    gap:12px !important;
  }
  .gItem{border-radius:18px;}
  .gItem img{border-radius:18px;}

  /* Cards spacing */
  .section{padding:26px 0;}
  .center-head h2{font-size:26px; line-height:1.15;}
  .center-head p{font-size:16px;}

  /* Photo box spacing (architecture stack) */
  .photo-box img+img{margin-top:14px;}
}

/* Sticky bottom contact bar (mobile) */
.mobile-bar{
  display:none;
}
@media (max-width: 820px){
  .mobile-bar{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:200;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top:1px solid var(--line);
    padding:10px 12px;
    gap:10px;
  }
  .mobile-bar a{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 10px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    font-weight:600;
    font-size:14px;
    color:var(--ink);
    text-decoration:none;
  }
  .mobile-bar a.primary{
    border-color: rgba(176,137,104,.55);
    background: rgba(176,137,104,.12);
  }
  /* Prevent bottom bar from covering content */
  }



  /* Turn nav links into a slide-down panel */
  .nav{
    position: fixed;
    left:12px; right:12px;
    top: 66px;
    display:block;
    padding:12px;
    border-radius: 20px;
    border:1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(2,6,23,.16);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events:none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .nav.open{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  .nav-link{
    display:block;
    width:100%;
    padding:12px 12px;
    border-radius: 14px;
    border:1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.9);
    margin:8px 0;
    font-weight:800;
  }
  .menu-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background: rgba(2,6,23,.35);
    backdrop-filter: blur(2px);
    z-index: 100;
  }
  .menu-backdrop.open{display:block;}
  /* Ensure topbar stays above */
  
}


.menu-btn .menu-label{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.menu-btn .menu-icon{
  display:inline-block;
}
.menu-btn .menu-icon span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
  margin:4px 0;
  opacity:.95;
}
@media (max-width: 820px){
  .menu-btn{display:inline-flex;}
}