/* Speaker Slider Section */
        .speaker_slider_section {
            padding: 80px 0;
            background: url('https://educationsummit.com/images/eduction_hub_bg.webp') center/cover no-repeat fixed;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .speaker_slider_section h2 {
            text-align: center;
            margin-bottom: 40px;
            color: #fff;
        }
        .speakerSwiper {
            padding-bottom: 50px;
            position: relative;
            z-index: 1;
        }
        .speakerSwiper .swiper-button-next,
        .speakerSwiper .swiper-button-prev {
            display: none;
        }
        .speakerSwiper .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.5);
        }
        .speakerSwiper .swiper-pagination-bullet-active {
            background: #fff;
        }
        .speakerSwiper .speaker20 {
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            box-shadow: none;
        }
        .speakerSwiper .speaker20 h4 {
            color: #fff;
        }
        .speakerSwiper .speaker20 p {
            color: rgba(255, 255, 255, 0.8);
        }
        .speaker_slider_section .top_btn {
            position: relative;
            z-index: 1;
        }

        .upcoming_row {
            display: flex;
            height: 100vh;
        }

        .upcoming_main {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: flex 0.6s ease, filter 0.6s ease;
            overflow: hidden;
            z-index: 1;
        }

        .upcoming_main::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.50);
            z-index: -1;
            transition: background 0.6s ease;
        }

        /* Image above overlay */
        .upcoming_main img {
            width: 400px;
            z-index: 2;
            transition: transform 0.6s ease;
        }

        .upcoming_row:hover .upcoming_main {
            flex: 0.8;
            filter: grayscale(70%);
        }

        .upcoming_row .upcoming_main:hover {
            flex: 1.6;
            filter: grayscale(0);
        }

        .upcoming_row .upcoming_main:hover::before {
            background: rgba(0, 0, 0, 0.3);
        }

        .upcoming_row .upcoming_main:hover img {
            transform: scale(1.05);
        }

        .india {
            background: url('./images/india-2.jpeg') center/cover no-repeat;
        }

        .dubai {
            background: url('./images/dubai-gate.jpg') center/cover no-repeat;
        }

        .los {
            background: url('./images/los-2.webp') center/cover no-repeat;
        }

        .cs_site_header {
            position: relative !important;
            background: #000;
        }

        @media screen and (max-width: 992px) {
            .upcoming_row {
                flex-direction: column;
            }

            .portal-btn {
                position: relative;
                width: fit-content;
                padding: 0px 20px !important;
                height: 56px !important;
                border-radius: 16px;
                background: #020617;
                color: #fff;
                font-size: 14px !important;
                font-weight: 600;
                border: none;
                cursor: pointer;
                overflow: hidden;
                box-shadow: 0 0 50px rgb(139 92 246 / 28%);
                font-family: 'Inter';
            }

            .upcoming_main img {
                width: 200px;
            }

            .upcoming_inner {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }

        .secure_btn {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .portal-btn {
            position: relative;
            width: fit-content;
            padding: 5px 20px;
            height: 64px;
            border-radius: 16px;
            background: #020617;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 0 50px rgb(139 92 246 / 28%);
        }

        /* portal ring */
        .portal-btn::before {
            content: "";
            position: absolute;
            inset: -60%;
            background:
                conic-gradient(from 0deg,
                    transparent,
                    #8b5cf6,
                    #22d3ee,
                    transparent);
            animation: spin 3s linear infinite;
        }

        /* glass overlay */
        .portal-btn::after {
            content: "";
            position: absolute;
            inset: 3px;
            border-radius: 14px;
            background: #020617;
        }

        /* text */
        .portal-btn span {
            position: relative;
            z-index: 2;
        }

        /* click collapse */
        .portal-btn:active::before {
            animation-duration: .3s;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(360deg)
            }
        }

        .edition_logo_top {
            display: block;
            margin: 0 auto 18px;
            max-width: 180px;
            height: auto;
        }

        .banner_btn {
            --green: #e3e3e3 !important;
            font-size: 18px;
            padding: 0.4em 1.5em;
            letter-spacing: 0.06em;
            position: relative;
            font-family: inherit;
            border-radius: 0.6em;
            font-family: "Urbanist", sans-serif;
            overflow: hidden;
            transition: all 0.3s;
            line-height: 1.4em;
            border: 2px solid var(--green);
            background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%, transparent 60%, rgba(27, 253, 156, 0.1) 100%);
            color: var(--green);
            font-weight: 600;
        }

        .banner_btn:hover {
            color: #c1213e;
            box-shadow: inset 0 0 10px #c1213e,
                0 0 9px 3px rgba(27, 253, 156, 0.2);
        }

        .banner_btn::before {
            content: "";
            position: absolute;
            left: -4em;
            width: 4em;
            height: 100%;
            top: 0;
            transition: transform 0.4s ease-in-out;
            background: linear-gradient(to right,
                    transparent 1%,
                    rgba(27, 253, 156, 0.1) 40%,
                    rgba(27, 253, 156, 0.1) 60%,
                    transparent 100%);
        }

        .banner_btn:hover::before {
            transform: translateX(15em);
        }


        .wrpabout {
            padding: 20px;
        }

        /* SIDEBAR BUTTON */
        .button_side {
            padding: 1em 2em;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            letter-spacing: normal;
            text-transform: uppercase;
            cursor: pointer;
            color: #c1213e;
            transition: all 1000ms;
            font-size: 15px;
            position: relative;
            overflow: hidden;
            outline: 2px solid #c1213e;
            position: fixed;
            z-index: 11111111;
            transform: rotate(90deg);
            top: 60%;
            left: -41px;
            right: auto;
        }

        .button_side:hover {
            color: #ffffff;
            outline: 2px solid #c1213e;
            box-shadow: 4px 5px 17px -4px #c1213e;
        }

        .button_side::before {
            content: "";
            position: absolute;
            left: -50px;
            top: 0;
            width: 0;
            height: 100%;
            background-color: #c1213e;
            z-index: -1;
            transition: width 1000ms;
        }

        .button_side:hover::before {
            width: 250%;
        }



  /* SIDEBAR BUTTON */
        .awardee_btn {
            padding: 1em 2em;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            letter-spacing: normal;
            text-transform: uppercase;
            cursor: pointer;
            color: #c1213e;
            transition: all 1000ms;
            font-size: 15px;
            position: relative;
            overflow: hidden;
            outline: 2px solid #c1213e;
            position: fixed;
            z-index: 11111111;
            transform: rotate(90deg);
            top: 40%;
            left: -41px;
            right: auto;
        }

        .awardee_btn:hover {
            color: #ffffff;
            outline: 2px solid #c1213e;
            box-shadow: 4px 5px 17px -4px #c1213e;
        }

        .awardee_btn::before {
            content: "";
            position: absolute;
            left: -50px;
            top: 0;
            width: 0;
            height: 100%;
            background-color: #c1213e;
            z-index: -1;
            transition: width 1000ms;
        }

        .awardee_btn:hover::before {
            width: 250%;
        }




        .spin_gif {
            width: 63px;
            cursor: pointer;
            overflow: hidden;
            position: fixed;
            z-index: 11111111;
            transform: rotate(90deg);
            top: 40%;
            left: -15px;
            right: auto;
        }


        /* END HERE */

        /* === GLOBAL FONT: URBANIST EVERYWHERE === */
        html, body, body * {
            font-family: "Urbanist", sans-serif !important;
        }

        /* Preserve icon fonts so glyphs render correctly */
        i, .fa, .fas, .far, .fal, .fab, .fa-solid, .fa-brands, .fa-regular, .fa-light,
        [class^="fa-"], [class*=" fa-"] {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
        }
        .fab, .fa-brands, [class^="fa-brands"], [class*=" fa-brands"] {
            font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
        }
        [class*="icofont-"], .icofont {
            font-family: "IcoFont" !important;
        }
        [class^="flaticon-"], [class*=" flaticon-"] {
            font-family: "Flaticon" !important;
        }
        .material-icons, .material-symbols-outlined, .material-symbols-rounded {
            font-family: "Material Icons", "Material Symbols Outlined", "Material Symbols Rounded" !important;
        }

        /* === ABOUT > 35 EDITIONS LEGACY BLOCK (clean light) === */
        .legacy_row { margin-top: 0; }

        .legacy_block {
            position: relative;
            padding: 12px 4px;
            background: transparent;
            color: #1a1a1a;
        }

        /* Hide all decorative layers */
        .legacy_orb,
        .legacy_grid,
        .legacy_corner { display: none !important; }

        /* Top stat strip */
        .legacy_top {
            display: flex;
            align-items: center;
            gap: 22px;
            margin-bottom: 24px;
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }

        .legacy_stat {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1;
            position: relative;
        }
        .legacy_stat_num {
            font-family: "Orbitron", "Urbanist", sans-serif;
            font-weight: 900;
            font-size: 72px;
            line-height: 1;
            background: linear-gradient(135deg, #ff5e87 0%, #c1213e 50%, #7d0c24 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -2px;
        }
        .legacy_stat_label {
            font-family: "Urbanist", sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 4px;
            color: #888;
            margin-top: 6px;
        }

        .legacy_meta {
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-left: 1px solid rgba(0, 0, 0, 0.1);
            padding-left: 22px;
        }
        .legacy_meta_item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: "Urbanist", sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 2.4px;
            color: #555;
            text-transform: uppercase;
        }
        .legacy_meta_item i {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
            animation: legacy_dot_pulse 2.4s ease-in-out infinite;
        }
        .legacy_meta_item:nth-child(2) i { animation-delay: 0.4s; }
        .legacy_meta_item:nth-child(3) i { animation-delay: 0.8s; }

        @keyframes legacy_dot_pulse {
            0%, 100% { transform: scale(1);   opacity: 1; }
            50%      { transform: scale(1.6); opacity: 0.6; }
        }

        /* Title */
        .legacy_title {
            font-family: "Urbanist", sans-serif;
            font-weight: 800;
            font-size: 34px;
            line-height: 1.15;
            margin-bottom: 24px;
            letter-spacing: -0.5px;
            color: #1a1a1a;
        }
        .legacy_title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
        .legacy_title_main { color: #1a1a1a; }
        .legacy_title_sub {
            background: linear-gradient(90deg, #ff5e87 0%, #c1213e 50%, #7d0c24 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: legacy_title_gradient 6s ease-in-out infinite;
        }
        .legacy_title_underline {
            flex-basis: 100%;
            width: 56px;
            height: 3px;
            margin-top: 6px;
            border-radius: 3px;
            background: linear-gradient(90deg, #ff5e87, #c1213e, #7d0c24);
            position: relative;
            overflow: hidden;
        }
        .legacy_title_underline::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
            transform: translateX(-100%);
            animation: legacy_underline_shine 3.5s ease-in-out infinite;
        }

        @keyframes legacy_title_gradient {
            0%, 100% { background-position: 0% 0; }
            50%      { background-position: 100% 0; }
        }
        @keyframes legacy_underline_shine {
            0%   { transform: translateX(-100%); }
            60%  { transform: translateX(220%); }
            100% { transform: translateX(220%); }
        }

        /* Content */
        .legacy_content { position: relative; }

        .legacy_para {
               font-family: "Urbanist", sans-serif !important;
    font-size: 16px;
    line-height: 1.5;
    color: #000000 !important;
    margin-bottom: 14px;
    transition: color 0.3s ease, transform 0.3s ease;
    font-weight: 600;
        }
        .legacy_para:hover {
            color: #000;
            transform: translateX(4px);
        }

        /* Lead pulled-quote — minimal, just text + accent bar */
        .legacy_lead {
            position: relative;
            margin: 20px 0;
            padding: 6px 0 6px 18px;
            border-left: 3px solid;
            border-image: linear-gradient(180deg, #ff5e87, #c1213e, #7d0c24) 1;
            font-family: "Urbanist", sans-serif;
            font-size: 19px;
            font-weight: 700;
            font-style: italic;
            color: #c1213e;
            line-height: 1.45;
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            backdrop-filter: none;
        }
        .legacy_lead_mark { display: none; }

        /* Outro */
        .legacy_outro {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px dashed rgba(0, 0, 0, 0.15);
        }
        .legacy_outro p {
            font-family: "Urbanist", sans-serif;
            font-size: 15.5px;
            line-height: 1.65;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 6px;
        }
        .legacy_outro .legacy_outro_highlight {
            font-size: 16px;
            font-weight: 800;
            background: linear-gradient(90deg, #ff5e87 0%, #c1213e 50%, #7d0c24 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: legacy_title_gradient 5s ease-in-out infinite;
            display: inline-block;
        }
        .legacy_arrow {
            display: inline-block;
            margin-left: 6px;
            color: #c1213e;
            -webkit-text-fill-color: #c1213e;
            font-weight: 800;
            animation: legacy_arrow_bounce 1.6s ease-in-out infinite;
        }

        @keyframes legacy_arrow_bounce {
            0%, 100% { transform: translateX(0); }
            50%      { transform: translateX(8px); }
        }

        /* Dubai + Los Angeles small chips */
        .legacy_cities {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 16px;
        }
        .legacy_city {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 14px 6px 6px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid rgba(193, 33, 62, 0.18);
            box-shadow: 0 4px 14px -8px rgba(193, 33, 62, 0.35);
            cursor: pointer;
            transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        }
        .legacy_city:hover {
            transform: translateY(-2px);
            border-color: rgba(193, 33, 62, 0.5);
            box-shadow: 0 8px 20px -8px rgba(193, 33, 62, 0.5);
        }
        .legacy_city img {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            transition: transform 0.5s ease;
        }
        .legacy_city.dubai img { object-position: center 30%; }
        .legacy_city.la img    { object-position: center 50%; }
        .legacy_city:hover img { transform: scale(1.06); }

        .legacy_city_overlay {
            display: inline-flex;
            flex-direction: column;
            line-height: 1.05;
        }
        .legacy_city_name {
            font-family: "Urbanist", sans-serif;
            font-weight: 800;
            font-size: 14px;
            color: #1a1a1a;
        }
        .legacy_city_year {
            font-family: "Urbanist", sans-serif;
            font-weight: 700;
            font-size: 10px;
            letter-spacing: 2px;
            background: linear-gradient(90deg, #ff5e87 0%, #c1213e 50%, #7d0c24 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-top: 3px;
            text-transform: uppercase;
        }

        @media (max-width: 575px) {
            .legacy_cities {
                flex-direction: row;
                justify-content: flex-start;
            }
            .legacy_city img { width: 32px; height: 32px; }
            .legacy_city_name { font-size: 13px; }
        }

        /* === LEGACY CHART — dark globe section === */
        section.legacy_chart.legacy_globe_section {
            padding: 100px 0 110px;
            background:
                radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.18) 0%, transparent 40%),
                radial-gradient(circle at 82% 78%, rgba(125, 12, 36, 0.20) 0%, transparent 42%),
                linear-gradient(135deg, #0a0510 0%, #14081e 55%, #0a050f 100%);
            position: relative;
            overflow: hidden;
            color: #f0eef5;
        }

        .legacy_globe_section .legacy_chart_eyebrow {
            background: rgba(193, 33, 62, 0.18);
            color: #ffb6c5;
            border-color: rgba(193, 33, 62, 0.35);
        }
        .legacy_globe_section .legacy_chart_title { color: #ffffff; }
        .legacy_globe_section .legacy_chart_lead { color: rgba(240, 238, 245, 0.72); }

        .legacy_globe_section .legacy_chart_stat {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
        }
        .legacy_globe_section .legacy_chart_stat:hover {
            border-color: rgba(193, 33, 62, 0.5);
            box-shadow: 0 18px 36px -16px rgba(193, 33, 62, 0.5);
        }
        .legacy_globe_section .legacy_chart_stat span { color: rgba(255,255,255,0.55); }

        .globe_orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            pointer-events: none;
            z-index: 0;
            opacity: 0.5;
        }
        .globe_orb_1 {
            width: 380px; height: 380px;
            top: -120px; left: -120px;
            background: radial-gradient(circle, #c1213e 0%, transparent 70%);
            animation: legacy_orb_float 12s ease-in-out infinite;
        }
        .globe_orb_2 {
            width: 460px; height: 460px;
            bottom: -180px; right: -180px;
            background: radial-gradient(circle, #7d0c24 0%, transparent 70%);
            animation: legacy_orb_float 14s ease-in-out infinite reverse;
        }
        .globe_grid_overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background-image:
                linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 80px 80px;
            -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
                    mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
        }

        .globe_layout {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 280px;
            gap: 32px;
            align-items: stretch;
            margin-bottom: 70px;
        }

        .globe_map {
            position: relative;
            border-radius: 24px;
            background:
                radial-gradient(ellipse at center, rgba(193, 33, 62, 0.06) 0%, transparent 70%),
                rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            overflow: hidden;
            padding: 18px;
        }

        .globe_svg { width: 100%; height: auto; display: block; }

        .globe_continents path {
            transition: fill 0.4s ease, stroke 0.4s ease;
        }
        .globe_continents:hover path { fill: rgba(255,255,255,0.10); }

        /* Real world map image — invert to white-on-dark + red tint */
        .globe_world_image {
            filter:
                invert(1)
                brightness(0.85)
                sepia(0.6)
                hue-rotate(310deg)
                saturate(1.6)
                contrast(0.95);
            opacity: 0.55;
            mix-blend-mode: screen;
        }

        .globe_marker { cursor: pointer; }
        .globe_marker .dot {
            fill: #ff5e87;
            filter: drop-shadow(0 0 8px rgba(193, 33, 62, 0.9));
        }
        .globe_marker .halo {
            fill: rgba(193, 33, 62, 0.35);
            transform-origin: center;
            transform-box: fill-box;
            animation: globe_halo_pulse 2.4s ease-out infinite;
        }
        .globe_marker .ring {
            fill: none;
            stroke: rgba(255, 94, 135, 0.7);
            stroke-width: 1.4;
            transform-origin: center;
            transform-box: fill-box;
            animation: globe_halo_pulse 2.4s ease-out infinite;
            animation-delay: 0.4s;
        }
        .globe_marker .label {
            fill: rgba(255, 255, 255, 0.85);
            font-family: "Urbanist", sans-serif;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-anchor: middle;
            opacity: 0.85;
            transition: opacity 0.3s ease, fill 0.3s ease;
            paint-order: stroke;
            stroke: rgba(0, 0, 0, 0.45);
            stroke-width: 3px;
            stroke-linejoin: round;
        }
        .globe_marker:hover .label { opacity: 1; fill: #ffb6c5; }

        .globe_marker.is_hub .dot,
        .globe_marker.is_active .dot {
            fill: #c1213e;
            filter: drop-shadow(0 0 14px rgba(193, 33, 62, 1));
        }
        .globe_marker.is_active .halo {
            fill: rgba(193, 33, 62, 0.55);
            animation-duration: 1.6s;
        }

        @keyframes globe_halo_pulse {
            0%   { transform: scale(0.6);  opacity: 0.85; }
            70%  { transform: scale(2.4);  opacity: 0; }
            100% { transform: scale(2.4);  opacity: 0; }
        }

        .globe_connections path {
            stroke-dasharray: 3 4;
            animation: globe_dash_flow 8s linear infinite;
        }
        @keyframes globe_dash_flow {
            from { stroke-dashoffset: 0; }
            to   { stroke-dashoffset: -56; }
        }

        /* Side legend */
        .globe_legend {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 24px 22px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
        }
        .globe_legend h3 {
            font-family: "Urbanist", sans-serif;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.55);
            margin: 0 0 16px;
        }
        .globe_legend ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .globe_legend li {
            display: grid;
            grid-template-columns: 18px 1fr auto;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
            color: #ffffff;
            font-family: "Urbanist", sans-serif;
        }
        .globe_legend li:hover {
            background: rgba(193, 33, 62, 0.10);
            border-color: rgba(193, 33, 62, 0.4);
            transform: translateX(3px);
        }
        .globe_legend li strong {
            font-weight: 700;
            font-size: 14px;
            color: #ffffff;
        }
        .globe_legend .legend_count {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, 0.55);
        }
        .legend_dot {
            display: inline-block;
            width: 10px; height: 10px;
            border-radius: 50%;
            background: #ff5e87;
            box-shadow: 0 0 10px rgba(193, 33, 62, 0.7);
        }
        .legend_dot.active { background: #c1213e; box-shadow: 0 0 14px rgba(193, 33, 62, 1); animation: globe_legend_pulse 1.8s ease-in-out infinite; }
        .legend_dot.hub    { background: #ff7b9b; box-shadow: 0 0 14px rgba(255, 123, 155, 0.9); }

        @keyframes globe_legend_pulse {
            0%, 100% { transform: scale(1);   }
            50%      { transform: scale(1.35); }
        }

        .globe_legend_footer {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px dashed rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: "Urbanist", sans-serif;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            font-style: italic;
        }
        .globe_legend_footer em {
            background: linear-gradient(90deg, #ff7b9b, #c1213e);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 700;
        }

        /* Dark variant for the year-grouped chart underneath */
        .legacy_globe_section .legacy_chart_timeline { padding-top: 10px; }
        .legacy_globe_section .legacy_year_row { border-bottom-color: rgba(255, 255, 255, 0.08); }
        .legacy_globe_section .legacy_year_row:hover {
            background: linear-gradient(90deg, transparent 0%, rgba(193, 33, 62, 0.06) 50%, transparent 100%);
        }
        .legacy_globe_section .legacy_year { color: #ffffff; }
        .legacy_globe_section .legacy_edition {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
        }
        .legacy_globe_section .legacy_edition_city { color: rgba(255,255,255,0.92); }
        .legacy_globe_section .legacy_edition.is_origin {
            background: rgba(193, 33, 62, 0.10);
            border-color: rgba(193, 33, 62, 0.35);
        }
        .legacy_globe_section .legacy_edition:hover {
            background: rgba(193, 33, 62, 0.14);
            border-color: rgba(193, 33, 62, 0.6);
            box-shadow: 0 14px 28px -14px rgba(193, 33, 62, 0.6);
        }

        @media (max-width: 991px) {
            .globe_layout { grid-template-columns: 1fr; gap: 22px; }
            .globe_legend { order: 2; }
            .globe_marker .label { font-size: 12px; }
        }
        @media (max-width: 575px) {
            section.legacy_chart.legacy_globe_section { padding: 60px 0 70px; }
            .globe_legend { padding: 18px 16px; }
            .globe_marker .label { font-size: 14px; }
        }

        /* Light theme variant for the original section base styles still applies (kept) */
        section.legacy_chart {
            padding: 90px 0 110px;
            background:
                radial-gradient(circle at 8% 12%, rgba(193, 33, 62, 0.06) 0%, transparent 32%),
                radial-gradient(circle at 92% 92%, rgba(125, 12, 36, 0.06) 0%, transparent 36%),
                #fafafa;
            position: relative;
            overflow: hidden;
        }

        .legacy_chart_header {
            text-align: center;
            margin-bottom: 32px;
        }
        .legacy_chart_eyebrow {
            display: inline-block;
            padding: 7px 18px;
            border-radius: 999px;
            background: rgba(193, 33, 62, 0.08);
            color: #c1213e;
            font-family: "Urbanist", sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 3px;
            margin-bottom: 16px;
            border: 1px solid rgba(193, 33, 62, 0.16);
        }
        .legacy_chart_title {
            font-family: "Urbanist", sans-serif;
            font-weight: 800;
            font-size: 46px;
            line-height: 1.1;
            color: #0d0d0d;
            margin-bottom: 14px;
            letter-spacing: -0.8px;
        }
        .legacy_chart_title span {
            background: linear-gradient(90deg, #ff5e87 0%, #c1213e 50%, #7d0c24 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: legacy_title_gradient 6s ease-in-out infinite;
        }
        .legacy_chart_lead {
            max-width: 640px;
            margin: 0 auto;
            color: #555;
            font-size: 16px;
            line-height: 1.6;
        }

        .legacy_chart_stats {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 14px;
            margin: 30px 0 70px;
        }
        .legacy_chart_stat {
            min-width: 140px;
            padding: 22px 24px;
            border-radius: 18px;
            background: #ffffff;
            border: 1px solid #f0e0e4;
            text-align: center;
            transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .legacy_chart_stat::before {
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #ff5e87, #c1213e, #7d0c24);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .legacy_chart_stat:hover {
            transform: translateY(-4px);
            border-color: rgba(193, 33, 62, 0.4);
            box-shadow: 0 18px 36px -16px rgba(193, 33, 62, 0.35);
        }
        .legacy_chart_stat:hover::before { transform: scaleX(1); }
        .legacy_chart_stat strong {
            display: block;
            font-family: "Urbanist", sans-serif;
            font-weight: 900;
            font-size: 42px;
            line-height: 1;
            background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -1px;
        }
        .legacy_chart_stat span {
            display: block;
            margin-top: 6px;
            font-family: "Urbanist", sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 2.4px;
            color: #999;
            text-transform: uppercase;
        }

        /* Timeline as year-grouped rows */
        .legacy_chart_timeline {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .legacy_year_row {
            display: grid;
            grid-template-columns: 130px 1fr;
            align-items: center;
            gap: 28px;
            padding: 22px 6px;
            border-bottom: 1px solid rgba(193, 33, 62, 0.08);
            position: relative;
            transition: background 0.4s ease;
        }
        .legacy_year_row:last-child { border-bottom: 0; }
        .legacy_year_row:hover {
            background: linear-gradient(90deg, transparent 0%, rgba(193, 33, 62, 0.03) 50%, transparent 100%);
        }

        /* Big year number on the left */
        .legacy_year {
            font-family: "Urbanist", sans-serif;
            font-weight: 900;
            font-size: 56px;
            line-height: 1;
            color: #0d0d0d;
            letter-spacing: -2px;
            position: relative;
            transition: transform 0.4s ease;
        }
        .legacy_year span { display: inline-block; }
        .legacy_year::after {
            content: "";
            display: block;
            width: 28px;
            height: 3px;
            margin-top: 8px;
            background: linear-gradient(90deg, #ff5e87, #c1213e);
            border-radius: 3px;
            transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .legacy_year_row:hover .legacy_year::after { width: 60px; }

        .legacy_year.is_origin {
            background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .legacy_year.is_origin::after {
            background: linear-gradient(90deg, #ff5e87, #c1213e, #7d0c24);
            width: 60px;
        }

        /* Edition cards */
        .legacy_editions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .legacy_edition {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-radius: 12px;
            background: #ffffff;
            border: 1px solid rgba(193, 33, 62, 0.10);
            font-family: "Urbanist", sans-serif;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.4s ease,
                        border-color 0.4s ease,
                        background 0.4s ease;
            cursor: default;
            position: relative;
            isolation: isolate;
        }
        .legacy_edition::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255, 94, 135, 0.12) 0%, rgba(193, 33, 62, 0.08) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }
        .legacy_edition:hover {
            transform: translateY(-3px);
            border-color: rgba(193, 33, 62, 0.5);
            box-shadow: 0 14px 28px -14px rgba(193, 33, 62, 0.5);
        }
        .legacy_edition:hover::before { opacity: 1; }

        .legacy_edition_num {
            font-weight: 800;
            font-size: 15px;
            background: linear-gradient(135deg, #ff5e87, #c1213e);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 0.2px;
        }
        .legacy_edition_num sup {
            font-size: 10px;
            font-weight: 700;
            margin-left: 1px;
        }
        .legacy_edition_city {
            font-weight: 600;
            font-size: 14px;
            color: #1a1a1a;
        }
        .legacy_edition_tag {
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            padding: 3px 9px;
            border-radius: 999px;
            background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
            color: #ffffff;
            margin-left: 4px;
        }

        /* Upcoming = filled red gradient + pulse halo */
        .legacy_edition.is_upcoming {
            background: linear-gradient(135deg, #ff5e87 0%, #c1213e 60%, #7d0c24 100%);
            border-color: transparent;
            box-shadow: 0 14px 32px -10px rgba(193, 33, 62, 0.6);
            position: relative;
            overflow: visible;
        }
        .legacy_edition.is_upcoming::after {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 16px;
            border: 2px solid rgba(193, 33, 62, 0.5);
            animation: legacy_pulse_ring 2s ease-out infinite;
            pointer-events: none;
        }
        .legacy_edition.is_upcoming::before { display: none; }
        .legacy_edition.is_upcoming .legacy_edition_num {
            background: #ffffff;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .legacy_edition.is_upcoming .legacy_edition_city { color: #ffffff; }
        .legacy_edition.is_upcoming .legacy_edition_tag {
            background: rgba(255, 255, 255, 0.22);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .legacy_edition.is_origin {
            background: #fff7f9;
            border-color: rgba(193, 33, 62, 0.35);
        }
        .legacy_edition.is_origin .legacy_edition_tag {
            background: linear-gradient(135deg, #ff5e87, #c1213e);
        }

        @keyframes legacy_pulse_ring {
            0%   { transform: scale(1);    opacity: 0.7; }
            100% { transform: scale(1.18); opacity: 0; }
        }

        @media (max-width: 991px) {
            section.legacy_chart { padding: 70px 0 90px; }
            .legacy_chart_title { font-size: 36px; }
            .legacy_year_row { grid-template-columns: 90px 1fr; gap: 20px; padding: 18px 4px; }
            .legacy_year { font-size: 42px; }
        }
        @media (max-width: 575px) {
            section.legacy_chart { padding: 56px 0 70px; }
            .legacy_chart_title { font-size: 28px; }
            .legacy_chart_stat { min-width: 116px; padding: 16px 18px; }
            .legacy_chart_stat strong { font-size: 32px; }
            .legacy_year_row { grid-template-columns: 70px 1fr; gap: 14px; padding: 16px 2px; }
            .legacy_year { font-size: 32px; }
            .legacy_year::after { width: 22px; height: 2px; margin-top: 6px; }
            .legacy_edition { padding: 8px 12px; }
            .legacy_edition_num { font-size: 13.5px; }
            .legacy_edition_city { font-size: 13px; }
        }

        @media (max-width: 1199px) {
            .legacy_stat_num { font-size: 60px; }
            .legacy_title { font-size: 28px; }
        }
        @media (max-width: 991px) {
            .legacy_top { flex-wrap: wrap; gap: 14px; }
            .legacy_meta { padding-left: 0; border-left: 0; }
            .legacy_stat_num { font-size: 54px; }
            .legacy_title { font-size: 24px; }
            .legacy_lead { font-size: 17px; }
        }
        @media (max-width: 575px) {
            .legacy_stat_num { font-size: 46px; }
            .legacy_title { font-size: 22px; }
            .legacy_para { font-size: 14.5px; }
            .legacy_lead { font-size: 16px; }
        }

        /* === GLASSMORPHISM HEADER FIXED, FULL-WIDTH FROM TOP === */
        .cs_site_header {
            padding: 0 !important;
            position: fixed !important;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 101;
            background: transparent !important;
            background-color: transparent !important;
        }
        section#mainbanner {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
        #scrollsmoother-container {
            margin-top: 0;
            padding-top: 0;
        }
        .cs_site_header .cs_main_header,
        .cs_site_header.cs_style1 .cs_main_header {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
            background-color: transparent !important;
            backdrop-filter: blur(12px) saturate(150%);
            -webkit-backdrop-filter: blur(12px) saturate(150%);
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 0;
            box-shadow:
                0 6px 24px -14px rgba(0, 0, 0, 0.45),
                inset 0 -1px 0 rgba(255, 255, 255, 0.05);
            position: relative;
            overflow: hidden;
            transition:
                background 0.4s ease,
                background-color 0.4s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease;
        }

        /* When scrolled past the hero — solid dark glass so white logo/buttons stay readable on light sections */
        .cs_site_header.is_scrolled .cs_main_header,
        .cs_site_header.cs_style1.is_scrolled .cs_main_header {
            background: linear-gradient(180deg, rgba(10, 5, 12, 0.92) 0%, rgba(10, 5, 12, 0.86) 100%) !important;
            backdrop-filter: blur(16px) saturate(160%);
            -webkit-backdrop-filter: blur(16px) saturate(160%);
            border-bottom-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
        }
        .cs_site_header .container-fluid,
        .cs_site_header.cs_style1 .cs_main_header_in {
            background: transparent !important;
            background-color: transparent !important;
        }

        .cs_site_header .cs_main_header::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                115deg,
                transparent 0%,
                transparent 40%,
                rgba(255, 255, 255, 0.06) 50%,
                transparent 60%,
                transparent 100%
            );
            background-size: 220% 100%;
            animation: header_glass_shimmer 9s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes header_glass_shimmer {
            0%   { background-position: 120% 0; }
            100% { background-position: -20% 0; }
        }

        @media (max-width: 991px) {
            .cs_site_header { padding: 10px 10px 0; }
            .cs_site_header .cs_main_header { border-radius: 14px; }
        }

        /* === HEADER ACTION BUTTONS === */
        .top_actions {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: auto;
            justify-content: flex-end;
        }

        .top_btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 22px;
            font-family: "Urbanist", sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            border-radius: 999px;
            text-decoration: none;
            transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
            line-height: 1;
            white-space: nowrap;
        }

        .top_btn_solid {
            background: #c1213e;
            color: #fff;
            border: 2px solid #c1213e;
            box-shadow: 0 6px 18px -8px rgba(193, 33, 62, 0.6);
        }
        .top_btn_solid:hover {
            background: #9c0d29;
            border-color: #9c0d29;
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 22px -8px rgba(193, 33, 62, 0.85);
        }

        .top_btn_outline {
            background: #fff;
            color: #c1213e;
            border: 2px solid #fff;
        }
        .top_btn_outline:hover {
            background: #c1213e;
            color: #fff;
            border-color: #c1213e;
            transform: translateY(-2px);
        }

        /* === ANIMATED 9-DOT MENU ICON === */
        .mega_menu_toggle {
            background: transparent;
            border: 0;
            padding: 0;
            margin-left: 8px;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            place-items: center;
            gap: 4px;
            padding: 10px;
            cursor: pointer;
            position: relative;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease;
        }
        .mega_menu_toggle::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 12px;
            border: 1.5px solid rgba(193, 33, 62, 0);
            transition: border-color 0.4s ease, transform 0.5s ease;
            pointer-events: none;
        }
        .mega_menu_toggle:hover {
            transform: rotate(45deg);
            background: rgba(193, 33, 62, 0.08);
        }
        .mega_menu_toggle:hover::before {
            border-color: rgba(193, 33, 62, 0.7);
        }

        .mega_menu_toggle .mm_dot {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #ffffff;
            transform-origin: center;
            animation: mm_dot_wave 2.4s ease-in-out infinite;
        }

        /* Diagonal wave: top-left → bottom-right (delays in 0.1s steps) */
        .mega_menu_toggle .mm_dot:nth-child(1) { animation-delay: 0.0s; }
        .mega_menu_toggle .mm_dot:nth-child(2) { animation-delay: 0.1s; }
        .mega_menu_toggle .mm_dot:nth-child(3) { animation-delay: 0.2s; }
        .mega_menu_toggle .mm_dot:nth-child(4) { animation-delay: 0.1s; }
        .mega_menu_toggle .mm_dot:nth-child(5) { animation-delay: 0.2s; }
        .mega_menu_toggle .mm_dot:nth-child(6) { animation-delay: 0.3s; }
        .mega_menu_toggle .mm_dot:nth-child(7) { animation-delay: 0.2s; }
        .mega_menu_toggle .mm_dot:nth-child(8) { animation-delay: 0.3s; }
        .mega_menu_toggle .mm_dot:nth-child(9) { animation-delay: 0.4s; }

        .mega_menu_toggle:hover .mm_dot {
            background: #c1213e;
            animation: mm_dot_hover 1s ease-in-out infinite;
        }

        @keyframes mm_dot_wave {
            0%, 100% { transform: scale(1);   opacity: 1; }
            50%      { transform: scale(0.4); opacity: 0.5; }
        }

        @keyframes mm_dot_hover {
            0%, 100% { transform: scale(1.2); }
            50%      { transform: scale(0.6); }
        }

        /* X close indicator inside the toggle */
        .mega_menu_toggle .mm_close_x {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            transform: translate(-50%, -50%) scale(0) rotate(-180deg);
            opacity: 0;
            pointer-events: none;
            transition:
                opacity 0.35s ease,
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mega_menu_toggle .mm_close_x::before,
        .mega_menu_toggle .mm_close_x::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: #ffffff;
            border-radius: 2px;
            transform-origin: center;
        }
        .mega_menu_toggle .mm_close_x::before { transform: translateY(-50%) rotate(45deg); }
        .mega_menu_toggle .mm_close_x::after  { transform: translateY(-50%) rotate(-45deg); }

        /* Open state — dots scatter & fade out, X draws in */
        .mega_menu_toggle.is_open .mm_dot {
            animation: mm_dot_scatter 0.5s ease-out forwards;
        }
        .mega_menu_toggle.is_open .mm_dot:nth-child(1) { --tx: -10px; --ty: -10px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(2) { --tx:   0px; --ty: -12px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(3) { --tx:  10px; --ty: -10px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(4) { --tx: -12px; --ty:   0px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(5) { --tx:   0px; --ty:   0px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(6) { --tx:  12px; --ty:   0px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(7) { --tx: -10px; --ty:  10px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(8) { --tx:   0px; --ty:  12px; }
        .mega_menu_toggle.is_open .mm_dot:nth-child(9) { --tx:  10px; --ty:  10px; }

        .mega_menu_toggle.is_open .mm_close_x {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(0deg);
            transition-delay: 0.18s;
        }
        .mega_menu_toggle.is_open:hover {
            transform: rotate(90deg);
            background: rgba(193, 33, 62, 0.12);
        }
        .mega_menu_toggle.is_open:hover .mm_close_x::before,
        .mega_menu_toggle.is_open:hover .mm_close_x::after {
            background: #c1213e;
        }

        @keyframes mm_dot_scatter {
            from { transform: translate(0, 0) scale(1);   opacity: 1; }
            to   { transform: translate(var(--tx, 0), var(--ty, 0)) scale(0); opacity: 0; }
        }

        /* Lift toggle above the open menu, pinned to its captured position */
        body.mega_menu_open .mega_menu_toggle {
            position: fixed;
            top: var(--mm-toggle-top, 24px);
            left: var(--mm-toggle-left, auto);
            z-index: 100001;
        }

        /* Placeholder reserves the toggle's slot in the header while it's lifted */
        .mega_menu_toggle_placeholder {
            display: inline-block;
            width: 46px;
            height: 46px;
            margin-left: 8px;
            visibility: hidden;
            pointer-events: none;
        }

        /* Sticky-header light background variant */
        .cs_main_header.cs_sticky_active .mega_menu_toggle .mm_dot {
            background: #1a1a1a;
        }
        .cs_main_header.cs_sticky_active .mega_menu_toggle:hover .mm_dot {
            background: #c1213e;
        }

        /* === 3D MEGA MENU (full-page) === */
        .mega_menu {
            position: fixed;
            inset: 0;
            background:
                radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.30) 0%, transparent 38%),
                radial-gradient(circle at 82% 78%, rgba(120, 8, 208, 0.32) 0%, transparent 42%),
                radial-gradient(circle at 60% 12%, rgba(20, 80, 180, 0.20) 0%, transparent 45%),
                linear-gradient(135deg, #0a0508 0%, #06030a 45%, #050208 100%);
            z-index: 99999;
            display: flex;
            flex-direction: column;
            padding: 48px 6vw;
            overflow-y: auto;
            transform-origin: right center;
            transform: perspective(1800px) rotateY(-90deg) translateX(20%);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition:
                transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.55s ease,
                visibility 0s linear 0.95s;
        }

        .mega_menu::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 30% 70%, rgba(193, 33, 62, 0.18) 0%, transparent 30%),
                radial-gradient(circle at 70% 30%, rgba(120, 8, 208, 0.16) 0%, transparent 32%);
            pointer-events: none;
            animation: mega_menu_drift 22s ease-in-out infinite alternate;
            z-index: 0;
        }

        .mega_menu::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 60px 60px;
            -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
                    mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
            z-index: 0;
        }

        @keyframes mega_menu_drift {
            0%   { transform: translate(0, 0)        scale(1);    opacity: 0.9; }
            50%  { transform: translate(40px, -30px) scale(1.08); opacity: 1; }
            100% { transform: translate(-30px, 20px) scale(1.04); opacity: 0.85; }
        }

        .mega_menu_inner { position: relative; z-index: 1; }
        .mega_menu.open {
            transform: perspective(1800px) rotateY(0) translateX(0);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition:
                transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease,
                visibility 0s linear 0s;
        }

        body.mega_menu_open,
        html.mega_menu_open { overflow: hidden; height: 100%; }

        /* Hide the menu's inner scrollbar (Chrome/Safari/Firefox) */
        .mega_menu {
            scrollbar-width: none;        /* Firefox */
            -ms-overflow-style: none;     /* IE/Edge */
        }
        .mega_menu::-webkit-scrollbar { width: 0; height: 0; display: none; }

        /* === MEGA MENU FLOATING SHAPES === */
        .mm_shape {
            position: absolute;
            pointer-events: none;
            z-index: 0;
            opacity: 0.55;
        }

        .mm_shape.circle {
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.18);
            animation: mm_float 14s ease-in-out infinite;
        }
        .mm_shape.circle.c1 { top: 12%; left: 6%;  width: 110px; height: 110px; }
        .mm_shape.circle.c2 {
            bottom: 18%; right: 8%;
            width: 160px; height: 160px;
            border-color: rgba(193, 33, 62, 0.45);
            animation-duration: 18s;
            animation-direction: reverse;
        }
        .mm_shape.circle.c3 {
            top: 60%; left: 2%;
            width: 70px; height: 70px;
            border-color: rgba(120, 8, 208, 0.45);
            animation-duration: 12s;
        }

        .mm_shape.dot {
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.6);
            animation: mm_pulse 4s ease-in-out infinite;
        }
        .mm_shape.dot.dt1 { top: 22%; right: 18%; width: 6px; height: 6px; }
        .mm_shape.dot.dt2 {
            bottom: 28%; left: 22%; width: 5px; height: 5px;
            background: #c1213e;
            box-shadow: 0 0 14px 3px rgba(193, 33, 62, 0.7);
            animation-delay: 1.4s;
        }
        .mm_shape.dot.dt3 {
            top: 48%; right: 6%; width: 4px; height: 4px;
            animation-delay: 2.6s;
        }

        .mm_shape.tri {
            width: 0; height: 0;
            border-left: 22px solid transparent;
            border-right: 22px solid transparent;
            border-bottom: 38px solid rgba(193, 33, 62, 0.32);
            animation: mm_spin 22s linear infinite;
        }
        .mm_shape.tri.t1 { top: 8%; right: 26%; }
        .mm_shape.tri.t2 {
            bottom: 10%; left: 38%;
            border-bottom-color: rgba(120, 8, 208, 0.32);
            animation-direction: reverse;
            animation-duration: 26s;
        }

        .mm_shape.plus {
            width: 28px; height: 28px;
            position: absolute;
            animation: mm_spin 18s linear infinite;
        }
        .mm_shape.plus::before,
        .mm_shape.plus::after {
            content: "";
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
        }
        .mm_shape.plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
        .mm_shape.plus::after  { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
        .mm_shape.plus.p1 { top: 38%; left: 32%; }
        .mm_shape.plus.p2 { bottom: 22%; right: 30%; animation-direction: reverse; }

        @keyframes mm_float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50%      { transform: translate(20px, -25px) rotate(20deg); }
        }
        @keyframes mm_pulse {
            0%, 100% { transform: scale(1);   opacity: 0.85; }
            50%      { transform: scale(1.7); opacity: 1; }
        }
        @keyframes mm_spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

        .mega_menu_inner {
            position: relative;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }

        .mega_menu_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 32px;
        }

        .mega_menu_brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
        }
        .mega_menu_brand img {
            height: 42px;
        }
        .mega_menu_brand_tag {
            color: rgba(255,255,255,0.85);
            font-family: "Urbanist", sans-serif;
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 2px;
        }

        .mega_menu_close {
            background: transparent;
            border: 0;
            width: 44px;
            height: 44px;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .mega_menu_close:hover { transform: rotate(90deg); }
        .mega_menu_close span {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 28px;
            height: 2px;
            background: #ffffff;
            border-radius: 2px;
        }
        .mega_menu_close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
        .mega_menu_close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

        .mega_menu_grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            padding: 24px 0;
        }

        .mega_menu_col {
            list-style: none;
            margin: 0;
            padding: 0 36px;
            border-right: 1px solid #c1213e;
        }
        .mega_menu_col:last-child { border-right: 0; }

        .mega_menu_col li {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .mega_menu.open .mega_menu_col li { opacity: 1; transform: translateY(0); }
        .mega_menu.open .mega_menu_col li:nth-child(1) { transition-delay: 0.35s; }
        .mega_menu.open .mega_menu_col li:nth-child(2) { transition-delay: 0.42s; }
        .mega_menu.open .mega_menu_col li:nth-child(3) { transition-delay: 0.49s; }
        .mega_menu.open .mega_menu_col li:nth-child(4) { transition-delay: 0.56s; }
        .mega_menu.open .mega_menu_col li:nth-child(5) { transition-delay: 0.63s; }
        .mega_menu.open .mega_menu_col li:nth-child(6) { transition-delay: 0.70s; }
        .mega_menu.open .mega_menu_col li:nth-child(7) { transition-delay: 0.77s; }
        .mega_menu.open .mega_menu_col li:nth-child(8) { transition-delay: 0.84s; }
        .mega_menu.open .mega_menu_col li:nth-child(9) { transition-delay: 0.91s; }

        .mega_menu_col a {
            display: block;
            padding: 14px 0;
            color: #ffffff;
            font-family: "Urbanist", sans-serif;
            font-weight: 500;
            font-size: 18px;
            text-decoration: none;
            position: relative;
            transition: color 0.25s ease, padding 0.25s ease, letter-spacing 0.25s ease;
        }
        .mega_menu_col a::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 0;
            height: 2px;
            background: #c1213e;
            transform: translateY(-50%);
            transition: width 0.3s ease;
        }
        .mega_menu_col a:hover {
            color: #c1213e;
            padding-left: 28px;
            letter-spacing: 0.5px;
        }
        .mega_menu_col a:hover::before { width: 18px; }
        .mega_menu_col a.top_btn { padding: 8px 18px; }
        .mega_menu_col a.top_btn:hover { padding-left: 18px; letter-spacing: normal; }
        .mega_menu_col a.top_btn::before { display: none; }

        .mega_menu_footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        @media (max-width: 991px) {
            .top_actions .top_btn { padding: 9px 14px; font-size: 11px; }
            .mega_menu_grid { grid-template-columns: 1fr; }
            .mega_menu_col { border-right: 0; border-bottom: 1px solid rgba(193, 33, 62, 0.4); padding: 16px 0; }
            .mega_menu_col:last-child { border-bottom: 0; }
        }

        @media (max-width: 767px) {
            .top_actions .top_btn { display: none; }
            .top_actions .top_btn:first-child { display: inline-flex; }
        }

        /* === HERO UPGRADE: cross pattern, corners, dots, accents === */
        section#mainbanner {
            overflow: hidden;
            position: relative;
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 40px;
        }

        /* Wing-shaped white bottom — two rounded "tabs" curve up out of the
           about-us section, leaving a dark dip in the middle of the hero's
           bottom edge. Painted via inline SVG with `preserveAspectRatio: none`
           so it stretches to the full width of the section. */
        .hero_bottom_shape {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            width: 100%;
            height: 72px;
            z-index: 11;
            pointer-events: none;
            display: block;
        }
        @media (max-width: 768px) {
            .hero_bottom_shape { height: 56px; }
        }

        /* Headline text sitting INSIDE the white center tab of the hero. The
           tab spans roughly x=460→980 of a 1440-wide viewBox (~36%), so we
           anchor the text bottom-center and let it size to the tab visually. */
        .hero_bottom_text {
            position: absolute;
            left: 50%;
            bottom: 14px;
            transform: translateX(-50%);
            z-index: 12;
            pointer-events: none;
            text-align: center;
            white-space: nowrap;
            font-family: "Urbanist", sans-serif;
            font-size: 28px;
            font-weight: 800;
            letter-spacing: 0.2px;
            color: #1a1a1a;
            line-height: 1;
        }
        .hero_bottom_text strong {
            font-weight: 800;
            color: #c1213e;
        }
        @media (max-width: 991px) {
            .hero_bottom_text { font-size: 16px; bottom: 12px; }
        }
        @media (max-width: 768px) {
            .hero_bottom_shape { display: none; }
            .hero_bottom_text { display: none; }
        }

        /* Lift hero content above decorative overlays/panel */
        section#mainbanner .row.wrp-vieocont {
            z-index: 10;
            width: 100%;
            right: 0;
        }
        section#mainbanner .row.wrp-vieocont .col-lg-12,
        section#mainbanner .wrap-logo-bannerssa {
            position: relative;
            z-index: 10;
        }

        .hero_stripes_overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            background-image: repeating-linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.04) 0px,
                rgba(255, 255, 255, 0.04) 2px,
                transparent 2px,
                transparent 22px
            );
            mix-blend-mode: overlay;
            animation: hero_stripes_slide 18s linear infinite;
        }

        @keyframes hero_stripes_slide {
            0%   { background-position: 0 0; }
            100% { background-position: 220px 220px; }
        }

        .hero_text_panel {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 55%;
            pointer-events: none;
            z-index: 1;
            background: linear-gradient(
                115deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.35) 28%,
                rgba(15, 15, 25, 0.55) 60%,
                rgba(193, 33, 62, 0.18) 100%
            );
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 100%);
                    mask-image: linear-gradient(to right, transparent 0%, black 18%, black 100%);
            opacity: 0;
            animation: hero_panel_in 1.2s ease-out 0.2s forwards;
        }

        .hero_text_panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                115deg,
                transparent 0%,
                transparent 40%,
                rgba(255, 255, 255, 0.10) 50%,
                transparent 60%,
                transparent 100%
            );
            background-size: 220% 100%;
            animation: hero_panel_shimmer 6s ease-in-out infinite;
        }

        .hero_text_panel::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(193, 33, 62, 0.0) 10%,
                rgba(193, 33, 62, 0.9) 50%,
                rgba(193, 33, 62, 0.0) 90%,
                transparent 100%
            );
            animation: hero_panel_edge 4s ease-in-out infinite;
        }

        @keyframes hero_panel_in {
            from { opacity: 0; transform: translateX(40px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        @keyframes hero_panel_shimmer {
            0%   { background-position: 120% 0; }
            100% { background-position: -20% 0; }
        }

        @keyframes hero_panel_edge {
            0%, 100% { opacity: 0.4; transform: scaleY(0.85); }
            50%      { opacity: 1;   transform: scaleY(1); }
        }

        @media (max-width: 991px) {
            .hero_text_panel { width: 100%; }
        }

        .hero_grid_overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            background-image:
                linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
            background-size: 88px 88px;
            mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
        }

        .hero_glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            pointer-events: none;
            z-index: 1;
            opacity: 0.45;
        }
        .hero_glow.glow_1 {
            width: 420px; height: 420px;
            background: radial-gradient(circle, #c1213e 0%, transparent 70%);
            top: -120px; left: -120px;
            animation: hero_glow_float 12s ease-in-out infinite;
        }
        .hero_glow.glow_2 {
            width: 480px; height: 480px;
            background: radial-gradient(circle, #7808d0 0%, transparent 70%);
            bottom: -160px; right: -160px;
            animation: hero_glow_float 14s ease-in-out infinite reverse;
        }

        @keyframes hero_glow_float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50%      { transform: translate(40px, 30px) scale(1.08); }
        }

        .hero_corner {
            position: absolute;
            width: 56px;
            height: 56px;
            border: 2px solid rgba(255, 255, 255, 0.55);
            pointer-events: none;
            z-index: 2;
        }
        .hero_corner.tl { top: 24px; left: 24px;   border-right: none; border-bottom: none; }
        .hero_corner.tr { top: 24px; right: 24px;  border-left: none;  border-bottom: none; }
        .hero_corner.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; }
        .hero_corner.br { bottom: 24px; right: 24px; border-left: none;  border-top: none; }

        .hero_corner::before,
        .hero_corner::after {
            content: "";
            position: absolute;
            background: #c1213e;
        }
        .hero_corner.tl::before { top: -2px; left: -2px; width: 14px; height: 2px; }
        .hero_corner.tl::after  { top: -2px; left: -2px; width: 2px;  height: 14px; }
        .hero_corner.tr::before { top: -2px; right: -2px; width: 14px; height: 2px; }
        .hero_corner.tr::after  { top: -2px; right: -2px; width: 2px;  height: 14px; }
        .hero_corner.bl::before { bottom: -2px; left: -2px; width: 14px; height: 2px; }
        .hero_corner.bl::after  { bottom: -2px; left: -2px; width: 2px;  height: 14px; }
        .hero_corner.br::before { bottom: -2px; right: -2px; width: 14px; height: 2px; }
        .hero_corner.br::after  { bottom: -2px; right: -2px; width: 2px;  height: 14px; }

        .hero_accent_line {
            position: absolute;
            left: 0; right: 0;
            height: 2px;
            background: linear-gradient(to right, transparent, #c1213e 30%, #ffffff 50%, #c1213e 70%, transparent);
            pointer-events: none;
            z-index: 2;
            opacity: 0.7;
        }
        .hero_accent_line.top    { top: 0; }
        .hero_accent_line.bottom { bottom: 0; }

        .hero_dot {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.7);
            pointer-events: none;
            z-index: 2;
            animation: hero_dot_pulse 3s ease-in-out infinite;
        }
        .hero_dot.d1 { top: 18%; left: 12%; animation-delay: 0s; }
        .hero_dot.d2 { top: 32%; left: 78%; background: #c1213e; box-shadow: 0 0 12px 2px rgba(193,33,62,0.7); animation-delay: 0.6s; }
        .hero_dot.d3 { top: 64%; left: 22%; animation-delay: 1.2s; }
        .hero_dot.d4 { top: 76%; left: 60%; background: #c1213e; box-shadow: 0 0 12px 2px rgba(193,33,62,0.7); animation-delay: 1.8s; }
        .hero_dot.d5 { top: 48%; left: 8%;  animation-delay: 2.4s; }

        @keyframes hero_dot_pulse {
            0%, 100% { transform: scale(1);   opacity: 0.85; }
            50%      { transform: scale(1.6); opacity: 1; }
        }

        .hero_scroll_indicator {
            position: absolute;
            bottom: 26px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 11px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-family: "Urbanist", sans-serif;
            pointer-events: none;
        }
        .hero_scroll_indicator .mouse {
            width: 22px;
            height: 36px;
            border: 2px solid rgba(255, 255, 255, 0.85);
            border-radius: 12px;
            position: relative;
        }
        .hero_scroll_indicator .mouse::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 6px;
            width: 3px;
            height: 8px;
            background: #ffffff;
            border-radius: 2px;
            transform: translateX(-50%);
            animation: hero_scroll_dot 1.8s ease-in-out infinite;
        }

        @keyframes hero_scroll_dot {
            0%   { transform: translate(-50%, 0);  opacity: 1; }
            70%  { transform: translate(-50%, 14px); opacity: 0; }
            100% { transform: translate(-50%, 0);  opacity: 0; }
        }

        @media (max-width: 767px) {
            .hero_corner { width: 32px; height: 32px; }
            .hero_glow.glow_1 { width: 240px; height: 240px; }
            .hero_glow.glow_2 { width: 280px; height: 280px; }
            .hero_dot { width: 4px; height: 4px; }
        }

/* === WES JOURNEY: 35 milestones around globe === */
section.wes_journey {
    position: relative;
    padding: 100px 0 90px;
    background:
        radial-gradient(circle at 12% 18%, rgba(193, 33, 62, 0.05) 0%, transparent 35%),
        radial-gradient(circle at 88% 82%, rgba(125, 12, 36, 0.05) 0%, transparent 38%),
        #ffffff;
    overflow: hidden;
}

.wes_journey_header {
    text-align: center;
    margin-bottom: 50px;
}
.wes_journey_eyebrow {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(193, 33, 62, 0.08);
    color: #c1213e;
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 16px;
    border: 1px solid rgba(193, 33, 62, 0.16);
}
.wes_journey_title {
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1.1;
    color: #0d0d0d;
    margin-bottom: 14px;
    letter-spacing: -0.8px;
}
.wes_journey_title span {
    background: linear-gradient(90deg, #ff5e87 0%, #c1213e 50%, #7d0c24 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: legacy_title_gradient 6s ease-in-out infinite;
}
.wes_journey_lead {
    max-width: 720px;
    margin: 0 auto;
    color: #555;
    font-size: 15.5px;
    line-height: 1.6;
}

/* Three-column layout: events | center | events */
.wes_journey_layout {
    display: grid;
    grid-template-columns: 1fr minmax(360px, 480px) 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 50px;
}

/* Event cards */
.wes_journey_col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.wes_journey_event {
    position: relative;
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(193, 33, 62, 0.10);
    box-shadow: 0 8px 22px -14px rgba(193, 33, 62, 0.25);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.wes_journey_event:hover {
    transform: translateY(-3px);
    border-color: rgba(193, 33, 62, 0.45);
    box-shadow: 0 16px 32px -14px rgba(193, 33, 62, 0.45);
}
.wes_journey_left .wes_journey_event { text-align: right; }
.wes_journey_right .wes_journey_event { text-align: left; }

.wes_journey_year {
    display: inline-block;
    margin-bottom: 6px;
    font-family: "Urbanist", sans-serif;
    font-weight: 900;
    font-size: 22px;
    background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.3px;
}
.wes_journey_event p {
    margin: 0;
    font-family: "Urbanist", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #2a2a2a;
}
.wes_journey_event p strong { color: #c1213e; font-weight: 700; }
.wes_journey_event p sup { font-size: 9px; }

/* Upcoming event highlighted */
.wes_journey_event.is_upcoming {
    background: linear-gradient(135deg, #fff5f7 0%, #ffe7ec 100%);
    border-color: rgba(193, 33, 62, 0.45);
    box-shadow: 0 14px 30px -10px rgba(193, 33, 62, 0.5);
}
.wes_journey_event.is_upcoming::before {
    content: "NEXT";
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff5e87, #c1213e);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}
.wes_journey_left .wes_journey_event.is_upcoming::before { right: auto; left: 8px; }

/* Center: big 35 + globe overlay */
.wes_journey_center {
    position: relative;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}
.wes_journey_big {
    font-family: "Orbitron", "Urbanist", sans-serif;
    font-weight: 900;
    font-size: 360px;
    line-height: 1;
    background: linear-gradient(135deg, #ff5e87 0%, #c1213e 45%, #7d0c24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -16px;
    text-shadow: 0 0 60px rgba(193, 33, 62, 0.25);
    position: relative;
    z-index: 1;
    transform: translateY(10px);
}
.wes_journey_big_label {
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 6px;
    color: #c1213e;
    margin-top: -16px;
    z-index: 3;
    background: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(193, 33, 62, 0.25);
    box-shadow: 0 6px 16px -10px rgba(193, 33, 62, 0.4);
}

/* Globe circle on top of the number */
.wes_journey_globe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 30px 60px -24px rgba(193, 33, 62, 0.5),
        0 0 0 6px rgba(255, 255, 255, 0.85),
        0 0 0 8px rgba(193, 33, 62, 0.18);
    z-index: 2;
}
.wes_journey_globe svg {
    width: 100%;
    height: 100%;
    display: block;
}
.wes_journey_world {
    filter:
        invert(1)
        brightness(0.85)
        sepia(1)
        hue-rotate(310deg)
        saturate(1.2);
    opacity: 0.7;
}
.wes_journey_pins .pin {
    fill: #c1213e;
    filter: drop-shadow(0 0 4px rgba(193, 33, 62, 0.9));
}
.wes_journey_pins .pin.pulse {
    fill: rgba(193, 33, 62, 0.45);
    transform-origin: center;
    transform-box: fill-box;
    animation: globe_halo_pulse 2.4s ease-out infinite;
}

/* Footer eras */
.wes_journey_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    max-width: 720px;
    margin: 0 auto;
}
.wes_journey_era {
    flex-shrink: 0;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.wes_journey_era.era_pre {
    background: rgba(193, 33, 62, 0.08);
    color: #c1213e;
    border: 1px solid rgba(193, 33, 62, 0.25);
}
.wes_journey_era.era_global {
    background: linear-gradient(135deg, #ff5e87 0%, #c1213e 60%, #7d0c24 100%);
    color: #fff;
    box-shadow: 0 8px 22px -10px rgba(193, 33, 62, 0.55);
}
.wes_journey_divider {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(193, 33, 62, 0.35) 0%, #c1213e 50%, rgba(193, 33, 62, 0.35) 100%);
    border-radius: 2px;
}

@media (max-width: 1199px) {
    .wes_journey_big { font-size: 280px; letter-spacing: -10px; }
    .wes_journey_globe { width: 230px; height: 230px; }
    .wes_journey_center { height: 400px; }
}
@media (max-width: 991px) {
    .wes_journey_layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .wes_journey_center { order: -1; height: 360px; margin-bottom: 12px; }
    .wes_journey_left .wes_journey_event,
    .wes_journey_right .wes_journey_event { text-align: left; }
    .wes_journey_left .wes_journey_event.is_upcoming::before { right: 8px; left: auto; }
    .wes_journey_title { font-size: 34px; }
    .wes_journey_big { font-size: 240px; letter-spacing: -8px; }
    .wes_journey_globe { width: 200px; height: 200px; }
}
@media (max-width: 575px) {
    section.wes_journey { padding: 60px 0 70px; }
    .wes_journey_title { font-size: 26px; }
    .wes_journey_big { font-size: 180px; letter-spacing: -6px; }
    .wes_journey_globe { width: 150px; height: 150px; }
    .wes_journey_center { height: 280px; }
    .wes_journey_footer { flex-direction: column; }
    .wes_journey_divider { width: 60%; height: 2px; }
}

/* === STORY OF WES — section host (horizontal scroll-pin journey) === */
/* The section is taller than the viewport so its sticky child has room to
   pin through the entire journey. Using vh units guarantees pinning works
   even before JS runs. JS can still narrow `maxShift` to fit the track. */
section.wjz {
    position: relative;
    padding: 0;
    height: 500vh;            /* 5 viewport heights of vertical scroll */
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.30) 0%, transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(120, 8, 208, 0.32) 0%, transparent 42%),
        radial-gradient(circle at 60% 12%, rgba(20, 80, 180, 0.20) 0%, transparent 45%),
        linear-gradient(135deg, #0a0508 0%, #06030a 45%, #050208 100%);
    color: #e8e8ea;
    background:
        radial-gradient(circle at 8% 12%, rgba(193, 33, 62, 0.04) 0%, transparent 32%),
        radial-gradient(circle at 92% 90%, rgba(125, 12, 36, 0.04) 0%, transparent 36%),
        #f4f4f4;
    overflow: visible;
}

section.wjz.wjz_inactive {
    height: 100vh;
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.30) 0%, transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(120, 8, 208, 0.32) 0%, transparent 42%),
        radial-gradient(circle at 60% 12%, rgba(20, 80, 180, 0.20) 0%, transparent 45%),
        linear-gradient(135deg, #0a0508 0%, #06030a 45%, #050208 100%) !important;
}

section.wjz.wjz_inactive .wjz_h_progress {
    display: none !important;
}

.wjz_header {
    text-align: center;
    margin-bottom: 56px;
}
.wjz_title {
    font-family: "Urbanist", sans-serif;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: -1px;
    color: #0d0d0d;
    line-height: 1;
    margin-bottom: 14px;
}
.wjz_title span {
    background: linear-gradient(90deg, #ff5e87, #c1213e, #7d0c24);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: legacy_title_gradient 6s ease-in-out infinite;
}
.wjz_lead {
    max-width: 640px;
    margin: 0 auto;
    color: #444;
    font-size: 15.5px;
    line-height: 1.65;
}
.wjz_lead strong { color: #c1213e; font-weight: 800; }

/* Path container */
.wjz_path {
    position: relative;
    padding: 0 0;
}

/* Each row */
.wjz_row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--road-padding);
    min-height: 200px;
}
.wjz_row[data-dir="rtl"] {
    flex-direction: row-reverse;
}

/* Black road background for each row */
.wjz_row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: var(--road-thickness);
    transform: translateY(-50%);
    background: var(--road-bg);
    z-index: 0;
}
/* Dashed center line */
.wjz_row::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    height: var(--dash-line-thickness);
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(90deg, #ffffff 0 14px, transparent 14px 28px);
    z-index: 1;
}

/* Vertical bends connecting rows */
.wjz_bend {
    position: relative;
    height: var(--bend-height);
}
.wjz_bend::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--road-thickness);
    background: var(--road-bg);
    z-index: 0;
}
.wjz_bend::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--dash-line-thickness);
    background-image: repeating-linear-gradient(180deg, #ffffff 0 14px, transparent 14px 28px);
    z-index: 1;
}
.wjz_bend[data-side="right"]::before { right: 0; }
.wjz_bend[data-side="right"]::after  { right: calc(var(--road-thickness) / 2 - var(--dash-line-thickness) / 2); }
.wjz_bend[data-side="left"]::before  { left: 0; }
.wjz_bend[data-side="left"]::after   { left: calc(var(--road-thickness) / 2 - var(--dash-line-thickness) / 2); }

/* Node = card + meta stacked vertically, alternates above/below the road */
.wjz_node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 180px;
    flex-shrink: 0;
}
.wjz_row .wjz_node:nth-child(odd)  { transform: translateY(-72px); }
.wjz_row .wjz_node:nth-child(even) { transform: translateY(72px); }

.wjz_node:nth-child(odd) .wjz_meta  { order: 2; text-align: center; }
.wjz_node:nth-child(even) .wjz_meta { order: 0; text-align: center; }
.wjz_node:nth-child(even) .wjz_card { order: 1; }

.wjz_card {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 14px 30px -14px rgba(0, 0, 0, 0.35),
        0 0 0 4px #ffffff,
        0 0 0 5px rgba(193, 33, 62, 0.18);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
.wjz_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_node:hover .wjz_card {
    transform: scale(1.06);
    box-shadow:
        0 22px 40px -16px rgba(193, 33, 62, 0.45),
        0 0 0 4px #ffffff,
        0 0 0 6px rgba(193, 33, 62, 0.6);
}
.wjz_node:hover .wjz_card img { transform: scale(1.1); }

.wjz_step {
    position: absolute;
    bottom: 8px;
    right: 8px;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    color: #c1213e;
    font-family: "Urbanist", sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wjz_meta {
    text-align: center;
    max-width: 200px;
}
.wjz_year {
    display: inline-block;
    font-family: "Urbanist", sans-serif;
    font-weight: 900;
    font-size: 18px;
    background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}
.wjz_meta p {
    margin: 0;
    font-family: "Urbanist", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #2a2a2a;
}
.wjz_meta p strong { color: #c1213e; font-weight: 700; }
.wjz_meta p sup { font-size: 9px; }

/* "NEXT" highlight on the upcoming Dubai 2026 node */
.wjz_node.is_next .wjz_card {
    box-shadow:
        0 16px 36px -12px rgba(193, 33, 62, 0.55),
        0 0 0 4px #ffffff,
        0 0 0 6px #c1213e;
    animation: wjz_next_pulse 2.4s ease-in-out infinite;
}
.wjz_next_tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
    color: #fff;
    font-family: "Urbanist", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    box-shadow: 0 4px 10px rgba(193, 33, 62, 0.5);
}

@keyframes wjz_next_pulse {
    0%, 100% { box-shadow: 0 16px 36px -12px rgba(193, 33, 62, 0.55), 0 0 0 4px #fff, 0 0 0 6px #c1213e; }
    50%      { box-shadow: 0 22px 44px -12px rgba(193, 33, 62, 0.7),  0 0 0 4px #fff, 0 0 0 9px #c1213e; }
}

@media (max-width: 1199px) {
    section.wjz { --road-padding: 50px; }
    .wjz_node { width: 150px; }
    .wjz_card { width: 110px; height: 110px; }
}
@media (max-width: 991px) {
    section.wjz {
        --road-padding: 0;
        padding: 60px 0 70px;
    }
    .wjz_title { font-size: 38px; }
    .wjz_path {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
    .wjz_row,
    .wjz_row[data-dir="rtl"] {
        flex-direction: column;
        gap: 28px;
        padding: 16px 0;
        min-height: auto;
    }
    .wjz_row::before,
    .wjz_row::after,
    .wjz_bend { display: none; }
    .wjz_node { width: auto; max-width: 320px; margin: 0 auto; }
    .wjz_row .wjz_node:nth-child(odd),
    .wjz_row .wjz_node:nth-child(even) { transform: none; }
    .wjz_node:nth-child(odd) .wjz_meta,
    .wjz_node:nth-child(even) .wjz_meta { order: 1; }
    .wjz_node:nth-child(even) .wjz_card { order: 0; }
}
@media (max-width: 575px) {
    .wjz_title { font-size: 30px; }
    .wjz_card { width: 96px; height: 96px; }
}

/* === STORY OF WES — scroll-driven road draw-in (overrides) === */
/* Each row's road starts at 0 width, fills as the row enters the viewport */
.wjz_row::before {
    /* black road bar — fill controlled by --fill (0 → 1) */
    width: calc(var(--fill, 0) * 100%);
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_row[data-dir="ltr"]::before { left: 0; right: auto; }
.wjz_row[data-dir="rtl"]::before { left: auto; right: 0; }

/* dashed white centerline matches the fill */
.wjz_row::after {
    width: calc(var(--fill, 0) * 100% - 48px);
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 0;
}
.wjz_row[data-dir="ltr"]::after { left: 24px; right: auto; }
.wjz_row[data-dir="rtl"]::after { left: auto; right: 24px; }

/* Bends extend vertically based on their own --fill */
.wjz_bend::before { height: calc(var(--fill, 0) * 100%); transition: height 0.7s cubic-bezier(0.16, 1, 0.3, 1); top: 0; bottom: auto; }
.wjz_bend::after  { height: calc(var(--fill, 0) * 100%); transition: height 0.7s cubic-bezier(0.16, 1, 0.3, 1); top: 0; bottom: auto; }

/* Nodes entrance — overrides any old transform-only rule */
.wjz_node {
    opacity: 0;
    transition:
        opacity 0.55s ease,
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_row .wjz_node:nth-child(odd)  { transform: translateY(-72px) scale(0.7); }
.wjz_row .wjz_node:nth-child(even) { transform: translateY( 72px) scale(0.7); }

/* The older `.wjz_row.in_view .wjz_node` rules used to force every node in
   a row visible the moment the row entered the viewport — that pre-empted
   the per-node, fill-driven reveal below. Removed so cards only appear when
   the road's growth front actually reaches them. */

/* On mobile (≤991px) where the path collapses, no transforms */
@media (max-width: 991px) {
    .wjz_node,
    .wjz_row .wjz_node:nth-child(odd),
    .wjz_row .wjz_node:nth-child(even) {
        opacity: 1;
        transform: none;
    }
    .wjz_row::before,
    .wjz_row::after,
    .wjz_bend::before,
    .wjz_bend::after { display: none; }
}

/* === STORY OF WES — per-node reveal driven by road fill === */
.wjz_row .wjz_node {
    opacity: 0;
    transition:
        opacity 0.45s ease,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_row .wjz_node:nth-child(odd)  { transform: translateY(-72px) scale(0.55); }
.wjz_row .wjz_node:nth-child(even) { transform: translateY( 72px) scale(0.55); }

.wjz_row .wjz_node.in_view {
    opacity: 1;
}
.wjz_row .wjz_node:nth-child(odd).in_view  { transform: translateY(-72px) scale(1); }
.wjz_row .wjz_node:nth-child(even).in_view { transform: translateY( 72px) scale(1); }

/* No transition delays — JS reveals each node when the road fill reaches it */
.wjz_row.in_view .wjz_node:nth-child(1),
.wjz_row.in_view .wjz_node:nth-child(2),
.wjz_row.in_view .wjz_node:nth-child(3) { transition-delay: 0s; }

@media (max-width: 991px) {
    .wjz_row .wjz_node,
    .wjz_row .wjz_node.in_view,
    .wjz_row .wjz_node:nth-child(odd),
    .wjz_row .wjz_node:nth-child(even),
    .wjz_row .wjz_node:nth-child(odd).in_view,
    .wjz_row .wjz_node:nth-child(even).in_view {
        opacity: 1;
        transform: none;
    }
}

/* === STORY OF WES — bridge bend roads into adjacent row half-heights === */
/* Row min-height is 200px so half-height = 100px above/below the row's road
   centerline. We extend the bend's vertical bar by an additional 11px (half
   the road thickness) on each end so it reaches the row's road OUTER edges
   (not just the centerline). This way the bar's rounded-end semicircle and
   the row's rounded-end semicircle share the same center — they merge into
   a single 11px-radius arc at the outer L-corner. The dashed centerline
   stays at ±100px so it tracks the centerline exactly. */
.wjz_bend::after {
    top: -100px;
    bottom: auto;
    height: calc((100% + 200px) * var(--fill, 0));
}
.wjz_bend::before {
    top: -111px;
    bottom: auto;
    height: calc((100% + 222px) * var(--fill, 0));
}

/* Make sure the row's horizontal road covers the corner cleanly so the
   row+bend joint reads as one continuous L. */
.wjz_row { z-index: 1; }
.wjz_bend { z-index: 0; }
.wjz_row::before { z-index: 0; }
.wjz_row::after  { z-index: 1; }
.wjz_bend::before { z-index: 0; }
.wjz_bend::after  { z-index: 1; }
.wjz_node { z-index: 3; position: relative; }

/* === STORY OF WES — full-width road layout, animate via clip-path === */
/* The earlier `width: fill * 100%` approach left a visible gap at L-corners
   because percentage widths on the absolute pseudo-element were resolving
   against the row's content area (inside its --road-padding) instead of the
   full row. Pinning both edges with left:0/right:0 keeps the road's layout
   box at the row's TRUE full width — same width as the bends — and clip-path
   handles the reveal animation. Corners can no longer fall short. */
.wjz_row::before {
    width: auto;
    transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_row[data-dir="ltr"]::before {
    left: 0;
    right: 0;
    clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
}
.wjz_row[data-dir="rtl"]::before {
    left: 0;
    right: 0;
    clip-path: inset(0 0 0 calc((1 - var(--fill, 0)) * 100%));
}
.wjz_row::after {
    width: auto;
    transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_row[data-dir="ltr"]::after {
    left: 24px;
    right: 24px;
    clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
}
.wjz_row[data-dir="rtl"]::after {
    left: 24px;
    right: 24px;
    clip-path: inset(0 0 0 calc((1 - var(--fill, 0)) * 100%));
}

/* === STORY OF WES — rounding ONLY at L-corners === */
/* Road bars stay rectangular; we only round the corner that is the OUTSIDE
   of an L-junction. Because the bend bar extends an extra 11px into each
   adjoining row (top:-111 / +222 height), the row's rounded corner and the
   bend's rounded corner share the same circle center → they merge into a
   single 11px-radius arc with no seam.

   Path is: row1(LTR) → bend-right → row2(RTL) → bend-left → row3(LTR) →
   bend-right → row4(RTL). Outer L-corner positions:
     L1 (row1 R + bend-right top)    → top-right
     L2 (bend-right bot + row2 R)    → bottom-right
     L3 (row2 L + bend-left top)     → top-left
     L4 (bend-left bot + row3 L)     → bottom-left
     L5 (row3 R + bend-right top)    → top-right
     L6 (bend-right bot + row4 R)    → bottom-right
   Row 1's left end and row 4's left end are the road's start/end → square. */

/* LTR rows always have a top-right corner; only non-first LTR rows have a
   bottom-left corner (the entry from a preceding bend-left). */
.wjz_row[data-dir="ltr"]::before {
    border-top-right-radius: calc(var(--road-thickness) / 2);
}
.wjz_row[data-dir="ltr"]:not(:first-of-type)::before {
    border-bottom-left-radius: calc(var(--road-thickness) / 2);
}

/* RTL rows always have a bottom-right corner (entry from preceding bend-right);
   only non-last RTL rows have a top-left corner (exit to a following bend-left). */
.wjz_row[data-dir="rtl"]::before {
    border-bottom-right-radius: calc(var(--road-thickness) / 2);
}
.wjz_row[data-dir="rtl"]:not(:last-of-type)::before {
    border-top-left-radius: calc(var(--road-thickness) / 2);
}

/* Right bends round their right side (both top and bottom corners face out). */
.wjz_bend[data-side="right"]::before {
    border-top-right-radius: calc(var(--road-thickness) / 2);
    border-bottom-right-radius: calc(var(--road-thickness) / 2);
}
/* Left bends round their left side. */
.wjz_bend[data-side="left"]::before {
    border-top-left-radius: calc(var(--road-thickness) / 2);
    border-bottom-left-radius: calc(var(--road-thickness) / 2);
}

/* === STORY OF WES — 35 edition markers along the road === */
/* The .wjz_editions container is injected per row by JS and overlays the
   row's road centerline. Each .wjz_edition_dot is positioned at a fractional
   offset along the row, then revealed when the row's --fill front passes it. */
.wjz_editions {
    position: absolute;
    inset: 50% 0 auto 0;
    height: 0;
    pointer-events: none;
    z-index: 2;
}
.wjz_edition_dot {
    position: absolute;
    top: 0;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 2px #c1213e,
        0 3px 8px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease,
        box-shadow 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    color: transparent;
    font-size: 0;
}
.wjz_edition_dot:visited,
.wjz_edition_dot:hover,
.wjz_edition_dot:active,
.wjz_edition_dot:focus {
    color: transparent;
    text-decoration: none;
}
.wjz_edition_dot.in_view {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.wjz_edition_dot:hover {
    box-shadow:
        0 0 0 3px #c1213e,
        0 4px 12px rgba(193, 33, 62, 0.55);
}

/* Hover popover: image + edition name + city + short note */
.wjz_edition_pop {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    width: 200px;
    transform: translateX(-50%) translateY(8px);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(193, 33, 62, 0.10);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
    text-align: left;
    color: initial;
    font-size: initial;
    /* Reset any link inheritance the dot's <a> would push down. */
    text-decoration: none;
}
/* Reveal popover automatically when the road's growth front reaches the dot
   (the dot picks up `.in_view` from the same JS that pops it in). */
.wjz_edition_dot.in_view .wjz_edition_pop {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* Pointer triangle below the card pointing down to the dot. */
.wjz_edition_pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top-color: #fff;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06));
}
.wjz_edition_pop_img {
    display: block;
    width: 100%;
    height: 88px;
    object-fit: cover;
    background: #f0f0f0;
}
.wjz_edition_pop_body {
    display: block;
    padding: 10px 14px 14px;
}
.wjz_edition_pop_num {
    display: inline-block;
    background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
    color: #fff;
    border-radius: 999px;
    padding: 3px 10px;
    font-family: "Urbanist", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1;
}
.wjz_edition_pop_meta {
    display: block;
    margin-top: 8px;
    font-family: "Urbanist", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}
.wjz_edition_pop_desc {
    display: block;
    margin-top: 6px;
    font-family: "Urbanist", sans-serif;
    font-size: 11.5px;
    color: #555;
    line-height: 1.45;
}
.wjz_edition_pop_link {
    display: inline-block;
    margin-top: 10px;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #c1213e;
    letter-spacing: 0.4px;
}

/* Row 1 popovers can't go above without colliding with the section header,
   so flip them below the dot. Triangle flips to point upward. */
.wjz_editions--below .wjz_edition_pop {
    bottom: auto;
    top: calc(100% + 14px);
}
.wjz_editions--below .wjz_edition_pop::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #fff;
}

/* Mobile collapses the snake into a vertical list — markers belong to the
   road which is hidden, so hide them too. */
@media (max-width: 991px) {
    .wjz_editions { display: none; }
}

/* =====================================================================
   STORY OF WES — vertical straight-road timeline (replaces snake layout)
   ===================================================================== */
.wjz_v_track {
    --road-thickness: 6px;
    --road-bg: rgba(26, 26, 26, 0.18);
    --road-fill: linear-gradient(180deg, #ff5e87, #c1213e, #7d0c24);
    --dot-size: 22px;
    --card-width: 320px;
    --gutter: 56px;

    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 0 48px;
}
/* Background (un-filled) road — full track height. */
.wjz_v_track::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--road-thickness);
    background: var(--road-bg);
    border-radius: 999px;
    transform: translateX(-50%);
    z-index: 0;
}
/* Foreground (filled) road — height grows with --fill (0 → 1). */
.wjz_v_track::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--road-thickness);
    height: calc(var(--fill, 0) * 100%);
    background: var(--road-fill);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    box-shadow: 0 0 18px rgba(193, 33, 62, 0.35);
}

.wjz_v_entry {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 200px;
    padding: 18px 0;
    z-index: 2;
}
.wjz_v_entry[data-side="left"] {
    justify-content: flex-end;
    padding-right: calc(50% + var(--gutter));
}
.wjz_v_entry[data-side="right"] {
    justify-content: flex-start;
    padding-left: calc(50% + var(--gutter));
}

/* Dot on the road */
.wjz_v_dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 4px #c1213e,
        0 6px 14px rgba(193, 33, 62, 0.40);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition:
        opacity 0.4s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}
.wjz_v_entry.in_view .wjz_v_dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Edition card */
.wjz_v_card {
    display: block;
    width: var(--card-width);
    padding: 16px;
    background: #fff;
    border-radius: 18px;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(193, 33, 62, 0.06);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    transition:
        opacity 0.5s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease;
    will-change: transform;
}
.wjz_v_entry[data-side="left"]  .wjz_v_card { transform: translateX(-32px); text-align: right; }
.wjz_v_entry[data-side="right"] .wjz_v_card { transform: translateX( 32px); text-align: left; }
.wjz_v_entry.in_view .wjz_v_card {
    opacity: 1;
    transform: translateX(0);
}
.wjz_v_card:hover {
    box-shadow:
        0 22px 44px rgba(193, 33, 62, 0.18),
        0 0 0 1px rgba(193, 33, 62, 0.20);
}
.wjz_v_card:visited,
.wjz_v_card:active,
.wjz_v_card:focus { color: inherit; text-decoration: none; }

.wjz_v_card_img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    background: #f0f0f0;
}
.wjz_v_card_num {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #ff5e87, #c1213e, #7d0c24);
    color: #fff;
    border-radius: 999px;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1;
}
.wjz_v_card_meta {
    margin-top: 10px;
    font-family: "Urbanist", sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
}
.wjz_v_card_note {
    margin: 8px 0 0;
    font-family: "Urbanist", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}
.wjz_v_card_link {
    display: inline-block;
    margin-top: 12px;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #c1213e;
}

/* Mobile: collapse to a single column on the right of a left-side road */
@media (max-width: 768px) {
    .wjz_v_track {
        --gutter: 24px;
        --card-width: 100%;
        max-width: 520px;
    }
    .wjz_v_track::before,
    .wjz_v_track::after {
        left: 24px;
    }
    .wjz_v_entry,
    .wjz_v_entry[data-side="left"],
    .wjz_v_entry[data-side="right"] {
        justify-content: flex-start;
        padding-left: 60px;
        padding-right: 12px;
        min-height: auto;
    }
    .wjz_v_dot { left: 24px; }
    .wjz_v_card,
    .wjz_v_entry[data-side="left"] .wjz_v_card,
    .wjz_v_entry[data-side="right"] .wjz_v_card {
        text-align: left;
        transform: translateX(0);
        max-width: 100%;
    }
    .wjz_v_entry .wjz_v_card { transform: translateX(20px); }
    .wjz_v_entry.in_view .wjz_v_card { transform: translateX(0); }
}

/* =====================================================================
   STORY OF WES — horizontal scroll-pinned journey (current layout)
   The section is taller than the viewport. Its inner `.wjz_h_pin` sticks
   to viewport top while the user scrolls; `.wjz_h_track` translates left
   accordingly. Cards alternate above/below the road and reveal as their
   centers cross the viewport's mid-line.
   ===================================================================== */
/* `position: sticky` would be ideal, but `overflow-x: hidden` on html/body
   (set in style.css) creates a scroll container that breaks sticky inside.
   Instead we manage the pin's position from JS: `absolute` on either end
   of the section, `fixed` while the section is mid-scroll. The transitions
   between absolute and fixed are seamless because the y-coordinates match
   at the boundaries. */
.wjz_h_pin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    background:
        radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.30) 0%, transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(120, 8, 208, 0.32) 0%, transparent 42%),
        radial-gradient(circle at 60% 12%, rgba(20, 80, 180, 0.20) 0%, transparent 45%),
        linear-gradient(135deg, #0a0508 0%, #06030a 45%, #050208 100%);
}
/* Drifting glow layer over the pin — same pulse as the mega menu's ::before */
.wjz_h_pin::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 70%, rgba(193, 33, 62, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 70% 30%, rgba(120, 8, 208, 0.16) 0%, transparent 32%);
    pointer-events: none;
    animation: wjz_bg_drift 22s ease-in-out infinite alternate;
    z-index: 0;
}
/* Subtle grid lines, masked to fade out at the edges */
.wjz_h_pin::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
    z-index: 0;
}
@keyframes wjz_bg_drift {
    0%   { transform: translate(0, 0)        scale(1);    opacity: 0.9; }
    50%  { transform: translate(40px, -30px) scale(1.08); opacity: 1;   }
    100% { transform: translate(-30px, 20px) scale(1.04); opacity: 0.85;}
}
.wjz_h_pin.is_fixed {
    position: fixed;
    top: 0;
    bottom: auto;
}
.wjz_h_pin.is_end {
    position: absolute;
    top: auto;
    bottom: 0;
}
.wjz_h_stage {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.wjz_h_stage .wjz_header {
    flex-shrink: 0;
    padding: 22px 0 14px;
    margin: 0;
    background: linear-gradient(180deg,
        rgba(6, 3, 10, 0.85) 0%,
        rgba(6, 3, 10, 0.55) 70%,
        rgba(6, 3, 10, 0) 100%);
    z-index: 4;
}
/* Title and lead share one row inside the pinned header so the user always
   sees both at once (no scrolling between "fold 1" heading and "fold 2"
   timeline). On narrower viewports they stack but stay tight. */
.wjz_h_stage .wjz_header_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    text-align: left;
}
.wjz_h_stage .wjz_title {
    font-size: 36px;
    margin: 0;
    line-height: 1.05;
    flex-shrink: 0;
    border-right: 2px solid rgba(193, 33, 62, 0.45);
    padding-right: 28px;
    color: #ffffff;
}
.wjz_h_stage .wjz_lead {
    margin: 0;
    max-width: 560px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #b8b8bd;
}
.wjz_h_stage .wjz_lead strong { color: #ffffff; }
.wjz_skip_btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 94, 135, 0.5);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 94, 135, 0.25), 0 0 60px rgba(193, 33, 62, 0.15), inset 0 0 20px rgba(255, 94, 135, 0.05);
    transition: all 0.3s ease;
    white-space: nowrap;
    animation: wjz_skip_pulse 2.5s ease-in-out infinite;
}
@keyframes wjz_skip_pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 94, 135, 0.25), 0 0 60px rgba(193, 33, 62, 0.15), inset 0 0 20px rgba(255, 94, 135, 0.05); }
    50% { box-shadow: 0 0 30px rgba(255, 94, 135, 0.4), 0 0 80px rgba(193, 33, 62, 0.25), inset 0 0 30px rgba(255, 94, 135, 0.1); }
}
.wjz_skip_btn:hover,
.wjz_skip_btn:focus-visible {
    transform: translate(-50%, -50%) translateY(-3px);
    background: linear-gradient(135deg, rgba(255, 94, 135, 0.3), rgba(193, 33, 62, 0.4));
    border-color: rgba(255, 94, 135, 0.8);
    box-shadow: 0 0 30px rgba(255, 94, 135, 0.5), 0 0 80px rgba(193, 33, 62, 0.3), inset 0 0 30px rgba(255, 94, 135, 0.1);
    outline: none;
    animation: none;
}
.wjz_skip_text {
    background: linear-gradient(90deg, #ffffff, #ff9db8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.wjz_skip_btn:hover .wjz_skip_text {
    background: linear-gradient(90deg, #ffffff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
}
.wjz_skip_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff5e87, #c1213e);
    font-size: 11px;
    animation: wjz_arrow_bounce 1.5s ease-in-out infinite;
}
.wjz_skip_arrow i {
    -webkit-text-fill-color: #fff;
}
@keyframes wjz_arrow_bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
@media (max-width: 768px) {
    .wjz_h_stage .wjz_header_inner { gap: 8px; text-align: center; }
    .wjz_h_stage .wjz_title {
        font-size: 28px;
        border-right: 0;
        padding-right: 0;
    }
    .wjz_skip_btn {
        left: 50%;
        padding: 10px 20px;
        font-size: 11px;
        gap: 8px;
    }
    .wjz_skip_arrow {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}
.wjz_h_viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
}
.wjz_h_track {
    position: absolute;
    top: 50%;
    left: 0;
    height: 100%;
    transform: translate(var(--shift, 0px), -50%);
    will-change: transform;
    display: flex;
    align-items: center;
    padding: 0 6vw;
}
/* Asphalt road — layered gradient + red lane-edge stripes for character. */
.wjz_h_track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 38px;
    transform: translateY(-50%);
    background:
        /* shoulder lip top — slightly lighter, catches "light" */
        linear-gradient(180deg,
            #3a3a3a 0%,
            #262626 10%,
            /* top red lane-edge stripe */
            rgba(193, 33, 62, 0.95) 14%,
            rgba(193, 33, 62, 0.95) 18%,
            /* asphalt body — dark, with subtle vignette */
            #1c1c1c 22%,
            #0e0e0e 50%,
            #1c1c1c 78%,
            /* bottom red lane-edge stripe */
            rgba(193, 33, 62, 0.95) 82%,
            rgba(193, 33, 62, 0.95) 86%,
            /* shoulder lip bottom — darker, "shadowed" side */
            #232323 90%,
            #181818 100%);
    border-radius: 8px;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
    z-index: 0;
}
/* White dashed centerline — width grows with the journey's --fill. The drop
   shadow gives the dashes a faint glow, and a brighter glow tracks the
   leading edge so the user can feel the "front of the journey" advancing. */
.wjz_h_track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: calc(var(--fill, 0) * (100% - 48px));
    height: 3px;
    background-image: repeating-linear-gradient(
        90deg,
        #ffffff 0 22px,
        transparent 22px 44px
    );
    transform: translateY(-50%);
    transition: width 0.25s linear;
    z-index: 2;
    min-width: 0;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
    /* Red glow extending past the right edge of the filled centerline —
       acts as a "leading edge" beacon that travels with progress. */
    box-shadow: 14px 0 36px rgba(193, 33, 62, 0.55);
}

