:root{
  --brand:#5B4636; --bg:#faf8f4; --card:#ffffff; --muted:#6b7280; --text:#0f172a;
}
*{box-sizing:border-box}
body{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:var(--text); line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:28px;}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 0;background:#fff;border-bottom:1px solid #e6e6e6;border-radius:0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:44px;width:auto;border-radius:6px}
.brand h1{font-size:20px;margin:0}
nav a{margin-left:14px;color:var(--muted);text-decoration:none;font-size:15px}
.hero{display:grid;grid-template-columns:1fr 360px;gap:24px;padding:28px 0;align-items:start}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid #e6e6e6;background:#fff;color:var(--muted);font-size:12px}
h1.title{font-size:28px;margin:12px 0 8px}
.lead{color:var(--muted);max-width:42ch}
.card{background:var(--card);padding:16px;border-radius:12px;border:1px solid #e9e9e9;box-shadow:0 6px 18px rgba(15,23,42,0.03)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.section{padding:36px 0}
h2{font-size:20px;margin:0 0 8px}
.bio{display:flex;gap:14px;align-items:center}
.bio img{width:96px;height:96px;object-fit:cover;border-radius:12px}
.footer{padding:24px 0;border-top:1px solid #eee;color:var(--muted);font-size:14px;margin-top:32px}
@media(max-width:800px){.hero{grid-template-columns:1fr;}.brand h1{font-size:18px}nav{display:none}}
/* ---------- Mobile responsiveness ---------- */
@media (max-width: 900px) {
  header .nav { display: none; }
  header .brand { display: flex; justify-content: space-between; align-items: center; }
  .hero { display: block; padding: 20px; }
  .container { padding: 18px; }
  h1, h2 { font-size: 22px; }
  .grid-3 { grid-template-columns: 1fr; }
  .card { padding: 12px; }
  .bio img { width:72px; height:72px }
}

/* optional "Menu" button for small screens */
.menu-btn {
  display:none;
  background:#003366;
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
@media (max-width:900px){
  .menu-btn { display:inline-block; }
}
.mobile-nav { display:none; margin-top:8px; }
.mobile-nav.open { display:block; }
.mobile-nav a { display:block; padding:8px 0; color:#333; }
/* Smooth scrolling and sticky-header offset */
html { scroll-behavior: smooth; }

/* Adjust the 90px to your header height if needed */
#about, #services, #method, #regions, #contact {
  scroll-margin-top: 90px;
}