/* ═══════════════════════════════════════
   Vila System Cases – Single v6
   Immersive, customer-focused layout
   DM Sans + Caveat
═══════════════════════════════════════ */
:root {
    --v-forest:#2c3e2d; --v-accent:#40916c; --v-accent-light:#52b788;
    --v-stone:#5a5a52; --v-warm:#8a8578; --v-sand:#c4bfb6;
    --v-fog:#e8e5df; --v-cream:#f5f3f0; --v-black:#1a1a18;
    --vs-padding-x:9%; --vs-header-height:80px;
    --v-radius:5px 12px 5px 12px; --v-radius-flip:12px 5px 12px 5px;
}

/* ═══ RESET ═══ */
.vs-single-wrapper,.vs-single-wrapper *,.vs-single-wrapper *::before,.vs-single-wrapper *::after{box-sizing:border-box!important}
.vs-single-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(--v-black)!important;background:#fff!important;-webkit-font-smoothing:antialiased!important}
.vs-single-wrapper img{max-width:100%;height:auto}
.vs-single-wrapper a:link,.vs-single-wrapper a:visited,.vs-single-wrapper a:hover,.vs-single-wrapper a:active,.vs-single-wrapper a:focus{text-decoration:none!important;outline:none!important;box-shadow:none!important;color:inherit!important}
/* Prevent horizontal scrollbar from any child overflow */
.vs-single-wrapper .vs-single-hero,
.vs-single-wrapper .vs-specs,
.vs-single-wrapper .vs-quote-immersive{overflow:hidden!important}

/* ═══ SHARED ELEMENTS ═══ */
.vs-label-line{width:32px!important;height:1px!important;background:var(--v-accent)!important;display:inline-block!important;vertical-align:middle!important;margin-right:10px!important}

/* Animation: all handled by GSAP in JS */

/* ═══ HERO (preserved from v5) ═══ */
.vs-single-hero{width:100%!important;min-height:580px!important;position:relative!important;overflow:hidden!important;margin-top:calc(-1*var(--vs-header-height))!important;padding-top:0!important;background-color:var(--v-black)!important;display:flex!important;align-items:center!important}
.vs-single-hero-blur{position:absolute!important;inset:-40px!important;z-index:0!important;pointer-events:none!important}
.vs-single-hero-blur img{width:100%!important;height:100%!important;object-fit:cover!important;filter:blur(20px) brightness(.45)!important;transform:scale(1.12)!important;display:block!important}
.vs-single-hero-overlay{position:absolute!important;inset:0!important;background:linear-gradient(135deg,rgba(44,62,45,.75) 0%,rgba(64,145,108,.55) 50%,rgba(44,62,45,.7) 100%)!important;pointer-events:none!important;z-index:1!important}
.vs-single-hero-grid{position:relative!important;z-index:2!important;width:100%!important;padding:200px var(--vs-padding-x) 80px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:2.5rem!important;align-items:center!important}
.vs-single-hero-content{background-color:transparent!important;margin-right:80px!important}
.vs-single-hero-tag{font-size:.65rem!important;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(255,255,255,.5)!important;margin-bottom:16px!important;display:inline-flex!important;align-items:center!important;gap:12px!important}
.vs-single-hero-tag-line{width:32px!important;height:1px!important;background:rgba(255,255,255,.3)!important}
.vs-single-hero-title{font-size:clamp(2rem,4vw,3.25rem)!important;font-weight:500!important;color:#fff!important;line-height:1.1!important;letter-spacing:-.03em!important;margin-bottom:14px!important}
.vs-single-hero-desc{font-size:.95rem!important;line-height:1.75!important;font-weight:400!important;color:rgba(255,255,255,.75)!important;max-width:100%!important;margin-bottom:24px!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.vs-single-hero-chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.vs-single-hero-chip{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:7px 14px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.08)!important;font-size:.7rem!important;font-weight:400!important;color:rgba(255,255,255,.6)!important;white-space:nowrap!important;border-radius:5px 12px 5px 12px!important}
.vs-single-hero-chip svg{width:12px!important;height:12px!important;stroke:var(--v-accent-light)!important;stroke-width:1.5!important;fill:none!important;flex-shrink:0!important}
.vs-single-hero-image{overflow:hidden!important;border-radius:var(--v-radius)!important;max-height:500px!important;padding-left:24px!important}
.vs-single-hero-image img{width:100%!important;height:100%!important;max-height:500px!important;object-fit:cover!important;object-position:center!important;display:block!important;border-radius:var(--v-radius)!important}


/* ═══════════════════════════════════════
   IMMERSIVE GALLERY
   Fullwidth, cinematic feel
═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   CONTENT SPLIT – Story left, Gallery right (sticky)
═══════════════════════════════════════ */
.vs-content-split{
    padding:0!important;
    background:#fff!important;
    position:relative!important;
    overflow:visible!important;
}
.vs-content-split-inner{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
    padding:0 var(--vs-padding-x)!important;
    align-items:start!important;
    overflow:visible!important;
}

/* LEFT column: sticky gallery (visually left via order) */
.vs-content-right{
    position:relative!important;
    padding:72px 48px 72px 0!important;
    order:-1!important;
    overflow:visible!important;
}

/* RIGHT column: story (visually right) */
.vs-content-left{
    padding:72px 0 72px 48px!important;
    border-left:1px solid var(--v-fog)!important;
}
.vs-gallery-sticky{
    position:sticky!important;
    top:100px!important;
}

.vs-gallery-immersive{
    padding:0!important;
    background:var(--v-cream)!important;
}

.vs-gallery-showcase{
    padding:0!important;
}

/* Main image */
.vs-gallery-main-wrap{
    position:relative!important;
    width:100%!important;
    height:clamp(320px, 38vw, 520px)!important;
    overflow:hidden!important;
    cursor:pointer!important;
    background:#1a1a18!important;
    border-radius:var(--v-radius)!important;
}

/* Blurred background layer — fills container, always cover */
.vs-gallery-blur-bg{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
    filter:blur(28px) saturate(.8)!important;
    -webkit-filter:blur(28px) saturate(.8)!important;
    transform:scale(1.12)!important;
    z-index:0!important;
    pointer-events:none!important;
    transition:opacity .4s cubic-bezier(.16,1,.3,1)!important;
}

/* Foreground image — full quality, contain to show entire image */
.vs-gallery-main-img{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    display:block!important;
    z-index:1!important;
    transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)!important;
}

