/* Logo carousel — the marquee rail in the hero.

   Recovered from the Framer code component (Carousel.ZGAcFgS2.mjs), which injected
   these rules at runtime rather than shipping them as a stylesheet. The markup
   (.bac-logo-rail / -run / -set) is already static in the page; only the rules were
   trapped in the bundle. Values are carried through unchanged.

   Timing and geometry come from custom properties set inline on .bac-logo-rail:
   --bac-dur, --bac-gap, --bac-cell-w, --bac-cell-h, --bac-fade. */

.bac-logo-rail{width:100%;overflow:hidden}
        .bac-logo-rail[data-fade="true"]{
            -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--bac-fade),#000 calc(100% - var(--bac-fade)),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--bac-fade),#000 calc(100% - var(--bac-fade)),transparent 100%);
        }
        .bac-logo-run{display:flex;justify-content:center}
        .bac-logo-rail[data-anim="true"] .bac-logo-run{
            justify-content:flex-start;width:max-content;
            animation:bacLogoRail var(--bac-dur,162s) linear infinite;
        }
        .bac-logo-rail[data-anim="true"][data-offscreen="true"] .bac-logo-run{animation-play-state:paused}
        .bac-logo-set{display:flex;align-items:center;margin:0;padding:0;list-style:none;
            gap:var(--bac-gap,12px);flex-wrap:wrap;justify-content:center}
        .bac-logo-rail[data-anim="true"] .bac-logo-set{flex-wrap:nowrap;flex:none}
        .bac-logo-set li{display:flex}
        .bac-logo-fit{display:flex;align-items:center;justify-content:center;
            width:var(--bac-cell-w,148px);height:var(--bac-cell-h,26px)}
        .bac-logo-img{display:block;width:auto;max-width:100%;
            /* height is a set value, not just a max — max-height:100% alone only
               caps growth if .bac-logo-fit's own height (--bac-cell-h) stays what
               it is; height:32px here means every logo is 32px tall regardless of
               that variable, so nothing here can scale up if it ever changes or
               fails to resolve. Matches --bac-cell-h, set inline on .bac-logo-rail
               on both pages — the two have to move together, since this rule's
               job is to stay fixed even if that variable doesn't resolve, not to
               silently mismatch it when it does. */
            height:32px;
            transition:opacity 160ms ease}
        .bac-logo-img[data-mono="true"]{filter:brightness(0) invert(1);opacity:.8}
        .bac-logo-set li:hover .bac-logo-img[data-mono="true"]{opacity:1}
        @keyframes bacLogoRail{from{transform:translateX(0)}to{transform:translateX(-50%)}}
        @media (prefers-reduced-motion:reduce){
            .bac-logo-rail[data-anim="true"] .bac-logo-run{animation:none;justify-content:center;width:auto}
            .bac-logo-rail[data-anim="true"] .bac-logo-set{flex-wrap:wrap}
            /* the run holds TWO .bac-logo-set copies — the real one and an
               aria-hidden clone that exists purely so the -50% translateX loop
               has a second lap to scroll into. Without the animation, wrapping
               both (the rule above) left the clone sitting fully visible right
               after the real set — every logo/pill doubled, wrapping under
               itself, reading as overlapping duplicate content. aria-hidden
               marks it as "not really there" for a screen reader; it needs the
               same treatment visually once nothing is scrolling it out of view. */
            .bac-logo-set[aria-hidden="true"]{display:none}
        }

/* ── Mobile-only logo strip · home + growth-systems ─────────────────────────
   Operator instruction: a standalone white-ground section, directly under
   the hero, mobile only — reusing the SAME carousel mechanism as the hero's
   own rail (identical markup: .bac-logo-rail/-run/-set/-fit/-img) rather
   than a second implementation, with one difference: these logos sit on
   --paper, not the hero's dark ground, so the hero's data-mono treatment
   (brightness(0) invert(1) — a white silhouette, illegible on white) is
   wrong here. data-tone="gray" is a plain saturation mask instead — colour
   removed, the mark's own luminance and shape kept, which reads correctly
   on a light ground without needing a second set of logo assets. */
.bac-mobile-logo-strip { display: none; }
@media (max-width: 767px) {
  .bac-mobile-logo-strip {
    display: block;
    width: 100%;
    background-color: var(--paper);
    padding: 32px 0;
  }
}
.bac-logo-img[data-tone="gray"] { filter: grayscale(1); opacity: .7 }
.bac-logo-set li:hover .bac-logo-img[data-tone="gray"] { opacity: 1 }