.topaz-slider-full{width:100%;margin:8px 0;padding:0 14px} /* gutters so rounded corners show */
.topaz-slider-wrap{margin-top:22px}
.topaz-slider{position:relative;height:var(--h,420px);overflow:hidden;background:#0d2b28;
  border-radius:24px;box-shadow:0 14px 40px rgba(var(--deep-rgb),.20)}
/* ---- How the media fills the frame (chosen in the admin) -------------------
   The frame had a FIXED height and object-fit:cover, so a wide banner (e.g.
   2104x880) was scaled to the frame's height and then cut off left and right —
   badly on desktop, worse on a phone, where the frame is shorter still and the
   sides of the artwork simply vanished.
   contain = whole image, bars where the shapes disagree.
   auto    = the frame takes its PROPORTIONS from the media (--ar, measured by
             slider.js), so the image fits exactly: no crop and no bars, at any
             width. The height setting is only the pre-measurement fallback. */
.topaz-slider[data-fit="contain"] .ts-slide img,
.topaz-slider[data-fit="contain"] .ts-slide video{object-fit:contain}
.topaz-slider[data-fit="auto"].ts-ar-ready{height:auto;aspect-ratio:var(--ar)}
.topaz-slider[data-fit="auto"].ts-ar-ready .ts-slide img,
.topaz-slider[data-fit="auto"].ts-ar-ready .ts-slide video{object-fit:cover}
.ts-track{position:absolute;inset:0}
/* pointer-events + z-index are what make a slide's LINK clickable, and they were
   missing. Every slide sits at inset:0, so with pointer-events:auto on all of them
   the LAST slide in DOM order was painted on top and swallowed every click no
   matter which slide was visible — a linked slide simply did nothing when the
   slide after it had no link. Only the visible slide may receive a click. */
.ts-slide{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;transition:transform .6s ease,opacity .6s ease;will-change:transform,opacity;backface-visibility:hidden}
.ts-slide img,.ts-slide video{width:100%;height:100%;object-fit:cover;display:block}
.ts-slide.active{opacity:1;pointer-events:auto;z-index:1}
/* The nav arrows and dots carry z-index:3, so they still sit above the active
   slide and keep working when the slide underneath them is a link. */
a.ts-slide{cursor:pointer}
/* A video slide fills the frame exactly as an image one does. object-fit is on
   .ts-slide video above; this only guards against a browser's default inline
   baseline gap and a black letterbox on a differently-shaped clip. */
.ts-slide.ts-video{background:#0d2b28}
/* Caption icon sits inline before the text and inherits the caption's colour. */
.ts-cap-ic{display:inline-flex;vertical-align:-.15em;margin-inline-end:10px}
.ts-cap-ic svg{width:1em;height:1em}
/* transitions */
.topaz-slider[data-transition="fade"] .ts-slide{transform:none}
.topaz-slider[data-transition="zoom"] .ts-slide{transform:scale(1.08)}
.topaz-slider[data-transition="zoom"] .ts-slide.active{transform:scale(1)}
.topaz-slider[data-transition="flip"]{perspective:1200px}
.topaz-slider[data-transition="flip"] .ts-slide{transform:rotateY(90deg);transform-origin:center}
.topaz-slider[data-transition="flip"] .ts-slide.active{transform:rotateY(0)}
.topaz-slider[data-transition="kenburns"] .ts-slide{transform:none}
.topaz-slider[data-transition="kenburns"] .ts-slide.active img{animation:tsKen 6s ease both}
@keyframes tsKen{from{transform:scale(1)}to{transform:scale(1.16)}}
.ts-cap{position:absolute;inset-block-end:0;inset-inline:0;padding:40px 30px 24px;color:#fff;font-size:26px;font-weight:800;
  background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ts-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:none;
  width:44px;height:44px;border-radius:50%;font-size:26px;cursor:pointer;color:var(--deep);z-index:3;line-height:1;
  direction:ltr;unicode-bidi:isolate} /* keep chevrons from bidi-mirroring in Arabic */
.ts-nav:hover{background:#fff}
/* Arrows are spatial (never flip with language): ‹ left = prev, › right = next. */
.ts-prev{left:16px;right:auto}
.ts-next{right:16px;left:auto}
.ts-prev::before{content:"\2039"} /* ‹ */
.ts-next::before{content:"\203A"} /* › */
.ts-dots{position:absolute;inset-block-end:14px;inset-inline:0;display:flex;gap:8px;justify-content:center;z-index:3}
.ts-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s}
.ts-dot.active{background:#fff;width:22px;border-radius:5px}
@media(max-width:640px){
  .topaz-slider{height:260px}
  /* …but an auto-fitted frame keeps its proportions on a phone too — that fixed
     260px is exactly what cropped the sides off the artwork on small screens. */
  .topaz-slider[data-fit="auto"].ts-ar-ready{height:auto}
  .ts-cap{font-size:18px;padding:24px 18px 18px}
}
.worker-hero{display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow)}
.worker-hero img,.worker-hero .ph{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:30px}
.worker-hero .muted{color:#7a7a7a;font-size:14px}

/* ---- Slider caption entrance animations (chosen in the admin) ---- */
.topaz-slider[data-cap-anim] .ts-slide .ts-cap{opacity:0}
.topaz-slider[data-cap-anim="none"] .ts-slide .ts-cap{opacity:1}
.topaz-slider .ts-slide.active .ts-cap{opacity:1}
[data-cap-anim="fadeup"] .ts-slide.active .ts-cap{animation:tcFadeUp .7s .15s ease both}
[data-cap-anim="slidein"] .ts-slide.active .ts-cap{animation:tcSlideIn .7s .15s ease both}
[data-cap-anim="zoom"] .ts-slide.active .ts-cap{animation:tcZoom .7s .15s ease both}
[data-cap-anim="typewriter"] .ts-slide.active .ts-cap{animation:tcType 1.1s .1s steps(30,end) both;white-space:nowrap;overflow:hidden}
@keyframes tcFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes tcSlideIn{from{opacity:0;transform:translateX(-44px)}to{opacity:1;transform:none}}
[dir="rtl"] [data-cap-anim="slidein"] .ts-slide.active .ts-cap{animation-name:tcSlideInRtl}
@keyframes tcSlideInRtl{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes tcZoom{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes tcType{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
[dir="rtl"] [data-cap-anim="typewriter"] .ts-slide.active .ts-cap{animation-name:tcTypeRtl}
@keyframes tcTypeRtl{from{opacity:1;clip-path:inset(0 0 0 100%)}to{opacity:1;clip-path:inset(0 0 0 0)}}