.vs-gallery-main-wrap:hover .vs-gallery-main-img{
    transform:scale(1.015)!important;
}

/* Expand button */
.vs-gallery-expand{
    position:absolute!important;
    top:20px!important;
    right:20px!important;
    z-index:2!important;
    width:44px!important;
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(26,26,24,.45)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    border:1px solid rgba(255,255,255,.1)!important;
    border-radius:var(--v-radius)!important;
    cursor:pointer!important;
    opacity:0!important;
    transition:opacity .3s ease, background .3s ease!important;
}
.vs-gallery-main-wrap:hover .vs-gallery-expand{opacity:1!important}
.vs-gallery-expand:hover{background:rgba(26,26,24,.7)!important}
.vs-gallery-expand svg{width:16px!important;height:16px!important;stroke:#fff!important;stroke-width:1.5!important;fill:none!important}

/* Counter */
.vs-gallery-counter{
    position:absolute!important;
    bottom:20px!important;
    left:20px!important;
    z-index:2!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 14px!important;
    background:rgba(26,26,24,.45)!important;
    border-radius:var(--v-radius)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
}
.vs-gallery-counter-current{
    font-size:.85rem!important;
    font-weight:500!important;
    color:#fff!important;
    letter-spacing:.04em!important;
    min-width:20px!important;
}
.vs-gallery-counter-sep{
    width:20px!important;
    height:1px!important;
    background:rgba(255,255,255,.25)!important;
}
.vs-gallery-counter-total{
    font-size:.75rem!important;
    font-weight:300!important;
    color:rgba(255,255,255,.5)!important;
    letter-spacing:.04em!important;
}

/* Thumbnail strip */
.vs-gallery-strip{
    display:flex!important;
    gap:6px!important;
    margin-top:6px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    padding-bottom:4px!important;
}
.vs-gallery-strip::-webkit-scrollbar{display:none!important}

.vs-gallery-strip-item{
    flex:0 0 120px!important;
    height:80px!important;
    position:relative!important;
    overflow:hidden!important;
    cursor:pointer!important;
    border-radius:var(--v-radius)!important;
}
.vs-gallery-strip-item img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
    transition:transform .5s cubic-bezier(.16,1,.3,1)!important;
}
.vs-gallery-strip-item:hover img{
    transform:scale(1.08)!important;
}

