/* =========================================================================
   NOS SOLUTIONS  v2  (inc/solutions.php, inc/solutions-scenes.php,
   inc/elementor-solutions-widgets.php, assets/js/solutions.js)

   A hero with a deck of the three solutions standing in depth, then each
   solution as a chapter: the pitch beside a small 3D model of the solution
   at work, which turns and explains itself as you scroll (labels flip to a
   new price, goods move to the scanner, an order lands on the kitchen
   screen). Benefits, the hardware, and a service sequence whose line fills
   as you read it.

   Motion rules: transform and opacity only; everything off screen is
   paused; nothing moves under prefers-reduced-motion and the scenes then
   hold their finished pose; without JavaScript every piece of content is
   visible and every scene shows its finished pose.
   ========================================================================= */
.rs-hero,.rs-sol,.rs-svc,.rs-dock{
  --rs-accent:var(--accent,#0B4FE0);--rs-soft:#EEF3FC;--rs-ink:#0E1116;--rs-text:#5A6475;
  --rs-card:#fff;--rs-line:#E3E9F3;
  --rs-radius:clamp(16px,1.8vw,22px);
  --rs-ease:cubic-bezier(.2,.7,.2,1);
  --rs-shadow:0 0 0 1px var(--rs-line),0 22px 48px -30px rgba(24,44,96,.4);
}
.rs-hero li,.rs-sol li,.rs-svc li,.rs-dock li{margin:0}
.rs-hero a,.rs-sol a,.rs-svc a,.rs-dock a{text-decoration:none}
.rs-hero svg,.rs-sol svg,.rs-svc svg,.rs-dock svg{display:block;flex:none}

/* shared ------------------------------------------------------------------ */
.rs-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#5E656D);
}
.rs-eyebrow::before{content:"";width:22px;height:1px;background:var(--rs-accent)}
.rs-eyebrow--ic::before{display:none}
.rs-eyebrow-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--rs-soft);color:var(--rs-accent)}
.rs-eyebrow-ic svg{width:24px;height:24px}
.rs-hero .rs-title,.rs-sol .rs-title,.rs-svc .rs-title{
  font-family:var(--f-display);font-weight:600;color:var(--rs-ink);margin:0;padding:0;text-wrap:balance;
}
.rs-hero .rs-lead,.rs-sol .rs-lead,.rs-svc .rs-lead{
  margin:22px 0 0;color:var(--rs-text);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.65;max-width:62ch;
}
/* words of a title, each in its own mask for the reveal */
.rs-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.rs-w>span{display:inline-block}

.rs-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.rs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;
  border-radius:999px;border:1px solid transparent;font-family:var(--f-body);font-size:15px;font-weight:500;line-height:1.2;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .3s var(--rs-ease);
}
.rs-btn svg{width:18px;height:18px;stroke-width:1.8;transition:transform .25s var(--ease)}
.rs-btn:hover svg{transform:translateX(3px)}
.rs-btn:active{transform:scale(.98)}
:is(.rs-hero,.rs-sol,.rs-svc) .rs-btn--dark{background:#0E1116;border-color:#0E1116;color:#fff}
:is(.rs-hero,.rs-sol,.rs-svc) .rs-btn--dark:hover{background:#262B33;border-color:#262B33;color:#fff}
:is(.rs-hero,.rs-sol,.rs-svc) .rs-btn--ghost{background:rgba(255,255,255,.6);border-color:#C5CFDF;color:#0E1116}
:is(.rs-hero,.rs-sol,.rs-svc) .rs-btn--ghost:hover{background:#fff;border-color:#0E1116;color:#0E1116}
.rs-btn:focus-visible,.rs-hcard-in:focus-visible,.rs-dock-a:focus-visible{outline:2px solid var(--rs-accent);outline-offset:3px}

/* =========================================================================
   3D stages (assets/js/solutions-3d.js)
   A fixed-ratio box, so nothing moves when the scene arrives. The poster
   shows first (and stays, without JS / WebGL / motion); the live canvas
   fades in over it once its first frame is drawn.
   ========================================================================= */
.rs-gl{position:relative;width:100%;aspect-ratio:var(--rs-gl-ar,1.15);isolation:isolate}
/* open scenes (gondola, lane, hero) melt into the page at their edges; the
   restaurant is a room, so it is framed like a photograph instead */
.rs-gl--esl,.rs-gl--retail,.rs-gl--hero{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 82%,transparent);
          mask-composite:intersect;
}
.rs-gl--resto{border-radius:calc(var(--rs-radius) + 6px);overflow:hidden;box-shadow:0 0 0 1px rgba(205,217,238,.8),0 30px 64px -40px rgba(24,44,96,.5)}
.rs-gl--resto::before{display:none}
.rs-gl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .8s var(--ease)}
.rs-gl-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .9s var(--ease)}
.rs-gl.is-gl .rs-gl-canvas{opacity:1}
.rs-gl.is-reset .rs-gl-poster,.rs-gl.is-reset .rs-gl-canvas{transition:none}
.rs-gl.is-gl .rs-gl-poster{opacity:0}
/* a soft floor light under the scene, so it sits on the page rather than on a card */
.rs-gl::before{
  content:"";position:absolute;z-index:-1;left:6%;right:6%;top:18%;bottom:4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,.35) 60%,rgba(255,255,255,0));
}
.rs-stage{position:relative;min-width:0}
.rs-hero-stage{margin-right:calc(var(--gut,24px) * -.5)}

