/* ═══════════════════════════════════════
   Vila System Cases – Archive
   Elementor-proof, all states explicit
═══════════════════════════════════════ */

:root {
    --vs-green-dark: #2d6a4f;
    --vs-green-mid: #40916c;
    --vs-green-light: #52b788;
    --vs-green-hero: #2d6a4f;
    --vs-bg-white: #ffffff;
    --vs-bg-off: #f8f8f6;
    --vs-bg-card: #f5f5f3;
    --vs-text-dark: #1a1a1a;
    --vs-text-mid: #4a4a4a;
    --vs-text-light: #888888;
    --vs-text-on-green: #ffffff;
    --vs-text-on-green-muted: rgba(255,255,255,0.6);
    --vs-divider: #e2e2e0;
    --vs-divider-green: rgba(255,255,255,0.15);
    --vs-padding-x: 3%;
    --vs-header-height: 80px;
    --v-radius: 5px 12px 5px 12px;
    --v-radius-flip: 12px 5px 12px 5px;
}

/* ───────────────────────────────────────
   Wrapper Reset (Elementor override)
─────────────────────────────────────── */
.vs-cases-wrapper,
.vs-cases-wrapper *,
.vs-cases-wrapper *::before,
.vs-cases-wrapper *::after {
    box-sizing: border-box !important;
}

.vs-cases-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    color: var(--vs-text-dark) !important;
    background-color: var(--vs-bg-white) !important;
    -webkit-font-smoothing: antialiased !important;
    overflow-x: hidden !important;
}

.vs-cases-wrapper img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.vs-cases-hero {
    background-color: var(--vs-green-hero) !important;
    padding: 0 var(--vs-padding-x) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: calc(-1 * var(--vs-header-height)) !important;
    padding-top: 200px !important;
}

.vs-cases-hero-blur {
    position: absolute !important;
    inset: -40px !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
.vs-cases-hero-blur img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: blur(20px) brightness(.5) !important;
    transform: scale(1.12) !important;
    display: block !important;
}
.vs-cases-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: rgba(45,106,79,0.72) !important;
    pointer-events: none !important;
}

.vs-cases-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -200px !important;
    right: -200px !important;
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(circle, rgba(82,183,136,0.15) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.vs-cases-hero::after {
    content: '' !important;
    position: absolute !important;
    bottom: -150px !important;
    left: -100px !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.vs-cases-hero-content {
    position: relative !important;
    z-index: 2 !important;
    padding-bottom: 70px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
    background-color: transparent !important;
}

.vs-cases-hero-label {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--vs-green-light) !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background-color: transparent !important;
}

.vs-cases-hero-label-line {
    width: 40px !important;
    height: 1px !important;
    background-color: var(--vs-green-light) !important;
}

.vs-cases-hero-title {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: clamp(36px, 5vw, 62px) !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    color: var(--vs-text-on-green) !important;
    margin-bottom: 24px !important;
    background-color: transparent !important;
}

.vs-cases-hero-title strong {
    font-weight: 600 !important;
}

.vs-cases-hero-desc {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,0.8) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    background-color: transparent !important;
}

.vs-cases-hero-divider {
    width: 100% !important;
    height: 1px !important;
    background-color: var(--vs-divider-green) !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Stats */
.vs-cases-hero-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 60px !important;
    padding: 32px 0 !important;
    margin-top: 40px !important;
    border-top: 1px solid var(--vs-divider-green) !important;
    background-color: transparent !important;
}

.vs-cases-hero-stat {
    background-color: transparent !important;
    text-align: center !important;
}

.vs-cases-hero-stat-number {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--vs-text-on-green) !important;
}

.vs-cases-hero-stat-label {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.8) !important;
    margin-top: 4px !important;
}

/* ═══════════════════════════════════════
   LOADING BAR
═══════════════════════════════════════ */
.vs-cases-loading-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--vs-green-dark), var(--vs-green-light), var(--vs-green-dark)) !important;
    background-size: 200% 100% !important;
    z-index: 100 !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    animation: vs-shimmer 1.5s ease infinite !important;
}

.vs-cases-loading-bar.active {
    opacity: 1 !important;
}

@keyframes vs-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════ */
.vs-cases-main {
    background-color: var(--vs-bg-white) !important;
    padding: 0 var(--vs-padding-x) !important;
}

.vs-cases-full-divider {
    width: 100vw !important;
    margin-left: calc(-1 * var(--vs-padding-x)) !important;
    height: 1px !important;
    background-color: var(--vs-divider) !important;
}

