.african-bg{
background:url('african-pattern.png') center/500px repeat;
position:relative;
}
.african-bg:before{
content:'';position:absolute;inset:0;background:rgba(250,247,242,.92);
}
.african-bg>*{position:relative;z-index:1}
.page-nav{background:#1a2744;padding:15px}
.page-nav a{color:#fff;text-decoration:none;margin-right:15px}
.footer-pro{background:#0f1a30;color:#fff;padding:30px;text-align:center}

/* Focus Cards with Images */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 60px auto 0;
}

.focus-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(26,39,68,0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.focus-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 50px rgba(15,122,107,0.15);
}

.focus-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--gold);
  color: #1a2744;
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 2;
}

.focus-image {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.focus-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.focus-card:hover .focus-image img {
  transform: scale(1.08);
}

.focus-card h3 {
  padding: 0 24px;
  margin: 24px 0 12px;
  color: var(--navy);
  font-size: 1.35rem;
}

.focus-card p {
  padding: 0 24px 28px;
  color: var(--text-mid);
  font-size: 15.2px;
  line-height: 1.65;
  flex-grow: 1;
}

.bg-primary,.bg-success,[style*="background:#2"],[style*="background-color:#2"]{color:#fff!important}
.bg-primary *,.bg-success *{color:#fff!important}
.stories-preview,.stories-preview *{color:#222!important}

/* ── Shared site chrome (nav / footer / cookie banner) ── */
.site-nav{background:#1a2744;padding:18px 40px;color:#fff;position:fixed;width:100%;z-index:100;top:0;}
.site-nav .nav-inner{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.site-nav .brand{color:#fff;text-decoration:none;font-weight:700;}
.site-nav .nav-links a{color:#fff;margin-right:25px;text-decoration:none;font-weight:500;}
.site-nav .nav-links a:last-child{margin-right:0;}
.site-nav .nav-links a.active{font-weight:700;}

.site-footer{background:#0f1a30;color:#ddd;padding:50px 40px;text-align:center;font-size:0.95rem;}
.site-footer a{color:#9fb3d9;font-size:13px;}

.cookie-banner{display:none;position:fixed;left:0;right:0;bottom:0;z-index:300;background:#1a2744;color:#fff;padding:20px 24px;box-shadow:0 -4px 16px rgba(0,0,0,0.15);}
.cookie-banner .cookie-inner{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;}
.cookie-banner p{margin:0;font-size:14px;line-height:1.5;flex:1;min-width:240px;}
.cookie-banner a{color:#f5c055;text-decoration:underline;}
.cookie-banner .cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.btn-cookie-accept{background:#e8a020;color:#1a1a1a;border:none;padding:10px 22px;border-radius:6px;font-weight:600;cursor:pointer;}
.btn-cookie-decline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.4);padding:10px 22px;border-radius:6px;font-weight:600;cursor:pointer;}