.fwg-wrap {
    --fwg-gap: 30px;
    --fwg-yellow: #ffd900;
    --fwg-black: #000;
    --fwg-white: #fff;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    display: block;
    clear: both;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 0 30px !important;
    overflow: visible;
}
.fwg-wrap *, .fwg-wrap *::before, .fwg-wrap *::after { box-sizing: border-box; }
html.fwg-has-grid,
body.fwg-has-grid {
    min-height: 100% !important;
}
body.fwg-has-grid:not(.fwg-modal-open) {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}
body.fwg-has-grid:not(.fwg-modal-open) .fwg-scroll-ancestor {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
body.fwg-modal-open { overflow: hidden !important; }
.fwg-scroll-root {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.fwg-has-grid .container:has(.fwg-wrap),
body.fwg-has-grid .container-fluid:has(.fwg-wrap),
body.fwg-has-grid .entry-content:has(.fwg-wrap),
body.fwg-has-grid .page-content:has(.fwg-wrap),
body.fwg-has-grid .wpb_wrapper:has(.fwg-wrap),
body.fwg-has-grid .vc_row:has(.fwg-wrap),
body.fwg-has-grid .vc_column-inner:has(.fwg-wrap),
body.fwg-has-grid .vc_column_container:has(.fwg-wrap),
body.fwg-has-grid:not(.fwg-modal-open) .fwg-scroll-ancestor {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.fwg-has-grid .container:has(.fwg-wrap),
body.fwg-has-grid .container-fluid:has(.fwg-wrap) {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
body.fwg-has-grid .entry-content:has(.fwg-wrap),
body.fwg-has-grid .page-content:has(.fwg-wrap),
body.fwg-has-grid .wpb_wrapper:has(.fwg-wrap),
body.fwg-has-grid .vc_row:has(.fwg-wrap),
body.fwg-has-grid .vc_column-inner:has(.fwg-wrap),
body.fwg-has-grid .vc_column_container:has(.fwg-wrap) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Match the existing /works/ page spacing without changing the Fusion heading vertical rhythm. */
body.fwg-has-grid #main > h1:not(.screen-reader-text),
body.fwg-has-grid main > h1:not(.screen-reader-text),
body.fwg-has-grid .content > h1:not(.screen-reader-text),
body.fwg-has-grid .entry-title:not(.screen-reader-text),
body.fwg-has-grid .page-title:not(.screen-reader-text) {
    display: none !important;
}
body.fwg-has-grid .gs-section.gs-projects {
    overflow: visible !important;
}
body.fwg-has-grid .gs-section.gs-projects > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.fwg-heading {
    margin: 0 0 40px;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #111;
    line-height: 1.3;
}
.fwg-grid {
    display: grid;
    overflow: visible;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fwg-gap);
}
.fwg-cols-1 .fwg-grid { grid-template-columns: minmax(0, 1fr); }
.fwg-cols-2 .fwg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fwg-cols-4 .fwg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fwg-card { margin: 0; padding: 0; }
.fwg-card-button {
    appearance: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    color: #fff;
    text-align: center;
}
.fwg-card-button:hover .fwg-card-image,
.fwg-card-button:focus .fwg-card-image { transform: scale(1.04); opacity: .76; }
.fwg-card-button:focus { outline: 3px solid var(--fwg-yellow); outline-offset: 3px; }
.fwg-card-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.06) 50%, rgba(0,0,0,.16));
    pointer-events: none;
}
.fwg-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    transition: transform .35s ease, opacity .35s ease;
}
.fwg-card-title {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: clamp(10px, 1.7vw, 18px);
    color: #fff !important;
    font-size: clamp(19px, 1.9vw, 29px);
    line-height: 1.05;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 7px rgba(0,0,0,.78), 0 0 2px rgba(0,0,0,.8);
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none;
}
body.fwg-modal-open { overflow: hidden; }
.fwg-modal {
    --fwg-yellow: #ffd900;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 70px);
}
.fwg-modal.is-open { display: flex; }
.fwg-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.76);
}
.fwg-dialog {
    position: relative;
    z-index: 1;
    width: min(1600px, calc(100vw - 90px));
    height: min(760px, calc(100vh - 110px));
    height: min(760px, calc(100dvh - 110px));
    min-height: min(620px, calc(100vh - 110px));
    min-height: min(620px, calc(100dvh - 110px));
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    background: #fff;
    color: #111;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.fwg-modal-body {
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: auto;
    position: relative;
    background: #fff;
}
.fwg-modal-body.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.76);
    z-index: 2;
    pointer-events: none;
}
.fwg-loading,
.fwg-error {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    font-weight: 700;
    text-align: center;
}
.fwg-loading { color: #111; }
.fwg-error { color: #a00000; }
.fwg-close {
    appearance: none;
    background: rgba(0,0,0,.88);
    border: 0;
    color: var(--fwg-yellow);
    cursor: pointer;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
}
.fwg-close:hover, .fwg-close:focus { background: #000; color: #fff; }
.fwg-project-nav {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--fwg-yellow);
    cursor: pointer;
    font-size: 82px;
    line-height: 1;
    width: 58px;
    height: 86px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 7;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.fwg-project-prev { left: -6px; }
.fwg-project-next { right: -6px; }
.fwg-project-nav:hover,
.fwg-project-nav:focus { color: #ffea4d; }
.fwg-project {
    display: grid;
    grid-template-columns: minmax(300px, 36%) minmax(0, 64%);
    gap: 22px;
    padding: 14px;
    min-height: 0;
    background: #fff;
}
.fwg-gallery-panel {
    min-width: 0;
    overflow: visible;
}
.fwg-gallery-main {
    background: #fff;
    width: 100%;
}
.fwg-gallery-main img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: #fff;
}
.fwg-main-video {
    background: #000;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fwg-main-video iframe,
.fwg-main-video video,
.fwg-video-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.fwg-main-video iframe { max-width: 100%; }
.fwg-main-video .fwg-video-link { padding: 30px; color: #fff; }
.fwg-main-video .fwg-video-link a { color: var(--fwg-yellow); }
.fwg-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.fwg-gallery-thumb {
    appearance: none;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.fwg-gallery-thumb.is-active { border-color: #111; }
.fwg-gallery-thumb img {
    display: block;
    width: 78px;
    height: 48px;
    object-fit: cover;
}
.fwg-content-panel {
    min-width: 0;
    display: block;
    padding: 0;
}
.fwg-project-title {
    margin: 0 50px 10px 0;
    font-size: clamp(24px, 2.1vw, 34px);
    line-height: 1.05;
    text-transform: uppercase;
    font-weight: 900;
}
.fwg-description-label {
    color: var(--fwg-yellow);
    font-weight: 700;
    margin-bottom: 5px;
}
.fwg-description {
    font-size: 16px;
    line-height: 1.45;
    margin-bottom: 14px;
}
.fwg-description p { margin: 0 0 8px; }
.fwg-featured-image {
    min-height: 0;
    background: #fff;
    display: block;
    overflow: visible;
}
.fwg-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 300px);
    max-height: calc(100dvh - 300px);
    object-fit: contain;
    background: #fff;
}
@media (max-width: 1100px) {
    .fwg-card-title { font-size: clamp(20px, 2.6vw, 29px); padding: 12px; }
    .fwg-grid, .fwg-cols-3 .fwg-grid, .fwg-cols-4 .fwg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fwg-dialog {
        width: min(1100px, calc(100vw - 48px));
        height: min(700px, calc(100vh - 70px));
        height: min(700px, calc(100dvh - 70px));
        min-height: min(540px, calc(100vh - 70px));
        min-height: min(540px, calc(100dvh - 70px));
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);
    }
    .fwg-modal-body {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }
    .fwg-loading,
    .fwg-error {
        min-height: 100%;
    }
    .fwg-project {
        grid-template-columns: 1fr;
        height: auto;
    }
    .fwg-featured-image img {
        max-height: none;
    }
}
@media (max-width: 700px) {
    .fwg-card-title { font-size: clamp(22px, 7vw, 34px); padding: 14px; }
    body.fwg-has-grid .gs-section.gs-projects > .container-fluid { padding-left: 15px !important; padding-right: 15px !important; }
    .fwg-grid, .fwg-cols-2 .fwg-grid, .fwg-cols-3 .fwg-grid, .fwg-cols-4 .fwg-grid { grid-template-columns: 1fr; }
    .fwg-modal {
        padding: 16px;
        align-items: center;
        justify-content: center;
    }
    .fwg-dialog {
        width: min(760px, calc(100vw - 32px));
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
        min-height: calc(100vh - 32px);
        min-height: calc(100dvh - 32px);
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow: visible;
    }
    .fwg-modal-body {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    .fwg-project { padding: 14px; gap: 16px; }
    .fwg-project-nav {
        width: 44px;
        height: 64px;
        font-size: 74px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 8;
    }
    .fwg-project-prev { left: -24px; }
    .fwg-project-next { right: -24px; }
    .fwg-close { width: 54px; height: 54px; font-size: 38px; }
    .fwg-card-title { font-size: 28px; }
    .fwg-project-title { margin-right: 58px; }
    .fwg-gallery-main img { aspect-ratio: auto; height: auto; }
    .fwg-gallery-thumbs { gap: 8px; margin-top: 12px; }
    .fwg-gallery-thumb img { width: 62px; height: 42px; }
    .fwg-featured-image img { max-height: none; }
}

@media (max-width: 700px) and (orientation: portrait) {
    .fwg-project-nav {
        width: 34px;
        height: 58px;
        font-size: 68px;
    }
    .fwg-project-prev { left: -18px; }
    .fwg-project-next { right: -18px; }
}

@media (max-width: 900px) and (orientation: landscape), (min-width: 701px) and (max-width: 1100px) {
    .fwg-project-nav {
        width: 48px;
        height: 72px;
        font-size: 76px;
    }
    .fwg-project-prev { left: 6px; }
    .fwg-project-next { right: 6px; }
}


/* Mobile title rhythm: match the Services page spacing below the fixed yellow header. */
@media (max-width: 700px) and (orientation: portrait) {
    body.fwg-has-grid .fwg-heading {
        margin-top: clamp(96px, 7vh, 125px) !important;
        margin-bottom: 76px !important;
    }
}
@media (max-width: 900px) and (orientation: landscape) {
    body.fwg-has-grid .fwg-heading {
        margin-top: 44px !important;
        margin-bottom: 44px !important;
    }
}


/* v0.1.13: restore Fusion yellow controls for overlay navigation and close button. */
.fwg-modal .fwg-project-nav,
.fwg-modal .fwg-project-nav:hover,
.fwg-modal .fwg-project-nav:focus,
.fwg-modal .fwg-project-nav:active {
    color: var(--fwg-yellow) !important;
}
.fwg-modal .fwg-close,
.fwg-modal .fwg-close:hover,
.fwg-modal .fwg-close:focus,
.fwg-modal .fwg-close:active {
    color: var(--fwg-yellow) !important;
}
.fwg-modal .fwg-project-nav:focus-visible,
.fwg-modal .fwg-close:focus-visible {
    outline: 3px solid var(--fwg-yellow);
    outline-offset: 3px;
}


/* v0.1.14: force Fusion yellow arrows and close X in all states. */
.fwg-modal [data-fwg-prev],
.fwg-modal [data-fwg-next],
.fwg-modal [data-fwg-prev]:hover,
.fwg-modal [data-fwg-next]:hover,
.fwg-modal [data-fwg-prev]:focus,
.fwg-modal [data-fwg-next]:focus,
.fwg-modal [data-fwg-prev]:active,
.fwg-modal [data-fwg-next]:active {
    color: var(--fwg-yellow) !important;
    background: transparent !important;
}
.fwg-modal [data-fwg-close],
.fwg-modal [data-fwg-close]:hover,
.fwg-modal [data-fwg-close]:focus,
.fwg-modal [data-fwg-close]:active {
    color: var(--fwg-yellow) !important;
    background: rgba(0,0,0,.88) !important;
}


/* v0.1.15: modal is mounted under body, so do not rely on .fwg-wrap CSS variables. */
.fwg-modal,
body > .fwg-modal {
    --fwg-yellow: #ffd900 !important;
}
body > .fwg-modal [data-fwg-prev],
body > .fwg-modal [data-fwg-next],
body > .fwg-modal [data-fwg-prev]:hover,
body > .fwg-modal [data-fwg-next]:hover,
body > .fwg-modal [data-fwg-prev]:focus,
body > .fwg-modal [data-fwg-next]:focus,
body > .fwg-modal [data-fwg-prev]:active,
body > .fwg-modal [data-fwg-next]:active {
    color: #ffd900 !important;
    background: transparent !important;
}
body > .fwg-modal [data-fwg-close],
body > .fwg-modal [data-fwg-close]:hover,
body > .fwg-modal [data-fwg-close]:focus,
body > .fwg-modal [data-fwg-close]:active {
    color: #ffd900 !important;
    background: rgba(0,0,0,.88) !important;
}


/* v0.1.16: avoid DOM-ready layout jump. Layout is now stabilized by critical CSS in wp_head. */
body.fwg-has-grid:not(.fwg-modal-open) .fwg-scroll-ancestor,
.fwg-scroll-root {
    transition: none !important;
}


/* v0.1.17: mobile/tablet overlay order: title, description, image/video, then slide thumbnails. */
@media (max-width: 1100px) {
    .fwg-project {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px;
    }
    .fwg-content-panel {
        display: contents !important;
    }
    .fwg-project-title {
        order: 1;
        margin: 0 58px 2px 0;
    }
    .fwg-description-label {
        order: 2;
        margin: 0 0 4px;
    }
    .fwg-description {
        order: 3;
        margin-bottom: 6px;
    }
    .fwg-gallery-panel {
        order: 4;
        width: 100%;
    }
    .fwg-featured-image {
        display: none !important;
    }
    .fwg-gallery-thumbs {
        margin-top: 14px;
    }
}

@media (max-width: 700px) {
    .fwg-project {
        gap: 12px;
    }
    .fwg-project-title {
        margin-right: 58px;
        margin-bottom: 2px;
    }
    .fwg-description {
        margin-bottom: 6px;
    }
    .fwg-gallery-thumbs {
        margin-top: 12px;
    }
}


/* v0.1.18: mobile/tablet keeps the standalone featured image below the description.
   Desired order on phones/tablets: title, description, image/video, slides. */
@media (max-width: 1100px) {
    .fwg-project:not(.fwg-has-video) .fwg-featured-image {
        display: block !important;
        order: 4;
        width: 100%;
        margin: 2px 0 0;
    }
    .fwg-project:not(.fwg-has-video) .fwg-featured-image img {
        width: 100%;
        height: auto;
        max-height: none !important;
        object-fit: contain;
    }
    .fwg-project:not(.fwg-has-video) .fwg-gallery-panel {
        order: 5;
        width: 100%;
    }
    .fwg-project:not(.fwg-has-video) .fwg-gallery-panel .fwg-gallery-main {
        display: none !important;
    }
    .fwg-project.fwg-has-video .fwg-gallery-panel {
        order: 4;
        width: 100%;
    }
    .fwg-project.fwg-has-video .fwg-featured-image {
        display: none !important;
    }
    .fwg-project.fwg-has-video .fwg-gallery-main {
        display: flex !important;
    }
    .fwg-project .fwg-gallery-thumbs {
        order: 6;
        margin-top: 14px;
    }
}
@media (max-width: 700px) {
    .fwg-project:not(.fwg-has-video) .fwg-featured-image {
        margin-top: 0;
    }
    .fwg-project .fwg-gallery-thumbs {
        margin-top: 12px;
    }
}