/**
 * Africa Gateway — static pages (about, contact, clients, services, policy, terms, sitemap)
 */

body.ag-site:has(.ag-static) {
  background: var(--color-bg) !important;
}

/* Continent Edge — quieter page heroes */
body.ag-site .ag-static .hero-stats,
body.ag-site .ag-search .hero-stats,
body.ag-site .ag-hub .hero-stats,
body.ag-site .ag-funding .hero-stats {
  display: none !important;
}

/* ── Shared hero (pageBanner) ──────────────────────────────── */
body.ag-site .ag-static .hero {
  background: var(--color-primary-700) !important;
  border-bottom: none !important;
  padding: var(--space-6) var(--space-5) !important;
  position: relative;
  overflow: hidden;
}
body.ag-site .ag-static .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, var(--color-primary) 0%, transparent 60%);
  opacity: 0.45;
}
body.ag-site .ag-static .hero::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 167, 61, 0.18), transparent 70%);
  pointer-events: none;
}
body.ag-site .ag-static .hero-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
body.ag-site .ag-static .hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  padding: 0.4em 1em !important;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3) !important;
}
body.ag-site .ag-static .hero-badge-dot {
  background: var(--color-gold) !important;
}
body.ag-site .ag-static .hero h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important;
  font-weight: 600 !important;
  color: var(--color-cream-100) !important;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
body.ag-site .ag-static .hero h1 em,
body.ag-site .ag-static .hero h1 .accent {
  color: var(--color-gold) !important;
  font-style: italic;
}
body.ag-site .ag-static .hero-desc {
  font-size: 0.95rem !important;
  color: rgba(250, 246, 237, 0.82) !important;
  max-width: 62ch;
  line-height: 1.65;
  margin-bottom: var(--space-4) !important;
}
body.ag-site .ag-static .hero-desc strong {
  color: var(--color-gold) !important;
}
body.ag-site .ag-static .hero-stats {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
body.ag-site .ag-static .stat-num {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--color-gold) !important;
}
body.ag-site .ag-static .stat-label {
  font-size: 0.72rem;
  color: rgba(250, 246, 237, 0.65);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.ag-site .ag-static .hero-contact-pills .contact-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
body.ag-site .ag-static .hero-contact-pills .contact-pill:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ── About ───────────────────────────────────────────────── */
body.ag-site .ag-static.about-page {
  background: var(--color-bg) !important;
}
body.ag-site .ag-static .about-page-wrap {
  max-width: var(--content-width);
  padding: var(--space-5) var(--space-5) var(--space-7);
  gap: var(--space-5);
}
body.ag-site .ag-static .about-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}
body.ag-site .ag-static .about-card-header {
  background: var(--color-primary-700) !important;
  padding: var(--space-4) var(--space-5) !important;
}
body.ag-site .ag-static .about-card-header h2 {
  font-family: var(--font-display) !important;
  color: #fff !important;
}
body.ag-site .ag-static .about-card-icon {
  background: rgba(227, 167, 61, 0.2) !important;
}
body.ag-site .ag-static .about-card-icon svg,
body.ag-site .ag-static .about-stat-icon svg {
  color: var(--color-gold) !important;
}
body.ag-site .ag-static .about-card-body {
  background: var(--color-surface);
}
body.ag-site .ag-static .about-card-body h3,
body.ag-site .ag-static .about-card-body h3.accent {
  color: var(--color-primary-700) !important;
}
body.ag-site .ag-static .about-stat-tile {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-sm) !important;
}
body.ag-site .ag-static .about-feature-item {
  border-color: var(--color-line) !important;
  background: var(--color-bg) !important;
}
body.ag-site .ag-static .about-why-card {
  background: var(--color-card) !important;
  border-color: var(--color-line) !important;
}
body.ag-site .ag-static .about-cta-band {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary)) !important;
  border-radius: var(--radius-md) !important;
}
body.ag-site .ag-static .about-btn-orange {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
}
body.ag-site .ag-static .about-btn-light {
  background: var(--color-bg) !important;
  color: var(--color-primary-700) !important;
  border-radius: var(--radius-pill) !important;
}

