/* ===== Careers Listing ===== */
    .careers-page {
        --miq-blue: #0d3b66;
        --ink: #0f172a;
        --muted: #64748b;
        --card: #fff;
        --ring: #e6eef3;
        --bg: #f6f9fc;
        --shadow: 0 2px 0 rgba(13, 59, 102, .02), 0 8px 24px rgba(13, 59, 102, .08);
        background: var(--bg);
        color: var(--ink);
        font: 16px/1.6;
          font-family: "Poppins", sans-serif;

    }

    .careers-page .wrap {
        max-width: 1120px;
        margin-inline: auto;
        padding: 16px;
    }

    .page-title {
        font-size: clamp(24px, 2.4vw, 34px);
        color: var(--miq-blue);
        font-weight: 800;
        margin: 12px 0 14px;
        text-align: center
    }

    /* Filters */
    .filters {
        background: #fff;
        border: 1px solid var(--ring);
        border-radius: 14px;
        padding: 14px;
        box-shadow: var(--shadow);
        margin: 12px 0 18px
    }

    .filters__row {
        display: grid;
        gap: 12px;
        grid-template-columns: 2fr 1fr 1fr 1fr
    }

    .filters label {
        font-weight: 600;
        display: block;
        margin-bottom: 6px;
        color: var(--ink)
    }

    .filters .f input[type="text"],
    .filters .f select {
        width: 100%;
        border: 1px solid #d7dee8;
        border-radius: 10px;
        padding: 10px 12px;
        font: inherit
    }

    .filters__actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px
    }

    @media (max-width: 900px) {
        .filters__row {
            grid-template-columns: 1fr 1fr
        }
    }

    @media (max-width: 560px) {
        .filters__row {
            grid-template-columns: 1fr
        }
    }

    /* Cards */
    .card {
        display: block;
        background: var(--card);
        border-radius: 16px;
        box-shadow: var(--shadow);
        overflow: hidden;
        border: 1px solid var(--ring)
    }
    
    /* Career card link styles */
    .card-link {
        text-decoration: none;
        color: inherit;
        display: block;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .card a {
        text-decoration: none;
    }

    .card .content {
        padding: 14px 16px 16px
    }

    .card .title {
        margin: 0 0 6px;
        line-height: 1.25;
        font-size: 18px;
        font-weight: 800
    }

    .card .title a {
        text-decoration: none;
        color: var(--ink)
    }

    .card .title a:hover {
        color: var(--miq-blue)
    }

    .card .excerpt {
        margin: 0 0 10px;
        color: var(--muted)
    }

    .card .meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        color: var(--muted);
        font-size: 13px
    }

    /* List grid */
    .jobs-list {
        display: grid;
        gap: 16px
    }

    /* Buttons / load more */
    .load-more-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: center;
        margin: 22px 0 36px
    }

    .btn {
        appearance: none;
        border: 0;
        cursor: pointer;
        border-radius: 999px;
        padding: 10px 16px;
        font-weight: 700;
        background: var(--miq-blue);
        color: #fff;
        box-shadow: 0 3px 12px rgba(13, 59, 102, .25)
    }

    .btn:disabled {
        opacity: .6;
        cursor: not-allowed
    }

    .muted {
        color: var(--muted);
        font-size: 13px
    }