:root {
            --runway-angle: 78deg;
        }

        body {
            background-color: #FFFDF9;
            color: #26343D;
            -webkit-font-smoothing: antialiased;
        }

        /* Scrollytelling Tracks */
        .hero-track {
            height: 500vh;
            position: relative;
            background-color: #A9D6F0; /* Fallback */
        }
        
        .capacity-track {
            height: 380vh;
            position: relative;
        }

        .sticky-view {
            position: sticky;
            top: 0;
            height: 100svh;
            width: 100%;
            overflow: hidden;
        }

        /* Hero 3D World */
        #hero-runway-world {
            perspective: 800px;
            transform-style: preserve-3d;
        }

        #hero-runway {
            will-change: transform;
            transform-origin: bottom center;
            /* Update via JS without transition to avoid stutter */
            transition: none !important;
        }

        .runway-marker {
            position: absolute;
            left: 100%;
            transform-origin: bottom left;
            /* Counter-rotate to face camera */
            transform: rotateX(calc(var(--runway-angle) * -1));
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding-bottom: 4px;
            pointer-events: none;
        }

        .marker-tick {
            width: 16px;
            height: 3px;
            background-color: #123D59;
            margin-bottom: 6px;
        }

        .marker-text {
            color: #123D59;
            font-weight: 800;
            font-size: 1.2rem;
            line-height: 1;
            white-space: nowrap;
        }

        .marker-2400 .marker-tick { background-color: #EF4B4B; height: 4px; }
        .marker-2400 .marker-text { color: #EF4B4B; font-weight: 900; font-size: 1.5rem; }

        @media (min-width: 768px) {
            .marker-tick { width: 30px; height: 4px; }
            .marker-text { font-size: 1.8rem; }
            .marker-2400 .marker-text { font-size: 2.2rem; }
        }

        #hero-plane-wrapper {
            will-change: transform;
            transition: none !important;
        }
        
        #hero-cloud-layer {
            will-change: transform;
            transition: none !important;
        }

        /* Utilities */
        .tabular-num { font-variant-numeric: tabular-nums; }
        
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Tooltips */
        .hotspot-tooltip {
            opacity: 0;
            pointer-events: none;
            transform: translateY(10px) translateX(-50%);
            transition: all 0.3s ease;
        }
        .hotspot:hover .hotspot-tooltip,
        .hotspot:focus .hotspot-tooltip {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) translateX(-50%);
        }

        /* East-West Animation lines */
        .ew-line-anim {
            transform-origin: center;
            transform: scaleX(0);
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .ew-active .ew-line-anim {
            transform: scaleX(1);
        }