.wjz_h_entry {
    position: relative;
    flex-shrink: 0;
    width: 240px;
    height: 100%;
    margin-right: 56px;
    z-index: 2;
}
.wjz_h_entry:last-child { margin-right: 0; }

.wjz_h_dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 4px #c1213e,
        0 0 0 6px rgba(255, 255, 255, 0.08),
        0 0 18px rgba(193, 33, 62, 0.7);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition:
        opacity 0.4s ease,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}
.wjz_h_entry.in_view .wjz_h_dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Vertical stem connecting the road's dot to the floating card */
.wjz_h_stem {
    position: absolute;
    left: 50%;
    width: 2px;
    background: rgba(193, 33, 62, 0.35);
    transform: translateX(-50%) scaleY(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
    z-index: 1;
}
.wjz_h_entry[data-side="top"] .wjz_h_stem {
    bottom: 50%;
    height: 56px;
    transform-origin: bottom center;
}
.wjz_h_entry[data-side="bottom"] .wjz_h_stem {
    top: 50%;
    height: 56px;
    transform-origin: top center;
}
.wjz_h_entry.in_view .wjz_h_stem {
    transform: translateX(-50%) scaleY(1);
}

/* === Card shell — image-led, with bouncy reveal === */
.wjz_h_card {
    position: absolute;
    left: 50%;
    width: 250px;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(193, 33, 62, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    will-change: transform, opacity;
    transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
    z-index: 2;
}
/* Cards above the road slide up from below; cards below slide down from
   above. Both start scaled-down for a slight "pop in" feel. */
.wjz_h_entry[data-side="top"] .wjz_h_card {
    bottom: calc(50% + 70px);
    transform: translateX(-50%) translateY(40px) scale(0.92);
}
.wjz_h_entry[data-side="bottom"] .wjz_h_card {
    top: calc(50% + 70px);
    transform: translateX(-50%) translateY(-40px) scale(0.92);
}
.wjz_h_entry.in_view .wjz_h_card {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.wjz_h_entry.in_view .wjz_h_card:hover {
    transform: translateX(-50%) translateY(-6px) scale(1);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.65),
        0 6px 16px rgba(193, 33, 62, 0.40),
        0 0 0 1px rgba(193, 33, 62, 0.55);
}
.wjz_h_card:visited,
.wjz_h_card:active,
.wjz_h_card:focus { color: inherit; text-decoration: none; }

/* === Image area === */
.wjz_h_card_imgwrap {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #f0f0f0;
}
.wjz_h_card_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_h_card:hover .wjz_h_card_img { transform: scale(1.06); }
/* Soft gradient at the bottom of the image so the badge stays legible
   regardless of what the photo looks like. */
.wjz_h_card_imgwrap::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.32));
    pointer-events: none;
}

