/* ── Elementor container overrides ─────────────────────────────── */
/* Elementor boxed layout restricts width — override for results section */
/* .elementor-section:has(.pir-wrap),
.e-con:has(.pir-wrap) {
    --content-width: 1200px !important;
    --container-max-width: 1200px !important;
    max-width: 100% !important;
    width: 100% !important
}

.elementor-section:has(.pir-wrap) > .elementor-container,
.e-con-boxed:has(.pir-wrap) > .e-con-inner,
.e-con-inner:has(.pir-wrap) {
    max-width: 1200px !important
}

.elementor-widget:has(.pir-wrap),
.elementor-column:has(.pir-wrap) {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important
} */

/* ── PI Results Section ─────────────────────────────────────────── */
.pir-wrap {
    --navy-950: #071c38;
    --navy-900: #0b264b;
    --navy-800: #123a6b;
    --blue-600: #1178c4;
    --blue-500: #2f8fe0;
    --gold-500: #c99c30;
    --gold-400: #dcae3f;
    --cream-50: #f8f5ec;
    --ink-900: #0e1b2d;
    --gray-600: #5b6572;
    --gray-500: #7a8391;
    --gray-400: #9aa3ae;
    --border: #e7e1d2;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(10, 20, 40, .04), 0 8px 24px -12px rgba(10, 20, 40, .12);
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    padding-block: clamp(3rem, 6vw, 5rem);
    font-family: 'Baloo 2', Sans-serif !important;
    color: var(--ink-900) !important;
    -webkit-font-smoothing: antialiased
}

/* ── Section Head ─────────────────────────────────────────────── */
.pir-head {
    margin-bottom: 34px;
    max-width: 640px
}

.pir-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700;
    font-size: 16px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue-600) !important;
    margin-bottom: 0
}

.pir-head .eyebrow::before {
    content: "";
    width: 20px;
    height: 1.5px;
    background: currentColor;
    display: inline-block
}

.pir-title {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 32px !important;
    margin: 14px 0 0 !important;
    line-height: 1.25 !important;
    color: #0A2447 !important;
    letter-spacing: -0.01em
}

.pir-lead {
    max-width: 640px;
    color: var(--gray-600) !important;
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 16px !important;
    font-weight: 500;
    margin: 12px 0 0;
    line-height: 1.6 !important
}

/* ── Filter Card ──────────────────────────────────────────────── */
.pir-filter {
    position: relative;
    background: linear-gradient(180deg, #fff, var(--cream-50)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 26px 28px 22px !important;
    margin-bottom: 38px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.pir-filter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-500), var(--blue-600))
}

.pir-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

.pir-filter__title {
    display: flex;
    align-items: center;
    gap: 12px
}

.pir-filter__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex: none;
    background: var(--navy-900) !important;
    color: var(--gold-400) !important;
    display: flex;
    align-items: center;
    justify-content: center
}

.pir-filter__t {
    font-family: 'Baloo 2', sans-serif !important;
    font-weight: 700;
    font-size: 16px !important;
    color: var(--navy-900) !important;
    margin: 0;
    line-height: 1.3
}

.pir-filter__d {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 13.5px !important;
    color: var(--gray-500) !important;
    margin: 2px 0 0
}

.pir-filter__count {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 13px !important;
    color: var(--gray-600) !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    padding: 8px 14px !important;
    border-radius: 100px !important;
    white-space: nowrap
}

.pir-filter__count b {
    color: var(--navy-900) !important;
    font-weight: 700
}

.pir-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2fae5b;
    flex: none;
    display: inline-block
}

/* Filter fields grid */
.pir-filter__fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.pir-filter__field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.pir-filter__lbl {
    display: block;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-500) !important;
    padding-left: 1px
}

.pir-select-wrap {
    position: relative
}

.pir-select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.6px solid var(--gray-500);
    border-bottom: 1.6px solid var(--gray-500);
    border-top: none;
    border-left: none;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
    background: none
}

.pir-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100%;
    background: #fff !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 11px 32px 11px 14px !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600;
    color: var(--ink-900) !important;
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
    line-height: 1.4;
    height: auto
}

.pir-select:hover {
    border-color: #c9c2ac
}

.pir-select:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(47, 143, 224, .15)
}

.pir-select.is-active {
    border-color: var(--blue-600);
    background: #eef6fd !important;
    color: var(--blue-600) !important
}

/* Filter footer */
.pir-filter__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border)
}

.pir-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-right: auto
}

.pir-active-chips .pir-achip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--navy-900) !important;
    color: #fff !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600;
    padding: 5px 8px 5px 12px !important;
    border-radius: 100px !important
}

.pir-active-chips .pir-achip button {
    background: rgba(255, 255, 255, .18) !important;
    border: none !important;
    color: #fff !important;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    cursor: pointer
}

