/* ProAfrica Consulting — site stylesheet */

@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Lato'; src:url('../fonts/Lato-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Lato'; src:url('../fonts/Lato-Semibold.ttf') format('truetype'); font-weight:600; font-style:normal; }

:root{
  --ink:#FFFFFF;
  --charcoal:#F5F3EF;
  --panel:#FAF9F7;
  --line: rgba(13,15,18,0.10);
  --paper:#16181C;
  --muted:#6E6F72;
  --muted-2:#9B9C9E;
  --copper:#C77D33;
  --gold:#B8860B;
  --deep-copper:#8C4E18;
  --radius: 10px;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Lato', Arial, sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Poppins', Arial, sans-serif;
  font-weight:700;
  line-height:1.2;
  margin:0 0 16px;
  letter-spacing:0.2px;
}
p{ margin:0 0 16px; color:#48494C; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:'Poppins', Arial, sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--copper);
  margin-bottom:14px;
  display:block;
}
.section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-border-top{ border-top:1px solid var(--line); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Poppins', Arial, sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.5px;
  padding:14px 26px;
  border-radius:6px;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .2s ease;
}
.btn-primary{ background:linear-gradient(135deg,var(--gold),var(--copper)); color:#15100A; }
.btn-primary:hover{ opacity:0.88; }
.btn-outline{ border-color:rgba(13,15,18,0.20); color:var(--paper); }
.btn-outline:hover{ border-color:var(--copper); color:var(--copper); }

/* Header */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:30px; }
.brand .word{ font-family:'Poppins',Arial,sans-serif; font-weight:700; font-size:16px; letter-spacing:1px; }
.brand .word span{ color:var(--copper); font-weight:500; font-size:10px; letter-spacing:3px; display:block; margin-top:1px; }
nav.links{ display:flex; align-items:center; gap:32px; }
nav.links a{ font-size:14px; font-weight:600; font-family:'Poppins',Arial,sans-serif; color:#3A3B3E; letter-spacing:0.3px; position:relative; padding:4px 0; }
nav.links a:hover, nav.links a.active{ color:var(--copper); }
.nav-cta{ display:flex; align-items:center; gap:24px; }
.menu-toggle{ display:none; }

/* Hero */
.hero{
  padding:120px 0 90px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(700px 400px at 85% -10%, rgba(199,125,51,0.18), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(232,184,75,0.08), transparent 60%);
}
.hero h1{ font-size:52px; max-width:820px; }
.hero .lead{ font-size:18px; color:#54565A; max-width:620px; margin-bottom:34px; }
.hero .cta-row{ display:flex; gap:16px; margin-bottom:64px; }
.hero-stats{ display:flex; gap:56px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:32px; }
.hero-stats .stat .num{ font-family:'Poppins',Arial,sans-serif; font-size:30px; font-weight:700; color:var(--gold); }
.hero-stats .stat .label{ font-size:12px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-top:4px; }

/* Small page hero (inner pages) */
.page-hero{ padding:80px 0 60px; border-bottom:1px solid var(--line);
  background: radial-gradient(600px 300px at 90% 0%, rgba(199,125,51,0.14), transparent 60%);
}
.page-hero h1{ font-size:38px; max-width:720px; }
.page-hero .lead{ font-size:16px; color:#54565A; max-width:640px; }
.breadcrumb{ font-size:12px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--copper); }

/* Cards */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:rgba(199,125,51,0.5); transform:translateY(-3px); }
.card .icon{ width:44px; height:44px; margin-bottom:20px; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ font-size:14.5px; margin-bottom:14px; }
.card a.more{ font-size:13px; font-weight:700; color:var(--copper); font-family:'Poppins',Arial,sans-serif; letter-spacing:0.5px; }

/* Section headers */
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:32px; }
.section-head p{ font-size:15.5px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Split section */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split .media{
  aspect-ratio:4/3.2;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#F0EEE9,#FAF9F7);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.split .media img{ width:38%; }
.split .media img.photo{ width:100%; height:100%; object-fit:cover; display:block; }
.split .media::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(400px 260px at 30% 20%, rgba(199,125,51,0.15), transparent 60%);
}

/* Commodities */
.commodity-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; gap:10px;
}
.commodity-card .tag{
  align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold); border:1px solid rgba(232,184,75,0.35);
  padding:4px 10px; border-radius:20px;
}
.commodity-card h3{ font-size:18px; margin-bottom:2px; }
.commodity-card p{ font-size:13.5px; margin-bottom:0; }