/* === Floating edition badge === */
.wjz_h_card_num {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    background: #ffffff;
    color: #c1213e;
    border-radius: 999px;
    font-family: "Urbanist", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(193, 33, 62, 0.12);
    z-index: 2;
}

/* === Body — text content under the image === */
.wjz_h_card_body {
    padding: 14px 16px 16px;
}

.wjz_h_card_meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.1;
}
.wjz_h_card_place {
    font-family: "Urbanist", sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}
.wjz_h_card_year {
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #c1213e;
    letter-spacing: 0.6px;
}

.wjz_h_card_note {
    margin: 8px 0 0;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}

.wjz_h_card_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #c1213e;
    text-transform: uppercase;
}
.wjz_h_card_link::after {
    content: "→";
    display: inline-block;
    font-size: 13px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wjz_h_card:hover .wjz_h_card_link::after { transform: translateX(5px); }

/* Bottom progress bar — gives the user feedback on journey completion */
.wjz_h_progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 5;
}
.wjz_h_progress_bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff5e87, #c1213e);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.15s linear;
}

/* === Floating shapes layered over the dark backdrop === */
.wjz_shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.wjz_shape.circle {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    animation: wjz_shape_float 14s ease-in-out infinite;
}
.wjz_shape.circle.c1 { top: 12%; left: 6%;  width: 110px; height: 110px; }
.wjz_shape.circle.c2 {
    bottom: 18%; right: 8%;
    width: 160px; height: 160px;
    border-color: rgba(193, 33, 62, 0.45);
    animation-duration: 18s;
    animation-direction: reverse;
}
.wjz_shape.circle.c3 {
    top: 60%; left: 2%;
    width: 70px; height: 70px;
    border-color: rgba(120, 8, 208, 0.45);
    animation-duration: 12s;
}
.wjz_shape.dot {
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.6);
    animation: wjz_shape_pulse 4s ease-in-out infinite;
}
.wjz_shape.dot.dt1 { top: 22%; right: 18%; width: 6px; height: 6px; }
.wjz_shape.dot.dt2 {
    bottom: 28%; left: 22%; width: 5px; height: 5px;
    background: #c1213e;
    box-shadow: 0 0 14px 3px rgba(193, 33, 62, 0.7);
    animation-delay: 1.4s;
}
.wjz_shape.dot.dt3 {
    top: 48%; right: 6%; width: 4px; height: 4px;
    animation-delay: 2.6s;
}
.wjz_shape.tri {
    width: 0; height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 38px solid rgba(193, 33, 62, 0.32);
    animation: wjz_shape_spin 22s linear infinite;
}
.wjz_shape.tri.t1 { top: 8%; right: 26%; }
.wjz_shape.tri.t2 {
    bottom: 10%; left: 38%;
    border-bottom-color: rgba(120, 8, 208, 0.32);
    animation-direction: reverse;
    animation-duration: 26s;
}
.wjz_shape.plus {
    width: 28px; height: 28px;
    animation: wjz_shape_spin 18s linear infinite;
}
.wjz_shape.plus::before,
.wjz_shape.plus::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
}
.wjz_shape.plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.wjz_shape.plus::after  { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.wjz_shape.plus.p1 { top: 38%; left: 32%; }
.wjz_shape.plus.p2 { bottom: 22%; right: 30%; animation-direction: reverse; }

@keyframes wjz_shape_float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(20px, -25px) rotate(20deg); }
}
@keyframes wjz_shape_pulse {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.7); opacity: 1; }
}
@keyframes wjz_shape_spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Mobile fallback: vertical timeline with road */
@media (max-width: 768px) {
    section.wjz { height: auto !important; min-height: auto !important; padding: 30px 0 0px; overflow: hidden; }
    section.wjz.wjz_inactive { height: auto !important; min-height: auto !important; padding: 0; background: none; }
    section.wjz.wjz_inactive .wjz_h_pin {
        height: auto;
        overflow: hidden;
        background:
            radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.30) 0%, transparent 38%),
            radial-gradient(circle at 82% 78%, rgba(120, 8, 208, 0.32) 0%, transparent 42%),
            radial-gradient(circle at 60% 12%, rgba(20, 80, 180, 0.20) 0%, transparent 45%),
            linear-gradient(135deg, #0a0508 0%, #06030a 45%, #050208 100%);
        padding: 30px 0;
    }
    section.wjz.wjz_inactive .wjz_h_track { display: none !important; }
    section.wjz.wjz_inactive .wjz_h_viewport {
        position: relative;
        display: flex;
        justify-content: center;
        padding: 10px 0;
        height: auto;
        min-height: auto;
    }
    section.wjz.wjz_inactive .wjz_h_progress { display: none; }
    section.wjz.wjz_inactive .wjz_shape { display: none; }
    .wjz_h_pin {
        position: relative;
        height: auto;
        overflow: hidden;
    }
    .wjz_h_pin::before,
    .wjz_h_pin::after {
        display: none;
    }
    .wjz_h_stage { display: block; }
    .wjz_shape { display: none; }
    .wjz_h_stage .wjz_header { background: none; padding: 30px 16px 16px; }
    .wjz_h_stage .wjz_header_inner {
        gap: 6px;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    .wjz_h_stage .wjz_title {
        font-size: 22px;
        border-right: 0;
        padding-right: 0;
    }
    .wjz_h_stage .wjz_lead {
        font-size: 11px;
        max-width: 100%;
    }
    .wjz_h_viewport { overflow: hidden; position: relative; }
    .wjz_skip_btn {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        display: flex;
        margin: 0 auto 16px;
        padding: 10px 20px;
        font-size: 11px;
        gap: 8px;
    }
    .wjz_skip_btn:hover,
    .wjz_skip_btn:focus-visible {
        transform: translateY(-2px);
    }
    .wjz_skip_arrow {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
    .wjz_h_track {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 20px 16px 0 40px;
        height: auto;
        transform: none !important;
        width: 100% !important;
    }
    /* Vertical road line */
    .wjz_h_track::before {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 18px;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #c1213e, #ff5e87, #c1213e);
        border-radius: 2px;
        transform: none;
    }
    /* Dashed center line on the road */
    .wjz_h_track::after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 19px;
        width: 2px;
        height: 100%;
        background: repeating-linear-gradient(
            180deg,
            #ffffff 0 8px,
            transparent 8px 18px
        );
        transform: none;
        opacity: 0.6;
    }
    .wjz_h_entry {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 8px 0 8px 16px;
        position: relative;
    }
    /* Dot on the road */
    .wjz_h_dot {
        display: block;
        position: absolute;
        left: -20px;
        top: 20px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ff5e87;
        border: 2px solid #fff;
        box-shadow: 0 0 8px rgba(255, 94, 135, 0.5);
        z-index: 2;
    }
    .wjz_h_stem { display: none; }
    .wjz_h_card,
    .wjz_h_entry[data-side="top"] .wjz_h_card,
    .wjz_h_entry[data-side="bottom"] .wjz_h_card {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        opacity: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .wjz_h_entry.in_view .wjz_h_card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }
    .wjz_h_card_imgwrap {
        width: 80px;
        min-width: 80px;
        height: auto;
        min-height: 80px;
        border-radius: 10px 0 0 10px;
    }
    .wjz_h_card_body {
        padding: 6px 8px;
        flex: 1;
        gap: 2px;
    }
    .wjz_h_card_badge {
        font-size: 8px;
        padding: 1px 5px;
        top: 4px;
        right: 4px;
    }
    .wjz_h_card_place {
        font-size: 10px;
    }
    .wjz_h_card_year {
        font-size: 10px;
    }
    .wjz_h_card_note {
        font-size: 9px;
        line-height: 1.2;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .wjz_h_card_link {
        font-size: 8px;
        padding-top: 2px;
    }
    .wjz_h_card_meta {
        gap: 4px;
    }
    .wjz_h_progress { display: none; }
}

/* =====================================================================
   THE NEXT CHAPTER — Dubai 2027 + Los Angeles 2027 destination cards
   Sits between the stats counter and the partners section. Echoes the
   mega-menu/timeline dark backdrop on a smaller scale, with two large
   destination cards bridged by an animated "&" divider.
   ===================================================================== */
/* Section host — taller than viewport so the pinned pin can scroll-drive
   the curtain animation. Its bg matches the pin's so transitions in/out of
   the pin state are seamless. */
.next_chapter {
    position: relative;
    height: 150vh;
    min-height: 100vh;
    padding: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.20) 0%, transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(120, 8, 208, 0.22) 0%, transparent 42%),
        radial-gradient(circle at 60% 12%, rgba(20, 80, 180, 0.16) 0%, transparent 45%),
        linear-gradient(135deg, #0a0508 0%, #06030a 45%, #050208 100%);
    color: #e8e8ea;
}

