/* Base Styling & Variables */
        :root {
            --brand-orange: rgba(220, 97, 40, 1);
            --circle-black: #050505;
            --circle-grey: #333333;
            --text-white: #ffffff;
            --text-dark: rgba(45, 45, 45, 1);
        }

/*         body {
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        } */

        .Circle_scroll_Ps-spacer {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f4f4f4;
            font-family: 'Clash Display', sans-serif;
            font-size: 2rem;
            color: #888;
        }

        .Circle_scroll_Ps-wrapper {
            position: relative;
            width: 100%;
            /*height: 100vh;*/
            height: 100dvh;
            display: flex;
            align-items: center;
            overflow: hidden;
            background-color: #ffffff;
        }

        .Circle_scroll_Ps-font-clash {
            font-family: 'Clash Display', sans-serif;
        }

        /* 
           MATHEMATICALLY LOCKED DESKTOP GRID:
           This forces the exact same gaps you drew in red, preventing any overlapping.
        */
        .Circle_scroll_Ps-layout-grid {
            display: grid;
            /* Col 1: Heading (100px), Col 2: Card (up to 460px), Col 3: Circle (takes remaining space) */
            grid-template-columns: 100px minmax(360px, 780px) 1fr;
            gap: 6vw; /* Locks BOTH left and right gaps to be exactly identical */
            width: 100%;
            height: 100%;
            align-items: center;
            padding-left: 6vw; /* Matches the inner gaps for visual balance */
            z-index: 2;
        }

        .Circle_scroll_Ps-heading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .Circle_scroll_Ps-main-heading {
            color: var(--text-dark);
    transform: rotate(-90deg);
    white-space: nowrap;
    margin: 0;
    font-family: Clash Display;
    font-weight: 500;
    font-size: clamp(2.5rem, 1.2rem + 5.3333vw, 6rem);
    line-height: 100%;
    letter-spacing: 0%;
        }

        .Circle_scroll_Ps-card-stack {
            display: grid;
            position: relative;
            width: 100%;
            overflow: hidden; 
            border-radius: 2px;
           
           min-height: 580px;
            z-index: 5;
        }

        .Circle_scroll_Ps-card {
               grid-area: 1 / 1;
    background-color: #fcfcfc;
    background-image: url(/wp-content/uploads/2026/09/noise_car.png);
    padding: 2rem 3.5rem;
    visibility: hidden;
    align-self: start;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
        }

        #Circle_scroll_Ps-card-1 {
            visibility: visible;
        }

        .Circle_scroll_Ps-card-number {
                color: var(--brand-orange);
    margin-bottom: 2.5rem;
    font-family: Clash Display;
    font-weight: 400;
    font-size: clamp(3rem, 1.1429rem + 7.619vw, 8rem);
    line-height: 100%;
    letter-spacing: 0%;
        }

        .Circle_scroll_Ps-card-title {
                color: var(--text-dark);
    font-family: Clash Display;
    font-weight: 500;
    font-size: clamp(1.25rem, 0.7857rem + 1.9048vw, 2.5rem);
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 1rem !important;
        }

        .Circle_scroll_Ps-card-text {
               color: #000;
    max-width: 90%;
    font-family: Archivo;
    font-weight: 400;
    font-size: 20px;
    line-height: 152%;
    letter-spacing: 0%;
        }

        /* 
           CIRCLE WRAPPER:
           Holds the circle strictly inside the 3rd grid column so it can NEVER touch the card.
        */
        .Circle_scroll_Ps-circle-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .Circle_scroll_Ps-circle-container {
            position: absolute;
    left: 0;
    width: 100vh;
    height: 90vh;
    z-index: 1;
    pointer-events: none;
        }

        .Circle_scroll_Ps-svg-orientation {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .Circle_scroll_Ps-svg-element {
            width: 100%;
            height: 100%;
            transform-origin: center;
        }
        
        @media (min-width: 1200px) and (max-width: 1400px) {
            .Circle_scroll_Ps-main-heading {
                font-size: 90px;
            }
            .Circle_scroll_Ps-card-stack{
                min-height: 500px;
            }
            .Circle_scroll_Ps-card-title{
                font-size: 36px;
            }
        }

        /* -------------------------------------------
           MOBILE RESPONSIVE ADJUSTMENTS
           ------------------------------------------- */
        @media (max-width: 991.98px) {
            .Circle_scroll_Ps-wrapper {
                align-items: flex-start;
                       height: 100vh;
        height: 100dvh;
            }
            .Circle_scroll_Ps-layout-grid {
                display: flex;
                flex-direction: column;
                padding: 2rem 1.5rem;
                height: 100%;
                gap: 0;
            }
            .Circle_scroll_Ps-heading-container {
                width: 100%;
                justify-content: flex-start;
                margin-bottom: 1.5rem;
                margin-top: 0.5rem;
                height:auto;
            }
            .Circle_scroll_Ps-main-heading {
                transform: none;
                font-size: 3.5rem;
            }
            .Circle_scroll_Ps-card-stack {
                width: 100%;
                min-width: 0;
                min-height: 320px;
                z-index: 10;
            }
            .Circle_scroll_Ps-card {
                padding: 2rem 2rem;
            }
            .Circle_scroll_Ps-card-text {
                max-width: 100%;
                font-size: 1rem;
            }
            .Circle_scroll_Ps-circle-wrapper {
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                pointer-events: none;
            }
            .Circle_scroll_Ps-circle-container {
               top: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(55%);
        width: 100vw;
        height: 90vw;
            }
            .Circle_scroll_Ps-svg-orientation {
                transform: rotate(0deg); 
            }
        }