/* Bonjo Happy Customers — fully scoped to this homepage section only. */
#bonjo-customer-gallery {
  --bch-ink: #122323;
  --bch-accent: #f5a319;
  --bch-surface: #f7f9f7;
  --bch-gap: clamp(10px, 1.2vw, 18px);
  color: var(--bch-ink);
  padding: clamp(48px, 7vw, 104px) 20px;
  background: linear-gradient(145deg, #fffdf8 0%, var(--bch-surface) 100%);
  overflow: clip;
}
#bonjo-customer-gallery *, #bonjo-customer-gallery *::before, #bonjo-customer-gallery *::after { box-sizing: border-box; }
#bonjo-customer-gallery .bch__inner { width: min(1320px, 100%); margin: 0 auto; }
#bonjo-customer-gallery .bch__eyebrow { margin: 0 0 10px; color: #747c78; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
#bonjo-customer-gallery .bch__heading { max-width: 760px; margin: 0 0 clamp(26px, 4vw, 48px); font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.045em; }
#bonjo-customer-gallery .bch__heading em { color: var(--bch-accent); font-style: normal; }
#bonjo-customer-gallery .bch__grid { columns: 4 220px; column-gap: var(--bch-gap); }
#bonjo-customer-gallery .bch__tile { display: block; width: 100%; position: relative; break-inside: avoid; margin: 0 0 var(--bch-gap); padding: 0; border: 0; border-radius: 17px; background: #d9dfdb; cursor: zoom-in; overflow: hidden; isolation: isolate; box-shadow: 0 8px 18px rgb(18 35 35 / 9%); transform: perspective(1000px) rotateX(var(--bch-rx, 0deg)) rotateY(var(--bch-ry, 0deg)) translateY(var(--bch-lift, 0)); transition: transform 360ms cubic-bezier(.2,.75,.25,1), box-shadow 360ms cubic-bezier(.2,.75,.25,1); will-change: transform; }
#bonjo-customer-gallery .bch__tile::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at var(--bch-x, 50%) var(--bch-y, 50%), rgb(255 255 255 / .34), transparent 42%), linear-gradient(135deg, transparent 56%, rgb(0 0 0 / .1)); opacity: 0; transition: opacity 350ms ease; pointer-events: none; }
#bonjo-customer-gallery .bch__tile:hover, #bonjo-customer-gallery .bch__tile:focus-visible { --bch-lift: -11px; box-shadow: 0 26px 42px rgb(18 35 35 / 24%), 0 6px 14px rgb(18 35 35 / 10%); outline: none; }
#bonjo-customer-gallery .bch__tile:hover::after, #bonjo-customer-gallery .bch__tile:focus-visible::after { opacity: 1; }
#bonjo-customer-gallery .bch__tile:focus-visible { outline: 3px solid var(--bch-accent); outline-offset: 4px; }
#bonjo-customer-gallery .bch__image { display: block; width: 100%; height: auto; transform: scale(1.01); transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
#bonjo-customer-gallery .bch__tile:hover .bch__image, #bonjo-customer-gallery .bch__tile:focus-visible .bch__image { transform: scale(1.065); }
#bonjo-customer-gallery .bch__hint { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: rgb(18 35 35 / .76); opacity: 0; transform: translateY(8px); transition: opacity 250ms ease, transform 250ms ease; }
#bonjo-customer-gallery .bch__tile:hover .bch__hint, #bonjo-customer-gallery .bch__tile:focus-visible .bch__hint { opacity: 1; transform: translateY(0); }
.bch-lightbox[hidden] { display: none; }
.bch-lightbox { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center; padding: clamp(14px, 3vw, 36px); background: rgb(10 18 18 / .91); }
.bch-lightbox *, .bch-lightbox *::before, .bch-lightbox *::after { box-sizing: border-box; }
.bch-lightbox__stage { position: relative; display: grid; place-items: center; width: min(1080px, 100%); height: min(88vh, 850px); }
.bch-lightbox__image { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 22px 70px rgb(0 0 0 / .45); user-select: none; }
.bch-lightbox__button { position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgb(255 255 255 / .28); border-radius: 50%; color: #fff; background: rgb(18 35 35 / .72); cursor: pointer; transition: background 180ms ease, transform 180ms ease; }
.bch-lightbox__button:hover, .bch-lightbox__button:focus-visible { background: var(--bch-accent); color: #172424; transform: scale(1.07); outline: 3px solid #fff; outline-offset: 3px; }
.bch-lightbox__close { top: -4px; right: 0; }
.bch-lightbox__prev { left: clamp(-8px, -3vw, -42px); top: 50%; transform: translateY(-50%); }
.bch-lightbox__next { right: clamp(-8px, -3vw, -42px); top: 50%; transform: translateY(-50%); }
.bch-lightbox__prev:hover, .bch-lightbox__prev:focus-visible, .bch-lightbox__next:hover, .bch-lightbox__next:focus-visible { transform: translateY(-50%) scale(1.07); }
.bch-lightbox__count { position: absolute; bottom: -30px; left: 50%; color: #fff; font: 600 13px/1 system-ui, sans-serif; letter-spacing: .08em; transform: translateX(-50%); }
body.bch-lightbox-open { overflow: hidden; }
@media (max-width: 980px) { #bonjo-customer-gallery .bch__grid { columns: 3 190px; } }
@media (max-width: 680px) { #bonjo-customer-gallery { padding-inline: 14px; } #bonjo-customer-gallery .bch__grid { columns: 2 140px; } .bch-lightbox__prev { left: 4px; } .bch-lightbox__next { right: 4px; } }
@media (max-width: 380px) { #bonjo-customer-gallery .bch__grid { columns: 1; } }
@media (prefers-reduced-motion: reduce) { #bonjo-customer-gallery *, .bch-lightbox * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } #bonjo-customer-gallery .bch__tile { transform: none !important; } }