.vwcs-grid {
    display: grid;
    gap: 28px;
    margin: 28px 0;
}

.vwcs-columns-1 { grid-template-columns: 1fr; }
.vwcs-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vwcs-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vwcs-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.vwcs-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    overflow: hidden;
}

.vwcs-card-image img,
.vwcs-hero-image img,
.vwcs-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

.vwcs-card-content {
    padding: 22px;
}

.vwcs-card h3 {
    margin-top: 0;
}

.vwcs-meta {
    font-size: 0.95em;
    opacity: 0.85;
}

.vwcs-separator {
    margin: 0 8px;
    opacity: 0.5;
}

.vwcs-button {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    font-weight: 700;
}

.vwcs-template-main {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 48px 0;
}

.vwcs-single {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.vwcs-single-hero {
    margin-bottom: 48px;
}

.vwcs-hero-image {
    position: relative;
    margin: 0 0 24px;
    min-height: 360px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
}

.vwcs-hero-image img {
    width: 100%;
    min-height: 360px;
    max-height: 620px;
    object-fit: cover;
}

.vwcs-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.58), rgba(0,0,0,0.05) 60%);
    pointer-events: none;
}

.vwcs-hero-caption {
    position: absolute;
    left: clamp(22px, 5vw, 58px);
    right: clamp(22px, 5vw, 58px);
    bottom: clamp(22px, 5vw, 52px);
    z-index: 1;
    color: #fff;
}

.vwcs-hero-caption h1,
.vwcs-hero-no-image h1 {
    margin: 0;
    max-width: 900px;
    line-height: 1.08;
}

.vwcs-hero-no-image {
    margin: 0 0 24px;
    padding: clamp(34px, 6vw, 72px);
    background: rgba(0, 0, 0, 0.045);
}

.vwcs-eyebrow {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.78;
}

.vwcs-single .vwcs-details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px;
    margin: 0;
}

.vwcs-details-grid div {
    min-width: 0;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.025);
}

.vwcs-details-grid dt {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
}

.vwcs-details-grid dd {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 600;
}

.vwcs-content-panel,
.vwcs-gallery-section,
.vwcs-linked-testimonial {
    margin-bottom: 44px;
}

.vwcs-description {
    max-width: 850px;
    margin: 0 auto;
    font-size: 1.04rem;
    line-height: 1.75;
}

.vwcs-description > :first-child {
    margin-top: 0;
}

.vwcs-description > :last-child {
    margin-bottom: 0;
}

.vwcs-gallery-section h2,
.vwcs-linked-testimonial h2 {
    margin-bottom: 18px;
}

.vwcs-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.vwcs-gallery figure {
    margin: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}

.vwcs-gallery img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.vwcs-linked-testimonial {
    padding: clamp(24px, 4vw, 38px);
    border-left: 4px solid currentColor;
    background: rgba(0, 0, 0, 0.04);
}

.vwcs-linked-testimonial blockquote {
    margin: 0 0 16px;
}

.vwcs-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
}

.vwcs-categories span {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    font-size: 0.85em;
    line-height: 1.3;
}

.vwcs-single-categories {
    margin-top: 16px;
}

/* Only adjust the main content area on single case study pages.
   Do not hide generic .widget-area elements, because Weaver uses widget areas
   inside the site header and footer. */
.vwcs-no-sidebar #container,
.vwcs-no-sidebar #content,
.vwcs-no-sidebar .post-area,
.vwcs-no-sidebar .site-main,
.vwcs-no-sidebar .content-area,
.vwcs-no-sidebar .primary,
.vwcs-no-sidebar #primary {
    width: 100% !important;
    max-width: none !important;
}

.vwcs-no-sidebar #primary-widget-area,
.vwcs-no-sidebar #secondary-widget-area,
.vwcs-no-sidebar .widget-area-primary,
.vwcs-no-sidebar .widget-area-secondary,
.vwcs-no-sidebar #secondary,
.vwcs-no-sidebar .sidebar,
.vwcs-no-sidebar aside[role="complementary"],
.vwcs-no-sidebar aside.sidebar {
    display: none !important;
}

