/* ==========================================================================
   AfriAgentic — experience parity layer
   Loaded last. Brings the header, interior hero spacing and scroll motion in
   line with the approved demo. Values are taken from the demo stylesheet;
   where a number differs it is because the live markup carries an extra
   wrapper, and the difference is noted inline.
   ========================================================================== */

/* ============================ 01  HEADER ============================
   Demo: header.site-header is fixed, 83px tall, transparent, and shrinks to
   62px with a translucent blurred background and a hairline border once the
   page scrolls past 20px. */

#masthead {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent !important;
	border-bottom: 1px solid transparent !important;
	transition: background .4s var(--aa-ease), border-color .4s var(--aa-ease);
}

#masthead .ast-primary-header-bar,
#masthead .main-header-bar {
	background: transparent !important;
	border-bottom: 0 !important;
}

/* 18px vertical padding around a 46px lockup = 82px, matching the demo. */
#ast-desktop-header .ast-builder-grid-row {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
	transition: padding .4s var(--aa-ease);
}

#masthead .aa-logo img {
	height: 46px !important;
	width: auto !important;
	transition: height .4s var(--aa-ease);
}

/* Scrolled state. */
#masthead.aa-scrolled {
	background: rgba(4, 16, 29, .92) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--aa-line) !important;
}

#masthead.aa-scrolled #ast-desktop-header .ast-builder-grid-row {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

#masthead.aa-scrolled .aa-logo img {
	height: 38px !important;
}

/* Desktop navigation typography — demo .nav-item > a. */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 10px 13px !important;
	letter-spacing: 0 !important;
	transition: color .25s var(--aa-ease);
}

#ast-desktop-header .main-header-menu > .menu-item {
	margin: 0 1px !important;
}

/* Submenu — demo .mega. */
#ast-desktop-header .main-header-menu .sub-menu {
	min-width: 240px !important;
	padding: 12px !important;
	border-radius: 4px !important;
	border: 1px solid var(--aa-line-strong) !important;
	background: var(--aa-navy-surface, #0A2036) !important;
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .75) !important;
	transform: translateY(6px);
	transition: opacity .25s var(--aa-ease), transform .25s var(--aa-ease), visibility .25s;
}

#ast-desktop-header .main-header-menu > .menu-item:hover > .sub-menu,
#ast-desktop-header .main-header-menu > .menu-item:focus-within > .sub-menu {
	transform: translateY(0);
}

#ast-desktop-header .main-header-menu .sub-menu .menu-link {
	display: block !important;
	padding: 9px 12px !important;
	font-size: 13px !important;
	border-radius: 2px !important;
	transition: background .2s, color .2s;
}

/* Chevron rotates on hover, as in the demo. */
#ast-desktop-header .menu-item:hover > .menu-link .aa-chev,
#ast-desktop-header .menu-item:focus-within > .menu-link .aa-chev {
	transform: rotate(180deg);
}

.aa-chev {
	transition: transform .3s var(--aa-ease);
	opacity: .7;
}

/* ==================== 02  MOBILE DRAWER ====================
   Demo .mobile-nav: full-bleed panel that slides down from the top. */

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	transition: transform .45s var(--aa-ease), visibility .45s !important;
}

.ast-mobile-popup-drawer .ast-nav-menu > .menu-item > .menu-link {
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	padding: 16px 0 !important;
}

.ast-mobile-popup-drawer .sub-menu .menu-link {
	font-size: 16px !important;
	font-weight: 400 !important;
	padding: 11px 0 11px 6px !important;
}

.ast-mobile-popup-drawer .ast-nav-menu > .menu-item {
	border-bottom: 1px solid var(--aa-line) !important;
}

/* Astra already slide-animates the mobile submenu. Overriding it with a
   max-height transition made the two animations fight and clipped the list
   part-way, so the height animation is left to Astra and only the type and
   spacing are matched to the demo here. */

