/* Polished & Pristine — central stylesheet (DARK THEME) */

/* --- Theme variables --- */
:root{
  --brand-blue: #1e3a8a;
  --brand-gold: #facc15;
  --brand-dark: #0f172a;
  --bg: #0b1220;       /* page background (dark) */
  --panel: #0f172a;    /* dark bands */
  --card-bg: #111827;  /* card background */
  --text: #e5e7eb;     /* base text on dark */
  --muted: #c7cbd3;    /* muted on dark */
  --radius: 12px;
  --max-width: 1100px;
}

/* --- Base / resets --- */
* { box-sizing: border-box; }
html,body {
  margin:0; padding:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; display:block; height:auto; }
a { color:inherit; text-decoration:none; }

/* --- Layout --- */
.wrap { max-width: var(--max-width); margin:0 auto; padding:24px; }

/* --- Header --- */
.site-header{
  background: var(--bg);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(250,204,21,.25);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; }
.brand-logo { width:56px; height:56px; border-radius:10px; object-fit:cover; background:#0c1220; }
.brand-name { font-weight:800; font-size:1.05rem; }
.brand-tag { color:var(--muted); font-size:0.85rem; }

/* --- Nav --- */
.main-nav { display:flex; gap:14px; align-items:center; }
.main-nav a { font-size:0.95rem; padding:6px 8px; border-radius:6px; }
.main-nav a:hover, .nav-link.nav-active { color: var(--brand-gold); }
.nav-cta { background:var(--brand-gold); color:#111827; padding:8px 12px; border-radius:8px; }
.mobile-toggle { display:none; background:none; border:0; font-size:1.3rem; padding:8px; color:var(--text); }

/* --- Hero --- */
.hero{
  display:grid; grid-template-columns:minmax(320px,560px) 1fr;
  gap:24px; align-items:stretch; margin-top:18px;
  border-radius: var(--radius);
  padding:28px;
  background: linear-gradient(180deg, var(--panel) 0%, #0b1529 100%);
  color:#fff;
}
.hero-copy h1 { font-size:2.25rem; margin:0 0 12px; line-height:1.06; letter-spacing:-0.02em; color:var(--brand-gold); }
.lede { color:var(--muted); margin-bottom:16px; font-size:1rem; }
.hero-ctas { display:flex; gap:12px; margin-bottom:16px; }
.btn {
  display:inline-block; border-radius:10px; padding:10px 16px; font-weight:800;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,0.35); }
.btn-primary { background:var(--brand-gold); color:#111827; }
.btn-outline { border:1px solid var(--brand-gold); color:#fff; background:transparent; }
.btn-outline:hover { background: rgba(250,204,21,0.1); }

/* features */
.features{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px 16px; color:#d5dae3; list-style:none; padding-left:0;
}

/* hero image */
.hero-image { height:100%; }
.hero-image img{
  width:100%; height:100%; object-fit:cover; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* --- Dark bands (shared) --- */
.section-dark{
  background: linear-gradient(180deg, var(--panel) 0%, #0b1529 100%);
  color:#fff;
  border-radius: var(--radius);
  padding:32px 28px;
}
.section-dark .muted { color:#e5e7eb; }
.section-dark h1, .section-dark h2, .section-dark h3 { color:#fff; }

/* --- Cards / grids --- */
.card { background:var(--card-bg); padding:16px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,0.35); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.small-gap { gap:12px; }

/* Stronger card titles */
.card h2 {
  font-size: 1.35rem; font-weight: 800; margin-bottom: 10px;
  color: #e8ecf7; line-height: 1.2;
  border-left: 4px solid var(--brand-gold); padding-left: 10px;
}

/* Service cards */
.service-card {
  background: #0f182b;
  border-top:4px solid var(--brand-gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
.service-card:hover { transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,0.45); }
.link-more { display:inline-block; margin-top:10px; color:var(--brand-gold); }

/* Gallery */
.gallery-preview { margin-top:20px; }
.gallery-item { border-radius:10px; overflow:hidden; background:#0b1220; box-shadow:0 6px 14px rgba(0,0,0,0.35); }
.gallery-item img { width:100%; height:170px; object-fit:cover; display:block; }

/* CTA band */
.cta-band { text-align:center; padding:46px 24px; }
.cta-band .cta-title { margin:0 0 8px; color:#fff; }
.cta-band .cta-actions { display:flex; gap:12px; justify-content:center; margin-top:12px; flex-wrap:wrap; }

/* --- Footer --- */
.site-footer {
  margin-top:28px; background:transparent;
  border-top:1px solid rgba(250,204,21,.25);
  padding:18px 0; color:var(--muted);
}
.footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.footer-nav a { margin-right:12px; }

/* --- Utilities --- */
.muted { color:var(--muted); font-size:0.95rem; }
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- Services page section separation (dark version) --- */
.main-content > section.card {
  margin-top: 40px; padding: 24px; border-radius: 12px;
  background:#0f182b; box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}
.main-content > section.card:nth-of-type(even) { background: #111b30; }
.main-content > section.card:nth-of-type(odd)  { background: #0f182b; }

/* --- Responsive --- */
@media (max-width:980px) {
  .hero { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .main-nav { display:none; }
  .mobile-toggle { display:block; }
  .brand-logo { width:48px; height:48px; }
  .hero { padding:22px; }
}

/* --- Mobile nav open --- */
.main-nav.nav-open {
  display:flex; position:fixed; left:0; top:72px; right:0;
  background: var(--bg); flex-direction:column; padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5); z-index:60;
  border-top:1px solid rgba(250,204,21,.25);
}