/* =====================================================================
   marquee.css — single source of truth for ALL marquees
   (logo strip, services-text strip, testimonials strip).

   Design notes
   ------------
   • Pure CSS animation (no JS): wall-clock timed, so it runs at the same
     speed on a 60Hz Mac and a 120/144/240Hz Windows/Android display, and
     it can never "fail to start".
   • Each track contains TWO identical halves in the HTML, so animating the
     track from translateX(0) → translateX(-50%) is a perfectly seamless,
     jump-free, infinite loop.
   • Spacing is baked into each item as horizontal margin (NOT flex `gap`),
     so the -50% wrap always lands exactly on an item boundary — using `gap`
     would offset the seam by half a gap and cause a visible jump each loop.
   • The track is `width:max-content` so it sizes to its content (essential —
     a block flex container would otherwise be 100% wide and the -50% math
     would be wrong).
   • GPU compositing (translateZ/backface/perspective) removes sub-pixel
     shimmer on Windows/Android GPUs and keeps it smooth on iOS Safari.
   • Hover-pause is applied ONLY for real mouse pointers, so a "sticky hover"
     on a touch device can never leave the marquee permanently stopped.
   ===================================================================== */

/* ---------- Container ---------- */
.marquee{
  --marquee-fade: 5%;                 /* edge fade width (set 0% to disable) */
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;                   /* clips the over-wide track */
  display: block;                     /* must NOT be flex */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
}

/* ---------- Track ---------- */
@keyframes pis-marquee-scroll{
  from{ transform: translate3d(0, 0, 0); }
  to{   transform: translate3d(-50%, 0, 0); }
}
.marquee__track{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;                 /* size to content, not to container */
  margin: 0;
  padding: 0;
  list-style: none;
  /* GPU layer + no sub-pixel shimmer */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  animation: pis-marquee-scroll var(--marquee-duration, 30s) linear infinite;
}
.marquee__track > *{
  flex: 0 0 auto;                     /* never shrink/wrap → no overlap, no clip */
}

/* Pause on hover for mouse users only (touch keeps running) */
@media (hover: hover) and (pointer: fine){
  .marquee:hover .marquee__track{ animation-play-state: paused; }
}

/* =====================================================================
   1) LOGO STRIP  (.marquee  >  .marque_part.marquee__track  >  .marque_items > img)
   ===================================================================== */
.marquee .marque_items{
  flex: 0 0 auto;
  width: clamp(120px, 13vw, 175px);   /* responsive, equal cell width */
  height: clamp(64px, 9vw, 96px);
  margin: 0 clamp(10px, 1.6vw, 26px); /* equal spacing baked into the box   */
  display: flex;
  align-items: center;                /* vertically centred                */
  justify-content: center;
}
.marquee .marque_items img{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(46px, 7vw, 80px); /* keeps logos crisp, never upscaled */
  margin: 0;
  object-fit: contain;
}

/* =====================================================================
   2) SERVICES TEXT STRIP  (.marquee.marquee--text > .brarrrper.marquee__track > h3)
   ===================================================================== */
.marquee--text{ --marquee-duration: 26s; }
.marquee--text .marquee__track{ align-items: center; }
.marquee .brarrrper h3{
  white-space: nowrap;                /* never wrap/clip the phrase        */
  font-size: clamp(20px, 3.4vw, 40px);/* fluid text size                   */
  margin: 0 clamp(14px, 2.2vw, 28px);
  padding-right: clamp(26px, 3vw, 44px);
  line-height: 1.15;
}
.marquee .brarrrper h3::after{        /* the little separator dash         */
  width: clamp(18px, 2.4vw, 30px);
}

/* =====================================================================
   3) TESTIMONIALS STRIP  (.marquee.testimonials-marquee > .marquee__track > .testimonial-card)
   ===================================================================== */
.testimonials-marquee{
  --marquee-duration: 60s;
  --marquee-fade: 3%;                 /* gentler fade so white cards aren't "metallic" */
  padding: 6px 0;
}
.testimonials-marquee .marquee__track{ align-items: stretch; padding: 8px 0; }
.testimonials-marquee .testimonial-card{
  flex: 0 0 clamp(260px, 82vw, 360px);
  width: clamp(260px, 82vw, 360px);
  margin: 0 22px 0 0;                 /* spacing between cards             */
}

/* =====================================================================
   Responsive speed tuning — keep the visual pace comfortable on phones
   (narrower tracks travel less distance, so durations are shortened).
   ===================================================================== */
@media (max-width: 1024px){
  .marquee{ --marquee-duration: 26s; }
  .marquee--text{ --marquee-duration: 22s; }
  .testimonials-marquee{ --marquee-duration: 48s; }
}
@media (max-width: 600px){
  .marquee{ --marquee-duration: 20s; }
  .marquee--text{ --marquee-duration: 16s; }
  .testimonials-marquee{ --marquee-duration: 36s; }
}

/* =====================================================================
   The marquee auto-slides on EVERY device, including when the OS has
   "reduce motion" / battery-saver enabled — this is decorative branding
   motion the site relies on, so it is intentionally not disabled there.
   ===================================================================== */