:root { --navy:#071428; --gold:#c9a227; --nav-bp:1200px; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:12px; top:12px; z-index:80; background:#fff; padding:8px 12px; }

#site-header { overflow: visible; }
.header-bar {
  width: min(80rem, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.brand-link { display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; }
.brand-tag { display:block; font-size:10px; line-height:1.25; letter-spacing:.12em; text-transform:uppercase; color:rgba(7,20,40,.6); margin-top:4px; }
.header-actions, .header-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.header-icon {
  height:40px; width:40px; border-radius:999px; border:1px solid rgba(7,20,40,.12);
  display:grid; place-items:center; background:#fff; color:#143056;
}
.header-icon:hover { border-color:rgba(201,162,39,.7); }
.header-icon .icon-close { display:none; }
#site-header.is-open .header-icon .icon-open { display:none; }
#site-header.is-open .header-icon .icon-close { display:block; }
.nav-drawer-actions { display:none; }

button.nav-link { background:none; border:0; font:inherit; cursor:pointer; }
.nav-link { padding:8px 12px; border-radius:999px; color:#143056; text-decoration:none; white-space:nowrap; }
.nav-link:hover, .nav-link.is-active { background:#f3ead3; color:#071428; }
.nav-caret::after { content:""; display:inline-block; margin-left:6px; border:4px solid transparent; border-top-color:currentColor; transform:translateY(2px); transition:transform .2s ease; }
.nav-drop.is-open .nav-caret::after { transform:rotate(180deg) translateY(1px); }

.nav-drop { position:static; }
.mega-menu {
  display:none; position:absolute; left:0; right:0; top:100%;
  width:100%; background:#fff; border-top:1px solid rgba(7,20,40,.08);
  box-shadow:0 28px 60px rgba(7,20,40,.14); z-index:45;
}
.mega-menu::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.mega-inner {
  width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:28px 0 32px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,280px); gap:36px; align-items:stretch;
}
.mega-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.mega-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#c9a227; font-weight:600; margin:0 0 10px; }
.mega-cols a { display:block; padding:9px 10px; margin-left:-10px; border-radius:10px; font-size:14px; color:#143056; text-decoration:none; }
.mega-cols a:hover { background:#f6ecd0; }
.mega-cta {
  background:linear-gradient(165deg,#071428 0%,#143056 70%,#1b3d68 100%);
  color:#fff; border-radius:20px; padding:24px 22px; display:flex; flex-direction:column; justify-content:center;
}
.mega-cta-kicker { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#e8c96a; margin:0 0 8px; }
.mega-cta h3 { font-family:"Cormorant Garamond",Georgia,serif; font-size:1.45rem; line-height:1.2; margin:0 0 8px; color:#fff; }
.mega-cta p { font-size:.86rem; color:rgba(255,255,255,.72); margin:0 0 16px; }
.mega-cta .btn-gold { align-self:flex-start; }

.btn-gold, .btn-navy, .btn-ghost, .btn-line {
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  padding:10px 18px; font-size:.875rem; font-weight:600; border:1px solid transparent; text-decoration:none; white-space:nowrap;
}
.btn-gold { background:linear-gradient(180deg,#e8c96a,#c9a227); color:#071428; box-shadow:0 10px 28px rgba(201,162,39,.28); }
.btn-navy { background:#071428; color:#fff; }
.btn-ghost { background:transparent; border-color:rgba(7,20,40,.18); color:#071428; }
.btn-line { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.kicker { color:#c9a227; letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; font-weight:600; }
.section-title { font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.15; color:#071428; }
.hero-pattern { background-image: radial-gradient(circle at 20% 20%, rgba(201,162,39,.10), transparent 26%), repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px); }
.hero-copy { text-shadow: 0 2px 18px rgba(5,13,28,.55); }
.africa-pattern { background-image: radial-gradient(circle at 80% 20%, rgba(201,162,39,.18), transparent 24%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 18px); }
.reveal { animation: rise .7s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:none;} }

/* Phone / tablet: accordion drawer with the same mega + CTA */
@media (max-width: 1199px) {
  .header-actions { display:none; }
  .brand-tag { display:none; }
  #site-nav {
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-top:1px solid rgba(7,20,40,.08);
    box-shadow:0 24px 50px rgba(7,20,40,.12);
    max-height:min(78vh, 760px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:8px 16px 20px; z-index:46; flex-direction:column; align-items:stretch; gap:2px;
  }
  #site-header.is-open #site-nav { display:flex; }
  body.nav-open { overflow:hidden; }
  .nav-drop { width:100%; }
  .nav-link { display:block; width:100%; text-align:left; border-radius:10px; padding:12px 12px; white-space:normal; }
  .mega-menu {
    position:static; width:auto; box-shadow:none; border:0; background:#f7f4ec;
    border-radius:16px; margin:0 0 8px;
  }
  .mega-menu::before { display:none; }
  .nav-drop.is-open .mega-menu { display:block; }
  .mega-inner { width:100%; padding:14px 14px 16px; grid-template-columns:1fr; gap:16px; }
  .mega-cols { grid-template-columns:1fr 1fr; gap:8px 16px; }
  .mega-cta { padding:18px 16px; border-radius:14px; }
  .mega-cta h3 { font-size:1.2rem; }
  .nav-drawer-actions {
    display:flex; gap:8px; flex-wrap:wrap; padding:12px 4px 4px;
  }
  .nav-drawer-actions .btn-gold,
  .nav-drawer-actions .btn-ghost,
  .nav-drawer-actions .btn-navy { flex:1 1 140px; }
}
@media (max-width: 640px) {
  .mega-cols { grid-template-columns:1fr; }
  .header-bar { width:calc(100% - 24px); }
}

/* Desktop: full-width mega, CTA on the right */
@media (min-width: 1200px) {
  .header-tools { display:none; }
  #site-nav {
    display:flex; align-items:center; justify-content:center; flex:1; min-width:0; gap:2px; position:static;
    background:transparent; border:0; box-shadow:none; max-height:none; overflow:visible; padding:0;
  }
  .nav-drop:hover .mega-menu,
  .nav-drop:focus-within .mega-menu { display:block; }
}
@media (min-width: 1200px) and (max-width: 1360px) {
  .nav-link { padding:8px 8px; }
  .brand-tag { display:none; }
  .mega-inner { grid-template-columns:minmax(0,1fr) 240px; gap:24px; }
}
@media (min-width: 1200px) and (hover: none) {
  .nav-drop:hover .mega-menu { display:none; }
  .nav-drop:focus-within .mega-menu,
  .nav-drop.is-open .mega-menu { display:block; }
}