/* Keyframe Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes smoothFadeUp {
    from {
        opacity: 0;
        transform: translateY(120px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-150px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth easing for better animation feel */
@keyframes smoothFadeDown {
    0% {
        opacity: 0;
        transform: translateY(-150px) scale(0.95);
    }
    60% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromTop {
    from {
        opacity: 0;
        transform: translateY(-80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Page Load Animations */
.hero-fade-down {
    opacity: 0;
    transform: translateY(-150px) scale(0.95);
    animation: smoothFadeDown 2.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity;
}

.hero-static {
    opacity: 1;
    /* No animation, remains static */
}

.hero-fade-up-delay {
    opacity: 0;
    transform: translateY(50px);
    animation: heroFadeUp 2s cubic-bezier(0.19, 1, 0.22, 1) 0.7s forwards;
    will-change: transform, opacity;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes */
.animate-on-scroll {
    opacity: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.animate-on-scroll.fade-up.in-view {
    animation: smoothFadeUp 2.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity;
}

/* Enhanced showcase section animations - Ultra Smooth */
.client-info.animate-on-scroll.fade-up {
    opacity: 0;
    transform: translateY(120px);
    will-change: transform, opacity;
}

.client-info.animate-on-scroll.fade-up.in-view {
    animation: smoothFadeUp 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Staggered animations for showcase content - Ultra Smooth */
.client-info.in-view .client-name {
    opacity: 0;
    transform: translateY(100px);
    will-change: transform, opacity;
    animation: smoothFadeUp 2s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
}

.client-info.in-view .project-details {
    opacity: 0;
    transform: translateY(100px);
    will-change: transform, opacity;
    animation: smoothFadeUp 2s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
}

.client-info.in-view .client-description {
    opacity: 0;
    transform: translateY(100px);
    will-change: transform, opacity;
    animation: smoothFadeUp 2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards;
}

.client-info.in-view .portfolio-cta-group,
.client-info.in-view > div[style*="display: flex"] {
    opacity: 0;
    transform: translateY(100px);
    will-change: transform, opacity;
    animation: smoothFadeUp 2s cubic-bezier(0.19, 1, 0.22, 1) 0.6s forwards;
}

.client-info.in-view .cta-button {
    opacity: 0;
    transform: translateY(100px);
    will-change: transform, opacity;
    animation: smoothFadeUp 2s cubic-bezier(0.19, 1, 0.22, 1) 0.7s forwards;
}

/* Ensure initial states */
.client-info .client-name,
.client-info .project-details,
.client-info .client-description,
.client-info .portfolio-cta-group,
.client-info > div[style*="display: flex"] {
    opacity: 0;
    transform: translateY(100px);
}

.animate-on-scroll.zoom-in.in-view {
    animation: zoomIn 0.8s ease forwards;
}

.animate-on-scroll.slide-from-left.in-view {
    animation: slideFromLeft 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity;
}

.animate-on-scroll.slide-from-right.in-view {
    animation: slideFromRight 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity;
}

/* Project card image animations */
.project-image-down {
    opacity: 0;
    transform: translateY(-80px);
    will-change: transform, opacity;
}

.portfolio-project-card.in-view .project-image-down {
    animation: slideFromTop 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    will-change: transform, opacity;
}

/* Project card text and button animations */
.portfolio-project-card h3,
.portfolio-project-card > div,
.portfolio-project-card .portfolio-visit-btn {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

.portfolio-project-card.in-view h3 {
    animation: slideFromBottom 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
    will-change: transform, opacity;
}

.portfolio-project-card.in-view > div {
    animation: slideFromBottom 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
    will-change: transform, opacity;
}

.portfolio-project-card.in-view .portfolio-visit-btn {
    animation: slideFromBottom 1.8s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards;
    will-change: transform, opacity;
}

.animate-on-scroll.fade-in.in-view {
    animation: fadeIn 0.8s ease forwards;
}

/* When element comes into view (default fade-in) */
.animate-on-scroll.in-view {
    opacity: 1;
    animation: fadeIn 0.8s ease forwards;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Responsive Grid Styles */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Hover Effects */
.bg-white.shadow-lg:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Ensure images don't overflow */
img, .aspect-video {
    max-width: 100%;
    height: auto;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    /* MOBILE FIRST: Universal button override - ALL buttons 180px width, text wraps */
    /* This must come first to override everything */
    .cta-button,
    .portfolio-visit-btn,
    a.cta-button,
    a.portfolio-visit-btn,
    [class*="cta-button"],
    [class*="portfolio-visit-btn"],
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button,
    .client-info .cta-button,
    .client-showcase a.cta-button,
    .client-info a.cta-button,
    .portfolio-project-card .portfolio-visit-btn,
    .explore-projects-btn,
    .bg-gray-900,
    a.explore-projects-btn,
    a.bg-gray-900,
    .portfolio-hero__actions a.explore-projects-btn,
    .portfolio-hero__actions a.bg-gray-900,
    a[style*="padding: 14px 28px"],
    a[style*="padding:14px 28px"],
    a[style*="min-width: 200px"],
    a[style*="min-width:200px"],
    a[style*="flex: 1"],
    a[style*="flex:1"],
    a[style*="width: 100%"],
    a[style*="width:100%"],
    a[style*="white-space: nowrap"],
    a[style*="white-space:nowrap"],
    a[style*="white-space:nowrap"],
    a[style*="white-space: nowrap"],
    .client-showcase a[style*="flex: 1"],
    .client-info a[style*="flex: 1"],
    a[style*="white-space: nowrap"].cta-button,
    a[style*="white-space:nowrap"].cta-button,
    a[style*="white-space: nowrap"].portfolio-visit-btn,
    a[style*="white-space:nowrap"].portfolio-visit-btn {
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        flex: none !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Button containers - stack vertically, center */
    .portfolio-hero__actions,
    .portfolio-cta-group,
    .client-showcase .client-info > div[style*="display: flex"],
    .client-showcase > div[style*="display: flex"],
    div[style*="display: flex"][style*="gap: 16px"] {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    /* Hero Section */
    .relative.min-h-screen .text-center h1 {
        font-size: 2rem !important;
        margin-top: 40px !important;
    }
    
    .relative.min-h-screen .text-center p {
        font-size: 1rem !important;
    }
    
    /* Stats Section */
    .flex.flex-wrap.justify-center {
        gap: 1rem !important;
    }
    
    /* Client Showcase */
    .client-showcase {
        padding: 40px 0 !important;
        margin-top: 0 !important;
    }
    
    .showcase-container {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .client-image {
        height: 300px !important;
        order: 1 !important;
    }
    
    .client-info {
        order: 2 !important;
    }
    
    .client-name {
        font-size: 1.5rem !important;
    }
    
    .detail-label {
        min-width: 120px !important;
    }
    
    /* Project Grid */
    .grid-template-columns {
        grid-template-columns: 1fr !important;
    }
    
    /* MOBILE ONLY: Buttons - Smaller size, stacked vertically, centered */
    .portfolio-cta-group,
    .client-showcase .client-info > div[style*="display: flex"],
    .client-showcase > div[style*="display: flex"],
    div[style*="display: flex"][style*="gap: 16px"] {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    /* MOBILE: All buttons same size - match card button width */
    .cta-button,
    .portfolio-visit-btn,
    a.cta-button,
    a.portfolio-visit-btn,
    [class*="cta-button"],
    [class*="portfolio-visit-btn"],
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button,
    .client-info .cta-button,
    .client-showcase a.cta-button,
    .client-info a.cta-button,
    .portfolio-project-card .portfolio-visit-btn,
    .explore-projects-btn,
    .bg-gray-900,
    a.explore-projects-btn,
    a.bg-gray-900,
    .portfolio-hero__actions a.explore-projects-btn,
    .portfolio-hero__actions a.bg-gray-900,
    a[style*="flex: 1"].cta-button,
    a[style*="min-width: 200px"].cta-button {
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        margin-bottom: 0.5rem !important;
        display: inline-flex !important;
        justify-content: center !important;
        text-align: center !important;
        flex: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Override desktop flex for showcase buttons - make them same size */
    .client-showcase .cta-button,
    .client-showcase a.cta-button,
    .portfolio-cta-group .cta-button {
        flex: none !important;
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Hero button container - center buttons */
    .portfolio-hero__actions {
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Container padding */
    .container {
        padding: 0 15px !important;
    }
    
    /* Adjust spacing */
    .mb-16 {
        margin-bottom: 2rem !important;
    }
    
    /* Adjust font sizes for mobile */
    h2.text-4xl {
        font-size: 1.75rem !important;
    }
    
    /* Adjust image heights in project cards */
    .client-image img {
        height: 200px !important;
    }
}

@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .client-name {
        font-size: 1.25rem !important;
    }
    
    .detail-label {
        min-width: 100px !important;
        display: block !important;
        margin-bottom: 5px !important;
    }
    
    .detail-item {
        margin-bottom: 15px !important;
    }
    
    /* Button adjustments */
    .flex.flex-col.sm\:flex-row {
        gap: 10px !important;
    }
    
    /* MOBILE (480px): All buttons same size - match card button width */
    .explore-projects-btn,
    .bg-gray-900,
    a.explore-projects-btn,
    a.bg-gray-900,
    .portfolio-hero__actions a.explore-projects-btn,
    .portfolio-hero__actions a.bg-gray-900,
    .cta-button,
    .portfolio-visit-btn,
    a.cta-button,
    a.portfolio-visit-btn,
    [class*="cta-button"],
    [class*="portfolio-visit-btn"],
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button,
    .portfolio-project-card .portfolio-visit-btn {
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Hero button container - center buttons */
    .portfolio-hero__actions {
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Stats adjustments */
    .flex.flex-wrap.justify-center .text-center {
        flex: 0 0 30% !important;
    }
    
    .text-2xl {
        font-size: 1.5rem !important;
    }
}



/* Updated Hero Section Styles */
.portfolio-hero {
    position: relative;
    min-height: clamp(420px, 80vh, 720px);
    padding: clamp(10px, 3vh, 20px) 0 clamp(32px, 10vh, 72px);
}

.text-center.text-black.px-4 {
    z-index:2 !important;
    max-width: 900px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Main Heading - Digital Excellence Portfolio */
.text-center h1 {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

/* Gradient Text */
.text-center h1 span {
    background: linear-gradient(135deg, #3498db, #9b59b6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: block !important;
    margin-top: 0.5rem !important;
}

/* Subheading */
.text-center .text-lg.md\:text-xl {
    font-size: 1.4rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

/* Description */
.text-center .text-base.md\:text-lg {
    font-size: 1.1rem !important;
    margin-bottom: 2.5rem !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
}

/* Buttons Container */
.flex.flex-col.sm\:flex-row {
    margin-bottom: 3rem !important;
    gap: 20px !important;
}

/* Individual Buttons */
.explore-projects-btn,
.bg-gray-900 {
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 200px !important;
}

.explore-projects-btn {
    background: linear-gradient(135deg, #3498db, #2980b9) !important;
    color: white !important;
}

.bg-gray-900 {
    background: linear-gradient(135deg, #374151, #111827) !important;
    color: white !important;
}

/* Stats Section */
.flex.flex-wrap.justify-center {
    gap: 3rem !important;
    margin-top: 2rem !important;
}

/* Individual Stat Items */
.flex.flex-wrap.justify-center .text-center {
    flex: 0 0 auto !important;
}

.flex.flex-wrap.justify-center .text-2xl {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 0.5rem !important;
}

.flex.flex-wrap.justify-center .text-sm {
    color: #6b7280 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .text-center h1 {
        font-size: 2.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .text-center .text-lg.md\:text-xl {
        font-size: 1.2rem !important;
    }
    
    .text-center .text-base.md\:text-lg {
        font-size: 1rem !important;
    }
    
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* MOBILE: All buttons same size - 180px width */
    .explore-projects-btn,
    .bg-gray-900,
    a.explore-projects-btn,
    a.bg-gray-900,
    .portfolio-hero__actions a.explore-projects-btn,
    .portfolio-hero__actions a.bg-gray-900,
    .cta-button,
    .portfolio-visit-btn,
    a.cta-button,
    a.portfolio-visit-btn,
    [class*="cta-button"],
    [class*="portfolio-visit-btn"],
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button,
    .client-info .cta-button,
    .portfolio-project-card .portfolio-visit-btn {
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        text-align: center !important;
        flex: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Button containers - stack vertically, center */
    .portfolio-hero__actions,
    .portfolio-cta-group,
    .client-showcase .client-info > div[style*="display: flex"],
    .client-showcase > div[style*="display: flex"],
    div[style*="display: flex"][style*="gap: 16px"] {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    .flex.flex-wrap.justify-center {
        gap: 2rem !important;
    }
    
    .flex.flex-wrap.justify-center .text-2xl {
        font-size: 2rem !important;
    }
}

@media (max-width: 480px) {
    .text-center h1 {
        font-size: 2rem !important;
    }
    
    .text-center .text-lg.md\:text-xl {
        font-size: 1.1rem !important;
    }
    
    .flex.flex-wrap.justify-center {
        gap: 1.5rem !important;
    }
    
    .flex.flex-wrap.justify-center .text-2xl {
        font-size: 1.75rem !important;
    }
}

/* Legacy hover-up utility – kept lightweight */
.hover-up-2 {
    transition: transform 0.3s ease;
}
@media (max-width: 768px) {
    .showcase-container {
        flex-direction: column-reverse !important;
    }
    
    /* For sections where image should be on top */
    .client-showcase .showcase-container {
        flex-direction: column !important;
    }
    
    .client-image, .client-info {
        flex: 1 0 100% !important;
        max-width: 100% !important;
    }
    
    .client-image {
        height: 300px !important;
        margin-bottom: 30px !important;
    }
    
    /* MOBILE ONLY: Buttons - Smaller size, stacked vertically, centered */
    .client-showcase .flex.flex-wrap,
    .portfolio-cta-group,
    .client-showcase .client-info > div[style*="display: flex"],
    .client-showcase > div[style*="display: flex"],
    div[style*="display: flex"][style*="gap: 16px"] {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    /* MOBILE: All buttons same size - match card button width - override ALL styles */
    .cta-button,
    .portfolio-visit-btn,
    a.cta-button,
    a.portfolio-visit-btn,
    [class*="cta-button"],
    [class*="portfolio-visit-btn"],
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button,
    .client-info .cta-button,
    .client-showcase a.cta-button,
    .client-info a.cta-button,
    .portfolio-project-card .portfolio-visit-btn,
    .explore-projects-btn,
    .bg-gray-900,
    a.explore-projects-btn,
    a.bg-gray-900,
    .portfolio-hero__actions a.explore-projects-btn,
    .portfolio-hero__actions a.bg-gray-900,
    a[style*="flex: 1"].cta-button,
    a[style*="min-width: 200px"].cta-button,
    .client-showcase a[style*="flex: 1"],
    .client-info a[style*="flex: 1"] {
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        text-align: center !important;
        display: inline-flex !important;
        justify-content: center !important;
        flex: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Strong override - showcase buttons same size as card buttons */
    .client-showcase .cta-button,
    .client-showcase a.cta-button,
    .portfolio-cta-group .cta-button,
    .client-info .cta-button,
    .client-info a.cta-button,
    .client-showcase a[style*="flex: 1"],
    .client-info a[style*="flex: 1"],
    .client-showcase a[style*="min-width: 200px"],
    .client-info a[style*="min-width: 200px"],
    a[style*="flex: 1"].cta-button,
    a[style*="min-width: 200px"].cta-button {
        flex: none !important;
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
}

/* Modern responsive overrides */
:root {
    --portfolio-spacing: clamp(40px, 7vw, 80px);
    --portfolio-card-radius: 12px;
    --portfolio-border: 1px solid #e5e7eb;
    --portfolio-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.portfolio-hero {
    position: relative;
    min-height: auto !important;
    height: auto !important;
    padding: clamp(10px, 3vh, 20px) 0 clamp(32px, 8vh, 60px) !important;
}

@supports (min-height: 100dvh) {
    .portfolio-hero {
        min-height: 100dvh !important;
    }
}

.portfolio-hero__content {
    max-width: min(900px, 92vw) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.portfolio-hero__title {
    font-size: clamp(2.25rem, 6vw, 3.5rem) !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

.portfolio-hero__title span {
    display: inline-block;
    background: linear-gradient(135deg, #3498db, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-hero__actions {
    width: min(520px, 100%);
    margin: 0 auto 2.5rem !important;
    gap: 20px !important;
}

.portfolio-hero__stats {
    gap: clamp(1.25rem, 4vw, 3rem) !important;
    margin-top: 2rem !important;
}

.portfolio-hero__stats > div {
    min-width: 120px;
}

.portfolio-hero__stats > div .text-2xl {
    display: block;
}

.portfolio-hero__stats .text-2xl {
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
}

.portfolio-hero__stats .text-sm {
    font-size: 0.9rem !important;
}

.client-showcase {
    padding: var(--portfolio-spacing) 0 !important;
    margin-top: 0 !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.client-showcase .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.showcase-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 6vw, 60px);
}

.client-image {
    flex: 1 1 420px !important;
    min-width: 260px !important;
    height: clamp(260px, 45vw, 520px) !important;
    border-radius: var(--portfolio-card-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--portfolio-shadow) !important;
}

.client-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.client-image:hover img {
    transform: scale(1.03);
}

.client-info {
    flex: 1 1 420px !important;
    min-width: 260px !important;
}

.client-name {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    line-height: 1.3 !important;
}

.detail-label {
    min-width: 150px !important;
    display: inline-block;
    font-weight: 600;
    color: #000;
}

.portfolio-cta-group,
.client-showcase .client-info > div[style*="display: inline-flex"],
.client-showcase .client-info > div[style*="display:inline-flex"],
.client-showcase .client-info > div[style*="display: flex"],
.client-showcase .client-info > div[style*="display:flex"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Desktop only: Buttons can flex */
@media (min-width: 769px) {
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button {
        flex: 1 1 240px !important;
        min-width: 0 !important;
        white-space: normal !important;
        text-align: center !important;
        padding: 14px 22px !important;
    }
}

.portfolio-grid-section {
    position: relative;
    padding: var(--portfolio-spacing) 0 !important;
    background-color: #262E36;
    overflow: hidden;
}

.portfolio-grid-section .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 3vw, 32px);
}

.portfolio-project-card {
    background: #fff;
    border: var(--portfolio-border);
    border-radius: var(--portfolio-card-radius);
    padding: 1.5rem;
    box-shadow: var(--portfolio-shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(0) scale(1);
    will-change: transform, box-shadow;
    position: relative;
    z-index: 1;
    backface-visibility: hidden;
    perspective: 1000px;
}

.portfolio-project-card:hover {
    transform: translateY(-10px) scale(1.05) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
    z-index: 2 !important;
}

.portfolio-project-card img {
    height: 220px;
    object-fit: cover;
    border-radius: var(--portfolio-card-radius);
}

.portfolio-visit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    will-change: transform, box-shadow;
}

.portfolio-visit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.35);
}

@media (max-width: 1024px) {
    .portfolio-hero__actions {
        width: 100%;
    }
    .portfolio-hero__stats {
        justify-content: center;
    }
    .client-image,
    .client-info {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .portfolio-hero {
        padding: 20px 0 !important;
    }
    .portfolio-hero__actions {
        flex-direction: column !important;
        width: 100%;
    }
    .portfolio-hero__stats {
        gap: 1.5rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .client-showcase {
        padding: 48px 0 !important;
    }
    .showcase-container {
        flex-direction: column !important;
    }
    .client-image {
        height: 320px !important;
    }
    .portfolio-grid-section .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    /* MOBILE ONLY: Buttons - Smaller size, stacked vertically, centered */
    .portfolio-cta-group,
    .client-showcase .client-info > div[style*="display: flex"],
    .client-showcase > div[style*="display: flex"],
    div[style*="display: flex"][style*="gap: 16px"] {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    
    /* MOBILE: All buttons same size - match card button width - override desktop flex */
    .cta-button,
    .portfolio-visit-btn,
    a.cta-button,
    a.portfolio-visit-btn,
    [class*="cta-button"],
    [class*="portfolio-visit-btn"],
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button,
    .client-info .cta-button,
    .client-showcase a.cta-button,
    .client-info a.cta-button,
    .portfolio-project-card .portfolio-visit-btn,
    .explore-projects-btn,
    .bg-gray-900,
    a.explore-projects-btn,
    a.bg-gray-900,
    .portfolio-hero__actions a.explore-projects-btn,
    .portfolio-hero__actions a.bg-gray-900,
    a[style*="flex: 1"].cta-button,
    a[style*="min-width: 200px"].cta-button,
    .client-showcase a[style*="flex: 1"],
    .client-info a[style*="flex: 1"] {
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        text-align: center !important;
        flex: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Strong override for showcase buttons - same size as card buttons */
    .client-showcase .cta-button,
    .client-showcase a.cta-button,
    .portfolio-cta-group .cta-button,
    .client-info .cta-button,
    .client-info a.cta-button,
    .client-showcase a[style*="flex: 1"],
    .client-info a[style*="flex: 1"],
    .client-showcase a[style*="min-width: 200px"],
    .client-info a[style*="min-width: 200px"] {
        flex: none !important;
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    
    /* MOBILE: Hero button container - center buttons */
    .portfolio-hero__actions {
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (min-width: 768px) {
    .portfolio-hero__stats {
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }
    .portfolio-hero__stats > div {
        flex: 1 1 auto !important;
    }
}

@media (max-width: 640px) {
    .portfolio-hero__title {
        font-size: 2rem !important;
    }
    .portfolio-hero__stats > div {
        flex: 1 1 45%;
    }
    .detail-label {
        min-width: 0 !important;
        display: block;
        margin-bottom: 4px;
    }
    .client-image {
        height: 260px !important;
    }
    /* MOBILE: All buttons same size - override flex and width */
    .portfolio-cta-group .cta-button,
    .client-showcase .cta-button,
    .client-info .cta-button,
    .client-showcase a.cta-button,
    .client-info a.cta-button,
    a[style*="flex: 1"].cta-button,
    a[style*="min-width: 200px"].cta-button {
        min-width: 180px !important;
        max-width: 180px !important;
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        margin: 0 auto !important;
        flex: none !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
    }
    .portfolio-project-card img {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .portfolio-hero__stats {
        flex-direction: column !important;
        align-items: center;
    }
    .portfolio-hero__stats > div {
        width: 100%;
        text-align: center;
    }
}