/* Header/footer visibility belongs to the theme. In particular, never force
   Weaver's hidden header widget area to display on case study pages. */

.vwcs-with-sidebar #primary-widget-area,
.vwcs-with-sidebar #secondary-widget-area,
.vwcs-with-sidebar .widget-area-primary,
.vwcs-with-sidebar .widget-area-secondary,
.vwcs-with-sidebar #secondary,
.vwcs-with-sidebar .sidebar,
.vwcs-with-sidebar aside[role="complementary"],
.vwcs-with-sidebar aside.sidebar {
    display: revert;
}

.vwcs-with-sidebar #container,
.vwcs-with-sidebar #content,
.vwcs-with-sidebar .post-area,
.vwcs-with-sidebar .site-main,
.vwcs-with-sidebar .content-area,
.vwcs-with-sidebar .primary,
.vwcs-with-sidebar #primary {
    width: revert;
    max-width: revert;
}

@media (max-width: 800px) {
    .vwcs-columns-2,
    .vwcs-columns-3,
    .vwcs-columns-4,
    .vwcs-gallery {
        grid-template-columns: 1fr;
    }

    .vwcs-single .vwcs-details-grid {
        grid-template-columns: 1fr !important;
    }

    .vwcs-template-main {
        width: min(100% - 28px, 1180px);
        padding: 30px 0;
    }

    .vwcs-hero-image,
    .vwcs-hero-image img {
        min-height: 280px;
    }
}

/* Conservative theme compatibility fixes for case study singles. */
.single-vw_case_study .entry-meta,
.single-vw_case_study .post-meta,
.single-vw_case_study .posted-on,
.single-vw_case_study .byline,
.single-vw_case_study .author,
.single-vw_case_study .comments-link,
.single-vw_case_study .entry-footer,
.vwcs-case-study-single-page .entry-meta,
.vwcs-case-study-single-page .post-meta,
.vwcs-case-study-single-page .posted-on,
.vwcs-case-study-single-page .byline,
.vwcs-case-study-single-page .comments-link,
.vwcs-case-study-single-page .entry-footer {
    display: none !important;
}

.single-vw_case_study .entry-title,
.vwcs-case-study-single-page .entry-title {
    display: none !important;
}

.single-vw_case_study .site-main,
.vwcs-case-study-single-page .site-main {
    width: 100%;
}

.vwcs-details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
}

.vwcs-details-grid > div {
    display: block !important;
}

/* Version 1.2.5: wider theme compatibility for single case study pages. */
.single-vw_case_study .entry-meta,
.single-vw_case_study .entry-utility,
.single-vw_case_study .post-meta,
.single-vw_case_study .post-info,
.single-vw_case_study .post-details,
.single-vw_case_study .entry-info,
.single-vw_case_study .post-byline,
.single-vw_case_study .entry-byline,
.single-vw_case_study .byline,
.single-vw_case_study .posted-on,
.single-vw_case_study .posted_in,
.single-vw_case_study .post-author,
.single-vw_case_study .author,
.single-vw_case_study .author-info,
.single-vw_case_study .vcard,
.single-vw_case_study .entry-date,
.single-vw_case_study .post-date,
.single-vw_case_study .published,
.single-vw_case_study .updated,
.single-vw_case_study .comments-link,
.single-vw_case_study .cat-links,
.single-vw_case_study .tags-links,
.single-vw_case_study .entry-footer,
.vwcs-case-study-single-page .entry-meta,
.vwcs-case-study-single-page .entry-utility,
.vwcs-case-study-single-page .post-meta,
.vwcs-case-study-single-page .post-info,
.vwcs-case-study-single-page .post-details,
.vwcs-case-study-single-page .entry-info,
.vwcs-case-study-single-page .post-byline,
.vwcs-case-study-single-page .entry-byline,
.vwcs-case-study-single-page .byline,
.vwcs-case-study-single-page .posted-on,
.vwcs-case-study-single-page .posted_in,
.vwcs-case-study-single-page .post-author,
.vwcs-case-study-single-page .author,
.vwcs-case-study-single-page .author-info,
.vwcs-case-study-single-page .vcard,
.vwcs-case-study-single-page .entry-date,
.vwcs-case-study-single-page .post-date,
.vwcs-case-study-single-page .published,
.vwcs-case-study-single-page .updated,
.vwcs-case-study-single-page .comments-link,
.vwcs-case-study-single-page .cat-links,
.vwcs-case-study-single-page .tags-links,
.vwcs-case-study-single-page .entry-footer {
    display: none !important;
}


