:root {
    --primary: #0419dc;
    --dark: #012444;
    --white: #ffffff;
    --bg: #f4f7fa;
    --text-muted: #64748b;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif; 
}

body { 
    background: var(--bg); 
    color: #334155; 
    line-height: 1.6; 
    overflow-x: hidden; 
}



/* ===================== Header Starts ===================== */
header {
    position: sticky;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    top: 0;
    max-width: 100vw; /* prevent horizontal overflow */
    width: 100%; /* full width */
    padding: 1rem 3%; /* relative padding instead of fixed 50px */
    display: flex;
    justify-content: space-between;
    align-items: right;
    background-color: #fffeff;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    box-sizing: border-box; /* include padding in width */
}


header.scrolled {
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
}

.logo img {
    max-height: 50px; /* responsive max height */
    width: auto;
    display: block;
}


/* ===================== Navigation ===================== */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;          /* increase from 100% to leave small margins */
    max-width: 1400px;   /* optional, prevent it from being too wide on large screens */
    margin: 0 auto;      /* center the nav bar */
    position: relative;
    padding: 1rem 3%;
}

/* Hamburger Menu (hidden on desktop) */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #0419dc;
}

/* Desktop nav links */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.nav-links li a {
    white-space: nowrap; /* prevent breaking */
    text-decoration: none;
    color: #0419dc;
    padding: 10px 15px;
    font-size: 1.1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.nav-links li a:hover,
.nav-links li a.active {
    background-color: #0419dc;
    color: #fff;
}

/* Contact Button */
.nav-links li a.btn-contact {
    background-color: #012fa3;
    color: #fff;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.nav-links li a.btn-contact:hover {
    background-color: #012fa3;
}

/* Dropdown menu */
.nav-links li.dropdown {
    position: relative; /* for absolute positioning of dropdown */
}

.nav-links li .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1000;
    list-style: none;
    padding: 10px 0;
}

.nav-links li .dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 1rem;
    color: #012fa3;
    transition: 0.3s;
}

.nav-links li .dropdown-menu li a:hover,
.nav-links li .dropdown-menu li a.active {
    background: #012fa3;
    color: #fff;
    border-radius: 8px;
}

/* Desktop hover behavior ONLY */
@media (min-width: 1025px) {
    .nav-links li.dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* ===================== Mobile Styles ===================== */
@media (max-width: 1024px) {
    /* Show hamburger */
    .menu-toggle {
        display: block;
    }

    /* Hide nav links by default */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 10px 0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border-radius: 0 0 12px 12px;
        z-index: 999;
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .nav-links li a {
        display: block;
        width: 100%;
        padding: 12px 0;
    }

    /* Dropdowns on mobile */
    .nav-links li.dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        display: none;
        padding: 0;
        background: #f8f9fb;
    }

    .nav-links li.dropdown.active .dropdown-menu {
        display: block;
    }

    .nav-links li.dropdown .dropdown-menu li a {
        padding: 10px 0;
        text-align: center;
        color: #012fa3;
    }

    /* Make contact button full width */
    .nav-links li a.btn-contact {
        width: 90%;
        margin: 10px auto;
        text-align: center;
        padding: 12px 0;
    }
}

@media (max-width: 768px) {
    /* Adjust dropdown text alignment */
    .nav-links li.dropdown .dropdown-menu li a {
        padding: 10px 0;
        text-align: center;
    }
}

/* ===================== Header End ===================== */

/* ===================== Hero Section  Starts ===================== */
.pipeline-hero {
    position: relative; /* Essential for the layer effect */
    padding: 200px 0 120px;
    margin-top: -85px;
    text-align: center;
    color: white;
    overflow: hidden; /* Keeps the blur from bleeding outside the edges */
    background: #0f172a; /* Fallback color */
}

.pipeline-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../images/section01.webp');
    background-size: cover;
    background-position: center;
    
    /* THE BLUR SETTINGS */
    filter: blur(5px); /* Adjust pixels for more or less blur */
    transform: scale(1.1); /* Prevents white edges caused by blurring */
    
    /* THE OVERLAY (Darkens the image for better text readability) */
    background-color: rgba(15, 23, 42, 0.6); 
    background-blend-mode: overlay;
    
    z-index: 1;
}