.pir-active-chips .pir-achip button:hover {
    background: rgba(255, 255, 255, .32) !important
}

.pir-reset-link {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700;
    color: var(--blue-600) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important
}

.pir-reset-link:hover {
    text-decoration: underline
}

/* ── Card Grid ─────────────────────────────────────────────────── */
.pir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 6px
}

/* ── Result Card ───────────────────────────────────────────────── */
/* Layout:
     top   → [badge ............ year]
     body  → [photo | name / school / score tile]
             [subjects ......................... ]
     foot  → standard · board · year
   The hero row height is set by the fixed photo (the score tile is
   pinned to its bottom edge) and the footer is pinned to the card
   bottom, so every card in a grid row lines up exactly. */
.pir-card {
    --pir-photo-w: 140px;
    --pir-photo-h: 172px;
    --pir-pad: 20px;
    --pir-line: #e6eaf1;
    --pir-tint: #eef3fa;
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--pir-line) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(120% 60% at 100% 0, rgba(220, 174, 63, .10), transparent 60%),
        linear-gradient(180deg, #f3f6fb 0, #fff 150px) !important;
    box-shadow: 0 1px 2px rgba(11, 38, 75, .05), 0 12px 32px -18px rgba(11, 38, 75, .28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    container-type: inline-size;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

/* Navy → gold accent line across the top edge */
.pir-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--navy-900), var(--navy-800) 55%, var(--gold-400));
    z-index: 2
}

.pir-card:hover {
    transform: translateY(-4px);
    border-color: #d6deea !important;
    box-shadow: 0 2px 4px rgba(11, 38, 75, .06), 0 22px 40px -20px rgba(11, 38, 75, .38)
}

/* Top row — badge + year. Fixed height so cards without a badge align. */
.pir-card__top {
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 56px;
    padding: 18px var(--pir-pad) 10px !important;
    background: none !important
}

.pir-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: calc(100% - 90px);
    background: linear-gradient(135deg, #e7bd55, var(--gold-500)) !important;
    color: var(--navy-950) !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 6px 12px 5px 10px !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 10px -4px rgba(201, 156, 48, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Small star glyph in the badge */
.pir-badge::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7.3L12 17.8 5.8 21.5l1.6-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7.3L12 17.8 5.8 21.5l1.6-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat
}

.pir-year {
    flex: none;
    margin-left: auto;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--navy-800) !important;
    background: #fff !important;
    border: 1px solid var(--pir-line) !important;
    padding: 5px 11px 4px !important;
    border-radius: 100px !important
}

/* Body — photo left, info right, subjects full width below */
.pir-card__body {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: var(--pir-photo-w) minmax(0, 1fr);
    grid-template-areas:
        "photo info"
        "meta  meta";
    align-content: start;
    column-gap: 16px;
    padding: 6px var(--pir-pad) 18px
}

/* Portrait photo — gold/navy gradient ring around a rounded frame */
.pir-photo {
    grid-area: photo;
    position: relative;
    box-sizing: border-box;
    width: var(--pir-photo-w);
    height: var(--pir-photo-h);
    padding: 3px;
    border-radius: 18px;
    background: linear-gradient(150deg, var(--gold-400), var(--navy-800) 60%, var(--navy-950));
    box-shadow: 0 12px 24px -14px rgba(11, 38, 75, .55)
}

.pir-photo img,
.pir-photo--empty svg {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    border: 2px solid #fff;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #eaf0f8, #d5e0ee)
}

.pir-photo img {
    object-fit: cover;
    object-position: 50% 20%;   /* bias toward the top so faces aren't cropped */
    transition: transform .4s ease
}

.pir-photo:has(img) {
    overflow: hidden
}

.pir-card:hover .pir-photo img {
    transform: scale(1.03)
}

.pir-photo--empty svg {
    fill: #a9b8d0
}

/* Info column — name & school at the top, score tile at the bottom,
   so the column always matches the photo height. */
.pir-card__info {
    grid-area: info;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 4px
}

.pir-name {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 19px !important;
    line-height: 22px !important;
    max-height: 44px;           /* clamp to 2 lines */
    font-weight: 700;
    color: var(--navy-900) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere
}

.pir-school {
    font-family: "Plus Jakarta Sans", Sans-serif !important;
    font-size: 13px !important;
    line-height: 17px !important;
    max-height: 34px;           /* clamp to 2 lines */
    font-weight: 500;
    color: var(--gray-500) !important;
    margin: 4px 0 0 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere
}

/* Score tile — navy panel, white number, gold descriptor */
.pir-score {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    height: 62px;
    margin-top: auto;
    padding: 8px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
    box-shadow: 0 10px 20px -14px rgba(7, 28, 56, .8);
    overflow: hidden
}