.ast-mobile-popup-drawer .ast-menu-toggle svg,
.ast-mobile-popup-drawer .ast-menu-toggle .ast-icon {
	transition: transform .3s var(--aa-ease);
}

.ast-mobile-popup-drawer .ast-button-wrap {
	margin-top: 32px;
}

/* ==================== 03  HERO SPACING ====================
   The demo header overlays the first section, so its 150px top padding
   yields 67px of clearance below an 83px header. The live markup adds a
   ~30px wrapper above the kicker, so the padding is reduced by that amount
   to land the first line of hero content in the demo's position. */

.aa-page-hero {
	padding-top: 120px !important;
}

@media (max-width: 1024px) {
	.aa-page-hero { padding-top: 96px !important; }
}

@media (max-width: 767px) {
	.aa-page-hero { padding-top: 88px !important; }
}

/* Homepage hero clears the now-fixed header. */
.aa-hero {
	padding-top: 161px !important;
}

@media (max-width: 1024px) {
	.aa-hero { padding-top: 118px !important; }
}

@media (max-width: 767px) {
	.aa-hero { padding-top: 100px !important; }
}

/* Demo .page-title line-height and tracking. */
.aa-page-hero h1,
.aa-page-hero .elementor-heading-title {
	line-height: 1.08 !important;
	letter-spacing: -.02em !important;
}

/* ==================== 04  HERO COPY WIDTH ====================
   Demo: .hero-sub max-width 520px, .page-lead max-width 560px. */

.aa-hero-sub,
.aa-hero .elementor-widget-text-editor p {
	max-width: 520px;
}

.aa-page-hero .aa-lead,
.aa-page-hero .elementor-widget-text-editor p {
	max-width: 560px;
}

/* ==================== 05  INSIGHTS CARDS ====================
   Demo .insight-scroller: a three-column grid with a 26px gutter, each card
   individually bordered and rounded. The live build rendered them as one
   contiguous block. */

.aa-insight-row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 26px !important;
	border: 0 !important;
	background: transparent !important;
}

.aa-insight-row > .e-con,
.aa-insight-row > .elementor-element {
	border: 1px solid var(--aa-line) !important;
	border-radius: 4px !important;
	overflow: hidden;
	transition: border-color .35s var(--aa-ease), transform .35s var(--aa-ease), background .35s var(--aa-ease);
}

.aa-insight-row > .e-con:hover,
.aa-insight-row > .elementor-element:hover {
	border-color: var(--aa-line-strong) !important;
	transform: translateY(-4px);
	background: var(--section-surface);
}

@media (max-width: 1080px) {
	.aa-insight-row { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 680px) {
	.aa-insight-row { grid-template-columns: 1fr !important; }
}

/* ==================== 06  SCROLL REVEAL ====================
   Ported from the demo. Gated on .aa-js so that if the script never runs —
   or a crawler renders without it — nothing is hidden. */

.aa-js .aa-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .9s var(--aa-ease), transform .9s var(--aa-ease);
	will-change: opacity, transform;
}

.aa-js .aa-reveal.in {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

.aa-js .aa-reveal-d1 { transition-delay: .08s; }
.aa-js .aa-reveal-d2 { transition-delay: .16s; }
.aa-js .aa-reveal-d3 { transition-delay: .24s; }
.aa-js .aa-reveal-d4 { transition-delay: .32s; }
.aa-js .aa-reveal-d5 { transition-delay: .40s; }

/* Cards inside a revealed grid come in just behind their container. */
.aa-js .aa-stagger > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s var(--aa-ease), transform .7s var(--aa-ease);
}

.aa-js .aa-stagger.in > * {
	opacity: 1;
	transform: translateY(0);
}

.aa-js .aa-stagger.in > *:nth-child(1) { transition-delay: .04s; }
.aa-js .aa-stagger.in > *:nth-child(2) { transition-delay: .10s; }
.aa-js .aa-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.aa-js .aa-stagger.in > *:nth-child(4) { transition-delay: .22s; }
.aa-js .aa-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.aa-js .aa-stagger.in > *:nth-child(n+6) { transition-delay: .32s; }

