.wwba-showcase{--wwba-ink:#101113;--wwba-cream:#faf6f1;--wwba-warm:#f3ece6;--wwba-taupe:#928478;--wwba-line:#e8ded6;--wwba-muted:#706761;position:relative;width:100%;box-sizing:border-box;color:var(--wwba-ink)}
.wwba-showcase *{box-sizing:border-box}
.wwba-showcase-heading{max-width:780px;margin:0 0 30px}
.wwba-showcase-eyebrow{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--wwba-taupe);margin-bottom:9px}
.wwba-showcase-heading h2{margin:0;font-size:clamp(34px,5vw,56px);line-height:1.03;letter-spacing:-.045em;color:var(--wwba-ink);font-weight:900}
.wwba-showcase-heading p{margin:14px 0 0;color:var(--wwba-muted);line-height:1.7;font-size:16px}
.wwba-gallery{position:relative;width:100%}
.wwba-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px;align-items:start}
.wwba-gallery-item{min-width:0}
.wwba-project-meta{display:block;padding:0 2px 12px}
.wwba-project-meta h3{margin:0;font-size:18px;line-height:1.25;color:var(--wwba-ink);font-weight:900;letter-spacing:-.015em;overflow-wrap:anywhere}
.wwba-compare{position:relative;aspect-ratio:var(--wwba-frame-ratio,3/4);overflow:hidden;border-radius:22px;background:var(--wwba-cream);box-shadow:0 10px 30px rgba(16,17,19,.08);isolation:isolate}
.wwba-compare.wwba-orientation-landscape{max-width:100%}.wwba-compare.wwba-orientation-portrait{max-width:100%}.wwba-compare.wwba-orientation-square{max-width:100%}
.wwba-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;display:block;user-select:none;-webkit-user-drag:none;background:var(--wwba-cream)}
.wwba-image-after{z-index:1}.wwba-image-before{z-index:2;clip-path:inset(0 calc(100% - var(--wwba-split)) 0 0)}
.wwba-compare:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(16,17,19,.07)}
.wwba-divider{position:absolute;z-index:5;top:0;bottom:0;left:var(--wwba-split);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 14px rgba(0,0,0,.22);pointer-events:none}
.wwba-handle{position:absolute;z-index:6;left:var(--wwba-split);top:50%;width:52px;height:52px;border-radius:999px;border:2px solid #fff;background:var(--wwba-ink);transform:translate(-50%,-50%);padding:0;margin:0;display:grid;place-items:center;cursor:ew-resize;box-shadow:0 8px 24px rgba(0,0,0,.25);touch-action:none;-webkit-tap-highlight-color:transparent}
.wwba-handle:focus-visible,.wwba-info-button:focus-visible,.wwba-gallery-arrow:focus-visible,.wwba-info-close:focus-visible,.wwba-info-cta:focus-visible,.wwba-whatsapp-cta:focus-visible{outline:3px solid rgba(146,132,120,.5);outline-offset:3px}
.wwba-handle svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wwba-info-button{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(16,17,19,.1);background:#faf6f1;border-radius:999px;padding:6px 11px 6px 6px;color:var(--wwba-ink);cursor:pointer;box-shadow:0 8px 24px rgba(16,17,19,.16);-webkit-tap-highlight-color:transparent}
.wwba-info-button span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:transparent;color:#000;font-family:Georgia,serif;font-weight:900;font-size:16px;line-height:1}
.wwba-info-button em{font-style:normal;font-size:11px;font-weight:900;color:#000}
.wwba-info-overlay{position:absolute;right:14px;bottom:14px;z-index:8}
.wwba-mobile-nav{display:none}
.wwba-public-empty{padding:26px;border:1px solid var(--wwba-line);border-radius:18px;background:var(--wwba-cream);color:var(--wwba-muted);text-align:center}

/* Projectinformatie popup: de overlay dekt alle websitecontent; het paneel blijft compact en responsief. */
.wwba-info-modal[hidden]{display:none!important}
.wwba-info-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:2147483000!important;display:grid!important;place-items:center!important;margin:0!important;padding:clamp(18px,3vw,34px)!important;isolation:isolate}
.wwba-info-backdrop{position:absolute;inset:0;background:rgba(16,17,19,.72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.wwba-info-panel{position:relative;z-index:1;width:min(720px,100%);max-height:min(88vh,820px);max-height:min(88dvh,820px);overflow:hidden;background:#faf6f1;border:1px solid rgba(255,255,255,.72);border-radius:30px;padding:clamp(32px,4.6vw,52px);box-shadow:0 32px 100px rgba(0,0,0,.32);display:flex;flex-direction:column}
.wwba-info-content{display:flex;flex-direction:column;min-height:0;width:100%;flex:1 1 auto;overflow:hidden}
.wwba-info-main{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:2px 12px 2px 0;scrollbar-width:thin;scrollbar-color:#cfc3b9 transparent}
.wwba-info-main::-webkit-scrollbar{width:6px}.wwba-info-main::-webkit-scrollbar-track{background:transparent}.wwba-info-main::-webkit-scrollbar-thumb{background:#cfc3b9;border-radius:999px}
.wwba-info-panel h3{font-size:clamp(32px,5vw,50px);line-height:1.04;letter-spacing:-.04em;margin:8px 64px 22px 0;color:#000;max-width:620px;font-weight:900;overflow-wrap:anywhere}
.wwba-info-copy{color:#302d2a;font-size:clamp(16px,2vw,19px);line-height:1.72;white-space:pre-line;max-width:630px;overflow-wrap:anywhere}
.wwba-info-close{position:absolute;right:20px;top:20px;z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid rgba(16,17,19,.12);background:#fff;color:#000;font-size:28px;line-height:1;cursor:pointer;box-shadow:none!important}
.wwba-info-actions{flex:0 0 auto;margin-top:28px;padding-top:22px;border-top:1px solid var(--wwba-line);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:11px;text-align:left}
.wwba-info-actions>span{display:block;width:100%;color:#4f4945;font-size:14px;font-weight:800;line-height:1.5;text-align:left}
.wwba-info-cta{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;border-radius:14px;background:#000!important;color:#fff!important;text-decoration:none!important;font-size:14px;font-weight:900;white-space:nowrap;box-shadow:none!important;text-align:center}
.wwba-info-cta:hover,.wwba-info-cta:focus{background:#000!important;color:#fff!important;text-decoration:none!important}
.wwba-info-action-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}
.wwba-whatsapp-cta{flex:0 0 auto;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25D366!important;color:#fff!important;text-decoration:none!important;box-shadow:none!important;transition:none}
.wwba-whatsapp-cta svg{width:31px;height:31px;display:block;fill:currentColor}
.wwba-whatsapp-cta:hover,.wwba-whatsapp-cta:focus{background:#25D366!important;color:#fff!important;text-decoration:none!important;transform:none;box-shadow:none!important}
.wwba-info-panel .wwba-info-close,.wwba-info-panel .wwba-info-cta,.wwba-info-panel .wwba-whatsapp-cta{box-shadow:none!important}
html.wwba-info-open,body.wwba-info-open{overflow:hidden!important;overscroll-behavior:none}

@media(max-width:980px){.wwba-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}
@media(max-width:700px){
  .wwba-showcase-heading{margin-bottom:22px;padding:0 2px}.wwba-showcase-heading h2{font-size:clamp(36px,11vw,50px)}.wwba-showcase-heading p{font-size:15px}
  /* Mobiel: projecten staan verticaal onder elkaar. Er is geen horizontale projectcarrousel. */
  .wwba-gallery{width:100vw;margin-left:calc(50% - 50vw);padding-top:0}
  .wwba-gallery-grid{display:grid;grid-template-columns:1fr;gap:34px;overflow:visible;padding:0 12px 14px;scroll-snap-type:none}
  .wwba-gallery-item{width:100%;min-width:0;scroll-snap-align:none}
  .wwba-project-meta{padding:0 2px 12px}.wwba-project-meta h3{font-size:22px;line-height:1.2;font-weight:900}
  /* Elke afzonderlijke projectfoto behoudt de echte interactieve Before & After-slider. */
  .wwba-compare{position:relative;display:block;aspect-ratio:var(--wwba-frame-ratio,3/4)!important;overflow:hidden;border-radius:20px;box-shadow:0 12px 30px rgba(16,17,19,.1);background:#faf6f1;isolation:isolate}
  .wwba-compare:after{display:block}
  .wwba-image{position:absolute!important;inset:0!important;width:100%;height:100%!important;max-width:none;object-fit:contain;object-position:center center;background:#faf6f1;border-radius:0;display:block}
  .wwba-image-before{z-index:2;clip-path:inset(0 calc(100% - var(--wwba-split)) 0 0)!important}
  .wwba-image-after{z-index:1}
  .wwba-divider{display:block!important}
  .wwba-handle{display:grid!important;width:58px;height:58px}
  .wwba-mobile-nav{display:none!important}
  .wwba-info-overlay{right:12px;bottom:12px;padding:4px;background:#faf6f1;border-color:rgba(16,17,19,.1)}.wwba-info-overlay em{display:none}.wwba-info-overlay span{width:38px;height:38px;font-size:20px;color:#000}
  .wwba-info-modal{padding:12px!important;align-items:center!important}
  .wwba-info-panel{width:100%;max-height:calc(100dvh - 24px);border-radius:24px;padding:68px 22px 22px}
  .wwba-info-panel h3{font-size:clamp(32px,10vw,44px);margin:7px 4px 18px 0}
  .wwba-info-copy{font-size:17px;line-height:1.64}
  .wwba-info-close{right:15px;top:15px;width:46px;height:46px}
  .wwba-info-main{padding-right:7px}
  .wwba-info-actions{margin-top:22px;padding-top:18px;gap:10px;align-items:flex-start}.wwba-info-actions>span{text-align:left}.wwba-info-action-row{gap:12px}.wwba-info-cta{width:auto;min-width:190px;min-height:56px;align-self:flex-start;background:#000!important;color:#fff!important}.wwba-whatsapp-cta{width:56px;height:56px}
}
@media(max-width:420px){.wwba-project-meta h3{font-size:21px}.wwba-gallery-grid{padding-left:9px;padding-right:9px;gap:30px}.wwba-info-modal{padding:8px!important}.wwba-info-panel{max-height:calc(100dvh - 16px);border-radius:22px;padding:66px 18px 18px}.wwba-info-actions{margin-top:18px;padding-top:16px}.wwba-info-action-row{gap:10px}.wwba-info-cta{min-width:0;flex:1 1 auto;padding-left:18px;padding-right:18px}.wwba-whatsapp-cta{width:54px;height:54px}}