/* Desktop Parallax Landing Page Styles */

/* By default, hide desktop-only wrapper on mobile */
.desktop-parallax-wrapper {
    display: none;
}

@media (min-width: 769px) {
    body.landing-page #header-placeholder {
        display: block;
        min-height: 0;
        position: relative;
        z-index: 1000;
    }

    .mobile-only-home {
        display: none !important;
    }

    body.landing-page .site-header {
        z-index: 1200;
    }
    
    .desktop-parallax-wrapper {
        --aws-ink: #1E376C;
        --aws-deep-blue: #00075D;
        --aws-glass-panel: rgba(237, 244, 255, 0.74);
        --aws-glass-panel-soft: rgba(237, 244, 255, 0.38);
        --aws-glass-edge: rgba(255, 255, 255, 0.56);
        --aws-panel-shadow: 0 28px 90px rgba(0, 38, 87, 0.18);
        --aws-gradient-border: conic-gradient(
            from 90deg at 50% 50%,
            #FAFE00 3%,
            #FF6F08 14%,
            #006AFF 31%,
            #1500FF 42%,
            #006AFF 50%,
            #1500FF 59%,
            #006AFF 71%,
            #FF6F08 89%,
            #FAFE00 98%
        );
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        background: #00075d;
        z-index: 1;
        margin-top: 0;
    }

    .desktop-parallax-home {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        transform-origin: top center;
        width: 1920px;
        height: 5520px;
        background: #00075d;
        pointer-events: auto;
    }

    /* Common layer styles */
    .parallax-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    /* --- HERO SECTION --- */
    .hero-sky-bg {
        position: absolute;
        width: 1920px;
        height: 1286px;
        left: 0;
        top: 0;
        background:
            linear-gradient(180deg, rgba(153, 214, 255, 0.06) 0%, rgba(75, 193, 244, 0.08) 54%, rgba(216, 241, 255, 0.22) 100%),
            url('../assets/landing-page/backgrounds/Hero-Section.webp') no-repeat center top;
        background-size: cover;
        will-change: transform;
        transform: translateY(calc(var(--scroll-top) * 0.18 * 1px));
        z-index: 1;
    }

    /* Hero Foreground Content */
    .hero-foreground {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1286px;
        z-index: 4;
        pointer-events: none;
    }

    .hero-content-panel {
        position: absolute;
        width: 1733.42px;
        height: 554.66px;
        left: 50%;
        top: 161px;
        transform: translateX(-50%);
        background:
            linear-gradient(180deg, rgba(158, 198, 255, 0.25) 0%, rgba(95, 119, 153, 0) 53.16%),
            radial-gradient(110% 70% at 50% 0%, rgba(255, 255, 255, 0.58) 0%, rgba(237, 246, 254, 0.38) 42%, rgba(237, 246, 254, 0.12) 100%);
        border: 1px solid var(--aws-glass-edge);
        border-radius: 31.3439px;
        box-shadow:
            0 28px 90px rgba(0, 38, 87, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 -28px 48px rgba(98, 161, 240, 0.18);
        backdrop-filter: blur(2.612px) saturate(1.08);
        -webkit-backdrop-filter: blur(2.612px) saturate(1.08);
        overflow: hidden;
        pointer-events: auto;
    }

    .hero-content-panel::before {
        content: "";
        position: absolute;
        inset: -26px -60px auto -60px;
        height: 160px;
        background:
            radial-gradient(ellipse at 18% 20%, rgba(255, 255, 255, 0.86) 0 18%, transparent 46%),
            radial-gradient(ellipse at 42% 12%, rgba(255, 255, 255, 0.72) 0 17%, transparent 44%),
            radial-gradient(ellipse at 70% 18%, rgba(255, 255, 255, 0.7) 0 16%, transparent 43%);
        filter: blur(18px);
        opacity: 0.4;
        pointer-events: none;
    }

    .hero-content-panel::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 9px;
        background: linear-gradient(90deg, rgba(78, 178, 238, 0), rgba(94, 190, 247, 0.75), rgba(78, 178, 238, 0));
        filter: blur(2px);
        pointer-events: none;
    }

    .hero-title-text {
        position: absolute;
        width: 1585px;
        left: 50%;
        top: 48.57px;
        transform: translateX(-50%);
        font-family: 'Poppins', sans-serif;
        font-style: italic;
        font-weight: 900;
        font-size: 73.895px;
        line-height: 1.18;
        text-align: center;
        letter-spacing: 0.03em;
        color: #FFFFFF;
        -webkit-text-stroke: 0;
        text-shadow:
            14.419px 9.012px 3.605px #031844,
            8.11px 3.605px 3.605px #315D8A;
        margin: 0;
        z-index: 2;
        white-space: nowrap;
    }

    .hero-subtitle-text {
        position: absolute;
        width: 1446.3px;
        left: 50%;
        top: 190.97px;
        transform: translateX(-50%);
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 41.7919px;
        line-height: 63px;
        text-align: center;
        background: linear-gradient(88.81deg, #00075D 11.56%, #000FC3 88.48%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        margin: 0;
        pointer-events: none;
        z-index: 2;
    }

    .hero-buttons-container {
        position: absolute;
        left: 531.93px;
        top: 352.92px;
        display: flex;
        flex-direction: row;
        gap: 78px;
        margin: 0;
        z-index: 2;
    }

    .btn-parallax-join, .btn-parallax-about {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 295.7px;
        height: 83.58px;
        border-radius: 28.732px;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        cursor: pointer;
    }

    .btn-parallax-join {
        background: linear-gradient(180deg, #FFF051 0%, #FE9206 100%);
        border: 1.3px solid #FE9206;
        box-shadow: 0px 0px 57.464px rgba(254, 202, 51, 1);
    }
    
    .btn-parallax-join:hover {
        transform: translateY(-4px) scale(1.03);
        box-shadow: 0px 0px 57.4639px #FECA33;
    }
    
    .btn-parallax-join span {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 31.3439px;
        line-height: 47px;
        color: #FFFFFF;
        text-transform: capitalize;
    }

    .btn-parallax-about {
        background: transparent;
        border: 2px solid #006AFF;
        box-shadow: 0px 0px 57.464px rgba(0, 106, 255, 1);
    }
    
    .btn-parallax-about:hover {
        transform: translateY(-4px) scale(1.03);
        background: rgba(0, 106, 255, 0.1);
        box-shadow: 0px 0px 57.4639px #006AFF;
        border-color: #006AFF;
    }
    
    .btn-parallax-about span {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 31.3439px;
        line-height: 47px;
        color: #1E376C;
    }

    .section-transition-image {
        position: absolute;
        left: 50%;
        width: 2056px;
        height: auto;
        display: block;
        pointer-events: none;
        user-select: none;
        transform: translateX(-50%);
    }

    .hero-to-waw-transition {
        top: 1000px;
        z-index: 8;
        will-change: transform;
        transform: translateX(-50%) translateY(calc((var(--scroll-top) - 1006) * 0.12 * 1px)) scale(1.6);
    }

    .waw-to-expertise-band {
        position: absolute;
        width: 1920px;
        height: 150px;
        left: 0;
        top: 2114px;
        z-index: 6;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(0, 20, 29, 0) 0%,
            rgba(0, 13, 34, 0.62) 34%,
            rgba(0, 7, 93, 0.86) 58%,
            rgba(11, 93, 191, 0) 100%
        );
    }

    .waw-to-expertise-transition {
        width: 2920px;
        top: 2068px;
        z-index: 8;
        object-fit: contain;
        will-change: transform;
        filter: saturate(1.12) contrast(1.05);
        transform: translateX(-50%) translateY(calc((var(--scroll-top) - 2068) * 0.02 * 1px));
    }

    /* --- WHO ARE WE SECTION --- */
    .who-are-we-group {
        position: absolute;
        width: 1920px;
        height: 898.35px;
        left: 0px;
        top: 1278.94px;
        z-index: 7;
    }

    .who-are-we-group::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            linear-gradient(180deg, rgba(2, 19, 35, 0.08) 0%, rgba(0, 13, 23, 0.08) 46%, rgba(0, 22, 16, 0.48) 100%),
            url('../assets/landing-page/Who_Are_WE_BG.webp');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        z-index: 1;
        will-change: transform;
        transform: translateY(calc((var(--scroll-top) - 1278.94) * 0.12 * 1px));
        pointer-events: none;
    }

    .who-are-we-group::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 26% 28%, rgba(144, 205, 255, 0.25) 0 9%, transparent 25%),
            linear-gradient(90deg, rgba(0, 18, 20, 0.22), transparent 28%, transparent 70%, rgba(0, 12, 20, 0.22));
        z-index: 2;
        pointer-events: none;
    }

    .waw-title {
        position: absolute;
        width: 468px;
        height: 112px;
        left: calc(50% - 468px/2 - 573.62px);
        top: 178.83px;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 75px;
        line-height: 112px;
        color: #FFFFFF;
        text-shadow:
            0 0 7px rgba(130, 182, 255, 1),
            0 10px 28px rgba(0, 32, 71, 0.5);
        margin: 0;
        z-index: 9;
    }

    .waw-desc-box-outer {
        pointer-events: auto;
        position: absolute;
        width: 780px;
        height: 196.59px;
        left: 152.38px;
        top: 280.4px;
        background:
            linear-gradient(rgba(20, 126, 191, 0.48), rgba(2, 64, 62, 0.46)) padding-box,
            linear-gradient(180deg, rgba(68, 168, 255, 0.95), rgba(23, 80, 54, 0.95)) border-box;
        border: 1px solid transparent;
        border-radius: 20.0233px;
        z-index: 9;
        padding: 18.2px;
        box-sizing: border-box;
        box-shadow: 0 18px 60px rgba(0, 30, 50, 0.24);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .waw-desc-box-inner {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 14.5624px;
        padding: 20px 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .waw-desc-text {
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 20.0233px;
        line-height: 118%;
        text-align: center;
        color: #FFFFFF;
        margin: 0;
    }

    /* Spotlight Cards (DEPARTMENTS, OFFICES, VISION, MISSION) */
    .waw-card {
        box-sizing: border-box;
        position: absolute;
        width: 406.15px;
        height: 274.75px;
        top: 536.35px;
        background:
            rgba(255, 255, 255, 0.08) padding-box,
            var(--aws-gradient-border) border-box;
        border: 3px solid transparent;
        box-shadow:
            0 18px 40px rgba(0, 26, 50, 0.22),
            0 0 26px rgba(0, 106, 255, 0.16);
        border-radius: 13.9366px;
        z-index: 9;
        padding: 23.4px 24.3px;
        transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background 0.3s ease;
        text-decoration: none;
        overflow: hidden;
        transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
        transform-style: preserve-3d;
    }

    .waw-card:hover {
        transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(8px) scale(1.018);
        box-shadow:
            0 22px 48px rgba(0, 26, 50, 0.28),
            0 0 28px rgba(0, 106, 255, 0.18);
        background:
            rgba(255, 255, 255, 0.11) padding-box,
            var(--aws-gradient-border) border-box;
    }

    .waw-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(98, 161, 240, 0.45) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 5;
    }

    .waw-card:hover::after {
        opacity: 0.45;
    }

    .waw-card-inner {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background: var(--aws-glass-panel-soft);
        border: 1px solid rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 7.9638px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 20px;
        position: relative;
        z-index: 6;
    }

    .waw-card-title {
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 800; /* Stronger weight contrast */
        font-size: 27.8733px;
        line-height: 42px;
        text-align: center;
        letter-spacing: -0.02em;
        color: var(--aws-ink);
        margin: 0 0 10px 0;
    }

    .waw-card-desc {
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 400; /* Lighter body text for better contrast */
        font-size: 15.9276px;
        line-height: 160%;
        text-align: center;
        color: var(--aws-ink);
        margin: 0;
    }

    .waw-card-departments {
        left: 152.38px;
    }
    
    .waw-card-offices {
        left: 570.34px;
    }
    
    .waw-card-vision {
        left: 986.12px;
    }
    
    .waw-card-mission {
        left: 1404.08px;
    }

    .waw-mascot {
        position: absolute;
        width: 125.62px;
        height: 92.84px;
        left: 1671.94px;
        top: 804.43px;
        z-index: 10;
        object-fit: contain;
    }

    /* --- CLOUD EXPERTISE SECTION --- */
    .cloud-expertise-group {
        position: absolute;
        width: 1923px;
        height: 3290px;
        left: -3px;
        top: 2213px;
        background: linear-gradient(180deg, #13517d 0%, #0f3e5e 32%, #102f25 70%, #0f281e 100%);
        z-index: 5;
        overflow: hidden;
    }

    .expertise-bg-image {
        position: absolute;
        height: 100%;
        left: 0;
        right: 0;
        top: 0;
        background:
            linear-gradient(180deg, rgba(11, 93, 191, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%),
            url('../assets/landing-page/backgrounds/Cloud_Expertise_BG.webp') no-repeat center top;
        background-size: cover;
        opacity: 1.0;
        z-index: 1;
        will-change: transform;
        transform: translateY(calc((var(--scroll-top) - 2213) * 0.1 * 1px));
    }

    .exp-leafy-frame-top {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 1040px;
        top: 34px;
        z-index: 5;
        pointer-events: none;
        overflow: hidden;
        will-change: transform;
        transform: translateY(calc((var(--scroll-top) - 2213) * 0.06 * 1px));
    }

    .exp-leafy-frame-top::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('../assets/landing-page/CloudExperience_Top_layer.webp') no-repeat center top;
        background-size: cover;
        width: 100%;
        height: 100%;
        display: block;
    }

    .exp-staircase-transition-veil {
        position: absolute;
        left: 0;
        right: 0;
        top: 608px;
        height: 520px;
        z-index: 4;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(34, 135, 220, 0) 0%, rgba(18, 59, 64, 0.08) 24%, rgba(9, 33, 29, 0.26) 58%, rgba(9, 28, 24, 0.12) 100%),
            radial-gradient(circle at 50% 14%, rgba(174, 228, 255, 0.14) 0%, rgba(174, 228, 255, 0.05) 22%, rgba(174, 228, 255, 0) 48%),
            url('../assets/landing-page/backgrounds/Staircase_BG.webp') no-repeat center 18%;
        background-size: cover;
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.48) 44%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.48) 44%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0) 100%);
        opacity: 0.58;
    }

    .exp-staircase-transition-veil::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 54px;
        height: 124px;
        background:
            radial-gradient(circle at 22% 58%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.07) 16%, rgba(255, 255, 255, 0) 40%),
            radial-gradient(circle at 76% 54%, rgba(216, 241, 255, 0.14) 0%, rgba(216, 241, 255, 0.06) 14%, rgba(216, 241, 255, 0) 36%),
            linear-gradient(180deg, rgba(143, 209, 247, 0) 0%, rgba(143, 209, 247, 0.14) 38%, rgba(143, 209, 247, 0) 100%);
        filter: blur(16px);
        opacity: 0.44;
    }

    .exp-staircase-transition-veil::after {
        content: none;
    }

    .exp-staircase-scene {
        position: absolute;
        left: 0;
        right: 0;
        top: 760px;
        bottom: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(8, 28, 27, 0.18) 0%, rgba(10, 35, 30, 0.34) 12%, rgba(10, 28, 45, 0.22) 34%, rgba(8, 27, 54, 0.2) 100%),
            linear-gradient(90deg, rgba(5, 16, 23, 0.26) 0%, rgba(5, 16, 23, 0.08) 14%, rgba(255, 222, 139, 0.06) 50%, rgba(5, 16, 23, 0.08) 86%, rgba(5, 16, 23, 0.26) 100%),
            url('../assets/landing-page/backgrounds/Staircase_BG.webp') no-repeat center 18%;
        background-size: cover;
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.34) 8%, rgba(0, 0, 0, 1) 23%);
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.34) 8%, rgba(0, 0, 0, 1) 23%);
    }

    .exp-staircase-scene::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 50% 38%, rgba(162, 217, 255, 0.28) 0%, rgba(162, 217, 255, 0.12) 18%, rgba(162, 217, 255, 0) 44%),
            linear-gradient(180deg, rgba(121, 202, 244, 0.14) 0%, rgba(8, 27, 54, 0) 30%);
    }

    .exp-staircase-scene::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 18px;
        height: 190px;
        background:
            linear-gradient(180deg, rgba(4, 15, 12, 0.95) 0%, rgba(4, 15, 12, 0.6) 40%, rgba(4, 15, 12, 0) 100%),
            url('../assets/landing-page/GreenBushEdges.webp') no-repeat center top;
        background-size: 100% 100%, 112% 100%;
        opacity: 0.58;
        filter: brightness(0.2) saturate(0.4) contrast(1.1);
        pointer-events: none;
    }

    .exp-staircase-atmosphere {
        position: absolute;
        left: 0;
        right: 0;
        top: 956px;
        bottom: 0;
        z-index: 3;
        pointer-events: none;
        background:
            radial-gradient(circle at 18% 35%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 12%, rgba(255, 255, 255, 0) 28%),
            radial-gradient(circle at 73% 58%, rgba(153, 223, 255, 0.18) 0%, rgba(153, 223, 255, 0.07) 16%, rgba(153, 223, 255, 0) 35%),
            radial-gradient(circle at 85% 86%, rgba(56, 114, 182, 0.28) 0%, rgba(56, 114, 182, 0) 33%);
        mix-blend-mode: screen;
        opacity: 0.78;
    }

    /* Center Viewport Cards Container */
    .exp-centered-cards-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 6;
        pointer-events: none;
    }

    .exp-staircase-divider {
        position: absolute;
        left: 0;
        right: 0;
        top: 1008px;
        height: 270px;
        z-index: 6;
        pointer-events: none;
        background: none;
        box-shadow: none;
    }

    .exp-staircase-divider::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -40px;
        width: 2860px;
        height: 620px;
        background: url('../assets/landing-page/Green_Bush_Transition.webp') no-repeat center top;
        background-size: contain;
        transform: translateX(-50%);
        opacity: 0.98;
        filter: saturate(1.06) contrast(1.02);
    }

    .exp-staircase-divider::after {
        content: none;
    }

    .exp-staircase-cards-group {
        position: absolute;
        left: 0;
        top: 1606px;
        width: 100%;
        height: 1600px;
        z-index: 8;
        pointer-events: none;
    }

    /* Pathway title group */
    .expertise-title-group {
        position: absolute;
        width: 920px;
        height: 188px;
        left: 50%;
        top: 546px;
        transform: translateX(-50%);
        z-index: 6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        pointer-events: auto;
    }

    .exp-pathway-text {
        width: 100%;
        font-family: 'Poppins', sans-serif;
        font-style: italic;
        font-weight: 900;
        font-size: 29px;
        line-height: 1.1;
        text-align: center;
        color: #F5F5F5;
        text-shadow:
            0 2.07312px 2.07312px #1500FF,
            0 0 18px rgba(255, 255, 255, 0.55);
        margin: 0;
        position: relative;
        z-index: 1;
    }

    .exp-main-title {
        width: 100%;
        font-family: 'Poppins', sans-serif;
        font-style: italic;
        font-weight: 900;
        font-size: 68px;
        line-height: 1.02;
        text-align: center;
        letter-spacing: 0.03em;
        color: #FFFFFF;
        text-shadow: 8.7204px 3.87573px 3.87573px #315D8A, 15.5029px 9.68933px 3.87573px #031844;
        -webkit-text-stroke: 1px #000000;
        margin: 0;
        position: relative;
        z-index: 1;
    }

    /* Content Cards (What We Do, Fueling Tomorrow, What We Offer) */
    .exp-card {
        position: absolute;
        z-index: 1;
        pointer-events: auto;
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .exp-card:hover {
        transform: translateY(-10px) scale(1.015);
        filter: saturate(1.05);
    }

    .exp-card-shell {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 18px;
        border-radius: 32px;
        overflow: hidden;
        isolation: isolate;
        background:
            linear-gradient(150deg, rgba(47, 67, 86, 0.96) 0%, rgba(31, 47, 61, 0.95) 26%, rgba(101, 119, 132, 0.88) 58%, rgba(38, 50, 63, 0.97) 100%) padding-box,
            linear-gradient(145deg, rgba(255, 230, 170, 0.56), rgba(119, 186, 255, 0.52) 44%, rgba(17, 34, 58, 0.95) 100%) border-box;
        border: 1px solid transparent;
        box-shadow:
            0 26px 54px rgba(8, 20, 31, 0.45),
            0 14px 26px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }

    .exp-card-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 18% 14%, rgba(255, 228, 159, 0.23) 0%, rgba(255, 228, 159, 0) 28%),
            radial-gradient(circle at 76% 22%, rgba(124, 206, 255, 0.22) 0%, rgba(124, 206, 255, 0) 32%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
        z-index: 0;
        pointer-events: none;
    }

    .exp-card-shell::after {
        content: "";
        position: absolute;
        left: -4%;
        right: -4%;
        bottom: -2px;
        height: 30%;
        background: url('../assets/landing-page/GreenBushEdges.webp') no-repeat center bottom;
        background-size: 104% 100%;
        opacity: 0.76;
        z-index: 1;
        pointer-events: none;
    }

    .exp-card-side-foliage {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .exp-card-side-foliage::before,
    .exp-card-side-foliage::after {
        content: "";
        position: absolute;
        bottom: 9%;
        width: 19%;
        height: 42%;
        background: url('../assets/landing-page/GreenBushEdges.webp') no-repeat center center;
        background-size: 100% 100%;
        opacity: 0.68;
        filter: saturate(0.96) blur(0.15px);
    }

    .exp-card-side-foliage::before {
        left: -3%;
        transform: rotate(-92deg) scale(1.08);
        transform-origin: center;
    }

    .exp-card-side-foliage::after {
        right: -3%;
        transform: rotate(92deg) scale(1.08);
        transform-origin: center;
    }

    .exp-card-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        padding: 34px 38px 36px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background:
            linear-gradient(180deg, rgba(245, 248, 252, 0.92) 0%, rgba(226, 234, 241, 0.88) 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 -18px 36px rgba(67, 96, 122, 0.16);
        display: flex;
        flex-direction: column;
    }

    .exp-card-inner h3 {
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 800;
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: #193561;
        margin: 0 0 16px 0;
        text-wrap: balance;
    }

    .exp-card-inner p, .exp-card-inner ul {
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.7;
        color: #233b63;
        margin: 0;
    }

    .exp-card-inner ul {
        list-style-type: disc;
        padding-left: 22px;
        margin-top: 18px;
    }

    .exp-card-inner ul li {
        margin-bottom: 10px;
    }

    .exp-card-what-we-do {
        width: 592px;
        height: 312px;
        left: 156px;
        top: 0;
    }

    .exp-card-what-we-offer {
        width: 680px;
        height: 408px;
        left: 982px;
        top: 1006px;
    }

    /* Fueling Tomorrow Card (Rectangle 178 / 181) */
    .exp-card-fueling {
        width: 1074px;
        height: 396px;
        left: 420px;
        top: 488px;
    }

    .exp-card-fueling-title {
        font-size: 46px;
        line-height: 1.02;
        color: #102f59;
        margin: 0 0 18px 0;
        text-align: center;
        text-shadow: 0 10px 18px rgba(255, 236, 186, 0.16);
    }

    .exp-card-fueling-desc {
        font-size: 17px;
        line-height: 1.72;
        text-align: justify;
        letter-spacing: -0.01em;
        color: #22395e;
        margin: 0;
    }

    .exp-card-fueling .exp-card-shell {
        padding: 20px;
        border-radius: 38px;
        box-shadow:
            0 30px 62px rgba(8, 20, 31, 0.5),
            0 18px 34px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    .exp-card-fueling .exp-card-shell::after {
        left: -6%;
        right: -6%;
        height: 33%;
        background-size: 108% 100%;
        opacity: 0.84;
    }

    .exp-card-fueling .exp-card-side-foliage::before,
    .exp-card-fueling .exp-card-side-foliage::after {
        bottom: 7%;
        width: 22%;
        height: 46%;
        opacity: 0.76;
    }

    .exp-card-fueling .exp-card-inner {
        padding: 34px 50px 38px;
        border-radius: 28px;
        background:
            linear-gradient(180deg, rgba(245, 248, 252, 0.94) 0%, rgba(226, 234, 241, 0.9) 100%);
    }

    .exp-card-what-we-do .exp-card-shell::after {
        height: 24%;
        background-size: 92% 100%;
        opacity: 0.54;
    }

    .exp-card-what-we-do .exp-card-side-foliage::before,
    .exp-card-what-we-do .exp-card-side-foliage::after {
        bottom: 11%;
        width: 15%;
        height: 34%;
        opacity: 0.5;
    }

    .exp-card-what-we-offer .exp-card-shell::after {
        left: -7%;
        right: -7%;
        height: 32%;
        background-size: 116% 100%;
        opacity: 0.88;
    }

    .exp-card-what-we-offer .exp-card-side-foliage::before,
    .exp-card-what-we-offer .exp-card-side-foliage::after {
        bottom: 8%;
        width: 21%;
        height: 44%;
        opacity: 0.78;
    }

    /* Reveal animations & accessibility fallback */
    .js-enabled .reveal-element {
        opacity: 0;
        translate: 0 40px;
        transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), translate 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .js-enabled .reveal-element.reveal-active {
        opacity: 1;
        translate: 0 0;
    }

    /* Button diagonal sweep shimmers */
    .btn-parallax-join, .btn-parallax-about {
        position: relative;
        overflow: hidden;
    }
    .btn-parallax-join::after, .btn-parallax-about::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: skewX(-25deg);
        transition: none;
    }
    .btn-parallax-join:hover::after, .btn-parallax-about:hover::after {
        left: 150%;
        transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    @media (prefers-reduced-motion: reduce) {
        .js-enabled .reveal-element {
            translate: 0 0 !important;
            transition: opacity 0.3s ease !important;
        }
        .btn-parallax-join::after, .btn-parallax-about::after {
            display: none !important;
        }
        .waw-card {
            transform: none !important;
            transition: none !important;
        }
        .waw-card:hover {
            transform: scale(1.02) !important;
        }
    }

    /* Force all reveal elements inside the scaled parallax container to be visible */
    .desktop-parallax-home .reveal-element,
    .expertise-parallax-home .reveal-element {
        opacity: 1 !important;
        translate: 0 0 !important;
    }
}