.brand-page .hero {
    padding-bottom: 4rem;
}

.brand-hero-panel {
    padding: 1.4rem;
    display: grid;
    gap: 1rem;
    align-self: stretch;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.84));
}

.brand-hero-panel h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
    color: #000000;
}

.brand-panel-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-panel-card {
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 12px 24px rgba(0, 0, 0, 0.08);
}

.brand-panel-card strong {
    display: block;
    margin-bottom: .3rem;
    color: #000000;
    font-family: "Space Grotesk", sans-serif;
}

.brand-panel-card p {
    font-size: .95rem;
    color: #646566;
}

.brand-cards-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.brand-cards-six .card,
.brand-cards-four .card,
.brand-benefits-three .card {
    min-height: 0;
}

@media (max-width: 1024px) {
    .brand-panel-grid,
    .brand-cards-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .brand-hero-panel,
    .brand-panel-card {
        padding: 1rem;
    }

    .brand-panel-grid,
    .brand-cards-four {
        grid-template-columns: 1fr;
    }
}