.vs-cases-layout {
    display: flex !important;
    gap: 0 !important;
    padding-top: 50px !important;
    background-color: var(--vs-bg-white) !important;
}

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.vs-cases-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    position: sticky !important;
    top: 30px !important;
    align-self: flex-start !important;
    padding-right: 50px !important;
    padding-bottom: 60px !important;
    background-color: transparent !important;
}

.vs-cases-sidebar-group {
    margin-bottom: 28px !important;
    background-color: transparent !important;
}

.vs-cases-sidebar-group-label {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--vs-text-light) !important;
    padding-bottom: 14px !important;
    background-color: transparent !important;
}

.vs-cases-sidebar-divider {
    height: 1px !important;
    background-color: var(--vs-divider) !important;
    margin: 8px 14px 28px !important;
}

.vs-cases-sidebar-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    border-radius: 5px 12px 5px 12px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    margin-bottom: 2px !important;
    position: relative !important;
    background-color: transparent !important;
    border: none !important;
    text-decoration: none !important;
    outline: none !important;
}

.vs-cases-sidebar-item:hover,
.vs-cases-sidebar-item:focus,
.vs-cases-sidebar-item:active {
    background-color: var(--vs-bg-off) !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}

.vs-cases-sidebar-item:hover .vs-cases-sidebar-item-name {
    color: var(--vs-text-dark) !important;
}

.vs-cases-sidebar-item:hover .vs-cases-sidebar-icon svg {
    stroke: var(--vs-text-mid) !important;
}

.vs-cases-sidebar-item.active {
    background-color: rgba(45, 106, 79, 0.06) !important;
}

.vs-cases-sidebar-item.active:hover,
.vs-cases-sidebar-item.active:focus,
.vs-cases-sidebar-item.active:active {
    background-color: rgba(45, 106, 79, 0.08) !important;
}

.vs-cases-sidebar-item.active .vs-cases-sidebar-icon svg {
    stroke: var(--vs-green-mid) !important;
}

.vs-cases-sidebar-item.active .vs-cases-sidebar-item-name {
    color: var(--vs-green-dark) !important;
    font-weight: 500 !important;
}

.vs-cases-sidebar-item.active .vs-cases-sidebar-item-count {
    color: var(--vs-green-mid) !important;
    background-color: rgba(45, 106, 79, 0.1) !important;
}

.vs-cases-sidebar-icon {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
}

.vs-cases-sidebar-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--vs-text-light) !important;
    stroke-width: 1.5 !important;
    fill: none !important;
    transition: stroke 0.3s ease !important;
}

.vs-cases-sidebar-item-name {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--vs-text-mid) !important;
    transition: color 0.3s ease !important;
    flex: 1 !important;
    background-color: transparent !important;
}

.vs-cases-sidebar-item-count {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--vs-text-light) !important;
    background-color: rgba(0,0,0,0.04) !important;
    padding: 2px 8px !important;
    border-radius: 5px 12px 5px 12px !important;
    transition: all 0.3s ease !important;
}

/* ═══════════════════════════════════════
   VERTICAL DIVIDER
═══════════════════════════════════════ */
.vs-cases-vertical-divider {
    width: 1px !important;
    background-color: var(--vs-divider) !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════
   CONTENT
═══════════════════════════════════════ */
.vs-cases-content {
    flex: 1 !important;
    padding-left: 50px !important;
    padding-bottom: 120px !important;
    background-color: transparent !important;
    min-width: 0 !important;
}

.vs-cases-content-header {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-bottom: 40px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--vs-divider) !important;
    background-color: transparent !important;
}

.vs-cases-content-title {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--vs-text-dark) !important;
    background-color: transparent !important;
}

.vs-cases-content-count {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 13px !important;
    color: var(--vs-text-light) !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════
   CASES GRID
═══════════════════════════════════════ */
.vs-cases-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════
   CASE CARD
═══════════════════════════════════════ */
.vs-cases-card {

    position: relative !important;
    border-radius: 5px 12px 5px 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background-color: #0a0a0a !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.5s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    border: none !important;
    text-decoration: none !important;
    display: block !important;
    color: inherit !important;
}

.vs-cases-card:hover,
.vs-cases-card:focus,
.vs-cases-card:active,
.vs-cases-card:visited {
    background-color: #0a0a0a !important;
    text-decoration: none !important;
    color: inherit !important;
    border: none !important;
    outline: none !important;
}

.vs-cases-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
}

.vs-cases-card:hover .vs-cases-card-img img {
    transform: scale(1.05) !important;
}

.vs-cases-card:hover .vs-cases-card-overlay {
    opacity: 1 !important;
}

.vs-cases-card:hover .vs-cases-card-arrow {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.vs-cases-card-img {
    width: 100% !important;
    height: 280px !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #111 !important;
}

.vs-cases-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    display: block !important;
}

