/* --- Accepted materials + callout (1023:1454) ---------------------------- */
.materials {
    display: grid;
    grid-template-columns: minmax(0, 810px) minmax(0, 846px);
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 4.7vw, 91px);
    min-height: 1015px;
    padding-inline: 125px 115px;
    background: var(--bg, #ffffff);
}

.materials .media {
    width: 100%;
    height: auto;
    aspect-ratio: 810 / 833;
    object-fit: cover;
    border-radius: 46px;
}

.materials .content {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.materials .head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.materials h2 {
    max-width: 828px;
    margin: 0;
    font-size: clamp(32px, 3.33vw, 64px);
    line-height: 1.125; /* 72/64 */
    color: var(--brand, #008AF7);
}

.materials .head p {
    max-width: 491px;
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--muted, #909091);
}

.materials .accepted {
    display: flex;
    flex-direction: column;
    gap: 39px;
}

.materials h3 {
    margin: 0;
    font-size: clamp(24px, 1.875vw, 36px);
    font-weight: 600;
    line-height: 1.1667; /* 42/36 */
    color: var(--muted, #909091);
}

/* The three groups stay side by side at every desktop width — three levels of
   items each, as the Figma lays them out (client round 17). Letting the COLUMNS
   wrap dropped the third group onto its own line; what gives instead is the
   label text, which stops being nowrap as soon as the row is squeezed (see the
   `white-space: normal` override below). That also clears the 129px of
   horizontal scroll the nowrap labels used to force between 1400 and ~1650px. */
.materials .columns {
    display: flex;
    gap: 41px;
}

.materials .columns ul {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.materials .columns li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--ink, #212529);
    white-space: nowrap;
}

.materials .columns li .cnm-icon {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--white, #ffffff);
}

.materials .columns li::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand, #008AF7);
}

.materials .columns li {
    position: relative;
}

.materials .columns li .cnm-icon {
    position: relative;
    margin-inline: 5.5px;
}

.materials .callout {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 32px;
    border-radius: 16px;
    background: var(--brand, #008AF7);
    color: var(--white, #ffffff);
}

.materials .callout .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--white, #ffffff);
    color: var(--brand, #008AF7);
}

.materials .callout .badge .cnm-icon {
    width: 32px;
    height: 32px;
}

.materials .callout .title {
    margin: 0 0 6px;
    font-size: clamp(24px, 1.875vw, 36px);
    font-weight: 600;
    line-height: 1.1667;
}

.materials .callout p:last-child {
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
}

/* --- Responsive ---------------------------------------------------------- */
/* Banded: page CSS loads after interior.css, so an open-ended max-width
   block here would override interior's <=991 pattern collapses (same
   specificity, later source). The band hands off cleanly at 991. */
@media (min-width: 992px) and (max-width: 1399px) {
    .statement-band-inner {
        gap: 48px;
    }

    .materials {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
        padding-inline: var(--gutter);
    }

    .materials .columns {
        gap: 22px 24px;
    }

    .products-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 48px;
        padding: 80px var(--gutter);
    }

    .process-steps .steps {
        gap: 24px;
        padding: 32px;
    }

    .process-steps .steps .art {
        margin-bottom: 24px;
    }
}

/* Shared-pattern mobile collapses live in interior.css; only genuine
   per-page values remain here. */
@media (max-width: 991px) {
    .materials .content {
        gap: 40px;
    }

    .seo-copy-inner {
        gap: 48px;
    }

    /* Must match the specificity of the 3-column override above, or that
       (0,3,0) selector wins at every width and the columns never collapse. */
    .site-main--concrete-recycling .seo-copy .columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}