/* =========================================================
           GLOBAL
           ========================================================= */

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            overflow-x: hidden;
            background: #f0f0f3;
            color: #151618;
        }

        img {
            max-width: 100%;
        }

        ::selection {
            background: #151618;
            color: #fff;
        }


        /* =========================================================
           SCROLL PROGRESS
           ========================================================= */

        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: #151618;
            z-index: 99999;
        }


        /* =========================================================
           CUSTOM CURSOR
           ========================================================= */

        .custom-cursor {
            position: fixed;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid rgba(21, 22, 24, .65);
            border-radius: 50%;
            pointer-events: none;
            z-index: 99998;
            transform: translate(-50%, -50%);

            transition:
                width .25s ease,
                height .25s ease,
                background .25s ease;
        }

        .custom-cursor.active {
            width: 38px;
            height: 38px;
            background: rgba(21, 22, 24, .08);
        }

        @media(max-width:767px) {
            .custom-cursor {
                display: none;
            }
        }


        /* =========================================================
           NAV
           ========================================================= */

        .nav-floating-pill {
            background: rgba(255, 255, 255, .84);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);

            box-shadow:
                0 18px 55px rgba(0, 0, 0, .08);
        }

        @media(max-width:900px) {
            .nav-floating-pill {
                display: none !important;
            }
        }

        .nav-floating-pill>a.nav-current {
            opacity: 1;
            font-weight: 800;
            text-decoration: underline;
            text-underline-offset: 6px;
        }


        /* =========================================================
           REVEAL
           ========================================================= */

        .reveal {
            opacity: 0;
            transform: translateY(45px);

            transition:
                opacity .85s ease,
                transform .9s cubic-bezier(.22, 1, .36, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .about-reveal {
            opacity: 0;
            transform: translateY(55px);

            transition:
                opacity .9s ease,
                transform 1s cubic-bezier(.22, 1, .36, 1);
        }

        .about-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }


        /* =========================================================
           PILLS
           ========================================================= */

        .section-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            min-height: 34px;
            padding: 8px 18px;

            border: 1px solid rgba(21, 22, 24, .17);
            border-radius: 999px;

            background: transparent;
            color: #151618;

            font-size: 10px;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;

            white-space: nowrap;
        }

        .section-pill.dark {
            color: #fff;
            border-color: rgba(255, 255, 255, .20);
        }


        /* =========================================================
           ABOUT
           ========================================================= */

        #about {
            position: relative;
            overflow: hidden;

            background: #111216;
            color: #f8f8fb;
        }

        #about::before {
            content: "";

            position: absolute;
            inset: 0;

            pointer-events: none;
            opacity: .028;

            background:
                radial-gradient(#ffffff 1px,
                    transparent 1px);

            background-size:
                34px 34px;
        }

        .about-editorial-grid {
            display: grid;

            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 18px;
            align-items: start;
        }

        .about-editorial-card {
            position: relative;

            min-height: 515px;
            padding: 42px;

            overflow: hidden;

            background: #1d1f24;

            border: 0 !important;
            border-radius: 0;

            isolation: isolate;

            box-shadow:
                0 25px 75px rgba(0, 0, 0, .25);

            transition:
                transform .7s cubic-bezier(.22, 1, .36, 1),
                box-shadow .5s ease;
        }

        .about-editorial-card:nth-child(2) {
            margin-top: 85px;
        }

        .about-editorial-card:nth-child(3) {
            margin-top: 170px;
        }

        .about-editorial-card:hover {
            transform:
                translateY(-10px);

            box-shadow:
                0 40px 100px rgba(0, 0, 0, .36);
        }

        .about-editorial-card-image {
            position:
                absolute;

            inset:
                0;

            z-index:
                -1;

            opacity:
                0;

            transform:
                scale(1.08);

            transition:
                opacity .5s ease,
                transform 1s cubic-bezier(.22, 1, .36, 1);
        }

        .about-editorial-card-image::after {
            content:
                "";

            position:
                absolute;

            inset:
                0;

            background:
                linear-gradient(180deg,
                    rgba(10, 11, 14, .04),
                    rgba(10, 11, 14, .50) 52%,
                    rgba(10, 11, 14, .97) 100%);
        }

        .about-editorial-card:hover .about-editorial-card-image {
            opacity:
                1;

            transform:
                scale(1);
        }

        .about-editorial-card-image img {
            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            filter:
                grayscale(.18) saturate(.75);

            transition:
                transform 1.1s cubic-bezier(.22, 1, .36, 1),
                filter .5s ease;
        }

        .about-editorial-card:hover .about-editorial-card-image img {
            transform:
                scale(1.06);

            filter:
                grayscale(0) saturate(1.05);
        }

        .about-editorial-content {
            height:
                100%;

            position:
                relative;

            z-index:
                3;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                space-between;
        }

        .about-number {
            color:
                rgba(255, 255, 255, .34);

            font-size:
                11px;

            font-weight:
                600;

            letter-spacing:
                .08em;
        }

        .about-title {
            margin-top:
                55px;

            font-size:
                clamp(42px, 4vw, 65px);

            line-height:
                .92;

            letter-spacing:
                -.06em;

            color:
                #fff;

            font-weight:
                600;
        }

        .about-title em {
            font-family:
                Platypi,
                Georgia,
                serif;

            font-weight:
                400;

            font-style:
                italic;
        }

        .about-description {
            max-width:
                330px;

            margin-top:
                25px;

            color:
                rgba(255, 255, 255, .45);

            font-size:
                14px;

            line-height:
                1.7;

            transition:
                color .4s ease;
        }

        .about-editorial-card:hover .about-description {
            color:
                rgba(255, 255, 255, .76);
        }

        .about-tags {
            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                8px;

            margin-top:
                30px;
        }

        .about-tags span {
            display:
                inline-flex;

            align-items:
                center;

            padding:
                9px 13px;

            background:
                #ffffff;

            color:
                #151618;

            border:
                0;

            border-radius:
                999px;

            font-size:
                9px;

            font-weight:
                700;

            letter-spacing:
                .06em;

            text-transform:
                uppercase;

            transition:
                transform .25s ease;
        }

        .about-tags span:hover {
            transform:
                translateY(-2px);
        }


        /* =========================================================
           SERVICES
           DARK BACKGROUND
           ========================================================= */

        #services {
            position:
                relative;

            overflow:
                hidden;

            background:
                #111216;

            color:
                #f8f8fb;
        }

        #services::before {
            content:
                "";

            position:
                absolute;

            inset:
                0;

            pointer-events:
                none;

            opacity:
                .018;

            background:
                radial-gradient(#ffffff 1px,
                    transparent 1px);

            background-size:
                34px 34px;
        }

        #services>.max-w-7xl {
            position:
                relative;

            z-index:
                2;
        }


        /* =========================================================
           SERVICE SLIDER
           ========================================================= */

        .services-slides-scroll {
            width:
                100%;

            overflow-x:
                hidden;

            overflow-y:
                hidden;

            scrollbar-width:
                none;

            -ms-overflow-style:
                none;

            scroll-behavior:
                smooth;

            overscroll-behavior-x:
                contain;
        }

        .services-slides-scroll::-webkit-scrollbar {
            display:
                none;
        }

        .services-slides-scroll:active {
            cursor:
                grabbing;
        }

        .services-slides-track {
            display:
                flex;
        }

        .service-slide {
            width:
                100%;

            min-width:
                100%;

            flex:
                0 0 100%;

            scroll-snap-align:
                start;

            padding:
                45px 0 65px;
        }


        /* =========================================================
           SERVICE LEFT SIDE
           TRANSPARENT -� NO BLACK CARD
           ========================================================= */

        .service-slide-content {
            min-height:
                550px;

            padding:
                30px 0;

            background:
                transparent !important;

            color:
                #fff;

            border:
                0 !important;

            border-radius:
                0 !important;

            box-shadow:
                none !important;

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            opacity:
                0;

            transform:
                translateX(36px);

            transition:
                opacity .7s ease,
                transform .8s cubic-bezier(.22, 1, .36, 1);
        }

        .service-slide.is-active .service-slide-content {
            opacity:
                1;

            transform:
                translateX(0);
        }

        .service-index {
            color:
                rgba(255, 255, 255, .34);

            font-size:
                10px;

            font-weight:
                700;

            letter-spacing:
                .18em;

            text-transform:
                uppercase;
        }

        .service-slide h2 {
            color:
                #ffffff !important;
        }

        .service-copy {
            margin-top:
                28px;

            max-width:
                720px;

            color:
                rgba(255, 255, 255, .55);

            font-size:
                17px;

            line-height:
                1.8;
        }

        .service-tags {
            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                8px;

            margin-top:
                38px;
        }

        .service-tags span {
            background:
                #ffffff;

            color:
                #151618;

            padding:
                10px 14px;

            border-radius:
                999px;

            font-size:
                9px;

            font-weight:
                700;

            letter-spacing:
                .06em;

            text-transform:
                uppercase;

            transition:
                transform .25s ease,
                background .25s ease;
        }

        .service-tags span:hover {
            transform:
                translateY(-2px);

            background:
                #eeeeee;
        }


        /* =========================================================
           SERVICE RIGHT VISUAL
           ========================================================= */

        .service-slide-visual {
            opacity:
                0;

            transform:
                translateX(45px) scale(.97);

            transition:
                opacity .7s ease .08s,
                transform .8s cubic-bezier(.22, 1, .36, 1) .08s;
        }

        .service-slide.is-active .service-slide-visual {
            opacity:
                1;

            transform:
                translateX(0) scale(1);
        }

        .service-visual-card {
            min-height:
                550px;

            background:
                #e8eaeb !important;

            padding:
                30px;

            border:
                0 !important;

            border-radius:
                0;

            box-shadow:
                0 28px 80px rgba(0, 0, 0, .18);

            display:
                flex;

            align-items:
                center;
        }

        .service-ui {
            width:
                100%;

            background:
                #f7f7f8;

            padding:
                25px;

            color:
                #151618;

            border-radius:
                22px;
        }

        .service-ui-head {
            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            margin-bottom:
                25px;
        }

        .service-ui-label {
            font-size:
                10px;

            font-weight:
                700;

            color:
                #8c8f96;

            letter-spacing:
                .15em;

            text-transform:
                uppercase;
        }

        .service-ui-dot {
            width:
                10px;

            height:
                10px;

            border-radius:
                50%;

            background:
                #8eff3e;
        }

        .service-ui-dark {
            padding:
                22px;

            border-radius:
                20px;

            background:
                #151618;

            color:
                white;
        }

        .service-ui-light {
            padding:
                22px;

            border-radius:
                20px;

            background:
                #edf0ec;

            color:
                #151618;
        }


        /* =========================================================
           SERVICE TABS
           ========================================================= */

        .services-tabs-scroll {
            overflow-x:
                auto;

            scrollbar-width:
                none;

            -ms-overflow-style:
                none;

            padding:
                12px 0 18px;
        }

        .services-tabs-scroll::-webkit-scrollbar {
            display:
                none;
        }

        .services-tabs-track {
            display:
                flex;

            gap:
                18px;

            width:
                max-content;
        }

        .services-tabs-track .tab-btn {
            width:
                clamp(220px,
                    22vw,
                    320px);

            flex:
                0 0 clamp(220px,
                    22vw,
                    320px);

            padding:
                12px 0;

            text-align:
                left;

            border:
                0;

            border-top:
                2px solid rgba(255, 255, 255, .12);

            background:
                transparent;

            color:
                rgba(255, 255, 255, .38);

            transition:
                color .3s ease,
                border-color .3s ease;
        }

        .services-tabs-track .tab-btn:hover {
            color:
                rgba(255, 255, 255, .75);

            border-color:
                rgba(255, 255, 255, .35);
        }

        .services-tabs-track .tab-btn.active {
            color:
                #fff;

            border-color:
                #fff;
        }


        /* =========================================================
           PORTFOLIO
           ========================================================= */

        #work {
            width:
                100vw;

            margin-left:
                calc(50% - 50vw);

            margin-right:
                calc(50% - 50vw);

            background:
                #f0f0f3;

            padding:
                130px 0 140px;

            position:
                relative;

            overflow:
                hidden;
        }

        .portfolio-head {
            width:
                min(1280px,
                    calc(100vw - 80px));

            margin:
                0 auto 95px;
        }

        .portfolio-label {
            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            padding:
                9px 18px;

            border:
                1px solid rgba(21, 22, 24, .17);

            border-radius:
                999px;

            color:
                #151618;

            font-size:
                10px;

            font-weight:
                700;

            letter-spacing:
                .15em;

            text-transform:
                uppercase;
        }

        .portfolio-title {
            max-width:
                1150px;

            margin-top:
                30px;

            font-size:
                clamp(65px,
                    10vw,
                    150px);

            line-height:
                .82;

            letter-spacing:
                -.075em;

            font-weight:
                600;
        }

        .portfolio-title em {
            font-family:
                Platypi,
                Georgia,
                serif;

            font-style:
                italic;

            font-weight:
                400;
        }

        .portfolio-intro {
            max-width:
                650px;

            margin-top:
                35px;

            color:
                rgba(21, 22, 24, .50);

            font-size:
                16px;

            line-height:
                1.75;
        }


        /* =========================================================
           PORTFOLIO WALL
           1 + 3 TOGETHER
           2 OPPOSITE
           THEN MEET
           ========================================================= */

        .portfolio-stage {
            position:
                relative;

            width:
                100%;
        }

        .portfolio-wall {
            width:
                100%;

            display:
                grid;

            grid-template-columns:
                repeat(3,
                    minmax(0,
                        1fr));

            gap:
                5px;

            align-items:
                start;
        }

        .portfolio-column {
            min-width:
                0;

            display:
                flex;

            flex-direction:
                column;

            gap:
                5px;

            will-change:
                transform;
        }

        .portfolio-column:nth-child(2) {
            padding-top:
                115px;
        }

        .portfolio-column:nth-child(3) {
            padding-top:
                32px;
        }

        .portfolio-project {
            position:
                relative;

            overflow:
                hidden;

            background:
                #dfe1e5;

            opacity:
                0;

            transform:
                translateY(70px);

            transition:
                opacity .9s ease,
                transform 1s cubic-bezier(.22, 1, .36, 1);
        }

        .portfolio-project.visible {
            opacity:
                1;

            transform:
                translateY(0);
        }

        .portfolio-project img {
            width:
                100%;

            height:
                auto;

            display:
                block;

            object-fit:
                cover;

            transform:
                scale(1);

            transition:
                transform 1.1s cubic-bezier(.22, 1, .36, 1),
                filter .6s ease;
        }

        .portfolio-project:hover img {
            transform:
                scale(1.045);

            filter:
                saturate(1.06);
        }

        .portfolio-project.vertical img {
            aspect-ratio:
                4 / 5;
        }

        .portfolio-project.landscape img {
            aspect-ratio:
                4 / 3;
        }

        .portfolio-project.wide img {
            aspect-ratio:
                16 / 10;
        }

        .portfolio-project::after {
            content:
                "";

            position:
                absolute;

            inset:
                0;

            background:
                linear-gradient(180deg,
                    transparent 45%,
                    rgba(0, 0, 0, .58) 100%);

            opacity:
                0;

            pointer-events:
                none;

            transition:
                opacity .4s ease;
        }

        .portfolio-project:hover::after {
            opacity:
                1;
        }

        .portfolio-meta {
            position:
                absolute;

            left:
                25px;

            right:
                25px;

            bottom:
                23px;

            z-index:
                3;

            display:
                flex;

            flex-direction:
                column;

            align-items:
                flex-start;

            opacity:
                0;

            transform:
                translateY(12px);

            transition:
                opacity .4s ease,
                transform .45s ease;
        }

        .portfolio-project:hover .portfolio-meta {
            opacity:
                1;

            transform:
                translateY(0);
        }

        .portfolio-meta span:first-child {
            padding:
                8px 12px;

            background:
                #ffffff;

            color:
                #151618;

            border-radius:
                999px;

            font-size:
                9px;

            font-weight:
                800;

            letter-spacing:
                .12em;

            text-transform:
                uppercase;
        }

        .portfolio-meta strong {
            margin-top:
                10px;

            color:
                #ffffff;

            font-size:
                21px;

            font-weight:
                600;
        }

        .portfolio-bottom {
            width:
                min(1280px,
                    calc(100vw - 80px));

            margin:
                95px auto 0;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                30px;
        }

        .portfolio-bottom-copy {
            max-width:
                520px;

            color:
                rgba(21, 22, 24, .45);

            font-size:
                13px;

            line-height:
                1.7;
        }

        .portfolio-cta {
            display:
                inline-flex;

            align-items:
                center;

            gap:
                12px;

            padding:
                15px 21px;

            background:
                #151618;

            color:
                #fff;

            border-radius:
                999px;

            font-size:
                10px;

            font-weight:
                700;

            letter-spacing:
                .12em;

            text-transform:
                uppercase;

            transition:
                transform .3s ease,
                background .3s ease;
        }

        .portfolio-cta:hover {
            transform:
                translateY(-2px);

            background:
                #23262d;
        }


        /* =========================================================
           FAQ
           NO BLACK BOX
           NO WHITE BOX
           TRANSPARENT FAQ ROWS
           ========================================================= */

        #faq {
            background:
                #f0f0f3;

            color:
                #151618;

            position:
                relative;

            overflow:
                hidden;
        }

        .faq-inner {
            width:
                min(1180px,
                    calc(100% - 48px));

            margin:
                0 auto;
        }

        .faq-heading {
            max-width:
                850px;
        }

        .faq-list {
            margin-top:
                55px;
        }

        .faq-item {
            margin-bottom:
                0;

            /* REMOVE WHITE + BLACK */
            background:
                transparent !important;

            border:
                0 !important;

            border-top:
                1px solid rgba(21, 22, 24, .15) !important;

            border-radius:
                0 !important;

            overflow:
                visible;

            box-shadow:
                none !important;
        }

        .faq-item:last-child {
            border-bottom:
                1px solid rgba(21, 22, 24, .15) !important;
        }

        .faq-question {
            width:
                100%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                20px;

            padding:
                30px 0;

            border:
                0;

            background:
                transparent !important;

            color:
                #151618;

            text-align:
                left;

            cursor:
                pointer;
        }

        .faq-number {
            color:
                rgba(21, 22, 24, .38);

            font-size:
                10px;

            font-weight:
                700;

            letter-spacing:
                .17em;
        }

        .faq-icon {
            width:
                40px;

            height:
                40px;

            min-width:
                40px;

            border-radius:
                50%;

            display:
                grid;

            place-items:
                center;

            background:
                rgba(21, 22, 24, .07);

            color:
                #151618;

            font-size:
                21px;

            transition:
                transform .4s ease,
                background .3s ease,
                color .3s ease;
        }

        .faq-question:hover .faq-icon {
            background:
                rgba(21, 22, 24, .13);
        }

        .faq-answer {
            display:
                grid;

            grid-template-rows:
                0fr;

            transition:
                grid-template-rows .55s cubic-bezier(.22, 1, .36, 1);
        }

        .faq-answer>div {
            overflow:
                hidden;
        }

        .faq-answer-inner {
            padding:
                0 60px 0 60px;

            color:
                rgba(21, 22, 24, .55);

            font-size:
                14px;

            line-height:
                1.75;
        }

        .faq-item.is-open .faq-answer {
            grid-template-rows:
                1fr;
        }

        .faq-item.is-open .faq-answer-inner {
            padding-bottom:
                28px;
        }

        .faq-item.is-open .faq-icon {
            transform:
                rotate(45deg);

            background:
                #151618;

            color:
                #fff;
        }


        /* =========================================================
           FOOTER
           ========================================================= */

        #contact {
            position:
                relative;

            overflow:
                hidden;

            isolation:
                isolate;

            min-height:
                580px;

            background:
                #151618;

            color:
                #fff;
        }

        .footer-content {
            position:
                relative;

            z-index:
                5;
        }

        .footer-reveal {
            opacity:
                0;

            transform:
                translateY(65px);

            transition:
                opacity .95s ease,
                transform 1s cubic-bezier(.22, 1, .36, 1);
        }

        #contact.footer-visible .footer-reveal {
            opacity:
                1;

            transform:
                translateY(0);
        }

        .footer-title {
            transition-delay:
                .10s;
        }

        .footer-description {
            transition-delay:
                .20s;
        }

        .footer-links {
            transition-delay:
                .30s;
        }

        .footer-bottom {
            transition-delay:
                .40s;
        }


        /* =========================================================
           FALLING PILLS
           ========================================================= */

        /* =========================================================
           FOOTER FALLING PILLS -� RIGHT SIDE
           FALL â"�' MOVE RIGHT â"�' GATHER â"�' STACK â"�' BOUNCE
           ========================================================= */

        .footer-pills {
            position:
                absolute;

            inset:
                0;

            overflow:
                hidden;

            pointer-events:
                none;

            z-index:
                1;
        }

        .falling-pill {
            position:
                absolute;

            top:
                -120px;

            left:
                var(--start-left);

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            padding:
                9px 18px;

            border:
                1px solid rgba(255, 255, 255, .17);

            border-radius:
                999px;

            background:
                rgba(255, 255, 255, .055);

            color:
                rgba(255, 255, 255, .72);

            backdrop-filter:
                blur(8px);

            -webkit-backdrop-filter:
                blur(8px);

            font-size:
                10px;

            font-weight:
                700;

            line-height:
                1;

            letter-spacing:
                .14em;

            text-transform:
                uppercase;

            white-space:
                nowrap;

            opacity:
                0;

            will-change:
                top, left, transform, opacity;
        }

        /* All pills finish together on the RIGHT side. */
        #contact.footer-visible .falling-pill {
            animation:
                fallingPillRight var(--fall-duration) cubic-bezier(.22, 1, .36, 1) var(--fall-delay) infinite;
        }

        @keyframes fallingPillRight {

            /* Start from different positions across the right side */
            0% {
                top:
                    -120px;

                left:
                    var(--start-left);

                transform:
                    translateX(-50%) rotate(var(--fall-rotate)) scale(.90);

                opacity:
                    0;
            }

            8% {
                opacity:
                    .82;
            }

            /* Fall mostly vertically, staying on the RIGHT */
            35% {
                top:
                    30%;

                left:
                    var(--start-left);

                transform:
                    translateX(-50%) rotate(calc(var(--fall-rotate) * .75)) scale(1);

                opacity:
                    .88;
            }

            /* Begin moving toward the gathering point */
            55% {
                top:
                    47%;

                left:
                    calc(var(--stack-left) + var(--drift));

                transform:
                    translateX(-50%) rotate(calc(var(--fall-rotate) * .45)) scale(1.02);

                opacity:
                    .92;
            }

            /* Arrive at the right-side stack */
            70% {
                top:
                    calc(var(--stack-top) - var(--stack-y));

                left:
                    var(--stack-left);

                transform:
                    translateX(-50%) translateY(18px) rotate(var(--stack-rotate)) scale(1.04);

                opacity:
                    1;
            }

            /* Bounce on the pile */
            78% {
                top:
                    calc(var(--stack-top) - var(--stack-y));

                left:
                    var(--stack-left);

                transform:
                    translateX(-50%) translateY(-8px) rotate(var(--stack-rotate)) scale(1);

                opacity:
                    .98;
            }

            86% {
                transform:
                    translateX(-50%) translateY(3px) rotate(var(--stack-rotate)) scale(1);

                opacity:
                    .96;
            }

            92% {
                transform:
                    translateX(-50%) translateY(0) rotate(var(--stack-rotate)) scale(1);

                opacity:
                    .92;
            }

            100% {
                top:
                    calc(var(--stack-top) - var(--stack-y));

                left:
                    var(--stack-left);

                transform:
                    translateX(-50%) translateY(0) rotate(var(--stack-rotate)) scale(.97);

                opacity:
                    0;
            }
        }

        @media(max-width:767px) {
            .falling-pill {
                font-size:
                    8px;

                padding:
                    7px 12px;
            }

            .falling-pill {
                --stack-left:
                    78% !important;
            }
        }


        /* =========================================================
           FOOTER ORBIT
           ========================================================= */

        .footer-orbit {
            position:
                absolute;

            width:
                560px;

            height:
                560px;

            right:
                -250px;

            top:
                -290px;

            border:
                1px solid rgba(255, 255, 255, .06);

            border-radius:
                50%;

            pointer-events:
                none;

            z-index:
                0;
        }

        .footer-orbit::before,
        .footer-orbit::after {
            content:
                "";

            position:
                absolute;

            border:
                1px solid rgba(255, 255, 255, .035);

            border-radius:
                50%;
        }

        .footer-orbit::before {
            inset:
                80px;
        }

        .footer-orbit::after {
            inset:
                170px;
        }

        .footer-glow {
            position:
                absolute;

            width:
                300px;

            height:
                300px;

            left:
                50%;

            bottom:
                -220px;

            transform:
                translateX(-50%);

            border-radius:
                50%;

            background:
                radial-gradient(circle,
                    rgba(142, 255, 62, .07),
                    transparent 70%);

            z-index:
                0;
        }


        /* =========================================================
           RESPONSIVE
           ========================================================= */

        @media(max-width:1023px) {

            .about-editorial-grid {
                grid-template-columns:
                    1fr 1fr;
            }

            .about-editorial-card:nth-child(2) {
                margin-top:
                    60px;
            }

            .about-editorial-card:nth-child(3) {
                grid-column:
                    1 / -1;

                margin-top:
                    0;
            }

            /* SERVICES ON TABLET / MOBILE: VERTICAL STACK */
            .services-slides-scroll {
                width: 100%;
                overflow-x: hidden;
                overflow-y: hidden;
                scroll-snap-type: none;
            }

            .services-slides-track {
                display: flex !important;
                flex-direction: row !important; width: auto !important; gap: 0 !important; }

            .service-slide {
                width: 100% !important;
                min-width: 100% !important;
                flex: 0 0 100% !important; scroll-snap-align: none; padding: 15px 0 35px !important;
                box-sizing: border-box !important;
                border-bottom: none !important; }

            .service-slide-content {
                min-height: auto !important;
                padding: 10px 0 !important;
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                display: flex !important;
                flex-direction: column !important;
            }

            .service-slide-visual {
                margin-top: 20px !important;
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                width: 100% !important;
            }

            .service-visual-card {
                min-height: auto !important;
                padding: 20px !important;
                border-radius: 22px !important;
            }

            .service-slide h2 {
                font-size: clamp(36px, 9vw, 56px) !important;
                line-height: 1.05 !important;
                margin-top: 12px !important;
            }

            .service-copy {
                font-size: 15px !important;
                line-height: 1.65 !important;
                margin-top: 14px !important;
                max-width: 100% !important;
            }

            .service-tags {
                margin-top: 20px !important;
                gap: 8px !important;
            }

            .portfolio-head,
            .portfolio-bottom {
                width:
                    calc(100vw - 48px);
            }

            .faq-answer-inner {
                padding-left:
                    45px;

                padding-right:
                    45px;
            }
        }


        @media(max-width:767px) {

            /* ABOUT */

            #about {
                padding:
                    80px 16px !important;
            }

            .about-editorial-grid {
                grid-template-columns:
                    1fr;

                gap:
                    14px;
            }

            .about-editorial-card,
            .about-editorial-card:nth-child(2),
            .about-editorial-card:nth-child(3) {

                margin-top:
                    0;

                min-height:
                    430px;
            }


            /* SERVICES */

            #services {
                padding:
                    50px 16px 65px !important;
            }

            .service-slide {
                padding:
                    10px 0 20px !important;
            }

            .service-slide-content {
                min-height:
                    auto !important;

                padding:
                    0 !important;
            }

            .service-slide h2 {
                font-size:
                    clamp(30px,
                        8.5vw,
                        42px) !important;

                line-height:
                    1.05 !important;
                
                margin-top:
                    8px !important;
            }

            .service-copy {
                font-size:
                    13.5px !important;

                line-height:
                    1.6 !important;

                margin-top:
                    10px !important;
            }

            .service-tags {
                margin-top:
                    16px !important;

                gap:
                    6px !important;
            }

            .service-tags span {
                padding:
                    7px 11px !important;

                font-size:
                    8px !important;
            }

            .service-slide-visual {
                margin-top:
                    16px !important;
            }

            .service-visual-card {
                min-height:
                    auto !important;

                padding:
                    14px !important;

                border-radius:
                    18px !important;
            }

            .service-ui {
                padding:
                    14px !important;

                border-radius:
                    16px !important;
            }

            .service-ui-dark,
            .service-ui-light {
                padding:
                    14px !important;
            }

            .services-tabs-track {
                gap: 8px;
            }

            .services-tabs-track .tab-btn {
                width: 175px;
                flex-basis: 175px;
                padding: 10px 12px;
            }


            /* PORTFOLIO */

            #work {
                padding:
                    90px 0 95px;
            }

            .portfolio-head {
                width:
                    calc(100vw - 32px);

                margin-bottom:
                    55px;
            }

            .portfolio-title {
                font-size:
                    clamp(58px,
                        16vw,
                        100px);
            }

            .portfolio-intro {
                font-size:
                    14px;
            }

            .portfolio-wall {
                grid-template-columns:
                    1fr;

                gap:
                    4px;
            }

            .portfolio-column,
            .portfolio-column:nth-child(2),
            .portfolio-column:nth-child(3) {

                padding-top:
                    0;

                gap:
                    4px;
            }

            .portfolio-project.vertical img,
            .portfolio-project.landscape img,
            .portfolio-project.wide img {

                aspect-ratio:
                    4 / 3;
            }

            .portfolio-meta {
                opacity:
                    1;

                transform:
                    translateY(0);
            }

            .portfolio-project::after {
                opacity:
                    1;
            }

            .portfolio-bottom {
                width:
                    calc(100vw - 32px);

                margin-top:
                    55px;

                flex-direction:
                    column;

                align-items:
                    flex-start;
            }


            /* FAQ */

            .faq-inner {
                width:
                    calc(100% - 32px);
            }

            .faq-question {
                padding:
                    23px 0;

                gap:
                    16px;
            }

            .faq-answer-inner {
                padding:
                    0 0 0 0;
            }

            .faq-item.is-open .faq-answer-inner {
                padding-bottom:
                    22px;
            }

            .faq-icon {
                width:
                    38px;

                height:
                    38px;

                min-width:
                    38px;
            }


            /* FOOTER */

            #contact {
                min-height:
                    620px;
            }

            .footer-orbit {
                width:
                    440px;

                height:
                    440px;

                right:
                    -280px;

                top:
                    -220px;
            }

            .falling-pill {
                font-size:
                    8px;

                padding:
                    8px 13px;
            }

        }


        @media(prefers-reduced-motion:reduce) {

            html {
                scroll-behavior:
                    auto;
            }

            *,
            *::before,
            *::after {
                animation:
                    none !important;

                transition:
                    none !important;
            }
        }