/* =================================================================== BRANDS section css =================================================================== */
/* White panel: brand-neutral statement on the left, brand chips on the right. */
.brands {
    & .brands__panel {
        position: relative;
        display: grid;
        grid-template-columns: 5fr 7fr;
        align-items: center;
        gap: var(--sp60);
        padding: var(--sp60);
        background: var(--white);
        border-radius: var(--r-xl);
    }

    & .brands__notch {
        --notch-r: var(--r-xl);

        & .notch-badge { width: 70px; height: 70px; background: var(--primary); color: var(--white); }
    }

    & .brands__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--sp12);
    }

    & .brands__item {
        display: flex; align-items: center; justify-content: center;
        min-height: 96px;
        padding: var(--sp15) var(--sp20);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        color: var(--ink);
        transition: var(--transition);

        &:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); color: var(--primary); }
    }

    & .brands__logo { max-width: 100%; height: auto; }

    & .brands__word {
        font-family: var(--font-mona);
        font-size: var(--f18);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: var(--lsSnug);
        text-align: center;
    }
}

/* =================================================================== BRANDS responsive =================================================================== */
@media (max-width: 991.98px) {
    .brands {
        & .brands__panel { grid-template-columns: 1fr; gap: var(--sp35); padding: var(--sp40); }
    }
}

@media (max-width: 575.98px) {
    .brands {
        & .brands__panel { padding: var(--sp30) var(--sp20); border-radius: var(--r-lg); }
        & .brands__notch { --notch-r: var(--r-lg); }
        & .brands__notch .notch-badge { width: 55px; height: 55px; }
        & .brands__info { padding-right: 72px; }   /* badge + notch padding */
    }
}