:root{
--green:#061f1b;
--green2:#0d302a;
--gold:#caa45d;
--cream:#f7f1e6;
--ink:#1d1b18;
--muted:#6c6257;
--line:#e7ddcd;
--white:#fff;
--shadow:0 24px 80px rgba(0,0,0,.18)
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:Inter,system-ui,sans-serif;
line-height:1.65
}

a{
color:inherit;
text-decoration:none
}

img{
max-width:100%;
height:auto;
display:block
}

.skip-link{
position:absolute;
left:-999px
}

.skip-link:focus{
left:1rem;
top:1rem;
background:#fff;
color:#000;
padding:.75rem;
z-index:9999
}

/* =========================================
HEADER
========================================= */

.site-header{
position:fixed;
top:0;
left:0;
right:0;
z-index:99;
background:linear-gradient(180deg,rgba(2,20,17,.96),rgba(2,20,17,.75));
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.08);
padding-top:4px;
padding-bottom:4px;
}

.nav-wrap{
max-width:1240px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:.8rem 1.2rem;
position:relative;
}

/* =========================================
BRAND
========================================= */

.brand{
display:flex;
align-items:center;
text-decoration:none;
color:#fff;
text-transform:uppercase;
letter-spacing:.06em;
flex-shrink:0;
}

.brand-text{
display:flex;
flex-direction:column;
justify-content:center;
margin-left:18px;
}

.brand img,
.custom-logo{
width:58px !important;
height:58px !important;
object-fit:contain;
display:block;
}

.brand strong{
display:block;
font-family:Cinzel,serif;
font-size:22px;
font-weight:700;
line-height:1;
letter-spacing:.5px;
color:#fff !important;
margin:0;
}

.brand small{
display:block;
color:#d8c7a1 !important;
font-size:11px;
letter-spacing:2px;
margin-top:5px;
text-transform:uppercase;
}

/* =========================================
NAVIGATION
========================================= */

.primary-nav{
display:flex;
align-items:center;
gap:1.5rem;
margin-left:auto;
}

.primary-nav ul{
display:flex;
gap:1.3rem;
list-style:none;
margin:0;
padding:0;
}

.primary-nav li{
position:relative;
}

.primary-nav a{
color:#fff;
text-transform:uppercase;
font-weight:800;
font-size:.72rem;
letter-spacing:.08em;
white-space:nowrap;
}

.primary-nav a:hover{
color:var(--gold)
}

/* =========================================
DROPDOWN
========================================= */

.primary-nav .menu-item-has-children .sub-menu{
position:absolute;
top:100%;
left:0;
min-width:220px;
background:#10221b;
padding:14px 0;
border-radius:8px;
list-style:none;
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:all .25s ease;
z-index:9999;
display:block;
}

.primary-nav .menu-item-has-children:hover .sub-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.primary-nav .sub-menu li{
margin:0;
}

.primary-nav .sub-menu a{
display:block;
padding:11px 18px;
white-space:nowrap;
}

/* =========================================
BUTTONS
========================================= */

.nav-cta,
.button{
border-radius:3px;
padding:.75rem 1.15rem;
font-weight:800;
text-transform:uppercase;
font-size:.72rem;
letter-spacing:.08em;
display:inline-flex;
align-items:center;
justify-content:center;
}

.nav-cta,
.gold{
background:var(--gold);
color:#071d19 !important;
}

.ghost{
border:1px solid rgba(255,255,255,.7);
color:#fff;
}

/* =========================================
MOBILE TOGGLE
========================================= */

.menu-toggle{
display:none;
background:none;
border:1px solid rgba(255,255,255,.3);
color:#fff;
padding:.6rem .8rem;
cursor:pointer;
}

/* =========================================
HERO
========================================= */

.hero{
min-height:92vh;
background:linear-gradient(135deg,#102b25,#081613);
background-size:cover;
background-position:center;
position:relative;
display:grid;
place-items:center;
text-align:center;
color:#fff;
padding:8rem 1.5rem 4rem;
}

.hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle,rgba(0,0,0,.1),rgba(0,0,0,.66)),
linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.62));
}

.hero-content{
position:relative;
max-width:860px;
}

.kicker,
.eyebrow{
color:var(--gold);
text-transform:uppercase;
letter-spacing:.14em;
font-weight:900;
font-size:.78rem;
}

.hero h1{
font-family:Cinzel,serif;
font-size:clamp(3rem,7vw,6.8rem);
line-height:1.05;
margin:.25rem 0 1rem;
}

.hero p{
font-size:1.08rem;
max-width:680px;
margin:0 auto 1.4rem;
color:#f6eee0;
}

.hero-actions{
display:flex;
gap:1rem;
justify-content:center;
flex-wrap:wrap;
}

/* =========================================
WPBAKERY HERO
========================================= */

.egbe-vc-hero{
min-height:92vh;
background:
radial-gradient(circle at center, rgba(0,0,0,.08), rgba(0,0,0,.72)),
linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.66)),
url('http://egbebobagunte.com/wp-content/uploads/2026/05/egbe-hands.png') center/cover no-repeat;
position:relative;
display:grid;
place-items:center;
text-align:center;
color:#fff;
padding:8rem 1.5rem 4rem;
}

.egbe-vc-hero .hero-overlay{
display:none;
}

/* =========================================
MOBILE
========================================= */

@media(max-width:900px){

.menu-toggle{
display:block !important;
}

.primary-nav{
display:none !important;
position:absolute;
top:100%;
left:0;
right:0;
background:#041713;
flex-direction:column;
align-items:flex-start;
padding:1rem 1.4rem;
z-index:9999;
}

.primary-nav.active{
display:flex !important;
}

.primary-nav ul{
display:flex !important;
flex-direction:column !important;
width:100%;
gap:20px;
}

.primary-nav li{
width:100%;
}

.primary-nav a{
display:block;
width:100%;
}

.nav-cta{
margin-top:20px;
}

.hero h1{
font-size:3rem;
}

.brand small{
display:none;
}

.nav-wrap{
padding:.8rem 1rem;
}

}

@media(max-width:560px){

.hero{
min-height:82vh;
}

}