/* ==================== 07  HOVER STATES ====================
   Demo hover behaviour that the live build had not reproduced. */

.aa-card-media img {
	transition: transform .6s var(--aa-ease);
}

.aa-card:hover .aa-card-media img {
	transform: scale(1.04);
}

.aa-democard,
.aa-panel {
	transition: border-color .35s var(--aa-ease), transform .35s var(--aa-ease), background .35s var(--aa-ease);
}

.aa-link .elementor-heading-title,
.aa-card-tag .elementor-heading-title {
	transition: color .25s var(--aa-ease), gap .25s var(--aa-ease), border-color .25s var(--aa-ease);
}

/* ==================== 08  REDUCED MOTION ==================== */

@media (prefers-reduced-motion: reduce) {
	.aa-js .aa-reveal,
	.aa-js .aa-reveal.in,
	.aa-js .aa-stagger > *,
	.aa-js .aa-stagger.in > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	#masthead,
	#masthead .aa-logo img,
	#ast-desktop-header .ast-builder-grid-row,
	.ast-mobile-popup-drawer .ast-mobile-popup-inner {
		transition: none !important;
	}

	.aa-card:hover .aa-card-media img,
	.aa-insight-row > .e-con:hover {
		transform: none !important;
	}
}

/* Mobile bar carries the demo's 18px vertical padding so the header reads at
   the same height on phones as it does on desktop. */
/* AA-MOBILE-BAR */
#ast-mobile-header .ast-builder-grid-row{padding-top:18px!important;padding-bottom:18px!important;}
#ast-mobile-header .aa-logo img{height:38px!important;width:auto!important;}

/* ==================== 09  MOBILE DRAWER PARITY ====================
   AA-DRAWER-PARITY
   Astra ships the drawer at 90% width with generous line-heights. The demo
   panel is full-bleed with 104px/32px/48px padding and much tighter rows. */

.ast-mobile-popup-drawer .ast-mobile-popup-inner{
	width:100%!important;
	max-width:100%!important;
	left:0!important;
	right:0!important;
	background:#04101D!important;
	padding:104px 32px 48px!important;
	overflow-y:auto;
	overscroll-behavior:contain;
}

.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-mobile-popup-header{
	padding:0!important;
	width:100%!important;
}

/* Demo row height: 24px type on a 1.25 line, 16px padding each side. */
.ast-mobile-popup-drawer .ast-nav-menu > .menu-item > .menu-link{
	line-height:1.25!important;
	padding:16px 0!important;
}

.ast-mobile-popup-drawer .sub-menu .menu-link{
	line-height:1.4!important;
	padding:11px 0 11px 6px!important;
}

.ast-mobile-popup-drawer .sub-menu{
	padding:0 0 10px!important;
}

/* Chevron toggle: no chrome, just the glyph, as in the demo. */
.ast-mobile-popup-drawer .ast-menu-toggle{
	width:44px!important;
	height:44px!important;
	top:8px!important;
	background:transparent!important;
	border:0!important;
	outline:none!important;
	box-shadow:none!important;
	color:var(--aa-text-dim)!important;
}

.ast-mobile-popup-drawer .ast-menu-toggle:focus-visible{
	outline:1px solid var(--aa-cyan)!important;
	outline-offset:2px;
}

/* Close control sits where the demo's does. */
.ast-mobile-popup-drawer .menu-toggle-close{
	position:absolute!important;
	top:26px!important;
	right:26px!important;
	background:transparent!important;
	border:0!important;
	color:var(--aa-text)!important;
}

.ast-mobile-popup-drawer .ast-button-wrap .ast-custom-button{
	margin-top:32px;
}

/* AA-DRAWER-TRIM — demo aligns the drawer CTA left and flips the chevron of
   the open group. */