/* Pin — the visible "stage" while the section is being scrolled through.
   JS toggles `.is_fixed` (mid-scroll) and `.is_end` (after the section).
   `position: sticky` is unreliable here because html/body have
   `overflow-x: hidden`, so we manage it with `position: absolute|fixed`. */
.nc_pin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    background:
        radial-gradient(circle at 18% 22%, rgba(193, 33, 62, 0.20) 0%, transparent 38%),
        radial-gradient(circle at 82% 78%, rgba(120, 8, 208, 0.22) 0%, transparent 42%),
        radial-gradient(circle at 60% 12%, rgba(20, 80, 180, 0.16) 0%, transparent 45%),
        linear-gradient(135deg, #0a0508 0%, #06030a 45%, #050208 100%);
    display: flex;
    align-items: center;
}
.nc_pin.is_fixed { position: fixed; top: 0; bottom: auto; }
.nc_pin.is_end   { position: absolute; top: auto; bottom: 0; }

/* Drifting glow + grid-paper backdrop, same family as the WES timeline */
.nc_pin::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 70%, rgba(193, 33, 62, 0.16) 0%, transparent 30%),
        radial-gradient(circle at 70% 30%, rgba(120, 8, 208, 0.14) 0%, transparent 32%);
    pointer-events: none;
    animation: nc_bg_drift 22s ease-in-out infinite alternate;
    z-index: 0;
}
.nc_pin::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    z-index: 0;
}
@keyframes nc_bg_drift {
    0%   { transform: translate(0, 0)        scale(1);    opacity: 0.9; }
    50%  { transform: translate(40px, -30px) scale(1.08); opacity: 1;   }
    100% { transform: translate(-30px, 20px) scale(1.04); opacity: 0.85;}
}
.nc_pin > .container { position: relative; z-index: 2; width: 100%; }

