/* service page styles */

/* ── Two-column sections (Why It Matters, etc.)
   Inline style uses grid-template-columns:1fr 1fr — override on mobile ── */
@media (max-width: 768px) {
    .columns {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Stack image above text — image is first child in the DOM */
    .columns > *:first-child {
        order: -1;
    }

    /* Capabilities + Methods grid already breaks at 1024px in components.css,
       but tighten padding on small screens */
    .capabilities-col,
    .methods-col {
        padding: 0;
    }

    /* 3-column who-we-serve / related services grids → single column */
    .grid--3 {
        grid-template-columns: 1fr !important;
    }

    /* Method cards grid → single column */
    .method-grid {
        grid-template-columns: 1fr !important;
    }

    /* Process steps — allow wrapping */
    .process-steps {
        grid-template-columns: 1fr !important;
    }
}