@charset "UTF-8";
/*!
 * Client logo marquee.
 *
 * The default state is the important bit: the logos are desaturated and at 40%
 * opacity, and come up to full colour on hover.
 *
 * The hover state used to also paint a white plate behind the logo, because the
 * original WebPs had opaque white baked in and needed it. They were replaced
 * with transparent ones, so the plate became a white box on whatever band the
 * strip is sitting on (Oskar, 2026-08-14). Hover is opacity + saturation only
 * now; the strip takes the colour of whatever is behind it.
 */
/*
 * THE FRAME (Raman's ruling, 2026-08-19). His Figma running-line frame is
 * 1440×278 Hug, vertical auto-layout, padding 40 top / 60 bottom, item spacing
 * 40 — and it contains the per-page TITLE as well as the logo row. "The gaps,
 * margins, spacings in the figma design are the same across all pages. The only
 * thing that could be different is a title."
 *
 * So the 40/40/60 lives on a wrapper class, not on .logos_slider: the title is
 * page markup (its copy, heading level and inline spans differ per template —
 * Home's is deliberately an h4 for the heading outline) but its spacing is not.
 * Every consumer puts this class on whatever div already wraps title + strip;
 * `gap` is what makes the same rule correct with a title and without one, since
 * a single flex child has no gap to apply.
 *
 * The space ABOVE the frame is the preceding section's own business, NOT the
 * strip's. That is the other half of Raman's arithmetic: his annotation on
 * /case-studies/ marks 60 (hero → frame) then 40 (frame's own padding → title),
 * which is where "total 100px hero to the visible line" comes from. Home reaches
 * the same 100 through `.rs-hero`'s existing 60px padding-bottom plus this 40.
 * Pages needing more air add it on their own container — his words: "we can use
 * additional container with extra paddings … but running line template should
 * stays the same by default."
 */
.rs-trusted-strip {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0 60px;
}

/* Inside the frame the frame owns the rhythm; the component must not add to it. */
.rs-trusted-strip > .logos_slider {
  padding: 0;
}

/*
 * Standalone default, for a template that includes the partial with no wrapper
 * and no title (template-quiz-thank-you.php). Same two numbers as the frame, so
 * a bare include is already correct and cannot drift — it was 30px 0 before,
 * which is where that page's 30/30 came from.
 */
.logos_slider {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 40px 0 60px;
}

/*
 * The frame's one width-dependent pair (Raman, 2026-08-19): "for 375px viewport
 * paddings should be not the same as for desktop … top=20px, bottom 40px". His
 * "no new values" ruling was about the DESKTOP frame being identical on all
 * pages, not about mobile inheriting it — Home used to carry 110px under the
 * logos and the flat 40/60 took that to 60px, which is the regression he is
 * answering here. Applied to the frame, so all nine consumers move together.
 *
 * The 40px item spacing is deliberately left alone: he re-specified padding
 * only, and the title→strip gap reads correctly at 375px as it is.
 *
 * 767.98px, not the 767px the img rule further down uses, because that is the
 * breakpoint every other section's padding switches on (home.scss,
 * cta-two-path.scss, case-studies.scss). A frame that changed one pixel earlier
 * than its neighbours would disagree with them at fractional widths.
 */
