/*
 * The original site's CSS changes layout at 1100px, 900px, and 650px.
 * Elementor Pro's custom breakpoints (Site Settings → Layout →
 * Breakpoints) can be set to Tablet = 1024, Mobile = 767, plus an
 * additional "Tablet Extra" breakpoint at 1100 if your Elementor Pro
 * version supports it. Where Elementor's nearest built-in breakpoint
 * doesn't exactly match, these rules fill the gap for anything NOT
 * built as a native Elementor container (e.g. the staging banner and
 * any custom/legacy markup).
 */

/* ---- ≤1100px: card grids/process grids first step down ---- */
@media (max-width: 1100px) {
    .wr-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .wr-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- ≤900px: navigation switches to mobile, split sections tighten ---- */
@media (max-width: 900px) {
    .wr-nav-desktop {
        display: none;
    }
    .wr-nav-mobile-toggle {
        display: inline-flex;
    }
    .wr-split {
        flex-direction: column;
    }
}

/* ---- ≤650px: single-column everything, full-width buttons ---- */
@media (max-width: 650px) {
    .wr-grid-3,
    .wr-grid-4,
    .job-search-panel .form-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }
    .wr-staging-banner {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
    .btn-full-mobile {
        width: 100%;
        justify-content: center;
    }
}

/* Never allow horizontal scroll on any breakpoint. */
html, body {
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}