:root{
    --bg:#0b0f14;
    --panel:#0f1620;
    --muted:#a8b3c1;
    --text:#eef3f9;
    --brand:#c9a86a;
    --brand2:#6aa3c9;
    --border:rgba(255,255,255,.10);
    --shadow: 0 12px 40px rgba(0,0,0,.45);
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica;
    background: radial-gradient(1200px 700px at 20% -10%, rgba(201,168,106,.22), transparent 55%),
                radial-gradient(1200px 700px at 80% 0%, rgba(106,163,201,.18), transparent 55%),
                var(--bg);
    color:var(--text);
    line-height:1.5;
  }
  
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  
  .container{width:min(1150px, 92vw); margin:0 auto}
  
  .topbar{
    border-bottom:1px solid var(--border);
    background: rgba(11,15,20,.65);
    backdrop-filter: blur(10px);
  }
  .topbar .inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0;
    gap:12px;
  }
  .small{font-size:.92rem;color:var(--muted)}
  .pill{
    border:1px solid var(--border);
    padding:6px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.03);
  }
  
  .nav{
    position:sticky; top:0; z-index:50;
    background: rgba(11,15,20,.78);
    backdrop-filter: blur(12px);
    border-bottom:1px solid var(--border);
  }
  .nav .inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:800; letter-spacing:.2px;
  }
  .logo{
    width:34px; height:34px; border-radius:10px;
    background: linear-gradient(135deg, rgba(201,168,106,.9), rgba(106,163,201,.85));
    box-shadow: var(--shadow);
  }
  .menu{
    display:flex; align-items:center; gap:18px;
  }
  .menu a{color:var(--muted); font-weight:700}
  .menu a:hover{color:var(--text)}
  .menu a.active{color:var(--text)}
  .cta{
    display:flex; align-items:center; gap:10px;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:11px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.04);
    color:var(--text);
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn:hover{background: rgba(255,255,255,.07)}
  .btn.primary{
    border-color: rgba(201,168,106,.55);
    background: linear-gradient(135deg, rgba(201,168,106,.22), rgba(106,163,201,.14));
  }
  .btn.primary:hover{background: linear-gradient(135deg, rgba(201,168,106,.30), rgba(106,163,201,.20));}
  
  .hero{padding:64px 0 34px;}
  .heroGrid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:26px;
    align-items:stretch;
  }
  .heroCard{
    border:1px solid var(--border);
    border-radius:22px;
    overflow:hidden;
    background: rgba(255,255,255,.03);
    box-shadow: var(--shadow);
  }
  .heroMedia{
    height:100%;
    min-height:340px;
    background:
      linear-gradient(180deg, rgba(11,15,20,.0), rgba(11,15,20,.86)),
      url("hero.jpg");
    background-size:cover;
    background-position:center;
    position:relative;
  }
  .heroMedia .tag{
    position:absolute; left:16px; top:16px;
  }
  .heroContent{padding:26px;}
  .h1{
    font-size: clamp(2.0rem, 4.1vw, 3.2rem);
    line-height:1.05;
    margin:0 0 12px;
  }
  .sub{
    color:var(--muted);
    font-size:1.06rem;
    margin:0 0 18px;
  }
  .kpis{
    display:flex; flex-wrap:wrap; gap:10px;
    margin:16px 0 0;
  }
  .kpi{
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    border-radius:14px;
    padding:10px 12px;
    min-width: 160px;
  }
  .kpi b{display:block; font-size:1.05rem}
  .kpi span{color:var(--muted); font-size:.92rem}
  
  .section{padding:28px 0}
  .sectionTitle{
    display:flex; align-items:end; justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
  }
  .sectionTitle h2{margin:0; font-size:1.55rem}
  .sectionTitle p{margin:6px 0 0;color:var(--muted)}
  .grid3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
  }
  .grid2{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:14px;
  }
  .card{
    border:1px solid var(--border);
    border-radius:18px;
    background: rgba(255,255,255,.03);
    padding:16px;
  }
  .card h3{margin:0 0 8px}
  .card p{margin:0;color:var(--muted)}
  .icon{
    width:42px;height:42px;border-radius:14px;
    display:grid;place-items:center;
    background: rgba(201,168,106,.12);
    border:1px solid rgba(201,168,106,.25);
    margin-bottom:10px;
  }
  
  .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
  }
  .banner{
    border:1px solid rgba(201,168,106,.35);
    background: linear-gradient(135deg, rgba(201,168,106,.14), rgba(106,163,201,.08));
    border-radius:22px;
    padding:18px;
    display:flex; align-items:center; justify-content:space-between;
    gap:14px;
  }
  .banner p{margin:0;color:var(--muted)}
  .footer{
    margin-top:26px;
    padding:22px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
  }
  .footer .inner{
    display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
  }
  hr.sep{border:0;border-top:1px solid var(--border); margin:18px 0}
  
  .form{display:grid; gap:10px;}
  input, textarea, select{
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    color:var(--text);
    outline:none;
  }
  textarea{min-height:120px; resize:vertical}
  .notice{font-size:.95rem;color:var(--muted)}
  
  .gallery{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }
  .gItem{
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    background: rgba(255,255,255,.03);
  }
  .gItem img{width:100%; height:220px; object-fit:cover}
  .gItem .cap{padding:10px 12px; color:var(--muted); font-size:.95rem}
  
  .modal{
    position:fixed; inset:0; background: rgba(0,0,0,.72);
    display:none; align-items:center; justify-content:center;
    padding:18px; z-index:200;
  }
  .modal.open{display:flex}
  .modalContent{
    width:min(980px, 96vw);
    border-radius:18px; overflow:hidden;
    border:1px solid var(--border);
    background: rgba(15,22,32,.98);
    box-shadow: var(--shadow);
  }
  .modalTop{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; border-bottom:1px solid var(--border);
  }
  .modalTop span{color:var(--muted); font-weight:700}
  .modalTop button{
    border:1px solid var(--border);
    background: rgba(255,255,255,.04);
    color:var(--text);
    border-radius:12px;
    padding:8px 10px;
    cursor:pointer;
  }
  .modalBody img{width:100%; max-height:78vh; object-fit:contain; background:#000}
  
  @media (max-width: 900px){
    .heroGrid{grid-template-columns:1fr}
    .grid3{grid-template-columns:1fr}
    .grid2{grid-template-columns:1fr}
    .split{grid-template-columns:1fr}
    .menu{display:none}
    .gallery{grid-template-columns:1fr}
    .gItem img{height:240px}
  }
  

  /* Basic layout helpers */
.container { max-width: 1100px; margin: 0 auto; padding: 18px; }
.section { padding: 24px 0; }
.muted { opacity: .75; }

.site-header { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #eee; z-index: 50; }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { font-weight:800; text-decoration:none; color:#111; }
.nav a { text-decoration:none; color:#111; margin-left:12px; }
.nav a.active { font-weight:800; text-decoration:underline; }

.hero { position: relative; min-height: 360px; display:flex; align-items:flex-end; }
.hero-img { background-size: cover; background-position: center; }
.hero-solid { background: #111; color: #fff; }
.hero-inner { padding: 36px 18px; }
.hero-overlay {
  width: 100%;
  padding: 28px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15));
  color: #fff;
}
.contact-pill {
  margin-top: 10px;
  display:inline-block;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  padding: 10px 12px;
  border-radius: 999px;
}
.contact-pill a { color: inherit; }

.btn-row { margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }
.btn { display:inline-block; padding: 12px 14px; border-radius: 12px; text-decoration:none; font-weight:700; }
.btn.primary { background:#111; color:#fff; }
.btn.ghost { background: transparent; color:#fff; border: 1px solid rgba(255,255,255,.4); }

.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 820px){ .grid-2{ grid-template-columns:1fr; } }

.card-img { position: relative; border-radius: 16px; overflow: hidden; display:block; border:1px solid #eee; }
.card-img img { width:100%; height:auto; display:block; }
.img-badge{
  position:absolute; left:12px; bottom:12px;
  background: rgba(0,0,0,.72);
  color:#fff; padding: 8px 10px;
  border-radius: 999px; font-size: 13px;
}

.embed { margin-top: 14px; border-radius: 16px; overflow:hidden; border:1px solid #eee; }
.embed iframe { width: 100%; height: 820px; border: 0; background: #fff; }

.site-footer { border-top: 1px solid #eee; padding: 18px 0; background: #fafafa; }
.footer-row { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.small { font-size: 13px; opacity:.8; }


.heroImg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:16px;
}
.heroMedia{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border-radius:16px;
}
.heroMedia .tag{
  position:absolute;
  left:14px;
  bottom:14px;
}

.galleryGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
.galleryGrid img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:16px;
}

/* ============================= */
/* LUXURY WHITE + GOLD THEME     */
/* ============================= */

:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1f2937;        /* charcoal */
  --muted: #6b7280;

  --gold: #c9a24d;        /* champagne gold */
  --gold-dark: #b08a3e;
  --border: #e5e7eb;
}

/* Base */
html, body{
  background: var(--bg);
  color: var(--text);
}

/* Topbar + Nav */
.topbar,
.nav{
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

/* Cards / Panels */
.card,
.heroCard,
.banner,
.modalContent{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Headings */
h1, h2, h3{
  color: #111827;
  letter-spacing: -0.01em;
}

/* Small text */
.small,
.notice{
  color: var(--muted);
}

/* Links */
a{
  color: inherit;
  text-decoration: none;
}
a:hover{
  color: var(--gold-dark);
}

/* Buttons */
.btn{
  background: #ffffff;
  border: 1px solid var(--gold);
  color: #111827;
  transition: all .2s ease;
}
.btn:hover{
  background: var(--gold);
  color: #ffffff;
}

/* Primary button */
.btn.primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #ffffff;
}
.btn.primary:hover{
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

/* Pills / tags */
.pill{
  background: #fff7e6;
  border: 1px solid var(--gold);
  color: #7a5c1e;
}

/* Hero image polish */
.heroMedia img{
  filter: saturate(1.05) contrast(1.05);
}

/* Footer */
.footer{
  background: #ffffff;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.sep{
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}


.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}