/*
 * ═══════════════════════════════════════════════════════════════════
 * Makaya Consult FZE — inner.css
 * Shared stylesheet for all inner pages (articles, services, insights,
 * projects, about-founder, vacancies, privacy, 404).
 * Each inner page links to this file and keeps only page-specific
 * CSS in a small inline <style> block.
 * ═══════════════════════════════════════════════════════════════════
 */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'DM Sans',system-ui,sans-serif;background:#0F1A0D;color:#F5F2E8;line-height:1.82;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.12}
em{font-style:italic} strong{font-weight:500}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
button{font-family:'DM Sans',system-ui,sans-serif;cursor:pointer}

/* CSS VARIABLES */
:root{
  --dark:#0F1A0D;--dark2:#141F12;--dark3:#1C2A1A;--dark4:#243022;
  --green:#3A7D2C;--glt:#6BB54A;
  --gold:#B8902A;--muted:#9AADA0;--cream:#F5F2E8;--light:#E2E2E2;--white:#FAFAF8;
  --bdr:rgba(58,125,44,.15);
  --dp:'Playfair Display',Georgia,serif;
  --bd:'DM Sans',system-ui,sans-serif;
  --px:clamp(1.5rem,5vw,4rem);--mxw:1200px;
}

/* SCROLL REVEAL */
.sr{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.sr.in{opacity:1;transform:none}
.sr.d1{transition-delay:.1s}.sr.d2{transition-delay:.2s}.sr.d3{transition-delay:.3s}

/* NAV */
#nav{position:sticky;top:0;z-index:200;padding:.9rem var(--px);display:flex;align-items:center;justify-content:space-between;background:rgba(15,26,13,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--bdr);transition:border-color .35s}
#nav.scrolled{border-color:var(--glt)}
.nav-brand{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.nav-logo-img{height:36px;width:auto}
.nav-brand-text{display:flex;flex-direction:column;line-height:1.1}
.nav-brand-text .name{font-family:'DM Sans',system-ui,sans-serif;font-size:.95rem;font-weight:700;color:var(--cream);text-transform:uppercase;letter-spacing:.03em}
.nav-brand-text .sub{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--glt)}
.nav-ul{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-ul a{font-size:.68rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nav-ul a:hover{color:var(--cream)}
.nav-cta{padding:.45rem 1.1rem;border:1px solid var(--green);color:var(--cream)!important;border-radius:2px;transition:background .25s!important}
.nav-cta:hover{background:var(--green)!important}
.nav-phone{color:var(--glt)!important;font-size:.65rem!important;letter-spacing:.06em!important}
.nav-ham{display:none;background:none;border:none;padding:6px 4px;z-index:300;cursor:pointer;font-family:'DM Sans',system-ui,sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.16em;color:var(--cream);text-transform:uppercase;line-height:1;-webkit-appearance:none;appearance:none}
.nav-ham span{display:block;width:22px;height:1px;background:var(--cream);transition:transform .3s,opacity .3s}
#nav.open .nav-ham span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#nav.open .nav-ham span:nth-child(2){opacity:0}
#nav.open .nav-ham span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:820px){
  .nav-ham{display:inline-flex;align-items:center;z-index:1100;position:relative;color:var(--cream)}
  .nav-ul{display:none;position:fixed;top:0;left:0;width:100%;height:100dvh;background:var(--dark);flex-direction:column;justify-content:center;align-items:center;gap:1rem;z-index:1000;overscroll-behavior:contain}
  #nav.open .nav-ul{display:flex}
  .nav-ul a:not(.nav-cta):not(.nav-phone){font-family:'Playfair Display',Georgia,serif;font-size:clamp(.9rem,2.6vh,1.1rem);font-weight:300;letter-spacing:.05em;color:var(--cream)}
  .nav-ul .nav-phone{font-size:clamp(.7rem,1.9vh,.82rem)!important;color:var(--glt)!important}
  .nav-ul .nav-cta{font-size:.65rem;padding:.65rem 1.75rem}
  .nav-brand-text .sub{display:none}
}

/* FOOTER */
footer{background:var(--dark2);border-top:3px solid var(--glt);padding:3.5rem var(--px) 2rem;overflow-x:hidden}
.foot-inner{max-width:var(--mxw);margin:0 auto}
.foot-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid var(--bdr);margin-bottom:1.75rem}
.foot-brand-col .fb-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;margin-bottom:.75rem}
.foot-brand-col .fb-logo img{height:38px;width:38px;object-fit:contain}
.foot-brand-col .fb-name{font-family:'DM Sans',system-ui,sans-serif;font-size:1rem;color:var(--cream)}
.foot-brand-col .fb-name em{color:var(--glt);font-style:italic}
.foot-brand-col .fb-sub{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.875rem;display:block}
.foot-brand-col p{font-size:.82rem;line-height:1.75;color:var(--muted)}
.foot-nav-col h4,.foot-contact-col h4{font-size:.58rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;opacity:.6}
.foot-nav-col .foot-nav-links{display:flex;flex-direction:column;gap:.5rem}
.foot-nav-col .foot-nav-links a{font-size:.84rem;color:var(--muted);transition:color .2s;line-height:1.4}
.foot-nav-col .foot-nav-links a:hover{color:var(--cream)}
.foot-contact-col p{font-size:.84rem;color:var(--muted);line-height:1.85}
.foot-contact-col a{color:var(--muted);transition:color .2s}
.foot-contact-col a:hover{color:var(--cream)}
.foot-linkedin{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.foot-linkedin:hover{color:var(--cream)}
.foot-linkedin svg{width:15px;height:15px;fill:currentColor}
.foot-copy{font-size:.7rem;color:var(--muted);opacity:.55;line-height:1.6}
.foot-copy a{color:var(--muted);transition:color .2s}
.foot-copy a:hover{color:var(--cream)}
@media(max-width:820px){footer{padding:2.5rem var(--px) 1.5rem}.foot-top{grid-template-columns:1fr;gap:1.5rem}.foot-inner{overflow-x:hidden}}

/* WHATSAPP FLOAT */
#wa-btn{position:fixed;bottom:5.5rem;right:1.5rem;z-index:300;width:52px;height:52px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .25s}
#wa-btn:hover{transform:scale(1.08)}
#wa-btn svg{width:28px;height:28px;fill:#fff}

/* COOKIE CONSENT */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--dark4,#243022);border-top:1px solid rgba(58,125,44,.15);padding:1.1rem clamp(1.5rem,5vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;transform:translateY(100%);transition:transform .4s ease}
#cookie-banner.visible{transform:translateY(0)}
.cookie-text{font-size:.88rem;color:var(--muted);line-height:1.6;flex:1;min-width:220px}
.cookie-text a{color:var(--glt);text-decoration:underline;text-underline-offset:3px}
.cookie-btns{display:flex;gap:.75rem;flex-shrink:0}
.cookie-accept{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.5rem;background:var(--green);color:#fff;border:2px solid var(--green);cursor:pointer;transition:background .25s}
.cookie-accept:hover{background:var(--glt);border-color:var(--glt)}
.cookie-decline{font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.5rem;background:transparent;color:var(--muted);border:2px solid rgba(58,125,44,.15);cursor:pointer}
@media(max-width:580px){#cookie-banner{flex-direction:column;align-items:flex-start}.cookie-btns{width:100%}.cookie-accept,.cookie-decline{flex:1;text-align:center}}

/* ARTICLE LAYOUT */
.art-header{max-width:var(--mxw);margin:4rem auto 0;padding:0 var(--px)}
.art-cat{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.65rem;margin-bottom:1.25rem}
.art-cat::before{content:'';width:1.2rem;height:1px;background:var(--gold)}
.art-h1{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:400;line-height:1.1;color:var(--cream);margin-bottom:1.25rem}
.art-h1 em{color:var(--glt);font-style:italic}
.art-meta{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding-bottom:2rem;border-bottom:1px solid var(--bdr);margin-bottom:3rem}
.art-body{max-width:var(--mxw);margin:0 auto;padding:0 var(--px) 5rem}
.art-body p{font-size:1.08rem;color:rgba(245,242,232,.78);line-height:1.88;margin-bottom:1.5rem}
.art-body h2{font-size:clamp(1.4rem,2.5vw,2rem);color:var(--cream);margin:2.5rem 0 1rem;padding-top:1rem}
.art-body h3{font-size:1.15rem;color:var(--cream);margin:2rem 0 .75rem;font-family:'Playfair Display',Georgia,serif;font-weight:400;letter-spacing:0}
.art-body blockquote{margin:2rem 0;padding:1.2rem 0 1.2rem 1.4rem;border-left:2px solid var(--green);font-family:'Playfair Display',serif;font-size:1.25rem;font-style:italic;color:var(--cream);line-height:1.5}
.art-body ul,.art-body ol{color:rgba(245,242,232,.78);font-size:1.05rem;line-height:1.82;margin:1rem 0 1.5rem 1.5rem}
.art-body li{margin-bottom:.5rem}
.art-body strong{color:var(--cream);font-weight:500}

/* CTA BAND */
.art-cta{max-width:var(--mxw);margin:0 auto;padding:0 var(--px) 5rem}
.cta-band{background:var(--dark3);border:1px solid var(--bdr);padding:2.5rem}
.cta-band h3{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--cream);margin-bottom:.75rem}
.cta-band p{font-size:.95rem;color:var(--muted);line-height:1.75;margin-bottom:1.5rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.85rem 2rem;background:var(--green);color:var(--cream)}
.btn:hover{background:var(--glt)}

/* CUSTOM CONTENT SECTIONS */
.credentials{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bdr);border:1px solid var(--bdr);margin:2.5rem 0}
.credential-item{background:var(--dark2);padding:1rem 1.25rem}
.credential-label{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.credential-value{font-size:.92rem;color:var(--cream);font-weight:400;line-height:1.4}
@media(max-width:600px){.credentials{grid-template-columns:1fr}}
.pullquote{margin:3rem 0;padding:1.5rem 0 1.5rem 1.75rem;border-left:3px solid var(--green)}
.pullquote p{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.15rem,2.2vw,1.45rem);font-style:italic;color:var(--cream);line-height:1.55;margin-bottom:.75rem}
.pullquote cite{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--glt)}
.timeline{margin:2rem 0 2.5rem;border-left:1px solid var(--bdr);padding-left:1.5rem}
.timeline-item{position:relative;padding-bottom:1.75rem}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:'';position:absolute;left:-1.575rem;top:.35rem;width:8px;height:8px;border-radius:50%;background:var(--green);border:1px solid var(--glt)}
.timeline-year{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.timeline-text{font-size:.97rem;color:rgba(245,242,232,.78);line-height:1.75}
.cta-box{background:var(--dark3);border:1px solid var(--bdr);padding:2.25rem;margin:3rem 0}
.cta-box h3{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;color:var(--cream);margin-bottom:.75rem;font-weight:400}
.cta-box p{font-size:.92rem;color:var(--muted);line-height:1.75;margin-bottom:1.25rem}
.cta-btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.8rem 1.75rem;background:var(--green);color:var(--cream);transition:background .25s}
.cta-btn:hover{background:var(--glt)}
.author-bio{display:flex;align-items:flex-start;gap:1.5rem;margin:3rem 0;padding:1.5rem;border:1px solid var(--bdr);background:var(--dark2)}
.author-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;border:2px solid var(--bdr)}
.author-info h4{font-family:'Playfair Display',Georgia,serif;font-size:1rem;color:var(--cream);font-weight:400;margin-bottom:.5rem}
.author-info p{font-size:.85rem;color:var(--muted);line-height:1.7;margin:0}
@media(max-width:540px){.author-bio{flex-direction:column}.author-avatar{width:60px;height:60px}}
.feature-list{list-style:none;margin-left:0}
.feature-list li{padding:.6rem 0 .6rem 1.25rem;border-bottom:1px solid var(--bdr);position:relative;font-size:1.05rem;color:rgba(245,242,232,.78);line-height:1.75}
.feature-list li::before{content:'';position:absolute;left:0;top:1.1rem;width:6px;height:6px;border-radius:50%;background:var(--green)}
.feature-list li:last-child{border-bottom:none}
.district-table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.88rem}
.district-table thead tr{background:var(--dark3);border-bottom:2px solid var(--green)}
.district-table th{padding:.75rem 1rem;text-align:left;font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.district-table tbody tr{border-bottom:1px solid var(--bdr);transition:background .2s}
.district-table tbody tr:hover{background:var(--dark2)}
.district-table td{padding:.75rem 1rem;color:rgba(245,242,232,.82);line-height:1.45;vertical-align:top}
.district-table td strong{color:var(--cream);font-weight:500}
.tag{display:inline-flex;align-items:center;font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .65rem;background:rgba(58,125,44,.15);color:var(--glt);border:1px solid rgba(107,181,74,.25);border-radius:2px}
@media(max-width:640px){.district-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* NAV JS — onScroll utility used by all inner pages */