.bcp-portfolio-page{--work-soft:color-mix(in srgb,var(--bcp-primary) 5%,var(--bcp-background));--work-border:color-mix(in srgb,var(--bcp-primary) 14%,var(--bcp-background))}
body .portfolio-area.bcp-portfolio-page{padding:40px 0 34px;background:var(--bcp-background)!important}
body .bcp-portfolio-page .portfolio-menu-wrapper{padding:14px;margin-bottom:26px;border:1px solid var(--work-border);border-radius:18px;background:var(--work-soft);box-shadow:0 5px 18px color-mix(in srgb,var(--bcp-primary) 5%,transparent)}
body .bcp-portfolio-page .portfolio-menu-wrapper ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
body .bcp-portfolio-page .portfolio-menu-wrapper ul li{display:block;padding:0!important;margin:0!important;border:0!important;background:transparent!important;line-height:1}
body .bcp-portfolio-page .portfolio-menu-wrapper button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:9px 13px;border:1px solid var(--work-border);border-radius:10px;background:var(--bcp-background);color:var(--bcp-text);font:600 12px/18px var(--bcp-body-font);cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
body .bcp-portfolio-page .portfolio-menu-wrapper li.active button{background:var(--bcp-primary);color:var(--bcp-on-primary);border-color:var(--bcp-primary);box-shadow:0 4px 12px color-mix(in srgb,var(--bcp-primary) 18%,transparent)}
body .bcp-portfolio-page .portfolio-menu-wrapper li:not(.active) button:hover{background:var(--work-soft);color:var(--bcp-primary);border-color:var(--bcp-primary)}
.bcp-portfolio-page button:focus-visible{outline:2px solid var(--bcp-primary);outline-offset:3px}
body .bcp-portfolio-page .single-portfolio-item .thumb{border:1px solid var(--work-border);border-radius:16px;overflow:hidden;background:var(--bcp-background);box-shadow:0 5px 18px color-mix(in srgb,var(--bcp-primary) 7%,transparent);transition:border-color .2s,box-shadow .2s}
body .bcp-portfolio-page .single-portfolio-item .thumb:hover{border-color:var(--bcp-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--bcp-primary) 14%,transparent)}
.bcp-portfolio-page .twentytwenty-container img{border-radius:0}
body .bcp-portfolio-page .twentytwenty-handle{width:36px;height:36px;margin-left:-20px;margin-top:-20px;border:2px solid var(--bcp-on-primary);background:var(--bcp-primary);box-shadow:0 3px 12px color-mix(in srgb,var(--bcp-heading) 15%,transparent)}
.bcp-portfolio-page .twentytwenty-left-arrow{border-right-color:var(--bcp-on-primary)}
.bcp-portfolio-page .twentytwenty-right-arrow{border-left-color:var(--bcp-on-primary)}
.bcp-portfolio-page .twentytwenty-horizontal .twentytwenty-handle::before,.bcp-portfolio-page .twentytwenty-horizontal .twentytwenty-handle::after{background:var(--bcp-on-primary);box-shadow:none}
[data-theme="dark"] .bcp-portfolio-page{--work-soft:color-mix(in srgb,var(--bcp-primary) 10%,var(--bcp-background));--work-border:color-mix(in srgb,var(--bcp-heading) 16%,var(--bcp-background))}
@media(max-width:575px){body .portfolio-area.bcp-portfolio-page{padding:28px 0 20px}body .bcp-portfolio-page .portfolio-menu-wrapper{padding:10px;margin-bottom:20px;border-radius:14px}body .bcp-portfolio-page .portfolio-menu-wrapper ul{justify-content:flex-start;gap:6px}body .bcp-portfolio-page .portfolio-menu-wrapper button{font-size:11px;padding:8px 10px;min-height:36px}.bcp-portfolio-page .single-portfolio-item{padding-left:9px;padding-right:9px}}
@media(prefers-reduced-motion:reduce){body .bcp-portfolio-page .portfolio-menu-wrapper button,body .bcp-portfolio-page .single-portfolio-item .thumb{transition:none}}