/* Decorative floating shapes */
.nc_shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    animation: nc_float 16s ease-in-out infinite;
}
.nc_shape_a {
    top: 8%; left: 4%;
    width: 130px; height: 130px;
    border-color: rgba(193, 33, 62, 0.35);
}
.nc_shape_b {
    bottom: 12%; right: 5%;
    width: 90px; height: 90px;
    border-color: rgba(120, 8, 208, 0.35);
    animation-direction: reverse;
    animation-duration: 20s;
}
.nc_shape_c {
    top: 40%; right: 12%;
    width: 8px; height: 8px;
    background: #c1213e;
    border: 0;
    box-shadow: 0 0 16px 4px rgba(193, 33, 62, 0.7);
    animation: nc_pulse 4s ease-in-out infinite;
}
@keyframes nc_float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(20px, -25px) rotate(20deg); }
}
@keyframes nc_pulse {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.7); opacity: 1; }
}

/* === Section heading === */
.nc_head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 70px;
}
.nc_eyebrow {
    display: inline-block;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #c1213e;
    padding: 8px 18px;
    border: 1px solid rgba(193, 33, 62, 0.45);
    border-radius: 999px;
    margin-bottom: 22px;
    background: rgba(193, 33, 62, 0.08);
}
.nc_title {
    font-size: 56px;
    line-height: 1.05;
    margin: 0 0 18px;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -1px;
}
.nc_title span {
    color: #c1213e;
    font-style: italic;
    font-weight: 700;
}
.nc_lead {
    font-family: "Urbanist", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #fff;
    margin: 0 auto;
    max-width: 600px;
}