/* ── Contact ─────────────────────────────────────────────── */
body.ag-site .ag-static.contact-page {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-body) !important;
}
body.ag-site .ag-static.contact-page .body-wrap {
  max-width: var(--content-width);
  padding: var(--space-5) var(--space-5) var(--space-7);
}
body.ag-site .ag-static.contact-page .office-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}
body.ag-site .ag-static.contact-page .card-header {
  background: var(--color-primary-700) !important;
}
body.ag-site .ag-static.contact-page .card-header .hico {
  background: rgba(227, 167, 61, 0.2) !important;
}
body.ag-site .ag-static.contact-page .card-header h2 {
  font-family: var(--font-display) !important;
}
body.ag-site .ag-static.contact-page .company-name {
  color: var(--color-primary) !important;
  font-family: var(--font-display) !important;
}
body.ag-site .ag-static.contact-page .contact-item a,
body.ag-site .ag-static.contact-page .care-text a {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static.contact-page .care-box {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, #fff) !important;
  border-radius: var(--radius-sm) !important;
}
body.ag-site .ag-static.contact-page .map-wrap {
  border-color: var(--color-line) !important;
  border-radius: var(--radius-sm) !important;
}
body.ag-site .ag-static.contact-page .map-label {
  background: var(--color-primary-700) !important;
}
body.ag-site .ag-static.contact-page .map-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.ag-site .ag-static.contact-page .map-actions a {
  flex: 1;
  min-width: 130px;
  display: block;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
  color: #fff !important;
}
body.ag-site .ag-static.contact-page .map-actions .map-dir {
  background: var(--color-primary-700) !important;
}
body.ag-site .ag-static.contact-page .map-actions .map-dir:hover {
  background: var(--color-primary) !important;
}
body.ag-site .ag-static.contact-page .map-actions .map-wa {
  background: #25d366 !important;
}

/* ── Clients ─────────────────────────────────────────────── */
body.ag-site .ag-static.client-page {
  background: var(--color-bg) !important;
}
body.ag-site .ag-static .client-page-wrap {
  max-width: var(--content-width);
  padding: var(--space-5) var(--space-5) var(--space-7);
}
body.ag-site .ag-static .client-about-card,
body.ag-site .ag-static .client-logos-section,
body.ag-site .ag-static .client-faq-section {
  background: var(--color-card) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}
body.ag-site .ag-static .client-about-card::before {
  background: linear-gradient(180deg, var(--color-primary), var(--color-gold)) !important;
}
body.ag-site .ag-static .client-section-eyebrow {
  color: var(--color-primary) !important;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}
body.ag-site .ag-static .client-section-heading {
  font-family: var(--font-display) !important;
  color: var(--color-primary-700) !important;
}
body.ag-site .ag-static .client-logo-card {
  background: var(--color-bg) !important;
  border-color: var(--color-line) !important;
  border-radius: var(--radius-sm) !important;
}
body.ag-site .ag-static .client-logo-card:hover {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-soft) !important;
}
body.ag-site .ag-static .client-faq-q {
  color: var(--color-ink) !important;
}
body.ag-site .ag-static .client-faq-item.open .client-faq-q,
body.ag-site .ag-static .client-faq-num {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static .client-faq-item {
  border-color: var(--color-line) !important;
}

/* ── Services ────────────────────────────────────────────── */
body.ag-site .ag-static.services-page {
  background: var(--color-bg) !important;
  font-family: var(--font-body) !important;
}
body.ag-site .ag-static.services-page .body-wrap {
  max-width: var(--content-width);
  padding: var(--space-5) var(--space-5) var(--space-7);
}
body.ag-site .ag-static.services-page .sec-label {
  background: color-mix(in srgb, var(--color-primary) 10%, #fff) !important;
  color: var(--color-primary) !important;
  border-color: color-mix(in srgb, var(--color-primary) 20%, #fff) !important;
  font-family: var(--font-mono);
}
body.ag-site .ag-static.services-page .sec-header h2 {
  font-family: var(--font-display) !important;
  color: var(--color-primary-700) !important;
}
body.ag-site .ag-static.services-page .sec-header h2 em {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static.services-page .why-card,
body.ag-site .ag-static.services-page .service-row,
body.ag-site .ag-static.services-page .mini-card,
body.ag-site .ag-static.services-page .access-card,
body.ag-site .ag-static.services-page .plan-card {
  background: var(--color-bg) !important;
  border-color: var(--color-line) !important;
  border-radius: var(--radius-md) !important;
}
body.ag-site .ag-static.services-page .why-card::before,
body.ag-site .ag-static.services-page .service-row::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-300)) !important;
}
body.ag-site .ag-static.services-page .why-card:hover,
body.ag-site .ag-static.services-page .mini-card:hover,
body.ag-site .ag-static.services-page .access-card:hover {
  border-color: var(--color-primary) !important;
}
body.ag-site .ag-static.services-page .service-tag {
  background: color-mix(in srgb, var(--color-primary) 10%, #fff) !important;
  color: var(--color-primary) !important;
}
body.ag-site .ag-static.services-page .service-text h3,
body.ag-site .ag-static.services-page .why-card h3,
body.ag-site .ag-static.services-page .mini-card h3 {
  font-family: var(--font-display) !important;
  color: var(--color-primary-700) !important;
}
body.ag-site .ag-static.services-page .service-img.orange-bg {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, #fff), color-mix(in srgb, var(--color-gold) 12%, #fff)) !important;
}
body.ag-site .ag-static.services-page .service-img.navy-bg {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, #fff), color-mix(in srgb, var(--color-primary) 6%, #fff)) !important;
}
body.ag-site .ag-static.services-page .service-cta {
  background: var(--color-accent) !important;
  border-radius: var(--radius-pill) !important;
}
body.ag-site .ag-static.services-page .service-cta:hover {
  background: var(--color-accent-700) !important;
}
body.ag-site .ag-static.services-page .service-bullets li::before,
body.ag-site .ag-static.services-page .mini-bullets li::before,
body.ag-site .ag-static.services-page .ac-feats li::before {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static.services-page .cta-band {
  background: var(--navy, #102e34) !important;
  border-radius: 7px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  padding: 34px 38px !important;
  margin-top: 44px !important;
}
body.ag-site .ag-static.services-page .cta-band h2 {
  color: #fff !important;
  font-size: 1.8rem !important;
  font-weight: 650 !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}
body.ag-site .ag-static.services-page .cta-band p {
  color: #c3d5cf !important;
  margin: 0 !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  max-width: 52ch;
}
body.ag-site .ag-static.services-page .cta-band .cta-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
body.ag-site .ag-static.services-page .cta-band .btn {
  border-radius: 5px !important;
  font-weight: 650 !important;
  font-size: 0.875rem !important;
  padding: 14px 22px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
body.ag-site .ag-static.services-page .cta-band .btn-primary {
  background: #d7ed91 !important;
  border: 0 !important;
  color: #102e34 !important;
}
body.ag-site .ag-static.services-page .cta-band .btn-primary:hover {
  background: #e4f4b0 !important;
  color: #102e34 !important;
}
body.ag-site .ag-static.services-page .cta-band .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
}
body.ag-site .ag-static.services-page .cta-band .btn-outline:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
@media (max-width: 760px) {
  body.ag-site .ag-static.services-page .cta-band {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 28px 24px !important;
  }
  body.ag-site .ag-static.services-page .cta-band h2 {
    font-size: 1.45rem !important;
  }
}

/* ── Policy / Terms ──────────────────────────────────────── */
body.ag-site .ag-static.policy-page {
  background: var(--color-bg) !important;
}
body.ag-site .ag-static .policy-wrap {
  max-width: var(--content-width);
  padding: var(--space-5) var(--space-5) var(--space-7);
  gap: var(--space-5);
}
body.ag-site .ag-static .policy-sidebar-nav a:hover,
body.ag-site .ag-static .policy-sidebar-nav a.active {
  color: var(--color-primary) !important;
  border-left-color: var(--color-primary) !important;
}
body.ag-site .ag-static .policy-sidebar-contact {
  background: var(--color-card) !important;
  border-color: var(--color-line) !important;
}
body.ag-site .ag-static .policy-sidebar-contact a {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static .policy-section-num {
  color: var(--color-primary) !important;
  font-family: var(--font-mono);
}
body.ag-site .ag-static .policy-section-title {
  font-family: var(--font-display) !important;
  color: var(--color-primary-700) !important;
}
body.ag-site .ag-static .policy-callout {
  background: var(--color-card) !important;
  border: 1px solid var(--color-line) !important;
  border-left: 4px solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
}
body.ag-site .ag-static .policy-callout-label {
  color: var(--color-primary) !important;
  font-family: var(--font-mono);
}
body.ag-site .ag-static .policy-card {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-sm) !important;
}
body.ag-site .ag-static .policy-card-icon {
  background: color-mix(in srgb, var(--color-primary) 10%, #fff) !important;
  color: var(--color-primary) !important;
}
body.ag-site .ag-static .policy-highlight {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff) !important;
  border-color: color-mix(in srgb, var(--color-primary) 20%, #fff) !important;
}

/* ── Sitemap ─────────────────────────────────────────────── */
body.ag-site .ag-static--sitemap.page-wrapper {
  background: var(--color-surface);
}
body.ag-site .ag-static--sitemap .sm-hero {
  background: var(--color-primary-700) !important;
  border-bottom: none !important;
  padding: var(--space-6) var(--space-5) !important;
  margin-bottom: 0 !important;
}
body.ag-site .ag-static--sitemap .sm-hero::before {
  background: linear-gradient(135deg, var(--color-primary) 0%, transparent 60%) !important;
  opacity: 0.45;
}
body.ag-site .ag-static--sitemap .sm-hero::after {
  background: radial-gradient(circle, rgba(227, 167, 61, 0.18), transparent 70%) !important;
  border: none !important;
}
body.ag-site .ag-static--sitemap .sm-hero-inner,
body.ag-site .ag-static--sitemap .map_sec .container {
  max-width: var(--content-width) !important;
}
body.ag-site .ag-static--sitemap .sm-hero-badge {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  font-family: var(--font-mono);
}
body.ag-site .ag-static--sitemap .sm-hero h1 {
  font-family: var(--font-display) !important;
  color: var(--color-cream-100) !important;
}
body.ag-site .ag-static--sitemap .sm-hero h1 em {
  color: var(--color-gold) !important;
  font-style: italic;
}
body.ag-site .ag-static--sitemap .sm-stat-val {
  font-family: var(--font-display) !important;
  color: var(--color-gold) !important;
}
body.ag-site .ag-static--sitemap .sm-hero-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
body.ag-site .ag-static--sitemap .sm-info-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}
body.ag-site .ag-static--sitemap .sm-info-card h2 {
  font-family: var(--font-display) !important;
  color: var(--color-primary-700) !important;
}
body.ag-site .ag-static--sitemap .sm-info-card p a {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static--sitemap .sm-info-list li::before {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static--sitemap .sm-section-label {
  color: var(--color-primary) !important;
  font-family: var(--font-mono);
}
body.ag-site .ag-static--sitemap .sm-chip {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-sm) !important;
}
body.ag-site .ag-static--sitemap .sm-chip:hover {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-soft) !important;
}
body.ag-site .ag-static--sitemap .sm-chip-label {
  color: var(--color-ink) !important;
}
body.ag-site .ag-static--sitemap .sm-table-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--radius-md) !important;
}
body.ag-site .ag-static--sitemap .sm-table-head {
  background: var(--color-primary-700) !important;
  color: #fff !important;
  font-family: var(--font-mono);
}
body.ag-site .ag-static--sitemap .sm-td a {
  color: var(--color-primary) !important;
}
body.ag-site .ag-static--sitemap .sm-td a:hover {
  color: var(--color-primary-700) !important;
}

@media (max-width: 900px) {
  body.ag-site .ag-static .policy-wrap {
    grid-template-columns: 1fr;
  }
  body.ag-site .ag-static.services-page .why-grid,
  body.ag-site .ag-static.services-page .services-mini-grid,
  body.ag-site .ag-static.services-page .access-grid {
    grid-template-columns: 1fr 1fr;
  }
  body.ag-site .ag-static.services-page .service-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  body.ag-site .ag-static.services-page .why-grid,
  body.ag-site .ag-static.services-page .services-mini-grid,
  body.ag-site .ag-static.services-page .access-grid,
  body.ag-site .ag-static.contact-page .office-grid {
    grid-template-columns: 1fr;
  }
}