.vs-cases-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
    pointer-events: none !important;
}

.vs-cases-card-arrow {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 38px !important;
    height: 38px !important;
    background-color: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 5px 12px 5px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: translate(-8px, 8px) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.vs-cases-card-arrow svg {
    width: 15px !important;
    height: 15px !important;
    stroke: white !important;
    stroke-width: 2 !important;
    fill: none !important;
}

.vs-cases-card-info {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    background-color: #0a0a0a !important;
    min-height: 110px !important;
}

/* Duplicated blurred background image */
.vs-cases-card-info-bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.vs-cases-card-info-bg img {
    width: 100% !important;
    height: 300% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    filter: blur(10px) !important;
    -webkit-filter: blur(10px) !important;
    transform: scale(1.1) !important;
    display: block !important;
    opacity: 0.45 !important;
}

/* Gradient overlay: solid black bottom fading to transparent top */
.vs-cases-card-info-gradient {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, #0a0a0a 15%, rgba(10,10,10,0.85) 50%, rgba(10,10,10,0.4) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Content sits on top */
.vs-cases-card-info-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 22px 24px !important;
    background-color: transparent !important;
}

.vs-cases-card-tag {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--vs-green-light) !important;
    margin-bottom: 8px !important;
    background-color: transparent !important;
}

.vs-cases-card-name {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
    background-color: transparent !important;
}

.vs-cases-card-meta {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.75) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: transparent !important;
}

.vs-cases-card-meta-dot {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background-color: rgba(255,255,255,0.35) !important;
}

/* ═══════════════════════════════════════
   DECORATIVE DIVIDER
═══════════════════════════════════════ */
.vs-cases-deco-divider {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 50px 0 !important;
    background-color: transparent !important;
}

.vs-cases-deco-line {
    flex: 1 !important;
    height: 1px !important;
    background-color: var(--vs-divider) !important;
}

.vs-cases-deco-diamond {
    width: 6px !important;
    height: 6px !important;
    background-color: var(--vs-green-mid) !important;
    transform: rotate(45deg) !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════ */
.vs-cases-cta {
    text-align: center !important;
    padding: 80px var(--vs-padding-x) !important;
    background-color: var(--vs-bg-off) !important;
}

.vs-cases-cta-label {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--vs-green-mid) !important;
    margin-bottom: 20px !important;
    background-color: transparent !important;
}

.vs-cases-cta-title {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: clamp(26px, 3.5vw, 42px) !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    color: var(--vs-text-dark) !important;
    margin-bottom: 16px !important;
    background-color: transparent !important;
}

.vs-cases-cta-title strong {
    font-weight: 600 !important;
}

.vs-cases-cta-desc {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 16px !important;
    color: var(--vs-text-mid) !important;
    max-width: 460px !important;
    margin: 0 auto 36px !important;
    line-height: 1.7 !important;
    background-color: transparent !important;
}

.vs-cases-cta-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 36px !important;
    background-color: var(--vs-green-dark) !important;
    color: white !important;
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-radius: 5px 12px 5px 12px !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
}

.vs-cases-cta-button:hover,
.vs-cases-cta-button:focus {
    background-color: var(--vs-green-mid) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

.vs-cases-cta-button:active {
    background-color: var(--vs-green-dark) !important;
    color: white !important;
    border: none !important;
}

.vs-cases-cta-button:visited {
    background-color: var(--vs-green-dark) !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
}

.vs-cases-cta-button svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    fill: none !important;
}

