/* ============================================== 
   STATS SECTION - PREMIUM ANIMATION
   ============================================== */

/* Small caps for M and BN */
.stats-container .stat-number .stat-unit {
    font-size: 0.65em !important;
    letter-spacing: 0.02em !important;
}

/* Vertical dividers between stats */
.stats-container .stat-item:not(:last-child)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 60% !important;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 50%,
            transparent 100%) !important;
}

/* Ultra-smooth luxury fade-in */
.stats-container .stat-item {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 1.6s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.stats-container .stat-item.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================== 
   CLIENT LOGOS - STAGGERED CASCADE
   ============================================== */

.client-logo {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: opacity 2.5s cubic-bezier(0.19, 1, 0.22, 1),
        transform 2.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.client-logo.animate {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ============================================== 
   SECTION HEADINGS - NOTICEABLE FADE
   ============================================== */

.section-title {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.section-title.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

h3 {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 1.8s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

h3.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================== 
   CORE EXPERTISE - CASCADING LIST ANIMATIONS
   ============================================== */

/* Expertise items - fade in from bottom */
.expertise-item {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.expertise-item.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Expertise list items - vertical staggered cascade */
.expertise-list li {
    opacity: 0 !important;
    transform: translateY(15px) !important;
    transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.expertise-list li.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Expertise icon - pulse animation */
.expertise-icon {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.expertise-icon.animate {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Expertise title - fade in */
.expertise-title {
    opacity: 0 !important;
    transform: translateY(15px) !important;
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.expertise-title.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

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

@media (max-width: 768px) {
    /* Stats section - match other section margins (20px uniform) */
    .stats-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Fix dividers for 2x2 grid on mobile */
    /* Remove vertical dividers between stats */
    .stats-container .stat-item:not(:last-child)::after {
        display: none !important;
    }
    
    /* Add horizontal divider after first row (between stat 2 and 3) */
    .stats-container .stat-item:nth-child(2)::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        height: 1px !important;
        background: linear-gradient(
            to right,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 50%,
            transparent 100%
        ) !important;
    }
    
    /* Client logos - bigger and better balanced */
    .client-logo {
        padding: 40px 30px !important;
        min-height: 120px !important;
    }
    
    .client-logo img {
        max-width: 140px !important;
        max-height: 60px !important;
    }
    
    /* Adjust grid for better balance */
    .clients-grid {
        gap: 20px !important;
        padding: 0 !important;
    }
}