.panti-reference {
        --ref-green: var(--pp-green);
        --ref-blue: var(--pp-light-green);
        --ref-beige: var(--pp-light-green);
        --ref-sage: var(--pp-light-green);
        --ref-terracotta: var(--pp-orange);
        --ref-ivory: var(--pp-cream);
        --ref-cream: var(--pp-cream);
        --ref-text: var(--pp-text);
        --ref-muted: var(--pp-text);
        background: var(--ref-ivory);
        color: var(--ref-text);
        min-height: 78vh;
        overflow: hidden;
        padding: 2.5rem 0 4rem;
    }

    .panti-reference a {
        text-decoration: none;
    }

    .panti-reference .reference-container {
        max-width: 1180px;
    }

    .panti-reference .reference-eyebrow {
        color: #f26322;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .panti-reference .reference-title {
        color: var(--ref-green);
        font-size: clamp(2rem, 3.3vw, 3.1rem);
        font-weight: 700;
        letter-spacing: -.045em;
        line-height: 1.15;
    }

    .panti-reference .reference-copy {
        color: var(--ref-muted);
        font-size: .93rem;
        line-height: 1.72;
    }

    .panti-reference .panti-intro {
        background: var(--ref-cream);
        border: 1px solid rgba(230, 239, 234, .28);
        border-radius: 0 0 1.25rem 1.25rem;
        margin-top: -2.5rem;
        padding: 1rem 0 2.5rem;
        position: relative;
    }

    .panti-reference .panti-intro::after {
        background: rgba(230, 239, 234, .17);
        border-radius: 50%;
        content: '';
        height: 270px;
        position: absolute;
        right: -120px;
        top: -120px;
        width: 270px;
    }

    .panti-reference .panti-intro-content {
        position: relative;
        z-index: 1;
    }

    .panti-reference .panti-search {
        background: #fffdf9;
        border: 1px solid rgba(230, 239, 234, .48);
        border-radius: .75rem;
        box-shadow: 0 12px 26px rgba(19, 76, 67, .08);
        overflow: hidden;
    }

    .panti-reference .panti-search .form-control {
        background: transparent;
        border: 0;
        box-shadow: none;
        color: var(--ref-text);
        font-size: .87rem;
        min-height: 50px;
    }

    .panti-reference .panti-search .form-control::placeholder {
        color: var(--ref-muted);
    }

    .panti-reference .panti-search .btn {
        background: #f26322;
        border: 0;
        border-radius: .55rem;
        color: #fff;
        margin: .3rem;
        min-width: 52px;
    }

    .panti-reference .panti-result {
        background: rgba(255, 253, 249, .68);
        border: 1px solid rgba(230, 239, 234, .28);
        border-radius: .75rem;
        color: var(--ref-muted);
        font-size: .86rem;
    }

    .panti-reference .panti-reset {
        color: #f26322;
        font-size: .8rem;
        font-weight: 700;
    }

    .panti-reference .panti-card {
        background: #fffdf9;
        border: 1px solid rgba(230, 239, 234, .3);
        border-radius: .9rem;
        box-shadow: 0 8px 22px rgba(19, 76, 67, .06);
        height: 100%;
        overflow: hidden;
        transition: box-shadow .2s ease, transform .2s ease;
    }

    .panti-reference .panti-card:hover {
        box-shadow: 0 15px 28px rgba(19, 76, 67, .14);
        transform: translateY(-5px);
    }

    .panti-reference .panti-card-image {
        height: 205px;
        object-fit: cover;
        width: 100%;
    }

    .panti-reference .panti-verified {
        background: rgba(19, 76, 67, .94);
        border-radius: .45rem;
        color: #fff;
        font-size: .69rem;
        font-weight: 700;
        letter-spacing: .01em;
        padding: .5rem .65rem;
    }

    .panti-reference .panti-card .card-body {
        padding: 1.35rem;
    }

    .panti-reference .panti-card h2 {
        color: var(--ref-green);
        font-size: 1.04rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .panti-reference .panti-location {
        color: var(--ref-muted);
        font-size: .79rem;
    }

    .panti-reference .panti-location i {
        color: var(--ref-terracotta);
    }

    .panti-reference .panti-count {
        background: rgba(230, 239, 234, .17);
        border-radius: 2rem;
        color: var(--ref-green);
        font-size: .73rem;
        font-weight: 700;
        padding: .43rem .7rem;
    }

    .panti-reference .panti-count i {
        color: #f26322;
    }

    .panti-reference .panti-link {
        background: var(--ref-green);
        border-radius: .6rem;
        color: #fff;
        display: block;
        font-size: .8rem;
        font-weight: 700;
        padding: .76rem 1rem;
        text-align: center;
        transition: background .2s ease, transform .2s ease;
    }

    .panti-reference .panti-link:hover {
        background: #134c43;
        color: #fff;
        transform: translateY(-1px);
    }

    .panti-reference .panti-empty {
        background: var(--ref-cream);
        border: 1px dashed rgba(230, 239, 234, .7);
        border-radius: 1rem;
        color: var(--ref-muted);
    }

    .panti-reference .panti-empty i {
        color: var(--ref-terracotta);
    }

    .panti-reference .page-link {
        background: #fffdf9;
        border: 1px solid rgba(230, 239, 234, .35);
        border-radius: .55rem;
        color: var(--ref-green);
        font-size: .8rem;
        margin: 0 .15rem;
    }

    .panti-reference .page-item.active .page-link {
        background: var(--ref-green);
        border-color: var(--ref-green);
        color: #fff;
    }

    .panti-reference .page-item.disabled .page-link {
        color: var(--ref-muted);
    }

    @media (max-width: 575.98px) {
        .panti-reference {
            padding-bottom: 3.5rem;
        }

        .panti-reference .panti-intro {
            padding: 1rem 0 2.1rem;
        }

        .panti-reference .reference-title {
            font-size: 2.15rem;
        }

        .panti-reference .reference-copy {
            font-size: .95rem;
        }

        .panti-reference .panti-card-image {
            height: 185px;
        }
    }