
:root {
  --bg: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --brand: #2563eb;
  --brand-ghost: #e5edff;
  --card: #f8fafc;
  --border: #e5e7eb;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height:1.6;}
img { max-width: 100%; display:block; }
a { color: var(--brand); text-decoration: none; }
.container { width:min(1100px, 92%); margin-inline:auto; }
.center { text-align:center; }

.site-header { background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .75rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; }
.logo { width:60px; height:60px; }
.brand-name { font-weight:800; font-size:1.25rem; display:block; }
.brand-tag { color:var(--muted); font-size:.85rem; display:block; margin-top:-.25rem; }
.nav a { margin-left:1rem; font-weight:600; }
.nav a:hover { text-decoration: underline; }

.hero { background: linear-gradient(180deg, var(--brand-ghost), transparent 60%); }
.hero-inner { padding: 3.5rem 0; }
.hero h1 { font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem); line-height:1.2; margin:0 0 .75rem; }
.cta-row { display:flex; gap:.75rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:.8rem 1rem; border-radius:.75rem; border:1px solid var(--border); font-weight:700; }
.btn-primary { background: var(--brand); color:white; border-color: var(--brand); }
.btn-outline { background: transparent; }
.btn-secondary { background: var(--card); }

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

.split { display:grid; grid-template-columns: 2fr 1fr; gap:2rem; padding: 2rem 0 3rem; }
.info-panel { background: var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1rem; }

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

.narrow { max-width: 800px; }

.checklist { list-style: none; padding-left: 0; }
.checklist li { padding-left: 1.75rem; position: relative; }
.checklist li::before { content:"✓"; position:absolute; left:.5rem; color: var(--brand); font-weight: 900; }

.contact-form { display:grid; gap:1rem; margin:1rem 0 2rem; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
label { display:grid; gap:.35rem; font-weight: 600; }
input, textarea { width:100%; padding:.8rem; border:1px solid var(--border); border-radius:.5rem; font: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--brand-ghost); border-color: var(--brand); }

.contact-card { background: var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1rem; }

.site-footer { border-top:1px solid var(--border); margin-top:2rem; padding:1.25rem 0; background:#fcfcfe; }
.footer-grid { display:grid; grid-template-columns: 2fr 2fr 1fr; gap:1rem; }
.tiny { font-size:.85rem; color:var(--muted); }

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