/* === Two-card grid with central divider === */
.nc_grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 60px;
}

/* Central "&" divider between Dubai and LA */
.nc_divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 8px;
}
.nc_divider_line {
    width: 1px;
    flex: 1;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(193, 33, 62, 0.4) 50%,
        transparent 100%);
}
.nc_divider_node {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #c1213e, #7d0a23);
    color: #ffffff;
    font-family: "Urbanist", sans-serif;
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
    box-shadow:
        0 12px 28px rgba(193, 33, 62, 0.45),
        0 0 0 4px rgba(193, 33, 62, 0.12);
    flex-shrink: 0;
}

/* === Boarding-pass destination card =================================
   Horizontal layout: image stub on the left with the airport code &
   city overlay, vertical perforation in the middle, details on the
   right. Compact (≈210px tall) and themed for the "destinations" idea. */
.nc_card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    /* border: 1px solid rgba(255, 255, 255, 0.10); */
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 220px;
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}
.nc_card:hover {
    transform: translateY(-6px);
    border-color: rgba(193, 33, 62, 0.45);
    box-shadow:
        0 32px 70px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(193, 33, 62, 0.35),
        0 12px 36px rgba(193, 33, 62, 0.25);
}

/* === Left stub: image + city overlay === */
.nc_card_media {
    position: relative;
    width: 46%;
    flex-shrink: 0;
    overflow: hidden;
    background: #15080d;
}
.nc_card_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.nc_card:hover .nc_card_img { transform: scale(1.06); }
.nc_card_media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 25%, rgba(10, 5, 8, 0.92) 100%),
        linear-gradient(90deg, rgba(10, 5, 8, 0.4) 0%, transparent 40%);
    pointer-events: none;
}