/* Table (process / offerings) */
.process{ counter-reset:step; }
.step{ display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:none; }
.step .idx{ font-family:'Poppins',Arial,sans-serif; font-size:26px; font-weight:700; color:var(--copper); min-width:48px; }
.step h3{ font-size:18px; margin-bottom:6px; }
.step p{ font-size:14.5px; margin:0; max-width:600px; }

/* Insights / news */
.article-body{ max-width:700px; margin:0 auto; }
.article-body h2{ font-size:23px; margin-top:44px; }
.article-body p{ font-size:16px; color:#48494C; }
.article-body strong{ color:var(--paper); }
.article-nav{ max-width:700px; margin:0 auto 8px; }
.article-nav a{ font-size:13px; letter-spacing:0.5px; color:var(--muted); }
.article-nav a:hover{ color:var(--copper); }

.post-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.post-card .thumb{ height:160px; background:linear-gradient(135deg,#F0EEE9,#FAF9F7); position:relative; }
.post-card .thumb::after{ content:""; position:absolute; inset:0; background:radial-gradient(220px 140px at 20% 10%, rgba(199,125,51,0.25), transparent 70%); }
.post-card .body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.post-card .date{ font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.post-card h3{ font-size:17px; margin-bottom:10px; }
.post-card p{ font-size:14px; flex:1; }

/* Form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column:1/-1; }
label{ font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
input, select, textarea{
  width:100%; background:var(--charcoal); border:1px solid var(--line); color:var(--paper);
  padding:13px 14px; border-radius:6px; font-family:'Lato',Arial,sans-serif; font-size:14.5px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--copper); }
textarea{ resize:vertical; min-height:130px; }

/* Contact info list */
.info-list .info-item{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.info-list .info-item:last-child{ border-bottom:none; }
.info-list .label2{ font-family:'Poppins',Arial,sans-serif; font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--copper); min-width:120px; }
.info-list .val{ font-size:14.5px; color:#3A3B3E; }

/* Footer */
footer.site{ border-top:1px solid var(--line); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-grid h4{ font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.footer-grid a, .footer-grid p{ font-size:14px; color:#54565A; display:block; margin-bottom:10px; }
.footer-grid a:hover{ color:var(--copper); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:24px; font-size:12.5px; color:var(--muted-2); flex-wrap:wrap; gap:12px; }

/* Utility */
.tagline-strip{ background:var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; }
.tagline-strip .marquee{ display:flex; gap:48px; font-family:'Poppins',Arial,sans-serif; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); flex-wrap:wrap; justify-content:center; }

@media (max-width:960px){
  .grid-3, .grid-4{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:38px; }
}
@media (max-width:680px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:30px; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:32px; }
}

/* Skip link (accessibility) */
.skip-link{
  position:absolute; left:-999px; top:auto; z-index:999;
  background:var(--copper); color:#15100A; padding:12px 20px; border-radius:6px;
  font-family:'Poppins',Arial,sans-serif; font-weight:600; font-size:14px;
}
.skip-link:focus{ left:16px; top:16px; }

/* Mobile nav toggle (hamburger) */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; border:1px solid rgba(13,15,18,0.20); border-radius:6px;
  background:transparent; cursor:pointer; padding:0; flex-shrink:0;
}
.menu-toggle span{ display:block; width:18px; height:2px; background:var(--paper); transition:transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

nav.links a.cta-mobile-only{ display:none; }

@media (max-width:900px){
  .menu-toggle{ display:flex; margin-left:14px; }
  .nav-wrap{ position:relative; flex-wrap:wrap; }
  .nav-cta{ margin-left:auto; }
  nav.links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:#FFFFFF; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:4px 24px 20px; max-height:0; overflow:hidden; opacity:0;
    transition:max-height .25s ease, opacity .2s ease;
  }
  nav.links.open{ max-height:480px; opacity:1; }
  nav.links a{ padding:14px 0; border-bottom:1px solid var(--line); }
  nav.links a.cta-mobile-only{ display:block; color:var(--copper); border-bottom:none; padding-top:16px; }
}