/* ============================================================
   BEINC — Contact page: Brands marquee overrides
   Reuses .projects-brands-marquee but constrains the marquee
   strip to live between the global padded edges so the side
   vertical rails don't overlap the logos.
   ============================================================ */

.contact-brands {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    background: var(--color-black2);
}

.contact-brands .projects-brands-marquee {
    width: 100%;
    height: 40vh;
    min-height: 200px;
}


/* ── MOBILE ──
   Make the brands strip more compact on mobile (less vertical empty space
   above/below the logos) AND force the as-seen-in section directly below
   to share that same compact height — so the two stacked black strips read
   as a matched pair instead of two different sizes. Both rules scoped to
   `.contact-page` so the projects-page versions are unaffected. */
@media (max-width: 767px) {
    .contact-page .contact-brands .projects-brands-marquee {
        height: 16vh;
        min-height: 110px;
    }
    .contact-page .projects-asi {
        /* Override projects-as-seen-in.css's `padding: var(--space-10) 0`. */
        padding: 0;
        min-height: 16vh;
        /* Center the marquee strip vertically inside the now-compact section
           (default vertical alignment would leave the dashed top/bottom rails
           awkwardly spaced from the logos). */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}