/* =========================================================================
   Home-page hero pieces -- standalone copy

   The "Trusted by 200+ businesses" marquee, the "Top AI Software
   Development Company Awards" strip, and the green gradient CTA, lifted out
   of home-redesign.css so a legacy page can show them without adopting the
   whole 2026 design system.

   Why a copy rather than just linking home-redesign.css: that file also
   restyles body, .btn, .main-header, .positions/.position-header and
   .position-content -- and faq.html is built out of exactly those. Loading
   it there would silently restyle 2,800 lines of accordion. Only the
   trust-band rules are wanted, so only they are here.

   Kept in sync by hand. If the band changes in home-redesign.css, change it
   here too; the markup is identical, so a rule that works there works here.

   The three custom properties below are the only ones these rules read.
   They are copies of the values in home-redesign.css's :root -- declared on
   .sc-trustband rather than :root so nothing else on the page can pick them
   up. --sc-trustband-duration is set at runtime by home-redesign.js, which
   measures the logo row and picks a duration for a constant ~50px/s.
   ========================================================================= */
.sc-trustband {
  --sc-band-1: #f9f9f9;
  --sc-dark: #1c252b;
  --sc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sc-section-gap: 40px;
}

@media (max-width: 991px) {
  .sc-trustband {
    --sc-section-gap: 32px;
  }
}

.sc-trustband {
  background: var(--sc-band-1);
  padding: 34px 0;
  /* Full-bleed: break out of the (narrower than viewport) page container
     so the band's background reaches both screen edges, while the
     nested .container inside keeps the text/logos aligned with the
     rest of the page content. */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sc-trustband-col {
  padding: 6px 24px;
}

.sc-trustband-divider {
  border-left: 1px solid rgba(28, 37, 43, 0.12);
}

.sc-trustband-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #70747a;
  margin-bottom: 16px;
}

.sc-trustband-label b {
  color: var(--sc-dark);
}

.sc-trustband-logos {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.sc-trustband-logos img {
  /* One shared height cap for every logo. The sources are a mix of 26px,
     36px and 40px tall art, which is what made the rows read as a jumble;
     capping the height and letting the width follow puts them all on one
     centre line at the same visual size without squashing anything. The
     inline width/height attributes stay as they are -- they still reserve
     the box before the image loads, which is what keeps CLS down. */
  max-height: 32px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
  filter: grayscale(0) opacity(1);
  transition: filter 0.3s ease, transform 0.3s var(--sc-ease);
}

.sc-trustband-logos img:hover {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .sc-trustband-divider {
    border-left: none;
    border-top: 1px solid rgba(28, 37, 43, 0.12);
    margin-top: 20px;
    padding-top: 20px;
  }
}

.sc-trustband-scroller {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.sc-trustband-track {
  display: flex;
  align-items: center;
  width: max-content;
}

.sc-trustband-track .sc-trustband-logos {
  flex-wrap: nowrap;
  flex-shrink: 0;
  /* Same as the row's gap, so the spacing across the loop seam matches the
     spacing between two logos inside a single copy. */
  padding-right: 48px;
}

.sc-trustband-track .sc-trustband-logos > * {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .sc-trustband-logos {
    gap: 32px;
  }

  .sc-trustband-track .sc-trustband-logos {
    padding-right: 32px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sc-trustband-track {
    animation: sc-trustband-marquee var(--sc-trustband-duration, 16s) linear infinite;
  }

  .sc-trustband-scroller:hover .sc-trustband-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-trustband-scroller {
    overflow-x: auto;
  }

  .sc-trustband-track .sc-trustband-logos-dup {
    display: none;
  }

  .sc-trustband-track .sc-trustband-logos {
    padding-right: 0;
  }
}

.sc-trustband-col.sc-trustband-static .sc-trustband-scroller {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.sc-trustband-col.sc-trustband-static .sc-trustband-track {
  width: auto;
  /* Beats the animation shorthand inside the prefers-reduced-motion block:
     three classes against one. */
  animation: none;
  flex-wrap: wrap;
}

.sc-trustband-col.sc-trustband-static .sc-trustband-logos {
  flex-wrap: wrap;
  /* The marquee rules pin this row at flex-shrink:0 so it can keep its
     max-content width and slide. Standing still it has to fit instead:
     without these two it stayed 502px wide inside a 342px phone column and
     pushed the badges off the screen. */
  flex-shrink: 1;
  min-width: 0;
  padding-right: 0;
}

@keyframes sc-trustband-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 450px) {
  .sc-trustband {
    margin-top: calc(var(--sc-section-gap) + 10px);
  }
}

/* -------------------------------------------------------------------------
   Companion to the full-bleed band above

   .sc-trustband is 100vw wide and pulled left to escape the page container.
   100vw counts the scrollbar, so on a page that scrolls the band ends up
   ~15px wider than the visible area and the whole document gains a
   horizontal scrollbar. home-redesign.css hides that overflow on body;
   this page needs the same thing, or the band drags the page sideways.

   Safe here: nothing on this page is position:sticky (that is the one thing
   an overflow-x on an ancestor would break).
   ------------------------------------------------------------------------- */
body {
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   Green gradient CTA -- the "Let's talk!" button

   Copied from home-redesign.css so the hero button matches the home page.
   Scoped under main, exactly as it is there, so the footer and nav keep
   their own buttons.
   ------------------------------------------------------------------------- */
main .btn.btn-warning {
  --sc-teal: #008066;
  --sc-btn-gradient: linear-gradient(
    90deg,
    #12b76a 0%,
    #008066 55%,
    #045c48 100%
  );
  background-color: var(--sc-teal);
  background-image: var(--sc-btn-gradient);
  /* .btn carries a transparent 1.5px border. That border area still gets
     painted (background-clip defaults to border-box) but a background is
     *sized* to the padding box, so the gradient fell 1.5px short on each side
     and background-repeat tiled it into the gap: the ramp's dark end
     (#045c48) landed against the left edge and its light end against the
     right, which read as a black hairline down the left of the button.
     Sizing to the border box makes one ramp cover the whole button. */
  background-origin: border-box;
  border-color: transparent;
  border-radius: 9px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: filter 0.2s ease, box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

main .btn.btn-warning:focus {
  /* Repeated from the base rule: app.min sets `background` (the shorthand) on
     these states, and any shorthand resets background-origin back to
     padding-box -- which would bring the tiled dark hairline back on hover. */
  background-color: var(--sc-teal);
  background-image: var(--sc-btn-gradient);
  background-origin: border-box;
  border-color: transparent;
}

main .btn.btn-warning:hover {
  filter: brightness(0.94);
}

main .btn.btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 128, 102, 0.35);
}