/* RITS Logo Ticker - see inc/logo-ticker.php.
   Every value below is a default; the Elementor widget sets the same custom
   properties on {{WRAPPER}} .rlt, which wins. The motion itself is done by
   assets/js/logo-ticker.js (transform on .rlt-track); without it the band is a
   still row. */

.rlt,.rlt-paired{
  --rlt-h:158px;            /* logo height */
  --rlt-gap:11vw;           /* space between logos (and between two sets) */
  --rlt-pt:26px;--rlt-pb:30px;
  --rlt-max-w:500px;
  --rlt-fade:10%;
  --rlt-ph-c:#5E6B7E;
  --rlt-div-c:#D3DCEA;--rlt-div-w:1px;
  --rlt-ph-sp:clamp(14px,1.6vw,28px);   /* logos to divider */
  --rlt-ph-pad:clamp(20px,2.6vw,40px);  /* divider to phrase */
  --rlt-speed:36;
  position:relative;overflow:hidden;background:#000;
}
/* light theme: the band continues the paper the hero dissolves into.
   :where() keeps this at the weight of a single class, so a background set in
   the widget's Style tab still wins. */
:where(:root[data-theme="light"]) :is(.rlt,.rlt-paired){
  background:linear-gradient(180deg,var(--paper,#F5F7F9) 0%,#fff 50%,var(--paper,#F5F7F9) 100%);
}

.rlt-in{
  display:flex;flex-direction:var(--rlt-dir,row);align-items:center;gap:var(--rlt-in-gap,0px);
  padding:calc(var(--rlt-pt) * var(--rlt-kp,1)) var(--gut,4vw) calc(var(--rlt-pb) * var(--rlt-kp,1));
}
.rlt-viewport{flex:1 1 auto;min-width:0;width:var(--rlt-vp-w,auto);overflow:hidden}
.rlt--fade .rlt-viewport{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--rlt-fade),#000 calc(100% - var(--rlt-fade)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--rlt-fade),#000 calc(100% - var(--rlt-fade)),transparent 100%);
}
.rlt-track{display:flex;width:max-content;backface-visibility:hidden}
.rlt.is-running .rlt-track{will-change:transform}

/* One set = the logos plus one trailing gap, so a set's own box is exactly
   the distance the track travels per cycle. */
.rlt .rlt-set{
  display:flex;align-items:center;flex:none;gap:var(--rlt-gap);
  margin:0;padding:0 var(--rlt-gap) 0 0;list-style:none;
}
.rlt .rlt-item{flex:none;margin:0;padding:0;list-style:none;line-height:0}
.rlt .rlt-item::before,.rlt .rlt-item::marker{content:none}
.rlt .rlt-item a{display:block;line-height:0;border-radius:4px}
.rlt .rlt-item a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
/* width/height attributes give the aspect ratio before the file arrives, so
   every logo reserves its exact box: no shift, and the set width is right
   from the first frame */
.rlt .rlt-item img{
  display:block;height:calc(var(--rlt-h) * var(--rlt-k,1));width:auto;max-width:var(--rlt-max-w);
  object-fit:contain;opacity:var(--rlt-op,1);
  border:0;border-radius:0;box-shadow:none;
  -webkit-user-select:none;user-select:none;
}
.rlt--mono .rlt-item img{filter:grayscale(1);opacity:calc(var(--rlt-op,1) * .7);transition:filter .3s ease,opacity .3s ease}
.rlt--mono .rlt-item:hover img,.rlt--mono .rlt-item a:focus-visible img{filter:none;opacity:var(--rlt-op,1)}

.rlt--balanced .rlt-item img{
  width:calc(var(--rlt-h) * var(--rlt-logo-w));
  height:calc(var(--rlt-h) * var(--rlt-logo-h));
  max-width:var(--rlt-max-w);object-fit:contain;
}

/* Two client rows share one heading; each keeps its own measured loop. */
.rlt-dual{
  background:linear-gradient(180deg,var(--paper,#F5F7F9),#fff 50%,var(--paper,#F5F7F9));
  padding:26px 0 24px;
  overflow:hidden;
}
.rlt-dual-title{
  margin:0 20px 18px;text-align:center;
  font-family:var(--f-body,inherit);font-size:12px;font-weight:600;
  line-height:1.5;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rlt-ph-c,#5E6B7E);
}
.rlt-dual .rlt{background:transparent}
.rlt-dual .rlt + .rlt{margin-top:18px}
.rlt-dual .rlt-in{padding:var(--rlt-pt) var(--gut,4vw) var(--rlt-pb)}
.rlt-dual .rlt-item{
  display:flex;align-items:center;justify-content:center;
  width:var(--rlt-max-w);height:var(--rlt-h);
}
.rlt-dual .rlt-item a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.rlt-dual .rlt-item img{
  width:calc(var(--rlt-h) * var(--rlt-logo-w));
  height:calc(var(--rlt-h) * var(--rlt-logo-h));
  max-width:100%;max-height:100%;object-fit:contain;
}
.rlt-curated{padding:24px 0 20px;text-align:center}
.rlt-curated .rlt-dual-title{margin-bottom:18px;font-size:11px;letter-spacing:.18em}
.rlt-clients-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin:12px 16px 0;color:#5E6B7E;font-size:12px;line-height:1.5;
  text-decoration:none;transition:color .2s;
}
.rlt-clients-link:hover{color:#123876}
.rlt-clients-link:focus-visible{outline:2px solid #346CDB;outline-offset:3px;border-radius:4px}
.rlt-clients-link svg{flex:none}
@media(max-width:900px){
  .rlt-dual{padding:22px 0}
  .rlt-dual-title{font-size:11px;margin-bottom:16px;letter-spacing:.16em}
  .rlt-dual .rlt-item{width:min(var(--rlt-max-w),110px)}
  .rlt-dual .rlt + .rlt{margin-top:16px}
}

/* ---- the phrase, still, beside the moving logos ---- */
:is(.rlt,.rlt-paired) .rlt-phrase{
  flex:none;margin:0;white-space:nowrap;
  font-family:var(--f-body,inherit);font-size:clamp(13px,1vw,16px);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;line-height:1.5;
  color:var(--rlt-ph-c);text-align:var(--rlt-ph-ta,start);
}
.rlt--phrase-right .rlt-phrase{
  order:var(--rlt-ph-order,2);
  margin-left:calc(var(--rlt-ph-sp) * var(--rlt-ph-space,1));
  padding-left:calc(var(--rlt-ph-pad) * var(--rlt-ph-space,1));
}
.rlt--phrase-left .rlt-phrase{
  order:-1;
  margin-right:calc(var(--rlt-ph-sp) * var(--rlt-ph-space,1));
  padding-right:calc(var(--rlt-ph-pad) * var(--rlt-ph-space,1));
}
.rlt--divider.rlt--phrase-right .rlt-phrase{border-left:calc(var(--rlt-div-w) * var(--rlt-ph-div,1)) solid var(--rlt-div-c)}
.rlt--divider.rlt--phrase-left .rlt-phrase{border-right:calc(var(--rlt-div-w) * var(--rlt-ph-div,1)) solid var(--rlt-div-c)}
@media (max-width:900px){
  :is(.rlt,.rlt-paired) .rlt-phrase{font-size:12px;letter-spacing:.18em}
}

/* ---- short desktop screens: the band has to stay inside the first screen
   under the hero, so logos and padding step down with the window height
   (158 -> 120 -> 94px logos at the default size) ---- */
@media (min-width:901px) and (max-height:960px){
  .rlt--short{--rlt-k:.7595;--rlt-kp:.68}
}
@media (min-width:901px) and (max-height:880px){
  .rlt--short{--rlt-k:.5949;--rlt-kp:.4643}
}

/* ---- reduced motion: opt-in only (data-respect-rm on .rlt) - by default the
   band scrolls on every device, see assets/js/logo-ticker.js ---- */
@media (prefers-reduced-motion: reduce){
  .rlt[data-respect-rm] .rlt-track{transform:none!important;width:auto;justify-content:center}
  .rlt[data-respect-rm] .rlt-set{flex:1 1 auto;flex-wrap:wrap;justify-content:center;padding:0;row-gap:calc(var(--rlt-gap) / 3)}
  .rlt[data-respect-rm] .rlt-set[data-clone]{display:none}
  .rlt--fade[data-respect-rm] .rlt-viewport{-webkit-mask-image:none;mask-image:none}
}

/* Shared logo window and fixed phrase, with two compact native client loops. */
.rlt-paired-rows{flex:1 1 auto;min-width:0;width:var(--rlt-vp-w,auto)}
.rlt-paired-rows > .rlt{background:transparent}
.rlt-paired-rows > .rlt > .rlt-in{padding:0}
.rlt-paired-rows > .rlt + .rlt{margin-top:16px}
.rlt-paired-rows > .rlt + .rlt .rlt-item img{
  width:calc(var(--rlt-h) * var(--rlt-logo-w) * var(--rlt-banner-scale,.82));
  height:calc(var(--rlt-h) * var(--rlt-logo-h) * var(--rlt-banner-scale,.82));
}