/* ── Section shell ── 

This Css File IS attached with brands logo marquee and partner Logo Marquee

*/
.logo-marquee {
    border-top: 1px solid var(--color-neutral-grid-gray);
    border-bottom: 1px solid var(--color-neutral-grid-gray);
    overflow: hidden;
    background: var(--color-neutral-canvas);
    min-height: 150px;
}

/* ── 1400px container ── */
.marquee-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

/* ── Left label ── */
.marquee-label {
    flex-shrink: 0;
    width: 300px;              /* explicit width, not just max-width */
    box-sizing: border-box;
    padding: 0 16px;
    border-right: 1.5px solid var(--color-neutral-grid-gray);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;          /* safety net: nothing can bleed into the marquee */
}

.marquee-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0%;
    background: var(--color-primary-orange);
    transition: height 420ms ease-out;
}
.logo-marquee:hover .marquee-label::before {
    height: 60%;
}

.marquee-kicker {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary-orange);
}

.marquee-statement {
    font-family: var(--font-serif, 'Lora', serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-primary-black);
    margin: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.marquee-statement span {
    font-style:var(--font-style-accent,italic);
    color: var(--color-primary-indigo);
}

.marquee-label p {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--color-primary-black);
    white-space: nowrap;
    margin: 0;
    text-transform: uppercase;
}

/* ── Viewport: clips the scrolling track ── */
.marquee-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

/* ── Track: both sets in one row, animates left ──
   Duration is set dynamically by logo-marquee.js via --marquee-duration
   (computed from actual track width so every marquee scrolls at the
   same px/second speed, regardless of how many logos it has).
   The 30s fallback only applies before JS runs / if JS fails. ── */
.marquee-track {
    display: flex;
    width: max-content;
    animation-name: marquee-scroll;
    animation-duration: var(--marquee-duration, 30s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.marquee-track:hover {
    animation-play-state: paused;
}

/* ── Each set is a flex row ── */
.marquee-set {
    display: flex;
    align-items: center;
}

/* ── Individual logo cell ── */
.marquee-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
    flex-shrink: 0;
    align-self: stretch;
    border-right: 1px solid var(--color-neutral-grid-gray);
    background: transparent;
    min-height: 150px;
}

/* ── Logo image ── */
.marquee-logo-img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    transition: filter 220ms ease-out;
}
.marquee-logo-cell:hover .marquee-logo-img {
    filter: grayscale(0%) opacity(1);
}

/* ── Text fallback (no image) ── */
.marquee-logo-placeholder {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-neutral-text-gray);
    white-space: nowrap;
}

/* ── Keyframe ── */
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .marquee-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .marquee-label {
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--color-neutral-grid-gray);
        width: 100%;
        align-self: auto;
        max-width: none;
        gap: 6px;
    }

    .marquee-statement { font-size: 15px; }

    .marquee-logo-cell {
        padding: 0 28px;
        min-height: 80px;
    }

    .marquee-logo-img { height: 32px; }
}