/* Adalto Africa Limited — site styles
   Brand: ink #0F1115 · red #F31E25 · blue #215E99 */

:root{
  --ink:#0F1115;
  --red:#F31E25;
  --blue:#215E99;
  --muted:#5A6068;
  --line:#E3E6EA;
  --bg-soft:#F6F7F9;
  --maxw:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:#fff;
}
h1,h2,h3,h4,.brandfont{
  font-family:Armata,"Segoe UI",-apple-system,Helvetica,Arial,sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--ink);
}
a{color:var(--blue)}
a:hover{color:var(--red)}
img{max-width:100%;height:auto}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;flex-wrap:wrap}
.logo img{width:132px;display:block}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap}
nav a{
  text-decoration:none;color:var(--ink);font-size:15px;letter-spacing:.02em;
  padding:6px 0;border-bottom:2px solid transparent;display:inline-block;
}
nav a:hover{color:var(--red);border-bottom-color:var(--red)}
nav a.active{border-bottom-color:var(--red)}

/* ---------- hero ---------- */
.hero{padding:76px 0 64px;border-bottom:1px solid var(--line)}
.hero .rule{width:56px;height:4px;background:var(--red);margin-bottom:26px}
.hero h1{font-size:44px;line-height:1.15;margin:0 0 20px;max-width:20ch}
.hero p.lead{font-size:20px;line-height:1.6;color:var(--muted);max-width:62ch;margin:0 0 28px}

.page-head{padding:56px 0 8px}
.page-head .rule{width:44px;height:4px;background:var(--red);margin-bottom:22px}
.page-head h1{font-size:36px;margin:0 0 14px}
.page-head p{font-size:19px;color:var(--muted);max-width:66ch;margin:0}

.btn{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  padding:13px 26px;font-size:16px;letter-spacing:.02em;border:2px solid var(--red);
}
.btn:hover{background:#fff;color:var(--red)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* ---------- sections ---------- */
section{padding:60px 0}
section.soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section > .wrap > h2{font-size:28px;margin:0 0 8px}
.section-note{color:var(--muted);margin:0 0 34px;max-width:64ch}

.grid{display:grid;gap:30px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}

.card{border-top:3px solid var(--red);padding-top:18px}
.card h3{font-size:19px;margin:0 0 10px}
.card p{margin:0;color:var(--muted);font-size:16px}
.card ul{margin:10px 0 0;padding-left:19px;color:var(--muted);font-size:16px}
.card li{margin-bottom:5px}

.stat{border-left:3px solid var(--blue);padding-left:16px}
.stat .num{font-family:Armata,"Segoe UI",Arial,sans-serif;font-size:34px;line-height:1.1;color:var(--ink)}
.stat .lab{font-size:15px;color:var(--muted);margin-top:4px}

.clients{
  display:flex;flex-wrap:wrap;gap:10px 12px;margin:0;padding:0;list-style:none;
}
.clients li{
  border:1px solid var(--line);background:#fff;padding:9px 15px;font-size:15px;color:var(--ink);
}

table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;vertical-align:top;padding:13px 14px;border-bottom:1px solid var(--line)}
th{background:var(--ink);color:#fff;font-family:Armata,"Segoe UI",Arial,sans-serif;font-weight:400;font-size:15px;letter-spacing:.02em}
tbody tr:nth-child(even){background:var(--bg-soft)}
td.role{color:var(--muted)}

.person{border-top:3px solid var(--blue);padding-top:18px}
.person h3{margin:0 0 2px;font-size:19px}
.person .title{color:var(--red);font-size:15px;margin:0 0 10px}
.person p{margin:0;color:var(--muted);font-size:16px}

.note{font-size:15px;color:var(--muted);border-left:3px solid var(--line);padding-left:16px;margin-top:30px}

.cta{background:var(--ink);color:#fff;padding:56px 0}
.cta h2{color:#fff;font-size:28px;margin:0 0 12px}
.cta p{color:#C9CED5;margin:0 0 24px;max-width:60ch}
.cta a.btn{background:var(--red);border-color:var(--red)}
.cta a.btn:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.contact-block h3{font-size:17px;margin:0 0 6px}
.contact-block p{margin:0 0 22px;color:var(--muted)}
.contact-block a{color:var(--blue);text-decoration:none}
.contact-block a:hover{text-decoration:underline}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:36px 0;font-size:15px;color:var(--muted)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-foot a{color:var(--muted)}
.site-foot .legal{font-size:14px}

@media (max-width:860px){
  .grid.three,.grid.four{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .hero{padding:52px 0 44px}
}
@media (max-width:560px){
  .grid.three,.grid.four,.grid.two{grid-template-columns:1fr}
  body{font-size:16px}
  .site-head .wrap{min-height:0;padding-top:14px;padding-bottom:14px}
  nav ul{gap:18px}
  table{font-size:15px}
  th,td{padding:10px}
}