:root {
            --primary: #FE7F2D;
            --black: #000000;
            --white: #FFFFFF;
            --gray-subtle: #f8f8f8;
            --border: rgba(0,0,0,0.1);
            --transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        }

        /* Base & Fonts */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Agbalumo', cursive; 
            line-height: 1.8; 
            color: var(--black); 
            background: var(--white); 
            overflow-x: hidden;
            font-size: 1.05rem;
        }
        h1, h2, h3, h4, .heading { font-family: 'Caudex', serif; font-weight: 700; line-height: 1.1; }

        /* Theme Rules */
        .bg-orange { background-color: var(--primary); color: var(--black); }
        .bg-black { background-color: var(--black); color: var(--white); }
        .bg-white { background-color: var(--white); color: var(--black); }

        /* Sticky Header */
        header {
            position: fixed; top: 0; width: 100%; height: 90px;
            background: var(--white); color: var(--black);
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 5%; z-index: 1000; border-bottom: 1px solid var(--border);
            transition: var(--transition);
        }
        header.scrolled { height: 70px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.logo {
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.logo img {
    height: 190px;
    width: auto;
    max-height: 190px;
}
        nav { display: flex; gap: 30px; align-items: center; }
        nav a { 
            text-decoration: none; color: inherit; font-family: 'Caudex', serif;
            cursor: pointer; position: relative; transition: 0.3s; font-weight: 700;
        }
        nav a:hover { color: var(--primary); }
        nav a::after {
            content: ''; position: absolute; bottom: -5px; left: 0; width: 0; 
            height: 2px; background: var(--primary); transition: 0.3s;
        }
        nav a:hover::after { width: 100%; }

        .dropdown { position: relative; }
        .dropdown-menu {
            position: absolute; top: 100%; right: 0; background: var(--white);
            min-width: 220px; box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            display: none; padding: 15px 0; border-top: 4px solid var(--primary);
            z-index: 1001;
        }
        .dropdown:hover .dropdown-menu { display: block; }
        .dropdown-menu a { display: block; padding: 12px 25px; font-family: 'Agbalumo', cursive; font-size: 0.9rem; font-weight: 400; }

        /* Page System */
        .page { display: none; min-height: 100vh; padding-top: 90px; }
        .page.active { display: block; animation: fadeIn 0.8s ease forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        section { padding: 120px 10%; position: relative; }
        .hr-subtle { border: 0; height: 1px; background: var(--border); margin: 60px 0; }

        /* Hero Layout */
        .hero { display: flex; height: 92vh; width: 100%; overflow: hidden; padding: 0; }
        .hero-left { 
            flex: 1.2; 
            background: url('https://i.pinimg.com/736x/12/28/4a/12284a79dcb2d6f7b3a16a471a734eea.jpg') center/cover;
            animation: zoomOut 20s infinite alternate;
        }
        @keyframes zoomOut { from { transform: scale(1.1); } to { transform: scale(1); } }
        .hero-right { 
            flex: 1; display: flex; flex-direction: column; justify-content: center; 
            padding: 0 8%; background: var(--white); z-index: 2;
        }
        .hero-title { font-size: 5.5rem; margin-bottom: 25px; line-height: 0.95; }
        .hero-sub { font-size: 1.3rem; margin-bottom: 45px; max-width: 500px; opacity: 0; transform: translateY(20px); animation: slideUp 1s forwards 0.4s; }
        @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

        /* CTA Buttons */
        .btn {
            background: var(--primary); color: var(--black); padding: 18px 45px;
            border: none; font-family: 'Caudex', serif; font-weight: 700;
            cursor: pointer; transition: 0.4s; display: inline-block; text-decoration: none;
            font-size: 1.1rem; border: 2px solid var(--primary);
        }
        .btn:hover { background: var(--black); color: var(--white); border-color: var(--black); transform: translateY(-3px); }

        /* Highlights (Section 2) */
        .highlight-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; padding: 100px 10%; border-bottom: 1px solid var(--border); }
        .highlight-head h2 { font-size: 4rem; margin-top: 20rem; }
        .highlight-head p { color: var(--primary); font-size: 1.4rem; margin-top: 5px; font-weight: bold; }
        .highlight-body { font-size: 1.2rem; }

        /* Showcase Grid (Section 3) */
        .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
        .card { 
            background: var(--white); height: 480px; cursor: pointer; position: relative;
            overflow: hidden; transition: var(--transition); border: 1px solid #eee;
        }
        .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .card img { width: 100%; height: 100%; object-fit: cover; transition: 1s; filter: grayscale(40%); }
        .card:hover img { transform: scale(1.1); filter: grayscale(0%); }
        .card-content { position: absolute; bottom: 0; width: 100%; padding: 40px 30px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); color: white; }

        /* Insight Cards (Section 4) */
        .insight-container { display: grid; grid-template-columns: 1fr 2.5fr; gap: 100px; }
        .insight-quote h2 { font-size: 4.5rem; font-style: italic; }
        .insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
        .insight-card { background: var(--white); padding: 35px; border: 1px solid rgba(0,0,0,0.05); transition: 0.3s; }
        .insight-card img { width: 100%; height: 180px; object-fit: cover; margin-bottom: 25px; }
        .insight-card:hover { border-color: var(--black); }

        /* Side Panel (Quick View) */
        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 2000; display: none; }
        .panel { 
            position: fixed; top: 0; right: -100%; width: 700px; height: 100%; 
            background: white; z-index: 2100; transition: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            overflow-y: auto; padding: 120px 80px; box-shadow: -20px 0 60px rgba(0,0,0,0.2);
        }
        .panel.active { right: 0; }
        .close-btn { position: absolute; top: 40px; right: 40px; cursor: pointer; background: #eee; border-radius: 50%; padding: 10px; }

        /* Footer */
        footer { padding: 120px 10% 40px; }
        .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 80px; }
        .footer-col h4 { margin-bottom: 30px; font-size: 1.5rem; border-bottom: 2px solid var(--black); display: inline-block; }
        .footer-col ul { list-style: none; }
        .footer-col li { margin-bottom: 15px; }
        .footer-col a { text-decoration: none; color: inherit; opacity: 0.7; transition: 0.3s; cursor: pointer; }
        .footer-col a:hover { opacity: 1; color: var(--primary); padding-left: 5px; }
        .social-row { display: flex; gap: 15px; margin-top: 30px; }
        .social-icon { width: 45px; height: 45px; border-radius: 50%; border: 1px solid black; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
        .social-icon:hover { background: black; color: white; }

        /* Filtering UI */
        .filter-nav { display: flex; gap: 20px; justify-content: center; margin-bottom: 60px; }
        .filter-tag { 
            padding: 12px 30px; border: 1px solid black; cursor: pointer; 
            font-family: 'Caudex'; font-weight: 700; transition: 0.3s;
        }
        .filter-tag.active { background: var(--primary); border-color: var(--primary); }

        /* Scroll Animations */
        .reveal { opacity: 0; transform: translateY(50px); transition: 1s cubic-bezier(0.19, 1, 0.22, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* Newsletter Modal-ish Button */
        .newsletter-box { 
            margin-top: 40px; 
            padding: 30px; 
            background: rgba(0,0,0,0.03); 
            border-left: 5px solid var(--black);
        }
        .newsletter-content { display: none; margin-top: 25px; animation: fadeIn 0.5s forwards; }

        @media (max-width: 1100px) {
            .hero, .highlight-row, .insight-container, .footer-main { grid-template-columns: 1fr; }
            .card-grid, .insight-grid { grid-template-columns: 1fr 1fr; }
            .panel { width: 100%; }
            .hero-title { font-size: 3.5rem; }
        }
        .card-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
margin-top:70px;
}

.asset-card{
position:relative;
overflow:hidden;
height:420px;
cursor:pointer;
}

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

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

.asset-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:35px;
color:white;
background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
transform:translateY(60%);
transition:0.6s ease;
}

.asset-card:hover .asset-overlay{
transform:translateY(0);
}

.asset-sub{
opacity:0.8;
margin-bottom:10px;
}

.asset-text{
font-size:0.9rem;
line-height:1.6;
opacity:0.9;
}
.menu-toggle{
display:none;
cursor:pointer;
}

/* Mobile Navigation */

@media (max-width:900px){

.menu-toggle{
display:block;
font-size:28px;
}

nav{
position:fixed;
top:90px;
right:-100%;
width:260px;
height:100vh;
background:white;
flex-direction:column;
align-items:flex-start;
padding:40px 30px;
gap:25px;
box-shadow:-10px 0 30px rgba(0,0,0,0.1);
transition:0.4s;
}

nav.active{
right:0;
}

.dropdown-menu{
position:relative;
box-shadow:none;
border:none;
padding-left:10px;
}

header{
padding:0 6%;
}

}