/* Portfolio band - shared. Linked after each page sheet, so these win.
   Source: the enterprise-software-development-company build (2026-09-30). */
.zmit .zab-folio.z-section { padding: 40px 0 50px; }
.zmit .zab-folio h2 { font-size: 36.8px; font-weight: 400; line-height: 1.25; color: #14142b; text-align: left; margin: 0 0 26px; }
.zmit .zab-folio-stage { position: relative; }
.zmit .zab-folio-track {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; border-radius: 5px;
}
.zmit .zab-folio-track::-webkit-scrollbar { display: none; }
.zmit .zab-folio-item {
    flex: 0 0 72%; height: 630px; scroll-snap-align: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border-radius: 5px; background-color: #eef0f7;
}
.zmit .zab-folio-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); cursor: pointer;
}
.zmit .zab-folio-nav::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px;
    border-top: 2px solid #14142b; border-right: 2px solid #14142b;
}
.zmit .zab-folio-prev { left: -8px; }
.zmit .zab-folio-next { right: -8px; }
.zmit .zab-folio-prev::before { transform: rotate(-135deg); margin-left: 14px; }
.zmit .zab-folio-next::before { transform: rotate(45deg); margin-right: 14px; }
.zmit .zab-folio-thumbs { display: flex; gap: 10px; overflow-x: auto; margin-top: 14px; scrollbar-width: none; }
.zmit .zab-folio-thumbs::-webkit-scrollbar { display: none; }
.zmit .zab-folio-thumb {
    flex: 0 0 106px; height: 106px; border: 0; border-radius: 5px; cursor: pointer;
    background-size: cover; background-position: center; background-color: #eef0f7;
    opacity: .6; transition: opacity .2s;
}
.zmit .zab-folio-thumb[aria-selected="true"],
.zmit .zab-folio-thumb:hover { opacity: 1; }
.zmit .zab-folio-thumb:focus-visible { outline: 2px solid #0161ff; outline-offset: 2px; }
@media (max-width: 1080px) {
    .zmit .zab-folio-item { flex-basis: 84%; height: 420px; }
    .zmit .zab-folio-thumb { flex-basis: 84px; height: 84px; }
}
@media (max-width: 767px) {
    .zmit .zab-folio h2 { font-size: 24px; }
    .zmit .zab-folio-item { flex-basis: 92%; height: 260px; }
    .zmit .zab-folio-thumb { flex-basis: 64px; height: 64px; }
    .zmit .zab-folio-prev { left: 2px; }
    .zmit .zab-folio-next { right: 2px; }
}
.zmit .zab-folio.z-section { padding: 40px 0 70px; }
.zmit .zab-folio h2 { margin-bottom: 44px; }
.zmit .zab-folio .is-clone { display: none; }
.zmit .zab-folio-nav svg { display: none; }
@media (min-width: 1081px) {
    .zmit .zab-folio.z-section { padding: 20px 0 96.4px; }
    .zmit .zab-folio h2 { font-size: 36.8px; font-weight: 400; line-height: 36.8px; color: #141414; margin: 0 0 85px; }
    .zmit .zab-folio-stage { margin: 0 40px; }
    .zmit .zab-folio-track {
        gap: 0; overflow: hidden; scroll-snap-type: none; border-radius: 5px;
        touch-action: pan-y; user-select: none; -webkit-user-select: none;
    }
    .zmit .zab-folio-item {
        flex: 0 0 100%; height: 630px; border-radius: 5px;
        background-size: cover; background-position: 50% 0; scroll-snap-align: none;
    }
    .zmit .zab-folio .is-clone { display: block; }
    .zmit .zab-folio-nav {
        top: 350px; transform: none; width: 44px; height: 44px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        border: 0; border-radius: 94px; background: transparent;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); color: #808080;
    }
    .zmit .zab-folio-nav::before { content: none; }
    .zmit .zab-folio-nav svg { display: block; width: 18px; height: 18px; }
    .zmit .zab-folio-nav:focus-visible { outline: 2px solid #0161ff; outline-offset: 2px; }
    .zmit .zab-folio-prev { left: -50px; }
    .zmit .zab-folio-next { right: -50px; }
    .zmit .zab-folio-thumbs {
        margin: 2px 40px 0; gap: 10px; overflow: hidden;
        touch-action: pan-y; user-select: none; -webkit-user-select: none;
    }
    .zmit .zab-folio-thumb {
        flex: 0 0 calc((100% - 90px) / 10); height: 80px; border-radius: 5px;
        background-size: cover; background-position: 0 50%; opacity: 1;
    }
    .zmit .zab-folio-thumb:focus-visible { outline-offset: -2px; }
}
@media (max-width: 767px) {
    .zmit .zab-folio .is-clone { display: block; }
    .zmit .zab-folio-nav { display: none; }
    .zmit .zab-folio-track {
        gap: 0; overflow: hidden; scroll-snap-type: none;
        touch-action: pan-y; user-select: none; -webkit-user-select: none;
    }
    .zmit .zab-folio-item { flex: 0 0 100%; height: auto; aspect-ratio: 335 / 190; scroll-snap-align: none; border-radius: 5px; }
    .zmit .zab-folio-thumbs {
        gap: 10px; overflow: hidden; scroll-snap-type: none;
        touch-action: pan-y; user-select: none; -webkit-user-select: none;
    }
    .zmit .zab-folio-thumb { flex: 0 0 calc((100% - 10px) / 2); height: 70px; scroll-snap-align: none; opacity: 1; }
}
@media (min-width: 768px) and (max-width: 1080px) {
    .zmit .zab-folio.z-section { padding: 0 0 96.4px; }
    .zmit .zab-folio h2 { font-size: 36.8px; font-weight: 400; line-height: 1; color: #141414; margin: 0 0 70px; }
    .zmit .zab-folio-stage { margin: 0 40px; }
    .zmit .zab-folio-track {
        gap: 0; overflow: hidden; scroll-snap-type: none; border-radius: 5px;
        touch-action: pan-y; user-select: none; -webkit-user-select: none;
    }
    .zmit .zab-folio-item {
        flex: 0 0 100%; height: 457px; border-radius: 5px;
        background-size: cover; background-position: 0 0; scroll-snap-align: none;
    }
    .zmit .zab-folio .is-clone { display: block; }
    .zmit .zab-folio-nav {
        top: 247px; transform: none; width: 44px; height: 44px; padding: 0;
        display: flex; align-items: center; justify-content: center;
        border: 0; border-radius: 94px; background: transparent;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); color: #808080;
    }
    .zmit .zab-folio-nav::before { content: none; }
    .zmit .zab-folio-nav svg { display: block; width: 18px; height: 18px; }
    .zmit .zab-folio-nav:focus-visible { outline: 2px solid #0161ff; outline-offset: 2px; }
    .zmit .zab-folio-prev { left: -50px; }
    .zmit .zab-folio-next { right: -50px; }
    .zmit .zab-folio-thumbs {
        margin: 2px 40px 0; gap: 10px; overflow: hidden; scroll-snap-type: none;
        touch-action: pan-y; user-select: none; -webkit-user-select: none;
    }
    .zmit .zab-folio-thumb {
        flex: 0 0 calc((100% - 20px) / 3); height: 80px; border-radius: 5px;
        background-size: cover; background-position: 0 50%; opacity: 1; scroll-snap-align: none;
    }
    .zmit .zab-folio-thumb:focus-visible { outline-offset: -2px; }
}
@media (min-width: 768px) and (max-width: 921px) {
    .zmit .zab-folio.z-section { padding-bottom: 94.1px; }
    .zmit .zab-folio h2 { font-size: 33.56px; }
}
@media (min-width: 768px) and (max-width: 880px) {
    .zmit .zab-folio-item { height: 414px; }
    .zmit .zab-folio-nav { top: 206px; }
}
@media (min-width: 1024px) and (max-width: 1080px) {
    .zmit .zab-folio-thumb { flex-basis: calc((100% - 90px) / 10); }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .zmit .zab-folio-item { height: 538px; background-position: 50% 0; }
    .zmit .zab-folio-nav { top: 247px; }
}

/* Image size per breakpoint - see folio-section.php. Slide (cover): desktop the
   2560 upload | tablet 1536 | phone 1024. Thumb: desktop the slide's own file
   (already fetched, no extra bytes) | tablet + phone 300. */
.zmit .zab-folio-item,
.zmit .zab-folio-thumb { background-image: var(--fb-l, none); }
@media (max-width: 1080px) {
    .zmit .zab-folio-item { background-image: var(--fb-m, var(--fb-l, none)); }
    .zmit .zab-folio-thumb { background-image: var(--fb-s, var(--fb-l, none)); }
}
@media (max-width: 767px) {
    .zmit .zab-folio-item { background-image: var(--fb-s, var(--fb-l, none)); }
}