@media (max-width: 767.98px) {
  .rs-trusted-strip {
    padding: 20px 0 40px;
  }
  /* The bare-include default tracks the frame — same reason it matches on
     desktop: a template that drops the partial in without a wrapper must not
     render different spacing from one that wraps it. */
  .logos_slider {
    padding: 20px 0 40px;
  }
}
.logo-slider {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.logos-slide {
  display: inline-block;
  padding: 0 20px 0 0;
  animation: rs-logo-slide infinite linear;
}

.logos-slide img {
  display: inline-block;
  padding: 2px 20px;
  max-width: 190px;
  height: 60px;
  width: auto;
  margin: 0 40px;
  border-radius: var(--rs-radius-s, 4px);
  transition: all 0.3s ease-in-out;
  opacity: 0.4;
  filter: saturate(0);
}

.logos-slide img:hover {
  opacity: 1;
  filter: saturate(1);
}

/*
 * The reserved caption slot. 24, not the 33 this carried until 2026-08-27.
 *
 * 33 matched no number in the design and no number in this file: the frame
 * (`logo section v2 - big`, 42412:35742) reserves a 24px line box for the caption
 * — 16px at line-height 1.5 — with a 20px gap above it, and the caption below is
 * now set to exactly that. The old 33 was 9px of slack, which is the whole of the
 * "logo strip is 8.6px taller than the frame" delta Oskar measured (386.6 against
 * the frame's 378) and the reason nine pages each ran ~9px long.
 *
 * The component moved, not the frame: 24 is the frame's number on all nine
 * consumers, so this is one correction rather than nine exceptions.
 *
 * Fixed height on purpose, NOT min-height. A caption long enough to wrap would
 * otherwise grow the slot on hover and make the whole strip jump — the second
 * line spilling into the section's own bottom padding is the quieter failure.
 * At 24 + line-height 1.5 a single line fits the box exactly. (Known, and
 * pre-existing: the longest Polish caption needs 939px, so on a hover-capable
 * window narrower than that it wraps. It did at 33 too.)
 */
.logo-text {
  height: 24px;
  margin-top: 20px;
}

/*
 * The caption is a hover affordance, so it is dead weight on a device that
 * cannot hover — 44px (24 + 20) of reserved blank under every strip, on all nine
 * consumers. The 375 frame has no such slot at all.
 *
 * `(hover: none)` rather than a width breakpoint: the slot is useless exactly
 * when the primary input cannot hover, which is the real condition. A large
 * touchscreen has the same problem as a phone, and a touchscreen laptop — which
 * reports `hover: hover` for its primary input — correctly keeps the caption.
 */
@media (hover: none) {
  .logo-text {
    display: none;
  }
}
/* Weight and line-height are the frame's text style, `700 16px/1.5 Hind Madurai`
   (42412:35742 → `title`). They read 600 and 160% here until 2026-08-27, which is
   what made the rendered line 25.6px against the frame's 24 and left the slot
   above unable to state one honest number. */
.logo-marquee__caption {
  margin: 0;
  text-align: center;
  color: var(--rs-text-secondary, #5D636A);
  font-family: var(--rs-font-body, "Hind Madurai"), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

@keyframes rs-logo-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*
 * The mobile slot, from the 375 frame (logo section v2 - mobile - ENG,
 * 43109:11558). Its items are 133x48 with a 16px gap; desktop's are the 190x60
 * this file sizes by default. Oskar, 2026-08-27: apply the row height and the
 * item spacing to every instance, and leave the frame's other mobile numbers
 * (top padding, title gap) as they are.
 *
 * The side PADDING has to go with it. It is 20px either side, which on a 190px
 * cap leaves 150px for the logo — fine. Against a 133px cap it would leave 93px
 * and shrink every logo by a third, so at this width the box IS the slot and the
 * separation moves entirely into the margin: 8 + 8 = the frame's 16px gap,
 * replacing the 5 + 5 = 10 that was here.
 *
 * `height: 48; width: auto` is what actually sizes these — the cap only catches
 * the outliers. The logos are ~332x120 natural (2.77), and 48 x 2.77 = 132.8, so
 * the frame's 133 and its 48 are the same constraint expressed twice.
 *
 * 767.98, not the 767 this rule used to carry: the frame's own padding switches
 * at 767.98 above, and two halves of one component disagreeing across a
 * fractional pixel is a bug waiting for a 767.5px viewport.
 */
@media (max-width: 767.98px) {
  .logos-slide img {
    max-width: 133px;
    height: 48px;
    padding: 2px 0;
    margin: 0 8px;
  }
}
/* An infinite marquee is exactly what this setting exists to stop. The logos stay
   readable and the hover caption still works — only the motion goes. */
@media (prefers-reduced-motion: reduce) {
  .logos-slide {
    animation: none;
  }
  .logo-slider {
    overflow-x: auto;
  }
}