/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: #0b1220; background: #fff; line-height: 1.55; }
.container { width: min(1100px, 92vw); margin: 0 auto; }

/* Header */
.site-header { background:#fff; border-bottom:1px solid #e9eef6; }
.header-wrap { display:grid; grid-template-columns: minmax(220px, 4in) 1fr; gap:2rem; align-items:center; padding:1.2rem 0; }
.logo { width:4in; height:4in; object-fit:contain; display:block; }
.brand { margin:0; font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2.1rem); }
.tag { margin:.2rem 0 .8rem; color: #5f6b7a; }
.cta-row { display:flex; flex-wrap:wrap; gap:.6rem; }

/* Buttons */
.pill, .button { display:inline-flex; align-items:center; gap:.5rem; background:#0d6efd; color:#fff; text-decoration:none; padding:.65rem 1rem; border-radius:12px; font-weight:600; border:2px solid #0d6efd; }
.pill.outline, .button.outline { background:transparent; color:#0d6efd; }
.pill:hover, .button:hover { filter: brightness(0.95); }
.ico { width:1.05rem; height:1.05rem; display:inline-block; }

/* Hero */
.hero { position:relative; isolation:isolate; }
.hero-img { width:100%; height: min(64vh, 620px); object-fit: cover; object-position: 50% 30%; display:block; }
/* object-position 50% 30% keeps the top third in view so Olansy's face stays visible */
.hero-overlay { position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:1.2rem; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.35)); color:#fff; }
.hero-overlay h2 { font-size: clamp(1.6rem, 1.4rem + 1.6vw, 2.3rem); margin:0 0 .6rem; }
.hero-list { list-style:none; padding:0; margin:0 0 1rem; opacity:.95; }
.hero-list li { margin:.25rem 0; }
.hero-ctas { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.button { box-shadow: 0 6px 20px rgba(13,110,253,.18); }

/* Sections */
.section { padding: 2.2rem 0; }
.section-title { margin:0 0 1.1rem; font-size:1.4rem; color:#0e1a2b; }

/* Services */
.cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
.card { background:#fff; border:1px solid #e6ecf6; border-radius:14px; padding:1rem; box-shadow: 0 8px 24px rgba(0,0,0,.04); }
.card h4 { margin:.4rem 0 .4rem; color: #0d6efd; }
.card-ico { width:34px; height:34px; border-radius:8px; background: linear-gradient(135deg, #eaf2ff, #ffffff); border:1px solid #dbe6fb; }

/* About band */
.band { background: #f4f7fc; border-block: 1px solid #e9eef6; }
.about-wrap { display:grid; grid-template-columns: 1fr; }
.about-text p { margin:.35rem 0; }

/* Contact */
.contact-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap:1.4rem; }
.contact-info .big { font-size:1.05rem; margin:.4rem 0; }
.btn-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.contact-form { display:grid; gap:.8rem; border:1px solid #e6ecf6; border-radius:12px; padding:1rem; background:#fff; box-shadow: 0 8px 24px rgba(0,0,0,.03); }
.contact-form label { display:grid; gap:.35rem; font-weight:600; color:#1f2a44; }
.contact-form input, .contact-form textarea { padding:.7rem .8rem; border-radius:10px; border:1px solid #ccd7ee; outline:none; }
.tiny { font-size:.8rem; }
.muted { color: #5f6b7a; }
.small { font-size:.9rem; }

/* Footer */
.site-footer { background: #0f172a; color:#dbe6ff; padding:1.2rem 0 2rem; }
.footer-inner { text-align:center; }
.footer-top p { margin:.3rem 0 1rem; }
.social { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; }
.social a { display:inline-flex; align-items:center; gap:.5rem; color:#dbe6ff; text-decoration:none; font-weight:600; }
.social a:hover { color:#ffffff; text-decoration:underline; }
.sico { width:20px; height:20px; fill:#dbe6ff; }
.social a:hover .sico { fill:#fff; }

/* Responsive */
@media (max-width: 980px) {
  .header-wrap { grid-template-columns: 1fr; text-align:center; }
  .logo { margin: 0 auto; }
}
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
}