.single-vw_case_study .vwcs-details-grid,
.vwcs-case-study-single-page .vwcs-details-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

@media (max-width: 700px) {
    .single-vw_case_study .vwcs-details-grid,
    .vwcs-case-study-single-page .vwcs-details-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Version 1.3.0: Sidebar layout repair for Weaver and similar classic themes.
   When the sidebar option is on, do not leave the content area at full width.
   This targets only the main page container and the primary/secondary sidebars,
   not header or footer widget areas. */
@media (min-width: 801px) {
    .vwcs-with-sidebar #container.container-blog,
    .vwcs-with-sidebar #container.container {
        display: flex !important;
        align-items: flex-start !important;
        gap: 32px !important;
        flex-wrap: nowrap !important;
    }

    .vwcs-with-sidebar #content,
    .vwcs-with-sidebar #primary,
    .vwcs-with-sidebar .content-area,
    .vwcs-with-sidebar .site-main,
    .vwcs-with-sidebar .post-area {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
        clear: none !important;
        min-width: 0 !important;
    }

    .vwcs-with-sidebar #primary-widget-area,
    .vwcs-with-sidebar #secondary-widget-area,
    .vwcs-with-sidebar .widget-area-primary,
    .vwcs-with-sidebar .widget-area-secondary,
    .vwcs-with-sidebar #secondary,
    .vwcs-with-sidebar aside[role="complementary"] {
        display: block !important;
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        float: none !important;
        clear: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .vwcs-with-sidebar .clear-primary-widget-area,
    .vwcs-with-sidebar .clear-secondary-widget-area {
        display: none !important;
        clear: none !important;
    }
}

@media (max-width: 800px) {
    .vwcs-with-sidebar #container.container-blog,
    .vwcs-with-sidebar #container.container {
        display: block !important;
    }

    .vwcs-with-sidebar #content,
    .vwcs-with-sidebar #primary,
    .vwcs-with-sidebar .content-area,
    .vwcs-with-sidebar .site-main,
    .vwcs-with-sidebar .post-area,
    .vwcs-with-sidebar #primary-widget-area,
    .vwcs-with-sidebar #secondary-widget-area,
    .vwcs-with-sidebar .widget-area-primary,
    .vwcs-with-sidebar .widget-area-secondary,
    .vwcs-with-sidebar #secondary,
    .vwcs-with-sidebar aside[role="complementary"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}


/* Version 1.3.1: Weaver sidebar fix.
   Weaver places #content and the sidebar widget areas as siblings inside
   #container-inside, so the two-column layout has to happen there rather
   than on #container. */
@media (min-width: 801px) {
    .vwcs-with-sidebar #container > #container-inside {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
        column-gap: 32px !important;
        align-items: start !important;
    }

    .vwcs-with-sidebar #content {
        grid-column: 1 !important;
        grid-row: 1 / span 10 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        clear: none !important;
        box-sizing: border-box !important;
    }

    .vwcs-with-sidebar #content .wvrx-posts,
    .vwcs-with-sidebar #content .post-area,
    .vwcs-with-sidebar #content .entry-content,
    .vwcs-with-sidebar #content .vwcs-single {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .vwcs-with-sidebar #primary-widget-area {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: block !important;
        width: auto !important;
        max-width: 320px !important;
        min-width: 0 !important;
        float: none !important;
        clear: none !important;
        margin: 30px 0 0 !important;
        box-sizing: border-box !important;
    }

    .vwcs-with-sidebar #secondary-widget-area {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: block !important;
        width: auto !important;
        max-width: 320px !important;
        min-width: 0 !important;
        float: none !important;
        clear: none !important;
        margin: 24px 0 0 !important;
        box-sizing: border-box !important;
    }

    .vwcs-with-sidebar #primary-widget-area .widget,
    .vwcs-with-sidebar #secondary-widget-area .widget {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .vwcs-with-sidebar .clear-sb-postcontent-blog,
    .vwcs-with-sidebar .clear-sitewide-bottom-widget-area,
    .vwcs-with-sidebar .clear-primary-widget-area,
    .vwcs-with-sidebar .clear-secondary-widget-area,
    .vwcs-with-sidebar .clear-container-end {
        display: none !important;
        clear: none !important;
    }
}

