/* Component rules carried over from the capture's document head:
   Swiper navigation/pagination sizing and the marquee rail keyframes.
   Colours remapped to Werkborg tokens; nothing else changed. */

.swiper {
  width: 100%;
  max-width: 100%;
}  
  
.swiper-wrapper {
 align-items: stretch !important;  
}

.swiper-slide {
  display: flex !important;
  flex-direction: column;
  height: unset ! important;
  padding-right: clamp(8px, 8/1920*100vw, 8/1920*100vw);
}  

.swiper-button-prev,
.swiper-button-next {
  position: relative !important;
  inset: 0!important;
  z-index: unset !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 32/1920*100vw, 32/1920*100vw);
  height: clamp(32px, 32/1920*100vw, 32/1920*100vw);
  margin: 0 !important;
  background-color: #0a2040;
  border-radius: clamp(6px, 6/1920*100vw, 6/1920*100vw);
  color: white;
  cursor: pointer;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  max-width: clamp(6px, 6/1920*100vw, 6/1920*100vw); 
  height: auto !important ;
  object-fit: contain;
  transform-origin: center;
  fill: currentColor;
  pointer-events: none;
}  
  
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  position: absolute;
  z-index: -1;
  opacity:0;
  visibility:0;
  font-size: clamp(12px, 12/1920*100vw, 12/1920*100vw);
}

.swiper-pagination {
  position: static !important;
  text-align: left;
  transition: none;
  transform: none;
  z-index: unset;
}

.swiper-pagination-lock {
  display: inline-flex !important;
  opacity: 0.6;
}
  
.swiper-pagination-fraction {
  width: auto !important;
} 




body{
overflow-x: hidden;
overflow-y: visible;
}

/* ==========================================================================
   MARQUEE RAILS
   ========================================================================== */
:root {
	 --rail-gap: clamp(50px, 100/1440*100vw, 100/1440*1600px)
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--rail-gap))); }
}

@keyframes marquee-right {
  from { transform: translateX(-25%); }
  to { transform: translateX(calc(-125% - var(--rail-gap))); }
}

.c-rail.image-text .c-rail-content {
  --rail-gap: clamp(28px, 46/1440*100vw, 46/1440*1600px); /* or any clamp value */
}

.c-rail.logo .c-rail-content[data-rail] .c-rail-list {
	animation: marquee-left 100s linear infinite; /* adjust speed value here */
}

.c-rail.image-text .c-rail-content[data-rail] .c-rail-list {
	animation: marquee-left 50s linear infinite; /* adjust speed value here */
}

.c-rail-content[data-rail="right"] .c-rail-list > *:nth-child(1) { order: 3 !important; }
.c-rail-content[data-rail="right"] .c-rail-list > *:nth-child(2) { order: 1; !important}
.c-rail-content[data-rail="right"] .c-rail-list > *:nth-child(3) { order: 2; !important}

.c-rail-content[data-rail="right"] .c-rail-list {
	animation-direction: reverse !important;
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion) {
  .c-rail-content[data-logo-rail] {
    animation-play-state: paused !important;
  }
}