/* Homepage "Trusted across industries nationwide" logo marquee.
   Sits between the badge strip (Trusted since 2012 / 1-year warranty / all
   50 states) and the "Four Solutions" lineup. A row of customer logos, shown
   in grey (Andre, 2026-09-29: not coloured), scrolls continuously
   right-to-left and fades out at both edges; with prefers-reduced-motion it
   becomes a static, wrapping row. It never pauses: the old pause-on-hover
   stuck the row whenever the pointer rested on it (and after any tap on a
   touch screen), which read as "the marquee stopped". The list of logos lives in deploy/home-trust/bake.py, which bakes the
   markup into index.html (first paint) and writes the same list to an inline
   <script> that assets/vorp-configure-cta.js reads to rebuild the section
   whenever React re-renders the page. Logos: /images/home/logos/. */

.vorp-trust{
  --ink:#0A0E14; --primary:#0089E0; --border:#E5E5E5;
  --gap:clamp(3rem,6vw,5.5rem);            /* space between logos */
  --dur:36s;                               /* set per logo count by bake.py */
  background:#fff; border-top:1px solid var(--border);
  padding:2.75rem 0 3rem; overflow:hidden;
  font-family:Inter,system-ui,sans-serif;
}
.vorp-trust-title{
  margin:0 0 2rem; padding:0 1.5rem; text-align:center;
  font-family:"Barlow Condensed",system-ui,sans-serif; font-weight:600;
  font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--primary);
}
.vorp-trust-mask{
  position:relative; width:100%; overflow:hidden;
}
/* edge fades as white gradient overlays (not mask-image: a mask over an
   animated, composited child does not repaint reliably in Safari) */
.vorp-trust-mask::before,.vorp-trust-mask::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(48px,7vw,120px);
  z-index:1; pointer-events:none;
}
.vorp-trust-mask::before{left:0;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.vorp-trust-mask::after {right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.vorp-trust-track{
  display:flex; width:max-content; align-items:center;
  animation:vorp-trust-scroll var(--dur) linear infinite;
}
.vorp-trust-set{
  display:flex; align-items:center; flex-shrink:0;
  gap:var(--gap); padding:0 0 0 var(--gap); margin:0; list-style:none;
}
.vorp-trust-set li{
  display:flex; align-items:center; gap:.85rem; flex-shrink:0;
  height:64px;
}
.vorp-trust-set img{
  display:block; width:auto; max-width:none;
  height:var(--h,36px);                    /* per-logo optical size, set in bake.py */
  -webkit-user-drag:none; user-select:none;
  filter:grayscale(1); opacity:.55;        /* grey, not colour (Andre, 2026-09-29) */
}
.vorp-trust-label{
  font-family:"Barlow Condensed",system-ui,sans-serif; font-weight:600;
  font-size:1.35rem; line-height:1.05; letter-spacing:.02em; text-transform:uppercase;
  color:#8A8F98; white-space:nowrap;       /* grey to match the logos */
}
@keyframes vorp-trust-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (max-width:639px){
  .vorp-trust{padding:2.25rem 0 2.5rem}
  .vorp-trust-title{margin-bottom:1.5rem}
  .vorp-trust-set li{height:52px}
  .vorp-trust-set img{height:calc(var(--h,36px) * .82)}
  .vorp-trust-label{font-size:1.15rem}
}

@media (prefers-reduced-motion:reduce){
  .vorp-trust-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center}
  .vorp-trust-mask::before,.vorp-trust-mask::after{display:none}
  .vorp-trust-set[aria-hidden="true"]{display:none}
  .vorp-trust-set{flex-wrap:wrap; justify-content:center; padding:0 1.5rem; row-gap:1.5rem}
}

/* Badge strip above the marquee (Trusted since 2012 / 1-year warranty / all
   50 states). Andre, 2026-10-17: larger and spread out more. The markup is
   React's (Tailwind classes, baked into index.html and in the Home bundle),
   so it is restyled here instead of editing the minified bundle. Matched two
   ways: by position (the section right before .vorp-trust) and by the
   .vorp-badges class that vorp-configure-cta.js adds when it finds the strip. */
.vorp-badges > div,
section:has(+ .vorp-trust) > div{
  padding-top:1.75rem; padding-bottom:1.75rem;
}
.vorp-badges > div > div,
section:has(+ .vorp-trust) > div > div{
  font-size:.875rem; column-gap:1.25rem; row-gap:1.25rem;
}
.vorp-badges svg,
section:has(+ .vorp-trust) svg{
  width:26px; height:26px;
}
@media (min-width:768px){
  .vorp-badges > div,
  section:has(+ .vorp-trust) > div{
    padding-top:2rem; padding-bottom:2rem;
  }
  .vorp-badges > div > div,
  section:has(+ .vorp-trust) > div > div{
    display:flex; justify-content:space-evenly; align-items:center;
    column-gap:3rem; font-size:1.125rem; letter-spacing:.12em;
  }
  .vorp-badges > div > div > div,
  section:has(+ .vorp-trust) > div > div > div{
    gap:.9rem;
  }
  .vorp-badges svg,
  section:has(+ .vorp-trust) svg{
    width:32px; height:32px;
  }
}