/* City + airport-code overlay anchored to the bottom-left of the image */
.nc_card_overlay {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
}
.nc_card_code {
    display: inline-block;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #ff6f8c;
    margin-bottom: 4px;
    /* Track-style underline mark */
    border-bottom: 1px solid rgba(255, 111, 140, 0.5);
    padding-bottom: 2px;
}
.nc_card_city {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.8px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* === Vertical perforation between stub and body === */
.nc_card_perf {
    position: relative;
    flex-shrink: 0;
    width: 0;
    border-left: 2px dashed rgba(255, 255, 255, 0.18);
}
/* Punched-hole top/bottom — hint at a tear-off ticket. The cut-out is a
   small disc that matches the section background colour. */
.nc_card_perf::before,
.nc_card_perf::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #06030a;
    left: -7px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.nc_card_perf::before { top: -7px; }
.nc_card_perf::after  { bottom: -7px; }

/* === Right stub: destination details === */
.nc_card_body {
    flex: 1;
    padding: 22px 26px 22px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
/* Edition number meta — replaces the country meta line */
.nc_card_meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nc_card_edition_num {
    font-family: "Urbanist", sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #c1213e;
    line-height: 1;
    letter-spacing: -0.5px;
}
.nc_card_edition_num sup {
    font-size: 12px;
    font-weight: 700;
    top: -0.7em;
    margin-left: 1px;
}
.nc_card_edition_label {
    font-family: "Urbanist", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #fff;
}

.nc_card_date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
}
.nc_card_label {
    font-family: "Urbanist", sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #c1213e;
}
.nc_card_date_row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.nc_card_month {
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}
.nc_card_year {
    font-family: "Urbanist", sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.nc_card_tagline {
    font-family: "Urbanist", sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: #ff5e87;
    margin: 0;
    line-height: 1.4;
    padding: 8px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
}

.nc_card_note {
    font-family: "Urbanist", sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

/* CTA */
.nc_card_cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 10px 18px;
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}
.nc_card_cta svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nc_card_cta:hover {
    background: #c1213e;
    border-color: #c1213e;
    color: #ffffff;
}
.nc_card_cta:hover svg { transform: translateX(5px); }

/* Bottom footnote */
.nc_footnote {
    text-align: center;
    font-family: "Urbanist", sans-serif;
    font-size: 13px;
    color: #888892;
    margin: 0;
    letter-spacing: 0.3px;
}

/* === Tablet & mobile === */
@media (max-width: 991px) {
    /* Drop the pinned-scroll trick — show content statically with no curtain */
    .next_chapter {
        height: auto !important;
        min-height: 0;
        padding: 80px 0 90px;
    }
    .nc_pin {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        height: auto;
        display: block;
        background: transparent;
    }
    .nc_pin::before, .nc_pin::after { display: none; }
    .nc_curtain_wrap { display: none; }
    .nc_shape { display: none; }
    .nc_title { font-size: 42px; }
    .nc_grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .nc_divider {
        flex-direction: row;
        gap: 14px;
        padding: 6px 0;
    }
    .nc_divider_line {
        width: auto;
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(193, 33, 62, 0.4) 50%,
            transparent 100%);
    }
    /* On tablets the cards stack vertically — image on top, details below */
    .nc_card { flex-direction: column; min-height: 0; }
    .nc_card_media { width: 100%; height: 200px; }
    .nc_card_perf {
        width: auto;
        height: 0;
        border-left: 0;
        border-top: 2px dashed rgba(255, 255, 255, 0.18);
    }
    .nc_card_perf::before  { top: -7px; left: -7px; }
    .nc_card_perf::after   { bottom: auto; top: -7px; left: auto; right: -7px; }
    .nc_card_body { padding: 22px 24px 22px 24px; }
    .nc_card_city { font-size: 30px; }
}
@media (max-width: 575px) {
    .next_chapter { padding: 60px 0 70px; }
    .nc_title { font-size: 32px; }
    .nc_eyebrow { font-size: 10px; letter-spacing: 3px; padding: 6px 14px; }
    .nc_card_media { height: 170px; }
    .nc_card_city { font-size: 26px; }
    .nc_card_year { font-size: 22px; }
    .nc_card_month { font-size: 14px; }
}

/* =====================================================================
   THEATRICAL CURTAIN REVEAL — fired by IntersectionObserver in JS.
   The section opens like a stage: gold-trimmed valance lifts, two
   velvet curtains pull apart, and confetti rains over the reveal.
   ===================================================================== */
.nc_curtain_wrap {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

/* Velvet panels — vertical pleats from layered repeating-linear-gradient.
   The radial layer adds depth; inset shadow gives the fabric "weight". */
.nc_curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 51%;
    background:
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, 0.55) 0,
            rgba(0, 0, 0, 0.05) 14px,
            rgba(255, 255, 255, 0.06) 28px,
            rgba(0, 0, 0, 0.55) 42px),
        radial-gradient(ellipse at 50% 0%, #6a0c1a 0%, #420812 45%, #1f040a 100%);
    /* Side darkening only — no top inset shadow, so the seam where the
       valance meets the curtain reads as one continuous fabric. */
    box-shadow:
        inset 60px 0 80px rgba(0, 0, 0, 0.3),
        inset -60px 0 80px rgba(0, 0, 0, 0.3),
        inset 0 -40px 80px rgba(0, 0, 0, 0.35);
    /* Curtain X position is driven by scroll progress (0 = closed, 1 = fully
       open). JS sets `--nc-open` based on where the user is in the pinned
       scroll range. */
    will-change: transform;
}
.nc_curtain_left {
    left: 0;
    transform-origin: left top;
    transform: translateX(calc(var(--nc-open, 0) * -100%)) skewY(calc(var(--nc-open, 0) * -8deg));
}
.nc_curtain_right {
    right: 0;
    transform-origin: right top;
    transform: translateX(calc(var(--nc-open, 0) * 100%)) skewY(calc(var(--nc-open, 0) * 8deg));
}

/* Top valance — just the gold scallop trim sitting at the very top of the
   section (no red velvet above it). */
.nc_valance {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    transform-origin: top center;
    /* Y is driven by scroll: at 0 (visible at top) when curtain is closed,
       slides up to -110% as the curtain opens. */
    transform: translateY(calc(var(--nc-open, 0) * -110%));
    z-index: 2;
}
.nc_valance_trim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background:
        radial-gradient(circle at 12px 0, #f5d56a 0, #f5d56a 6px, transparent 7px) repeat-x,
        linear-gradient(180deg, #f5d56a 0%, #c79a36 60%, #7d5b15 100%);
    background-size: 24px 14px, 100% 100%;
    /* Scalloped bottom — semi-circles cut from the gold trim */
    -webkit-mask-image: radial-gradient(circle at 12px 14px, transparent 8px, black 9px);
            mask-image: radial-gradient(circle at 12px 14px, transparent 8px, black 9px);
    -webkit-mask-size: 24px 14px;
            mask-size: 24px 14px;
    -webkit-mask-repeat: repeat-x;
            mask-repeat: repeat-x;
}

/* Stage spotlight — a soft cone that fades in once curtains part */
.nc_spotlight {
    position: absolute;
    top: -10%;
    left: 50%;
    width: 90%;
    height: 160%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 0%,
        rgba(255, 235, 200, 0.18) 0%,
        rgba(255, 235, 200, 0.06) 30%,
        transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* Confetti rains over the reveal — particles are spawned by JS once the
   curtain has parted past the trigger threshold. */
.nc_confetti_burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.nc_confetti {
    position: absolute;
    top: -24px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: nc_confetti_fall linear forwards;
}
.nc_confetti.is_circle {
    border-radius: 50%;
    width: 8px;
    height: 8px;
}
.nc_confetti.is_strip {
    width: 4px;
    height: 18px;
    border-radius: 1px;
}
@keyframes nc_confetti_fall {
    0%   { transform: translate3d(0, -40px, 0) rotate(0deg);   opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translate3d(var(--drift, 30px), 110vh, 0) rotate(var(--spin, 720deg)); opacity: 0; }
}

/* Spotlight opacity also tracks the curtain opening — fades in as the
   curtain parts. */
.nc_spotlight { opacity: var(--nc-open, 0); }

/* Respect reduced-motion users — show content instantly, no curtain */
@media (prefers-reduced-motion: reduce) {
    .nc_curtain, .nc_valance, .nc_spotlight, .nc_confetti_burst { display: none; }
}

/* On small screens the tassels look cramped — drop them */
@media (max-width: 575px) {
    .nc_valance { height: 44px; }
}

/* =====================================================================
   WHY ATTEND — six reasons to come, on a light backdrop
   ===================================================================== */
.why_attend {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    background: #f6f6f9;
}

/* Subtle decorative blobs in the background */
.wa_blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.wa_blob_a {
    top: -120px;
    right: -100px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(193, 33, 62, 0.08) 0%, transparent 65%);
}
.wa_blob_b {
    bottom: -140px;
    left: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(120, 8, 208, 0.06) 0%, transparent 65%);
}

.why_attend > .container { position: relative; z-index: 1; }

/* === Section heading === */
.wa_head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 30px;
}
.wa_title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a1a;
    margin: 0 0 14px;
    letter-spacing: -1px;
}
.wa_lead {
    font-family: "Urbanist", sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #4a4a52;
    margin: 0;
}
.wa_lead em {
    font-style: italic;
}

/* === Card grid === */
.wa_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Editorial image card. By default just title is visible at the bottom-left
   over a soft dark gradient. On hover the body text reveals upward, the
   title shifts up, the image warm-zooms with a red corner glow, and a
   thin red bar wipes in along the bottom edge. */
.wa_card {
    position: relative;
    height: 300px;
    border-radius: 18px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 14px 36px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease;
}
.wa_card_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s ease;
    z-index: 0;
}
/* Combined gradient overlay — red glow in the top-right + dark fade at the
   bottom so the title reads cleanly. */
.wa_card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(193, 33, 62, 0.30) 0%, transparent 50%),
        linear-gradient(180deg, transparent 30%, rgba(6, 3, 8, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease;
}
.wa_card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 8px 22px rgba(193, 33, 62, 0.25),
        0 32px 70px rgba(0, 0, 0, 0.40);
}
.wa_card:hover .wa_card_img {
    transform: scale(1.10);
    filter: brightness(1.05) saturate(1.1);
}

/* Content area — pinned to bottom-left, with a vertical red gradient bar
   to the left of the text acting as a column accent. */
.wa_card_inner {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 3;
    padding-left: 18px;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa_card_inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #c1213e 0%, #ff6f8c 100%);
    box-shadow: 0 0 12px rgba(193, 33, 62, 0.5);
    transform: scaleY(0.6);
    transform-origin: top center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa_card:hover .wa_card_inner::before { transform: scaleY(1); }

.wa_card_title {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa_card_text {
    font-family: "Urbanist", sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    /* Subtly hidden by default; reveals on hover */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease,
        padding-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.wa_card:hover .wa_card_text {
    max-height: 200px;
    opacity: 1;
    padding-top: 4px;
}
/* Slight upward nudge on the whole content block when revealed, so the
   title appears to "make room" for the body text rising in. */
.wa_card:hover .wa_card_inner {
    transform: translateY(-2px);
}

/* === Responsive === */
@media (max-width: 991px) {
    .why_attend { padding: 80px 0 90px; }
    .wa_head { margin-bottom: 48px; }
    .wa_title { font-size: 36px; }
    .wa_grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 575px) {
    .why_attend { padding: 64px 0 72px; }
    .wa_title { font-size: 28px; }
    .wa_lead { font-size: 15px; }
    .wa_grid { grid-template-columns: 1fr; gap: 16px; }
    .wa_card { height: 320px; }
    .wa_card_inner { left: 22px; right: 22px; bottom: 22px; }
    .wa_card_title { font-size: 21px; }
}

/* Touch devices have no hover — keep the body text and accent bar visible
   by default so users see the full content without needing a hover state. */
@media (hover: none) {
    .wa_card_text {
        max-height: 200px;
        opacity: 1;
        padding-top: 4px;
    }
    .wa_card_inner::before { transform: scaleY(1); }
}

/* =====================================================================
   WHO ATTENDS — eight role boxes over a dark photographic backdrop
   ===================================================================== */
.who_attends {
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    /* Image is fixed (parallax) so it stays put while content scrolls. The
       dark wash on top keeps the boxes and headline legible. */
    background-image:
        linear-gradient(135deg, rgba(10, 5, 8, 0.55) 0%, rgba(6, 3, 10, 0.45) 45%, rgba(5, 2, 8, 0.60) 100%),
        url('../../images/eduction_hub_bg.webp');
    background-position: center center;
    background-size: cover, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #e8e8ea;
}

/* Subtle decorative blobs */
.wh_blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.wh_blob_a {
    top: -160px;
    left: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(193, 33, 62, 0.10) 0%, transparent 60%);
}
.wh_blob_b {
    bottom: -140px;
    right: -100px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(120, 8, 208, 0.10) 0%, transparent 60%);
}

.who_attends > .container { position: relative; z-index: 1; }

/* === Heading === */
.wh_head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}
.wh_title {
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 14px;
    line-height: 1.15;
    letter-spacing: -1px;
}
.wh_lead {
    font-family: "Urbanist", sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: #b8b8bd;
    margin: 0;
}
.wh_lead em { font-style: italic; }

/* === Pill cloud — chips wrap naturally instead of a uniform grid === */
.wh_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
}

