:root{
 --bg:#F4F0E6;--paper:#FFFFFF;--paper-2:#FBF9F4;--ink:#0B1F3A;--muted:#52606D;--emerald:#0B8F68;--gold:#D99A25;--terracotta:#D95D39;--sand:#DDD5C5;--blue:#2E5D8F;
 --shadow:0 24px 70px rgba(11,31,58,.10);--shadow-sm:0 12px 34px rgba(11,31,58,.08);--radius:28px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden;transition:background .45s,color .45s}body.night{--bg:#09141D;--paper:#101E27;--paper-2:#0E1A22;--ink:#F7F4EC;--muted:#B9C1C5;--sand:#31424A;--shadow:0 24px 80px rgba(0,0,0,.28);--shadow-sm:0 12px 36px rgba(0,0,0,.22)}
a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(1280px,calc(100% - 64px));margin:auto}.serif{font-family:"Playfair Display",serif;font-style:italic}.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}.section{padding:128px 0;position:relative}.section-head{display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:end;margin-bottom:54px}.section-head h2{font-size:clamp(48px,6vw,88px);line-height:.95;letter-spacing:-.055em;margin:14px 0 0}.section-head p{color:var(--muted);font-size:17px;line-height:1.7;max-width:470px;margin:0}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.in{opacity:1;transform:none}
/* NAV */
.nav{position:fixed;z-index:100;top:16px;left:18px;right:18px;height:70px;border:1px solid rgba(11,31,58,.12);background:rgba(244,240,230,.84);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 20px;border-radius:22px;box-shadow:0 12px 36px rgba(11,31,58,.07);transition:.4s}.night .nav{background:rgba(10,22,29,.82);border-color:rgba(255,255,255,.12)}
.brand{display:flex;align-items:center;gap:11px;min-width:240px}.brand img{ width:34px;height:34px;object-fit:contain}.brand strong{font-size:14px;letter-spacing:.16em;display:block}.brand small{display:block;font-size:8px;letter-spacing:.15em;color:var(--muted);margin-top:5px;text-transform:uppercase}.navlinks{display:flex;gap:25px;align-items:center}.navlinks a{font-size:12px;color:var(--muted);font-weight:600;transition:.25s}.navlinks a:hover{color:var(--ink)}.nav-actions{display:flex;align-items:center;gap:9px}.pill{border:1px solid var(--sand);background:rgba(255,255,255,.45);border-radius:999px;padding:12px 16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:pointer}.night .pill{background:rgba(255,255,255,.04)}.theme-btn{min-width:104px}.talk{border-color:var(--emerald);color:var(--emerald);background:rgba(11,143,104,.06)}.partner{border:0;background:var(--gold);color:#fff;padding:13px 20px}.hamb{display:none}
/* HERO */
.hero{min-height:100svh;padding:150px 0 80px;display:flex;align-items:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:700px;height:700px;right:-200px;top:80px;background:radial-gradient(circle,rgba(11,143,104,.18),transparent 65%);filter:blur(20px)}.hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:center}.hero h1{font-size:clamp(58px,7.4vw,112px);line-height:.86;letter-spacing:-.065em;margin:18px 0 25px}.hero h1 em{font-family:"Playfair Display",serif;font-weight:500}.hero-copy{font-size:19px;line-height:1.7;color:var(--muted);max-width:580px}.hero-actions{display:flex;gap:12px;margin-top:32px}.primary{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:15px 23px;font-weight:700}.secondary{border:1px solid var(--sand);border-radius:999px;padding:14px 22px;color:var(--ink);background:transparent;font-weight:700}.hero-note{display:flex;gap:24px;margin-top:42px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.hero-note strong{color:var(--emerald)}
.voice-hero{border:1px solid var(--sand);border-radius:36px;background:linear-gradient(145deg,#fffdf8,#EDE8DC);padding:13px;box-shadow:var(--shadow);position:relative}.night .voice-hero{background:linear-gradient(145deg,#14252e,#0D1820)}.voice-hero iframe{display:block;width:100%;height:560px;border:0;border-radius:26px;background:#fff}.voice-label{position:absolute;top:28px;left:31px;z-index:2;font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:700;pointer-events:none}
/* LANDSCAPE */
.landscape{background:linear-gradient(180deg,#F7F3EA 0%,#EFE9DC 100%)}.night .landscape{background:#0A171F}.map-shell{display:grid;grid-template-columns:310px 1fr;min-height:720px;border:1px solid var(--sand);border-radius:34px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);position:relative}.map-panel{padding:38px 30px;border-right:1px solid var(--sand);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,var(--paper),var(--paper-2))}.country-kicker{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.2em}.country-flag{font-size:54px;margin:30px 0 18px}.map-panel h3{font-family:"Playfair Display",serif;font-size:44px;line-height:1;margin:0 0 10px}.map-panel .langs{font-weight:600;color:var(--muted);font-size:13px}.greeting{font-family:"Playfair Display",serif;font-size:36px;color:var(--gold);margin:32px 0 8px}.map-panel p{color:var(--muted);line-height:1.65;font-size:14px}.map-btn{margin-top:20px;border:1px solid var(--emerald);color:var(--emerald);border-radius:999px;background:transparent;padding:12px 16px;font-weight:700}.map-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(11,143,104,.10),transparent 54%),var(--paper-2);display:flex;align-items:center;justify-content:center;padding:24px}.map-stage:after{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--emerald) 1px,transparent 1px);background-size:26px 26px;opacity:.07;mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent)}.map-art{position:relative;width:min(100%,900px);z-index:1;animation:mapFloat 7s ease-in-out infinite}.map-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 38px rgba(11,31,58,.13))}.map-side-title{position:absolute;right:30px;top:30px;max-width:270px;text-align:right;z-index:2}.map-side-title h3{font-family:"Playfair Display",serif;font-size:34px;line-height:1;margin:0}.map-side-title em{color:var(--gold)}.map-side-title p{color:var(--muted);font-size:12px;line-height:1.6}.map-stats{position:absolute;left:30px;bottom:25px;display:flex;gap:8px;z-index:3}.map-stat{padding:11px 15px;border:1px solid var(--sand);background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.night .map-stat{background:rgba(16,30,39,.75)}.map-stat b{font-size:16px;margin-right:5px;color:var(--emerald)}
/* ACTION */
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.action-card{position:relative;min-height:470px;border:1px solid var(--sand);border-radius:28px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow-sm);transition:transform .4s,box-shadow .4s}.action-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.action-card img{width:100%;height:225px;object-fit:cover;display:block}.action-card .body{padding:25px}.action-card h3{font-size:24px;line-height:1.05;letter-spacing:-.035em;margin:0 0 12px}.action-card p{color:var(--muted);font-size:14px;line-height:1.65}.action-card .link{position:absolute;bottom:22px;color:var(--emerald);font-weight:700;font-size:12px}
/* INTELLIGENCE */
.intelligence{background:#0B1F3A;color:#fff;overflow:hidden}.intelligence .section-head p{color:#BFCAD2}.intel-stage{height:650px;position:relative;display:flex;justify-content:center;align-items:flex-end;padding-bottom:35px}.intel-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 12%,rgba(64,152,255,.20),transparent 36%),radial-gradient(circle at 50% 88%,rgba(11,143,104,.24),transparent 48%)}.intel-arc{position:absolute;width:105%;height:78%;border:1px solid rgba(255,255,255,.12);border-radius:50%;top:8%;left:-2.5%;transform:rotate(-6deg)}.sphere{position:absolute;top:0;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#F8F2D8 0%,#9BC6FF 17%,#2C5EAA 48%,#0C274A 75%,#061423 100%);box-shadow:0 0 70px rgba(90,180,255,.65),inset -25px -20px 50px rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;text-align:center;z-index:8}.sphere:before{content:"";position:absolute;inset:-18px;border-radius:50%;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 28px rgba(109,211,255,.55)}.sphere span{font-size:19px;letter-spacing:.18em;font-weight:700}.sphere small{display:block;font-size:8px;letter-spacing:.28em;margin-top:10px;color:#DCEAFF}.orbit{position:absolute;border:1px solid rgba(126,219,255,.35);border-radius:50%;height:80px;width:520px;top:60px;transform:rotate(-10deg);animation:orbit 12s linear infinite}.orbit.o2{width:620px;top:85px;transform:rotate(9deg);animation-duration:16s}.layer{position:absolute;width:620px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.48);background:linear-gradient(180deg,rgba(255,255,255,.23),rgba(255,255,255,.06));backdrop-filter:blur(15px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 20px 45px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:6;transform:perspective(700px) rotateX(62deg);animation:layerFloat 5s ease-in-out infinite}.layer span{font-size:13px;letter-spacing:.22em;font-weight:700;transform:rotateX(-62deg)}.layer small{font-size:8px;letter-spacing:.17em;color:#DCEAFF;margin-top:7px;transform:rotateX(-62deg)}.l1{bottom:410px;background:linear-gradient(180deg,rgba(109,203,255,.34),rgba(255,255,255,.05));}.l2{bottom:325px;background:linear-gradient(180deg,rgba(170,107,255,.34),rgba(255,255,255,.05));animation-delay:.3s}.l3{bottom:240px;background:linear-gradient(180deg,rgba(0,210,193,.32),rgba(255,255,255,.05));animation-delay:.6s}.l4{bottom:155px;background:linear-gradient(180deg,rgba(247,190,68,.36),rgba(255,255,255,.05));animation-delay:.9s}.l5{bottom:70px;background:linear-gradient(180deg,rgba(175,190,205,.26),rgba(255,255,255,.05));animation-delay:1.2s}.intel-caption{position:absolute;right:4%;bottom:165px;width:210px;font-size:10px;letter-spacing:.18em;line-height:1.8;color:#B9CAD5}.intel-caption div{border-left:1px solid var(--gold);padding-left:12px;margin:20px 0}
/* APPROACH */
.approach{background:var(--paper-2)}.approach-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:center}.cube-scene{height:560px;display:flex;align-items:center;justify-content:center;perspective:1200px;position:relative}.cube-glow{position:absolute;width:370px;height:370px;border-radius:50%;background:radial-gradient(circle,rgba(11,143,104,.23),transparent 68%);filter:blur(10px)}.cube{width:245px;height:245px;position:relative;transform-style:preserve-3d;animation:spinCube 18s linear infinite}.face{position:absolute;inset:0;border:1px solid rgba(255,255,255,.75);background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(255,255,255,.12));backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;letter-spacing:.12em;font-size:13px;box-shadow:inset 0 0 45px rgba(255,255,255,.35),0 20px 50px rgba(11,31,58,.12)}.f{transform:translateZ(122px)}.b{transform:rotateY(180deg) translateZ(122px)}.r{transform:rotateY(90deg) translateZ(122px)}.l{transform:rotateY(-90deg) translateZ(122px)}.t{transform:rotateX(90deg) translateZ(122px)}.bo{transform:rotateX(-90deg) translateZ(122px)}.approach-copy h2{font-size:clamp(52px,6vw,82px);line-height:.93;letter-spacing:-.055em;margin:12px 0 22px}.approach-copy>p{font-size:17px;color:var(--muted);line-height:1.7;max-width:570px}.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}.step{border:1px solid var(--sand);border-radius:22px;padding:24px;background:var(--paper);transition:.35s}.step:hover{transform:translateY(-5px);border-color:rgba(11,143,104,.45)}.step h3{font-size:20px;margin:0 0 8px}.step p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
/* UNDERNEATH */
.underneath{background:#E9E2D4}.night .underneath{background:#0D1B23}.under-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.under-card{min-height:270px;border:1px solid rgba(11,31,58,.10);border-radius:30px;background:rgba(255,255,255,.68);padding:30px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:.4s}.night .under-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}.under-card:before{content:"";position:absolute;width:170px;height:170px;right:-70px;bottom:-70px;border-radius:50%;background:radial-gradient(circle,rgba(11,143,104,.22),transparent 70%);transition:.4s}.under-card:hover{transform:translateY(-7px) rotateX(2deg);box-shadow:var(--shadow)}.under-card:hover:before{transform:scale(1.3)}.under-icon{width:46px;height:46px;border-radius:15px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:20px;margin-bottom:28px}.under-card h3{font-size:25px;margin:0 0 10px}.under-card p{color:var(--muted);font-size:14px;line-height:1.65;max-width:340px}.under-card .micro{position:absolute;right:24px;top:26px;color:var(--emerald);font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
/* VOICE */
.voice{background:linear-gradient(135deg,#F8F2E6,#E6EFEA)}.night .voice{background:#0C1B22}.voice-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:center}.voice-copy h2{font-size:clamp(52px,6vw,84px);line-height:.92;letter-spacing:-.06em;margin:14px 0 20px}.voice-copy h2 em{font-family:"Playfair Display",serif}.voice-copy p{color:var(--muted);font-size:17px;line-height:1.7;max-width:500px}.lang-pills{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.lang-pills span{border:1px solid rgba(11,143,104,.35);color:var(--emerald);border-radius:999px;padding:8px 12px;font-size:10px;font-weight:700}.voice-frame{border:1px solid var(--sand);border-radius:34px;padding:12px;background:rgba(255,255,255,.7);box-shadow:var(--shadow)}.night .voice-frame{background:rgba(255,255,255,.04)}.voice-frame iframe{width:100%;height:610px;border:0;border-radius:25px;display:block;background:#fff}
/* SIGNAL */
.signal{background:var(--ink);color:#fff}.signal .section-head p{color:#B7C3CA}.signal-tabs{display:flex;gap:28px;overflow:auto;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:18px 0;margin-bottom:28px}.signal-tabs span{white-space:nowrap;color:#D7DEE2;font-size:10px;letter-spacing:.15em;text-transform:uppercase}.signal-tabs span:after{content:"✦";color:var(--gold);margin-left:7px}.signal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.signal-card{border:1px solid rgba(255,255,255,.15);border-radius:27px;overflow:hidden;background:#112B3E;min-height:390px;transition:.45s;transform-style:preserve-3d}.signal-card:hover{transform:translateY(-9px) rotateX(2deg);border-color:rgba(217,154,37,.65);box-shadow:0 25px 60px rgba(0,0,0,.28)}.signal-card .img{height:205px;overflow:hidden;position:relative}.signal-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.signal-card:hover img{transform:scale(1.08)}.signal-card .content{padding:24px}.signal-card .tag{font-size:9px;color:#DDBA69;letter-spacing:.14em;text-transform:uppercase;font-weight:700}.signal-card h3{font-size:25px;line-height:1.05;margin:12px 0 10px}.signal-card p{color:#B8C5CC;font-size:13px;line-height:1.65;margin:0}.signal-card .pulse{position:absolute;right:16px;top:16px;width:10px;height:10px;background:var(--emerald);border-radius:50%;box-shadow:0 0 0 7px rgba(11,143,104,.15);animation:pulse 2s infinite}
/* IMPACT */
.impact{background:var(--bg);overflow:hidden}.impact-center{height:560px;position:relative;display:flex;align-items:center;justify-content:center}.impact-earth{width:270px;height:270px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#F4F0E6,#A7D5C3 20%,#0B8F68 48%,#063F34 78%,#05261F 100%);box-shadow:0 0 90px rgba(11,143,104,.35),inset -35px -30px 60px rgba(0,0,0,.28);position:relative;z-index:3}.impact-earth:before{content:"AI IN AFRICA";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;letter-spacing:.25em;font-weight:700}.impact-ring{position:absolute;border:1px solid rgba(11,31,58,.20);border-radius:50%;animation:ring 12s linear infinite}.r1{width:410px;height:180px;transform:rotate(15deg)}.r2{width:530px;height:240px;transform:rotate(-20deg);animation-duration:16s}.r3{width:670px;height:310px;transform:rotate(4deg);animation-duration:20s}.impact-node{position:absolute;border:1px solid var(--sand);background:var(--paper);border-radius:18px;padding:13px 16px;box-shadow:var(--shadow-sm);font-size:11px;font-weight:700}.n1{top:65px;left:16%}.n2{top:115px;right:12%}.n3{bottom:75px;left:18%}.n4{bottom:95px;right:16%}
/* FOOTER */
.footer{padding:60px 0 30px;border-top:1px solid var(--sand)}.footer-top{display:flex;justify-content:space-between;gap:40px;align-items:center}.footer-brand{display:flex;gap:12px;align-items:center}.footer-brand img{width:38px}.footer-brand strong{font-size:12px;letter-spacing:.15em}.footer-brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:.12em;margin-top:5px}.footer-links{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:11px}.footer-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:45px;padding-top:18px;border-top:1px solid var(--sand)}
/* MODAL */
.drawer{position:fixed;inset:0;background:rgba(11,31,58,.45);backdrop-filter:blur(10px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}.drawer.open{display:flex}.drawer-card{width:min(1100px,100%);height:min(760px,90vh);border-radius:32px;background:var(--paper);border:1px solid var(--sand);padding:12px;box-shadow:0 40px 100px rgba(0,0,0,.25);position:relative}.drawer-card iframe{width:100%;height:100%;border:0;border-radius:23px}.close{position:absolute;right:26px;top:26px;z-index:2;border:1px solid rgba(255,255,255,.35);background:rgba(11,31,58,.7);color:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer}
@keyframes mapFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes spinCube{from{transform:rotateX(-12deg) rotateY(0deg)}to{transform:rotateX(-12deg) rotateY(360deg)}}@keyframes orbit{to{transform:rotate(-370deg)}}@keyframes layerFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(11,143,104,0)}}@keyframes ring{to{transform:rotate(360deg)}}
@media(max-width:1100px){.navlinks{display:none}.hamb{display:block}.brand{min-width:0}.hero-grid,.voice-grid,.approach-wrap{grid-template-columns:1fr}.hero{padding-top:125px}.voice-hero iframe{height:500px}.map-shell{grid-template-columns:1fr}.map-panel{border-right:0;border-bottom:1px solid var(--sand);min-height:300px}.action-grid{grid-template-columns:repeat(2,1fr)}.under-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}.intel-stage{transform:scale(.92);transform-origin:center}.signal-grid{grid-template-columns:1fr}.section-head{grid-template-columns:1fr;gap:20px}}
@media(max-width:680px){.container{width:min(100% - 28px,1280px)}.nav{left:8px;right:8px;top:8px;height:62px;padding:0 10px 0 13px}.brand img{width:29px}.brand strong{font-size:11px}.brand small{font-size:7px}.nav-actions .partner{display:none}.nav-actions{gap:5px}.theme-btn{min-width:auto;padding:10px 12px}.talk{padding:10px 12px}.hero h1{font-size:56px}.hero-copy{font-size:16px}.hero-actions{flex-direction:column}.voice-hero iframe{height:500px}.map-shell{min-height:auto}.map-panel{padding:28px}.map-side-title{display:none}.map-stats{left:15px;bottom:15px;flex-wrap:wrap}.map-stage{padding:10px;min-height:520px}.action-grid,.under-grid{grid-template-columns:1fr}.section{padding:92px 0}.section-head h2{font-size:50px}.intel-stage{height:550px;transform:scale(.62)}.intel-caption{display:none}.layer{width:580px}.sphere{width:205px;height:205px}.cube-scene{height:420px;transform:scale(.75)}.voice-frame iframe{height:540px}.impact-center{height:470px}.impact-earth{width:210px;height:210px}.r1{width:310px}.r2{width:410px}.r3{width:520px}.impact-node{font-size:9px}.n1{left:0}.n2{right:0}.n3{left:0}.n4{right:0}.footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}.footer-links{gap:12px}}
/* ===== FINAL REFINEMENTS ===== */
.nav{left:0;right:0;top:0;border-radius:0;border-left:0;border-right:0;border-top:0;padding-left:28px;padding-right:28px}
.hero{background:var(--bg);isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,240,230,.97) 0%,rgba(244,240,230,.86) 38%,rgba(244,240,230,.45) 70%,rgba(244,240,230,.72) 100%),url('assets/website/photography_and_backgrounds/03_African_City_Skyline.jpg') center/cover no-repeat;opacity:.92;z-index:-3}
.hero:after{content:"";position:absolute;width:58vw;height:72vh;right:-12vw;bottom:-22vh;background:linear-gradient(135deg,rgba(11,143,104,.08),rgba(217,154,37,.12)),url('assets/website/photography_and_backgrounds/46_Sunset_Savanna.jpg') center/cover;border-radius:50% 0 0 0;opacity:.26;filter:saturate(.85);z-index:-2;mix-blend-mode:multiply}
.night .hero:before{background:linear-gradient(90deg,rgba(9,20,29,.94),rgba(9,20,29,.78) 45%,rgba(9,20,29,.42)),url('assets/website/photography_and_backgrounds/03_African_City_Skyline.jpg') center/cover no-repeat;opacity:.9}
.night .hero:after{opacity:.22;mix-blend-mode:screen}
.voice-hero{width:100%;max-width:390px;justify-self:end;padding:0;border-radius:42px;background:rgba(255,255,255,.72);box-shadow:0 35px 90px rgba(11,31,58,.18);border:1px solid rgba(255,255,255,.8);overflow:hidden}
.voice-livebar{height:52px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.76);color:var(--ink);font-size:9px;letter-spacing:.16em;font-weight:800}
.voice-livebar span{color:var(--gold)}
.voice-livebar b{font-size:8px;color:var(--muted);display:flex;gap:7px;align-items:center}
.voice-livebar i{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 5px rgba(11,143,104,.12);animation:pulse 2s infinite}
.phone-frame{width:min(100%,360px);height:650px;margin:0 auto 14px;border-radius:34px;background:#09141D;padding:8px;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 55px rgba(11,31,58,.26)}
.phone-frame:before{content:"";position:absolute;left:0;right:0;top:11px;text-align:center;color:#F4F0E6;font:500 10px/1 "DM Sans",sans-serif;letter-spacing:.22em;z-index:3;pointer-events:none}
.phone-speaker{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:66px;height:5px;border-radius:999px;background:rgba(255,255,255,.18);z-index:4}
.phone-frame iframe{display:block;width:100%;height:100%;border:0;border-radius:28px;background:#09141D}
.night .voice-hero{background:rgba(10,22,29,.72);border-color:rgba(255,255,255,.12)}
.night .voice-livebar{background:rgba(10,22,29,.86);color:#fff}

/* Interactive Africa map: countries stay as the actual boundary polygons; labels are removed to prevent collisions. */
.map-art{animation:mapFloat 7s ease-in-out infinite;transition:filter .4s,transform .4s}
.map-art svg{display:block;width:100%;height:auto;overflow:visible}
.map-art svg .country-label{display:none}
.map-art svg path[id]{cursor:pointer;transition:filter .35s,opacity .35s,transform .35s;transform-box:fill-box;transform-origin:center}
.map-art svg path[id]:hover,.map-art svg path[id].active{filter:url(#glow);opacity:1;stroke:#fff;stroke-width:3.4}
.map-art svg path[id].active{animation:countryPulse 2.8s ease-in-out infinite}
.map-art svg g:has(circle){animation:islandFloat 4.5s ease-in-out infinite}
.map-tooltip{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;padding:10px 14px;border-radius:999px;background:rgba(11,31,58,.9);color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 15px 30px rgba(11,31,58,.2);transition:.25s;z-index:5}
.map-tooltip.show{opacity:1;transform:translateX(-50%) translateY(0)}
.map-stats{bottom:25px}
.map-stat{box-shadow:0 8px 24px rgba(11,31,58,.06)}

/* AI in Action modal triggers */
.action-card .link{border:0;background:none;padding:0;text-align:left;cursor:pointer;font:700 12px/1 "DM Sans",sans-serif}
.action-card .link:hover{color:var(--gold);transform:translateX(3px)}
.experience-modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:20px}
.experience-modal.open{display:flex;animation:modalIn .35s ease both}
.experience-backdrop{position:absolute;inset:0;background:rgba(4,13,20,.74);backdrop-filter:blur(18px)}

/* CHANGED: height caps to the viewport (minus the modal's own padding) */
.experience-card{position:relative;z-index:1;width:min(1080px,100%);min-height:min(540px,80vh);max-height:min(90vh,calc(100vh - 40px));display:grid;grid-template-columns:.82fr 1.18fr;background:#0A151E;border:1px solid rgba(255,255,255,.16);border-radius:34px;overflow:hidden;box-shadow:0 45px 120px rgba(0,0,0,.45);color:#fff}

.experience-close{position:absolute;right:24px;top:22px;z-index:4;border:1px solid rgba(255,255,255,.28);background:rgba(9,20,29,.56);color:#fff;border-radius:999px;padding:11px 15px;cursor:pointer;font-weight:700}

/* CHANGED: min-height:0 lets the image stretch to the card instead of forcing a fixed height */
.experience-media{position:relative;overflow:hidden;min-height:0;background:#0A2232}
.experience-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(1.05)}
.experience-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,14,22,.18) 55%,rgba(4,14,22,.9) 100%)}
.experience-media-copy{position:absolute;left:34px;right:28px;bottom:32px;z-index:2}.experience-media-copy span{font-size:9px;letter-spacing:.18em;color:#F1C96A;font-weight:800}.experience-media-copy h3{font:600 42px/1 "Playfair Display",serif;margin:11px 0 8px}.experience-media-copy p{font-size:17px;margin:0;color:#F7F1E5}

/* CHANGED: THE FIX — the content column is its own scroll area (needs its own max-height) */
.experience-content{padding:56px 56px 44px;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;min-height:0;max-height:min(90vh,calc(100vh - 40px))}
.experience-content::-webkit-scrollbar{width:8px}.experience-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}

/* CHANGED: flex:0 0 auto keeps each block full-size so the column scrolls instead of squashing them */
.experience-content .eyebrow{color:#F1C96A;flex:0 0 auto}
.experience-content h2{font-size:clamp(38px,4.4vw,66px);line-height:.95;letter-spacing:-.05em;margin:14px 0 20px;color:#FFF7E8;flex:0 0 auto}
.experience-content>p{color:#D4DEE2;font-size:16px;line-height:1.8;max-width:610px;margin:0 0 22px;flex:0 0 auto}
.experience-points{display:grid;gap:9px;margin:0 0 24px;flex:0 0 auto}.experience-point{border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:13px 15px;color:#F6F1E7;font-size:12px;font-weight:600;display:flex;align-items:center;gap:10px}.experience-point:before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#3DE4AE;box-shadow:0 0 0 5px rgba(61,228,174,.1)}
.experience-content .primary{align-self:flex-start;background:#3DE4AE;color:#062117;padding:13px 19px;flex:0 0 auto}

/* phones: stack the two columns and let the whole thing scroll */
@media(max-width:820px){
  .experience-card{grid-template-columns:1fr}
  .experience-media{min-height:200px;max-height:30vh}
  .experience-content{padding:36px 22px 30px}
}
/* The Signal — continuous rolling topic rail */
.signal-tabs{overflow:hidden;padding:19px 0;margin-bottom:28px;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.signal-track{display:flex;width:max-content;gap:44px;animation:signalRoll 28s linear infinite;will-change:transform}
.signal-tabs span{display:flex;align-items:center;gap:10px;color:#D7DEE2;font-size:10px;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.signal-tabs span:after{content:"✦";color:var(--gold);margin-left:0}
.signal-tabs:hover .signal-track{animation-play-state:paused}
@keyframes signalRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes countryPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(61,228,174,0))}50%{filter:drop-shadow(0 0 12px rgba(61,228,174,.65))}}
@keyframes islandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes modalIn{from{opacity:0}to{opacity:1}}

@media(max-width:1100px){.nav{padding-left:18px;padding-right:18px}.voice-hero{justify-self:center}.phone-frame{height:620px}.experience-card{grid-template-columns:1fr;max-height:92vh;overflow:auto}.experience-media{min-height:330px;height:330px}.experience-content{padding:44px 34px}.experience-content h2{font-size:54px}}
@media(max-width:680px){.nav{height:62px;padding-left:12px;padding-right:12px}.hero:before{background:linear-gradient(180deg,rgba(244,240,230,.96),rgba(244,240,230,.82)),url('assets/website/photography_and_backgrounds/03_African_City_Skyline.jpg') center/cover no-repeat}.hero:after{width:100%;height:45%;right:-15%;bottom:-8%;opacity:.16}.voice-hero{max-width:350px}.phone-frame{height:560px}.map-tooltip{bottom:72px}.experience-modal{padding:12px}.experience-card{border-radius:24px}.experience-media{min-height:290px;height:290px}.experience-media-copy{left:22px;bottom:22px}.experience-media-copy h3{font-size:34px}.experience-content{padding:34px 24px}.experience-content h2{font-size:44px}.experience-close{right:15px;top:15px}.signal-track{gap:30px}}
body.modal-lock{overflow:hidden}
/* Intelligence Layer — five readable right-side callouts aligned with the five physical layers. */
.intel-callouts{position:absolute;right:1%;top:0;bottom:0;width:255px;z-index:10;pointer-events:none}
.callout{position:absolute;right:0;width:225px;padding-left:24px;color:#DCEAFF;font-size:9px;letter-spacing:.16em;line-height:1.55;text-transform:uppercase}
.callout:before{content:"";position:absolute;left:0;top:8px;width:17px;height:1px;background:currentColor;box-shadow:0 0 8px currentColor}
.callout:after{content:"";position:absolute;left:17px;top:7px;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.callout b{display:block;font-size:10px;letter-spacing:.2em;color:#fff;margin-bottom:3px}.callout span{display:block;color:#BFD0DC}
.c1{top:20%}.c2{top:33%}.c3{top:46%}.c4{top:59%}.c5{top:72%}
@media(max-width:1100px){.intel-callouts{right:-2%;transform:scale(.9);transform-origin:right center}}
@media(max-width:680px){.intel-callouts{display:none}}

/* ===== REQUESTED FINAL CORRECTIONS ===== */

/* Full-bleed navigation: no side gutters. */
.nav{top:0;left:0;right:0;border-radius:0;border-left:0;border-right:0;min-height:72px}

/* =========================================================
   HERO — DYNAMIC IMAGE SLIDESHOW
   Makes the JS-built .hero-slideshow / .hero-slide render.
   Same ivory-washed look as before — it just crossfades now.
   ========================================================= */

.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.6s ease-in-out;
  will-change:opacity, transform;
}

.hero-slide.active{
  opacity:1;
  animation:heroSlideKenBurns 9s ease-in-out forwards;
}

.hero-slideshow::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(244,240,230,.90) 0%,
    rgba(244,240,230,.66) 25%,
    rgba(244,240,230,.25) 55%,
    rgba(244,240,230,.05) 100%
  );
}

.night .hero-slideshow::after{
  background:linear-gradient(
    90deg,
    rgba(9,20,29,.94) 0%,
    rgba(9,20,29,.78) 45%,
    rgba(9,20,29,.42) 100%
  );
}

@keyframes heroSlideKenBurns{
  0%{   transform:scale(1.04) translate3d(0,0,0); }
  100%{ transform:scale(1.12) translate3d(-1.6%,-1.2%,0); }
}

@media(max-width:680px){
  .hero-slideshow::after{
    background:linear-gradient(180deg,rgba(244,240,230,.90),rgba(244,240,230,.72));
  }
  .night .hero-slideshow::after{
    background:linear-gradient(180deg,rgba(9,20,29,.92),rgba(9,20,29,.80));
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-slide.active{ animation:none; transform:none; }
  .hero-slide{ transform:none; }
}


/* ---------------------------------------------------------
   CONTENT ALWAYS STAYS ABOVE IMAGE
   --------------------------------------------------------- */

.hero-grid{
  position:relative;
  z-index:5;
}

.hero h1{
  max-width:760px;
  text-wrap:balance;
}

.hero-copy{
  max-width:650px;
}


/* ---------------------------------------------------------
   VOICE AI CARD
   --------------------------------------------------------- */

.voice-hero{
  position:relative;
  z-index:10;

  max-width:350px;
  border-radius:38px;
  padding:0;

  background:rgba(255,255,255,.84);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,.72);

  box-shadow:
    0 40px 100px rgba(11,31,58,.20),
    0 10px 30px rgba(11,31,58,.08);
}

.voice-livebar{
  height:48px;
  padding:0 17px;
}

.phone-frame{
  width:320px;
  height:620px;
  border-radius:36px;
  padding:7px;
  margin-bottom:10px;
}

.phone-frame iframe{
  border-radius:30px;
}

.phone-frame:before{
  font-size:9px;
  top:10px;
}

.phone-speaker{
  width:58px;
  height:4px;
}


/* =========================================================
   CINEMATIC ANIMATIONS
   ========================================================= */

/* Main background slowly moves and breathes */
@keyframes heroBackground{

  0%{
    background-position:48% 50%;
    background-size:105%;
  }

  50%{
    background-position:53% 48%;
    background-size:110%;
  }

  100%{
    background-position:58% 52%;
    background-size:106%;
  }
}


/* Main art/culture image */
@keyframes heroImageOne{

  0%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50%{
    transform:
      translate3d(-1.5%, -1%, 0)
      scale(1.035);
  }

  100%{
    transform:
      translate3d(1%, -2%, 0)
      scale(1.07);
  }
}


/* Secondary African landscape */
@keyframes heroImageTwo{

  0%{
    transform:
      translate3d(2%,2%,0)
      scale(1);
  }

  50%{
    transform:
      translate3d(-1%,-1%,0)
      scale(1.045);
  }

  100%{
    transform:
      translate3d(-4%,-3%,0)
      scale(1.09);
  }
}


/* ---------------------------------------------------------
   SUBTLE LIGHT MOVEMENT
   --------------------------------------------------------- */

.hero::marker{
  display:none;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:1100px){

  .hero{
    min-height:auto;
    padding-top:110px;
  }

  .hero::after{
    width:90vw;
    height:65vh;
    right:-28vw;
    bottom:-12vh;
    opacity:.30;
  }

  .voice-hero{
    max-width:330px;
  }

}


@media(max-width:680px){

  .hero{
    padding-top:100px;

    background-position:
      58% center;
  }

  .hero::before{
    background:
      linear-gradient(
        90deg,
        rgba(244,240,230,.88),
        rgba(244,240,230,.55)
      ),
      url('/assets/art-and-craft.PNG')
      center/cover no-repeat;

    opacity:.78;
  }

  .hero::after{
    width:120vw;
    height:55vh;
    right:-45vw;
    bottom:-8vh;
    opacity:.24;
  }

}

/* Landscape: keep the true country polygons; animate the countries themselves rather than floating markers. */
.landscape{background:linear-gradient(180deg,#F7F3EA 0%,#ECE5D7 100%)}
.map-shell{min-height:760px}
.map-stage{background:radial-gradient(circle at 48% 46%,rgba(11,143,104,.13),transparent 48%),radial-gradient(circle at 75% 20%,rgba(217,154,37,.08),transparent 34%),var(--paper-2)}
.map-stage:before{content:"";position:absolute;inset:8% 10%;border:1px solid rgba(11,143,104,.10);border-radius:50%;box-shadow:0 0 0 32px rgba(11,143,104,.018),0 0 0 64px rgba(11,143,104,.012);animation:mapHalo 8s ease-in-out infinite}
.map-art{width:min(100%,940px);animation:mapFloat 8s ease-in-out infinite}
.map-art svg{filter:drop-shadow(0 28px 35px rgba(11,31,58,.12))}
.map-art svg path[id]{animation:countryBreath 7.5s ease-in-out infinite;animation-delay:var(--country-delay,0s)}
.map-art svg path[id]:hover,.map-art svg path[id].active{filter:url(#glow);stroke:#fff;stroke-width:3.6;transform:scale(1.008)}
.map-art svg g:has(circle){animation:islandFloat 5s ease-in-out infinite}
.map-art svg .country-label{display:none}
.map-tooltip{bottom:78px}
@keyframes countryBreath{0%,100%{opacity:.92}50%{opacity:1}}
@keyframes mapHalo{0%,100%{transform:scale(.98);opacity:.55}50%{transform:scale(1.03);opacity:1}}

/* AI in Action: 2-column editorial cards, matching the supplied reference treatment. */
#action .section-head{margin-bottom:44px}
.action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.action-card{min-height:560px;border-radius:30px;background:#071521;color:#fff;border-color:rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(11,31,58,.14)}
.action-card:hover{transform:translateY(-9px) scale(1.004)}
.action-card img{height:100%;min-height:560px;position:absolute;inset:0;object-fit:cover;transition:transform .8s ease,filter .6s ease}
.action-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,13,20,.02) 18%,rgba(4,13,20,.16) 42%,rgba(4,13,20,.88) 100%);z-index:1}
.action-card .body{position:absolute;inset:auto 0 0 0;padding:30px 30px 28px;z-index:2}
.action-card h3{font-size:clamp(28px,3vw,44px);max-width:680px;color:#FFF7E8;margin-bottom:10px}
.action-card p{color:#EEF2F0;max-width:700px;font-size:14px}
.action-card .link{position:static;margin-top:18px;color:#56E7B5;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.action-card:hover img{transform:scale(1.055);filter:saturate(1.08)}

/* Experience modal: polished, readable and intentionally immersive. */
.experience-card{width:min(1160px,100%);min-height:650px;grid-template-columns:.84fr 1.16fr;border-radius:32px}
.experience-media{min-height:650px}
.experience-content{padding:74px 62px 54px}
.experience-content h2{max-width:680px}
.experience-point{min-height:45px;background:rgba(255,255,255,.025);transition:transform .25s,border-color .25s,background .25s}
.experience-point:hover{transform:translateX(4px);border-color:rgba(61,228,174,.45);background:rgba(61,228,174,.05)}

/* Intelligence Layer: clearer physical stack + readable callouts, inspired by the supplied 3D reference. */
.intelligence{background:radial-gradient(circle at 50% 15%,#12335A 0%,#0B1F3A 48%,#06121F 100%)}
.intel-stage{height:790px;padding-bottom:20px;align-items:flex-end}
.intel-backdrop{background:radial-gradient(circle at 50% 12%,rgba(99,191,255,.24),transparent 30%),radial-gradient(circle at 50% 82%,rgba(11,143,104,.26),transparent 42%)}
.intel-arc{width:116%;height:78%;left:-8%;top:8%;border-color:rgba(127,211,255,.18);box-shadow:0 0 90px rgba(61,176,255,.08) inset}
.sphere{top:5px;width:210px;height:210px;background:radial-gradient(circle at 33% 24%,#F8F2D8 0%,#9ED3FF 18%,#2B68B7 45%,#0D315C 70%,#061321 100%);box-shadow:0 0 85px rgba(82,189,255,.68),inset -26px -24px 54px rgba(0,0,0,.36);animation:sphereHover 5s ease-in-out infinite}
.sphere:before{inset:-14px;border:2px solid rgba(202,238,255,.76)}
.sphere:after{content:"";position:absolute;inset:-42px;border:1px solid rgba(105,205,255,.18);border-radius:50%;box-shadow:0 0 35px rgba(74,181,255,.12)}
.sphere span{font-size:17px}
.layer{width:690px;height:100px;border-radius:50%;transform:perspective(900px) rotateX(63deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -10px 24px rgba(0,0,0,.15),0 22px 48px rgba(0,0,0,.24);animation:layerFloat 5.5s ease-in-out infinite}
.layer strong{font-size:14px;letter-spacing:.22em;transform:rotateX(-63deg);color:#fff}
.layer small{font-size:8px;letter-spacing:.17em;text-transform:uppercase;transform:rotateX(-63deg);color:#DCEBFF;margin-top:5px;white-space:nowrap}
.layer-icon{font-size:20px;line-height:1;transform:rotateX(-63deg);color:#fff;margin-bottom:4px;text-shadow:0 0 16px rgba(255,255,255,.6)}
.l1{bottom:470px;background:linear-gradient(180deg,rgba(108,211,255,.30),rgba(108,211,255,.07));border-color:rgba(108,211,255,.62)}
.l2{bottom:380px;background:linear-gradient(180deg,rgba(166,106,255,.31),rgba(166,106,255,.07));border-color:rgba(197,147,255,.66)}
.l3{bottom:290px;background:linear-gradient(180deg,rgba(35,225,212,.30),rgba(35,225,212,.07));border-color:rgba(73,239,228,.64)}
.l4{bottom:200px;background:linear-gradient(180deg,rgba(242,190,86,.31),rgba(242,190,86,.07));border-color:rgba(255,215,125,.67)}
.l5{bottom:110px;background:linear-gradient(180deg,rgba(139,164,190,.28),rgba(139,164,190,.07));border-color:rgba(205,222,239,.58)}
.intel-callouts{right:0;width:290px}
.callout{width:250px;padding-left:31px;font-size:9px;line-height:1.5}
.callout:before{width:22px}
.callout:after{left:22px}
.callout b{font-size:10px;letter-spacing:.22em}
.c1{top:31%}.c2{top:42%}.c3{top:53%}.c4{top:64%}.c5{top:75%}
@keyframes sphereHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* The Signal: rolling topic rail with the requested seven subjects only. */
.signal-tabs{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);margin:18px 0 28px;padding:15px 0}
.signal-track{animation:signalRoll 24s linear infinite}
.signal-tabs span{font-size:10px;letter-spacing:.17em}

@media(max-width:1100px){
 .hero-grid{grid-template-columns:1fr 1fr;gap:35px}
 .voice-hero{max-width:330px}
 .phone-frame{width:300px;height:600px}
 .action-grid{grid-template-columns:1fr 1fr}
 .layer{width:570px}
 .intel-callouts{right:-8%;transform:scale(.84)}
}
@media(max-width:680px){
 .nav{min-height:62px}
 .hero{padding-top:100px}
 .hero:before{background:linear-gradient(180deg,rgba(244,240,230,.90),rgba(244,240,230,.72)),url('assets/website/photography_and_backgrounds/03_African_City_Skyline.jpg') center/cover no-repeat}
 .hero-grid{grid-template-columns:1fr;gap:30px}
 .hero h1{font-size:clamp(54px,15vw,78px)}
 .voice-hero{max-width:330px;justify-self:center}
 .phone-frame{width:300px;height:570px}
 .action-grid{grid-template-columns:1fr}
 .action-card,.action-card img{min-height:500px;height:500px}
 .action-card .body{padding:24px}
 .action-card h3{font-size:31px}
 .intel-stage{height:670px}
 .layer{width:390px;height:76px}
 .l1{bottom:400px}.l2{bottom:330px}.l3{bottom:260px}.l4{bottom:190px}.l5{bottom:120px}
 .layer strong{font-size:10px}.layer small{font-size:6.5px}.layer-icon{font-size:14px}
 .sphere{width:155px;height:155px}.sphere span{font-size:12px}.sphere small{font-size:6px}
 .intel-callouts{display:none}
 .signal-track{gap:28px}
}

/* =========================================================
   FINAL REQUEST — FLAG-FIRST AFRICA MAP
   Flags sit directly on the country shapes, with no white
   label cards. The active country receives a floating popup.
   ========================================================= */
.map-art svg .country-label{display:block!important;pointer-events:none}
.map-art svg .country-label rect{display:none!important}
.map-art svg .country-label text{display:none!important}
.map-art svg .country-label text:first-of-type{display:block!important;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:25px!important;font-weight:400!important;fill:#fff!important;stroke:none!important;paint-order:normal;filter:drop-shadow(0 2px 5px rgba(11,31,58,.34))}
.map-art svg .country-label{opacity:.94;transition:opacity .25s,transform .25s}
.map-art svg .country-label:hover{opacity:1}
.map-art svg .island-marker circle{display:none!important}
.map-art svg .island-marker text{display:none!important}
.map-art svg .island-marker text:first-of-type{display:block!important;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:25px!important;fill:#fff!important;stroke:none!important;filter:drop-shadow(0 2px 5px rgba(11,31,58,.34))}
.map-art svg .island-marker{pointer-events:auto;cursor:pointer}
.country-popup{position:absolute;left:50%;top:50%;width:228px;min-height:84px;display:flex;align-items:center;gap:14px;padding:15px 17px;border:1px solid rgba(255,255,255,.62);border-radius:20px;background:rgba(11,31,58,.88);color:#fff;backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(11,31,58,.24),0 0 0 1px rgba(11,143,104,.08);opacity:0;transform:translate(-50%,-118%) scale(.94);pointer-events:none;transition:opacity .28s ease,transform .28s ease;z-index:8}
.country-popup:after{content:"";position:absolute;left:50%;bottom:-7px;width:13px;height:13px;background:rgba(11,31,58,.88);border-right:1px solid rgba(255,255,255,.42);border-bottom:1px solid rgba(255,255,255,.42);transform:translateX(-50%) rotate(45deg)}
.country-popup.show{opacity:1;transform:translate(-50%,-118%) scale(1)}
.country-popup-flag{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:34px;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.28));flex:0 0 auto}
.country-popup-kicker{font-size:7px;letter-spacing:.19em;text-transform:uppercase;color:#7DE2C0;font-weight:800;margin-bottom:5px}
.country-popup-name{font:600 21px/1 "Playfair Display",serif;color:#FFF8EA;letter-spacing:-.02em}
.country-popup-meta{font-size:8px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;color:#C9D7DE;margin-top:7px}
.map-art svg path[id].active{stroke:#fff!important;stroke-width:4!important;filter:drop-shadow(0 0 12px rgba(61,228,174,.78))!important}

/* =========================================================
   FINAL REQUEST — NEW INTELLIGENCE ARCHITECTURE
   Completely replaces the tilted/stacked ellipse treatment
   with a readable intelligence system: core + five layers.
   ========================================================= */
.intelligence{background:radial-gradient(circle at 22% 38%,rgba(35,126,187,.20),transparent 32%),radial-gradient(circle at 78% 70%,rgba(11,143,104,.16),transparent 34%),linear-gradient(135deg,#071A2D 0%,#0B1F3A 48%,#06121F 100%);color:#fff;overflow:hidden}
.intelligence .section-head{position:relative;z-index:3}
.intelligence .section-head p{color:#C4D1D9}
.intelligence-system{position:relative;min-height:690px;display:grid;grid-template-columns:.88fr 1.12fr;gap:58px;align-items:center;padding:45px 30px 40px;border:1px solid rgba(255,255,255,.12);border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 35px 100px rgba(0,0,0,.24);overflow:hidden}
.intelligence-system:before{content:"";position:absolute;width:560px;height:560px;left:-170px;top:60px;border-radius:50%;background:radial-gradient(circle,rgba(61,190,255,.14),transparent 66%);filter:blur(4px)}
.intelligence-system:after{content:"CONTEXTUAL INTELLIGENCE";position:absolute;right:32px;top:25px;font-size:8px;letter-spacing:.26em;color:rgba(218,235,245,.45);font-weight:800}
.intelligence-core{position:relative;min-height:570px;display:flex;align-items:center;justify-content:center;z-index:2}
.core-glow{position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(65,190,255,.32),rgba(37,107,191,.14) 45%,transparent 72%);filter:blur(18px);animation:corePulse 5s ease-in-out infinite}
.core-sphere{position:relative;width:238px;height:238px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 33% 25%,#F7F0D7 0%,#9CD5FF 14%,#3E82D1 40%,#153F76 68%,#061323 100%);border:1px solid rgba(255,255,255,.78);box-shadow:0 0 0 10px rgba(255,255,255,.045),0 0 0 22px rgba(91,194,255,.10),0 0 90px rgba(76,183,255,.48),inset -28px -24px 55px rgba(0,0,0,.36);z-index:3;animation:coreFloat 5.5s ease-in-out infinite}
.core-sphere:before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(133,224,255,.7);box-shadow:0 0 22px rgba(89,205,255,.35)}
.core-sphere:after{content:"";position:absolute;inset:-47px;border-radius:50%;border:1px solid rgba(126,214,255,.14);border-top-color:rgba(126,214,255,.48);transform:rotate(18deg);animation:coreRing 12s linear infinite}
.core-sphere span{font-size:18px;letter-spacing:.19em;font-weight:800}
.core-sphere small{font-size:7px;letter-spacing:.22em;color:#E2F0FF;margin-top:11px}
.core-orbit{position:absolute;border:1px solid rgba(127,214,255,.18);border-radius:50%;width:420px;height:150px;transform:rotate(-22deg);animation:coreOrbit 14s linear infinite}
.core-orbit.orbit-b{width:470px;height:180px;transform:rotate(35deg);animation-duration:18s;animation-direction:reverse;border-color:rgba(61,228,174,.13)}
.core-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;display:grid;gap:8px;z-index:4}
.core-caption span{font-size:8px;letter-spacing:.22em;color:#6ED8C0;font-weight:800}
.core-caption b{font-size:13px;line-height:1.45;color:#D8E6ED;font-weight:500;max-width:330px;margin:auto}
.intelligence-stack{position:relative;z-index:3;display:grid;gap:12px;padding:28px 0 20px}
.intelligence-card{position:relative;display:grid;grid-template-columns:45px 42px 1fr 54px;align-items:center;gap:14px;min-height:96px;padding:15px 18px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:linear-gradient(110deg,rgba(255,255,255,.105),rgba(255,255,255,.025));backdrop-filter:blur(15px);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 35px rgba(0,0,0,.13);overflow:hidden;transition:transform .35s ease,border-color .35s ease,background .35s ease}
.intelligence-card:before{content:"";position:absolute;inset:0;opacity:.28;background:linear-gradient(100deg,var(--card-accent),transparent 48%);pointer-events:none}
.intelligence-card:hover{transform:translateX(-8px);border-color:rgba(255,255,255,.38);background:linear-gradient(110deg,rgba(255,255,255,.15),rgba(255,255,255,.035))}
.intel-number{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.46);font-weight:800}
.intel-symbol{position:relative;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:18px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:0 0 24px color-mix(in srgb,var(--card-accent) 25%,transparent)}
.intel-copy h3{margin:0;font-size:15px;letter-spacing:.16em;font-weight:800;color:#fff}
.intel-copy p{margin:5px 0 0;font-size:10px;letter-spacing:.08em;color:#D5E2E9;text-transform:uppercase}
.intel-copy span{display:block;margin-top:6px;font-size:9px;color:#8EA8B7}
.intel-line{width:42px;height:2px;border-radius:99px;background:var(--card-accent);box-shadow:0 0 14px var(--card-accent);justify-self:end}
.card-language{--card-accent:#69D3FF}.card-culture{--card-accent:#B68AFF}.card-data{--card-accent:#31E0D0}.card-knowledge{--card-accent:#F3C86C}.card-expertise{--card-accent:#AFC7E2}
@keyframes corePulse{0%,100%{transform:scale(.94);opacity:.78}50%{transform:scale(1.05);opacity:1}}
@keyframes coreFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes coreRing{to{transform:rotate(378deg)}}
@keyframes coreOrbit{to{transform:rotate(338deg)}}

@media(max-width:1100px){
 .country-popup{width:205px}
 .intelligence-system{grid-template-columns:1fr;gap:15px;padding:55px 28px 35px}
 .intelligence-core{min-height:410px}
 .core-caption{bottom:6px}
 .intelligence-stack{padding:0 10px}
}
@media(max-width:680px){
 .map-art svg .country-label text:first-of-type,.map-art svg .island-marker text:first-of-type{font-size:19px!important}
 .country-popup{width:190px;min-height:72px;padding:11px 13px;gap:10px;border-radius:16px}
 .country-popup-flag{font-size:27px}.country-popup-name{font-size:17px}.country-popup-meta{font-size:7px}
 .intelligence-system{min-height:0;padding:35px 15px 25px;border-radius:28px}
 .intelligence-core{min-height:360px}
 .core-sphere{width:185px;height:185px}.core-sphere span{font-size:14px}.core-sphere small{font-size:6px}
 .core-orbit{width:310px;height:115px}.core-orbit.orbit-b{width:340px;height:130px}
 .core-caption b{font-size:11px;max-width:270px}
 .intelligence-stack{gap:9px;padding:0}
 .intelligence-card{grid-template-columns:32px 38px 1fr 30px;gap:9px;min-height:83px;padding:12px 10px;border-radius:17px}
 .intel-number{font-size:8px}.intel-symbol{width:34px;height:34px;border-radius:10px;font-size:15px}.intel-copy h3{font-size:11px}.intel-copy p{font-size:8px;line-height:1.35}.intel-copy span{font-size:8px;margin-top:4px}.intel-line{width:22px}
}

/* ============================================================
   RESPONSIVE ADDENDUM  —  AI IN AFRICA
   Add this LAST (after styles.css / at the very end of it).
   Your CSS already stacks most grids at 1100px & 680px — this
   only fills the gaps: a working mobile menu, tablet hero,
   small-phone tuning, and safety fixes.
   ============================================================ */

/* ---- safety: fluid media + comfortable tap targets ---- */
img,svg,video,iframe{max-width:100%}
button,.pill,.navlinks a{-webkit-tap-highlight-color:transparent}

/* =====================================================
   1) MOBILE NAV MENU  — makes the ☰ hamburger work
   (needs the tiny script in mobile-menu.js)
   ===================================================== */
@media(max-width:1100px){
  .nav .hamb{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;font-size:18px;line-height:1;border-radius:13px}

  /* turn the hidden link list into a dropdown panel */
  .nav .navlinks{
    display:flex;                       /* overrides the base display:none */
    position:fixed; left:10px; right:10px; top:calc(100% + 8px);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:12px; margin:0;
    background:var(--bg);
    border:1px solid rgba(11,31,58,.12);
    border-radius:18px;
    box-shadow:0 26px 60px rgba(11,31,58,.16);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
  }
  .night .nav .navlinks{background:#0c1c26;border-color:rgba(255,255,255,.12)}
  .nav.menu-open .navlinks{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav .navlinks a{font-size:15px;font-weight:600;color:var(--ink);padding:13px 12px;border-radius:10px}
  .nav .navlinks a:hover{background:rgba(11,31,58,.05)}
  .night .nav .navlinks a:hover{background:rgba(255,255,255,.06)}
}

/* =====================================================
   2) TABLET  — hero shouldn't be 2 columns on narrow tablets
   ===================================================== */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr !important; gap:36px}
  .voice-hero{justify-self:center !important; margin-left:auto; margin-right:auto}
}

/* =====================================================
   3) SMALL PHONES  ≤ 520px  — final tuning
   ===================================================== */
@media(max-width:520px){
  .container{width:calc(100% - 28px)}
  .section{padding:74px 0}

  /* type */
  .hero h1{font-size:clamp(44px,13.5vw,62px) !important}
  .section-head h2{font-size:clamp(34px,10vw,48px) !important}
  .approach-copy h2,.voice-copy h2{font-size:clamp(34px,10vw,50px) !important}

  /* hero actions full width, notes wrap */
  .hero-actions{flex-direction:column}
  .hero-actions .primary,.hero-actions .secondary{width:100%;text-align:center}
  .hero-note{flex-wrap:wrap;gap:12px}

  /* voice / phone frames fit the screen */
  .voice-hero{max-width:100% !important}
  .phone-frame{width:min(100%,300px) !important;height:auto !important;aspect-ratio:300/560}
  .phone-frame iframe{height:100% !important}
  .voice-frame iframe{height:440px !important}

  /* map */
  .map-panel{padding:24px}
  .map-panel h3{font-size:32px}
  .map-stage{min-height:420px;padding:8px}
  .map-stats{gap:6px}
  .map-stat{padding:9px 11px}

  /* action cards a touch shorter */
  .action-card,.action-card img{min-height:440px !important;height:440px !important}
  .action-card h3{font-size:27px}

  /* underneath / steps / signal already single-column at 680 */
  .under-card{padding:24px}
  .under-card h3{font-size:22px}

  /* footer */
  .footer-links{gap:12px}
}

/* =====================================================
   4) VERY SMALL  ≤ 360px  — avoid clipping
   ===================================================== */
@media(max-width:360px){
  .hero h1{font-size:40px !important}
  .nav .brand small{display:none}
  .nav-actions{gap:6px}
}
/* remove the white badge box behind the logo */
.brand img,
nav .brand img,
nav.navx .brand img{
  background:none !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}