:root {
  --accent: #2563eb;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #1f2937; }
.site-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb;
}
.site-nav .brand { font-weight: 700; color: var(--accent); }
.nav-links a { margin-left: 1.25rem; text-decoration: none; color: #374151; }
.nav-links a.active { color: var(--accent); font-weight: 600; }
.hero { padding: 4rem 1.5rem; text-align: center; background: var(--accent); color: #fff; }
.hero h1 { font-size: 2rem; margin-bottom: .75rem; }
.hero p { max-width: 40rem; margin: 0 auto 1.5rem; opacity: .95; }
.cta {
  display: inline-block; padding: .75rem 1.75rem; border-radius: 999px;
  background: #fff; color: var(--accent); font-weight: 600; text-decoration: none;
}
section { padding: 3rem 1.5rem; max-width: 60rem; margin: 0 auto; }
h2 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--accent); }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.service-card { padding: 1.25rem; border: 1px solid #e5e7eb; border-radius: .75rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.gallery-grid img { width: 100%; border-radius: .5rem; object-fit: cover; }
.gallery-placeholder { color: #6b7280; font-style: italic; }
.blog-item { padding: 1rem 0; border-bottom: 1px solid #e5e7eb; }
.faq details { padding: .75rem 0; border-bottom: 1px solid #e5e7eb; }
.faq summary { font-weight: 600; cursor: pointer; }
.contact { text-align: center; background: #f9fafb; }