/* Desktop: Vertical Timeline logic */
    @media (min-width: 992px) {
        .story-timeline-track {
            top: 750px !important;
            bottom: 0 !important;
            position: absolute !important;
        }
        #story-timeline-nav {
            position: sticky !important;
            top: 250px !important;
            transform: none !important;
        }
    }

    /* TIER 1: Primary Mobile Fix (Phones & Small Tablets) */
    @media (max-width: 991px) {
        /* Card padding */
        .consult-postDetail__main {
            padding: 1.5em !important;
        }
        /* Tab font & padding */
        #factTabs .nav-link {
            font-size: 0.78rem !important;
            padding: 0.25rem 0.6rem !important;
        }
        /* Social margin (Share unit) */
        .consult-postDetail__content .social-01 {
            margin-top: 1.25em !important;
            margin-bottom: 1.25em !important;
        }

        /* Mobile horizontal timeline specific structure */
        #story-timeline-nav-mobile {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 12px 0 4px;
        }
        .timeline-line-h {
            position: absolute;
            top: 50%;
            left: 7.14% !important;  /* Aligns exactly with the center of the first dot */
            right: 7.14% !important; /* Aligns exactly with the center of the last dot */
            height: 1px;
            background: rgba(0,0,0,0.1);
            transform: translateY(-50%);
            z-index: 0;
        }
        .timeline-dot-wrapper-h {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            cursor: pointer;
            z-index: 1;
            text-decoration: none;
        }
        .timeline-dot-wrapper-h .timeline-dot {
            width: 14px;
            height: 14px;
            background: #fff;
            border: 1px solid rgba(0,0,0,0.15);
            border-radius: 50%;
            transition: all 0.3s ease;
            margin-bottom: 4px;
        }
        .timeline-dot-wrapper-h.active .timeline-dot {
            background: linear-gradient(to right, rgba(66,144,188,0.5) 50%, rgba(35,99,125,0.6) 50%);
            border-color: transparent;
        }
        .timeline-label-h {
            font-size: 9px;
            color: #9d9d9d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 56px;
            text-align: center;
            line-height: 1.2;
        }
        .timeline-dot-wrapper-h.active .timeline-label-h {
            color: #2b7aa0;
            font-weight: 600;
        }
    }

    /* TIER 2: Secondary Tighten (Very Small Phones like 389px) */
    @media (max-width: 468px) {
        /* Card padding */
        .consult-postDetail__main {
            padding: 1.1em !important;
        }
        /* Tab font & padding */
        #factTabs .nav-link {
            font-size: 0.68rem !important;
            padding: 0.2rem 0.45rem !important;
        }
        /* Social margin (Share unit) */
        .consult-postDetail__content .social-01 {
            margin-top: 0.75em !important;
            margin-bottom: 0.75em !important;
        }
        /* Tighten horizontal timeline for tiny screens */
        .timeline-label-h {
            max-width: 45px;
            font-size: 8px;
        }
    }

    /* DYNAMIC UI FIX: Guarantees the timeline hover tooltips render on top of the content card */
.timeline-label {
    z-index: 10 !important;
}