.pir-score::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -18px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 174, 63, .35), transparent 70%);
    pointer-events: none
}

/* No score entered → keep the slot, drop the tile */
.pir-score:has(.pir-score__num:empty):has(.pir-score__desc:empty) {
    background: none;
    box-shadow: none
}

.pir-score__num {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 28px !important;
    height: 28px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pir-score__desc {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 11.5px !important;
    line-height: 15px !important;
    height: 15px;
    color: var(--gold-400) !important;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Meta slot (subjects / alumni "currently") — max 2 chip rows */
.pir-card__meta {
    grid-area: meta;
    min-width: 0;
    margin-top: 16px;
    max-height: 86px;
    overflow: hidden
}

.pir-subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0
}

.pir-subjects::before {
    content: "Subject scores";
    flex: 0 0 100%;
    font-family: 'Baloo 2', sans-serif;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 2px
}

.pir-sub {
    background: var(--pir-tint) !important;
    border: 1px solid #dde5f0 !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    font-weight: 700;
    color: var(--navy-900) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    transition: background .2s ease, border-color .2s ease
}

.pir-card:hover .pir-sub {
    border-color: #cfdaea !important
}

.pir-no-sub {
    margin: 0 !important
}

/* Alumni card meta — "Currently doing" block styled like the
   Results "Subject scores" label + chip so both cards match */
.pir-current {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important
}

.pir-current::before {
    content: "Currently doing";
    flex: 0 0 100%;
    font-family: 'Baloo 2', sans-serif;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 2px
}

.pir-current__val {
    background: var(--pir-tint) !important;
    border: 1px solid #dde5f0 !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    font-weight: 700;
    color: var(--navy-900) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    transition: border-color .2s ease
}

.pir-card:hover .pir-current__val {
    border-color: #cfdaea !important
}

@container (max-width: 280px) {
    .pir-current {
        justify-content: center;
        text-align: center
    }
}

/* Client-side filtered / paged items (alumni grid) */
.pir-wrap [hidden] {
    display: none !important
}

/* Footer (taxonomy tags) — always rendered, fixed single line */
.pir-card__foot {
    flex: none;
    box-sizing: border-box;
    height: 44px;
    padding: 13px var(--pir-pad);
    border-top: 1px solid var(--pir-line);
    background: #f8fafd !important;
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    color: var(--gray-600) !important;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Graduation-cap glyph before the class / board line */
.pir-card__foot::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -3px;
    background: var(--gold-500);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l11 6 9-4.9V17h2V9zM5 13.2v4L12 21l7-3.8v-4L12 17z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l11 6 9-4.9V17h2V9zM5 13.2v4L12 21l7-3.8v-4L12 17z'/%3E%3C/svg%3E") center / contain no-repeat
}

.pir-card__foot:empty::before {
    display: none
}

.pir-tags span {
    font-size: 12.5px !important;
    color: var(--gray-600) !important
}

.pir-tags span:not(:last-child)::after {
    content: "\00B7";
    margin: 0 6px;
    color: var(--gray-400)
}

/* Narrow cards (2-up tablets / phones): smaller photo, same structure */
@container (max-width: 350px) {
    .pir-card > * {
        --pir-photo-w: 118px;
        --pir-photo-h: 148px;
        --pir-pad: 16px
    }

    .pir-card__body {
        column-gap: 12px
    }

    .pir-name {
        font-size: 17px !important;
        line-height: 21px !important;
        max-height: 42px
    }

    .pir-school {
        max-height: 17px;
        -webkit-line-clamp: 1
    }

    .pir-score {
        height: 56px;
        padding: 7px 10px
    }

    .pir-score__num {
        font-size: 23px !important;
        line-height: 25px !important;
        height: 25px
    }
}

/* Very narrow cards (small phones): stack photo above the info */
@container (max-width: 280px) {
    .pir-card > * {
        --pir-photo-w: 140px;
        --pir-photo-h: 172px
    }

    .pir-card__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "photo"
            "info"
            "meta"
    }

    .pir-photo {
        justify-self: center;
        margin-bottom: 14px
    }

    .pir-card__info {
        text-align: center
    }

    .pir-score {
        margin-top: 10px
    }

    .pir-subjects {
        justify-content: center;
        text-align: center
    }
}

/* Empty state */
.pir-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gray-500) !important;
    padding: 70px 20px;
    border: 1px dashed var(--border) !important;
    border-radius: var(--radius) !important;
    font-size: 1.0625rem !important
}

/* Load More button */
.pir-loadmore-wrap {
    text-align: center;
    margin-top: 32px
}

.pir-loadmore-btn {
    font-family: 'Baloo 2', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--blue-600) !important;
    background: #fff !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 100px !important;
    padding: 12px 32px !important;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s
}