.vs-gallery-strip-overlay{
    position:absolute!important;
    inset:0!important;
    background:rgba(26,26,24,.45)!important;
    transition:background .3s ease!important;
    pointer-events:none!important;
}
.vs-gallery-strip-item.active .vs-gallery-strip-overlay{
    background:transparent!important;
}
.vs-gallery-strip-item:hover .vs-gallery-strip-overlay{
    background:rgba(26,26,24,.15)!important;
}
.vs-gallery-strip-item.active::after{
    content:''!important;
    position:absolute!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    height:2px!important;
    background:var(--v-accent)!important;
}


/* ═══════════════════════════════════════
   STORY SECTION
   Clean, editorial typography
═══════════════════════════════════════ */
/* In split layout, story has no section padding */
.vs-content-left .vs-story{
    padding:0!important;
    background:transparent!important;
    position:relative!important;
    margin-bottom:56px!important;
}

.vs-content-left .vs-story-inner{
    max-width:none!important;
}

.vs-story-label{
    font-size:.65rem!important;
    font-weight:500!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    color:var(--v-accent)!important;
    margin-bottom:12px!important;
    display:inline-flex!important;
    align-items:center!important;
}

.vs-story-title{
    font-size:clamp(1.6rem, 2.5vw, 2.1rem)!important;
    font-weight:500!important;
    color:var(--v-black)!important;
    line-height:1.25!important;
    margin:0 0 32px!important;
    letter-spacing:-.01em!important;
}

.vs-story-content{
    margin-bottom:40px!important;
}

.vs-story-text{
    font-size:clamp(1rem, 1.5vw, 1rem)!important;
    line-height:1.85!important;
    font-weight:400!important;
    color:var(--v-stone)!important;
}
.vs-story-text p{margin:0 0 16px!important}
.vs-story-text p:last-child{margin-bottom:0!important}
.vs-story-text strong{color:var(--v-black)!important;font-weight:500!important}

/* Quick details fallback */
.vs-single-wrapper .vs-story-details{
    display:grid!important;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))!important;
    gap:0!important;
    border-top:1px solid var(--v-fog)!important;
    margin-top:32px!important;
    padding:0!important;
}
.vs-single-wrapper .vs-story-detail{
    padding:20px 16px 20px 0!important;
    border-bottom:1px solid var(--v-fog)!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
}
.vs-single-wrapper .vs-story-detail-key{
    font-size:.65rem!important;
    font-weight:300!important;
    color:var(--v-warm)!important;
    text-transform:uppercase!important;
    letter-spacing:.1em!important;
    display:block!important;
    width:100%!important;
    margin:0 0 2px 0!important;
    line-height:1.4!important;
}
.vs-single-wrapper .vs-story-detail-val{
    font-size:.9rem!important;
    font-weight:500!important;
    color:var(--v-black)!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    line-height:1.4!important;
}