/* One clipping surface keeps both image layers and overlays inside equal corners. */
body .bcp-portfolio-page .single-portfolio-item .thumb.twentytwenty-container{border-radius:16px!important;overflow:hidden!important;isolation:isolate;box-shadow:0 4px 14px color-mix(in srgb,var(--bcp-primary) 6%,transparent)!important;border:1px solid var(--work-border)!important}
body .bcp-portfolio-page .single-portfolio-item .thumb.twentytwenty-container img{border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important}
body .bcp-portfolio-page .twentytwenty-overlay{border-radius:inherit!important}
body .bcp-portfolio-page .single-portfolio-item .thumb.twentytwenty-container:hover{border-color:var(--bcp-primary)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--bcp-primary) 11%,transparent)!important}
body .bcp-portfolio-page .portfolio-menu-wrapper ul{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important;gap:8px!important}
body .bcp-portfolio-page .portfolio-menu-wrapper ul li{outline:none!important;box-shadow:none!important;border:0!important}
body .bcp-portfolio-page .portfolio-menu-wrapper button:focus{outline:none!important;box-shadow:none!important;border-color:var(--bcp-primary)!important}
body .bcp-portfolio-page .portfolio-menu-wrapper button:focus-visible{outline:2px solid var(--bcp-primary)!important;outline-offset:3px!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bcp-primary) 12%,transparent)!important}

body .bcp-portfolio-page .portfolio-masonary-wrapper .single-portfolio-item .twentytwenty-wrapper{border-radius:16px!important;overflow:hidden!important;box-shadow:none!important;background:var(--bcp-background);}

/* Balanced category controls and a separate gallery card surface. */
body .bcp-portfolio-page .portfolio-menu-wrapper{padding:12px!important;margin-bottom:24px!important}
body .bcp-portfolio-page .portfolio-menu-wrapper ul{align-items:center!important}
body .bcp-portfolio-page .portfolio-menu-wrapper ul li{margin:0!important;padding:0!important;line-height:0!important}
body .bcp-portfolio-page .portfolio-menu-wrapper button{margin:0!important;vertical-align:middle;line-height:18px!important;padding-top:9px!important;padding-bottom:9px!important}
.bcp-portfolio-page .portfolio-menu-wrapper button i,.bcp-portfolio-page .portfolio-menu-wrapper button svg{font-size:11px;width:13px;flex-shrink:0;color:inherit}
.bcp-portfolio-page .bcp-work-card{padding:7px;border:1px solid var(--work-border);border-radius:20px;background:var(--work-soft);box-shadow:0 7px 20px color-mix(in srgb,var(--bcp-heading) 9%,transparent);transition:border-color .2s,box-shadow .2s}
body .bcp-portfolio-page .bcp-work-card .thumb.twentytwenty-container{border-radius:13px!important;box-shadow:none!important}
body .bcp-portfolio-page .bcp-work-card .twentytwenty-wrapper{border-radius:13px!important}
body .bcp-portfolio-page .bcp-work-card:hover{border-color:var(--bcp-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--bcp-primary) 13%,transparent)}
.bcp-portfolio-page .bcp-work-label{position:absolute;top:10px;z-index:12;display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--work-border);border-radius:7px;background:var(--bcp-background);color:var(--bcp-heading);font-size:10px;font-weight:600;line-height:1.4;box-shadow:0 2px 7px color-mix(in srgb,var(--bcp-heading) 8%,transparent);pointer-events:none}
.bcp-portfolio-page .bcp-work-before{left:10px}.bcp-portfolio-page .bcp-work-after{right:10px;background:var(--bcp-primary);color:var(--bcp-on-primary);border-color:var(--bcp-primary)}
@media(max-width:575px){body .bcp-portfolio-page .portfolio-menu-wrapper{padding:10px!important;margin-bottom:20px!important}.bcp-portfolio-page .bcp-work-card{padding:6px;border-radius:18px}.bcp-portfolio-page .bcp-work-label{font-size:9px;padding:4px 7px;top:8px}.bcp-portfolio-page .bcp-work-before{left:8px}.bcp-portfolio-page .bcp-work-after{right:8px}}
@media(prefers-reduced-motion:reduce){.bcp-portfolio-page .bcp-work-card{transition:none}}