/* === Role chip === */
.wh_box {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px 10px 12px;
    background: rgba(15, 8, 12, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    overflow: hidden;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.4s ease;
}

/* === Icon — small circular tile inside the pill === */
.wh_box_icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(193, 33, 62, 0.30) 0%, rgba(193, 33, 62, 0.10) 100%);
    border: 1px solid rgba(193, 33, 62, 0.35);
    color: #ff8da3;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.wh_box_icon svg {
    width: 20px;
    height: 20px;
}
.wh_box:hover {
    transform: translateY(-3px);
    background: rgba(193, 33, 62, 0.85);
    border-color: rgba(193, 33, 62, 1);
    box-shadow:
        0 10px 24px rgba(193, 33, 62, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.45);
}
.wh_box:hover .wh_box_icon {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 1);
    color: #c1213e;
    transform: rotate(-12deg);
}
.wh_box:hover .wh_box_label { color: #ffffff; }

.wh_box_label {
    font-family: "Urbanist", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: 0.2px;
    transition: color 0.35s ease;
}

/* "And more…" box gets a soft red tint to differentiate it */
.wh_box--more {
    background: rgba(193, 33, 62, 0.20);
    border-color: rgba(193, 33, 62, 0.35);
}
.wh_box--more .wh_box_label {
    color: #ff6f8c;
    font-style: italic;
    font-weight: 700;
}
.wh_box--more .wh_box_icon {
    background: linear-gradient(135deg, rgba(193, 33, 62, 0.42) 0%, rgba(193, 33, 62, 0.20) 100%);
    border-color: rgba(255, 111, 140, 0.6);
    color: #ffd4dd;
}
.wh_box--more:hover {
    background: rgba(193, 33, 62, 0.30);
    border-color: rgba(193, 33, 62, 0.6);
}

/* === Responsive === */
@media (max-width: 991px) {
    /* Fixed backgrounds are buggy / poor performance on iOS — fall back to
       scroll on smaller / touch devices. */
    .who_attends {
        background-attachment: scroll;
        padding: 80px 0 90px;
    }
    .wh_head { margin-bottom: 44px; }
    .wh_title { font-size: 36px; }
    .wh_grid { gap: 12px; }
}
@media (max-width: 575px) {
    .who_attends { padding: 64px 0 72px; }
    .wh_title { font-size: 28px; }
    .wh_lead { font-size: 15px; }
    .wh_grid { gap: 10px; }
    .wh_box { padding: 8px 18px 8px 10px; gap: 10px; }
    .wh_box_icon { width: 32px; height: 32px; }
    .wh_box_icon svg { width: 18px; height: 18px; }
    .wh_box_label { font-size: 13px; }
}

/* ============================================================
   Knowledge Hub – Center-Active Slider (overrides custome.css blog_*)
   ============================================================ */
.blog_wrapper {
    background: #f5f6f8;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.blog_wrapper .container { position: relative; z-index: 1; }

.kh_head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 44px;
}
.kh_head_text { flex: 1; }
.kh_head_text a {
    text-decoration: none;
    display: inline-block;
}
.kh_head_btn { flex-shrink: 0; }

/* Knowledge Hub – Explore All button */
.kh_head_btn .button {
    display: inline-flex !important;
    align-items: center;
    flex-direction: row-reverse;
    background: #ffffff !important;
    color: #1a0e10 !important;
    border: 1.5px solid #1a0e10 !important;
    border-radius: 999px;
    padding: 6px 6px 6px 22px !important;
    gap: 14px !important;
    font-family: "Urbanist", sans-serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    line-height: 1;
    white-space: nowrap;
}
.kh_head_btn .button:hover {
    background: #c1213e !important;
    color: #ffffff !important;
    border-color: #c1213e !important;
    transform: translateY(-2px);
}
.kh_head_btn .button .button__icon-wrapper {
    width: 38px !important;
    height: 38px !important;
    background: #c1213e !important;
    color: #ffffff !important;
    flex-shrink: 0;
    transition: background 0.35s ease, color 0.35s ease;
}
.kh_head_btn .button:hover .button__icon-wrapper {
    background: #ffffff !important;
    color: #c1213e !important;
}
.kh_head_btn .button .button__icon-svg {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.kh_head_btn .button:hover .button__icon-svg:first-child {
    transform: translate(150%, -150%);
}
.kh_head_btn .button:hover .button__icon-svg--copy {
    transform: translate(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.blog_wrapper h2 {
    color: #1a0e10 !important;
    margin: 0 0 10px !important;
    font-size: 40px !important;
    line-height: 1.1;
    letter-spacing: -0.4px;
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    text-align: left !important;
}
.kh_lead {
    color: #6b5560;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    max-width: 640px;
}

/* === Slide card – default (side state) === */

.kh_slide {
    display: block;
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    box-shadow: none;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.5s ease;
    height: 380px;
    font-family: 'Inter', sans-serif;
}
.kh_slide_img {
    height: 190px;
    overflow: hidden;
    position: relative;
}
.kh_slide_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.kh_slide_img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.5s ease;
    pointer-events: none;
}
.kh_slide_body {
    padding: 22px 22px 24px;
    background: #ffffff;
    transition: background 0.5s ease, color 0.5s ease, transform 0.5s ease;
}
.kh_slide_body h3 {
    font-family: "Urbanist", sans-serif;
    font-size: 18px;
    line-height: 1.32;
    color: #1a0e10;
    margin: 0 0 10px;
    font-weight: 800;
    letter-spacing: -0.2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.4s ease;
}
.kh_slide_body p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b5560;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.4s ease;
}

/* === Center / active slide – text on image === */
.owl-item.center .kh_slide {
    height: 480px;
    box-shadow: none;
}
.owl-item.center .kh_slide_img {
    height: 100%;
}
.owl-item.center .kh_slide_img::after {
    background: linear-gradient(180deg,
        rgba(20,8,12,0) 0%,
        rgba(20,8,12,0.05) 30%,
        rgba(20,8,12,0.55) 65%,
        rgba(20,8,12,0.95) 100%);
}
.owl-item.center .kh_slide_img img { transform: scale(1.04); }
.owl-item.center .kh_slide_body {
    position: absolute;
    inset: auto 0 0 0;
    background: transparent;
    padding: 24px 26px 26px;
    z-index: 2;
}
.owl-item.center .kh_slide_body h3 {
    color: #ffffff;
    font-size: 20px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 6px;
}
.owl-item.center .kh_slide_body p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* === Owl chrome === */
.kh_slider.owl-carousel { position: relative; min-height: 520px; }
.kh_slider.owl-carousel .owl-stage-outer { padding: 6px 0 30px; min-height: 520px; }
.kh_slider.owl-carousel .owl-stage { display: flex; align-items: center; min-height: 484px; }
.kh_slider.owl-carousel .owl-item { transition: opacity 0.4s ease; }

.kh_slider.owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    left: -64px;
    right: -64px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    pointer-events: none;
    z-index: 5;
}
.kh_slider.owl-carousel .owl-nav button.owl-prev,
.kh_slider.owl-carousel .owl-nav button.owl-next {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(26, 14, 16, 0.18) !important;
    background: #ffffff !important;
    color: #1a0e10 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto;
    box-shadow: 0 8px 18px -10px rgba(20, 8, 12, 0.25);
}
.kh_slider.owl-carousel .owl-nav button.owl-prev:hover,
.kh_slider.owl-carousel .owl-nav button.owl-next:hover {
    background: #c1213e !important;
    border-color: #c1213e !important;
    color: #ffffff !important;
}
.kh_slider.owl-carousel .owl-nav button svg {
    width: 18px;
    height: 18px;
}
.kh_slider.owl-carousel .owl-nav button.disabled {
    opacity: 0.4;
}

/* === Knowledge Hub responsive === */
@media (max-width: 1199px) {
    .kh_slider.owl-carousel .owl-nav {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        justify-content: center;
        gap: 16px;
        margin-top: 18px;
    }
}
@media (max-width: 991px) {
    .blog_wrapper { padding: 72px 0 84px; }
    .blog_wrapper h2 { font-size: 32px !important; }
    .kh_head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 32px;
        gap: 18px;
    }
    .kh_lead { font-size: 14px; }
    .kh_slide { height: 440px; }
    .kh_slide_img { height: 220px; }
    .kh_slider.owl-carousel,
    .kh_slider.owl-carousel .owl-stage-outer { min-height: 480px; }
    .kh_slider.owl-carousel .owl-stage { min-height: 444px; }
}
@media (max-width: 575px) {
    .blog_wrapper h2 { font-size: 26px !important; }
    .kh_slide { height: 400px; }
    .kh_slide_img { height: 200px; }
    .kh_slide_body h3 { font-size: 17px; }
    .kh_slide_body p { -webkit-line-clamp: 3; line-clamp: 3; }
    .kh_slider.owl-carousel,
    .kh_slider.owl-carousel .owl-stage-outer { min-height: 440px; }
    .kh_slider.owl-carousel .owl-stage { min-height: 404px; }
}

/* ============================================================
   Testimonials – Dark + Image Collage Background
   ============================================================ */
.testimonials_wrapper {
    position: relative;
    overflow: hidden;
    background: #0c0608;
    padding: 100px 0 110px !important;
}

/* Collage layer */
.testimonial_collage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    z-index: 0;
    pointer-events: none;
}
.testimonial_collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.92) saturate(1.05);
    display: block;
    transition: opacity 0.7s ease;
}

/* Uniform overlay across the complete section */
.testimonials_wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
       radial-gradient(900px 380px at 0% 0%, rgb(193 33 62 / 83%), #06060600 60%), radial-gradient(800px 360px at 100% 100%, rgb(0 0 0 / 83%), transparent 65%), rgb(12 6 8 / 79%);
    z-index: 1;
    pointer-events: none;
}
.testimonials_wrapper > .container {
    position: relative;
    z-index: 2;
}

/* Lock layout: title left / slider right at every breakpoint */
.testimonials_wrapper .row {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
.testimonials_wrapper .testimonial-title {
    flex: 0 0 auto !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
}
.testimonials_wrapper #testimonialSlider {
    flex: 0 0 auto !important;
    width: 66.667% !important;
    max-width: 66.667% !important;
}

/* Title block */
.testimonials_wrapper h2 {
    color: #ffffff !important;
    font-family: "Urbanist", sans-serif !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px;
    margin: 0 0 18px !important;
    line-height: 1.1;
    text-align: left !important;
}
.testimonial-title { position: relative; }
.testimonial-title::before {
    content: "\201C";
    position: absolute;
    top: -38px;
    left: -10px;
    font-family: "Urbanist", sans-serif;
    font-size: 140px;
    line-height: 1;
    font-weight: 900;
    color: rgba(193, 33, 62, 0.55);
    pointer-events: none;
    z-index: 0;
}
.testimonial-title h2 { position: relative; z-index: 1; }
.owl-carousel.owl-drag .owl-item{
    border-radius: 20px;
}
/* Slider container */
.testimonials_wrapper #testimonialSlider {
    width: 100% !important;
    height: 600px !important;
    overflow: hidden;
    position: relative;
}
.testimonials_wrapper #testimonialSlider::before,
.testimonials_wrapper #testimonialSlider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 90px;
    z-index: 3;
    pointer-events: none;
}
/* .testimonials_wrapper #testimonialSlider::before {
    top: 0;
    background: linear-gradient(180deg, #0c0608 0%, rgba(12, 6, 8, 0) 100%);
}
.testimonials_wrapper #testimonialSlider::after {
    bottom: 0;
    background: linear-gradient(0deg, #0c0608 0%, rgba(12, 6, 8, 0) 100%);
} */

/* Slide cards – default (side state) */
.testimonials_wrapper #testimonialSlider .swiper-slide {
    background: rgba(20, 10, 14, 0.70) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px !important;
    padding: 26px 28px !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    opacity: 0.78 !important;
    transform: scale(0.96) !important;
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.6) !important;
}

/* Active slide */
.testimonials_wrapper #testimonialSlider .swiper-slide-active {
    background: linear-gradient(135deg, rgba(193, 33, 62, 0.25) 0%, rgba(20, 10, 14, 0.82) 70%) !important;
    border-color: rgba(193, 33, 62, 0.55) !important;
    border-left: 4px solid #c1213e !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    box-shadow: 0 24px 50px -22px rgba(193, 33, 62, 0.55) !important;
}

/* Quote text */
.testimonials_wrapper .testimonial-content p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: "Urbanist", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    margin: 0 0 18px !important;
}
.testimonials_wrapper #testimonialSlider .swiper-slide:not(.swiper-slide-active) .testimonial-content p {
    color: rgba(255, 255, 255, 0.80) !important;
}

/* Author block */
.testimonials_wrapper .testimonials_name h4 {
    color: #ff6b85 !important;
    font-family: "Urbanist", sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 4px !important;
    letter-spacing: -0.1px;
}
.testimonials_wrapper #testimonialSlider .swiper-slide-active .testimonials_name h4 {
    color: #ff8aa1 !important;
}
.testimonials_wrapper .testimonials_name h5 {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: "Urbanist", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 2px !important;
}
.testimonials_wrapper .testimonials_name h6 {
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: "Urbanist", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .testimonials_wrapper { padding: 72px 0 80px !important; }
    .testimonials_wrapper h2 { font-size: 34px !important; }
    .testimonial-title { margin-bottom: 36px; }
    .testimonial-title::before { font-size: 110px; top: -28px; }
    .testimonial_collage {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .testimonial_collage img:nth-child(n+10) { display: none; }
    .testimonials_wrapper #testimonialSlider { height: 520px !important; }
}
@media (max-width: 575px) {
    .testimonials_wrapper { padding: 56px 0 64px !important; }
    .testimonials_wrapper h2 { font-size: 22px !important; }
    .testimonial-title::before { font-size: 70px; top: -14px; }
    .testimonials_wrapper .testimonial-title {
        width: 30% !important;
        max-width: 30% !important;
    }
    .testimonials_wrapper #testimonialSlider {
        width: 70% !important;
        max-width: 70% !important;
        height: 460px !important;
    }
    .testimonial_collage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    .testimonials_wrapper #testimonialSlider .swiper-slide { padding: 18px 20px !important; }
    .testimonials_wrapper .testimonial-content p { font-size: 13.5px !important; }
}

/* ============================================================
   Glimpses & Key Highlights
   ============================================================ */
.glimpses_wrapper {
    background: #faf7f3;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.glimpses_wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 320px at 0% 0%, rgba(193, 33, 62, 0.06), transparent 60%),
        radial-gradient(800px 320px at 100% 100%, rgba(193, 33, 62, 0.05), transparent 65%);
    pointer-events: none;
}
.glimpses_wrapper .container { position: relative; z-index: 1; }

/* Header */
.gh_head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
.gh_eyebrow {
    display: inline-block;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c1213e;
    margin-bottom: 14px;
    position: relative;
    padding: 0 32px;
}
.gh_eyebrow::before,
.gh_eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 1.5px;
    background: #c1213e;
    transform: translateY(-50%);
}
.gh_eyebrow::before { left: 0; }
.gh_eyebrow::after { right: 0; }
.gh_title {
    font-family: "Urbanist", sans-serif;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.6px;
    font-weight: 800;
    color: #1a0e10;
    margin: 0 0 16px;
}
.gh_title span { color: #c1213e; }
.gh_lead {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #6b5560;
    margin: 0;
}

/* Scattered marquee gallery */
.gh_marquee {
    position: relative;
    margin: 0 -24px 56px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    overflow: hidden;
    padding: 36px 0;
}
.gh_marquee::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(193, 33, 62, 0.18) 0%, rgba(193, 33, 62, 0) 65%);
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

/* Centered phone — bezel only; transparent screen so cards stream through */
.gh_phone {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    width: 220px;
    pointer-events: none;
}
.gh_phone_inner {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19;
    background: transparent !important;
    background-color: transparent !important;
    border: 14px solid #1a1a1a;
    border-radius: 44px;
    box-shadow: 0 30px 60px rgba(20, 8, 12, 0.55);
}
.gh_phone_notch {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 0 0 16px 16px;
    z-index: 4;
}
.gh_phone_screen_glass { display: none; }
.gh_phone_homebar {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: 4px;
    background: rgba(20, 8, 12, 0.45);
    border-radius: 2px;
    z-index: 4;
}
.gh_row {
    overflow: hidden;
    margin-bottom: 18px;
}
.gh_row:last-child { margin-bottom: 0; }
.gh_row_2 { padding-left: 60px; }
.gh_row_3 { padding-left: 30px; }

.gh_track {
    display: inline-flex;
    gap: 18px;
    white-space: nowrap;
    will-change: transform;
}
.gh_row_1 .gh_track { animation: gh_marquee_left 45s linear infinite; }
.gh_row_2 .gh_track { animation: gh_marquee_right 55s linear infinite; }

.gh_marquee:hover .gh_track { animation-play-state: paused; }

@keyframes gh_marquee_left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes gh_marquee_right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

.gh_card {
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    border-radius: 14px;
    overflow: hidden;
    background: #1a0e10;
    transform: rotate(var(--rot, 0deg));
    box-shadow: 0 18px 36px -22px rgba(20, 8, 12, 0.40);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
    display: block;
    position: relative;
}
.gh_card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(20, 8, 12, 0.35) 100%);
    pointer-events: none;
}
.gh_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(1.05);
}
.gh_card:hover {
    transform: rotate(0deg) translateY(-4px) scale(1.05);
    box-shadow: 0 28px 50px -22px rgba(193, 33, 62, 0.5);
    z-index: 2;
}

/* CTA */
.gh_cta { text-align: center; }
.gh_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: transparent;
    color: #1a0e10;
    border: 1.5px solid #1a0e10;
    border-radius: 999px;
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.gh_cta_btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.35s ease;
}
.gh_cta_btn:hover {
    background: #c1213e;
    color: #ffffff;
    border-color: #c1213e;
    transform: translateY(-2px);
}
.gh_cta_btn:hover svg { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1199px) {
    .gh_title { font-size: 40px; }
    .gh_stat_num { font-size: 38px; }
}
@media (max-width: 991px) {
    .glimpses_wrapper { padding: 72px 0 84px; }
    .gh_head { margin-bottom: 40px; }
    .gh_title { font-size: 32px; }
    .gh_lead { font-size: 14.5px; }
    .gh_marquee { margin: 0 -16px 40px; padding: 28px 0; }
    .gh_card { width: 140px; height: 140px; }
    .gh_track { gap: 14px; }
    .gh_row { margin-bottom: 14px; }
    .gh_row_2 { padding-left: 40px; }
    .gh_row_3 { padding-left: 20px; }
    .gh_row_4 { padding-left: 30px; }
    .gh_phone { width: 220px; }
}
@media (max-width: 575px) {
    .glimpses_wrapper { padding: 60px 0 72px; }
    .gh_title { font-size: 26px; }
    .gh_marquee { margin: 0 -12px 32px; padding: 24px 0; }
    .gh_card { width: 110px; height: 110px; }
    .gh_track { gap: 12px; }
    .gh_row { margin-bottom: 12px; }
    .gh_row_2 { padding-left: 30px; }
    .gh_row_3 { padding-left: 14px; }
    .gh_row_4 { padding-left: 22px; }
    .gh_phone { width: 180px; }
    .gh_phone_inner { padding: 10px; border-radius: 36px; }
    .gh_phone_screen { padding: 26px 12px 12px; gap: 8px; }
    .gh_phone_logo { font-size: 16px; }
    .gh_phone_metanum { font-size: 14px; }
    .gh_phone_eyebrow { font-size: 7px; }
    .gh_cta_btn { padding: 12px 22px; font-size: 12px; }
}

/* =====================================================================
   Past Partners — uniform logo grid with checkerboard tiles.
   Odd column count (7) gives a clean checkerboard via :nth-child(odd|even).
   ===================================================================== */
section.partners.past_partners { padding: 60px 0 80px; background: #ffffff; }
.pp_grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}
.pp_tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 16px 18px;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pp_tile:nth-child(even) { background: #f5f5f5; }
.pp_tile img {
    max-width: 85%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.pp_tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    z-index: 1;
}
.pp_tile:hover img { transform: scale(1.06); }

@media (max-width: 1199px) {
    .pp_grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 767px) {
    .pp_grid { grid-template-columns: repeat(3, 1fr); }
    .pp_tile { padding: 14px; }
}
@media (max-width: 480px) {
    .pp_grid { grid-template-columns: repeat(2, 1fr); }
}