
:root{ --gold:#d4af37; --black:#0b0b0b; --ash:#121212; --maxw:1200px }
*{box-sizing:border-box}
body{ margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; color:#f2f2f2; background:linear-gradient(120deg,#000,#111 60%) }
a{ color:var(--gold); text-decoration:none }
img{ max-width:100%; display:block }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px }

/* Header + Mobile menu */
.header{ position:sticky; top:0; z-index:50; background:rgba(0,0,0,.85); backdrop-filter:blur(6px); border-bottom:1px solid #222 }
.nav{ display:flex; align-items:center; gap:18px; padding:10px 0 }
.brand{ font-weight:900; letter-spacing:.5px; color:#fff }
.menu-btn{display:none; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #333; border-radius:10px; background:#111; color:#f5e7b2}
.links{display:flex; align-items:center; gap:18px}
.cta{ background:linear-gradient(90deg,var(--gold),#ffe08a); color:#000; font-weight:800; padding:10px 16px; border-radius:999px; box-shadow:0 6px 22px rgba(212,175,55,.35)}
.spacer{flex:1}
@media(max-width:900px){
  .menu-btn{display:inline-flex}
  .links{display:none; position:fixed; top:56px; left:0; right:0; background:#0b0b0b; border-top:1px solid #222; flex-direction:column; padding:14px 20px}
  .links.open{display:flex}
}

/* Hero */
.hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; padding:52px 0 36px; border-bottom:1px solid #222 }
.hero h1{ font-size: clamp(40px,6vw,76px); line-height:1.05; margin:10px 0 14px; background:linear-gradient(90deg,#fff,#f5e7b2 40%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero p{ font-size: clamp(18px,2vw,22px); color:#d6d6d6 }
.hero .badge{ display:inline-block; padding:6px 12px; border:1px solid #9a8f6b; border-radius:999px; color:#d9cfa3 }
.hero .panel{ background:#0f0f0f; border:1px solid #2a2a2a; border-radius:24px; padding:8px }
.hero .panel img{ border-radius:16px; border:1px solid #333 }

/* Sections */
.section{ padding:56px 0 }
.section h2{ font-size: clamp(32px,4vw,44px); margin:0 0 10px }
.lead{ color:#d4d4d4; font-size:20px }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:22px }
.card{ background:#121212; border:1px solid #262626; border-radius:20px; overflow:hidden }
.card img{ height:190px; width:100%; object-fit:cover }
.card .body{ padding:16px }
.card h3{ margin:0 0 8px; font-size:22px; color:#f6e6a6 }
.card p{ color:#cfcfcf; font-size:15px }
.btn{ display:inline-block; margin-top:8px; padding:10px 14px; border:1px solid var(--gold); border-radius:12px }

/* Service detail blocks */
.service-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px }
.service{ grid-column:span 12; display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:stretch; padding:18px; background:#0e0e0e; border:1px solid #222; border-radius:18px }
.service:nth-child(even){ grid-template-columns:1.2fr 1fr }
.service > img{ width:100%; height:100%; max-height:360px; object-fit:cover; border-radius:14px; border:1px solid #2a2a2a }
.service h3{ margin:0 0 8px; font-size:26px; color:#f6e6a6 }
.service p{ margin:0; color:#d5d5d5; white-space:pre-line }

/* Footer */
.footer{ border-top:1px solid #222; padding:28px 0 60px; color:#c7c7c7; background:#0a0a0a }
.footer a{ color:#e9d27a }

/* Forms */
form{ display:grid; gap:14px }
input, textarea{ background:#131313; border:1px solid #2a2a2a; color:#fff; padding:12px 14px; border-radius:12px; font-size:16px }
label{ font-weight:600; color:#eadc9a }
button{ background:linear-gradient(90deg,var(--gold),#ffe08a); border:none; color:#000; font-weight:800; padding:12px 18px; border-radius:12px }
.small{ font-size:14px; color:#bdbdbd }

/* Mobile tweaks */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; text-align:center }
  .hero .panel{ order:-1 }
  .service{ grid-template-columns:1fr }
}

/* Sticky CTA */
.sticky-cta{display:none; position:fixed; bottom:10px; left:10px; right:10px; z-index:60; background:rgba(17,17,17,.95); border:1px solid #2a2a2a; border-radius:16px; padding:10px; box-shadow:0 10px 24px rgba(0,0,0,.35)}
.sticky-cta a{display:inline-block; flex:1; text-align:center; padding:12px; border-radius:10px; font-weight:800}
.sticky-cta .call{background:#1a1a1a; border:1px solid #333; color:#ffd46a}
.sticky-cta .quote{background:linear-gradient(90deg,var(--gold),#ffe08a); color:#000}
@media(max-width:900px){ .sticky-cta{display:flex; gap:10px}}