@media (max-width: 800px) {
    .vwcs-with-sidebar #container > #container-inside {
        display: block !important;
    }

    .vwcs-with-sidebar #content,
    .vwcs-with-sidebar #primary-widget-area,
    .vwcs-with-sidebar #secondary-widget-area {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}


/* Version 1.3.2: Add top offset to Weaver sidebar mode so the sidebar aligns with the padded content area and does not sit under the header. */
@media (min-width: 801px) {
    .vwcs-with-sidebar #primary-widget-area {
        margin-top: 30px !important;
    }
}

/* Version 1.3.3: Linked testimonials now use the Testimonials Manager grid card markup. */
.vwcs-linked-testimonial {
    padding: 0;
    border-left: 0;
    background: transparent;
}

.vwcs-linked-testimonial .tm-testimonials {
    margin-top: 18px;
}

.vwcs-linked-testimonial .tm-card {
    width: 100%;
}

/* Version 1.3.4: Optional project link button on single case study pages. */
.vwcs-project-link-wrap {
    margin-top: 20px;
}

.vwcs-project-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Version 1.3.5: Optional video embed field for case studies. */
.vwcs-video-section {
    margin: 0 0 44px;
}

.vwcs-video-embed {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

.vwcs-video-embed iframe,
.vwcs-video-embed video,
.vwcs-video-embed object,
.vwcs-video-embed embed {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
}

/* Version 1.3.6: Stronger CTA styling for case study and project links. */
.vwcs-button,
.vwcs-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    width: auto;
    padding: 0.82em 1.25em;
    border: 0;
    border-radius: 6px;
    background: #39a9e0;
    color: #ffffff !important;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.vwcs-button:hover,
.vwcs-button:focus {
    background: #2e739b;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    text-decoration: none !important;
}

.vwcs-button:focus-visible {
    outline: 3px solid rgba(57, 169, 224, 0.35);
    outline-offset: 3px;
}

.vwcs-project-link-wrap {
    margin-top: 24px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.025);
}

.vwcs-project-link {
    min-width: min(100%, 220px);
}

.vwcs-button-arrow {
    display: inline-block;
    transition: transform 160ms ease;
}

.vwcs-button:hover .vwcs-button-arrow,
.vwcs-button:focus .vwcs-button-arrow {
    transform: translateX(3px);
}

@media (max-width: 580px) {
    .vwcs-project-link-wrap {
        padding: 16px;
    }

    .vwcs-project-link {
        width: 100%;
    }
}

/* Version 1.3.7: Place optional project CTA in the same row as Client and Service panels. */
.single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-1,
.vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-1 {
    grid-template-columns: 1fr !important;
}