.pir-loadmore-btn:hover {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(47, 143, 224, .15)
}

/* Loading */
.pir-grid.is-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s
}


/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 920px) {
    .pir-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 820px) {
    .pir-filter__fields {
        grid-template-columns: repeat(2, 1fr)
    }
}

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

    .pir-filter__head {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (max-width: 520px) {
    .pir-filter__fields {
        grid-template-columns: 1fr
    }

    .pir-filter {
        padding: 22px 18px 18px !important
    }
}


/* Slider CSS */

/* :root {
    --navy-900: #0d1b3d;
    --navy-800: #132a5e;
    --gold-500: #e8b13a;
    --gold-600: #d79f28;
    --ink-900: #12172b;
    --ink-500: #5b6478;
    --ink-300: #8891a3;
    --line: #e7e9f0;
    --chip-bg: #faf3e2;
    --chip-text: #8a6a1e;
    --card-bg: #ffffff;
    --page-bg: #f4f5f9;
    --radius-lg: 18px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 2px rgba(13, 27, 61, .06), 0 10px 24px -12px rgba(13, 27, 61, .18);
} */


.achievers {
    --line: #e7e9f0;
    --card-bg: #ffffff;
    --page-bg: #f4f5f9;
    --ink-500: #5b6478;
    --ink-300: #8891a3;
    /* Card palette — mirrors .pir-wrap so the reused .pir-card markup
       renders identically here as it does in the filter grid. */
    --navy-950: #071c38;
    --navy-900: #0b264b;
    --navy-800: #123a6b;
    --blue-600: #1178c4;
    --blue-500: #2f8fe0;
    --gold-500: #c99c30;
    --gold-400: #dcae3f;
    --cream-50: #f8f5ec;
    --ink-900: #0e1b2d;
    --gray-600: #5b6572;
    --gray-500: #7a8391;
    --gray-400: #9aa3ae;
    --border: #e7e1d2;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(10, 20, 40, .04), 0 8px 24px -12px rgba(10, 20, 40, .12);
    font-family: 'Baloo 2', Sans-serif;
    background: var(--page-bg);
    padding: 50px 20px;
}

.achievers__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.achievers__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.achievers__title {
    font-size: 42px;
    font-weight: 700;
    color: #0A2447;
    margin: 0;
    letter-spacing: -0.01em;
    font-family: 'Baloo 2';
}

.achievers__sub {
    font-size: 16px;
    font-weight: 500;
    font-family: "Plus Jakarta Sans", Sans-serif;
    color: var(--ink-500);
    margin: 6px 0 0;
}

.achievers__nav {
    display: none;
    gap: 10px;
    flex-shrink: 0;
}

.achievers__nav.is-active {
    display: flex;
}

.achievers__navbtn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card-bg);
    color: var(--navy-900);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.achievers__navbtn:hover {
    background: var(--navy-900);
    border-color: var(--navy-900);
    color: #fff;
}

.achievers__navbtn:active {
    transform: scale(.94);
}

.achievers__navbtn:disabled {
    opacity: .35;
    cursor: not-allowed;
    background: var(--card-bg);
    color: var(--navy-900);
    border-color: var(--line);
}

.achievers__navbtn svg {
    width: 18px;
    height: 18px;
}

.achievers__viewport {
    overflow: hidden;
    margin: 0 -8px;
}

.achievers__track {
    display: flex;
    will-change: transform;
    transition: transform .45s cubic-bezier(.22, .8, .28, 1);
}

.achievers__track.is-dragging {
    transition: none;
}

.card-slide {
    flex: 0 0 auto;
    padding: 10px 8px 22px;
    width: 33.3333%;
    display: flex;
}

/* The slider now renders the exact same .pir-card markup as the filter
   grid, so it inherits all of that card's styling automatically. This
   just stretches the card to fill its slide, so every slide in a row
   is equal height (matching the old .a-card height:100% behaviour). */
.card-slide>.pir-card {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.achievers__dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.achievers__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.achievers__dot.is-active {
    background: var(--navy-900);
    transform: scale(1.3);
}

/* Slider Responsive */

@media (max-width: 900px) {
    .card-slide {
        width: 50%;
    }
}

@media (max-width: 620px) {
    .card-slide {
        width: 100%;
    }

    .achievers__title {
        font-size: 36px;
    }

    .achievers__nav.is-active {
        display: none;
    }

    .achievers__dots.is-active {
        display: flex;
    }

    .achievers__head {
        align-items: flex-start;
    }
}

.achievers__viewport {
    cursor: grab;
}

.achievers__track.is-dragging {
    cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
    .achievers__track {
        transition: none;
    }

    .achievers__navbtn {
        transition: none;
    }
}