.ast-mobile-popup-drawer .ast-builder-layout-element .ast-button-wrap{
	text-align:left!important;
	align-self:flex-start!important;
	width:100%!important;
}
.ast-mobile-popup-drawer .ast-builder-layout-element{
	justify-content:flex-start!important;
	align-items:flex-start!important;
}
.ast-mobile-popup-drawer .menu-item.ast-submenu-expanded > .ast-menu-toggle svg,
.ast-mobile-popup-drawer .menu-item.ast-submenu-expanded > .ast-menu-toggle .ast-icon svg{
	transform:rotate(180deg)!important;
}

/* ==================== 10  CENTRED NAVIGATION ====================
   AA-NAV-CENTER
   The menu now lives in Astra's primary_center zone, so the row has three
   columns. Equal 1fr flanks with an auto centre keep the navigation on the
   header's true centre line no matter how wide the logo or the CTA become —
   space-between would let it drift toward whichever side is narrower. */

#ast-desktop-header .ast-builder-grid-row{
	display:grid!important;
	grid-template-columns:1fr auto 1fr!important;
	align-items:center!important;
	column-gap:28px!important;
}

#ast-desktop-header .site-header-primary-section-left{
	justify-content:flex-start!important;
	min-width:0;
}

#ast-desktop-header .site-header-primary-section-center{
	justify-content:center!important;
	min-width:0;
}

#ast-desktop-header .site-header-primary-section-right{
	justify-content:flex-end!important;
	min-width:0;
}

/* The centre cell must not stretch, or the menu re-centres inside a wider box. */
#ast-desktop-header .site-header-primary-section-center .ast-builder-menu{
	margin:0 auto!important;
}

#ast-desktop-header .main-header-menu{
	justify-content:center!important;
	flex-wrap:nowrap!important;
}

/* ==================== AA-SCROLLER-FIX ====================
   html carries overflow-x:clip and body carried overflow-x:hidden. Because
   html is clipped rather than visible, body's overflow no longer propagates
   to the viewport, and 'hidden' on one axis forces the other to compute as
   'auto' — which quietly made BODY the scroll container. The document then
   reported scrollY 0 forever, so the IntersectionObserver reveals never
   fired past the first screen. Clip on both axes keeps the horizontal
   overflow guard without creating a scroll box. */
body{
	overflow-x:hidden; /* fallback for browsers without overflow:clip */
	overflow-x:clip;
	overflow-y:visible;
}


/* ==================== 11  EXPO & SUMMIT 2027 ====================
   AA-EXPO-2027
   Two additions, nothing else touched:
     a) the announcement strip in Astra's own above-header row, homepage only
     b) nav item padding trimmed ONLY in the band where the 8th menu item
        would otherwise squeeze the logo lockup (1025-1320px). From 1366px
        up the header is untouched and still renders at 13px padding.
   The desktop menu lives in #ast-desktop-header, which Astra only outputs
   above the 1024px mobile-header breakpoint, so (b) cannot reach mobile. */

/* --- a) announcement strip --- */
.ast-above-header-wrap{
	background: var(--aa-navy-surface, #0A2340) !important;
	border-bottom: 1px solid var(--aa-line, rgba(245,246,248,.10)) !important;
}

#ast-desktop-header .ast-above-header-wrap .ast-builder-grid-row,
#ast-mobile-header .ast-above-header-wrap .ast-builder-grid-row{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0 !important;
}

.ast-above-header-wrap .ast-builder-layout-element{ width: 100%; }