.single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-2,
.vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-3,
.vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.vwcs-details-grid .vwcs-project-link-wrap {
    margin-top: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

.vwcs-details-grid .vwcs-project-link-wrap dd {
    margin-top: 12px;
}

.vwcs-details-grid .vwcs-project-link {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-3,
    .vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-1,
    .single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-2,
    .single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-3,
    .vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-1,
    .vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-2,
    .vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Version 1.3.8: Project CTA meta-row fix.
   Keep Client, Service and Project Link in one row on desktop, and prevent
   the CTA panel/button from overflowing on mobile or narrow sidebar layouts. */
.vwcs-single .vwcs-details-grid,
.single-vw_case_study .vwcs-details-grid,
.vwcs-case-study-single-page .vwcs-details-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.vwcs-single .vwcs-details-grid.vwcs-details-grid--cols-3,
.single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-3,
.vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.vwcs-details-grid > div,
.vwcs-details-grid .vwcs-project-link-wrap,
.vwcs-details-grid dt,
.vwcs-details-grid dd {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.vwcs-details-grid .vwcs-project-link-wrap {
    width: 100% !important;
    overflow: hidden !important;
}

.vwcs-details-grid .vwcs-project-link,
.vwcs-details-grid .vwcs-project-link:visited {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.vwcs-details-grid .vwcs-project-link span:first-child {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 700px) {
    .vwcs-single .vwcs-details-grid.vwcs-details-grid--cols-1,
    .vwcs-single .vwcs-details-grid.vwcs-details-grid--cols-2,
    .vwcs-single .vwcs-details-grid.vwcs-details-grid--cols-3,
    .single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-1,
    .single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-2,
    .single-vw_case_study .vwcs-details-grid.vwcs-details-grid--cols-3,
    .vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-1,
    .vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-2,
    .vwcs-case-study-single-page .vwcs-details-grid.vwcs-details-grid--cols-3 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vwcs-details-grid > div,
    .vwcs-details-grid .vwcs-project-link-wrap {
        width: 100% !important;
    }
}

/* Version 1.3.9: Case study gallery lightbox. */
.vwcs-gallery-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: inherit;
    text-align: inherit;
}

.vwcs-gallery-trigger img {
    transition: transform 220ms ease, filter 220ms ease;
}

.vwcs-gallery-trigger:hover img,
.vwcs-gallery-trigger:focus-visible img {
    transform: scale(1.035);
    filter: brightness(0.82);
}

.vwcs-gallery-trigger:focus-visible {
    outline: 3px solid rgba(57, 169, 224, 0.45);
    outline-offset: 4px;
}

.vwcs-gallery-zoom {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.vwcs-gallery-trigger:hover .vwcs-gallery-zoom,
.vwcs-gallery-trigger:focus-visible .vwcs-gallery-zoom {
    opacity: 1;
    transform: translateY(0);
}

.vwcs-lightbox[hidden] {
    display: none !important;
}

.vwcs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 4vw, 48px);
    box-sizing: border-box;
}

.vwcs-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 21, 0.88);
}

.vwcs-lightbox__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(10px, 2vw, 22px);
    width: min(1200px, 100%);
    max-height: 92vh;
}

.vwcs-lightbox__figure {
    grid-column: 2;
    margin: 0;
    min-width: 0;
    text-align: center;
}

.vwcs-lightbox__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 82vh;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.vwcs-lightbox__caption {
    margin-top: 12px;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0.9;
}

.vwcs-lightbox__close,
.vwcs-lightbox__nav {
    appearance: none;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #080f15;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
    transition: transform 160ms ease, background 160ms ease;
}

.vwcs-lightbox__close:hover,
.vwcs-lightbox__nav:hover,
.vwcs-lightbox__close:focus-visible,
.vwcs-lightbox__nav:focus-visible {
    transform: translateY(-1px);
    background: #fff;
    outline: 3px solid rgba(57, 169, 224, 0.5);
    outline-offset: 3px;
}

.vwcs-lightbox__close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font-size: 30px;
    line-height: 1;
}

.vwcs-lightbox__nav {
    width: 48px;
    height: 64px;
    border-radius: 8px;
    font-size: 44px;
    line-height: 1;
}

.vwcs-lightbox__nav--prev {
    grid-column: 1;
}

.vwcs-lightbox__nav--next {
    grid-column: 3;
}

.vwcs-lightbox-open,
.vwcs-lightbox-open body {
    overflow: hidden;
}

