/* BS Vision slideshow (assets/js/slides.js). Site tokens only: Helvetica, the logo blues, glass on dark.
   Slides share one grid cell, so the tallest slide sets the height and nothing jumps while it plays. */
.ss{position:relative;min-width:0}
.ss-track{display:grid;outline:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:16px}
.ss-track:focus-visible{outline:2px solid var(--blue-3);outline-offset:6px}
.ss-slide{grid-area:1/1;margin:0;min-width:0;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .7s var(--ease),transform 1.1s var(--ease),visibility 0s linear .7s}
.ss-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s var(--ease),transform 1.1s var(--ease),visibility 0s}
/* without the script, only the first slide shows */
.ss:not([data-ss-ready]) .ss-slide:first-child{opacity:1;visibility:visible;transform:none}
.ss-media{position:relative;overflow:hidden;border-radius:16px;background:var(--sky);aspect-ratio:3/2}
.ss-media img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.ss-cap{display:grid;gap:4px;padding:16px 2px 0;font-size:15px;line-height:1.5;color:var(--slate)}
.ss-cap b{font-size:18px;font-weight:500;line-height:1.3;color:var(--navy)}
.ss-cap small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

/* a browser window around a product screen */
.ss-browser .ss-media{--bar:clamp(20px,3vw,32px);aspect-ratio:auto;padding-top:var(--bar);background:#fff;border-radius:14px;border:1px solid rgba(209,217,224,.9);box-shadow:0 40px 80px -40px rgba(8,20,34,.7),0 0 0 1px rgba(255,255,255,.4)}
.ss-browser .ss-media::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--bar);background:linear-gradient(180deg,#F6F8FA,#ECF0F4);border-bottom:1px solid #DDE3E9}
.ss-browser .ss-media::after{content:"academy.bsvision.co.za";position:absolute;top:0;left:50%;transform:translateX(-50%);height:var(--bar);display:flex;align-items:center;font-size:clamp(9px,1.05vw,12.5px);color:#6B7782;letter-spacing:.01em;white-space:nowrap}
.ss-browser .ss-media img{height:auto;aspect-ratio:1600/956;object-fit:cover;object-position:top center}
.ss-lights{position:absolute;top:0;left:12px;height:var(--bar);display:flex;align-items:center;gap:6px;z-index:1}
.ss-lights i{width:9px;height:9px;border-radius:50%;background:#D5DBE1}
.ss-lights i:nth-child(1){background:#E7A3A0}.ss-lights i:nth-child(2){background:#E9CF8F}.ss-lights i:nth-child(3){background:#A9D1A6}

/* controls */
.ss-ctrl{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.ss-btn{appearance:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--hair);background:#fff;color:var(--navy);cursor:pointer;flex:none;transition:background .3s,color .3s,border-color .3s}
.ss-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ss-play svg{width:16px;height:16px}
.ss-play.is-paused svg{fill:currentColor;stroke-width:1.2}
.ss-btn:hover{border-color:var(--blue);color:var(--blue)}
.ss-btn:focus-visible,.ss-dot:focus-visible{outline:2px solid var(--blue-3);outline-offset:2px}
.ss-dots{display:flex;align-items:center;gap:2px}
.ss-dot{appearance:none;border:0;background:none;padding:0;width:30px;height:44px;display:grid;place-items:center;cursor:pointer}
.ss-dot i{display:block;width:8px;height:8px;border-radius:999px;background:var(--hair);position:relative;overflow:hidden;transition:width .5s var(--ease),background .3s}
.ss-dot:hover i{background:var(--blue-4)}
.ss-dot[aria-current="true"]{width:44px}
.ss-dot[aria-current="true"] i{width:32px;background:var(--blue)}
/* the progress line: how long until the next slide (only while playing) */
.ss-running .ss-dot[aria-current="true"] i{background:var(--hair)}
.ss-running .ss-dot[aria-current="true"] i::after{content:"";position:absolute;inset:0;background:var(--blue);transform-origin:left;animation:ss-fill var(--ss-delay,6000ms) linear both}
@keyframes ss-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ss-count{margin-left:auto;font-size:13px;letter-spacing:.1em;color:var(--slate);font-variant-numeric:tabular-nums}
.ss-play{margin-left:6px}

/* on a dark or photographic section */
.ss-dark .ss-cap{color:var(--on-navy)}
.ss-dark .ss-cap b{color:#fff}
.ss-dark .ss-cap small{color:var(--mist)}
.ss-dark .ss-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ss-dark .ss-btn:hover{background:#fff;color:var(--blue);border-color:#fff}
.ss-dark .ss-dot i{background:rgba(255,255,255,.3)}
.ss-dark .ss-dot[aria-current="true"] i{background:#fff}
.ss-dark.ss-running .ss-dot[aria-current="true"] i{background:rgba(255,255,255,.3)}
.ss-dark .ss-dot i::after{background:#fff!important}
.ss-dark .ss-count{color:var(--on-navy)}
.ss-dark .ss-btn:focus-visible,.ss-dark .ss-dot:focus-visible,.ss-dark .ss-track:focus-visible{outline-color:#fff}

/* tabs above a slideshow */
.ss-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ss-tabs [role=tab]{appearance:none;border:0;border-radius:999px;background:none;color:#fff;font:500 15px/1 var(--font);padding:13px 22px;cursor:pointer;transition:background .35s var(--ease),color .3s}
.ss-tabs [role=tab][aria-selected="true"]{background:#fff;color:var(--blue)}
.ss-tabs [role=tab]:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ss-tabs-light{background:var(--tint);border-color:var(--hair)}
.ss-tabs-light [role=tab]{color:var(--navy)}
.ss-tabs-light [role=tab][aria-selected="true"]{background:var(--blue);color:#fff}

@media (max-width:560px){
  .ss-cap{padding-top:12px;font-size:14.5px}
  .ss-cap b{font-size:16.5px}
  .ss-dot{width:24px}
  .ss-dot[aria-current="true"]{width:36px}
  .ss-dot[aria-current="true"] i{width:24px}
  .ss-browser .ss-media{border-radius:10px}
  .ss-lights i{width:6px;height:6px}
}
@media (prefers-reduced-motion:reduce){
  .ss-slide,.ss-slide.is-on{transition:none;transform:none}
  .ss-dot i{transition:none}
  .ss-running .ss-dot[aria-current="true"] i::after{animation:none}
}

/* captions on glass over the photograph (photo slideshows) */
.ss-overlay .ss-slide{position:relative}
.ss-overlay .ss-media{border-radius:20px;aspect-ratio:3/2}
.ss-overlay .ss-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,30,48,0) 45%,rgba(14,30,48,.6) 100%);pointer-events:none}
.ss-overlay .ss-cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;padding:14px 18px;border-radius:16px;color:#fff;background:rgba(10,24,40,.38);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}
.ss-overlay .ss-cap b{color:#fff;font-size:clamp(17px,1.8vw,22px);font-weight:400}
.ss-overlay .ss-cap small{color:var(--on-blue)}
@media (max-width:560px){.ss-overlay .ss-cap{left:10px;right:10px;bottom:10px;padding:10px 14px}.ss-overlay .ss-media{border-radius:14px}}
/* the outgoing caption leaves quickly, so two captions never read on top of each other */
.ss-slide:not(.is-on) .ss-cap{opacity:0;transition:opacity .2s}
.ss-slide.is-on .ss-cap{opacity:1;transition:opacity .5s .25s}
@media (prefers-reduced-motion:reduce){.ss-slide .ss-cap,.ss-slide.is-on .ss-cap{transition:none}}
@media (max-width:560px){.ss-many .ss-dots{display:none}.ss-many .ss-ctrl{flex-wrap:nowrap}}