/* ═══════════════════════════════════════
   SPECS SECTION – Standalone, premium
   Dark background, fullwidth, visual punch
═══════════════════════════════════════ */
.vs-specs{
    padding:80px 9% 88px!important;
    background:var(--v-cream, #f5f3f0)!important;
    position:relative!important;
    overflow:hidden!important;
}
.vs-specs::before{
    content:''!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(135deg, rgba(64,145,108,.06) 0%, transparent 60%)!important;
    pointer-events:none!important;
}

.vs-specs-inner{
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    position:relative!important;
    z-index:1!important;
}
.vs-single-wrapper .vs-specs .vs-specs-inner{
    max-width:none!important;
    width:100%!important;
}

.vs-specs-header{
    margin-bottom:56px!important;
    text-align:center!important;
}

.vs-specs-label{
    font-size:.65rem!important;
    font-weight:500!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    color:var(--v-accent, #40916c)!important;
    display:inline-flex!important;
    align-items:center!important;
    margin-bottom:16px!important;
}
.vs-specs-label .vs-label-line{
    background:var(--v-accent, #40916c)!important;
}

.vs-specs-title{
    font-size:clamp(1.8rem, 3vw, 2.5rem)!important;
    font-weight:500!important;
    color:var(--v-black, #1a1a18)!important;
    line-height:1.2!important;
    margin:0 0 12px!important;
    letter-spacing:-.02em!important;
}

.vs-specs-subtitle{
    font-size:1rem!important;
    font-weight:400!important;
    color:var(--v-stone, #5a5a52)!important;
    margin:0!important;
}

.vs-specs-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit, minmax(0, 1fr))!important;
    gap:20px!important;
    background:none!important;
}

.vs-spec-card{
    background:#FFF!important;
    padding:40px 28px 36px!important;
    border-radius:var(--v-radius)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    gap:0!important;
    transition:background .35s ease, transform .35s cubic-bezier(.16,1,.3,1)!important;
}
.vs-spec-card:hover{
    background:rgba(255,255,255,.5)!important;
    transform:translateY(-2px)!important;
}

.vs-spec-card-icon{
    width:56px!important;
    height:56px!important;
    flex-shrink:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(64,145,108,.1)!important;
    border-radius:var(--v-radius)!important;
    margin-bottom:20px!important;
}
.vs-spec-card-icon svg{
    width:26px!important;
    height:26px!important;
    stroke:var(--v-accent, #40916c)!important;
    stroke-width:1.5!important;
    fill:none!important;
}

.vs-spec-card-content{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
}

.vs-spec-card-name{
    font-size:.65rem!important;
    font-weight:500!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    color:var(--v-warm, #8a8578)!important;
}

.vs-spec-card-value{
    font-size:1.05rem!important;
    font-weight:500!important;
    color:var(--v-black, #1a1a18)!important;
    line-height:1.4!important;
}


/* ═══════════════════════════════════════
   QUOTE – IMMERSIVE
   Fullwidth background with parallax
═══════════════════════════════════════ */
.vs-quote-immersive{
    position:relative!important;
    padding:100px var(--vs-padding-x)!important;
    min-height:400px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
}

.vs-quote-bg{
    position:absolute!important;
    inset:-60px!important;
    z-index:0!important;
    pointer-events:none!important;
}
.vs-quote-bg img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    filter:blur(6px) brightness(.35) saturate(.8)!important;
    transform:scale(1.1)!important;
    display:block!important;
}

.vs-quote-overlay{
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(160deg, rgba(44,62,45,.85) 0%, rgba(26,26,24,.75) 100%)!important;
    z-index:1!important;
    pointer-events:none!important;
}

.vs-quote-inner{
    position:relative!important;
    z-index:2!important;
    max-width:680px!important;
}

.vs-quote-mark{
    margin-bottom:20px!important;
}
.vs-quote-mark svg{
    width:36px!important;
    height:36px!important;
    color:var(--v-accent-light)!important;
    opacity:.5!important;
}

.vs-quote-text{
    font-size:clamp(1.15rem, 2.5vw, 1.5rem)!important;
    font-weight:300!important;
    color:#fff!important;
    line-height:1.7!important;
    font-style:italic!important;
    margin:0 0 24px!important;
    border:none!important;
    padding:0!important;
}

.vs-quote-attribution{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
}

.vs-quote-author-line{
    width:24px!important;
    height:1px!important;
    background:var(--v-accent-light)!important;
    opacity:.5!important;
}

.vs-quote-author{
    font-size:.75rem!important;
    font-weight:500!important;
    color:rgba(255,255,255,.55)!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
}


/* ═══════════════════════════════════════
   NAV – with thumbnails
═══════════════════════════════════════ */
.vs-single-project-nav{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    border-top:1px solid var(--v-sand, #c4bfb6)!important;
    background:var(--v-fog, #e8e5df)!important;
}

.vs-single-nav-item{
    padding:36px 9%!important;
    transition:background-color .3s ease!important;
    display:flex!important;
    align-items:center!important;
    gap:20px!important;
    color:inherit!important;
    border:none!important;
}
.vs-single-nav-item:first-child{border-right:1px solid var(--v-sand, #c4bfb6)!important}
.vs-single-nav-item:hover{background-color:var(--v-cream, #f5f3f0)!important}
.vs-single-nav-item--empty{pointer-events:none!important;opacity:.3!important}

.vs-nav-thumb{
    width:72px!important;
    height:56px!important;
    overflow:hidden!important;
    flex-shrink:0!important;
    border-radius:var(--v-radius)!important;
}
.vs-nav-thumb img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
    transition:transform .5s cubic-bezier(.16,1,.3,1)!important;
}
.vs-single-nav-item:hover .vs-nav-thumb img{
    transform:scale(1.08)!important;
}

.vs-nav-text{flex:1!important}

.vs-single-nav-label{
    font-size:.65rem!important;
    font-weight:500!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    color:var(--v-warm, #8a8578)!important;
    margin-bottom:6px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}
.vs-single-nav-title{
    font-size:1rem!important;
    font-weight:400!important;
    color:var(--v-black, #1a1a18)!important;
}
.vs-single-nav-arrow{
    display:inline-flex!important;
    opacity:0!important;
    transform:translateX(-6px)!important;
    transition:all .3s ease!important;
}
.vs-single-nav-arrow svg{width:14px!important;height:14px!important;stroke:var(--v-warm, #8a8578)!important;stroke-width:1.5!important;fill:none!important}
.vs-single-nav-item:hover .vs-single-nav-arrow{transform:translateX(0)!important;opacity:1!important}

.vs-single-nav-item--next{text-align:right!important;flex-direction:row-reverse!important}
.vs-single-nav-item--next .vs-single-nav-label{justify-content:flex-end!important}
.vs-single-nav-item--next .vs-single-nav-arrow{transform:translateX(6px)!important}
.vs-single-nav-item--next:hover .vs-single-nav-arrow{transform:translateX(0)!important}


/* ═══════════════════════════════════════
   CTA
═══════════════════════════════════════ */
.vs-single-cta{
    background-color:var(--v-forest)!important;
    padding:88px var(--vs-padding-x)!important;
    text-align:center!important;
    position:relative!important;
    overflow:hidden!important;
}

/* Subtle texture */
.vs-single-cta::before{
    content:''!important;
    position:absolute!important;
    inset:0!important;
    background:radial-gradient(ellipse at 30% 50%, rgba(64,145,108,.15) 0%, transparent 70%)!important;
    pointer-events:none!important;
}

.vs-single-cta-inner{
    position:relative!important;
    z-index:1!important;
}

.vs-single-cta-label{
    font-size:.65rem!important;
    font-weight:500!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    color:rgba(255,255,255,.35)!important;
    margin-bottom:20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
}
.vs-single-cta-label-line{width:24px!important;height:1px!important;background:rgba(255,255,255,.15)!important}

.vs-single-cta-title{
    font-size:clamp(1.5rem,3.5vw,2.5rem)!important;
    font-weight:500!important;
    color:#fff!important;
    margin-bottom:16px!important;
    line-height:1.15!important;
    letter-spacing:-.02em!important;
}
.vs-single-cta-title em{
    font-style:normal!important;
    font-family:'Caveat',cursive!important;
    font-weight:600!important;
    color:var(--v-accent-light)!important;
    font-size:1.12em!important;
}

.vs-single-cta-desc{
    font-size:.95rem!important;
    color:rgba(255,255,255,.7)!important;
    max-width:460px!important;
    margin:0 auto 32px!important;
    line-height:1.75!important;
    font-weight:400!important;
}

.vs-single-cta-button{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:14px 32px!important;
    background:var(--v-accent)!important;
    color:#fff!important;
    font-size:.7rem!important;
    font-weight:500!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    border:1px solid var(--v-accent)!important;
    border-radius:var(--v-radius)!important;
    cursor:pointer!important;
    transition:all .35s cubic-bezier(.16,1,.3,1)!important;
}
.vs-single-cta-button:hover{background:transparent!important;border-color:rgba(255,255,255,.3)!important}
.vs-single-cta-button:link,.vs-single-cta-button:visited,.vs-single-cta-button:active{color:#fff!important}
.vs-single-cta-button svg{width:12px!important;height:12px!important;stroke:#fff!important;stroke-width:1.5!important;fill:none!important;transition:transform .4s cubic-bezier(.16,1,.3,1)!important}
.vs-single-cta-button:hover svg{transform:translateX(4px)!important}


/* ═══════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════ */
.vs-single-lightbox{
    position:fixed!important;
    inset:0!important;
    z-index:200!important;
    background-color:rgba(0,0,0,.94)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .4s ease!important;
    cursor:pointer!important;
}
.vs-single-lightbox.active{opacity:1!important;pointer-events:all!important}
.vs-single-lightbox img{
    max-width:88vw!important;
    max-height:88vh!important;
    object-fit:contain!important;
    transform:scale(.95)!important;
    transition:transform .4s cubic-bezier(.25,.1,.25,1)!important;
}
.vs-single-lightbox.active img{transform:scale(1)!important}

.vs-single-lightbox-close{
    position:absolute!important;
    top:24px!important;
    right:24px!important;
    width:44px!important;
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    opacity:.5!important;
    transition:opacity .3s!important;
    background:transparent!important;
    border:none!important;
}
.vs-single-lightbox-close:hover{opacity:1!important}
.vs-single-lightbox-close svg{width:24px!important;height:24px!important;stroke:#fff!important;stroke-width:2!important;fill:none!important}

/* Lightbox arrows */
.vs-single-lightbox-arrow{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:48px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.1)!important;
    border-radius:var(--v-radius)!important;
    cursor:pointer!important;
    opacity:0!important;
    transition:opacity .3s ease, background .3s ease!important;
}
.vs-single-lightbox.active .vs-single-lightbox-arrow{opacity:.5!important}
.vs-single-lightbox-arrow:hover{opacity:1!important;background:rgba(255,255,255,.12)!important}
.vs-single-lightbox-arrow svg{width:20px!important;height:20px!important;stroke:#fff!important;stroke-width:1.5!important;fill:none!important}
.vs-single-lightbox-prev{left:24px!important}
.vs-single-lightbox-next{right:24px!important}

.vs-single-lightbox-counter{
    position:absolute!important;
    bottom:24px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    font-size:.75rem!important;
    font-weight:400!important;
    color:rgba(255,255,255,.4)!important;
    letter-spacing:.08em!important;
}


/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1024px){
    .vs-single-hero-grid{grid-template-columns:1fr!important;gap:2.5rem!important;padding:180px var(--vs-padding-x) 72px!important}
    .vs-single-hero-content{margin-right:0!important}
    .vs-single-hero-image img{max-height:400px!important}
    .vs-content-split-inner{grid-template-columns:1fr!important}
    .vs-content-right{padding:48px 0 0!important;order:-1!important}
    .vs-content-left{padding:48px 0 0!important;border-left:none!important;border-top:1px solid var(--v-fog)!important}
    .vs-gallery-sticky{position:relative!important;top:auto!important}
    .vs-gallery-main-wrap{height:clamp(320px, 50vw, 500px)!important}
    .vs-specs-grid{grid-template-columns:repeat(auto-fit, minmax(0, 1fr))!important}
}

@media(max-width:768px){
    .vs-single-hero{min-height:auto!important}
    .vs-single-hero-grid{padding:160px 7% 60px!important}
    .vs-single-hero-title{font-size:clamp(1.65rem,5.5vw,2.25rem)!important}
    .vs-single-hero-desc{font-size:.88rem!important}
    .vs-single-hero-image{padding-left:0!important}
    .vs-single-hero-image img{max-height:none!important;height:auto!important;width:100%!important}
    .vs-single-hero-chips{gap:6px!important}
    .vs-single-hero-chip{font-size:.65rem!important;padding:6px 12px!important}
    .vs-content-split-inner{padding:0 7%!important}
    .vs-content-left{padding:40px 0 0!important}
    .vs-content-right{padding:40px 0 0!important}
    .vs-gallery-main-wrap{height:auto!important;min-height:300px!important}
    .vs-gallery-main-img{height:auto!important;min-height:300px!important;object-fit:cover!important}
    .vs-gallery-blur-bg{display:none!important}
    .vs-gallery-strip-item{flex:0 0 90px!important;height:60px!important}
    .vs-story-details{grid-template-columns:1fr 1fr!important}
    .vs-specs{padding:56px 7% 64px!important}
    .vs-specs-grid{grid-template-columns:repeat(2, 1fr)!important}
    .vs-quote-immersive{min-height:auto!important;padding:72px 7%!important}
    .vs-single-project-nav{gap:0!important}
    .vs-single-nav-item{padding:24px 20px!important}
    .vs-single-cta{padding:64px 7%!important}
}

@media(max-width:600px){
    .vs-single-hero-grid{padding:160px 6% 48px!important}
    .vs-single-hero-title{font-size:clamp(1.4rem,6.5vw,1.85rem)!important}
    .vs-single-hero-desc{font-size:.85rem!important}
    .vs-single-hero-image{padding-left:0!important;border-radius:var(--v-radius)!important;margin-top:.5rem!important}
    .vs-single-hero-image img{max-height:none!important;height:auto!important;width:100%!important;border-radius:var(--v-radius)!important}
    .vs-single-hero-chip{font-size:.6rem!important;padding:5px 10px!important}
    .vs-content-split{padding:0!important}
    .vs-content-split-inner{padding:0 6%!important}
    .vs-content-left{padding:32px 0 0!important}
    .vs-content-right{padding:32px 0 0!important}
    .vs-gallery-main-wrap{height:auto!important;min-height:240px!important;border-radius:var(--v-radius)!important}
    .vs-gallery-main-img{height:auto!important;min-height:240px!important;object-fit:cover!important}
    .vs-gallery-blur-bg{display:none!important}
    .vs-gallery-strip-item{flex:0 0 80px!important;height:52px!important}
    .vs-gallery-expand{width:38px!important;height:38px!important;top:14px!important;right:14px!important;opacity:1!important}
    .vs-gallery-counter{bottom:14px!important;left:14px!important;padding:6px 12px!important}
    .vs-content-left .vs-story{margin-bottom:40px!important}
    .vs-story-details{grid-template-columns:1fr!important}
    .vs-specs{padding:48px 6% 56px!important}
    .vs-specs-grid{grid-template-columns:1fr!important}
    .vs-spec-card{padding:16px!important}
    .vs-quote-immersive{padding:56px 6%!important}
    .vs-quote-inner blockquote{font-size:clamp(1.1rem,4.5vw,1.4rem)!important}
    .vs-single-project-nav{grid-template-columns:1fr!important}
    .vs-single-nav-item:first-child{border-right:none!important;border-bottom:1px solid var(--v-sand, #c4bfb6)!important}
    .vs-single-nav-item--next{text-align:left!important;flex-direction:row!important}
    .vs-single-nav-item--next .vs-single-nav-label{justify-content:flex-start!important}
    .vs-nav-thumb{width:56px!important;height:56px!important}
    .vs-single-cta{padding:48px 6%!important}
    .vs-single-cta-button{width:100%!important;justify-content:center!important}
    .vs-single-lightbox img{max-width:96vw!important;max-height:80vh!important}
    .vs-single-lightbox-arrow{width:40px!important;height:40px!important}
    .vs-single-lightbox-prev{left:12px!important}
    .vs-single-lightbox-next{right:12px!important}
    .vs-single-lightbox-close{top:16px!important;right:16px!important;width:40px!important;height:40px!important}
}

@media(max-width:400px){
    .vs-single-hero-grid{padding:140px 5% 36px!important}
    .vs-single-hero-title{font-size:clamp(1.25rem,7.5vw,1.65rem)!important}
    .vs-single-hero-tag{font-size:.58rem!important}
    .vs-single-hero-chip{font-size:.55rem!important;padding:4px 8px!important;gap:4px!important}
    .vs-single-hero-chip svg{width:10px!important;height:10px!important}
    .vs-content-split-inner{padding:0 5%!important}
    .vs-gallery-main-wrap{min-height:200px!important}
    .vs-gallery-strip-item{flex:0 0 68px!important;height:46px!important}
    .vs-specs{padding:40px 5% 48px!important}
    .vs-quote-immersive{padding:44px 5%!important}
    .vs-single-project-nav .vs-single-nav-item{padding:20px 16px!important}
    .vs-single-cta{padding:40px 5%!important}
}