/* tags pinned to a device: pin on the device, a hairline up, the pill above.
   The live scene moves them with the camera (inline transform); on the
   poster they sit at the anchor's measured position. */
.rs-tag{position:absolute;z-index:2;left:0;top:0;pointer-events:none}
.rs-tag.has-anchor{left:var(--fx,50%);top:var(--fy,50%)}
.rs-gl.is-gl ~ .rs-tag.has-anchor{left:0;top:0}
.rs-gl:not(.is-gl) ~ .rs-tag.has-anchor{transform:none!important}
.rs-tag-pin{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--rs-accent),0 2px 6px rgba(24,44,96,.35)}
.rs-tag-line{position:absolute;left:-.5px;bottom:5px;width:1px;height:34px;background:linear-gradient(to top,var(--rs-accent),rgba(11,79,224,.15))}
.rs-tag-pill{
  position:absolute;left:0;bottom:39px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.94);
  font-size:13px;font-weight:500;line-height:1.2;color:var(--rs-ink);
  box-shadow:0 0 0 1px var(--rs-line),0 12px 26px -14px rgba(24,44,96,.45);
}
.rs-tag.is-below .rs-tag-line{bottom:auto;top:5px;background:linear-gradient(to bottom,var(--rs-accent),rgba(11,79,224,.15))}
.rs-tag.is-below .rs-tag-pill{bottom:auto;top:39px}
.rs-tag-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--rs-soft);color:var(--rs-accent)}
.rs-tag-ic svg{width:15px;height:15px;stroke-width:1.9}
/* tags without a device sit in the corners */
.rs-tag--1{left:2%;top:4%}
.rs-tag--2{right:2%;left:auto;bottom:6%;top:auto}
.rs-tag--3{right:2%;left:auto;top:4%}
.rs-tag:not(.has-anchor) .rs-tag-pill{position:static;transform:none}
@media (prefers-reduced-motion:no-preference){
  .rs-tag.has-anchor .rs-tag-pill{animation:rs-tag-in .7s var(--rs-ease) both;animation-play-state:paused}
  .is-in .rs-tag.has-anchor .rs-tag-pill,.rs-stage:not([data-reveal]) .rs-tag.has-anchor .rs-tag-pill{animation-play-state:running}
  .rs-tag.has-anchor:nth-of-type(2) .rs-tag-pill{animation-delay:.15s}
}
@keyframes rs-tag-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* =========================================================================
   Hero
   ========================================================================= */
