.mobile-drag-wrapper {
                width: 100%;
    background-color: #000000;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
        }

        .sitemap-container {
            display: flex;
    gap: 100px;
    padding: 20px 30px 50px 30px;
    box-sizing: border-box;
    width: 100%;
        }

        /* --- Column Setup --- */
        .col-custom {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        /* --- Mathematical Trunk Segments --- */
        .trunk-segment {
            position: absolute;
            top: 120px;
            height: 1px;
            background-color: #ffffff;
            z-index: 1;
        }

        .t-root { left: calc(50% + 55px); right: -100px; } 
        .t-mid  { left: 0; right: -100px; }
        .t-end  { left: 0; right: 50%; }

        .junction-dot {
            position: absolute;
            top: 118px;
            left: calc(50% - 2px);
            width: 4px;
            height: 4px;
            background-color: #ffffff;
            border-radius: 50%;
            z-index: 2;
        }

        /* --- Nodes Formatting --- */
        a.node, .node {
            height: 34px; 
            padding: 0 16px;
            font-size: 13px;
            font-weight: bold;
            border-radius: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 5;
            white-space: nowrap;
            box-sizing: border-box;
            text-decoration: none; /* Removes link underline */
            transition: opacity 0.2s ease-in-out;
        }

        a.node:hover {
            opacity: 0.85; /* Visual feedback for links */
            text-decoration: none;
        }

        /* Explicit !important added to ensure Bootstrap doesn't override text colors */
        .n-root { background-color: #3b1c81; color: #ffffff !important; width: 110px; }
        .n-l1   { background-color: #e14e23; color: #ffffff !important; min-width: 120px; }
        .n-l2   { background-color: #f49a02; color: #000000 !important; min-width: 100px; }
        .n-l3   { background-color: #572c8c; color: #ffffff !important; min-width: 140px; }

        /* Node Connective Dots */
        .node::after {
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: #ffffff;
            border-radius: 50%;
            z-index: 10;
        }
        .dot-top::after    { top: -2px; left: calc(50% - 2px); }
        .dot-left::after   { top: calc(50% - 2px); left: -2px; }
        .dot-bottom::after { bottom: -2px; left: calc(50% - 2px); }
        .dot-right::after  { top: calc(50% - 2px); right: -2px; }

        /* --- Headers & Vertical Connections --- */
        .header-wrap {
            margin-top: 150px; 
            position: relative;
            display: flex;
            justify-content: center;
        }
        .header-wrap::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            width: 1px;
            height: 30px;
            background-color: #ffffff;
        }

        .hc-header {
            margin-top: 103px; 
        }
        .hc-header::before { display: none; } 

        .header-wrap-upper {
            position: absolute;
            top: 56px; 
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .header-wrap-upper::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            width: 1px;
            height: 30px;
            background-color: #ffffff;
        }

        /* --- Vertical Trees --- */
        .tree-wrapper {
            position: relative;
            left: 50%; 
            width: max-content;
        }
        
        .tree-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 20px;
            background-color: #ffffff;
        }

        ul.tree {
            list-style: none;
            padding: 20px 0 0 0;
            margin: 0;
        }

        .tree-item {
            position: relative;
            padding-left: 25px;
            padding-bottom: 15px;
            border-left: 1px solid #ffffff; 
        }

        .tree-item:last-child {
            border-left: none; 
        }

        .tree-item:last-child::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 17px; 
            border-left: 1px solid #ffffff;
            border-bottom: 1px solid #ffffff;
        }

        .tree-item:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 17px; 
            left: 0;
            width: 25px;
            height: 1px;
            background-color: #ffffff;
        }

        /* --- Nested Sub-Trees --- */
        ul.sub-tree {
            padding-top: 12px;
            margin-left: 20px; 
            position: relative;
        }
        
        ul.sub-tree::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 12px; 
            background-color: #ffffff;
        }