body {
                font-family: 'Inter', sans-serif;
                margin: 0;
            }

            /* commons  */
            .desktop {
                display: block;

                @media screen and (max-width: 1024px) {
                    & {
                        display: none;
                    }
                }
            }

            .mobile {
                display: none;

                @media screen and (max-width: 1024px) {
                    & {
                        display: block;
                    }
                }
            }

            /* Section 1 - Introduction */

            h2 {
                margin: 0px;
                font-size: 40px;
                color: #E5883B;
                text-align: center;
                font-weight: 700;
                line-height: 54px;
                margin-bottom: 24px;
            }

            /* Tablet & mobile: every standard H2 scales down to 30px */
            @media (max-width: 1024px) {
                h2 {
                    font-size: 30px;
                    line-height: 40px;
                }
            }

            p {
                margin: 0px;
                font-size: 20px !important;
                line-height: 31px !important;
            }

            .container::after,
            .container::before {
                content: unset;
            }

            .bold {
                font-weight: 700;
                text-transform: inherit !important;
            }

            .introduction {
                padding: 299px 0px 60px 0px;
                background-color: #fff;

                .intro_container {
                    display: flex;
                    justify-content: space-between;
                    align-items: stretch;
                    gap: 60px;
                    color: #fff;

                    h2 {
                        font-size: 28px;
                        font-weight: 700;
                        line-height: 38px;
                        color: #000;
                    }

                    p {
                        font-size: 20px !important;
                        font-weight: 400;
                        line-height: 31px !important;
                        margin-top: 20px;
                        color: #000;

                        span {
                            text-transform: none;
                            font-weight: 900;
                        }
                    }

                    p:first-child {
                        margin-top: 0;
                    }

                    .left-section {
                        width: 50%;
                        background: #EFEFEF;
                        padding: 30px 20px;
                    }

                    .right-section {
                        width: 50%;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            display: block;
                        }

                        img.intro-img-mobile {
                            display: none;
                        }
                    }
                }


                @media (max-width: 768px) {
                    padding: 40px 0px;
                    flex-direction: column;
                    gap: 30px;
                    margin-top: 120px;

                    .intro_container {
                        flex-direction: column;
                        gap: 23px;

                        .left-section,
                        .right-section {
                            width: 100%;
                        }

                        .left-section {
                            padding: 22px 16px;
                        }

                        h2 {
                            font-size: 20px;
                            line-height: 30px;
                            font-weight: 700;
                        }

                        p {
                            font-size: 16px !important;
                            line-height: 24px !important;
                            margin-top: 24px;
                            font-weight: 400;
                            color: #000;

                            span {
                                font-weight: 900;
                            }
                        }

                        p:first-child {
                            margin-top: 0;
                        }

                        .right-section {
                            img.intro-img-desktop {
                                display: none;
                            }

                            img.intro-img-mobile {
                                display: block;
                                width: 100%;
                                height: 214px;
                                object-fit: cover;
                            }
                        }
                    }
                }
            }

            /* Section 1 - Hero  */
            .hero {
                height: 100%;
                width: 100%;
                position: relative;
                z-index: 20;

                .img-container {
                    height: 100vh;
                    width: 100%;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }

                    img.banner-mobile {
                        display: none;
                    }
                }

                .text-container {
                    height: auto;
                    position: absolute;
                    bottom: -155px;
                    left: 50%;
                    transform: translateX(-50%);

                    .text-part {
                        filter: drop-shadow(-2px 22px 4px #414141);

                        width: 591px;
                        height: 518px;

                        .svg-layer {
                            /* position: absolute; */
                            inset: 0;
                            width: 100%;
                            height: 100%;
                            display: block;
                            z-index: 1;
                        }

                        .text-layer {
                            position: absolute;
                            inset: 0;
                            z-index: 2;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            h1 {
                                color: #FFF;
                                font-size: 40px;
                                font-style: normal;
                                font-weight: 900;
                                line-height: 60px;
                                text-transform: uppercase;
                                padding: 15px 40px 0px 40px;
                                max-width: 489px;
                            }

                            p {
                                color: #000;
                                font-size: 24px !important;
                                font-weight: 600;
                                line-height: 31px;
                                padding: 0px 40px 34px 40px;
                                max-width: 540px;
                            }
                        }
                    }
                }

                @media (max-width: 768px) {
                    & {
                        height: 100%;

                        .img-container {
                            height: auto;

                            img.banner-desktop {
                                display: none;
                            }

                            img.banner-mobile {
                                display: block;
                                height: auto;
                                aspect-ratio: 375 / 674;
                            }
                        }

                        .text-container {
                            bottom: -103px;

                            .text-part {
                                width: 325px;
                                height: auto;
                                aspect-ratio: 325 / 273;

                                .svg-layer {
                                    display: none;
                                }

                                background: url("../images/case-study-ldss-2/svg/hero-card-mobile.svg") no-repeat center / 100% 100%;

                                .text-layer {
                                    h1 {
                                        font-size: 20px;
                                        line-height: 28px;
                                        font-weight: 900;
                                        padding: 13px 22px 0 30px;
                                        max-width: 300px;
                                        margin-top: 0;
                                    }

                                    p {
                                        color: #000;
                                        font-size: 14px !important;
                                        font-weight: 600;
                                        line-height: 20px !important;
                                        padding: 0 22px 26px 30px;
                                        max-width: 290px;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /* Section 2 - Industry */
            .industry {
                padding: 60px 0px;

                .industry-head {
                    position: relative;

                    h2 {
                        font-weight: 900;
                        margin-bottom: 0;
                    }

                    .industry-head-shadow {
                        position: absolute;
                        top: calc(100% + 10px);
                        left: 50%;
                        transform: translateX(-50%);
                        width: 441px;
                        max-width: 90%;
                        height: auto;
                        display: block;
                        pointer-events: none;
                    }
                }

                .table {
                    margin-top: 24px;
                    overflow-x: auto;

                    .stats-table {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: 7px;
                        min-width: 900px;

                        .cell {
                            position: relative;
                            overflow: hidden;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            padding: 13px 12px;
                        }

                        /* Dark angled wedge shadow (Figma 3022:74) */
                        /* Top row (orange value cells): wedge at right edge, flipped H+V */
                        .value-cell::after {
                            content: "";
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 38px;
                            height: 100%;
                            background: url("../images/case-study-ldss-2/svg/stat-cell-shadow.svg") no-repeat center / 100% 100%;
                            transform: scale(-1, -1);
                            pointer-events: none;
                        }

                        /* Bottom row (grey label cells): wedge at start (left edge) */
                        .label-cell::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 38px;
                            height: 100%;
                            background: url("../images/case-study-ldss-2/svg/stat-cell-shadow.svg") no-repeat center / 100% 100%;
                            pointer-events: none;
                        }

                        .value-cell {
                            background-color: #E5883B;
                            min-height: 88px;

                            .value {
                                color: #fff;
                                font-size: 30px;
                                font-weight: 900;
                                line-height: 62px;
                                letter-spacing: 1.2px;
                                text-transform: uppercase;
                            }

                            .unit {
                                color: #fff;
                                font-size: 20px;
                                font-weight: 400;
                                line-height: 31px;
                            }
                        }

                        .label-cell {
                            background-color: #D2D3D5;
                            min-height: 98px;
                            color: #000;
                            font-size: 24px;
                            font-weight: 400;
                            line-height: 31px;
                        }
                    }
                }

                @media (max-width: 768px) {
                    padding: 30px 0;

                    .table .stats-table {
                        min-width: 860px;

                        .value-cell {
                            height: 60px;
                        }

                        .value-cell .value {
                            font-size: 16px;
                            line-height: 44px;
                        }

                        .value-cell .unit {
                            font-size: 16px;
                            line-height: 24px;
                        }

                        .label-cell {
                            font-size: 16px;
                            line-height: 24px;
                        }
                    }
                }
            }

            .problem {
                padding: 60px 0px;

                h2 {
                    text-align: left;
                    font-weight: 900;
                    margin-bottom: 40px;
                }

                .problem-container {
                    display: flex;
                    align-items: flex-end;
                    gap: 25px;

                    .left-section,
                    .right-section {
                        width: 50%;
                    }

                    .left-section {
                        img {
                            width: 100%;
                            height: auto;
                            display: block;
                            object-fit: cover;
                        }
                    }

                    .right-section {
                        display: flex;
                        flex-direction: column;
                        gap: 24px;
                        background: #EFEFEF;
                        border-radius: 1px;
                        padding: 25px 29px;

                        p {
                            font-size: 16px;
                            color: #000;
                            line-height: 32px !important;
                            margin: 0;

                            .bold {
                                font-weight: 900;
                            }
                        }
                    }
                }

                @media (max-width: 768px) {
                    padding: 40px 0px;

                    h2 {
                        margin-bottom: 24px;
                        text-align: center;
                    }

                    .problem-container {
                        flex-direction: column;
                        align-items: stretch;
                        gap: 24px;

                        .left-section,
                        .right-section {
                            width: 100%;
                        }

                        .right-section {
                            padding: 20px;
                        }
                    }
                }
            }


            .why-happen {
                padding: 60px 0px;

                .wcf-mobile {
                    display: none;
                }

                .wcf-heads {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 40px;
                    margin-bottom: 40px;
                }

                .wcf-head {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 16px;
                    height: 88px;
                    border-radius: 8px;
                    background-color: #E5893E;

                    img {
                        width: 43px;
                        height: 43px;
                        object-fit: contain;
                    }

                    span {
                        color: #fff;
                        font-size: 30px;
                        font-weight: 700;
                        line-height: 1;
                        letter-spacing: 1.2px;
                        text-transform: uppercase;
                    }
                }

                /* Flow diagram stage - scales proportionally to the 1246 x 611 Figma canvas */
                .wcf-stage-scroll {
                    overflow-x: auto;
                }

                .wcf-stage {
                    position: relative;
                    width: 100%;
                    min-width: 820px;
                    aspect-ratio: 1246 / 611;
                    container-type: inline-size;
                    margin: 0 auto;
                }

                .wcf-bracket {
                    position: absolute;
                    top: 0;
                    width: 64.85%;
                    height: auto;
                    display: block;
                    pointer-events: none;
                }

                .wcf-bracket-l {
                    left: 0;
                }

                .wcf-bracket-r {
                    left: 35.15%;
                }

                .wcf-dot {
                    position: absolute;
                    width: 1.93cqw;
                    height: 1.93cqw;
                    border-radius: 50%;
                    background-color: #6D6C71;
                }

                .wcf-item {
                    position: absolute;
                    display: flex;
                    align-items: start;
                    gap: 1.2cqw;

                    img {
                        height: 4.5cqw;
                        width: auto;
                        object-fit: contain;
                        flex-shrink: 0;
                    }

                    .wcf-text {
                        color: #000;
                        font-size: 1.606cqw !important;
                        line-height: 2.247cqw !important;

                        .bold {
                            font-weight: 700;
                        }
                    }
                }

                @media (max-width: 1024px) {
                    .wcf-heads {
                        gap: 16px;
                    }

                    .wcf-head span {
                        font-size: 24px;
                    }
                }

                @media (max-width: 768px) {
                    padding: 40px 0px;

                    /* Hide the desktop flow diagram + header pills */
                    .wcf-heads,
                    .wcf-stage-scroll {
                        display: none;
                    }

                    /* Mobile stacked stages */
                    .wcf-mobile {
                        display: flex;
                        flex-direction: column;
                        gap: 42px;
                    }

                    .wcf-stage-m {
                        display: flex;
                        flex-direction: column;
                        gap: 35px;
                    }

                    .wcf-head-m {
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        height: 77px;
                        border-radius: 8px;
                        background-color: #E5893E;
                        padding: 0 24px;

                        img {
                            width: 40px;
                            height: 40px;
                            object-fit: contain;
                            flex-shrink: 0;
                        }

                        span {
                            color: #fff;
                            font-size: 24px;
                            font-weight: 900;
                            line-height: 1;
                            letter-spacing: 0.96px;
                            text-transform: uppercase;
                        }
                    }

                    /* Card pinned to the exact Figma frame size so the SVG
                       renders 1:1 with no stretch/distortion. */
                    .wcf-card-m {
                        position: relative;
                        width: 322px;
                        max-width: 100%;
                        margin-inline: auto;
                    }

                    /* Exported Figma frame SVG at its native proportions */
                    .wcf-card-frame {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        display: block;
                        pointer-events: none;
                    }

                    /* two grey connector dots sitting in the frame's bottom gap */
                    .wcf-card-m::before,
                    .wcf-card-m::after {
                        content: "";
                        position: absolute;
                        bottom: -5px;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        background-color: #6D6C71;
                        z-index: 1;
                    }

                    .wcf-card-m::before {
                        left: calc(33% - 12px);
                    }

                    .wcf-card-m::after {
                        left: calc(55% - 5px);
                    }

                    .wcf-card-rows {
                        position: absolute;
                        inset: 0;
                        z-index: 2;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        gap: 20px;
                        padding: 0 22px;
                    }

                    /* Native Figma frame heights (width 322 : height N) */
                    .wcf-stage-m:nth-of-type(1) .wcf-card-m {
                        height: 306.5px;
                    }

                    .wcf-stage-m:nth-of-type(2) .wcf-card-m {
                        height: 531.5px;
                    }

                    .wcf-stage-m:nth-of-type(3) .wcf-card-m {
                        height: 433.5px;
                    }

                    .wcf-row-m {
                        display: flex;
                        align-items: center;
                        gap: 20px;

                        img {
                            width: 40px;
                            height: 40px;
                            object-fit: contain;
                            flex-shrink: 0;
                        }

                        p {
                            color: #000;
                            font-size: 16px !important;
                            font-weight: 400;
                            line-height: 29px !important;

                            .bold {
                                font-weight: 600;
                            }
                        }
                    }
                }
            }

            /* Section 6 - SM650 */
            .sm650 {
                padding: 60px 0px;

                .sm650-head {
                    position: relative;
                    margin-bottom: 40px;

                    h2 {
                        margin-bottom: 0;
                    }

                    .sm650-head-shadow {
                        display: none;
                    }
                }

                .sm650-content {
                    display: flex;
                    align-items: center;
                    gap: 41px;

                    .left-section {
                        width: 50%;
                        display: flex;
                        flex-direction: column;
                        gap: 40px;
                    }

                    .right-section {
                        width: 50%;

                        img {
                            width: 100%;
                            height: auto;
                            display: block;
                            object-fit: cover;
                        }
                    }
                }

                .sm650-intro,
                .sm650-outro {
                    color: #000;
                    line-height: 32px !important;

                    .bold {
                        font-weight: 700;
                    }
                }

                .sm650-badges {
                    display: flex;
                    justify-content: space-between;
                    gap: 40px;

                    .badge-1 {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 15px;
                        width: 101px;

                        img {
                            width: 101px;
                            height: 101px;
                            object-fit: contain;
                        }

                        p {
                            text-align: center;
                            font-weight: 600;
                            line-height: 32px !important;
                        }
                    }
                }

                @media (max-width: 768px) {
                    padding: 40px 0px;

                    .sm650-head {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 9px;
                        margin-bottom: 36px;

                        .sm650-head-shadow {
                            display: block;
                            width: 337px;
                            max-width: 100%;
                            height: auto;
                            pointer-events: none;
                        }
                    }

                    /* Stack + reorder: intro -> badges -> image -> outro */
                    .sm650-content {
                        flex-direction: column;
                        align-items: stretch;
                        gap: 28px;

                        /* let the left-section children join the column flow so
                           the image can slot between badges and outro */
                        .left-section {
                            display: contents;
                        }

                        .right-section {
                            width: 100%;
                            order: 3;

                            img {
                                width: 100%;
                                height: auto;
                                aspect-ratio: 427 / 370;
                                object-fit: cover;
                            }
                        }
                    }

                    .sm650-intro {
                        order: 1;
                        font-size: 16px !important;
                        line-height: 24px !important;
                        text-align: center;

                        .bold {
                            font-weight: 900;
                        }
                    }

                    .sm650-badges {
                        order: 2;
                        justify-content: center;
                        gap: 43px;

                        .badge-1 {
                            width: 100%;
                            gap: 16px;

                            img {
                                width: 80px;
                                height: 80px;
                                /* padding: 18px; */
                                border-radius: 50%;
                                background-color: #FFDDB8;
                                box-sizing: border-box;
                            }

                            p {
                                font-size: 14px !important;
                                font-weight: 900;
                                line-height: 20px !important;
                            }
                        }
                    }

                    .sm650-outro {
                        order: 4;
                        font-size: 16px !important;
                        line-height: 28px !important;
                        text-align: center;
                    }
                }
            }

            /* Section 7 - Comparison Table */
            .comparison {
                padding-block: 60px;

                .cmp-scroll {
                    overflow-x: auto;
                }

                .cmp-table {
                    position: relative;
                    display: grid;
                    grid-template-columns: 296fr 421fr 296fr;
                    gap: 7px;
                    min-width: 900px;
                }

                /* Soft grey drop-shadows down each column's right edge
                   (Figma 2988:459 / 456 / 457). The exact Figma SVG markup is
                   inlined in the HTML (see .cmp-col-shadow spans) so the blur
                   rasterizes crisply at native resolution — not scaled. */
                .cmp-col-shadow {
                    position: absolute;
                    top: 92px;
                    pointer-events: none;
                    z-index: 1;

                    svg {
                        display: block;
                        height: auto;
                    }
                }

                .cmp-col-shadow-1 {
                    /* right edge of column 1 (296 / 1028) */
                    left: calc(28.8% - 28px);
                }

                .cmp-col-shadow-2 {
                    /* right edge of column 2 (724 / 1028) */
                    left: calc(70.4% - 30px);
                }

                .cmp-col-shadow-3 {
                    /* right edge of column 3 (1027 / 1028) */
                    right: -20px;
                }

                .cmp-cell {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 12px 20px;
                    min-height: 76px;
                    font-size: 24px;
                    line-height: 31px;
                    color: #000;

                    &.head {
                        min-height: 102px;
                        color: #fff;
                        font-size: 30px;
                        line-height: 35px;
                        font-weight: 700;
                    }

                    &.head-1 {
                        background-color: #E79240;
                    }

                    &.head-2 {
                        background: linear-gradient(to right, #E89545, #ECA44E);
                    }

                    &.head-3 {
                        background-color: #EFA951;
                    }

                    &.light {
                        background-color: #E6E7E9;
                    }

                    &.dark {
                        background-color: #D2D3D5;
                    }

                    &.strong {
                        font-weight: 900;
                    }
                }

                @media (max-width: 768px) {
                    padding-block: 40px;

                    .cmp-table {
                        min-width: 640px;
                        gap: 5px;
                    }

                    .cmp-cell {
                        padding: 10px 12px;
                        min-height: 64px;
                        font-size: 16px;
                        line-height: 22px;

                        &.head {
                            min-height: 80px;
                            font-size: 20px;
                            line-height: 26px;
                        }
                    }
                }
            }

            /* Section 8 - Lightweighting Advantage */
            .lwa {
                padding-block: 60px;

                .lwa-head {
                    position: relative;
                    margin-bottom: 36px;

                    h2 {
                        margin-bottom: 0;
                    }

                    .lwa-head-shadow {
                        display: none;
                    }
                }

                .lwa-subtitle {
                    font-size: 24px !important;
                    font-weight: 500;
                    line-height: 36px !important;
                    color: #000;
                    text-align: center;
                    margin-bottom: 40px;
                }

                .lwa-scroll {
                    overflow-x: auto;
                }

                .lwa-table {
                    display: grid;
                    grid-template-columns: 275fr 184fr 185fr 174fr 180fr 206fr;
                    gap: 7px;
                    min-width: 1100px;
                }

                .lwa-cell {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 12px 16px;
                    min-height: 76px;
                    font-size: 24px;
                    line-height: 31px;
                    color: #000;

                    &.comp {
                        justify-content: flex-start;
                        text-align: left;
                    }

                    &.head {
                        min-height: 121px;
                        color: #fff;
                        font-size: 30px;
                        line-height: 35px;
                        font-weight: 600;
                    }

                    &.head.comp {
                        justify-content: flex-start;
                        text-align: left;
                    }

                    &.head-1 {
                        background-color: #E58A3C;
                    }

                    &.head-2 {
                        background-color: #E89343;
                    }

                    &.head-3 {
                        background-color: #EB9D4B;
                    }

                    &.head-4 {
                        background-color: #EBA54E;
                    }

                    &.head-5 {
                        background-color: #EEA850;
                    }

                    &.head-6 {
                        background-color: #EFB257;
                    }

                    &.light {
                        background-color: #E6E7E9;
                    }

                    &.dark {
                        background-color: #D2D3D5;
                    }

                    &.strong {
                        font-weight: 600;
                    }
                }

                .lwa-note {
                    margin-top: 24px;

                    .lwa-divider {
                        border-top: 1px solid #000;
                        margin-bottom: 24px;
                    }

                    p {
                        color: #000;
                        line-height: 32px !important;

                        .bold {
                            font-weight: 700;
                        }
                    }
                }

                @media (max-width: 768px) {
                    padding-block: 40px;

                    .lwa-head {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 4px;
                        margin-bottom: 8px;

                        .lwa-head-shadow {
                            display: block;
                            width: 327px;
                            max-width: 100%;
                            height: auto;
                            pointer-events: none;
                        }
                    }

                    .lwa-subtitle {
                        font-size: 16px !important;
                        line-height: 28px !important;
                        margin-bottom: 28px;
                    }

                    /* Figma mobile: fixed 137px x 57px cells, 5px gap */
                    .lwa-table {
                        min-width: 852px;
                        grid-template-columns: repeat(6, 137px);
                        gap: 5px;
                    }

                    .lwa-cell {
                        padding: 8px 10px;
                        min-height: 57px;
                        font-size: 12px;
                        line-height: 16px;

                        &.head {
                            min-height: 57px;
                            font-size: 16px;
                            line-height: 17px;
                            font-weight: 900;
                        }
                    }

                    .lwa-note {
                        margin-top: 20px;

                        p {
                            font-size: 16px !important;
                            line-height: 28px !important;

                            .bold {
                                font-weight: 900;
                            }
                        }
                    }
                }
            }

            /* Section 9 - Financial Picture */
            .fp {
                display: flex;
                flex-direction: column;
                gap: 80px;
                padding-block: 60px;

                .fp-top {
                    display: flex;
                    flex-direction: column;
                    gap: 40px;
                }

                .fp-head {
                    text-align: center;

                    .fp-subtitle {
                        font-size: 24px !important;
                        font-weight: 500;
                        line-height: 36px !important;
                        color: #000;

                        .bold {
                            font-weight: 900;
                        }
                    }
                }

                .fp-cards {
                    display: flex;
                    justify-content: center;
                    /* flex-wrap: wrap; */
                    gap: 20px;
                }

                .fp-card {
                    width: 224px;
                    min-height: 293px;
                    display: flex;
                    flex-direction: column;
                    border-radius: 18px;
                    border: 1px solid #E4E4E4;
                    box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.21);
                    overflow: hidden;
                    background: #fff;

                    .fp-card-top {
                        flex: 0 0 54.6%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 12px 14px;
                    }

                    .fp-value {
                        text-align: center;
                        font-size: 30px;
                        font-weight: 900;
                        line-height: 34px;
                        background: linear-gradient(to right, #FF953D, #E87E26);
                        -webkit-background-clip: text;
                        background-clip: text;
                        -webkit-text-fill-color: transparent;
                        color: transparent;
                    }

                    .fp-card-bottom {
                        flex: 1;
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 12px 14px;
                        background: #E5883B;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            border-left: 18px solid transparent;
                            border-right: 18px solid transparent;
                            border-top: 24px solid #fff;
                        }
                    }

                    .fp-label {
                        text-align: center;
                        color: #fff;
                        font-size: 20px;
                        line-height: 25px;
                    }
                }

                .fp-banner {
                    display: flex;
                    align-items: center;
                    gap: 40px;
                    padding: 40px;
                    border-radius: 4px;
                    background: #E5883B;

                    .fp-banner-content {
                        flex: 1;

                        .fp-banner-title {
                            color: #fff;
                            font-size: 30px !important;
                            font-weight: 600;
                            line-height: 39px !important;
                            margin-bottom: 44px;
                        }
                    }

                    .fp-features {
                        display: grid;
                        grid-template-columns: 1fr 1.3fr;
                        gap: 44px 30px;
                    }

                    .fp-feature {
                        display: flex;
                        align-items: center;
                        gap: 16px;

                        img {
                            height: 50px;
                            width: auto;
                            flex-shrink: 0;
                        }

                        p {
                            color: #fff;
                            font-size: 24px !important;
                            line-height: 36px !important;
                        }
                    }

                    .fp-banner-img {
                        width: 438px;
                        flex-shrink: 0;
                        aspect-ratio: 438 / 474;

                        img {
                            width: 100%;
                            height: auto;
                            display: block;
                            border-radius: 4px;
                        }
                    }

                    .fp-banner-img-mobile {
                        display: none;
                    }
                }

                @media (max-width: 1024px) {
                    gap: 50px;

                    .fp-banner {
                        flex-direction: column;
                        align-items: stretch;

                        .fp-banner-img {
                            width: 100%;
                        }
                    }
                }

                @media (max-width: 768px) {
                    padding-block: 40px;

                    .fp-head .fp-subtitle {
                        font-size: 16px !important;
                        line-height: 26px !important;
                    }

                    /* Cards scroll horizontally at mobile size (Figma 2992:799) */
                    .fp-cards {
                        justify-content: flex-start;
                        gap: 6px;
                        overflow-x: auto;
                    }

                    .fp-card {
                        width: 205px;
                        min-height: 240px;
                        flex-shrink: 0;

                        .fp-value {
                            font-size: 20px;
                            line-height: 27px;
                        }

                        .fp-card-bottom::before {
                            border-left: 13.5px solid transparent;
                            border-right: 13.5px solid transparent;
                            border-top: 18px solid #fff;
                        }

                        .fp-label {
                            font-size: 16px;
                            line-height: 25px;
                        }
                    }

                    .fp-banner {
                        padding: 24px;

                        /* Mobile order: title -> image -> features */
                        .fp-banner-img {
                            display: none;
                        }

                        .fp-banner-content .fp-banner-title {
                            font-size: 24px !important;
                            line-height: 38px !important;
                            margin-bottom: 24px;
                        }

                        .fp-banner-img-mobile {
                            display: block;
                            width: 100%;
                            margin-bottom: 24px;

                            img {
                                width: 100%;
                                height: auto;
                                display: block;
                                border-radius: 4px;
                            }
                        }

                        .fp-features {
                            grid-template-columns: 1fr;
                            gap: 24px;
                        }

                        .fp-feature {
                            img {
                                height: 40px;
                            }

                            p {
                                font-size: 18px !important;
                                line-height: 28px !important;
                            }
                        }
                    }
                }
            }

            /* Section 10 - OFC Case Study */
            .ofc {
                display: flex;
                flex-direction: column;
                gap: 60px;
                padding-block: 60px;

                .ofc-head {
                    text-align: center;

                    h2 {
                        margin-bottom: 40px;
                    }

                    .ofc-paras {
                        display: flex;
                        flex-direction: column;
                        gap: 24px;

                        p {
                            font-size: 24px !important;
                            font-weight: 500;
                            line-height: 36px !important;
                            color: #000;
                        }
                    }
                }

                .ofc-stats {
                    display: flex;
                    justify-content: center;
                    align-items: stretch;

                    .ofc-stat {
                        position: relative;
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: flex-start;
                        gap: 24px;
                        text-align: center;
                        padding: 0px 20px;

                        &:not(:last-child)::after {
                            content: "";
                            position: absolute;
                            top: 50%;
                            right: -84px;
                            transform: translateY(-50%);
                            width: 168px;
                            height: 200px;
                            background: url("../images/case-study-ldss-2/svg/ofc-stat-divider.svg") no-repeat center / contain;
                            pointer-events: none;
                            z-index: 1;
                        }

                        .ofc-value {
                            color: #E5883B;
                            font-size: 40px;
                            font-weight: 900;
                            line-height: 54px;
                        }

                        .ofc-label {
                            color: #000;
                            font-size: 24px;
                            font-weight: 500;
                            line-height: 31px;
                        }
                    }
                }

                @media (max-width: 768px) {
                    gap: 40px;
                    padding-block: 40px;

                    .ofc-head .ofc-paras p {
                        font-size: 16px !important;
                        line-height: 26px !important;
                    }

                    .ofc-stats {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 30px 0px;

                        .ofc-stat {
                            gap: 12px;

                            &:not(:last-child)::after {
                                content: none;
                            }

                            &:nth-child(odd) {
                                border-right: 1px solid #D9D9D9;
                            }

                            .ofc-value {
                                font-size: 30px;
                                line-height: 36px;
                            }

                            .ofc-label {
                                font-size: 16px;
                                line-height: 24px;
                            }
                        }
                    }
                }
            }

            /* Section 11 - Testimonial */
            .quote {
                padding-block: 60px;

                .quote-box {
                    background-color: #E5883B;
                    border-radius: 4px;
                    padding: 40px;
                    color: #fff;
                }

                .quote-text {
                    font-style: italic;
                    font-weight: 400;
                    font-size: 24px !important;
                    line-height: 32px !important;
                    color: #fff;
                }

                .quote-author {
                    font-weight: 600;
                    font-size: 24px !important;
                    line-height: normal !important;
                    color: #fff;
                    text-align: right;
                    margin-top: 40px;
                }

                @media (max-width: 768px) {
                    padding-block: 40px;

                    .quote-box {
                        padding: 24px;
                    }

                    .quote-text {
                        font-size: 16px !important;
                        line-height: 26px !important;
                    }

                    .quote-author {
                        font-size: 18px !important;
                        margin-top: 24px;
                    }
                }
            }

            /* Section 12 - Jindal Logistics */
            .jl {
                display: flex;
                flex-direction: column;
                gap: 40px;
                padding-block: 60px;

                .jl-head {
                    text-align: center;

                    h2 {
                        margin-bottom: 24px;
                    }

                    .jl-subtitle {
                        font-size: 24px !important;
                        font-weight: 500;
                        line-height: 36px !important;
                        color: #000;
                    }
                }

                .jl-stats {
                    width: 90%;
                    display: flex;
                    justify-content: space-between;
                    align-items: stretch;
                    margin-inline: auto;

                    .jl-stat {
                        position: relative;
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: flex-start;
                        gap: 24px;
                        text-align: center;
                        padding: 0px 30px;

                        &:not(:last-child)::after {
                            content: "";
                            position: absolute;
                            top: 50%;
                            right: -84px;
                            transform: translateY(-50%);
                            width: 168px;
                            height: 200px;
                            background: url("../images/case-study-ldss-2/svg/ofc-stat-divider.svg") no-repeat center / contain;
                            pointer-events: none;
                            z-index: 1;
                        }

                        img {
                            height: 80px;
                            width: auto;
                            object-fit: contain;
                        }

                        .jl-label {
                            color: #000;
                            font-size: 24px;
                            font-weight: 500;
                            line-height: 31px;
                        }

                        .jl-value {
                            color: #E5883B;
                            font-size: 36px;
                            font-weight: 900;
                            line-height: 1;
                            letter-spacing: 1.44px;
                        }
                    }
                }

                .jl-benefit {
                    display: flex;
                    justify-content: center;

                    p {
                        background-color: #E5883B;
                        color: #fff;
                        border-radius: 4px;
                        padding: 11px 45px;
                        font-size: 24px !important;
                        line-height: 32px !important;
                        text-align: center;

                        .bold {
                            font-weight: 600;
                        }
                    }
                }

                @media (max-width: 768px) {
                    gap: 30px;
                    padding-block: 40px;

                    .jl-head .jl-subtitle {
                        font-size: 16px !important;
                        line-height: 26px !important;
                    }

                    /* 2-up grid with slanted divider (matches OFC mobile) */
                    .jl-stats {
                        width: 100%;
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        gap: 40px 0;

                        .jl-stat {
                            gap: 16px;
                            padding: 0 12px;

                            /* slanted blur divider between the two items in a row */
                            &:nth-child(odd):not(:last-child)::after {
                                content: "";
                                position: absolute;
                                top: 50%;
                                left: auto;
                                right: -60px;
                                transform: translateY(-50%);
                                width: 120px;
                                height: 150px;
                                background: url("../images/case-study-ldss-2/svg/ofc-stat-divider.svg") no-repeat center / contain;
                                pointer-events: none;
                                z-index: 1;
                            }

                            /* a lone last item on its own row spans full width, centered */
                            &:last-child:nth-child(odd) {
                                grid-column: 1 / -1;
                            }

                            img {
                                width: 55px;
                                height: 55px;
                            }

                            .jl-label {
                                font-size: 16px;
                            }

                            .jl-value {
                                font-size: 28px;
                            }
                        }
                    }

                    .jl-benefit p {
                        font-size: 16px !important;
                        line-height: 26px !important;
                        padding: 12px 24px;
                    }
                }
            }

            /* Section 12.5 - Tipper Truck Image */
            .truck-image {
                padding: 60px 0px;

                img {
                    display: block;
                    width: 1005px;
                    max-width: 100%;
                    aspect-ratio: 1005 / 710;
                    height: auto;
                    object-fit: contain;
                    margin: 0 auto;
                }

                @media (max-width: 768px) {
                    padding: 40px 0px;
                }
            }

            /* Section 13 - SM650 vs Alternatives */
            .alt {
                padding-block: 60px;

                h2 {
                    margin-bottom: 40px;
                }

                .alt-scroll {
                    overflow-x: auto;
                }

                .alt-table {
                    display: grid;
                    grid-template-columns: 254fr 358fr 356fr 251fr;
                    gap: 7px;
                    min-width: 1100px;
                }

                .alt-cell {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 12px 16px;
                    min-height: 102px;
                    font-size: 24px;
                    line-height: 35px;
                    color: #000;

                    &.head {
                        color: #fff;
                        font-size: 30px;
                        line-height: 35px;
                        font-weight: 600;
                        letter-spacing: 1.2px;
                    }

                    &.head-1 {
                        background-color: #E79240;
                    }

                    &.head-2,
                    &.head-3 {
                        background: linear-gradient(to right, #E89545, #ECA44E);
                    }

                    &.head-4 {
                        background-color: #EFA951;
                    }

                    &.light {
                        background-color: #E6E7E9;
                    }

                    &.dark {
                        background-color: #D2D3D5;
                    }

                    &.strong {
                        font-weight: 900;
                    }
                }

                @media (max-width: 768px) {
                    padding-block: 40px;

                    .alt-table {
                        min-width: 760px;
                        gap: 5px;
                    }

                    .alt-cell {
                        padding: 10px 12px;
                        min-height: 80px;
                        font-size: 16px;
                        line-height: 24px;

                        &.head {
                            font-size: 20px;
                            line-height: 26px;
                        }
                    }
                }
            }

            /* Section 14 - Why This Matters for Fabricators */
            .fab {
                /* padding: 60px 0px; */
                background-color: #F7E2CD;

                .fab-box {
                    /* background-color: #F7E2CD; */
                    border-radius: 4px;
                    padding: 84px 60px 80px;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                .fab-head {
                    position: relative;
                    margin-bottom: 40px;

                    h2 {
                        margin-bottom: 0;
                    }

                    .fab-head-shadow {
                        position: absolute;
                        top: calc(100% + 14px);
                        left: 50%;
                        transform: translateX(-50%);
                        width: 595px;
                        max-width: 90%;
                        height: auto;
                        display: block;
                        pointer-events: none;
                    }
                }

                .fab-text {
                    max-width: 1065px;
                    font-size: 24px !important;
                    font-weight: 400;
                    line-height: 34px !important;
                    color: #000;
                    margin-bottom: 24px;

                    .bold {
                        font-weight: 900;
                    }
                }

                .fab-subhead {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 13px;
                    width: 560px;
                    max-width: 100%;
                    margin-top: 36px;
                    margin-bottom: 60px;

                    p {
                        font-size: 24px !important;
                        font-weight: 900;
                        line-height: 32px !important;
                        color: #000;
                        text-align: center;
                    }

                    .fab-subhead-line {
                        display: block;
                        width: 100%;
                        height: 2px;
                        background: #999;
                    }
                }

                .fab-items {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 30px;
                    width: 100%;

                    .fab-item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 20px;

                        img {
                            height: 66px;
                            width: auto;
                            object-fit: contain;
                        }

                        .fab-item-line {
                            display: block;
                            width: 100%;
                            height: 2px;
                            background: #999;
                        }

                        p {
                            font-size: 20px !important;
                            line-height: 28px !important;
                            color: #000;
                        }
                    }
                }

                @media (max-width: 768px) {
                    padding-block: 40px;
                    margin-inline: 15px;

                    .fab-box {
                        padding: 40px 20px;
                    }

                    .fab-head {
                        margin-bottom: 24px;

                        .fab-head-shadow {
                            top: calc(100% + 8px);
                        }
                    }

                    .fab-text {
                        font-size: 16px !important;
                        line-height: 26px !important;
                    }

                    .fab-subhead {
                        margin-bottom: 40px;

                        p {
                            font-size: 18px !important;
                        }
                    }

                    .fab-items {
                        grid-template-columns: 1fr 1fr;
                        gap: 30px 20px;

                        .fab-item {
                            img {
                                height: 54px;
                            }

                            p {
                                font-size: 16px !important;
                                line-height: 24px !important;
                            }
                        }
                    }
                }
            }

            /* Section 15 - Image */
            .image-section {
                padding: 60px 0px;

                img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }

            /* Section 16 - Building the Future of Coal Transport */
            .future {
                position: relative;
                margin-top: 60px;

                .future-bg {
                    width: 100%;
                    height: auto;
                    display: block;
                    padding-top: 300px;
                }

                .future-bg-mobile {
                    display: none;
                }

                .future-content {
                    position: absolute;
                    top: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                    padding: 20px 40px 0;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 40px;
                }

                .future-head {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;

                    h2 {
                        margin-bottom: 0;
                    }

                    .future-head-shadow {
                        width: 595px;
                        max-width: 90%;
                        height: auto;
                        display: block;
                        pointer-events: none;
                    }
                }

                .future-paras {
                    display: flex;
                    flex-direction: column;
                    gap: 35px;

                    p {
                        font-size: 24px !important;
                        font-weight: 500;
                        line-height: 34px !important;
                        color: #000;

                        .bold {
                            font-weight: 900;
                        }
                    }
                }

                .future-tagline {
                    font-size: 32px !important;
                    font-weight: 900;
                    line-height: 32px !important;
                    color: #000;

                    .jsl {
                        color: #E87E26;
                    }
                }

                @media (max-width: 1024px) {
                    min-height: 900px;
                    margin-top: 60px;

                    .future-bg {
                        padding-top: 0;
                    }


                    .future-content {
                        width: 100%;
                        top: 12px;
                        padding: 12px 24px 0;
                        gap: 20px;

                        h2 {
                            font-size: 26px !important;
                            line-height: 32px !important;
                        }
                    }

                    .future-head {
                        gap: 4px;

                        .future-head-shadow {
                            width: 360px;
                        }
                    }

                    .future-paras {
                        gap: 14px;

                        p {
                            font-size: 15px !important;
                            line-height: 22px !important;
                        }
                    }

                    .future-tagline {
                        font-size: 20px !important;
                        line-height: 26px !important;
                    }
                }

                @media (max-width: 768px) {

                    /* Swap to the tall portrait background (Figma 2806:549) */
                    .future-bg-desktop {
                        display: none;
                    }

                    .future-bg-mobile {
                        display: block;
                        width: 100%;
                        min-height: 900px;
                        object-fit: cover;
                    }

                    .future-content {
                        top: 45px;
                        padding: 0 21px;
                        gap: 42px;

                        h2 {
                            font-size: 30px !important;
                            line-height: 40px !important;
                        }
                    }

                    .future-head {
                        gap: 10px;

                        .future-head-shadow {
                            width: 273px;
                        }
                    }

                    .future-paras {
                        gap: 28px;

                        p {
                            font-size: 16px !important;
                            line-height: 28px !important;
                        }
                    }

                    .future-tagline {
                        font-size: 20px !important;
                        line-height: 32px !important;
                    }
                }
            }