.rs-hero{position:relative;padding:0 0 clamp(24px,3vw,40px);overflow-x:clip}
.rs-hero-top{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px)}
.rs-hero.has-deck .rs-hero-top{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
/* the stage sets the row height, so the web font arriving (and re-wrapping
   the title) never pushes the cards below: no layout shift */
.rs-hero.has-deck .rs-hero-top{align-items:start}
.rs-hero.has-deck .rs-hero-head{padding-top:clamp(0px,3vw,48px)}
.rs-gl--hero{--rs-gl-ar:1}
@media (min-width:901px){.rs-hero.has-deck .rs-title{min-height:4.1em}}
.rs-hero-head{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.rs-hero .rs-title{font-size:clamp(2.4rem,4.7vw,4.5rem);line-height:1.02;letter-spacing:-.045em;max-width:15ch}
.rs-hero .rs-lead{font-size:clamp(1.02rem,1.2vw,1.14rem);max-width:56ch}

.rs-hcards{
  list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
}
.rs-hcard{display:flex}
.rs-hcard-in{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;
  padding:clamp(22px,2.2vw,30px);border-radius:var(--rs-radius);background:var(--rs-card);color:inherit;
  box-shadow:var(--rs-shadow);transition:transform .45s var(--rs-ease),box-shadow .45s var(--ease);
}
a.rs-hcard-in:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #C9D6EE,0 30px 60px -30px rgba(24,44,96,.5)}
.rs-hcard-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:22px;background:var(--rs-soft);color:var(--rs-accent);transition:transform .45s var(--rs-ease)}
.rs-hcard-ic svg{width:32px;height:32px}
a.rs-hcard-in:hover .rs-hcard-ic{transform:translateY(-2px) rotate(-4deg)}
.rs-hcard-title{font-family:var(--f-display);font-size:clamp(1.15rem,1.45vw,1.35rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--rs-ink)}
.rs-hcard-text{margin-top:10px;color:var(--rs-text);font-size:15px;line-height:1.6;flex:1}
.rs-hcard-go{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--rs-accent)}
.rs-hcard-go svg{width:16px;height:16px;stroke-width:2;transition:transform .3s var(--ease)}
a.rs-hcard-in:hover .rs-hcard-go svg{transform:translateY(3px)}

