:root{
  --bg: #0b1020;
  --card: #0f172a;
  --ink: #e5e7eb;
  --muted: #9ca3af;
  --accent: #d6a15d; /* amber */
  --sage: #8ca38b;   /* sage */
  --border: rgba(255,255,255,.1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background: radial-gradient(1200px 600px at 20% 10%, #111827 0%, var(--bg) 50%, #060912 100%);
  color:var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--ink); text-decoration:none}
a:hover{opacity:.9}
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; background:rgba(0,0,0,.25); backdrop-filter: blur(6px); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand img{display:block}
.main-nav{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.main-nav a{padding:8px 10px; border-radius:10px}
.main-nav a.btn{background: var(--accent); color:#111; font-weight:800}
.content{width:min(1000px, 92%); margin: 24px auto;}
.hero{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:22px; padding:28px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
h1{font-family: "Playfair Display", serif; font-size: clamp(28px, 5vw, 42px); margin:0 0 10px 0}
h2{font-family: "Playfair Display", serif; margin: 26px 0 8px 0}
p{line-height:1.7; color:#e8eaed}
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:18px; padding:18px;
}
.tag{color:var(--muted); font-weight:600}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.btn-primary{background: var(--accent); color:#111; padding:12px 16px; border-radius:12px; font-weight:800}
.btn-ghost{border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-weight:700}
.list{padding-left:18px}
.list li{margin:6px 0}
.site-footer{
  margin-top:auto; border-top:1px solid var(--border); padding:18px 20px; color:var(--muted);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.small{font-size:14px; color:var(--muted)}
/* Center the nav while keeping brand on the left */
.site-header .nav-wrap{
  display:flex;
  align-items:center;
}

.brand{ 
  margin-right:auto;
}

.main-nav{
  display:flex;
  gap:1.25rem;
  margin-inline:auto;
  justify-content:center;
}

@media (max-width:700px){
  .main-nav{ flex-wrap:wrap; }
}
/* Ensure nav always stays centered on all pages */
.site-header .main-nav {
  justify-content: center !important;
  margin-inline: auto !important;
  text-align: center !important;
}
.site-header .nav-wrap{
  display:flex;
  align-items:center;
}

.site-header .brand{
  margin-right:auto;                 /* brand stays left */
}

.site-header .main-nav{
  display:flex;
  gap:1.25rem;
  justify-content:center !important; /* override any page-level right align */
  margin-inline:auto !important;     /* keep menu centered in header */
  text-align:center !important;      /* neutralize inherited text-align */
}

@media (max-width:700px){
  .site-header .main-nav{ flex-wrap:wrap; }
}
/* =========================================================
   VCHN — HEADER + NAV FINAL STYLES
   Keeps brand on the left, nav centered, responsive wrap
   ========================================================= */

.site-header {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.site-header .nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center; /* centers overall content horizontally */
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

/* Brand (logo / title) */
.site-header .brand {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: #222;
  margin-right: auto; /* keeps brand left while nav centers */
}

/* Navigation links */
.site-header .main-nav {
  display: flex;
  justify-content: center !important;  /* override any page-level alignment */
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-inline: auto !important;
  text-align: center !important;
}

.site-header .main-nav a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
  transition: color 0.2s ease;
}

.site-header .main-nav a:hover,
.site-header .main-nav a:focus {
  color: #2b6cb0;
}

/* Contact button style */
.site-header .main-nav .btn {
  background-color: #2b6cb0;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
}

.site-header .main-nav .btn:hover,
.site-header .main-nav .btn:focus {
  background-color: #234e8c;
  color: #fff;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .site-header .nav-wrap {
    flex-direction: column;
    align-items: center;
  }
  .site-header .brand {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}
/* === Force a consistent, centered header/nav on every page === */
header.site-header .nav-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* overall header content centered */
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

/* Brand stays on the left edge of the header row */
header.site-header .brand {
  margin-right: auto !important;
}

/* Menu is a flex row, centered */
header.site-header nav.main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  margin-left: auto !important;   /* together center the nav block */
  margin-right: auto !important;  /* even if the page sets text-align */
  text-align: center !important;
  flex-wrap: wrap !important;
}

/* Don’t let page text alignment leak into header */
header.site-header {
  text-align: initial !important;
}