.aa-expo-strip{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 7px;
	min-height: 38px;
	padding: 8px 22px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .01em;
	color: var(--aa-text-dim, #9BA6B5);
	text-align: center;
}

.aa-expo-strip .aa-expo-sep{ color: var(--aa-text-faint, #8A94A0); opacity: .7; }

.aa-expo-strip .aa-expo-cta{
	color: var(--aa-cyan, #00D9FF) !important;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .25s var(--aa-ease, cubic-bezier(.22,.61,.36,1));
}

.aa-expo-strip .aa-expo-cta:hover,
.aa-expo-strip .aa-expo-cta:focus-visible{
	color: var(--aa-gold, #D4AF37) !important;
}

/* Homepage only. Astra has no per-page header conditions, so the row is
   enabled globally and hidden everywhere except the front page. */
body:not(.home) .ast-above-header-wrap{ display: none !important; }

@media (max-width:600px){
	.aa-expo-strip{ font-size: 11.5px; padding: 7px 16px; gap: 0 5px; min-height: 34px; }
}

/* --- b) nav spacing, only where the logo would otherwise compress ---
   Base rule (section 3 above) is padding:10px 13px. Between 1025 and 1320px
   the eight-item menu plus a full-size logo and the CTA overrun the row by
   ~52px; 8px side padding returns 80px, which keeps the lockup at its full
   width with the menu on one line. Measured, not estimated. */
@media (min-width:1025px) and (max-width:1320px){
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link{
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* AA-EXPO-MINH - Astra gives the above row a 50px min-height; the strip sets its own. */
.site-above-header-wrap{ min-height:0 !important; }

/* AA-EXPO-WIDTH - Astra sizes the above row's centre column to its siblings,
   which capped the strip at 572px and wrapped it onto two lines. The row has
   only this one element, so give it the full container width. */
.ast-above-header-wrap .ast-builder-grid-row{ display:grid !important; grid-template-columns:1fr !important; }
.ast-above-header-wrap .site-header-above-section-center{ width:100% !important; min-width:0; justify-content:center !important; }

/* AA-EXPO-SPAN - Astra's .ast-grid-center-col-layout sizes the above row as
   three tracks (572/0/572), which capped the strip and wrapped it onto two
   lines. Rather than re-sizing Astra's tracks, let the one populated section
   span all of them. */
#masthead .ast-above-header-wrap .site-header-above-section-center{
	grid-column: 1 / -1 !important;
	width: 100% !important;
	min-width: 0;
	justify-content: center !important;
}

/* AA-EXPO-GAP - 8px item padding alone leaves the lockup at 163px at 1200px;
   trimming the row's 28px column gap to 14px in the same band returns the
   last 11px and the wordmark renders at its full 174px. Measured. */
@media (min-width:1025px) and (max-width:1320px){
	#ast-desktop-header .ast-builder-grid-row{ column-gap:14px !important; }
}

/* AA-EXPO-SMALL - at 12.5px the message broke to three lines on a phone (64px).
   11px holds it to two (46px) and matches the hero's own 767px step, so the
   padding compensation below is exact. */
@media (max-width:767px){
	.aa-expo-strip{ font-size:11px !important; padding:7px 14px !important; gap:0 5px !important; min-height:46px !important; }
}

/* AA-EXPO-BG - Astra gives .ast-above-header-bar and .site-above-header-wrap
   a white background, which painted over the navy on the outer wrap and left
   dim grey text on white. Clear the inner backgrounds so the wrap shows. */
#masthead .ast-above-header-wrap .ast-above-header-bar,
#masthead .ast-above-header-wrap .site-above-header-wrap,
#masthead .ast-above-header-wrap .ast-builder-grid-row{ background:transparent !important; }

/* AA-EXPO-CENTRE - the section centres its child, but Astra's inner
   .ast-builder-layout-element is itself a 1200px flex box with the default
   justify-content, so the strip sat at its left edge. Centre it and let the
   html wrappers span, so the message sits on the container's centre line. */
#masthead .ast-above-header-wrap .ast-builder-layout-element{ justify-content:center !important; width:100% !important; }
#masthead .ast-above-header-wrap .ast-header-html,
#masthead .ast-above-header-wrap .ast-builder-html-element{ width:100% !important; }