:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#0f1724;
  --muted:#6b7280;
  --accent:#0ea5a4; /* muted teal */
  --accent-2:#1f2937; /* deep slate */
  --radius:12px;
  --max-width:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', 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;
}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:linear-gradient(90deg,rgba(15,23,36,0.98),rgba(15,23,36,0.92));color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 6px 18px rgba(2,6,23,0.2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 1rem}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.logo{width:72px;height:72px;object-fit:contain;border-radius:8px;background:#fff;padding:6px}
.brand-text h1{font-family:'Vollkorn', serif;font-size:1.2rem;margin:0}
.brand-text .tag{font-size:.8rem;color:rgba(255,255,255,0.85)}
.main-nav{display:flex;align-items:center}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.25rem;padding:8px}
.nav-list{list-style:none;margin:0;display:flex;gap:1rem}
.nav-list a{color:#fff;text-decoration:none;padding:0.6rem 0.8rem;border-radius:8px}
.nav-list a:hover{background:rgba(255,255,255,0.06)}

.hero{position:relative;padding:2rem 0 3rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.6) saturate(0.9);z-index:-1}
.hero-content{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:center}
.hero-text .display{font-family:'Vollkorn', serif;font-size:2.4rem;margin:0;color:#fff}
.lead{color:rgba(255,255,255,0.9);margin-top:0.6rem;max-width:46ch}
.hero-cta{margin-top:1rem;display:flex;gap:.6rem}
.btn{background:var(--accent-2);color:#fff;padding:0.6rem 1rem;border-radius:10px;border:0;cursor:pointer}
.btn-primary{background:var(--accent);box-shadow:0 6px 20px rgba(14,165,164,0.12)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.18);color:#fff}
.btn-sm{background:var(--accent);color:#fff;border:0;padding:0.4rem 0.6rem;border-radius:8px}
.btn-link{background:transparent;border:0;color:var(--accent);cursor:pointer}
.mini{background:rgba(255,255,255,0.08);border:0;color:#fff;padding:0.4rem 0.6rem;border-radius:8px;margin-top:0.8rem}
.hero-card .card{background:rgba(255,255,255,0.98);padding:1rem;border-radius:var(--radius);box-shadow:0 8px 30px rgba(2,6,23,0.12)}
.pill-list{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0;margin:0;list-style:none}
.pill-list li{background:#f1f5f9;padding:0.35rem 0.6rem;border-radius:999px;font-size:.9rem}

.section{padding:2.4rem 0}
.section-head h2{font-family:'Vollkorn', serif;margin:0 0 0.2rem}
.muted{color:var(--muted)}

.filters{display:flex;gap:0.6rem;align-items:center;margin:1rem 0}
.filters input, .filters select{padding:0.6rem;border-radius:8px;border:1px solid #e6edf0}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.product{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.06);display:flex;flex-direction:column;gap:0.6rem}
.product img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.product h3{margin:.2rem 0}
.product .price{font-weight:600}
.product .actions{display:flex;gap:0.4rem;align-items:center}

.estimate{position:sticky;top:96px;padding:1rem;background:var(--card);border-radius:12px;box-shadow:0 8px 30px rgba(2,6,23,0.06);height:max-content}
.estimate .estimate-row{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;border-bottom:1px dashed #f1f5f9}
.qty-controls button{margin-left:6px;padding:4px 6px;border-radius:6px;border:1px solid #e6edf0;background:transparent}
.estimate-total{font-weight:700;margin-top:0.6rem}
.estimate-actions{display:flex;gap:0.5rem;margin-top:0.6rem}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.service-card{background:var(--card);padding:1rem;border-radius:12px}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:8px}

.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:1rem}
.contact-card{background:var(--card);padding:1rem;border-radius:12px}
.contact-card .map iframe{width:100%;height:200px;border:0;border-radius:8px}
.contact-form{background:var(--card);padding:1rem;border-radius:12px;display:flex;flex-direction:column;gap:0.6rem}
.contact-form label{display:flex;flex-direction:column;font-size:0.95rem}
.contact-form input, .contact-form textarea{padding:0.6rem;border-radius:8px;border:1px solid #e6edf0}
.form-actions{display:flex;gap:0.5rem}

.site-footer{background:#0b1220;color:rgba(255,255,255,0.8);padding:1rem 0;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.logo-sm{width:48px;height:48px;object-fit:contain}
.footer-links a{color:rgba(255,255,255,0.8);margin-left:0.6rem;text-decoration:none}

/* Responsive */
@media (max-width:1000px){
  .hero-content{grid-template-columns:1fr 300px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .header-inner{padding:0.6rem}
  .nav-toggle{display:block}
  .nav-list{position:absolute;right:1rem;top:72px;background:var(--accent-2);padding:0.6rem;border-radius:8px;flex-direction:column;display:none}
  .nav-list.open{display:flex}
  .hero-content{grid-template-columns:1fr;gap:1rem}
  .hero-card{order:2}
  .grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .estimate{position:relative;margin-top:1rem}
}

/* Accessibility focus states */
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(14,165,164,0.18);outline-offset:2px}