/* ═══════════════════════════════════════
   RESPONSIVE – 1024px (TABLET LANDSCAPE)
═══════════════════════════════════════ */
@media (max-width: 1024px) {
    .vs-cases-hero {
        min-height: 420px !important;
    }
    .vs-cases-hero-stats {
        gap: 40px !important;
    }
    .vs-cases-layout {
        flex-direction: column !important;
    }
    .vs-cases-vertical-divider {
        display: none !important;
    }
    .vs-cases-sidebar {
        width: 100% !important;
        min-width: unset !important;
        position: relative !important;
        top: unset !important;
        padding-right: 0 !important;
        padding-bottom: 24px !important;
        margin-bottom: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .vs-cases-sidebar-inner {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }
    .vs-cases-sidebar-inner::-webkit-scrollbar {
        display: none !important;
    }
    .vs-cases-sidebar-group {
        display: contents !important;
    }
    .vs-cases-sidebar-group-label {
        display: none !important;
    }
    .vs-cases-sidebar-divider {
        display: none !important;
    }
    .vs-cases-sidebar-item {
        padding: 8px 14px !important;
        background-color: var(--vs-bg-off) !important;
        border-radius: 5px 12px 5px 12px !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .vs-cases-sidebar-item:hover,
    .vs-cases-sidebar-item:focus {
        background-color: #eeeeec !important;
    }
    .vs-cases-sidebar-item.active {
        background-color: rgba(45, 106, 79, 0.1) !important;
    }
    .vs-cases-sidebar-icon {
        display: none !important;
    }
    .vs-cases-sidebar-item-count {
        display: none !important;
    }
    .vs-cases-content {
        padding-left: 0 !important;
    }
    .vs-cases-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE – 768px (TABLET PORTRAIT)
═══════════════════════════════════════ */
@media (max-width: 768px) {
    .vs-cases-hero {
        min-height: auto !important;
        padding-top: 140px !important;
    }
    .vs-cases-hero-title {
        font-size: clamp(28px, 5.5vw, 42px) !important;
    }
    .vs-cases-hero-desc {
        font-size: 15px !important;
    }
    .vs-cases-hero-stats {
        gap: 32px !important;
    }
    .vs-cases-hero-stat-number {
        font-size: 24px !important;
    }
    .vs-cases-hero-stat-label {
        font-size: 12px !important;
    }
    .vs-cases-hero-content {
        padding-bottom: 50px !important;
    }
    .vs-cases-sidebar-inner {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }
    .vs-cases-sidebar-inner::-webkit-scrollbar {
        display: none !important;
    }
    .vs-cases-sidebar-group {
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }
    .vs-cases-sidebar-item {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .vs-cases-sidebar-item-name {
        font-size: 12px !important;
    }
    .vs-cases-content-header {
        margin-bottom: 28px !important;
        padding-bottom: 16px !important;
    }
    .vs-cases-content-title {
        font-size: 20px !important;
    }
    .vs-cases-grid {
        gap: 18px !important;
    }
    .vs-cases-card-img {
        height: 240px !important;
    }
    .vs-cases-card-info-content {
        padding: 18px 20px !important;
    }
    .vs-cases-card-name {
        font-size: 15px !important;
    }
    .vs-cases-cta {
        padding: 60px var(--vs-padding-x) !important;
    }
    .vs-cases-cta-title {
        font-size: clamp(22px, 4vw, 34px) !important;
    }
    .vs-cases-cta-desc {
        font-size: 15px !important;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE – 600px (MOBILE)
═══════════════════════════════════════ */
@media (max-width: 600px) {
    :root {
        --vs-padding-x: 6% !important;
    }
    .vs-cases-hero {
        padding-top: 160px !important;
    }
    .vs-cases-hero-title {
        font-size: clamp(24px, 6.5vw, 36px) !important;
    }
    .vs-cases-hero-desc {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
    .vs-cases-hero-stats {
        gap: 24px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .vs-cases-hero-stat-number {
        font-size: 22px !important;
    }
    .vs-cases-hero-stat-label {
        font-size: 11px !important;
    }
    .vs-cases-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .vs-cases-card-img {
        border-radius: 5px 12px 5px 12px !important;
        height: 220px !important;
    }
    .vs-cases-card-arrow {
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }
    .vs-cases-card:hover {
        transform: none !important;
    }
    .vs-cases-content {
        padding-bottom: 60px !important;
    }
    .vs-cases-deco-divider {
        padding: 32px 0 !important;
    }
    .vs-cases-cta {
        padding: 48px var(--vs-padding-x) !important;
    }
    .vs-cases-cta-button {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 28px !important;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE – 400px (SMALL MOBILE)
═══════════════════════════════════════ */
@media (max-width: 400px) {
    :root {
        --vs-padding-x: 5% !important;
    }
    .vs-cases-hero {
        padding-top: 160px !important;
    }
    .vs-cases-hero-title {
        font-size: clamp(22px, 7.5vw, 32px) !important;
    }
    .vs-cases-hero-label {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }
    .vs-cases-hero-stats {
        gap: 20px !important;
        padding: 24px 0 !important;
        margin-top: 28px !important;
    }
    .vs-cases-hero-stat-number {
        font-size: 20px !important;
    }
    .vs-cases-card-img {
        height: 200px !important;
    }
    .vs-cases-card-info {
        min-height: 95px !important;
    }
    .vs-cases-card-info-content {
        padding: 16px 18px !important;
    }
    .vs-cases-card-tag {
        font-size: 9px !important;
    }
    .vs-cases-card-name {
        font-size: 14px !important;
    }
    .vs-cases-card-meta {
        font-size: 12px !important;
    }
    .vs-cases-cta {
        padding: 40px var(--vs-padding-x) !important;
    }
}