/* Ensure your text stays on top */
.pipeline-hero > * {
    position: relative;
    z-index: 2;
}
.trust-badge { background: rgba(255,255,255,0.1); padding: 8px 20px; border-radius: 50px; font-size: 0.75rem; border: 1px solid rgba(255,255,255,0.2); letter-spacing: 2px; }
.hero-content h1 { font-size: 3.5rem; margin: 25px 0; font-weight: 700; letter-spacing: -1.5px; }
.hero-content p { max-width: 750px; margin: 0 auto; opacity: 0.85; font-size: 1.15rem; font-weight: 300; }

/* --- Stat Bar --- */
.stat-bar {
    display: flex; justify-content: space-around; align-items: center;
    background: white; padding: 40px; border-radius: 25px;
    margin-top: -55px; position: relative; z-index: 20;
    box-shadow: 0 20px 45px rgba(1, 36, 68, 0.08); text-align: center;
}
.stat-num { font-size: 2.5rem; font-weight: 700; color: var(--primary); display: inline-block; }
.stat-suffix { font-size: 1.5rem; color: var(--primary); font-weight: 700; }
.stat-label { display: block; font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 2px; margin-top: 5px; }
.stat-divider { width: 1px; background: #f1f5f9; height: 50px; }

/* --- Filter Suite --- */
.filter-suite { margin: 50px auto; position: relative; z-index: 15; }
.filter-card {
    background: white; padding: 30px; border-radius: 20px; display: flex; gap: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); align-items: flex-end; border: 1px solid #f1f5f9;
}
.filter-group { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.filter-group label { font-size: 0.8rem; font-weight: 700; color: var(--dark); text-transform: uppercase; }
.input-with-icon { position: relative; }
.input-with-icon i { position: absolute; left: 15px; top: 18px; color: #cbd5e1; }
.input-with-icon input { padding-left: 45px; }
input, select { width: 100%; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; outline: none; background: #f8fafc; font-size: 0.95rem; }
.btn-filter-main { background: var(--dark); color: white; border: none; padding: 16px 35px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.btn-filter-main:hover { background: var(--primary); transform: translateY(-2px); }

/* --- Director's Note --- */
.director-note { background: #eff6ff; border-left: 5px solid var(--primary); padding: 20px 30px; border-radius: 0 15px 15px 0; margin-bottom: 40px; font-size: 0.95rem; color: var(--dark); display: flex; align-items: center; gap: 15px; }

/* --- THE EXECUTIVE PIPELINE GRID --- */
.pipeline-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); 
    gap: 30px; 
    padding-bottom: 80px;
}

.talent-card { 
    background: #ffffff; 
    border-radius: 4px; /* Sharper corners = More serious/professional */
    position: relative;
    border: 1px solid #e5e7eb; 
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    overflow: hidden; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Deep Elevation on Hover */
.talent-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); 
    border-color: var(--primary); 
}

/* Card Badge - Vetted Protocol */
.card-badge { 
    position: absolute; top: 0; right: 0; 
    background: var(--dark); color: #fff; 
    font-size: 0.6rem; padding: 8px 16px; 
    font-weight: 700; text-transform: uppercase; 
    letter-spacing: 1.5px; z-index: 5;
}

.status-dot { 
    width: 6px; height: 6px; background: #22c55e; 
    border-radius: 50%; display: inline-block; margin-right: 6px;
}

.card-inner { padding: 40px; }

/* Visual Content */
.card-visuals { 
    display: flex; align-items: flex-start; gap: 24px; margin-bottom: 30px; 
}

.avatar-wrapper { position: relative; width: 100px; height: 120px; }

.talent-img { 
    width: 100%; height: 100%; object-fit: cover; 
    border-radius: 2px; /* Rectangular portrait looks more like a formal file */
    filter: grayscale(100%); 
    transition: 0.6s ease; 
    border: 1px solid #eee;
}

.talent-card:hover .talent-img { 
    filter: grayscale(0%); 
    transform: scale(1.02); 
}

.verify-shield { 
    position: absolute; bottom: -8px; left: -8px; /* Positioned differently for uniqueness */
    background: var(--primary); color: white; 
    width: 32px; height: 32px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 0.9rem; border: 4px solid white;
}

/* Meta Data */
.ref-code { 
    font-family: 'Inter', sans-serif; 
    font-size: 0.7rem; letter-spacing: 1px;
    color: #94a3b8; text-transform: uppercase;
}

.exp-pill { 
    display: inline-block; border-bottom: 2px solid var(--primary); 
    color: var(--dark); font-size: 0.75rem; 
    padding: 2px 0; font-weight: 800; margin-top: 10px;
}

/* Content Area */
.talent-title { 
    font-size: 1.5rem; color: var(--dark); 
    font-weight: 800; letter-spacing: -0.03em; 
    margin: 15px 0 8px; line-height: 1.2;
}

.geo-tag { font-size: 0.85rem; color: #64748b; font-weight: 500; }

.pitch-container { 
    margin: 25px 0; padding-left: 15px;
    border-left: 2px solid #e2e8f0; 
}

.pitch-text { 
    font-size: 0.95rem; color: #334155; 
    line-height: 1.7; font-weight: 400;
}

/* Skill Cloud - Understated */
.skill-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 35px; }

.skill-item { 
    /* Light blue tint background, dark blue text */
    background: rgba(43, 103, 246, 0.08); 
    color: var(--primary); 
    
    border: 1px solid rgba(43, 103, 246, 0.15);
    font-size: 0.65rem; 
    padding: 5px 12px; 
    border-radius: 4px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Subtle glow effect on card hover */
.talent-card:hover .skill-item { 
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Action Button - High Authority */
.btn-premium-action { 
    width: 100%; padding: 18px; 
    background: var(--dark); color: white; 
    border: none; border-radius: 0; /* Square button for a serious look */
    font-weight: 700; text-transform: uppercase; 
    letter-spacing: 2px; font-size: 0.8rem;
    cursor: pointer; transition: all 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 12px;
}

.btn-premium-action:hover { 
    background: var(--primary); 
    gap: 20px; /* Slight expansion effect */
}

@media (max-width: 768px) {
    .pipeline-grid { grid-template-columns: 1fr; gap: 20px; }
    .card-inner { padding: 25px; }
    .avatar-wrapper { width: 80px; height: 100px; }
    .talent-title { font-size: 1.25rem; }
}

/* --- THE EXECUTIVE GATEWAY (DUAL CTA) --- */
.dual-cta { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 0; /* Removing gap creates a seamless, monolithic professional block */
    padding: 80px 0; 
    position: relative; 
    z-index: 30; 
    clear: both;
}

.cta-card { 
    padding: 80px 60px; 
    position: relative; 
    overflow: hidden; 
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Client Gateway: Authoritative & Dark */
.client-cta { 
    background: #0f172a; 
    color: white; 
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* Talent Gateway: Clean & Precise */
.talent-cta { 
    background: #ffffff; 
    color: #0f172a; 
    border: 1px solid #e2e8f0;
}

.cta-card h3 { 
    font-size: 2.2rem; 
    margin-bottom: 20px; 
    font-weight: 800; 
    letter-spacing: -1px;
    text-transform: uppercase;
}

.cta-card p { 
    opacity: 0.7; 
    margin-bottom: 40px; 
    font-size: 1.1rem; 
    line-height: 1.6;
    max-width: 450px;
}

/* Buttons: Serious & Direct */
.btn-premium-solid, .btn-premium-outline { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 45px; 
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700; 
    transition: all 0.3s ease; 
    text-decoration: none;
    width: fit-content;
}

.btn-premium-solid { 
    background: var(--primary); 
    color: white; 
    border-radius: 2px; /* Sharp for authority */
}

.btn-premium-outline { 
    border: 1px solid #0f172a; 
    color: #0f172a; 
    border-radius: 2px;
}

.btn-premium-solid:hover { background: #1a50d1; transform: translateX(10px); }
.btn-premium-outline:hover { background: #0f172a; color: white; transform: translateX(10px); }

/* --- MEDIA RESPONSIVE LOGIC --- */

@media (max-width: 1024px) {
    .cta-card { padding: 60px 40px; }
    .cta-card h3 { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .dual-cta { 
        grid-template-columns: 1fr; /* Stack vertically for mobile */
    }
    .cta-card { 
        padding: 60px 30px; 
        text-align: center;
        align-items: center;
    }
    .client-cta { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .btn-premium-solid, .btn-premium-outline { width: 100%; } /* Full width buttons on mobile */
}

/* Mobile Adaptations */
@media (max-width: 991px) {
    header { top: 10px; width: 95%; }
    .nav-links { display: none; }
    .stat-bar { flex-direction: column; gap: 30px; padding: 30px; }
    .stat-divider { display: none; }
    .filter-card { flex-direction: column; }
    .dual-cta { grid-template-columns: 1fr; padding: 50px 0; }
    .hero-content h1 { font-size: 2.5rem; }
    .talent-grid { grid-template-columns: 1fr; }
}