/* --- Numbered process steps (738:1272) ----------------------------------- */
.process-steps {
    background: var(--bg, #ffffff);
}

.process-steps-inner {
    display: flex;
    flex-direction: column;
    gap: 63px;
    justify-content: center;
    padding-block: 72px;
    max-width: calc(1767px + var(--gutter) * 2);
}

.process-steps .head {
    display: flex;
    flex-direction: column;
    gap: 31px;
}

.process-steps h2 {
    max-width: 771px;
    margin: 0;
    font-size: clamp(32px, 3.33vw, 64px);
    line-height: 1.219; /* 78/64 */
    color: var(--muted, #909091);
}

.process-steps .head p {
    max-width: 572px;
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--ink, #212529);
}

.process-steps .steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 38px;
    margin: 0;
    padding: 32px 40px 33px;
    border-radius: 49px;
    background: #F6F6F6;
    list-style: none;
}

.process-steps .steps li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* The step art is client-uploaded on the services CPT, so the files arrive at
   unrelated aspect ratios (695x427 next to 299x95) and each one sized itself to
   its own column — the truck ran 241px tall against the crusher's 88px, and the
   copy under each step started at a different height (client round 20). A fixed
   137px box (the tallest Figma illustration) with the art bottom-aligned inside
   it puts every number, title and paragraph on one line. scale-down, not
   contain: contain would enlarge the smaller theme SVGs up to 16% to fill it. */
.process-steps .steps .art {
    width: 100%;
    height: 137px;
    object-fit: scale-down;
    object-position: left bottom;
    margin-bottom: 44px;
}

.process-steps .num {
    margin: 0;
    font-family: var(--display, system-ui, sans-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--brand, #008AF7);
}

.process-steps .steps h3 {
    margin: 0;
    font-size: clamp(24px, 1.875vw, 36px);
    font-weight: 800;
    line-height: 1;
    color: var(--ink, #212529);
}

.process-steps .steps li p:last-child {
    margin: 0;
    font-size: 18px;
    line-height: 1.111; /* 20/18 */
    color: var(--ink, #212529);
}

@media (max-width: 991px) {
    /* One column on small screens. `flex-direction` alone stopped working once the
       1919 rule turned this into a grid, which left phones with two ~170px columns
       (client round 17). */
    .materials .columns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .statement-band {
        min-height: 0;
        padding-block: 64px;
    }

    .statement-band-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .statement-band .mark {
        width: 160px;
    }

    .process-steps-inner {
        min-height: 0;
        gap: 40px;
    }

    .process-steps .steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        border-radius: 24px;
    }

    .process-steps .steps li {
        flex-basis: auto;
        padding-top: 0;
    }

    /* Both sections carry big Figma insets (125/115 and 120/82) that were never
       released on small screens, so their copy sat in a ~170px column while every
       About section starts at the 24px gutter. Match that standard (round 17). */
    .materials {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-block: 64px;
        padding-inline: var(--gutter);
    }

    .products-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 64px var(--gutter);
    }

    .products .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The product shot is portrait (306/475), so below the four-up row it grew to
       543px at 390 and 1119px at 767 — a 5111px section. Cap it (client round 18). */
    .products .card img {
        aspect-ratio: auto;
        height: clamp(180px, 30vw, 260px);
    }

    .seo-copy {
        min-height: 0;
        padding-block: 64px;
    }

    /* Same collapse the static pages already do at this width. */
    .seo-copy .columns {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .process-steps .steps {
        grid-template-columns: 1fr;
    }

    .materials .callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .products .cards {
        grid-template-columns: 1fr;
    }
}

/* --- Mobile gutter parity ------------------------------------------------
 * The `.container` primitive swaps to --gutter-mobile below 576px. Sections that
 * set their own inline padding have to follow or they sit 4px tighter than every
 * other section on the page (caught in review, client round 22). This lives at
 * the END of the file on purpose: the <=991 rules above re-declare
 * padding-inline, and a same-specificity rule placed earlier would lose to them.
 * ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .materials,
    .products-inner {
        padding-inline: var(--gutter-mobile, 24px);
    }
}