/* floating summary ---------------------------------------------------------- */
.rs-dock{
  position:fixed;left:50%;bottom:clamp(14px,2vw,26px);z-index:850;
  transform:translate(-50%,18px);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .4s var(--rs-ease),visibility 0s linear .4s;
}
.rs-dock.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
/* out of the way while reading down; back as soon as the reader scrolls up */
.rs-dock.is-on.is-tucked{opacity:0;visibility:hidden;transform:translate(-50%,18px);transition:opacity .3s var(--ease),transform .4s var(--rs-ease),visibility 0s linear .4s}
.rs-dock ul{
  display:flex;gap:4px;list-style:none;margin:0;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.97); /* near-opaque instead of a live blur: no backdrop layer to re-composite while scrolling */
  box-shadow:0 0 0 1px rgba(205,217,238,.9),0 18px 40px -18px rgba(24,44,96,.45);
}
.rs-dock-a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;
  font-size:14px;font-weight:500;color:#3D444C;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease);
}
.rs-dock-a svg{width:22px;height:22px}
.rs-dock-a:hover{background:#EEF2F9;color:#0E1116}
.rs-dock-a.is-current{background:#0E1116;color:#fff}

/* =========================================================================
   One solution
   ========================================================================= */
.rs-sol{
  position:relative;padding:clamp(64px,8vw,120px) 0 clamp(8px,1vw,12px);overflow-x:clip;
  /* html carries scroll-padding for the fixed header (nav.css); this pulls the
     section's own top padding back so the eyebrow lands just under the bar */
  scroll-margin-top:calc(4px - clamp(20px,3vw,44px));
}
.rs-rule{
  position:absolute;top:clamp(20px,3vw,44px);left:0;right:0;height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,#C9D5EA,#D8E1F0 60%,transparent);
}
.rs-sol--flip .rs-rule{transform-origin:100% 50%;background:linear-gradient(270deg,#C9D5EA,#D8E1F0 60%,transparent)}
.rs-sol-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.4vw,80px);align-items:center}
.rs-sol--flip .rs-copy{order:2}
.rs-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.rs-sol .rs-title{font-size:clamp(2rem,3.5vw,3.15rem);line-height:1.04;letter-spacing:-.04em;max-width:19ch}

.rs-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.rs-sol .rs-points li{display:flex;align-items:flex-start;gap:12px;color:var(--rs-ink);font-size:15.5px;line-height:1.5}
.rs-points-ic{flex:none;width:24px;height:24px;margin-top:-1px;border-radius:50%;display:grid;place-items:center;background:var(--rs-soft);color:var(--rs-accent)}
.rs-points-ic svg{width:14px;height:14px;stroke-width:2.6}

/* the stage: the live model, or a flat image when one is chosen */
.rs-sol-top{grid-template-columns:minmax(0,.9fr) minmax(0,var(--rs-stage-fr,1.1fr))}
.rs-stage.is-flat .rs-stage-in{border-radius:calc(var(--rs-radius) + 6px);overflow:hidden;box-shadow:var(--rs-shadow);aspect-ratio:1.15}
.rs-stage.is-flat .rs-stage-in img{display:block;width:100%;height:100%;object-fit:cover}
.rs-stage.is-flat .rs-tag{position:absolute}

/* the beats of the scene: what each moment of the animation gives you.
   Default (no JS, reduced motion, phones): a compact list. While the live
   scene plays: numbered steps in sync with it, one caption at a time. */
.rs-visual{min-width:0;display:flex;flex-direction:column}
.rs-story{margin-top:clamp(10px,1.4vw,18px);padding:0 2px}
.rs-story-label{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#5E656D)}
.rs-story-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px}
.rs-beat{display:flex;align-items:flex-start;gap:12px;min-width:0}
.rs-beat-n{
  position:relative;flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid #C9D5EA;background:rgba(255,255,255,.7);color:var(--rs-accent);
  font:600 12px/1 var(--f-body);letter-spacing:.04em;cursor:default;
}
.rs-beat-n i{display:none}
.rs-beat-txt{margin:0;font-size:14px;line-height:1.5;color:var(--rs-text)}
.rs-beat-t{display:block;font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--rs-ink)}
@media (min-width:641px){
  .rs-story.is-playing .rs-story-list{display:flex;gap:8px;min-height:104px;position:relative;align-items:flex-start}
  .rs-story.is-playing .rs-beat{display:block;flex:none}
  .rs-story.is-playing .rs-beat-n{width:auto;height:30px;padding:0 14px;border-radius:999px;cursor:pointer;overflow:hidden}
  .rs-story.is-playing .rs-beat-n:hover{border-color:var(--rs-accent)}
  .rs-story.is-playing .rs-beat.is-active .rs-beat-n{background:#0E1116;border-color:#0E1116;color:#fff}
  .rs-story.is-playing .rs-beat-n i{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rs-accent);transform-origin:0 50%;transform:scaleX(0)}
  .rs-story.is-playing .rs-beat.is-active .rs-beat-n i{animation:rs-beat var(--dur,2s) linear both}
  .rs-story.is-playing .rs-beat-txt{position:absolute;left:0;right:0;top:44px;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .16s linear,transform .2s linear}
  .rs-story.is-playing .rs-beat.is-active .rs-beat-txt{opacity:1;transform:none;transition:opacity .45s var(--ease) .16s,transform .55s var(--rs-ease) .16s}
  .rs-story.is-playing .rs-beat-t{display:inline;margin-right:6px}
}
@keyframes rs-beat{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rs-beat-n:focus-visible{outline:2px solid var(--rs-accent);outline-offset:2px}

/* "In this scene": the hardware, as a slim rail under the composition */
.rs-rail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:clamp(26px,3vw,40px);padding-top:18px;border-top:1px solid rgba(201,213,234,.75);min-width:0}
.rs-rail-label{margin:0;flex:none;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#5E656D)}
.rs-rail-list{list-style:none;margin:0;padding:2px;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.rs-rail-list li{display:flex}
.rs-rail-item{
  display:inline-flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:999px;color:var(--rs-ink);
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(201,213,234,.8);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .35s var(--rs-ease);
}
.rs-rail-img{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(201,213,234,.8);transition:box-shadow .25s var(--ease)}
.rs-rail-img img{width:100%;height:100%;object-fit:contain;padding:3px}
.rs-rail-txt{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.rs-rail-txt strong{font-size:13.5px;font-weight:600}
.rs-rail-txt span{font-size:12px;color:var(--rs-text)}
a.rs-rail-item:hover,a.rs-rail-item:focus-visible,.rs-rail-item.is-hot{background:#fff;box-shadow:inset 0 0 0 1px #BFD0F2,0 10px 24px -16px rgba(24,44,96,.5);transform:translateY(-1px)}
a.rs-rail-item:hover .rs-rail-img,a.rs-rail-item:focus-visible .rs-rail-img{box-shadow:0 0 0 2px var(--rs-accent)}
a.rs-rail-item:focus-visible{outline:2px solid var(--rs-accent);outline-offset:2px}
.rs-rail-fams{margin:0 0 0 auto;font-size:13px;color:var(--rs-text)}
.rs-rail-fams span{margin-right:6px}
.rs-rail-fams i{font-style:normal;margin:0 6px;color:#A9B4C6}
.rs-rail-fams a{color:var(--rs-accent);font-weight:500}
.rs-rail-fams a:hover{text-decoration:underline;text-underline-offset:3px}
.rs-tag.is-hot .rs-tag-pill{box-shadow:0 0 0 2px var(--rs-accent),0 12px 26px -14px rgba(24,44,96,.45)}
.rs-tag.is-hot .rs-tag-pin{transform:scale(1.3)}
/* touch and narrow screens: the rail scrolls sideways */
@media (max-width:900px),(pointer:coarse){
  .rs-rail{flex-direction:column;align-items:stretch}
  .rs-rail-list{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -2px}
  .rs-rail-list::-webkit-scrollbar{display:none}
  .rs-rail-list li{flex:none;scroll-snap-align:start}
  .rs-rail-fams{margin:0}
}

/* =========================================================================
   Services: one band, the copy beside a service ring. The cycle has no end:
   the last stage arrows back to the first, a dot travels it, the centre
   tells the stage it is passing. Static (no JS / reduced motion): the ring
   with its labels, and every stage written out beside it.
   ========================================================================= */
.rs-svc{position:relative;padding:clamp(56px,6.5vw,96px) 0 clamp(8px,1vw,16px);overflow-x:clip}
.rs-svc .rs-rule{top:clamp(20px,3vw,44px)}
.rs-svc-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,88px);align-items:center}
.rs-svc-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.rs-svc .rs-title{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.08;letter-spacing:-.035em;max-width:22ch}
.rs-svc .rs-lead{margin-top:16px;max-width:52ch}
.rs-svc .rs-actions{margin-top:26px}

.rs-ring-wrap{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);min-width:0}
.rs-ring{
  --rs-ring:clamp(260px,26vw,340px);
  position:relative;flex:none;width:var(--rs-ring);aspect-ratio:1;color:var(--rs-accent);
}
.rs-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rs-ring-track{fill:none;stroke:#D5DEEE;stroke-width:1;stroke-dasharray:2 5}
.rs-ring-arc{fill:none;stroke:#BFCDE6;stroke-width:2;stroke-linecap:round;transition:stroke .5s var(--ease)}
.rs-ring-arc.is-loop{color:#BFCDE6}
.rs-ring-arc.is-on{stroke:var(--rs-accent)}
.rs-ring-arc.is-loop.is-on{color:var(--rs-accent)}
.rs-ring-runner{transform-origin:160px 160px;transform-box:view-box;opacity:0}
.rs-ring-dot{fill:var(--rs-accent)}
.rs-ring-halo{fill:rgba(11,79,224,.14)}
.rs-ring.is-live .rs-ring-runner{opacity:1}

/* the stages, on the ring */
.rs-ring-node{
  position:absolute;z-index:2;left:calc(50% + 37.5% * var(--x));top:calc(50% + 37.5% * var(--y));
  width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;border:0;border-radius:50%;cursor:default;
  display:grid;place-items:center;background:#fff;color:var(--rs-accent);
  box-shadow:0 0 0 1px #D5DEEE,0 8px 18px -10px rgba(24,44,96,.45);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),transform .45s var(--rs-ease);
}
.rs-ring-ic svg{width:22px;height:22px}
.rs-ring-lbl{
  position:absolute;white-space:nowrap;font-family:var(--f-display);font-size:13.5px;font-weight:600;letter-spacing:-.005em;color:var(--rs-ink);
}
.rs-ring-node.is-top .rs-ring-lbl{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.rs-ring-node.is-bottom .rs-ring-lbl{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.rs-ring-node.is-right .rs-ring-lbl{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}
.rs-ring-node.is-left .rs-ring-lbl{right:calc(100% + 10px);top:50%;transform:translateY(-50%)}
.rs-ring.is-live .rs-ring-node{cursor:pointer}
.rs-ring-node.is-active{background:var(--rs-accent);color:#fff;box-shadow:0 0 0 4px rgba(11,79,224,.14),0 10px 22px -10px rgba(11,79,224,.6);transform:scale(1.06)}
.rs-ring-node:focus-visible{outline:2px solid var(--rs-accent);outline-offset:4px}
/* the "always on" stage wears a thin dial */
.rs-ring-node.has-clock::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dotted rgba(11,79,224,.45);pointer-events:none}

/* the centre: the stage being passed */
.rs-ring-core{position:absolute;inset:22%;display:grid;place-items:center;text-align:center;border-radius:50%}
.rs-ring-stage{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(6px);transition:opacity .18s linear,transform .2s linear}
.rs-ring-stage.is-active{opacity:1;transform:none;transition:opacity .5s var(--ease) .15s,transform .6s var(--rs-ease) .15s}
.rs-ring-big{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--rs-soft);color:var(--rs-accent);margin-bottom:2px}
.rs-ring-big svg{width:24px;height:24px}
.rs-svc .rs-ring-name{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--rs-ink)}
.rs-ring-text{font-size:13px;line-height:1.45;color:var(--rs-text);max-width:17ch}

/* every stage written out: the static reading, and screen readers */
.rs-ring-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:250px}
.rs-svc .rs-ring-list li{font-size:13.5px;line-height:1.45;color:var(--rs-text)}
.rs-ring-list strong{display:block;font-family:var(--f-display);font-size:14.5px;font-weight:600;color:var(--rs-ink)}
.rs-ring-core{display:none}
/* live: the centre tells the story, the list stays for assistive tech */
.rs-ring-wrap.is-live .rs-ring-core{display:grid}
.rs-ring-wrap.is-live .rs-ring-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .rs-ring.is-live .rs-ring-node.has-clock::after{animation:rs-tick 12s steps(12) infinite}
}
@keyframes rs-tick{to{transform:rotate(360deg)}}

/* =========================================================================
   Reveals (reveal.js adds .reveal-ready only when motion is allowed)
   ========================================================================= */
.reveal-ready :is(.rs-hero,.rs-sol,.rs-svc) [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--rs-ease)}
.reveal-ready :is(.rs-hero,.rs-sol,.rs-svc) [data-reveal].is-in{opacity:1;transform:none}
.reveal-ready :is(.rs-hero,.rs-sol,.rs-svc) [data-reveal].is-instant{transition:none}
/* titles rise word by word from behind their own baseline */
.reveal-ready :is(.rs-hero,.rs-sol) .rs-split[data-reveal]{opacity:1;transform:none}
.reveal-ready :is(.rs-hero,.rs-sol) .rs-split[data-reveal] .rs-w>span{transform:translateY(108%);transition:transform 1s var(--rs-ease);transition-delay:calc(var(--i) * 55ms)}
.reveal-ready :is(.rs-hero,.rs-sol) .rs-split[data-reveal].is-in .rs-w>span{transform:none}
.reveal-ready :is(.rs-hero,.rs-sol) .rs-split[data-reveal].is-instant .rs-w>span{transition:none}
/* the chapter rule draws across, the model rises onto its floor */
.reveal-ready :is(.rs-sol,.rs-svc) .rs-rule[data-reveal]{opacity:1;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
.reveal-ready :is(.rs-sol,.rs-svc) .rs-rule[data-reveal].is-in{transform:none}
.reveal-ready :is(.rs-sol,.rs-hero) .rs-stage[data-reveal]{transform:translateY(48px);transition:opacity 1.1s var(--ease),transform 1.3s var(--rs-ease)}
.reveal-ready :is(.rs-sol,.rs-hero) .rs-stage[data-reveal].is-in{transform:none}

/* page column: these sections use the full grid ------------------------------- */
.has-rits-solutions .page-content .container{max-width:var(--maxw)}
.has-rits-solutions .page-content .elementor-section .elementor-container{max-width:none}
.has-rits-solutions .page-content .elementor-widget-wrap{padding:0!important}
.has-rits-solutions .page-content .elementor-widget:not(:last-child){margin-bottom:0}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1100px){
}
@media (max-width:980px){
  .rs-sol-top{grid-template-columns:1fr}
  .rs-sol--flip .rs-copy{order:0}
  .rs-stage{max-width:640px;width:100%;justify-self:center}
}
@media (max-width:1100px){
  .rs-ring-wrap{flex-direction:column;align-items:center}
  .rs-ring-list{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .rs-svc-band{grid-template-columns:1fr}
  .rs-ring-wrap{width:100%}

  .rs-hero.has-deck .rs-hero-top{grid-template-columns:1fr}
  .rs-hero-stage{max-width:560px;width:100%;justify-self:center;margin-right:0}
  .rs-hcards{grid-template-columns:1fr}
  .rs-hcard-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
  .rs-hcard-ic{grid-row:span 3;width:52px;height:52px;border-radius:15px;margin:0}
  .rs-hcard-ic svg{width:30px;height:30px}
  .rs-hcard-text{margin-top:6px}
  .rs-hcard-go{margin-top:14px}
}
@media (max-width:1024px){
  .rs-dock-a{padding:0 12px}
  .rs-dock-a:not(.is-current) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:720px){
  .rs-dock{left:12px;right:84px;transform:translateY(18px)}
  .rs-dock.is-on{transform:none}
  .rs-dock.is-on.is-tucked{transform:translateY(18px)}
  .rs-dock ul{justify-content:space-between}
  .rs-dock li{flex:1 1 auto;display:flex}
  .rs-dock-a{flex:1;padding:0 12px}
  .rs-dock-a:not(.is-current) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:640px){
  .rs-ring{--rs-ring:min(260px,70vw)}
  .rs-ring-lbl{display:none}
  .rs-ring-wrap.is-live .rs-ring-list{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .rs-ring-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;width:100%}
  .rs-ring-list li{padding-left:10px;border-left:2px solid transparent;transition:border-color .3s var(--ease)}
  .rs-ring-list li.is-active{border-left-color:var(--rs-accent)}
  .rs-ring-text{display:none}

  .rs-actions{flex-direction:column;align-items:stretch;width:100%}
  .rs-btn{justify-content:space-between}
  .rs-tag-pill{font-size:12px;padding:4px 11px 4px 4px;gap:6px}
  .rs-tag-ic{width:22px;height:22px}
  .rs-tag-line{height:22px}
  .rs-tag-pill{bottom:27px}
  .rs-tag--3{display:none}
  /* phones: the tags become a small legend under the scene */
  .rs-stage .rs-tag,.rs-stage .rs-tag.has-anchor{position:static;display:inline-flex;margin:10px 8px 0 0;transform:none!important;vertical-align:top}
  .rs-stage .rs-tag-pin,.rs-stage .rs-tag-line{display:none}
  .rs-stage .rs-tag .rs-tag-pill{position:static;transform:none;animation:none}
  .rs-story-list{grid-template-columns:1fr;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .rs-hero *,.rs-sol *,.rs-svc *{transition:none!important;animation:none!important}
}

/* Keep curated product selections in complete desktop rows. */
@media (min-width:901px) and (pointer:fine){
 .rs-rail-list{display:grid;grid-template-columns:repeat(var(--rs-product-columns,3),minmax(0,1fr));width:100%;gap:10px}
 .rs-rail-list li,.rs-rail-item{min-width:0}
 .rs-rail-item{width:100%;min-height:48px}
 .rs-rail-txt{white-space:normal;overflow-wrap:anywhere}
}