:root{
  --blue:#1f69b3;
  --blue-dark:#174f86;
  --green:#2ea44f;
  --text:#1b1f23;
  --muted:#5b6673;
  --bg:#ffffff;
  --card:#f6f9fc;
  --border:#e4ebf2;
  --shadow: 0 10px 25px rgba(16, 24, 40, 0.08);
  --radius: 18px;
  --max: 980px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font); }
a{ color:inherit; text-decoration:none; }
p{ line-height:1.6; color:var(--muted); }
small{ color:var(--muted); }

.container{ width:min(var(--max), 92vw); margin:0 auto; }

.topbar{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff 0%, #f3faff 100%);
  position:sticky; top:0; z-index:10;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* ← this is the key */
}

.brand h1{
  margin: 0;
  line-height: 1.15;
}

.brand span{
  margin-top:4px;   /* ← THIS is the number you tweak */
  font-size:14px;
  line-height:1.3;
  padding-left: 1px;
}

.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 64px;
  width: auto;
  display: block;
}
.navlinks{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.navlinks a{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--muted);
}
.navlinks a:hover{
  border-color:var(--border);
  background:#fff;
  color:var(--text);
}
.navlinks a.active{
  background:rgba(31,105,179,0.12);   /* blue tint */
  border-color:rgba(31,105,179,0.28); /* blue border */
  color:var(--text);
}

.hero {
  padding: 16px 0 24px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:20px;
  align-items:stretch;
}
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.hero .card {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-size:13px; color:var(--blue-dark);
  background:rgba(31,105,179,0.10);
  border:1px solid rgba(31,105,179,0.18);
  padding:8px 12px;
  border-radius:999px;
}
.h-title{
  font-size:34px;
  margin:14px 0 10px;
  letter-spacing:-0.02em;
}
@media (max-width: 520px){
  .h-title{ font-size:28px; }
}
.cta-row{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:16px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
}
.btn-primary{
  background:var(--blue);
  border-color:rgba(0,0,0,0.0);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(0.97); }
.btn:hover{ transform:translateY(-1px); }

.banner{
  margin-top:16px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(46,164,79,0.10);
  border:1px solid rgba(46,164,79,0.25);
  font-weight:600;
  color:var(--text);
}

.list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex; gap:10px;
  padding:10px 0;
  border-top:1px dashed rgba(27,31,35,0.12);
}
.list li:first-child{ border-top:none; padding-top:0; }
.tick{
  width:20px; height:20px; flex:0 0 20px;
  border-radius:6px;
  background:rgba(46,164,79,0.20);
  border:1px solid rgba(46,164,79,0.35);
  display:grid; place-items:center;
  margin-top:1px;
}

.contact-box{
  display:grid;
  gap:12px;
}
.contact-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
}
.contact-item .label{ color:var(--muted); font-size:13px; }
.contact-item .value{ font-weight:650; }

.section{
  padding:10px 0 46px;
}
.grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
@media (max-width: 860px){
  .grid-2{ grid-template-columns:1fr; }
}
.service{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}
.service h3{ margin:0 0 6px; }
.service p{ margin:0; }

.form{
  display:grid;
  gap:12px;
  margin-top:10px;
}
.field{
  display:grid;
  gap:6px;
}
.field label{
  font-weight:600;
  font-size:13px;
}
.field input, .field textarea, .field select{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  font:inherit;
}
.field textarea{ min-height:140px; resize:vertical; }

.note{
  font-size:13px;
  color:var(--muted);
}

.footer{
  border-top:1px solid var(--border);
  padding:18px 0 28px;
  color:var(--muted);
  font-size:13px;
}
.footer .row{
  display:flex; gap:12px; justify-content:space-between; align-items:center;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}

html {
  overflow-y: scroll;
}

@media (max-width: 700px){
  .nav{
    flex-direction: column;
    align-items: flex-start;
  }
  .navlinks{
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 380px){
  .h-title{ font-size: 24px; }
}