/* ============================================================
   AURIIMA ADVISORY AFRICA — Site stylesheet
   Design system aligned to the AAA Business Plan v2:
   Navy #1B2A4A · Gold #C9A227 · Rust #A5522B · Gray #5A5F66
   Arial typography · keyline rules · document-grade formality
   ============================================================ */

:root{
  --navy:#1B2A4A;
  --navy-deep:#111B32;
  --gold:#C9A227;
  --gold-soft:#E3CD7E;
  --rust:#A5522B;
  --gray:#5A5F66;
  --paper:#F6F3EC;
  --line:#E3DFD4;
  --text:#232A38;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.7;background:var(--white)}
img{max-width:100%;height:auto}
.container{width:min(1140px,calc(100% - 48px));margin:0 auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
.site-header::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gold) 0 70%,var(--rust) 70% 100%)}
.nav{height:84px;width:min(1220px,calc(100% - 40px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;width:210px}
.brand img{display:block;width:190px;max-height:62px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--navy);font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.nav-links a:hover{color:var(--rust);border-bottom-color:var(--gold)}
.nav-cta{padding:11px 20px;background:var(--gold);color:var(--navy)!important;border-bottom:none!important}
.nav-cta:hover{background:var(--rust);color:#fff!important}
.nav-toggle{display:none;background:none;border:0;font-size:28px;color:var(--navy);cursor:pointer}

/* ---------- Heroes (all pages) ----------
   Each page sets its own image inline on the section:
   <section class="hero" style="--hero-image:url('assets/heroes/home.jpg')">
   To change a hero: replace the JPG (same filename) or edit that path. */
.hero{
  position:relative;color:#fff;display:flex;align-items:center;min-height:620px;
  background:
    linear-gradient(100deg,rgba(17,27,50,.92) 0%,rgba(27,42,74,.78) 55%,rgba(27,42,74,.45) 100%),
    var(--hero-image) center/cover no-repeat var(--navy);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--gold) 0 76%,var(--rust) 76% 100%)}
.hero.compact{min-height:420px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;padding:80px 0}
.hero h1{font-size:clamp(40px,5.4vw,66px);line-height:1.06;letter-spacing:-1.5px;margin:14px 0 22px}
.lead{font-size:20px;color:#EDF0F5;max-width:720px}
.hero.compact .container{padding:70px 0}
.hero.compact h1{max-width:900px}

/* Eyebrow — echoes the report section headers: gold rule + rust tick */
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:2.5px;font-size:12px;font-weight:700;margin:0 0 6px}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--gold);flex:none}
.section .eyebrow, .feature .eyebrow{color:var(--rust)}
.section .eyebrow::before, .feature .eyebrow::before{background:var(--rust)}

/* Hero side panel — document plate */
.hero-panel{background:rgba(17,27,50,.55);border:1px solid rgba(201,162,39,.45);border-top:4px solid var(--gold);padding:34px;backdrop-filter:blur(3px)}
.hero-panel h2{color:var(--gold-soft);font-size:32px;letter-spacing:4px;margin:0 0 12px}
.hero-panel p{margin:0 0 10px;color:#E8EBF1;font-size:15px}

/* ---------- Buttons ---------- */
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.button{display:inline-block;padding:14px 26px;background:var(--gold);color:var(--navy);text-decoration:none;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:13px;border:1px solid var(--gold);cursor:pointer;transition:background .2s,color .2s}
.button:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.button.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65)}
.button.outline:hover{background:#fff;color:var(--navy)}

/* ---------- Sections ---------- */
.section{padding:88px 0}
.section.muted{background:var(--paper)}
.section.dark{background:var(--navy);color:#fff}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark .eyebrow{color:var(--gold-soft)}
.section.dark .eyebrow::before{background:var(--gold)}

h2{color:var(--navy);font-size:clamp(28px,3.6vw,44px);line-height:1.15;letter-spacing:-.5px;margin:10px 0 24px}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.copy p{font-size:17px;text-align:justify}  /* justified, as in the business plan */

/* ---------- Cards — document plates with gold keyline ---------- */
.cards{display:grid;gap:24px;margin-top:34px}
.cards.three{grid-template-columns:repeat(3,1fr)}
article{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);padding:28px 26px;transition:transform .2s,box-shadow .2s}
article:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,42,74,.10)}
article h3{margin:0 0 10px;color:var(--navy);font-size:19px}
article p{margin:0;color:var(--gray);font-size:15.5px}
.dark article{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-top-color:var(--gold)}
.dark article p{color:#CBD2DE}

/* ---------- Pills ---------- */
.pills{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.pills span{padding:11px 18px;border:1px solid rgba(201,162,39,.55);background:rgba(201,162,39,.10);color:var(--gold-soft);font-weight:700;font-size:14px;letter-spacing:.4px}

/* ---------- Feature block (case study) ---------- */
.feature{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--rust);padding:56px}
.feature h2{margin-top:6px}
.feature > p{font-size:17px;max-width:860px;text-align:justify}

/* ---------- Forms ---------- */
.narrow{max-width:820px}
form{display:grid;gap:16px}
input,textarea{width:100%;padding:15px 16px;border:1px solid var(--line);border-bottom:2px solid var(--gray);background:#FDFCF9;font:inherit;color:var(--text)}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--gold);background:#fff}
textarea{min-height:160px}
.note{color:var(--gray);font-size:14px}

/* ---------- Footer ---------- */
.footer{background:var(--navy-deep);color:#fff;padding:0}
.footer::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--gold) 0 76%,var(--rust) 76% 100%)}
.footer-inner{width:min(1140px,calc(100% - 48px));margin:auto;text-align:center;padding:44px 0}
.footer-inner p{color:var(--gold-soft);letter-spacing:2px;text-transform:uppercase;font-size:12px;margin:8px 0 0}
.footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:18px}
.footer-links a{color:#C9CFDA;text-decoration:none;font-size:13px;letter-spacing:.5px}
.footer-links a:hover{color:var(--gold-soft)}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:87px;left:0;right:0;background:#fff;padding:20px 24px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .brand{width:170px}.brand img{width:160px}
  .hero-grid,.split,.cards.three{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-grid{padding:64px 0;gap:36px}
  .feature{padding:32px}
  .copy p,.feature > p{text-align:left}
  .container{width:min(100% - 32px,1140px)}
}

/* ---------- Contact form status & honeypot ---------- */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-status{margin:4px 0 0;font-size:15px;font-weight:700;display:none}
.form-status.ok{display:block;color:#2E6B3F;border-left:4px solid var(--gold);padding-left:12px}
.form-status.err{display:block;color:var(--rust);border-left:4px solid var(--rust);padding-left:12px}
button.button:disabled{opacity:.55;cursor:not-allowed}