/* Single card border and one shared image clipping radius. */
body .bcp-portfolio-page .bcp-work-card{position:relative;padding:0!important;border:1px solid var(--work-border);border-radius:16px!important;background:var(--bcp-background);box-shadow:0 5px 17px color-mix(in srgb,var(--bcp-heading) 8%,transparent);overflow:hidden;isolation:isolate}
body .bcp-portfolio-page .bcp-work-card .thumb.twentytwenty-container,body .bcp-portfolio-page .bcp-work-card .thumb.twentytwenty-container:hover{border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;overflow:hidden!important}
body .bcp-portfolio-page .portfolio-masonary-wrapper .single-portfolio-item .bcp-work-card .twentytwenty-wrapper{border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important}
body .bcp-portfolio-page .bcp-work-card img{border:0!important;border-radius:0!important;box-shadow:none!important}
body .bcp-portfolio-page .bcp-work-label{z-index:50;top:9px;font-size:10px;line-height:1.4;padding:4px 7px;border-radius:7px;display:inline-flex!important;opacity:1!important;visibility:visible!important}
body .bcp-portfolio-page .twentytwenty-overlay{display:none!important}
body .bcp-portfolio-page .portfolio-menu-wrapper{padding:12px!important}
body .bcp-portfolio-page .portfolio-menu-wrapper ul{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:7px!important;overflow-x:auto;padding:2px 0!important;scrollbar-width:thin;scrollbar-color:var(--work-border) transparent}
body .bcp-portfolio-page .portfolio-menu-wrapper ul li{flex:0 0 auto!important}
body .bcp-portfolio-page .portfolio-menu-wrapper button{font-size:11px;white-space:nowrap;min-height:36px;padding:8px 10px!important}
body .bcp-portfolio-page .portfolio-menu-wrapper button:focus-visible{outline:none!important;box-shadow:inset 0 0 0 2px var(--bcp-on-primary)!important;border-color:var(--bcp-primary)!important;background:var(--bcp-primary);color:var(--bcp-on-primary)}
@media(max-width:575px){body .bcp-portfolio-page .bcp-work-label{font-size:9px}body .bcp-portfolio-page .portfolio-menu-wrapper button{min-height:40px}}

/* Labels follow the visible image area; category controls wrap naturally. */
body .bcp-portfolio-page .bcp-work-card.bcp-hide-before .bcp-work-before,body .bcp-portfolio-page .bcp-work-card.bcp-hide-after .bcp-work-after{opacity:0!important;visibility:hidden!important}
body .bcp-portfolio-page .portfolio-menu-wrapper ul{flex-wrap:wrap!important;justify-content:center!important;overflow:visible!important;gap:7px!important;padding:0!important}
body .bcp-portfolio-page .portfolio-menu-wrapper ul li{flex:0 0 auto!important}
body .bcp-portfolio-page .portfolio-menu-wrapper button{font-size:11px!important;padding:7px 9px!important;min-height:34px!important;gap:6px}
@media(max-width:575px){body .bcp-portfolio-page .portfolio-menu-wrapper ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}body .bcp-portfolio-page .portfolio-menu-wrapper button{width:100%;height:100%;min-height:40px!important;white-space:normal;font-size:10px!important;padding:7px 6px!important}}

body .bcp-portfolio-page .bcp-work-card .bcp-work-label[hidden]{display:none!important;opacity:0!important;visibility:hidden!important}