.explore-image-col {
        grid-column: 1;
        grid-row: 1;
        overflow: hidden;
        background-color: #1a1a2e;
        padding: 0;
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .methodology-content {
        grid-column: 2;
        grid-row: 1;
    }

    .stacked-images {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100%;
        transition: transform 0.4s ease;
    }

    /* ─── Image Carousel Arrows ───
       Placed as their own grid items sharing column 1 with the image
       sidebar (not nested inside it), so their position: sticky range
       is bound by .explore-layout's full height — the whole scrollable
       area up to the footer — rather than the sidebar's own short,
       already-sticky box. That lets plain CSS sticky pin them to the
       viewport top/bottom for the whole scroll and release them right
       as the footer reaches, with no JS position math needed. */
    .image-carousel-btn {
        grid-column: 1;
        grid-row: 1;
        justify-self: stretch;
        position: sticky;
        width: 100%;
        height: 40px;
        border-radius: 0;
        border: none;
        background: rgba(0, 0, 0, 0.45);
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        opacity: 0.9;
        transition: opacity 0.2s ease, background 0.2s ease;
    }

    .image-carousel-btn svg {
        width: 32px;
        height: 14px;
    }

    .image-carousel-btn:hover:not(:disabled) {
        opacity: 1;
        background: rgba(0, 0, 0, 0.65);
    }

    .image-carousel-btn:disabled {
        opacity: 0.25;
        cursor: default;
    }

    .image-carousel-btn.up {
        top: 0;
        align-self: start;
    }

    .image-carousel-btn.down {
        bottom: 0;
        align-self: end;
    }

    /* ─── Image Wrapper with Tooltip ─── */
    .image-wrapper {
        position: relative;
        /* flex: 1; */
        height: 300px;
    }

    .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: brightness 0.3s ease;
    }

    .image-wrapper:hover img {
        filter: brightness(0.5);
    }

    .image-tooltip {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 14px 18px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
        color: #ffffff;
        font-family: "acumin-pro", sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: auto;
    }

    .image-wrapper:hover .image-tooltip {
        opacity: 1;
        transform: translateY(0);
    }

    .image-tooltip a {
        text-decoration: underline;
        color: #fff;
    }

    .image-tooltip a:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    .method-card-full::after {
        content: "";
        display: table;
        clear: both;
    }

    .method-card-full {
        text-align: left;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .method-card-link:hover {
        text-decoration: underline;
    }

    @media (max-width: 768px) {
        .image-tooltip {
            font-size: 12px;
            padding: 10px 14px;
        }
    }