/* =====================================================================
   logoMarquee — reference-customer logo band ("Trusted by"), after the
   statCards (order rev. 3: Hero -> Certs -> Cards -> Trusted by).
   ONE row, all 17 logos shown once, scrolling (seamless, CSS-only, no deps).

   No repetition on screen: 17 logos in a single row are wider than any
   viewport, so one copy fills the screen; the list is duplicated (×2) only
   so translateX(-50%) can loop seamlessly — you never see a logo twice.

   Sizing: each logo sits in an equal SQUARE box (object-fit:contain). The
   source logos are square (~200×200, white background), so equal boxes give
   balanced OPTICAL sizing (a wide wordmark ends up shorter, a compact badge
   fills more). White band → the logos' white squares blend in seamlessly.
   ===================================================================== */

.logo-band {
    width: 100vw;                        /* full-bleed like the hero */
    margin-left: calc(50% - 50vw);
    margin-bottom: 0;                    /* half-caesura lives in the padding now (user 2026-07-08) */
    background: #ffffff;
    padding: 56px 0;                     /* 56 = half of the uniform 112px caesura (+25% pass 2026-07-16, was 45/90; the research band overrides its BOTTOM, the Trusted-by band its TOP, below) */
    overflow: hidden;                    /* masks the horizontal marquee overflow (NOT the row -> no vertical clipping) */
}

/* the "Trusted by" band (NOT research) closes the "Our standard" trias
   (statement -> certificates -> references) -> group it TIGHT to the certificates
   above (top 8 = ~16px with certStrip's bottom -> trias KEPT tight, off the +25% pass, user 2026-07-16);
   the caesura below to statCards stays 56 (+25% pass). Scoped so researchMarquee keeps its own top/bottom. */
.logo-band:not(.logo-band--research) { padding-top: 8px; }

/* "Vertraut von" fixed on the LEFT, the logos scroll in the space to its right.
   Both live in a centred inner (aligned with the page content / stat cards above). */
.logo-band__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
}

.logo-band__label {
    flex: 0 0 auto;
    color: #5b6b82;   /* = module secondary grey (was #3f5170, a third one-off slate — unified 2026-07-10) */
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.logo-band__row {
    flex: 1 1 auto;
    min-width: 0;            /* let the flex item shrink so overflow can mask the marquee */
    overflow: hidden;        /* mask the marquee within the space right of the label */
    display: flex;
    /* soft fade at both edges so logos ease in/out instead of hard-cutting.
       Outer fade 48->80px (2026-07-10): 48px on a 150px logo still read as a hard
       cut at the viewport edge ("looks like a broken logo" in review screenshots). */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 80px), transparent 100%);
}

.logo-band__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: logo-band-scroll 180s linear infinite;   /* slow, gentle; tune the duration to taste */
}

.logo-band__logo {
    width: 111px; height: 111px;         /* equal SQUARE box -> balanced optical sizing (kept square so no
                                            logo dominates). 150->111 (user 2026-07-16): the 150px box was
                                            oversized (logos are only ~18-94px of ink) and floated them with
                                            big invisible white margins -> the gap below the band read ~140-180px
                                            vs the nominal 112px caesura. Shrinking trims that slack, but legibility
                                            (esp. the logo tag-lines) drops with size, so 111 is the readability<->
                                            compactness compromise the user picked over 80/100/115/130. Balanced
                                            bounding-box sizing kept (no equal-height -> no wide-logo dominance). */
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
    margin-right: clamp(36px, 4vw, 90px);   /* spacing tightened with the smaller box (was 56/6vw/150) */
    -webkit-user-drag: none; user-select: none;
}

@keyframes logo-band-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* pause when the visitor hovers the band (CSS-only fallback; JS handles this once enhanced) */
.logo-band:hover .logo-band__track { animation-play-state: paused; }

/* --- JS-enhanced (logoMarquee.js): drag/swipe control ---
   The controller drives the transform itself, so the CSS keyframe animation is
   switched off. Horizontal gestures belong to the drag; vertical still scrolls
   the page (touch-action: pan-y). */
.logo-band.is-enhanced .logo-band__track { animation: none; }
.logo-band.is-enhanced .logo-band__row   { cursor: grab; touch-action: pan-y; }
.logo-band.is-enhanced.is-grabbing .logo-band__row { cursor: grabbing; }

/* --- research variant (researchMarquee): label on the RIGHT, marquee runs the other way ---
   Same band, mirrored. logoMarquee.js reads data-direction="right" and drives the rAF
   auto-scroll rightward; the rules below cover the layout (label side + mirrored edge
   fade) and the no-JS CSS fallback direction. */
/* research band top now TIGHT to the researchStatement above it (statement bottom 8
   + band top 8 = 16px trias gap, mirroring certStrip; user 2026-07-10). This trias gap is
   KEPT tight off the +25% pass (user 2026-07-16) so the partner logos stay grouped.
   Bottom = FULL 112 (user decision 2026-07-10, deliberately off the 56/56 scheme):
   whenFit below is a GREY surface — its own 56px top padding sits INSIDE the grey and
   reads as part of the block, not as gap. So at this white->grey edge the band carries
   the whole caesura as VISIBLE white space (edge-to-content stays 56 inside the grey).
   +25% spacing pass 2026-07-16: bottom 90->112 (= the scaled full caesura 56+56); top stays 8. */
.logo-band--research { padding-top: 8px; padding-bottom: 112px; }
.logo-band--research .logo-band__inner { flex-direction: row-reverse; }
.logo-band--research .logo-band__track { animation-direction: reverse; }   /* rightward scroll (CSS-only fallback) */
.logo-band--research .logo-band__row {
    /* mirror the edge fade: wide fade on the outer (viewport) edge, slim near the label
       (outer 48->80px, same rationale as the base band — 2026-07-10) */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 16px), transparent 100%);
}
/* research logos are mixed WIDE formats (wordmarks), not squares like the customer set:
   equal HEIGHT + natural width instead of square boxes (square made wordmarks tiny), and
   noticeably smaller than the reference band — secondary proof may look secondary.
   Assets are content-TRIMMED (parteners/marquee/) -> height = ACTUAL logo height;
   sources are only ~37-100px tall, so keep <=40px to avoid soft upscaling. */
.logo-band--research .logo-band__logo {
    width: auto;
    height: 40px;
    max-width: 260px;                     /* guard against extreme wordmark widths */
    margin-right: clamp(44px, 5vw, 110px);
}

@media (max-width: 767px) {
    .logo-band { padding: 38px 0; margin-bottom: 0; }   /* 38 = half of the 76px mobile caesura (+25% pass 2026-07-16, was 30/60) */
    .logo-band:not(.logo-band--research) { padding-top: 6px; }   /* Trusted-by band tight to the certificates (trias) on mobile too — kept off the +25% pass */
    .logo-band--research { padding-top: 6px; padding-bottom: 76px; }   /* top: tight to the researchStatement (trias, kept 6); bottom: full mobile caesura (60->76) as VISIBLE white space before the grey whenFit edge (user 2026-07-10, see desktop rule; +25% 2026-07-16) */
    .logo-band__inner { padding: 0 16px; gap: 14px; }
    .logo-band__label { font-size: 12px; letter-spacing: .06em; }
    .logo-band__logo { width: 93px; height: 93px; margin-right: clamp(28px, 8vw, 60px); }
    .logo-band--research .logo-band__logo { width: auto; height: 30px; max-width: 180px; margin-right: clamp(24px, 7vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-band__track { animation: none; transform: none; }
    .logo-band__row { overflow-x: auto; }
}