/* g410/brands — design "brands" de la home (bundle standalone) */

.brands {
    --br-ink: var(--ink, #00202f);
    --br-blue: var(--blue, #359ee0);
    --br-blue-deep: var(--blue-deep, #1f4a7e);
    --br-cream: var(--cream, #f6f4ef);
    --br-line: var(--line, #e7ebee);
    --br-muted: var(--muted, #5a6b76);
    --br-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(0, 32, 47, .06), 0 2px 6px rgba(0, 32, 47, .04));
    --br-display: var(--font-display, "Manrope", ui-sans-serif, system-ui, sans-serif);

    background: var(--br-cream);
    padding: 96px 0 120px;
    color: var(--br-ink);
}
.brands > .container {
    max-width: var(--container-width, 1240px);
    margin: 0 auto;
    padding: 0 24px;
}

.brands-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}
.brands-head .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--br-blue-deep);
    margin-bottom: 16px;
}
.brands-head .eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--br-blue);
    display: inline-block;
}
.brands-head h2 {
    margin: 0;
    font-family: var(--br-display);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--br-ink);
    text-wrap: balance;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
}
.brand {
    aspect-ratio: 1;
    background: #fff;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid var(--br-line);
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
    text-align: center;
    padding: 8px;
    overflow: hidden;
}
.brand:hover {
    transform: translateY(-2px);
    box-shadow: var(--br-shadow-sm);
    color: var(--br-blue-deep);
}
.brand img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.brand .brand-name {
    font-family: var(--br-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--br-ink);
    line-height: 1.2;
}

.brand-more {
    text-align: center;
    margin: 28px 0 0;
    color: var(--br-muted);
    font-style: italic;
    font-size: 15px;
}

@media (max-width: 900px) {
    .brand-grid { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 500px) {
    .brand-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .brands { padding: 64px 0 80px; }
}