@media (max-width: 700px) {
    .vwcs-gallery-zoom {
        opacity: 1;
        transform: none;
        font-size: 0.78rem;
        padding: 7px 10px;
    }

    .vwcs-lightbox {
        padding: 14px;
    }

    .vwcs-lightbox__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        gap: 12px;
    }

    .vwcs-lightbox__figure {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .vwcs-lightbox__image {
        max-height: 76vh;
    }

    .vwcs-lightbox__close {
        top: 8px;
        right: 8px;
        width: 42px;
        height: 42px;
    }

    .vwcs-lightbox__nav {
        width: 100%;
        height: 48px;
        font-size: 34px;
    }

    .vwcs-lightbox__nav--prev {
        grid-column: 1;
        grid-row: 2;
    }

    .vwcs-lightbox__nav--next {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Version 1.4.1: Cleaner card view for multiple services and categories. */
.vwcs-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vwcs-card-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.045);
}

.vwcs-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vwcs-card-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.vwcs-card h3 {
    margin-bottom: 8px;
    line-height: 1.18;
}

.vwcs-card-company {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    opacity: 0.78;
}

.vwcs-card-services,
.vwcs-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.vwcs-card-services span,
.vwcs-card-categories span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vwcs-card-services span {
    background: rgba(57, 169, 224, 0.12);
    color: #2e739b;
}

.vwcs-card-categories span {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.025);
    color: inherit;
    opacity: 0.82;
}

.vwcs-card-services .vwcs-chip-more,
.vwcs-card-categories .vwcs-chip-more {
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    opacity: 0.75;
}

.vwcs-card-excerpt {
    margin: 2px 0 18px;
    font-size: 0.95rem;
    line-height: 1.55;
}

.vwcs-card .vwcs-button {
    margin-top: auto;
    align-self: flex-start;
}

/* Version 1.4.4: Smaller single case study section headings. */
.vwcs-single .vwcs-gallery-section {
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.025);
}

.vwcs-single .vwcs-gallery-section h2,
.vwcs-single .vwcs-linked-testimonial h2 {
    margin: 0 0 14px;
    font-family: var(--wp--preset--font-family--source-sans-3, Arial, sans-serif) !important;
    font-size: clamp(0.62rem, 0.8vw, 0.72rem);
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
}

.vwcs-single .vwcs-gallery-section .vwcs-gallery {
    margin-top: 0;
}

.vwcs-single .vwcs-gallery-section .vwcs-gallery figure {
    background: #fff;
    border-radius: 10px;
}

@media (max-width: 640px) {
    .vwcs-single .vwcs-gallery-section {
        padding: 18px;
        border-radius: 10px;
    }
}


/* Version 1.4.6: Balanced section labels on single case study pages. */
html body #wrapper #content .vwcs-single .vwcs-section-label,
html body #wrapper #container .vwcs-single .vwcs-section-label,
html body .vwcs-single h2.vwcs-section-label,
html body .vwcs-single .vwcs-gallery-section h2.vwcs-section-label,
html body .vwcs-single .vwcs-linked-testimonial h2.vwcs-section-label {
    display: block !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    font-family: "Source Sans 3", Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: inherit !important;
    opacity: 0.72 !important;
}

/* Version 1.4.8: Force shortcode card featured images to fill their image area. */
.vwcs-grid .vwcs-card .vwcs-card-image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.045) !important;
}

.vwcs-grid .vwcs-card .vwcs-card-image img,
.vwcs-grid .vwcs-card .vwcs-card-image picture,
.vwcs-grid .vwcs-card .vwcs-card-image picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}


/* Hero text sits on an image and must remain legible under theme heading rules. */
html body .vwcs-single .vwcs-hero-caption,
html body .vwcs-single .vwcs-hero-caption h1,
html body .vwcs-single .vwcs-hero-caption .vwcs-eyebrow {
    color: #fff !important;
}


/* Keep the case study hero clear of the site header in either layout mode.
   Padding stays inside the article, avoiding collapsed top margins. */
body.single-vw_case_study article.vwcs-single {
    padding-top: 30px;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    body.single-vw_case_study article.vwcs-single {
        padding-top: 20px;
    }
}