/* -------------------------------------------------------
           ROOT
        ------------------------------------------------------- */

        :root {

            --bg: #070707;

            --bg-2: #0c0c0e;

            --surface: #111113;

            --surface-2: #171719;

            --white: #f4f0ed;

            --muted: #929096;

            --line: rgba(255,255,255,.10);

            --rose: #ff6f91;

            --pink: #ff9ab1;

            --violet: #9b7cff;

            --lavender: #c3b3ff;

            --ease:
                cubic-bezier(
                    .16,
                    1,
                    .3,
                    1
                );

        }




        /* -------------------------------------------------------
          PART 01 CSS HERO
        ------------------------------------------------------- */

        .hero-section {

            min-height: 100svh;

            position: relative;

            overflow: hidden;

            display: flex;

            align-items: center;

            padding-top: 120px;

            padding-bottom: 80px;

            background:

                radial-gradient(
                    circle at 75% 25%,
                    rgba(155,124,255,.10),
                    transparent 30%
                ),

                radial-gradient(
                    circle at 20% 70%,
                    rgba(255,111,145,.08),
                    transparent 28%
                ),

                var(--bg);

        }


        /* -------------------------------------------------------
           HERO GRID
        ------------------------------------------------------- */

        .hero-grid {

            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                minmax(420px, .8fr);

            gap: 80px;

            align-items: center;

            position: relative;

            z-index: 5;

        }


        /* -------------------------------------------------------
           HERO COPY
        ------------------------------------------------------- */

        .hero-label {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding:
                9px 13px;

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

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

            border-radius: 100px;

            color:
                rgba(
                    244,
                    240,
                    237,
                    .72
                );

            font-size: 10px;

            font-weight: 700;

            letter-spacing: .12em;

            text-transform: uppercase;

            backdrop-filter:
                blur(12px);

        }


        .status-dot {

            width: 7px;

            height: 7px;

            border-radius: 50%;

            background:
                #65d58a;

            box-shadow:
                0 0 0
                rgba(101,213,138,.7);

            animation:
                statusPulse 2s infinite;

        }


        @keyframes statusPulse {

            0% {

                box-shadow:
                    0 0 0
                    rgba(101,213,138,.7);

            }

            70% {

                box-shadow:
                    0 0 0 8px
                    rgba(101,213,138,0);

            }

            100% {

                box-shadow:
                    0 0 0
                    rgba(101,213,138,0);

            }

        }


        /* -------------------------------------------------------
           HERO TITLE
        ------------------------------------------------------- */

        .hero-title {

            margin-top: 30px;

            font-size:
                clamp(
                    70px,
                    9.3vw,
                    150px
                );

            line-height: .82;

            letter-spacing:
                -.075em;

            font-weight: 800;

        }


        .hero-title .thin {

            font-weight: 300;

            color:
                rgba(
                    244,
                    240,
                    237,
                    .75
                );

        }


        .hero-title .serif {

            font-family:
                Georgia,
                serif;

            font-style: italic;

            font-weight: 400;

            color:
                var(--pink);

        }


        .hero-title .stroke {

            color: transparent;

            -webkit-text-stroke:
                1.5px
                rgba(
                    244,
                    240,
                    237,
                    .7
                );

        }


        /* -------------------------------------------------------
           HERO DESCRIPTION
        ------------------------------------------------------- */

        .hero-description {

            max-width: 540px;

            margin-top: 35px;

            color:
                var(--muted);

            font-size: 15px;

            line-height: 1.8;

        }


        .hero-description strong {

            color: white;

        }


        /* -------------------------------------------------------
           HERO ACTIONS
        ------------------------------------------------------- */

        .hero-actions {

            display: flex;

            align-items: center;

            gap: 12px;

            flex-wrap: wrap;

            margin-top: 35px;

        }


        .primary-button {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 12px;

            min-height: 52px;

            padding:
                0 22px;

            border-radius:
                100px;

            background: white;

            color: #070707;

            font-size: 12px;

            font-weight: 800;

            transition:
                transform .4s var(--ease),
                box-shadow .4s,
                background .3s;

        }


        .primary-button:hover {

            transform:
                translateY(-4px);

            box-shadow:
                0 18px 45px
                rgba(
                    255,
                    255,
                    255,
                    .13
                );

        }


        .secondary-button {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            min-height: 52px;

            padding:
                0 21px;

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

            border-radius:
                100px;

            color:
                rgba(
                    244,
                    240,
                    237,
                    .82
                );

            font-size: 12px;

            font-weight: 700;

            transition:
                .4s var(--ease);

        }


        .secondary-button:hover {

            border-color:
                rgba(255,111,145,.7);

            color: white;

            background:
                rgba(
                    255,
                    111,
                    145,
                    .07
                );

            transform:
                translateY(-4px);

        }


        /* -------------------------------------------------------
           HERO META
        ------------------------------------------------------- */

        .hero-meta {

            display: flex;

            gap: 30px;

            margin-top: 55px;

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

            font-size: 9px;

            text-transform: uppercase;

            letter-spacing: .14em;

        }


        .hero-meta strong {

            display: block;

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

            font-size: 12px;

            letter-spacing:
                -.01em;

            margin-bottom: 5px;

        }


        /* =======================================================
           HERO ART
        ======================================================== */

        .hero-art {

            position: relative;

            min-height: 650px;

            display: grid;

            place-items: center;

        }


        /* -------------------------------------------------------
           BIG ORBIT
        ------------------------------------------------------- */

        .orbit-main {

            position: absolute;

            width:
                min(
                    620px,
                    48vw
                );

            aspect-ratio: 1;

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

            border-radius: 50%;

            animation:
                orbitRotate
                30s
                linear
                infinite;

        }


        @keyframes orbitRotate {

            to {

                transform:
                    rotate(360deg);

            }

        }


        /* -------------------------------------------------------
           ORBIT 2
        ------------------------------------------------------- */

        .orbit-main::before {

            content: "";

            position: absolute;

            inset: 11%;

            border:
                1px dashed
                rgba(
                    255,
                    111,
                    145,
                    .27
                );

            border-radius: 50%;

        }


        /* -------------------------------------------------------
           ORBIT 3
        ------------------------------------------------------- */

        .orbit-main::after {

            content: "";

            position: absolute;

            inset: 23%;

            border:
                1px solid
                rgba(
                    155,
                    124,
                    255,
                    .24
                );

            border-radius: 50%;

        }


        /* -------------------------------------------------------
           ORBIT DOTS
        ------------------------------------------------------- */

        .orbit-dot {

            position: absolute;

            width: 15px;

            height: 15px;

            border-radius: 50%;

        }


        .orbit-dot.one {

            top: 10%;

            left: 19%;

            background:
                var(--rose);

            box-shadow:
                0 0 30px
                var(--rose);

        }


        .orbit-dot.two {

            right: 5%;

            top: 47%;

            width: 10px;

            height: 10px;

            background:
                var(--violet);

            box-shadow:
                0 0 25px
                var(--violet);

        }


        .orbit-dot.three {

            bottom: 13%;

            left: 40%;

            width: 8px;

            height: 8px;

            background:
                white;

            box-shadow:
                0 0 20px white;

        }


        /* -------------------------------------------------------
           CENTRAL ART FRAME
        ------------------------------------------------------- */

        .hero-frame {

            position: relative;

            width:
                min(
                    370px,
                    70%
                );

            aspect-ratio:
                4 / 5;

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

            border-radius:
                190px
                190px
                28px
                28px;

            overflow: hidden;

            background:

                linear-gradient(
                    145deg,
                    #f0a8b7,
                    #8b6580 47%,
                    #222
                );

            box-shadow:

                0 50px 100px
                rgba(
                    0,
                    0,
                    0,
                    .5
                );

            transform:
                rotate(4deg);

            transition:
                transform
                .8s
                var(--ease);

        }


        .hero-frame:hover {

            transform:
                rotate(0deg)
                scale(1.025);

        }


        /* -------------------------------------------------------
           PORTRAIT ABSTRACT
        ------------------------------------------------------- */

        .portrait-bg {

            position: absolute;

            inset: 0;

            background:

                radial-gradient(
                    circle at 50% 25%,
                    #ffe2d7 0 8%,
                    transparent 8.5%
                ),

                radial-gradient(
                    ellipse at 50% 52%,
                    #b8787e 0 20%,
                    transparent 20.5%
                ),

                linear-gradient(
                    150deg,
                    #f1b6bb,
                    #d98d99 40%,
                    #705160 100%
                );

        }


        .portrait-head {

            position: absolute;

            width: 47%;

            aspect-ratio: .78;

            left: 26%;

            top: 19%;

            border-radius:
                48%
                48%
                44%
                44%;

            background:

                linear-gradient(
                    145deg,
                    #f1c1a7,
                    #c88778
                );

            box-shadow:

                inset
                -25px -20px
                50px
                rgba(
                    80,
                    30,
                    30,
                    .15
                );

        }


        .portrait-hair {

            position: absolute;

            width: 60%;

            height: 58%;

            left: 20%;

            top: 13%;

            border-radius:
                50%
                50%
                30%
                30%;

            background:

                linear-gradient(
                    145deg,
                    #292124,
                    #110e10
                );

            transform:
                rotate(-4deg);

            z-index: 2;

        }


        .portrait-face {

            position: absolute;

            width: 42%;

            height: 48%;

            left: 29%;

            top: 24%;

            border-radius:
                46%
                46%
                43%
                43%;

            background:
                #e8ad94;

            z-index: 3;

        }


        .portrait-eye {

            position: absolute;

            width: 8px;

            height: 4px;

            border-radius: 50%;

            background:
                #21191b;

            top: 44%;

            z-index: 5;

        }


        .portrait-eye.left {

            left: 40%;

        }


        .portrait-eye.right {

            left: 54%;

        }


        .portrait-mouth {

            position: absolute;

            width: 22px;

            height: 9px;

            border-bottom:
                2px solid
                #8c4e58;

            border-radius: 50%;

            top: 55%;

            left: 45%;

            z-index: 5;

        }


        .portrait-neck {

            position: absolute;

            width: 18%;

            height: 22%;

            left: 41%;

            top: 57%;

            background:
                #d99a82;

            z-index: 2;

        }


        .portrait-body {

            position: absolute;

            width: 82%;

            height: 45%;

            left: 9%;

            bottom: -10%;

            border-radius:
                48%
                48%
                8%
                8%;

            background:

                linear-gradient(
                    130deg,
                    #2d2230,
                    #111
                );

            z-index: 1;

        }


        /* -------------------------------------------------------
           ART LABEL
        ------------------------------------------------------- */

        .floating-label {

            position: absolute;

            right: 2%;

            bottom: 14%;

            width: 110px;

            height: 110px;

            border-radius: 50%;

            display: grid;

            place-items: center;

            text-align: center;

            background:
                var(--rose);

            color: #090909;

            font-size: 9px;

            font-weight: 900;

            line-height: 1.4;

            letter-spacing: .1em;

            text-transform:
                uppercase;

            transform:
                rotate(13deg);

            box-shadow:

                0 15px 50px
                rgba(
                    255,
                    111,
                    145,
                    .25
                );

            z-index: 10;

        }


        .floating-label::before {

            content: "";

            position: absolute;

            inset: -7px;

            border:
                1px dashed
                rgba(
                    255,
                    111,
                    145,
                    .7
                );

            border-radius: 50%;

            animation:
                labelRotate
                12s
                linear
                infinite;

        }


        @keyframes labelRotate {

            to {

                transform:
                    rotate(360deg);

            }

        }


        /* -------------------------------------------------------
           SIDE NUMBER
        ------------------------------------------------------- */

        .hero-number {

            position: absolute;

            right: -10px;

            top: 50%;

            transform:
                translateY(-50%)
                rotate(90deg);

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

            font-size: 9px;

            letter-spacing: .35em;

            text-transform: uppercase;

        }


        /* -------------------------------------------------------
           SMALL FLOATING CARD
        ------------------------------------------------------- */

        .floating-card {

            position: absolute;

            left: 0;

            bottom: 8%;

            width: 145px;

            padding: 15px;

            background:
                rgba(
                    17,
                    17,
                    19,
                    .78
                );

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

            backdrop-filter:
                blur(18px);

            border-radius: 14px;

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

            transform:
                rotate(-7deg);

        }


        .floating-card-top {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 14px;

        }


        .mini-circle {

            width: 28px;

            height: 28px;

            border-radius: 50%;

            background:

                linear-gradient(
                    135deg,
                    var(--rose),
                    var(--violet)
                );

        }


        .floating-card span {

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

            font-size: 8px;

            text-transform:
                uppercase;

            letter-spacing: .1em;

        }


        .floating-card strong {

            display: block;

            font-size: 17px;

            letter-spacing: -.05em;

        }


        /* -------------------------------------------------------
           SCROLL INDICATOR
        ------------------------------------------------------- */

        .scroll-indicator {

            position: absolute;

            bottom: 35px;

            left: 50%;

            transform:
                translateX(-50%);

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 10px;

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

            font-size: 8px;

            letter-spacing: .25em;

            text-transform: uppercase;

            z-index: 10;

        }


        .scroll-mouse {

            width: 20px;

            height: 32px;

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

            border-radius: 20px;

            position: relative;

        }


        .scroll-mouse::before {

            content: "";

            position: absolute;

            width: 3px;

            height: 6px;

            border-radius: 10px;

            background:
                var(--rose);

            left: 50%;

            top: 6px;

            transform:
                translateX(-50%);

            animation:
                scrollDot
                1.7s
                ease-in-out
                infinite;

        }


        @keyframes scrollDot {

            0% {

                opacity: 0;

                transform:
                    translate(-50%,0);

            }

            40% {

                opacity: 1;

            }

            100% {

                opacity: 0;

                transform:
                    translate(-50%,12px);

            }

        }


        /* =======================================================
           MOBILE
        ======================================================== */

        @media (max-width: 1000px) {

            .site-container {

                width:
                    min(
                        100% - 40px,
                        760px
                    );

            }


            .desktop-navigation {

                display: none;

            }


            .hero-grid {

                grid-template-columns:
                    1fr;

                gap: 50px;

            }


            .hero-copy {

                text-align: center;

            }


            .hero-description {

                margin-inline: auto;

            }


            .hero-actions {

                justify-content:
                    center;

            }


            .hero-meta {

                justify-content:
                    center;

            }


            .hero-art {

                min-height: 570px;

            }


            .orbit-main {

                width: 560px;

                max-width: 90vw;

            }


            .floating-card {

                left: 4%;

            }

        }


        @media (max-width: 600px) {

            .site-container {

                width:
                    calc(
                        100% - 28px
                    );

            }


            .main-header {

                padding:
                    18px 0;

            }


            .brand-symbol {

                width: 31px;

                height: 31px;

            }


            .hero-section {

                padding-top: 100px;

                padding-bottom: 80px;

            }


            .hero-title {

                font-size:
                    clamp(
                        58px,
                        18vw,
                        90px
                    );

            }


            .hero-description {

                font-size: 13px;

                line-height: 1.75;

            }


            .hero-meta {

                gap: 17px;

                margin-top: 40px;

            }


            .hero-art {

                min-height: 470px;

            }


            .hero-frame {

                width: 68%;

            }


            .orbit-main {

                width: 420px;

            }


            .floating-card {

                width: 125px;

                left: 0;

                bottom: 4%;

            }


            .floating-label {

                width: 88px;

                height: 88px;

                right: -2%;

                bottom: 13%;

                font-size: 7px;

            }


            .hero-number {

                display: none;

            }


            .scroll-indicator {

                display: none;

            }

        }


        /* -------------------------------------------------------
           REDUCED MOTION
        ------------------------------------------------------- */

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

            * {

                animation-duration:
                    .01ms !important;

                animation-iteration-count:
                    1 !important;

                scroll-behavior:
                    auto !important;

                transition-duration:
                    .01ms !important;

            }

        }




/* =========================================================
   PART 02 CSS
   CREATIVE MARQUEE + ABOUT
========================================================== */


/* =========================================================
   CREATIVE MARQUEE
========================================================== */

.creative-marquee-section {

    position: relative;

    overflow: hidden;

    padding:
        24px 0 28px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background:
        #09090a;

}


.marquee-row {

    overflow: hidden;

    width: 110%;

    margin-left: -5%;

}


.marquee-row + .marquee-row {

    margin-top: 8px;

}


.marquee-track {

    width: max-content;

    display: flex;

    align-items: center;

    gap: 28px;

    white-space: nowrap;

}


.marquee-row-one
.marquee-track {

    animation:
        marqueeForward
        28s
        linear
        infinite;

}


.marquee-row-two
.marquee-track {

    animation:
        marqueeReverse
        32s
        linear
        infinite;

}


.marquee-track span {

    font-size:
        clamp(
            24px,
            3.2vw,
            48px
        );

    font-weight: 800;

    letter-spacing:
        -.06em;

}


.marquee-track i {

    font-style: normal;

    color:
        var(--rose);

    font-size: 20px;

}


.outline-word {

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(
            244,
            240,
            237,
            .35
        );

}


@keyframes marqueeForward {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-38%);

    }

}


@keyframes marqueeReverse {

    from {

        transform:
            translateX(-38%);

    }

    to {

        transform:
            translateX(0);

    }

}



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

.about-section {

    position: relative;

    overflow: hidden;

    padding:
        150px 0
        120px;

    background:

        radial-gradient(
            circle at 80% 30%,
            rgba(
                155,
                124,
                255,
                .07
            ),
            transparent 28%
        );

}


.section-topline {

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 20px;

    margin-bottom: 75px;

}


.section-index,
.section-caption {

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

    font-size: 9px;

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

}


.section-line {

    height: 1px;

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

}



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

.about-grid {

    display: grid;

    grid-template-columns:
        1.05fr
        .95fr;

    gap:
        100px;

    align-items:
        end;

}


.eyebrow-text {

    color:
        var(--muted);

    font-size: 11px;

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

}


.eyebrow-text span {

    color:
        var(--rose);

    margin:
        0 7px;

}


.about-heading {

    margin-top: 28px;

    font-size:
        clamp(
            55px,
            7vw,
            105px
        );

    line-height:
        .87;

    letter-spacing:
        -.075em;

    font-weight:
        800;

}


.serif-accent {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.stroke-accent {

    color:
        transparent;

    -webkit-text-stroke:
        1.4px
        rgba(
            244,
            240,
            237,
            .62
        );

}


.about-mini-note {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        50px;

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

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

}


.mini-number {

    display:
        grid;

    place-items:
        center;

    width: 34px;

    height: 34px;

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

    border-radius:
        50%;

    color:
        var(--rose);

}



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

.about-content {

    max-width:
        520px;

    padding-bottom:
        10px;

}


.about-lead {

    color:
        rgba(
            244,
            240,
            237,
            .73
        );

    font-size:
        clamp(
            21px,
            2.2vw,
            30px
        );

    line-height:
        1.35;

    letter-spacing:
        -.035em;

}


.about-lead strong {

    color:
        white;

    font-weight:
        600;

}


.about-copy {

    margin-top:
        25px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.85;

}


.text-arrow-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        35px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .35
        );

    font-size:
        11px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    transition:
        .35s
        var(--ease);

}


.text-arrow-link span {

    color:
        var(--rose);

    font-size:
        15px;

}


.text-arrow-link:hover {

    color:
        var(--pink);

    border-color:
        var(--rose);

    gap:
        18px;

}



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

.about-visual {

    position:
        relative;

    height:
        min(
            720px,
            65vw
        );

    min-height:
        560px;

    margin-top:
        120px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    overflow:
        hidden;

}


.about-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                111,
                145,
                .11
            ),
            transparent
            68%
        );

    filter:
        blur(20px);

}



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

.about-orbit {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(
            560px,
            55vw
        );

    aspect-ratio:
        1;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

}


.about-orbit-ring {

    position:
        absolute;

    inset:
        0;

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

    border-radius:
        50%;

}


.ring-a {

    animation:
        slowRotate
        25s
        linear
        infinite;

}


.ring-b {

    inset:
        12%;

    border-style:
        dashed;

    border-color:
        rgba(
            255,
            111,
            145,
            .25
        );

    animation:
        slowRotateReverse
        19s
        linear
        infinite;

}


.ring-c {

    inset:
        25%;

    border-color:
        rgba(
            155,
            124,
            255,
            .25
        );

    animation:
        slowRotate
        14s
        linear
        infinite;

}


@keyframes slowRotate {

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes slowRotateReverse {

    to {

        transform:
            rotate(-360deg);

    }

}



/* =========================================================
   ORBIT CENTER
========================================================== */

.about-orbit-center {

    position:
        absolute;

    width:
        34%;

    aspect-ratio:
        1;

    left:
        33%;

    top:
        33%;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .11
            ),
            rgba(
                255,
                255,
                255,
                .025
            )
        );

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

    box-shadow:
        0 0 80px
        rgba(
            255,
            111,
            145,
            .10
        );

    backdrop-filter:
        blur(20px);

}


.about-orbit-center span {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-size:
        clamp(
            70px,
            9vw,
            120px
        );

    color:
        var(--pink);

    transform:
        translateY(-4px);

}



/* =========================================================
   ORBIT DOTS
========================================================== */

.about-orbit-dot {

    position:
        absolute;

    width:
        12px;

    height:
        12px;

    border-radius:
        50%;

}


.dot-a {

    top:
        7%;

    left:
        42%;

    background:
        var(--rose);

    box-shadow:
        0 0 30px
        var(--rose);

}


.dot-b {

    right:
        4%;

    top:
        45%;

    width:
        8px;

    height:
        8px;

    background:
        var(--violet);

    box-shadow:
        0 0 25px
        var(--violet);

}


.dot-c {

    bottom:
        10%;

    left:
        27%;

    width:
        7px;

    height:
        7px;

    background:
        white;

}


.dot-d {

    left:
        8%;

    top:
        38%;

    width:
        16px;

    height:
        16px;

    border:
        1px solid
        var(--pink);

}



/* =========================================================
   ROTATING TYPE
========================================================== */

.rotating-type {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        700px;

    height:
        700px;

    max-width:
        75vw;

    max-height:
        75vw;

    transform:
        translate(
            -50%,
            -50%
        );

    animation:
        typeRotation
        32s
        linear
        infinite;

    pointer-events:
        none;

}


.rotating-type svg {

    width:
        100%;

    height:
        100%;

}


.rotating-type text {

    fill:
        rgba(
            255,
            255,
            255,
            .25
        );

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        4px;

}


@keyframes typeRotation {

    to {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(360deg);

    }

}



/* =========================================================
   CENTER MESSAGE
========================================================== */

.about-center-message {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    text-align:
        center;

    z-index:
        5;

}


.quote-mark {

    display:
        block;

    color:
        var(--rose);

    font-family:
        Georgia,
        serif;

    font-size:
        40px;

    line-height:
        .5;

}


.about-center-message p {

    margin-top:
        12px;

    white-space:
        nowrap;

    font-size:
        14px;

    font-weight:
        700;

    letter-spacing:
        -.02em;

}


.about-center-message small {

    display:
        block;

    margin-top:
        9px;

    color:
        var(--muted);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

}



/* =========================================================
   FLOATING CARDS
========================================================== */

.about-floating-card {

    position:
        absolute;

    z-index:
        10;

    padding:
        18px;

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

    background:
        rgba(
            17,
            17,
            19,
            .72
        );

    backdrop-filter:
        blur(20px);

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

}


.card-one {

    left:
        5%;

    bottom:
        12%;

    width:
        185px;

    transform:
        rotate(-5deg);

}


.card-two {

    right:
        5%;

    top:
        12%;

    width:
        160px;

    transform:
        rotate(5deg);

}


.about-floating-card .card-kicker {

    color:
        var(--rose);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .18em;

}


.about-floating-card strong {

    display:
        block;

    margin-top:
        10px;

    font-size:
        17px;

    line-height:
        1.15;

    letter-spacing:
        -.04em;

}


.card-line {

    width:
        100%;

    height:
        1px;

    margin:
        18px 0 12px;

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

}


.card-location {

    color:
        var(--muted);

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}


.tiny-icon {

    display:
        grid;

    place-items:
        center;

    width:
        35px;

    height:
        35px;

    margin-bottom:
        20px;

    border-radius:
        50%;

    background:
        var(--rose);

    color:
        #070707;

}


.card-two > span {

    color:
        var(--muted);

    font-size:
        9px;

}


.card-two strong {

    margin-top:
        5px;

    font-size:
        14px;

}



/* =========================================================
   PRINCIPLES
========================================================== */

.principles-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top:
        100px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

}


.principle-card {

    position:
        relative;

    min-height:
        285px;

    padding:
        28px 25px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    transition:
        background
        .5s
        var(--ease),
        transform
        .5s
        var(--ease);

}


.principle-card:last-child {

    border-right:
        0;

}


.principle-card:hover {

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

    transform:
        translateY(-8px);

}


.principle-number {

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

    font-size:
        9px;

    letter-spacing:
        .15em;

}


.principle-icon {

    margin-top:
        55px;

    color:
        var(--rose);

    font-size:
        32px;

    line-height:
        1;

}


.principle-card h3 {

    margin-top:
        20px;

    font-size:
        22px;

    letter-spacing:
        -.05em;

}


.principle-card p {

    max-width:
        210px;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;

}


.principle-arrow {

    position:
        absolute;

    right:
        22px;

    bottom:
        25px;

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

    transition:
        .3s;

}


.principle-card:hover
.principle-arrow {

    color:
        var(--rose);

    transform:
        translate(
            4px,
            -4px
        );

}



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

@media (max-width: 1000px) {

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .about-content {

        max-width:
            650px;

    }


    .about-visual {

        height:
            600px;

    }


    .principles-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .principle-card:nth-child(2) {

        border-right:
            0;

    }


    .principle-card:nth-child(-n+2) {

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .10
            );

    }

}


@media (max-width: 600px) {

    .creative-marquee-section {

        padding:
            17px 0;

    }


    .marquee-track {

        gap:
            18px;

    }


    .marquee-track span {

        font-size:
            25px;

    }


    .marquee-track i {

        font-size:
            14px;

    }


    .about-section {

        padding:
            100px 0
            80px;

    }


    .section-topline {

        margin-bottom:
            55px;

    }


    .section-caption {

        display:
            none;

    }


    .section-topline {

        grid-template-columns:
            auto 1fr;

    }


    .about-heading {

        font-size:
            54px;

    }


    .about-lead {

        font-size:
            20px;

    }


    .about-copy {

        font-size:
            13px;

    }


    .about-visual {

        height:
            480px;

        min-height:
            480px;

        margin-top:
            75px;

    }


    .about-orbit {

        width:
            370px;

    }


    .rotating-type {

        width:
            470px;

        height:
            470px;

        max-width:
            100vw;

        max-height:
            100vw;

    }


    .about-floating-card {

        padding:
            13px;

    }


    .card-one {

        left:
            0;

        bottom:
            8%;

        width:
            145px;

    }


    .card-two {

        right:
            0;

        top:
            7%;

        width:
            130px;

    }


    .about-floating-card strong {

        font-size:
            13px;

    }


    .principles-grid {

        grid-template-columns:
            1fr;

        margin-top:
            65px;

    }


    .principle-card {

        min-height:
            230px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .10
            );

    }


    .principle-card:last-child {

        border-bottom:
            0;

    }


    .principle-card:nth-child(2) {

        border-right:
            0;

    }

}



/* =========================================================
   PART 03 CSS
   SERVICES + PROJECT SHOWCASE
========================================================== */


/* =========================================================
   SERVICES SECTION
========================================================== */

.services-section {

    position:
        relative;

    padding:
        150px 0
        130px;

    overflow:
        hidden;

}


.services-intro {

    display:
        grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        90px;

}


.services-heading {

    margin-top:
        22px;

    max-width:
        700px;

    font-size:
        clamp(
            55px,
            7vw,
            100px
        );

    line-height:
        .9;

    letter-spacing:
        -.075em;

}


.services-heading .serif-accent {

    position:
        relative;

}


.services-description {

    max-width:
        400px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;

}



/* =========================================================
   SERVICES LIST
========================================================== */

.services-list {

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

}


.service-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        70px
        1fr
        1fr
        50px;

    gap:
        35px;

    align-items:
        center;

    min-height:
        190px;

    padding:
        35px 10px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    transition:
        .5s
        var(--ease);

}


.service-item::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                111,
                145,
                .06
            ),
            transparent
        );

    opacity:
        0;

    transition:
        .5s
        var(--ease);

    pointer-events:
        none;

}


.service-item:hover::before {

    opacity:
        1;

}


.service-item:hover {

    padding-left:
        25px;

}


.service-number {

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

    font-size:
        10px;

    letter-spacing:
        .12em;

}


.service-main h3 {

    font-size:
        clamp(
            28px,
            3vw,
            45px
        );

    letter-spacing:
        -.055em;

    font-weight:
        700;

    transition:
        .4s;

}


.service-item:hover
.service-main h3 {

    color:
        var(--pink);

    transform:
        translateX(7px);

}


.service-main p {

    max-width:
        410px;

    margin-top:
        12px;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;

}


.service-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        7px;

}


.service-tags span {

    padding:
        7px 10px;

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

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

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}


.service-action {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

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

    border-radius:
        50%;

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

    transition:
        .4s;

}


.service-item:hover
.service-action {

    color:
        #070707;

    background:
        var(--rose);

    border-color:
        var(--rose);

    transform:
        rotate(45deg);

}



/* =========================================================
   PROJECTS SECTION
========================================================== */

.projects-section {

    position:
        relative;

    padding:
        150px 0
        140px;

    background:
        #080809;

}


.projects-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        80px;

}


.projects-heading {

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

    line-height:
        .8;

    letter-spacing:
        -.09em;

    font-weight:
        800;

}


.projects-heading span {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.projects-counter {

    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;

}


.projects-counter span {

    color:
        var(--rose);

    font-size:
        30px;

    font-weight:
        700;

}


.projects-counter small {

    color:
        var(--muted);

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .14em;

}



/* =========================================================
   PROJECT CARD
========================================================== */

.project-card {

    position:
        relative;

    overflow:
        hidden;

}


.project-large {

    display:
        grid;

    grid-template-columns:
        1.45fr
        .55fr;

    min-height:
        640px;

    margin-bottom:
        30px;

}


.project-visual {

    position:
        relative;

    min-height:
        500px;

    overflow:
        hidden;

}


.project-info {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        35px;

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

    border-left:
        0;

}


.project-meta {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

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

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .14em;

}


.project-info h3 {

    margin-top:
        auto;

    font-size:
        clamp(
            38px,
            5vw,
            75px
        );

    line-height:
        .85;

    letter-spacing:
        -.075em;

}


.project-info p {

    max-width:
        340px;

    margin-top:
        20px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.75;

}


.project-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        35px;

}


.project-tools {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

}


.project-tools span {

    padding:
        7px 9px;

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

    color:
        var(--muted);

    font-size:
        7px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}


.project-view {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0;

    border:
        0;

    background:
        none;

    color:
        white;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    cursor:
        pointer;

}


.project-view span {

    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

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

    border-radius:
        50%;

    transition:
        .35s;

}


.project-view:hover span {

    background:
        var(--rose);

    color:
        #080808;

    border-color:
        var(--rose);

    transform:
        rotate(45deg);

}



/* =========================================================
   PROJECT GRID
========================================================== */

.projects-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        30px;

}


.project-small {

    display:
        grid;

    grid-template-rows:
        auto auto;

}


.project-small .project-info {

    min-height:
        330px;

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

    border-top:
        0;

}


.project-small .project-visual {

    min-height:
        520px;

}


.project-wide {

    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        1.45fr
        .55fr;

}


.project-wide .project-info {

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

    border-left:
        0;

}


.project-wide .project-visual {

    min-height:
        550px;

}



/* =========================================================
   PROJECT HOVER IMAGE SYSTEM
========================================================== */

.project-visual::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            transparent 40%,
            rgba(
                255,
                255,
                255,
                .13
            ),
            transparent 60%
        );

    transform:
        translateX(-120%);

    transition:
        transform
        .9s
        ease;

}


.project-card:hover
.project-visual::after {

    transform:
        translateX(120%);

}


.project-card:hover
.project-visual {

    transform:
        scale(1.01);

}


.project-visual {

    transition:
        transform
        .8s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}



/* =========================================================
   VISUAL ONE
========================================================== */

.visual-one {

    background:
        radial-gradient(
            circle at 55% 50%,
            #ff7698 0%,
            #a92c58 19%,
            #271322 48%,
            #09090b 76%
        );

}


.visual-noise {

    position:
        absolute;

    inset:
        0;

    opacity:
        .13;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

    pointer-events:
        none;

}


.visual-grid-lines {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

}


.visual-grid-lines span {

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.project-art {

    position:
        absolute;

    width:
        460px;

    height:
        460px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

}


.art-circle {

    position:
        absolute;

    border-radius:
        50%;

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

}


.art-circle-one {

    inset:
        0;

}


.art-circle-two {

    inset:
        11%;

    border-color:
        rgba(
            255,
            255,
            255,
            .22
        );

}


.art-circle-three {

    inset:
        27%;

    background:
        radial-gradient(
            circle at 35% 35%,
            #ffbfd0,
            #e74371 35%,
            #4e1631 72%,
            #180a12
        );

    box-shadow:
        0 0 80px
        rgba(
            255,
            99,
            145,
            .4
        );

}


.art-type-large {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-size:
        90px;

    font-weight:
        900;

    letter-spacing:
        -.1em;

    color:
        white;

    text-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            .4
        );

}


.art-small {

    position:
        absolute;

    left:
        50%;

    bottom:
        22%;

    transform:
        translateX(-50%);

    font-size:
        8px;

    letter-spacing:
        .3em;

}


.art-star {

    position:
        absolute;

    right:
        8%;

    top:
        15%;

    color:
        white;

    font-size:
        28px;

    animation:
        starFloat
        4s
        ease-in-out
        infinite;

}


@keyframes starFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(20deg);

    }

}



/* =========================================================
   PROJECT LABEL
========================================================== */

.project-image-label {

    position:
        absolute;

    left:
        25px;

    right:
        25px;

    bottom:
        22px;

    display:
        flex;

    justify-content:
        space-between;

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

    font-size:
        8px;

    letter-spacing:
        .14em;

}



/* =========================================================
   VISUAL TWO — BLOOM
========================================================== */

.visual-two {

    background:
        #e8d9bd;

    color:
        #16120f;

}


.poster-two {

    position:
        absolute;

    inset:
        45px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            .15
        );

    background:
        linear-gradient(
            135deg,
            #d8b985,
            #f4e9d0
        );

}


.poster-two-top {

    position:
        absolute;

    left:
        20px;

    top:
        18px;

    font-size:
        8px;

    letter-spacing:
        .18em;

}


.poster-two-word {

    position:
        absolute;

    left:
        50%;

    top:
        45%;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            -90deg
        );

    font-size:
        clamp(
            65px,
            8vw,
            110px
        );

    font-weight:
        900;

    letter-spacing:
        -.1em;

}


.poster-two-flower {

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    right:
        8%;

    bottom:
        -30px;

    border-radius:
        50%;

}


.poster-two-flower span {

    position:
        absolute;

    width:
        105px;

    height:
        145px;

    left:
        50%;

    top:
        50%;

    transform-origin:
        50%
        100%;

    border-radius:
        70%
        40%
        70%
        40%;

    background:
        #8e3844;

}


.poster-two-flower span:nth-child(1) {
    transform:
        translate(-50%,-100%)
        rotate(0deg);
}

.poster-two-flower span:nth-child(2) {
    transform:
        translate(-50%,-100%)
        rotate(60deg);
}

.poster-two-flower span:nth-child(3) {
    transform:
        translate(-50%,-100%)
        rotate(120deg);
}

.poster-two-flower span:nth-child(4) {
    transform:
        translate(-50%,-100%)
        rotate(180deg);
}

.poster-two-flower span:nth-child(5) {
    transform:
        translate(-50%,-100%)
        rotate(240deg);
}

.poster-two-flower span:nth-child(6) {
    transform:
        translate(-50%,-100%)
        rotate(300deg);
}


.poster-two-flower i {

    position:
        absolute;

    width:
        45px;

    height:
        45px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        #e5a949;

}


.poster-two-bottom {

    position:
        absolute;

    left:
        20px;

    bottom:
        18px;

    font-size:
        7px;

    letter-spacing:
        .2em;

}



/* =========================================================
   VISUAL THREE
========================================================== */

.visual-three {

    background:
        radial-gradient(
            circle at 50% 42%,
            #8d81ff,
            #29224f 30%,
            #111116 65%,
            #080809
        );

}


.poster-three {

    position:
        absolute;

    inset:
        45px;

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

}


.poster-three-top {

    position:
        absolute;

    left:
        20px;

    top:
        20px;

    font-size:
        8px;

    letter-spacing:
        .2em;

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

}


.chrome-object {

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    left:
        50%;

    top:
        48%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        42%
        58%
        52%
        48%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #76768a 18%,
            #181821 43%,
            #ddddea 62%,
            #454552 80%,
            #ffffff
        );

    box-shadow:
        0 35px 80px
        rgba(
            0,
            0,
            0,
            .5
        );

    animation:
        chromeFloat
        5s
        ease-in-out
        infinite;

}


.chrome-core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-size:
        100px;

    color:
        rgba(
            20,
            20,
            25,
            .85
        );

}


@keyframes chromeFloat {

    0%,
    100% {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(-5deg);

    }

    50% {

        transform:
            translate(
                -50%,
                calc(-50% - 15px)
            )
            rotate(5deg);

    }

}


.poster-three-word {

    position:
        absolute;

    left:
        20px;

    bottom:
        35px;

    font-size:
        45px;

    font-weight:
        900;

    letter-spacing:
        -.08em;

}


.poster-three-bottom {

    position:
        absolute;

    right:
        20px;

    bottom:
        20px;

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

    font-size:
        7px;

    letter-spacing:
        .16em;

}



/* =========================================================
   VISUAL FOUR
========================================================== */

.visual-four {

    background:
        linear-gradient(
            130deg,
            #161313,
            #321b20 50%,
            #0d0d0e
        );

}


.wide-art {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

}


.wide-art-copy {

    position:
        absolute;

    left:
        7%;

    top:
        50%;

    z-index:
        3;

    transform:
        translateY(-50%);

}


.wide-art-copy small {

    display:
        block;

    margin-bottom:
        20px;

    color:
        var(--rose);

    font-size:
        8px;

    letter-spacing:
        .2em;

}


.wide-art-copy strong {

    display:
        block;

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

    line-height:
        .75;

    letter-spacing:
        -.1em;

}


.wide-art-copy strong em {

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

    color:
        var(--pink);

}


.wide-art-copy span {

    display:
        block;

    margin-top:
        25px;

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

    font-size:
        8px;

    letter-spacing:
        .2em;

}


.wide-sun {

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    right:
        12%;

    top:
        50%;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffbdc9,
            #ef547e 35%,
            #70213d 67%,
            #211117
        );

    box-shadow:
        0 0 120px
        rgba(
            244,
            84,
            126,
            .3
        );

}


.wide-ring {

    position:
        absolute;

    width:
        540px;

    height:
        540px;

    right:
        5%;

    top:
        50%;

    transform:
        translateY(-50%);

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

    border-radius:
        50%;

}


.wide-line {

    position:
        absolute;

    width:
        130%;

    height:
        1px;

    right:
        -10%;

    top:
        50%;

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

    transform:
        rotate(
            -27deg
        );

}



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

.projects-footer {

    display:
        flex;

    justify-content:
        center;

    padding-top:
        100px;

}


.outline-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        30px;

    min-width:
        220px;

    justify-content:
        space-between;

    padding:
        17px 18px 17px 23px;

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

    color:
        white;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    transition:
        .4s
        var(--ease);

}


.outline-button b {

    display:
        grid;

    place-items:
        center;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

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

    font-size:
        15px;

    transition:
        .4s;

}


.outline-button:hover {

    background:
        var(--rose);

    color:
        #080808;

    border-color:
        var(--rose);

    transform:
        translateY(-5px);

}


.outline-button:hover b {

    background:
        #080808;

    color:
        white;

    transform:
        rotate(45deg);

}



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

@media (max-width: 1000px) {

    .services-intro {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .service-item {

        grid-template-columns:
            55px
            1fr
            45px;

    }


    .service-tags {

        display:
            none;

    }


    .project-large,
    .project-wide {

        grid-template-columns:
            1fr;

    }


    .project-large .project-info,
    .project-wide .project-info {

        border-left:
            1px solid
            rgba(
                255,
                255,
                255,
                .10
            );

    }


    .project-large .project-visual {

        min-height:
            580px;

    }


    .project-wide .project-visual {

        min-height:
            500px;

    }

}


@media (max-width: 700px) {

    .services-section,
    .projects-section {

        padding:
            100px 0
            85px;

    }


    .services-heading {

        font-size:
            58px;

    }


    .services-intro {

        margin-bottom:
            55px;

    }


    .service-item {

        grid-template-columns:
            38px
            1fr
            38px;

        gap:
            12px;

        min-height:
            170px;

        padding:
            25px 0;

    }


    .service-item:hover {

        padding-left:
            8px;

    }


    .service-main h3 {

        font-size:
            25px;

    }


    .service-main p {

        font-size:
            10px;

    }


    .projects-header {

        margin-bottom:
            55px;

    }


    .projects-heading {

        font-size:
            65px;

    }


    .projects-counter {

        display:
            none;

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .project-large {

        margin-bottom:
            20px;

    }


    .project-large .project-visual {

        min-height:
            420px;

    }


    .project-small .project-visual {

        min-height:
            420px;

    }


    .project-small .project-info {

        min-height:
            280px;

    }


    .project-wide {

        grid-column:
            auto;

    }


    .project-wide .project-visual {

        min-height:
            390px;

    }


    .project-info {

        padding:
            25px;

    }


    .project-info h3 {

        font-size:
            45px;

    }


    .project-bottom {

        align-items:
            flex-end;

    }


    .project-tools {

        display:
            none;

    }


    .project-art {

        width:
            340px;

        height:
            340px;

    }


    .art-type-large {

        font-size:
            65px;

    }


    .poster-two {

        inset:
            25px;

    }


    .poster-three {

        inset:
            25px;

    }


    .chrome-object {

        width:
            190px;

        height:
            190px;

    }


    .wide-sun {

        width:
            270px;

        height:
            270px;

        right:
            -80px;

    }


    .wide-ring {

        width:
            390px;

        height:
            390px;

        right:
            -140px;

    }


    .wide-art-copy {

        left:
            25px;

    }


    .wide-art-copy strong {

        font-size:
            70px;

    }

}





/* =========================================================
   PART 04 CSS
   CREATIVE PROCESS / TIMELINE
========================================================== */


/* =========================================================
   PROCESS SECTION
========================================================== */

.process-section {

    position:
        relative;

    padding:
        160px 0
        170px;

    overflow:
        hidden;

    background:
        #070708;

}


.process-section::before {

    content:
        "";

    position:
        absolute;

    width:
        700px;

    height:
        700px;

    left:
        -350px;

    top:
        35%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                79,
                130,
                .08
            ),
            transparent 70%
        );

    pointer-events:
        none;

}


.process-section::after {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -250px;

    bottom:
        10%;

    border-radius:
        50%;

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

    pointer-events:
        none;

}



/* =========================================================
   PROCESS INTRO
========================================================== */

.process-intro {

    display:
        grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:
        80px;

    align-items:
        end;

    margin-top:
        25px;

    margin-bottom:
        130px;

}


.process-heading {

    max-width:
        900px;

    margin-top:
        20px;

    font-size:
        clamp(
            55px,
            8vw,
            125px
        );

    line-height:
        .84;

    letter-spacing:
        -.085em;

}


.process-heading .serif-accent {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.process-heading .stroke-accent {

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .55
        );

}


.process-intro-copy {

    max-width:
        390px;

}


.process-intro-copy p {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.9;

}


.process-scroll-note {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        30px;

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

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.process-scroll-note b {

    display:
        grid;

    place-items:
        center;

    width:
        28px;

    height:
        28px;

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

    border-radius:
        50%;

    color:
        var(--rose);

    animation:
        scrollBounce
        2s
        ease-in-out
        infinite;

}


@keyframes scrollBounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(5px);

    }

}



/* =========================================================
   TIMELINE
========================================================== */

.process-timeline {

    position:
        relative;

}


.timeline-track {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        1px;

    transform:
        translateX(-50%);

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

}


.timeline-progress {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        0%;

    background:
        linear-gradient(
            to bottom,
            var(--pink),
            var(--rose),
            #a68cff
        );

    box-shadow:
        0 0 18px
        rgba(
            255,
            100,
            145,
            .5
        );

    transition:
        height
        .1s
        linear;

}



/* =========================================================
   PROCESS STEP
========================================================== */

.process-step {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr
        90px
        1fr;

    gap:
        65px;

    align-items:
        center;

    min-height:
        610px;

}


.process-step-marker {

    position:
        absolute;

    z-index:
        5;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    display:
        grid;

    place-items:
        center;

    width:
        66px;

    height:
        66px;

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

    border-radius:
        50%;

    background:
        #080809;

    box-shadow:
        0 0 0
        0
        rgba(
            255,
            99,
            145,
            0
        );

    transition:
        .5s
        var(--ease);

}


.process-step-marker span {

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

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .1em;

    transition:
        .4s;

}


.process-step.is-active
.process-step-marker {

    border-color:
        var(--rose);

    background:
        var(--rose);

    box-shadow:
        0 0 40px
        rgba(
            255,
            94,
            140,
            .25
        );

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            1.12
        );

}


.process-step.is-active
.process-step-marker span {

    color:
        #080808;

}



/* =========================================================
   STEP CONTENT
========================================================== */

.process-step-content {

    grid-column:
        1;

    padding:
        35px 20px 35px 0;

}


.process-step-reverse
.process-step-content {

    grid-column:
        3;

    grid-row:
        1;

    padding:
        35px 0 35px 20px;

}


.process-step-meta {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    max-width:
        490px;

    padding-bottom:
        20px;

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

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

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.process-step-content h3 {

    max-width:
        540px;

    margin-top:
        55px;

    font-size:
        clamp(
            42px,
            5vw,
            72px
        );

    line-height:
        .9;

    letter-spacing:
        -.07em;

}


.process-step-content h3 em {

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

    color:
        var(--pink);

}


.process-step-content p {

    max-width:
        460px;

    margin-top:
        28px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.9;

}


.process-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        30px;

}


.process-tags span {

    padding:
        8px 11px;

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

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

    font-size:
        7px;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}



/* =========================================================
   STEP VISUAL
========================================================== */

.process-step-visual {

    grid-column:
        3;

    position:
        relative;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        420px;

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

    overflow:
        hidden;

}


.process-step-reverse
.process-step-visual {

    grid-column:
        1;

    grid-row:
        1;

}


.process-step-visual::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                .025
            ),
            transparent
        );

}


.process-step-visual small {

    position:
        absolute;

    left:
        20px;

    bottom:
        18px;

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

    font-size:
        7px;

    letter-spacing:
        .18em;

    line-height:
        1.7;

}


.process-step-visual small strong {

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

}



/* =========================================================
   VISUAL 01 — ORBIT
========================================================== */

.process-orbit {

    position:
        relative;

    width:
        260px;

    height:
        260px;

}


.process-orbit-ring {

    position:
        absolute;

    inset:
        0;

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

    border-radius:
        50%;

    animation:
        processOrbit
        9s
        linear
        infinite;

}


.process-orbit-ring::after {

    content:
        "";

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    left:
        50%;

    top:
        -4px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--rose);

    box-shadow:
        0 0 20px
        var(--rose);

}


.process-orbit-ring.ring-small {

    inset:
        35px;

    border-color:
        rgba(
            255,
            255,
            255,
            .14
        );

    animation-direction:
        reverse;

    animation-duration:
        6s;

}


.process-orbit-core {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    display:
        grid;

    place-items:
        center;

    width:
        90px;

    height:
        90px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            #ff9eb7,
            #8e294c
        );

    font-family:
        Georgia,
        serif;

    font-size:
        45px;

    font-style:
        italic;

    box-shadow:
        0 0 50px
        rgba(
            255,
            88,
            133,
            .25
        );

}


.orbit-star {

    position:
        absolute;

    right:
        4px;

    top:
        50%;

    color:
        var(--pink);

    font-size:
        25px;

    animation:
        orbitStar
        4s
        ease-in-out
        infinite;

}


@keyframes processOrbit {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes orbitStar {

    0%,
    100% {

        transform:
            translateY(-50%)
            scale(1);

    }

    50% {

        transform:
            translateY(-50%)
            scale(1.3);

    }

}



/* =========================================================
   VISUAL 02 — EXPLORE
========================================================== */

.explore-canvas {

    position:
        relative;

    width:
        310px;

    height:
        310px;

}


.explore-line {

    position:
        absolute;

    width:
        130%;

    height:
        1px;

    left:
        -15%;

    top:
        50%;

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

}


.line-one {

    transform:
        rotate(
            28deg
        );

}


.line-two {

    transform:
        rotate(
            -31deg
        );

}


.line-three {

    transform:
        rotate(
            67deg
        );

}


.explore-shape {

    position:
        absolute;

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

}


.shape-one {

    width:
        170px;

    height:
        170px;

    left:
        40px;

    top:
        65px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            101,
            148,
            .12
        );

    animation:
        exploreRotate
        12s
        linear
        infinite;

}


.shape-two {

    width:
        120px;

    height:
        120px;

    right:
        10px;

    top:
        25px;

    transform:
        rotate(45deg);

    border-color:
        rgba(
            166,
            140,
            255,
            .55
        );

    animation:
        exploreRotateReverse
        8s
        linear
        infinite;

}


.shape-three {

    width:
        80px;

    height:
        80px;

    left:
        110px;

    bottom:
        20px;

    border-radius:
        50%;

    background:
        var(--rose);

    box-shadow:
        0 0 50px
        rgba(
            255,
            93,
            140,
            .3
        );

}


.explore-cross {

    position:
        absolute;

    left:
        18px;

    top:
        15px;

    color:
        var(--pink);

    font-size:
        28px;

}


.cross-two {

    left:
        auto;

    right:
        20px;

    top:
        auto;

    bottom:
        15px;

}


@keyframes exploreRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes exploreRotateReverse {

    from {

        transform:
            rotate(45deg);

    }

    to {

        transform:
            rotate(-315deg);

    }

}



/* =========================================================
   VISUAL 03 — DESIGN POSTER
========================================================== */

.design-poster {

    position:
        relative;

    width:
        280px;

    height:
        350px;

    overflow:
        hidden;

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

    background:
        linear-gradient(
            145deg,
            #15121d,
            #33245d
        );

}


.design-poster-top {

    position:
        absolute;

    left:
        18px;

    top:
        15px;

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

    font-size:
        7px;

    letter-spacing:
        .18em;

}


.design-poster-main {

    position:
        absolute;

    left:
        18px;

    top:
        80px;

    font-size:
        75px;

    font-weight:
        900;

    letter-spacing:
        -.09em;

}


.design-poster-circle {

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    right:
        -80px;

    top:
        90px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffb2c7,
            #e44778 35%,
            #6c2450 68%,
            #21152f
        );

    box-shadow:
        0 0 80px
        rgba(
            255,
            80,
            130,
            .3
        );

    animation:
        posterPulse
        5s
        ease-in-out
        infinite;

}


.design-poster-bottom {

    position:
        absolute;

    left:
        18px;

    bottom:
        18px;

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

    font-size:
        8px;

    letter-spacing:
        .18em;

}


.design-poster-bottom span {

    color:
        var(--pink);

}


@keyframes posterPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.08);

    }

}



/* =========================================================
   VISUAL 04 — REFINE GRID
========================================================== */

.refine-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            65px
        );

    gap:
        8px;

    transform:
        rotate(
            -8deg
        );

}


.refine-square {

    width:
        65px;

    height:
        65px;

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

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

    transition:
        .5s;

}


.refine-square:nth-child(odd) {

    transform:
        translateY(
            10px
        );

}


.refine-square.active {

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--rose)
        );

    border-color:
        transparent;

    box-shadow:
        0 0 35px
        rgba(
            255,
            87,
            135,
            .35
        );

    transform:
        translateY(
            -10px
        )
        rotate(
            8deg
        );

}


.process-step:hover
.refine-square:not(.active) {

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

}



/* =========================================================
   PROCESS ENDING
========================================================== */

.process-ending {

    position:
        relative;

    margin-top:
        120px;

    padding:
        100px 30px;

    text-align:
        center;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.process-ending-line {

    position:
        absolute;

    width:
        1px;

    height:
        70px;

    left:
        50%;

    top:
        -35px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--rose)
        );

}


.process-ending p {

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

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .2em;

}


.process-ending h3 {

    max-width:
        800px;

    margin:
        25px
        auto
        0;

    font-size:
        clamp(
            45px,
            7vw,
            100px
        );

    line-height:
        .9;

    letter-spacing:
        -.08em;

}


.process-ending h3 span {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.process-ending-mark {

    margin-top:
        50px;

    color:
        var(--rose);

    font-size:
        30px;

    animation:
        endingStar
        3s
        ease-in-out
        infinite;

}


@keyframes endingStar {

    0%,
    100% {

        transform:
            rotate(0deg)
            scale(1);

    }

    50% {

        transform:
            rotate(180deg)
            scale(1.25);

    }

}



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

@media (max-width: 900px) {

    .process-intro {

        grid-template-columns:
            1fr;

        gap:
            35px;

        margin-bottom:
            90px;

    }


    .timeline-track {

        left:
            30px;

    }


    .process-step {

        display:
            grid;

        grid-template-columns:
            60px
            1fr;

        gap:
            25px;

        min-height:
            auto;

        padding:
            70px 0;

    }


    .process-step-marker {

        left:
            30px;

        top:
            80px;

    }


    .process-step-content,
    .process-step-reverse
    .process-step-content {

        grid-column:
            2;

        grid-row:
            auto;

        padding:
            0;

    }


    .process-step-visual,
    .process-step-reverse
    .process-step-visual {

        grid-column:
            2;

        grid-row:
            auto;

        min-height:
            380px;

        margin-top:
            25px;

    }

}


@media (max-width: 600px) {

    .process-section {

        padding:
            100px 0
            100px;

    }


    .process-heading {

        font-size:
            58px;

    }


    .process-intro-copy p {

        font-size:
            11px;

    }


    .timeline-track {

        left:
            20px;

    }


    .process-step {

        grid-template-columns:
            40px
            1fr;

        gap:
            20px;

        padding:
            55px 0;

    }


    .process-step-marker {

        left:
            20px;

        top:
            65px;

        width:
            44px;

        height:
            44px;

    }


    .process-step-marker span {

        font-size:
            7px;

    }


    .process-step-content h3 {

        margin-top:
            35px;

        font-size:
            40px;

    }


    .process-step-content p {

        font-size:
            10px;

    }


    .process-step-visual,
    .process-step-reverse
    .process-step-visual {

        min-height:
            320px;

    }


    .process-orbit {

        transform:
            scale(
                .78
            );

    }


    .explore-canvas {

        transform:
            scale(
                .72
            );

    }


    .design-poster {

        transform:
            scale(
                .82
            );

    }


    .refine-grid {

        transform:
            rotate(-8deg)
            scale(.72);

    }


    .process-ending {

        margin-top:
            60px;

        padding:
            70px 15px;

    }

}


/* =========================================================
   PART 05 CSS
   CLIENTS / TESTIMONIALS / STATS
========================================================== */


/* =========================================================
   CLIENTS SECTION
========================================================== */

.clients-section {

    position:
        relative;

    padding:
        170px 0
        180px;

    overflow:
        hidden;

    background:
        #080809;

}


.clients-section::before {

    content:
        "";

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    top:
        5%;

    right:
        -300px;

    border-radius:
        50%;

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

    pointer-events:
        none;

}


.clients-section::after {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        -250px;

    bottom:
        15%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                138,
                113,
                255,
                .06
            ),
            transparent 70%
        );

    pointer-events:
        none;

}



/* =========================================================
   INTRO
========================================================== */

.clients-intro {

    display:
        grid;

    grid-template-columns:
        1fr
        .65fr;

    gap:
        80px;

    align-items:
        end;

    margin-top:
        30px;

    margin-bottom:
        110px;

}


.clients-heading {

    margin-top:
        20px;

    font-size:
        clamp(
            60px,
            9vw,
            135px
        );

    line-height:
        .82;

    letter-spacing:
        -.09em;

}


.clients-heading .serif-accent {

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

    font-style:
        italic;

    color:
        var(--pink);

}


.clients-description {

    max-width:
        400px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.9;

}



/* =========================================================
   CLIENT MARQUEE
========================================================== */

.client-marquee {

    position:
        relative;

    width:
        100vw;

    left:
        50%;

    transform:
        translateX(-50%);

    overflow:
        hidden;

    padding:
        30px 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.client-marquee-track {

    display:
        flex;

    align-items:
        center;

    width:
        max-content;

    gap:
        38px;

    animation:
        clientMarquee
        28s
        linear
        infinite;

}


.client-marquee:hover
.client-marquee-track {

    animation-play-state:
        paused;

}


.client-word {

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

    font-size:
        clamp(
            22px,
            3vw,
            38px
        );

    font-weight:
        800;

    letter-spacing:
        -.04em;

    white-space:
        nowrap;

}


.client-word.serif-client {

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

    font-style:
        italic;

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

}


.client-marquee-track > span {

    color:
        var(--pink);

    font-size:
        15px;

}


@keyframes clientMarquee {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}



/* =========================================================
   CREATIVE STATS
========================================================== */

.creative-stats {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    margin-top:
        100px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.creative-stat {

    position:
        relative;

    min-height:
        210px;

    padding:
        45px 25px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.creative-stat:last-child {

    border-right:
        0;

}


.stat-number {

    font-size:
        clamp(
            45px,
            6vw,
            82px
        );

    font-weight:
        800;

    line-height:
        .9;

    letter-spacing:
        -.08em;

}


.stat-symbol {

    color:
        var(--pink);

    font-size:
        25px;

    vertical-align:
        top;

}


.creative-stat p {

    position:
        absolute;

    bottom:
        25px;

    left:
        25px;

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

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .16em;

}



/* =========================================================
   TESTIMONIAL HEADER
========================================================== */

.testimonial-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    margin-top:
        160px;

    margin-bottom:
        55px;

}


.testimonial-header h3 {

    margin-top:
        18px;

    font-size:
        clamp(
            40px,
            6vw,
            75px
        );

    line-height:
        .9;

    letter-spacing:
        -.07em;

}


.testimonial-header h3 span {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.testimonial-counter {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

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

    font-size:
        9px;

    letter-spacing:
        .12em;

}


#testimonialCurrent {

    color:
        var(--rose);

}



/* =========================================================
   TESTIMONIAL STAGE
========================================================== */

.testimonial-stage {

    position:
        relative;

    min-height:
        540px;

    overflow:
        hidden;

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

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(
                255,
                86,
                132,
                .07
            ),
            transparent 30%
        );

}


.testimonial-stage::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                .025
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                .025
            )
            1px,
            transparent
            1px
        );

    background-size:
        70px
        70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

    pointer-events:
        none;

}



/* =========================================================
   TESTIMONIAL CARD
========================================================== */

.testimonial-card {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        70px
        100px;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(
            50px
        );

    transition:
        opacity
        .7s
        ease,
        transform
        .7s
        ease,
        visibility
        .7s;

}


.testimonial-card.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0);

}


.testimonial-quote-mark {

    position:
        absolute;

    left:
        70px;

    top:
        50px;

    color:
        var(--pink);

    font-family:
        Georgia,
        serif;

    font-size:
        100px;

    line-height:
        1;

    opacity:
        .7;

}


.testimonial-card blockquote {

    max-width:
        900px;

    font-size:
        clamp(
            28px,
            4vw,
            54px
        );

    line-height:
        1.08;

    letter-spacing:
        -.045em;

}


.testimonial-person {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        55px;

}


.testimonial-avatar {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #ff9ab6,
            #742743
        );

    color:
        #fff;

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

}


.testimonial-avatar.avatar-two {

    background:
        linear-gradient(
            135deg,
            #b49aff,
            #4c347e
        );

}


.testimonial-avatar.avatar-three {

    background:
        linear-gradient(
            135deg,
            #ffc4d4,
            #963f62
        );

}


.testimonial-person strong {

    display:
        block;

    font-size:
        11px;

}


.testimonial-person span {

    display:
        block;

    margin-top:
        5px;

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

    font-size:
        8px;

    letter-spacing:
        .1em;

}


.testimonial-index {

    position:
        absolute;

    right:
        70px;

    top:
        55px;

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

    font-size:
        70px;

    font-weight:
        800;

    letter-spacing:
        -.08em;

}



/* =========================================================
   TESTIMONIAL CONTROLS
========================================================== */

.testimonial-controls {

    position:
        absolute;

    right:
        60px;

    bottom:
        60px;

    display:
        flex;

    gap:
        8px;

}


.testimonial-arrow {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

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

    border-radius:
        50%;

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

    color:
        #fff;

    cursor:
        pointer;

    transition:
        .35s
        ease;

}


.testimonial-arrow:hover {

    border-color:
        var(--rose);

    background:
        var(--rose);

    color:
        #090909;

    transform:
        scale(
            1.08
        );

}



/* =========================================================
   TESTIMONIAL PROGRESS
========================================================== */

.testimonial-progress {

    position:
        absolute;

    left:
        70px;

    right:
        70px;

    bottom:
        30px;

    height:
        1px;

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

}


.testimonial-progress-fill {

    display:
        block;

    width:
        33.333%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--rose)
        );

    transition:
        width
        .5s
        ease;

}



/* =========================================================
   TRUST STATEMENT
========================================================== */

.trust-statement {

    position:
        relative;

    padding:
        190px
        0
        80px;

    text-align:
        center;

}


.trust-statement p {

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

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .2em;

}


.trust-statement h3 {

    max-width:
        900px;

    margin:
        30px
        auto
        0;

    font-size:
        clamp(
            45px,
            8vw,
            105px
        );

    line-height:
        .88;

    letter-spacing:
        -.08em;

}


.trust-statement h3 span {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.trust-orbit {

    position:
        absolute;

    left:
        50%;

    top:
        75px;

    transform:
        translateX(
            -50%
        );

    width:
        70px;

    height:
        70px;

}


.trust-orbit-ring {

    position:
        absolute;

    inset:
        0;

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

    border-radius:
        50%;

    animation:
        trustSpin
        7s
        linear
        infinite;

}


.trust-orbit span {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    color:
        var(--rose);

    font-size:
        20px;

}


@keyframes trustSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}



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

@media (max-width: 900px) {

    .clients-intro {

        grid-template-columns:
            1fr;

        gap:
            35px;

        margin-bottom:
            80px;

    }


    .creative-stats {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .creative-stat:nth-child(2) {

        border-right:
            0;

    }


    .creative-stat:nth-child(1),
    .creative-stat:nth-child(2) {

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .08
            );

    }


    .testimonial-card {

        padding:
            60px;

    }


    .testimonial-quote-mark {

        left:
            55px;

    }

}


@media (max-width: 600px) {

    .clients-section {

        padding:
            100px 0
            110px;

    }


    .clients-heading {

        font-size:
            60px;

    }


    .creative-stats {

        grid-template-columns:
            1fr 1fr;

    }


    .creative-stat {

        min-height:
            160px;

        padding:
            30px 15px;

    }


    .stat-number {

        font-size:
            48px;

    }


    .creative-stat p {

        left:
            15px;

        bottom:
            18px;

        font-size:
            6px;

    }


    .testimonial-header {

        align-items:
            end;

    }


    .testimonial-header h3 {

        font-size:
            43px;

    }


    .testimonial-stage {

        min-height:
            590px;

    }


    .testimonial-card {

        padding:
            65px 25px 90px;

    }


    .testimonial-quote-mark {

        left:
            25px;

        top:
            35px;

        font-size:
            75px;

    }


    .testimonial-card blockquote {

        font-size:
            27px;

    }


    .testimonial-index {

        right:
            25px;

        top:
            35px;

        font-size:
            45px;

    }


    .testimonial-controls {

        left:
            25px;

        right:
            auto;

        bottom:
            55px;

    }


    .testimonial-progress {

        left:
            25px;

        right:
            25px;

        bottom:
            25px;

    }


    .trust-statement {

        padding:
            160px 10px
            50px;

    }


    .trust-statement h3 {

        font-size:
            50px;

    }

}



/* =========================================================
   PART 06 CSS
   SERVICES / SKILLS / TOOLS
========================================================== */


/* =========================================================
   SERVICES SECTION
========================================================== */

.services-section {

    position:
        relative;

    padding:
        170px 0
        180px;

    overflow:
        hidden;

}


.services-section::before {

    content:
        "";

    position:
        absolute;

    width:
        700px;

    height:
        700px;

    right:
        -350px;

    top:
        10%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                80,
                135,
                .055
            ),
            transparent 68%
        );

    pointer-events:
        none;

}



/* =========================================================
   SERVICES INTRO
========================================================== */

.services-intro {

    display:
        grid;

    grid-template-columns:
        1fr
        .6fr;

    gap:
        100px;

    align-items:
        end;

    margin-top:
        30px;

    margin-bottom:
        100px;

}


.services-heading {

    margin-top:
        20px;

    font-size:
        clamp(
            65px,
            9vw,
            140px
        );

    line-height:
        .8;

    letter-spacing:
        -.09em;

}


.services-heading .serif-accent {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.services-intro-copy {

    max-width:
        420px;

}


.services-intro-copy p {

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.9;

}


.intro-arrow {

    display:
        block;

    margin-top:
        30px;

    color:
        var(--pink);

    font-size:
        25px;

    animation:
        introArrow
        2s
        ease-in-out
        infinite;

}


@keyframes introArrow {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(8px);

    }

}



/* =========================================================
   SERVICES GRID
========================================================== */

.services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        12px;

}


.service-card {

    position:
        relative;

    min-height:
        430px;

    padding:
        35px;

    overflow:
        hidden;

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

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

    transition:
        transform
        .5s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),
        border-color
        .5s
        ease,
        background
        .5s
        ease;

}


.service-card::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    right:
        -180px;

    bottom:
        -180px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                92,
                139,
                .17
            ),
            transparent 70%
        );

    transition:
        .6s
        ease;

}


.service-card::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pink),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform
        .5s
        ease;

}


.service-card:hover {

    transform:
        translateY(
            -8px
        );

    border-color:
        rgba(
            255,
            126,
            162,
            .4
        );

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

}


.service-card:hover::before {

    transform:
        scale(
            1.7
        );

}


.service-card:hover::after {

    transform:
        scaleX(1);

}


.service-card-large {

    min-height:
        520px;

}


.service-card-wide {

    min-height:
        520px;

}


.service-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

}


.service-number {

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

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.service-icon {

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

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

    border-radius:
        50%;

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

    transition:
        .4s
        ease;

}


.service-card:hover
.service-icon {

    transform:
        rotate(
            45deg
        );

    border-color:
        var(--pink);

    color:
        var(--pink);

}


.service-card-content {

    position:
        absolute;

    left:
        35px;

    right:
        35px;

    bottom:
        80px;

    z-index:
        2;

}


.service-symbol {

    margin-bottom:
        20px;

    color:
        var(--pink);

    font-size:
        25px;

    transition:
        transform
        .5s
        ease;

}


.service-card:hover
.service-symbol {

    transform:
        rotate(
            90deg
        )
        scale(
            1.15
        );

}


.service-card h3 {

    font-size:
        clamp(
            34px,
            4vw,
            55px
        );

    line-height:
        .9;

    letter-spacing:
        -.065em;

}


.service-card h3 span {

    display:
        block;

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

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

}


.service-card p {

    max-width:
        420px;

    margin-top:
        25px;

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

    font-size:
        10px;

    line-height:
        1.8;

}


.service-card-footer {

    position:
        absolute;

    left:
        35px;

    right:
        35px;

    bottom:
        28px;

    z-index:
        3;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.service-card-footer span {

    padding:
        7px 10px;

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

    border-radius:
        50px;

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

    font-size:
        6px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}



/* =========================================================
   SKILLS
========================================================== */

.skills-wrapper {

    margin-top:
        170px;

}


.skills-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        60px;

    margin-bottom:
        65px;

}


.skills-header h3 {

    margin-top:
        18px;

    font-size:
        clamp(
            45px,
            6vw,
            78px
        );

    line-height:
        .85;

    letter-spacing:
        -.07em;

}


.skills-header h3 span {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.skills-header-copy {

    max-width:
        260px;

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

    font-size:
        10px;

    line-height:
        1.8;

}



/* =========================================================
   SKILLS LIST
========================================================== */

.skills-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    column-gap:
        80px;

}


.skill-item {

    padding:
        25px 0;

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

}


.skill-info {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        14px;

}


.skill-info span {

    font-size:
        11px;

    font-weight:
        600;

}


.skill-info strong {

    color:
        var(--pink);

    font-size:
        9px;

}


.skill-bar {

    position:
        relative;

    width:
        100%;

    height:
        2px;

    overflow:
        hidden;

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

}


.skill-bar span {

    display:
        block;

    width:
        0;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--rose)
        );

    transition:
        width
        1.5s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

}



/* =========================================================
   TOOLS
========================================================== */

.tools-section {

    margin-top:
        150px;

    padding-top:
        70px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

}


.tools-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        40px;

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

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .18em;

}


.tools-heading span:last-child {

    color:
        var(--pink);

}


.tools-cloud {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.tool-pill {

    position:
        relative;

    padding:
        15px 20px;

    overflow:
        hidden;

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

    border-radius:
        50px;

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

    font-size:
        9px;

    transition:
        .4s
        ease;

}


.tool-pill::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--rose)
        );

    transform:
        translateY(
            100%
        );

    transition:
        .4s
        ease;

    z-index:
        -1;

}


.tool-pill:hover {

    color:
        #080809;

    border-color:
        transparent;

    transform:
        translateY(
            -4px
        );

}


.tool-pill:hover::before {

    transform:
        translateY(0);

}



/* =========================================================
   AVAILABILITY
========================================================== */

.availability-card {

    position:
        relative;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        50px;

    margin-top:
        140px;

    padding:
        70px;

    overflow:
        hidden;

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

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(
                255,
                84,
                135,
                .1
            ),
            transparent 35%
        );

}


.availability-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        10px;

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

    pointer-events:
        none;

}


.availability-orb {

    position:
        absolute;

    right:
        17%;

    top:
        50%;

    width:
        160px;

    height:
        160px;

    transform:
        translateY(
            -50%
        );

    border:
        1px solid
        rgba(
            255,
            126,
            161,
            .18
        );

    border-radius:
        50%;

    animation:
        availabilityOrbit
        8s
        linear
        infinite;

}


.availability-orb::before,
.availability-orb::after {

    content:
        "";

    position:
        absolute;

    inset:
        20px;

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

    border-radius:
        50%;

}


.availability-orb::after {

    inset:
        45px;

    border-color:
        rgba(
            255,
            126,
            161,
            .2
        );

}


.availability-orb span {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        8px;

    height:
        8px;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        var(--pink);

    box-shadow:
        0 0 25px
        rgba(
            255,
            91,
            138,
            .7
        );

}


@keyframes availabilityOrbit {

    from {

        transform:
            translateY(
                -50%
            )
            rotate(0deg);

    }

    to {

        transform:
            translateY(
                -50%
            )
            rotate(360deg);

    }

}


.availability-copy {

    position:
        relative;

    z-index:
        2;

}


.availability-label {

    color:
        var(--pink);

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .2em;

}


.availability-copy h3 {

    max-width:
        700px;

    margin-top:
        20px;

    font-size:
        clamp(
            40px,
            6vw,
            80px
        );

    line-height:
        .85;

    letter-spacing:
        -.07em;

}


.availability-copy h3 span {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.availability-button {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    flex-shrink:
        0;

    padding:
        18px 22px;

    border:
        1px solid
        var(--pink);

    border-radius:
        50px;

    color:
        #fff;

    font-size:
        9px;

    text-decoration:
        none;

    transition:
        .4s
        ease;

}


.availability-button span {

    font-size:
        16px;

}


.availability-button:hover {

    background:
        var(--pink);

    color:
        #080809;

    transform:
        translateY(
            -4px
        );

}



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

@media (max-width: 900px) {

    .services-intro {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card-large,
    .service-card-wide {

        min-height:
            450px;

    }


    .skills-header {

        align-items:
            start;

        flex-direction:
            column;

    }


    .availability-card {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            55px 35px;

    }


    .availability-orb {

        right:
            -40px;

        opacity:
            .5;

    }

}


@media (max-width: 600px) {

    .services-section {

        padding:
            110px 0
            120px;

    }


    .services-heading {

        font-size:
            62px;

    }


    .service-card,
    .service-card-large,
    .service-card-wide {

        min-height:
            430px;

        padding:
            25px;

    }


    .service-card-content {

        left:
            25px;

        right:
            25px;

        bottom:
            75px;

    }


    .service-card-footer {

        left:
            25px;

        right:
            25px;

    }


    .skills-list {

        grid-template-columns:
            1fr;

    }


    .tools-section {

        margin-top:
            100px;

    }


    .availability-card {

        margin-top:
            100px;

        padding:
            45px 25px;

    }


    .availability-copy h3 {

        font-size:
            48px;

    }


    .availability-orb {

        width:
            120px;

        height:
            120px;

        right:
            -50px;

    }

}




/* =========================================================
   PART 07 CSS
   PROJECT SHOWCASE
========================================================== */


/* =========================================================
   PROJECT SECTION
========================================================== */

.projects-section {

    position:
        relative;

    padding:
        180px 0;

    overflow:
        hidden;

}


.projects-section::before {

    content:
        "";

    position:
        absolute;

    width:
        900px;

    height:
        900px;

    left:
        -500px;

    top:
        20%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                90,
                140,
                .055
            ),
            transparent 68%
        );

    pointer-events:
        none;

}



/* =========================================================
   PROJECT INTRO
========================================================== */

.projects-intro {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        70px;

    margin-top:
        35px;

    margin-bottom:
        80px;

}


.projects-heading {

    margin-top:
        18px;

    font-size:
        clamp(
            65px,
            9vw,
            135px
        );

    line-height:
        .8;

    letter-spacing:
        -.09em;

}


.projects-heading
.serif-accent {

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

    color:
        var(--pink);

}


.projects-intro-side {

    width:
        300px;

}


.projects-intro-side p {

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

    font-size:
        10px;

    line-height:
        1.9;

}


.projects-count {

    display:
        block;

    margin-top:
        28px;

    color:
        var(--pink);

    font-size:
        8px;

    letter-spacing:
        .2em;

}



/* =========================================================
   FILTERS
========================================================== */

.project-filters {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        45px;

}


.project-filter {

    position:
        relative;

    padding:
        11px 18px;

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

    border-radius:
        50px;

    background:
        transparent;

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

    font-family:
        inherit;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    cursor:
        pointer;

    transition:
        .35s
        ease;

}


.project-filter:hover {

    color:
        #fff;

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

}


.project-filter.active {

    color:
        #080809;

    border-color:
        var(--pink);

    background:
        var(--pink);

}



/* =========================================================
   PROJECT GRID
========================================================== */

.projects-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap:
        65px
        14px;

}


.project-card {

    position:
        relative;

    min-width:
        0;

    cursor:
        pointer;

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

}


.project-card.is-hidden {

    display:
        none;

}


.project-card:hover {

    z-index:
        5;

}



/* =========================================================
   PROJECT VISUAL
========================================================== */

.project-visual {

    position:
        relative;

    height:
        620px;

    overflow:
        hidden;

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

    isolation:
        isolate;

}


.project-card:nth-child(
    2
) .project-visual,
.project-card:nth-child(
    5
) .project-visual {

    height:
        500px;

}


.project-card:nth-child(
    3
) .project-visual,
.project-card:nth-child(
    6
) .project-visual {

    height:
        560px;

}


.project-card-wide {

    grid-column:
        span 2;

}


.project-card-wide
.project-visual {

    height:
        580px;

}



/* =========================================================
   UNIVERSAL VISUAL EFFECT
========================================================== */

.project-visual::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    background:
        linear-gradient(
            125deg,
            transparent 25%,
            rgba(
                255,
                255,
                255,
                .08
            ) 50%,
            transparent 75%
        );

    transform:
        translateX(
            -120%
        );

    transition:
        transform
        .8s
        ease;

    pointer-events:
        none;

}


.project-card:hover
.project-visual::before {

    transform:
        translateX(
            120%
        );

}



/* =========================================================
   VISUAL ONE — AURA
========================================================== */

.visual-one {

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(
                255,
                94,
                142,
                .28
            ),
            transparent 25%
        ),
        radial-gradient(
            circle at 30% 70%,
            rgba(
                121,
                60,
                255,
                .14
            ),
            transparent 35%
        ),
        #100b12;

}


.visual-noise {

    position:
        absolute;

    inset:
        0;

    opacity:
        .12;

    background-image:
        radial-gradient(
            rgba(
                255,
                255,
                255,
                .5
            ) .5px,
            transparent .5px
        );

    background-size:
        5px 5px;

    mix-blend-mode:
        overlay;

}


.project-orbit {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    border:
        1px solid
        rgba(
            255,
            142,
            171,
            .35
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        transform
        1s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

}


.orbit-one {

    width:
        330px;

    height:
        330px;

}


.orbit-two {

    width:
        480px;

    height:
        180px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            55deg
        );

}


.orbit-three {

    width:
        180px;

    height:
        480px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            55deg
        );

}


.project-card:hover
.orbit-one {

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            20deg
        )
        scale(
            1.08
        );

}


.project-card:hover
.orbit-two {

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            70deg
        );

}


.project-card:hover
.orbit-three {

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            40deg
        );

}


.visual-center-text {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    color:
        #fff;

    font-family:
        Georgia,
        serif;

    font-size:
        62px;

    font-style:
        italic;

    letter-spacing:
        -.08em;

}


.visual-side-label {

    position:
        absolute;

    left:
        25px;

    top:
        25px;

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

    font-size:
        7px;

    letter-spacing:
        .2em;

}


.visual-bottom-word {

    position:
        absolute;

    right:
        20px;

    bottom:
        -18px;

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

    font-size:
        100px;

    font-weight:
        900;

}



/* =========================================================
   VISUAL TWO — DIGITAL
========================================================== */

.visual-two {

    display:
        grid;

    place-items:
        center;

    background:
        #111;

}


.digital-window {

    width:
        72%;

    height:
        72%;

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

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

    box-shadow:
        30px
        30px
        80px
        rgba(
            0,
            0,
            0,
            .5
        );

    transition:
        transform
        .7s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

}


.project-card:hover
.digital-window {

    transform:
        perspective(
            900px
        )
        rotateY(
            -8deg
        )
        rotateX(
            5deg
        )
        scale(
            1.04
        );

}


.window-top {

    display:
        flex;

    gap:
        6px;

    padding:
        12px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.window-top span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

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

}


.window-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    height:
        calc(
            100% - 35px
        );

}


.window-big {

    color:
        var(--pink);

    font-size:
        100px;

    font-weight:
        800;

    line-height:
        .7;

}


.window-line {

    width:
        100px;

    height:
        1px;

    margin:
        25px 0;

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

}


.window-small {

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

    font-size:
        7px;

    letter-spacing:
        .25em;

}


.visual-label {

    position:
        absolute;

    left:
        25px;

    bottom:
        25px;

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

    font-size:
        7px;

    letter-spacing:
        .2em;

}



/* =========================================================
   VISUAL THREE — EDITORIAL
========================================================== */

.visual-three {

    display:
        grid;

    place-items:
        center;

    background:
        #d8d3ca;

}


.editorial-page {

    position:
        relative;

    width:
        62%;

    height:
        75%;

    padding:
        35px;

    color:
        #161616;

    background:
        #eeeae2;

    box-shadow:
        25px
        30px
        60px
        rgba(
            0,
            0,
            0,
            .35
        );

    transform:
        rotate(
            -4deg
        );

    transition:
        transform
        .7s
        ease;

}


.project-card:hover
.editorial-page {

    transform:
        rotate(
            0deg
        )
        translateY(
            -10px
        );

}


.editorial-small {

    display:
        block;

    font-size:
        7px;

    letter-spacing:
        .2em;

}


.editorial-page strong {

    display:
        block;

    margin-top:
        35px;

    font-size:
        clamp(
            40px,
            6vw,
            85px
        );

    line-height:
        .8;

    letter-spacing:
        -.08em;

}


.editorial-number {

    position:
        absolute;

    right:
        25px;

    top:
        25px;

    font-size:
        10px;

}


.editorial-line {

    width:
        70%;

    height:
        1px;

    margin:
        30px 0;

    background:
        #222;

}


.editorial-page p {

    width:
        100px;

    font-family:
        Georgia,
        serif;

    font-size:
        10px;

    line-height:
        1.5;

}


.editorial-circle {

    position:
        absolute;

    right:
        13%;

    bottom:
        15%;

    display:
        grid;

    place-items:
        center;

    width:
        100px;

    height:
        100px;

    border-radius:
        50%;

    background:
        var(--pink);

    color:
        #111;

    font-family:
        Georgia,
        serif;

    font-size:
        35px;

    font-style:
        italic;

}



/* =========================================================
   VISUAL FOUR — CAMPAIGN
========================================================== */

.visual-four {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle at center,
            #4d1830,
            #150a10 60%
        );

}


.campaign-word,
.campaign-word-outline {

    position:
        absolute;

    font-size:
        clamp(
            100px,
            18vw,
            280px
        );

    font-weight:
        900;

    line-height:
        .7;

    letter-spacing:
        -.1em;

    transition:
        .8s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

}


.campaign-word {

    color:
        var(--pink);

    transform:
        translateX(
            -20px
        );

}


.campaign-word-outline {

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .45
        );

    transform:
        translate(
            40px,
            60px
        );

}


.project-card:hover
.campaign-word {

    transform:
        translateX(
            -45px
        )
        scale(
            1.04
        );

}


.project-card:hover
.campaign-word-outline {

    transform:
        translate(
            65px,
            80px
        );

}


.campaign-star {

    position:
        absolute;

    color:
        #fff;

    font-size:
        30px;

    animation:
        campaignStar
        4s
        linear
        infinite;

}


@keyframes campaignStar {

    to {

        transform:
            rotate(
                360deg
            );

    }

}


.campaign-label {

    position:
        absolute;

    left:
        30px;

    top:
        30px;

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

    font-size:
        7px;

    letter-spacing:
        .2em;

}


.campaign-number {

    position:
        absolute;

    right:
        30px;

    bottom:
        25px;

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

    font-size:
        70px;

    font-weight:
        900;

}



/* =========================================================
   VISUAL FIVE — PACKAGING
========================================================== */

.visual-five {

    display:
        grid;

    place-items:
        center;

    background:
        #e4ddd2;

}


.packaging-card {

    position:
        relative;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-direction:
        column;

    width:
        48%;

    height:
        65%;

    color:
        #161616;

    background:
        #f1eee7;

    box-shadow:
        25px
        30px
        70px
        rgba(
            0,
            0,
            0,
            .35
        );

    transform:
        rotate(
            5deg
        );

    transition:
        .7s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

}


.project-card:hover
.packaging-card {

    transform:
        rotate(
            0deg
        )
        scale(
            1.05
        );

}


.packaging-card span {

    position:
        absolute;

    top:
        20px;

    left:
        20px;

    font-size:
        6px;

    letter-spacing:
        .2em;

}


.packaging-card strong {

    font-family:
        Georgia,
        serif;

    font-size:
        55px;

    font-style:
        italic;

}


.packaging-card small {

    margin-top:
        20px;

    font-size:
        6px;

    letter-spacing:
        .2em;

}


.packaging-shadow {

    position:
        absolute;

    width:
        45%;

    height:
        20px;

    bottom:
        15%;

    border-radius:
        50%;

    background:
        rgba(
            0,
            0,
            0,
            .25
        );

    filter:
        blur(
            15px
        );

}



/* =========================================================
   VISUAL SIX — OBJECT
========================================================== */

.visual-six {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #090909;

}


.grid-art {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            80px
        );

    gap:
        10px;

    transform:
        rotate(
            -12deg
        );

    transition:
        .8s
        ease;

}


.project-card:hover
.grid-art {

    transform:
        rotate(
            0deg
        )
        scale(
            1.08
        );

}


.grid-art span {

    width:
        80px;

    height:
        80px;

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

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                .04
            ),
            rgba(
                255,
                94,
                142,
                .15
            )
        );

    transition:
        .5s
        ease;

}


.grid-art span:nth-child(
    2n
) {

    border-radius:
        50%;

}


.project-card:hover
.grid-art span {

    transform:
        rotate(
            25deg
        );

}


.grid-title {

    position:
        absolute;

    left:
        25px;

    top:
        25px;

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

    font-size:
        7px;

    letter-spacing:
        .2em;

}


.grid-number {

    position:
        absolute;

    right:
        25px;

    bottom:
        15px;

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

    font-size:
        120px;

    font-weight:
        900;

}



/* =========================================================
   PROJECT INFO
========================================================== */

.project-info {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items:
        end;

    gap:
        30px;

    padding:
        22px 3px;

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

}


.project-index {

    display:
        block;

    margin-bottom:
        8px;

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

    font-size:
        7px;

    letter-spacing:
        .15em;

}


.project-info h3 {

    font-size:
        25px;

    font-weight:
        500;

    letter-spacing:
        -.04em;

}


.project-meta {

    display:
        flex;

    gap:
        20px;

    align-items:
        center;

}


.project-meta span {

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

    font-size:
        7px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}


.project-open {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

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

    border-radius:
        50%;

    color:
        #fff;

    font-size:
        15px;

    text-decoration:
        none;

    transition:
        .4s
        ease;

}


.project-card:hover
.project-open {

    background:
        var(--pink);

    border-color:
        var(--pink);

    color:
        #090909;

    transform:
        rotate(
            45deg
        );

}



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

.projects-footer {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        65px;

}


.projects-footer > span {

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

    font-size:
        7px;

    letter-spacing:
        .2em;

}


.projects-footer-line {

    height:
        1px;

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

}


.all-projects-button {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

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

    font-size:
        8px;

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

}


.all-projects-button span {

    color:
        var(--pink);

    font-size:
        15px;

    transition:
        .3s
        ease;

}


.all-projects-button:hover span {

    transform:
        translate(
            4px,
            -4px
        );

}



/* =========================================================
   FLOATING CURSOR PREVIEW
========================================================== */

.project-cursor-preview {

    position:
        fixed;

    left:
        0;

    top:
        0;

    width:
        130px;

    height:
        130px;

    z-index:
        9999;

    pointer-events:
        none;

    opacity:
        0;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            .6
        );

    transition:
        opacity
        .25s
        ease,
        transform
        .35s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

}


.project-cursor-preview.visible {

    opacity:
        1;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(
            1
        );

}


.cursor-preview-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    width:
        100%;

    height:
        100%;

    border:
        1px solid
        rgba(
            255,
            126,
            161,
            .65
        );

    border-radius:
        50%;

    background:
        rgba(
            15,
            10,
            13,
            .88
        );

    backdrop-filter:
        blur(
            10px
        );

    box-shadow:
        0 0 50px
        rgba(
            255,
            90,
            140,
            .18
        );

}


.cursor-preview-label {

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

    font-size:
        6px;

    letter-spacing:
        .18em;

}


.cursor-preview-inner strong {

    margin-top:
        7px;

    color:
        var(--pink);

    font-size:
        22px;

}



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

@media (max-width: 900px) {

    .projects-intro {

        align-items:
            start;

        flex-direction:
            column;

        gap:
            35px;

    }


    .projects-intro-side {

        width:
            100%;

        max-width:
            450px;

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .project-card-wide {

        grid-column:
            auto;

    }


    .project-card-wide
    .project-visual {

        height:
            500px;

    }


    .project-visual {

        height:
            540px;

    }


    .project-cursor-preview {

        display:
            none;

    }

}


@media (max-width: 600px) {

    .projects-section {

        padding:
            110px 0
            120px;

    }


    .projects-heading {

        font-size:
            62px;

    }


    .projects-intro {

        margin-bottom:
            55px;

    }


    .project-filters {

        overflow-x:
            auto;

        flex-wrap:
            nowrap;

        padding-bottom:
            8px;

        scrollbar-width:
            none;

    }


    .project-filters::-webkit-scrollbar {

        display:
            none;

    }


    .project-filter {

        flex-shrink:
            0;

    }


    .project-visual,
    .project-card:nth-child(
        2
    ) .project-visual,
    .project-card:nth-child(
        3
    ) .project-visual,
    .project-card:nth-child(
        5
    ) .project-visual,
    .project-card:nth-child(
        6
    ) .project-visual,
    .project-card-wide
    .project-visual {

        height:
            470px;

    }


    .project-info {

        grid-template-columns:
            1fr
            auto;

        gap:
            15px;

    }


    .project-meta {

        grid-column:
            1 / -1;

        grid-row:
            2;

    }


    .project-open {

        grid-column:
            2;

        grid-row:
            1;

    }


    .orbit-one {

        width:
            250px;

        height:
            250px;

    }


    .orbit-two {

        width:
            350px;

        height:
            130px;

    }


    .orbit-three {

        width:
            130px;

        height:
            350px;

    }


    .digital-window {

        width:
            78%;

        height:
            65%;

    }


    .editorial-page {

        width:
            70%;

        height:
            70%;

    }


    .packaging-card {

        width:
            55%;

        height:
            62%;

    }


    .grid-art {

        grid-template-columns:
            repeat(
                3,
                55px
            );

    }


    .grid-art span {

        width:
            55px;

        height:
            55px;

    }


    .projects-footer {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    .projects-footer-line {

        display:
            none;

    }

}





/* =========================================================
   PART 08 CSS
   CREATIVE PROCESS / TIMELINE
========================================================== */


/* =========================================================
   PROCESS SECTION
========================================================== */

.process-section {

    position:
        relative;

    padding:
        190px 0 170px;

    overflow:
        hidden;

}


.process-section::after {

    content:
        "";

    position:
        absolute;

    width:
        700px;

    height:
        700px;

    right:
        -450px;

    top:
        30%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                78,
                132,
                .055
            ),
            transparent 70%
        );

    pointer-events:
        none;

}



/* =========================================================
   PROCESS INTRO
========================================================== */

.process-intro {

    display:
        grid;

    grid-template-columns:
        1.2fr
        .8fr;

    align-items:
        end;

    gap:
        100px;

    margin-top:
        40px;

    margin-bottom:
        130px;

}


.process-heading {

    margin-top:
        18px;

    font-size:
        clamp(
            70px,
            10vw,
            145px
        );

    line-height:
        .8;

    letter-spacing:
        -.09em;

}


.process-heading
.serif-accent {

    color:
        var(--pink);

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-weight:
        400;

}


.process-heading
.stroke-accent {

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .45
        );

}


.process-intro-copy {

    max-width:
        370px;

    padding-bottom:
        5px;

}


.process-intro-copy p {

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

    font-size:
        10px;

    line-height:
        1.9;

}


.process-status {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        30px;

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

    font-size:
        7px;

    letter-spacing:
        .18em;

}


.status-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #6dff9c;

    box-shadow:
        0 0 15px
        rgba(
            109,
            255,
            156,
            .8
        );

    animation:
        statusPulse
        2s
        ease
        infinite;

}


@keyframes statusPulse {

    0%,
    100% {

        transform:
            scale(
                1
            );

        opacity:
            1;

    }

    50% {

        transform:
            scale(
                .55
            );

        opacity:
            .45;

    }

}



/* =========================================================
   TIMELINE
========================================================== */

.creative-timeline {

    position:
        relative;

    max-width:
        1080px;

    margin:
        0 auto;

}


.timeline-track {

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        1px;

    transform:
        translateX(
            -50%
        );

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

}


.timeline-progress {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        0%;

    background:
        linear-gradient(
            to bottom,
            var(--pink),
            rgba(
                255,
                93,
                145,
                .15
            )
        );

    box-shadow:
        0 0 20px
        rgba(
            255,
            93,
            145,
            .4
        );

    transition:
        height
        .15s
        linear;

}



/* =========================================================
   TIMELINE ITEM
========================================================== */

.timeline-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr
        90px
        1fr;

    min-height:
        360px;

}


.timeline-marker {

    position:
        absolute;

    left:
        50%;

    top:
        55px;

    z-index:
        3;

    display:
        grid;

    place-items:
        center;

    width:
        56px;

    height:
        56px;

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

    border-radius:
        50%;

    background:
        #09090b;

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

    font-size:
        8px;

    transform:
        translateX(
            -50%
        );

    transition:
        .5s
        ease;

}


.timeline-marker::before {

    content:
        "";

    position:
        absolute;

    inset:
        -7px;

    border:
        1px solid
        transparent;

    border-radius:
        50%;

    transition:
        .5s
        ease;

}


.timeline-item.active
.timeline-marker {

    color:
        #09090b;

    border-color:
        var(--pink);

    background:
        var(--pink);

    box-shadow:
        0 0 30px
        rgba(
            255,
            89,
            139,
            .3
        );

}


.timeline-item.active
.timeline-marker::before {

    border-color:
        rgba(
            255,
            92,
            142,
            .3
        );

    animation:
        markerRing
        1.8s
        ease
        infinite;

}


@keyframes markerRing {

    0% {

        transform:
            scale(
                .8
            );

        opacity:
            1;

    }

    100% {

        transform:
            scale(
                1.45
            );

        opacity:
            0;

    }

}



/* =========================================================
   TIMELINE CONTENT
========================================================== */

.timeline-content {

    grid-column:
        3;

    padding:
        55px 0 90px 65px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    opacity:
        .42;

    transform:
        translateY(
            30px
        );

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

}


.timeline-item:nth-child(
    odd
)
.timeline-content {

    grid-column:
        1;

    padding:
        55px 65px 90px 0;

    text-align:
        right;

}


.timeline-item.active
.timeline-content {

    opacity:
        1;

    transform:
        translateY(
            0
        );

}


.timeline-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        25px;

}


.timeline-item:nth-child(
    odd
)
.timeline-top {

    flex-direction:
        row-reverse;

}


.timeline-kicker {

    color:
        var(--pink);

    font-size:
        7px;

    letter-spacing:
        .2em;

}


.timeline-symbol {

    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

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

    border-radius:
        50%;

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

    font-size:
        12px;

    transition:
        .4s
        ease;

}


.timeline-item.active
.timeline-symbol {

    color:
        var(--pink);

    border-color:
        rgba(
            255,
            92,
            142,
            .4
        );

    transform:
        rotate(
            45deg
        );

}


.timeline-content h3 {

    max-width:
        500px;

    margin-bottom:
        25px;

    font-size:
        clamp(
            35px,
            4vw,
            58px
        );

    line-height:
        .95;

    letter-spacing:
        -.065em;

}


.timeline-content h3 em {

    color:
        var(--pink);

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

}


.timeline-content p {

    max-width:
        430px;

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

    font-size:
        9px;

    line-height:
        1.9;

}


.timeline-item:nth-child(
    odd
)
.timeline-content p {

    margin-left:
        auto;

}


.timeline-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        25px;

}


.timeline-item:nth-child(
    odd
)
.timeline-tags {

    justify-content:
        flex-end;

}


.timeline-tags span {

    padding:
        7px 10px;

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

    border-radius:
        30px;

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

    font-size:
        6px;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}



/* =========================================================
   YEAR LABEL
========================================================== */

.timeline-year {

    position:
        absolute;

    top:
        62px;

    left:
        calc(
            50% + 80px
        );

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

    font-size:
        7px;

    letter-spacing:
        .18em;

}


.timeline-item:nth-child(
    odd
)
.timeline-year {

    left:
        auto;

    right:
        calc(
            50% + 80px
        );

}



/* =========================================================
   GIANT SIDE NUMBER
========================================================== */

.timeline-side-number {

    position:
        absolute;

    right:
        -30px;

    bottom:
        40px;

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

    font-size:
        170px;

    font-weight:
        900;

    line-height:
        .7;

    pointer-events:
        none;

}


.timeline-item:nth-child(
    odd
)
.timeline-side-number {

    left:
        -30px;

    right:
        auto;

}



/* =========================================================
   FINAL ITEM
========================================================== */

.timeline-item-final {

    min-height:
        320px;

}


.timeline-item-final
.timeline-content {

    border-bottom:
        0;

}



/* =========================================================
   PROCESS BOTTOM
========================================================== */

.process-bottom {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        35px;

    margin-top:
        90px;

    padding:
        35px 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

}


.process-bottom-symbol {

    display:
        grid;

    place-items:
        center;

    width:
        50px;

    height:
        50px;

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

    border-radius:
        50%;

    color:
        var(--pink);

    animation:
        bottomSpin
        8s
        linear
        infinite;

}


@keyframes bottomSpin {

    to {

        transform:
            rotate(
                360deg
            );

    }

}


.process-bottom-text span {

    display:
        block;

    margin-bottom:
        8px;

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

    font-size:
        6px;

    letter-spacing:
        .2em;

}


.process-bottom-text strong {

    font-size:
        clamp(
            25px,
            4vw,
            50px
        );

    font-weight:
        400;

    letter-spacing:
        -.05em;

}


.process-bottom-text strong i {

    color:
        var(--pink);

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

}


.process-bottom-arrow {

    display:
        grid;

    place-items:
        center;

    width:
        45px;

    height:
        45px;

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

    border-radius:
        50%;

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

    animation:
        arrowFloat
        2s
        ease
        infinite;

}


@keyframes arrowFloat {

    0%,
    100% {

        transform:
            translateY(
                0
            );

    }

    50% {

        transform:
            translateY(
                6px
            );

    }

}



/* =========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .process-intro {

        grid-template-columns:
            1fr;

        gap:
            45px;

        margin-bottom:
            90px;

    }


    .process-intro-copy {

        max-width:
            500px;

    }


    .creative-timeline {

        padding-left:
            35px;

    }


    .timeline-track {

        left:
            10px;

        transform:
            none;

    }


    .timeline-marker {

        left:
            10px;

        transform:
            translateX(
                -50%
            );

    }


    .timeline-item,
    .timeline-item:nth-child(
        odd
    ) {

        display:
            block;

        min-height:
            auto;

    }


    .timeline-content,
    .timeline-item:nth-child(
        odd
    )
    .timeline-content {

        padding:
            55px 0 80px 55px;

        text-align:
            left;

    }


    .timeline-item:nth-child(
        odd
    )
    .timeline-content p {

        margin-left:
            0;

    }


    .timeline-item:nth-child(
        odd
    )
    .timeline-top {

        flex-direction:
            row;

    }


    .timeline-item:nth-child(
        odd
    )
    .timeline-tags {

        justify-content:
            flex-start;

    }


    .timeline-year,
    .timeline-item:nth-child(
        odd
    )
    .timeline-year {

        position:
            relative;

        top:
            auto;

        left:
            auto;

        right:
            auto;

        margin-left:
            55px;

        padding-top:
            45px;

    }


    .timeline-side-number,
    .timeline-item:nth-child(
        odd
    )
    .timeline-side-number {

        right:
            0;

        left:
            auto;

    }

}



/* =========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .process-section {

        padding:
            120px 0;

    }


    .process-heading {

        font-size:
            62px;

    }


    .process-intro {

        margin-bottom:
            70px;

    }


    .creative-timeline {

        padding-left:
            28px;

    }


    .timeline-track {

        left:
            7px;

    }


    .timeline-marker {

        left:
            7px;

        width:
            44px;

        height:
            44px;

        font-size:
            7px;

    }


    .timeline-content,
    .timeline-item:nth-child(
        odd
    )
    .timeline-content {

        padding:
            45px 0 65px 45px;

    }


    .timeline-year,
    .timeline-item:nth-child(
        odd
    )
    .timeline-year {

        margin-left:
            45px;

        padding-top:
            35px;

    }


    .timeline-content h3 {

        font-size:
            38px;

    }


    .timeline-content p {

        font-size:
            9px;

    }


    .timeline-side-number {

        font-size:
            100px;

        right:
            -5px;

    }


    .process-bottom {

        grid-template-columns:
            auto
            1fr;

        gap:
            20px;

    }


    .process-bottom-arrow {

        display:
            none;

    }


    .process-bottom-text strong {

        font-size:
            27px;

    }

}




/* =========================================================
   PART 09 — SERVICES + SKILLS
   SAFE CSS VERSION
   Does NOT override Part 8 navigation/active animations
========================================================== */


/* =========================================================
   SERVICES SECTION
========================================================== */

.services-section {

    position: relative;

    padding: 170px 0 150px;

    overflow: hidden;

    isolation: isolate;

}


.services-section::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    left: -480px;

    top: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 75, 135, 0.055) 0%,
            rgba(255, 75, 135, 0.02) 35%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;

}


.services-section::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -380px;

    bottom: 10%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.025),
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;

}



/* =========================================================
   SERVICES INTRO
========================================================== */

.services-intro {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(260px, 0.85fr);

    gap: 90px;

    align-items: end;

    margin:
        45px 0 90px;

}


.services-heading {

    margin-top: 18px;

    font-size:
        clamp(
            60px,
            8.5vw,
            130px
        );

    line-height: 0.84;

    letter-spacing: -0.085em;

}


.services-heading .serif-accent {

    color: var(--pink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-weight: 400;

}


.services-intro-copy {

    width: 100%;

    max-width: 390px;

    justify-self: end;

    padding-bottom: 5px;

}


.services-intro-copy p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    font-size: 10px;

    line-height: 1.95;

}



/* =========================================================
   SERVICES GRID
========================================================== */

.services-grid {

    display: grid;

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

    gap: 1px;

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.service-card {

    position: relative;

    min-height: 475px;

    padding: 42px;

    overflow: hidden;

    background:
        #09090b;

    transform-style: preserve-3d;

    will-change:
        transform;

    transition:
        transform
        0.45s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),
        background
        0.4s
        ease;

}


.service-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.025
            ),
            transparent 42%
        );

    opacity: 0;

    transition:
        opacity
        0.5s
        ease;

    pointer-events: none;

}


.service-card:hover::before {

    opacity: 1;

}


.service-card::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    right: -150px;

    bottom: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                77,
                137,
                0.16
            ),
            transparent 68%
        );

    transition:
        transform
        0.8s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    pointer-events: none;

}


.service-card:hover::after {

    transform:
        scale(2.1);

}


.service-card:focus-visible {

    outline:
        1px solid
        rgba(
            255,
            77,
            137,
            0.8
        );

    outline-offset: -1px;

}



/* =========================================================
   LARGE / WIDE CARDS
========================================================== */

.service-card-large {

    grid-column: span 2;

    min-height: 400px;

}


.service-card-wide {

    grid-column: span 2;

    min-height: 400px;

}



/* =========================================================
   CARD NUMBER
========================================================== */

.service-number {

    position: absolute;

    top: 35px;

    right: 38px;

    z-index: 3;

    color:
        rgba(
            255,
            255,
            255,
            0.2
        );

    font-size: 8px;

    line-height: 1;

    letter-spacing: 0.16em;

}



/* =========================================================
   GIANT BACKGROUND SYMBOL
========================================================== */

.service-card-bg {

    position: absolute;

    right: 35px;

    bottom: -55px;

    z-index: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.018
        );

    font-size: 250px;

    font-weight: 900;

    line-height: 0.8;

    user-select: none;

    pointer-events: none;

    transition:
        transform
        0.8s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),
        color
        0.6s
        ease;

}


.service-card:hover .service-card-bg {

    color:
        rgba(
            255,
            77,
            137,
            0.035
        );

    transform:
        rotate(10deg)
        scale(1.08);

}



/* =========================================================
   SERVICE ICON
========================================================== */

.service-icon-wrap {

    position: relative;

    z-index: 4;

    display: grid;

    place-items: center;

    width: 56px;

    height: 56px;

    margin-bottom: 88px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.015
        );

    transition:
        transform
        0.5s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),
        border-color
        0.4s
        ease,
        background
        0.4s
        ease;

}


.service-card:hover .service-icon-wrap {

    border-color:
        rgba(
            255,
            77,
            137,
            0.65
        );

    background:
        rgba(
            255,
            77,
            137,
            0.05
        );

    transform:
        rotate(12deg)
        scale(1.08);

}


.service-icon {

    width: 22px;

    height: 22px;

    fill: none;

    stroke:
        rgba(
            255,
            255,
            255,
            0.62
        );

    stroke-width: 1.3;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        stroke
        0.4s
        ease;

}


.service-card:hover .service-icon {

    stroke: var(--pink);

}



/* =========================================================
   SERVICE CONTENT
========================================================== */

.service-content {

    position: relative;

    z-index: 4;

}


.service-kicker {

    display: block;

    margin-bottom: 18px;

    color: var(--pink);

    font-size: 7px;

    line-height: 1;

    letter-spacing: 0.2em;

}


.service-content h3 {

    margin: 0 0 22px;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-size:
        clamp(
            34px,
            4vw,
            58px
        );

    font-weight: 500;

    line-height: 0.88;

    letter-spacing: -0.065em;

}


.service-content p {

    max-width: 440px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.38
        );

    font-size: 9px;

    line-height: 1.9;

}



/* =========================================================
   LARGE CARD CONTENT
========================================================== */

.service-card-large .service-content,
.service-card-wide .service-content {

    max-width: 680px;

}


.service-card-large .service-icon-wrap,
.service-card-wide .service-icon-wrap {

    position: absolute;

    top: 42px;

    right: 90px;

    margin: 0;

}



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

.service-footer {

    position: absolute;

    right: 40px;

    bottom: 38px;

    left: 40px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        rgba(
            255,
            255,
            255,
            0.22
        );

    font-size: 6px;

    line-height: 1.4;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.service-arrow {

    display: grid;

    flex-shrink: 0;

    place-items: center;

    width: 31px;

    height: 31px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size: 11px;

    transition:
        transform
        0.4s
        ease,
        color
        0.4s
        ease,
        background
        0.4s
        ease,
        border-color
        0.4s
        ease;

}


.service-card:hover .service-arrow {

    color: #09090b;

    background: var(--pink);

    border-color: var(--pink);

    transform:
        rotate(45deg);

}



/* =========================================================
   SKILLS AREA
========================================================== */

.skills-area {

    display: grid;

    grid-template-columns:
        minmax(280px, 0.75fr)
        minmax(0, 1fr);

    gap: 90px;

    align-items: center;

    margin-top: 165px;

}


.skills-heading {

    position: relative;

}


.skills-heading h3 {

    margin:
        18px 0 20px;

    font-size:
        clamp(
            45px,
            5vw,
            75px
        );

    font-weight: 500;

    line-height: 0.9;

    letter-spacing: -0.07em;

}


.skills-heading h3 span {

    color: var(--pink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-weight: 400;

}


.skills-heading p {

    max-width: 330px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    font-size: 9px;

    line-height: 1.9;

}



/* =========================================================
   SKILL WHEEL
========================================================== */

.skill-wheel {

    position: relative;

    width: 390px;

    height: 390px;

    margin: 0 auto;

    transform-style: preserve-3d;

    will-change: transform;

    transition:
        transform
        0.45s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.skill-wheel-ring {

    position: absolute;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 50%;

    pointer-events: none;

}


.skill-wheel .ring-one {

    inset: 0;

    animation:
        part9WheelRotate
        25s
        linear
        infinite;

}


.skill-wheel .ring-two {

    inset: 38px;

    border-style: dashed;

    animation:
        part9WheelRotateReverse
        18s
        linear
        infinite;

}


.skill-wheel .ring-three {

    inset: 85px;

    border-color:
        rgba(
            255,
            77,
            137,
            0.2
        );

}


@keyframes part9WheelRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes part9WheelRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}



/* =========================================================
   WHEEL CENTER
========================================================== */

.skill-wheel-center {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 4;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 135px;

    height: 135px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

    background:
        #0b0b0e;

    box-shadow:
        0 0 50px
        rgba(
            0,
            0,
            0,
            0.7
        );

    transform:
        translate(
            -50%,
            -50%
        );

}


.skill-wheel-center span {

    color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    font-size: 6px;

    line-height: 1;

    letter-spacing: 0.2em;

}


.skill-wheel-center strong {

    margin: 7px 0;

    color: #fff;

    font-size: 18px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.08em;

}


.skill-wheel-center small {

    color: var(--pink);

    font-size: 10px;

}



/* =========================================================
   ORBIT ITEMS
========================================================== */

.skill-orbit-item {

    position: absolute;

    z-index: 5;

    display: grid;

    place-items: center;

    width: 48px;

    height: 48px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

    background:
        #09090b;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size: 10px;

    font-weight: 600;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.35
        );

    transition:
        transform
        0.35s
        ease,
        color
        0.35s
        ease,
        background
        0.35s
        ease,
        border-color
        0.35s
        ease;

}


.skill-orbit-item:hover,
.skill-orbit-item.orbit-hover {

    color: #09090b;

    background: var(--pink);

    border-color: var(--pink);

    transform: scale(1.16);

}


.skill-wheel .skill-orbit-one {

    top: 22px;

    left: 50%;

    transform:
        translateX(-50%);

}


.skill-wheel .skill-orbit-two {

    top: 50%;

    right: 20px;

    transform:
        translateY(-50%);

}


.skill-wheel .skill-orbit-three {

    bottom: 22px;

    left: 50%;

    transform:
        translateX(-50%);

}


.skill-wheel .skill-orbit-four {

    top: 50%;

    left: 20px;

    transform:
        translateY(-50%);

}


.skill-wheel .skill-orbit-five {

    top: 18%;

    right: 17%;

}



/* =========================================================
   SKILL LIST
========================================================== */

.skill-list {

    grid-column: 2;

    margin-top: -35px;

}


.skill-row {

    padding: 21px 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.skill-name {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 10px;

}


.skill-name span {

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 8px;

    line-height: 1.3;

    letter-spacing: 0.04em;

}


.skill-name small {

    flex-shrink: 0;

    color: var(--pink);

    font-size: 7px;

    line-height: 1;

}


.skill-meter {

    width: 100%;

    height: 2px;

    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.skill-meter span {

    display: block;

    width: 0;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            rgba(
                255,
                255,
                255,
                0.7
            )
        );

    box-shadow:
        0 0 12px
        rgba(
            255,
            90,
            140,
            0.4
        );

    transition:
        width
        1.4s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}



/* =========================================================
   SAFE SKILL ANIMATION
   NOTE:
   No .visible selector.
   No global IntersectionObserver class.
========================================================== */

.skill-row.skill-visible
.skill-meter span {

    width:
        var(--skill-width);

}



/* =========================================================
   SKILL MARQUEE
========================================================== */

.skill-marquee {

    width: 100vw;

    margin-top: 125px;

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

    overflow: hidden;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

}


.skill-marquee-track {

    display: flex;

    align-items: center;

    width: max-content;

    padding: 25px 0;

    animation:
        part9SkillMarquee
        25s
        linear
        infinite;

    will-change:
        transform;

}


.skill-marquee span {

    margin:
        0 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.22
        );

    font-size: 9px;

    line-height: 1;

    letter-spacing: 0.18em;

    white-space: nowrap;

}


.skill-marquee i {

    color: var(--pink);

    font-style: normal;

    font-size: 9px;

}


@keyframes part9SkillMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}



/* =========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .services-intro {

        grid-template-columns:
            1fr;

        gap: 35px;

    }


    .services-intro-copy {

        justify-self: start;

    }


    .skills-area {

        grid-template-columns:
            1fr;

        gap: 80px;

    }


    .skill-list {

        grid-column: auto;

        margin-top: 0;

    }

}



/* =========================================================
   TABLET / SMALL LAPTOP
========================================================== */

@media (max-width: 800px) {

    .services-section {

        padding:
            130px 0 120px;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card-large,
    .service-card-wide {

        grid-column:
            span 1;

    }


    .service-card-large,
    .service-card-wide {

        min-height: 440px;

    }


    .service-card-large
    .service-icon-wrap,
    .service-card-wide
    .service-icon-wrap {

        position: relative;

        top: auto;

        right: auto;

        margin-bottom: 70px;

    }


    .skill-wheel {

        width: 350px;

        height: 350px;

    }

}



/* =========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .services-section {

        padding:
            105px 0 100px;

    }


    .services-intro {

        margin:
            35px 0 60px;

    }


    .services-heading {

        font-size:
            clamp(
                52px,
                16vw,
                76px
            );

    }


    .services-intro-copy p {

        font-size: 9px;

        line-height: 1.85;

    }


    .service-card {

        min-height: 430px;

        padding: 30px;

    }


    .service-card-large,
    .service-card-wide {

        min-height: 430px;

    }


    .service-number {

        top: 28px;

        right: 28px;

    }


    .service-icon-wrap {

        width: 52px;

        height: 52px;

        margin-bottom: 68px;

    }


    .service-card-large
    .service-icon-wrap,
    .service-card-wide
    .service-icon-wrap {

        position: relative;

        top: auto;

        right: auto;

        margin-bottom: 68px;

    }


    .service-content h3 {

        font-size: 38px;

    }


    .service-content p {

        max-width: 330px;

        font-size: 8px;

        line-height: 1.85;

    }


    .service-footer {

        right: 28px;

        bottom: 27px;

        left: 28px;

    }


    .service-card-bg {

        right: 10px;

        bottom: -30px;

        font-size: 175px;

    }


    .skills-area {

        margin-top: 105px;

    }


    .skills-heading h3 {

        font-size: 48px;

    }


    .skill-wheel {

        width: 295px;

        height: 295px;

    }


    .skill-wheel-center {

        width: 108px;

        height: 108px;

    }


    .skill-wheel-center strong {

        font-size: 16px;

    }


    .skill-orbit-item {

        width: 40px;

        height: 40px;

        font-size: 8px;

    }


    .skill-wheel .skill-orbit-one {

        top: 8px;

    }


    .skill-wheel .skill-orbit-two {

        right: 7px;

    }


    .skill-wheel .skill-orbit-three {

        bottom: 8px;

    }


    .skill-wheel .skill-orbit-four {

        left: 7px;

    }


    .skill-wheel .skill-orbit-five {

        top: 14%;

        right: 12%;

    }


    .skill-row {

        padding: 18px 0;

    }


    .skill-name span {

        font-size: 7px;

    }


    .skill-name small {

        font-size: 6px;

    }


    .skill-marquee {

        margin-top: 90px;

    }


    .skill-marquee-track {

        padding: 21px 0;

    }


    .skill-marquee span {

        margin:
            0 18px;

        font-size: 7px;

    }

}



/* =========================================================
   VERY SMALL DEVICES
========================================================== */

@media (max-width: 380px) {

    .service-card {

        padding: 25px;

    }


    .service-content h3 {

        font-size: 34px;

    }


    .skill-wheel {

        width: 270px;

        height: 270px;

    }


    .skill-wheel-center {

        width: 98px;

        height: 98px;

    }


    .skill-orbit-item {

        width: 36px;

        height: 36px;

    }

}



/* =========================================================
   REDUCED MOTION
========================================================== */

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

    .skill-wheel .ring-one,
    .skill-wheel .ring-two,
    .skill-marquee-track {

        animation:
            none !important;

    }


    .service-card,
    .service-icon-wrap,
    .service-arrow,
    .skill-wheel,
    .skill-meter span {

        transition:
            none !important;

    }

}



/* =========================================================
   PART 10 — PROJECT SHOWCASE
========================================================== */


/* =========================================================
   WORK SECTION
========================================================== */

.work-section {

    position: relative;

    padding:
        180px 0 150px;

    overflow: hidden;

    isolation: isolate;

}


.work-section::before {

    content: "";

    position: absolute;

    width: 800px;

    height: 800px;

    top: 20%;

    right: -650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                78,
                137,
                0.065
            ),
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;

}



/* =========================================================
   WORK INTRO
========================================================== */

.work-intro {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    gap: 80px;

    align-items: end;

    margin:
        45px 0 70px;

}


.work-heading {

    margin-top: 18px;

    font-size:
        clamp(
            65px,
            9vw,
            135px
        );

    line-height: 0.82;

    letter-spacing: -0.09em;

}


.work-heading .serif-accent {

    color: var(--pink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-weight: 400;

}


.work-intro-side {

    padding-bottom: 5px;

}


.work-intro-number {

    display: block;

    margin-bottom: 18px;

    color: var(--pink);

    font-size: 9px;

    letter-spacing: 0.18em;

}


.work-intro-side p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.34
        );

    font-size: 9px;

    line-height: 1.9;

}



/* =========================================================
   FILTER BAR
========================================================== */

.work-filter-bar {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 35px;

    overflow-x: auto;

    scrollbar-width: none;

}


.work-filter-bar::-webkit-scrollbar {

    display: none;

}


.work-filter-btn {

    position: relative;

    flex-shrink: 0;

    padding:
        11px 18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 100px;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    font-family: inherit;

    font-size: 7px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color
        0.3s
        ease,
        background
        0.3s
        ease,
        border-color
        0.3s
        ease,
        transform
        0.3s
        ease;

}


.work-filter-btn:hover {

    color: #fff;

    border-color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    transform:
        translateY(-2px);

}


.work-filter-btn.active {

    color: #09090b;

    background:
        var(--pink);

    border-color:
        var(--pink);

}



/* =========================================================
   PROJECT BASE
========================================================== */

.project-card {

    position: relative;

    overflow: hidden;

    background:
        #09090b;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    transition:
        transform
        0.5s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),
        opacity
        0.45s
        ease;

}


.project-card:hover {

    transform:
        translateY(-7px);

}


.project-card.is-hidden {

    display: none;

}



/* =========================================================
   FEATURED PROJECT
========================================================== */

.project-featured {

    display: grid;

    grid-template-columns:
        1.3fr
        0.7fr;

    min-height:
        650px;

    margin-bottom: 18px;

}


.project-visual {

    position: relative;

    overflow: hidden;

}


.project-visual::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.04
            ),
            transparent 45%
        );

    pointer-events: none;

}



/* =========================================================
   PROJECT 01 VISUAL
========================================================== */

.project-visual-one {

    min-height: 650px;

    background:
        #151218;

}


.project-noise {

    position: absolute;

    inset: 0;

    opacity: 0.09;

    background-image:
        radial-gradient(
            rgba(
                255,
                255,
                255,
                0.8
            ) 0.5px,
            transparent 0.5px
        );

    background-size:
        5px 5px;

    mix-blend-mode:
        soft-light;

    pointer-events: none;

}


.project-shape {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.shape-one {

    width: 430px;

    height: 430px;

    top: 50%;

    left: 50%;

    background:
        linear-gradient(
            135deg,
            #eaa8bd,
            #a94c70
        );

    transform:
        translate(
            -50%,
            -50%
        );

    box-shadow:
        0 0 120px
        rgba(
            255,
            91,
            142,
            0.2
        );

    transition:
        transform
        1s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.project-featured:hover .shape-one {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08)
        rotate(8deg);

}


.shape-two {

    width: 180px;

    height: 180px;

    left: 15%;

    top: 17%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.55
        );

}


.shape-three {

    width: 250px;

    height: 250px;

    right: -100px;

    bottom: -100px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

}


.project-display-type {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 3;

    color: #171118;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            80px,
            11vw,
            170px
        );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing:
        -0.1em;

    transform:
        translate(
            -50%,
            -50%
        );

    transition:
        transform
        0.8s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.project-featured:hover
.project-display-type {

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);

}


.project-display-small {

    position: absolute;

    top: 35px;

    left: 35px;

    z-index: 5;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 6px;

    letter-spacing: 0.2em;

}


.project-display-circle {

    position: absolute;

    right: 35px;

    bottom: 35px;

    z-index: 5;

    display: grid;

    place-items: center;

    width: 70px;

    height: 70px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.3
        );

    border-radius: 50%;

    color:
        rgba(
            255,
            255,
            255,
            0.8
        );

    font-family:
        Georgia,
        serif;

    font-size: 26px;

    font-style: italic;

}


.project-corner-label {

    position: absolute;

    left: 35px;

    bottom: 35px;

    z-index: 5;

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size: 6px;

    line-height: 1.6;

    letter-spacing: 0.16em;

}



/* =========================================================
   PROJECT INFO
========================================================== */

.project-info {

    position: relative;

    display: flex;

    flex-direction: column;

    padding:
        45px;

    background:
        #09090b;

}


.project-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.project-number {

    color:
        rgba(
            255,
            255,
            255,
            0.2
        );

    font-size: 8px;

    letter-spacing: 0.12em;

}


.project-category {

    color:
        var(--pink);

    font-size: 6px;

    letter-spacing: 0.18em;

}


.project-info h3 {

    margin:
        auto 0 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    font-weight: 500;

    line-height: 0.86;

    letter-spacing: -0.07em;

}


.project-info h3 span {

    display: block;

    color:
        rgba(
            255,
            255,
            255,
            0.25
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-weight: 400;

}


.project-info > p {

    max-width: 380px;

    margin:
        0 0 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.34
        );

    font-size: 8px;

    line-height: 1.9;

}



/* =========================================================
   PROJECT TAGS
========================================================== */

.project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 25px;

}


.project-tags span {

    padding:
        7px 10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-radius: 100px;

    color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    font-size: 6px;

    letter-spacing: 0.08em;

}



/* =========================================================
   PROJECT BUTTON
========================================================== */

.project-open-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding:
        14px 0;

    border: 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-family: inherit;

    font-size: 7px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color
        0.3s
        ease;

}


.project-open-btn i {

    display: grid;

    place-items: center;

    width: 32px;

    height: 32px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

    font-size: 11px;

    font-style: normal;

    transition:
        transform
        0.4s
        ease,
        background
        0.4s
        ease,
        color
        0.4s
        ease,
        border-color
        0.4s
        ease;

}


.project-open-btn:hover {

    color: #fff;

}


.project-open-btn:hover i {

    color: #09090b;

    background:
        var(--pink);

    border-color:
        var(--pink);

    transform:
        rotate(45deg);

}



/* =========================================================
   PROJECT GRID
========================================================== */

.projects-grid {

    display: grid;

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

    gap: 18px;

}


.project-small {

    min-height: 620px;

}


.project-wide {

    grid-column:
        span 2;

    display: grid;

    grid-template-columns:
        1.35fr
        0.65fr;

    min-height: 570px;

}



/* =========================================================
   PROJECT 02 — DIGITAL
========================================================== */

.project-visual-two {

    min-height: 390px;

    background:
        #d7d2ca;

}


.digital-window {

    position: absolute;

    top: 13%;

    left: 13%;

    width: 74%;

    height: 74%;

    overflow: hidden;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.15
        );

    background:
        #111;

    box-shadow:
        0 25px 60px
        rgba(
            0,
            0,
            0,
            0.25
        );

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.project-small:hover
.digital-window {

    transform:
        translateY(-10px)
        rotate(-2deg);

}


.digital-window-top {

    display: flex;

    gap: 5px;

    padding: 9px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

}


.digital-window-top span {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.4
        );

}


.digital-window-content {

    padding: 35px;

}


.digital-window-content small {

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    font-size: 6px;

    letter-spacing: 0.15em;

}


.digital-window-content strong {

    display: block;

    margin-top: 45px;

    color: #fff;

    font-size:
        clamp(
            30px,
            4vw,
            55px
        );

    line-height: 0.82;

    letter-spacing: -0.07em;

}


.digital-line {

    width: 50px;

    height: 1px;

    margin-top: 40px;

    background:
        var(--pink);

}



/* =========================================================
   PROJECT 03 — EDITORIAL
========================================================== */

.project-visual-three {

    display: grid;

    place-items: center;

    min-height: 390px;

    background:
        #b8b1a6;

}


.editorial-page {

    position: relative;

    width: 60%;

    height: 78%;

    padding: 30px;

    background:
        #ece8df;

    color:
        #171513;

    box-shadow:
        20px 25px 50px
        rgba(
            0,
            0,
            0,
            0.2
        );

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.project-small:hover
.editorial-page {

    transform:
        rotate(3deg)
        translateY(-8px);

}


.editorial-number {

    position: absolute;

    top: 20px;

    right: 20px;

    font-family:
        Georgia,
        serif;

    font-size: 13px;

}


.editorial-page small {

    display: block;

    margin-top: 15px;

    font-size: 5px;

    letter-spacing: 0.15em;

}


.editorial-page strong {

    display: block;

    margin-top: 50px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            28px,
            4vw,
            50px
        );

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.06em;

}


.editorial-rule {

    width: 45px;

    height: 1px;

    margin-top: 30px;

    background: #171513;

}


.editorial-page p {

    max-width: 130px;

    margin-top: 25px;

    font-size: 6px;

    line-height: 1.7;

}



/* =========================================================
   PROJECT 04 — CAMPAIGN
========================================================== */

.project-visual-four {

    min-height: 570px;

    background:
        #101014;

}


.campaign-word {

    position: absolute;

    top: 12%;

    left: 7%;

    color:
        rgba(
            255,
            255,
            255,
            0.9
        );

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

    font-weight: 900;

    line-height: 0.75;

    letter-spacing: -0.1em;

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.campaign-word-two {

    top: 38%;

    left: 22%;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            0.5
        );

}


.campaign-word-three {

    top: 64%;

    left: 42%;

    color:
        var(--pink);

}


.project-wide:hover
.campaign-word {

    transform:
        translateX(15px);

}


.project-wide:hover
.campaign-word-two {

    transform:
        translateX(-15px);

}


.project-wide:hover
.campaign-word-three {

    transform:
        translateX(20px);

}


.campaign-orbit {

    position: absolute;

    right: 10%;

    top: 15%;

    width: 180px;

    height: 180px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

    animation:
        part10CampaignRotate
        15s
        linear
        infinite;

}


.campaign-orbit::before {

    content: "";

    position: absolute;

    inset: 25px;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

}


.campaign-orbit span {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:
        var(--pink);

}


.campaign-orbit span:nth-child(1) {

    top: -4px;

    left: 50%;

}


.campaign-orbit span:nth-child(2) {

    right: -4px;

    top: 50%;

}


.campaign-orbit span:nth-child(3) {

    bottom: -4px;

    left: 50%;

}


@keyframes part10CampaignRotate {

    to {
        transform: rotate(360deg);
    }

}


.campaign-label {

    position: absolute;

    right: 30px;

    bottom: 30px;

    color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    font-size: 6px;

    letter-spacing: 0.18em;

}



/* =========================================================
   PROJECT 05 — PACKAGING
========================================================== */

.project-visual-five {

    display: grid;

    place-items: center;

    min-height: 390px;

    background:
        #c7bdb0;

}


.label-card {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    width: 48%;

    min-height: 65%;

    padding: 25px;

    background:
        #ece5d8;

    color:
        #24201d;

    box-shadow:
        18px 25px 45px
        rgba(
            0,
            0,
            0,
            0.2
        );

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.project-small:hover
.label-card {

    transform:
        translateY(-10px)
        rotate(2deg);

}


.label-card span {

    font-size: 6px;

    letter-spacing: 0.15em;

}


.label-card strong {

    margin:
        auto 0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            55px,
            8vw,
            100px
        );

    font-weight: 400;

    line-height: 0.7;

    letter-spacing: -0.08em;

}


.label-card small {

    font-size: 5px;

    line-height: 1.5;

    letter-spacing: 0.12em;

}


.label-shadow {

    position: absolute;

    width: 48%;

    height: 65%;

    background:
        #95877a;

    transform:
        translate(
            22px,
            22px
        );

}



/* =========================================================
   PROJECT 06 — MOBILE
========================================================== */

.project-visual-six {

    display: grid;

    place-items: center;

    min-height: 390px;

    background:
        #19181c;

}


.phone-frame {

    position: relative;

    width: 150px;

    height: 290px;

    padding: 8px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.4
        );

    border-radius: 24px;

    background:
        #050506;

    box-shadow:
        20px 25px 50px
        rgba(
            0,
            0,
            0,
            0.45
        );

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.project-small:hover
.phone-frame {

    transform:
        translateY(-12px)
        rotate(3deg);

}


.phone-camera {

    position: absolute;

    top: 13px;

    left: 50%;

    z-index: 5;

    width: 38px;

    height: 7px;

    border-radius: 10px;

    background:
        #050506;

    transform:
        translateX(-50%);

}


.phone-screen {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    height: 100%;

    padding: 25px 15px 15px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(
            150deg,
            #29242c,
            #0e0d11
        );

}


.phone-screen small {

    font-size: 6px;

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );

}


.phone-screen strong {

    margin-top: 65px;

    color: #fff;

    font-size: 22px;

    line-height: 0.8;

    letter-spacing: -0.07em;

}


.phone-circle {

    display: grid;

    place-items: center;

    width: 60px;

    height: 60px;

    margin-top: auto;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 50%;

    color:
        var(--pink);

}


.phone-screen > span {

    margin-top: 15px;

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );

    font-size: 6px;

}



/* =========================================================
   WORK BOTTOM
========================================================== */

.work-bottom {

    display: grid;

    grid-template-columns:
        1fr
        auto
        auto;

    gap: 40px;

    align-items: center;

    margin-top: 60px;

}


.work-bottom-line {

    height: 1px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.work-bottom p {

    max-width: 250px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.28
        );

    font-size: 7px;

    line-height: 1.7;

}


.archive-btn {

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        12px 17px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 100px;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-family: inherit;

    font-size: 7px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background
        0.3s
        ease,
        color
        0.3s
        ease,
        border-color
        0.3s
        ease;

}


.archive-btn i {

    font-size: 12px;

    font-style: normal;

}


.archive-btn:hover {

    color: #09090b;

    background:
        var(--pink);

    border-color:
        var(--pink);

}



/* =========================================================
   PROJECT MODAL
========================================================== */

.project-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity
        0.4s
        ease,
        visibility
        0.4s
        ease;

}


.project-modal.open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


.project-modal-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.82
        );

    backdrop-filter:
        blur(14px);

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

}


.project-modal-window {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    width:
        min(
            920px,
            100%
        );

    max-height:
        90vh;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    background:
        #09090b;

    transform:
        translateY(30px)
        scale(0.97);

    transition:
        transform
        0.5s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


.project-modal.open
.project-modal-window {

    transform:
        translateY(0)
        scale(1);

}


.project-modal-close {

    position: absolute;

    top: 18px;

    right: 18px;

    z-index: 10;

    display: grid;

    place-items: center;

    width: 38px;

    height: 38px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            0.3
        );

    color: #fff;

    font-family: inherit;

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    transition:
        background
        0.3s
        ease,
        color
        0.3s
        ease,
        transform
        0.3s
        ease;

}


.project-modal-close:hover {

    color: #09090b;

    background:
        var(--pink);

    transform:
        rotate(90deg);

}



/* =========================================================
   MODAL VISUAL
========================================================== */

.project-modal-visual {

    position: relative;

    min-height: 540px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #d99ab1,
            #7f3f59
        );

}


.modal-visual-symbol {

    position: absolute;

    top: 50%;

    left: 50%;

    color:
        rgba(
            20,
            12,
            17,
            0.9
        );

    font-size:
        clamp(
            130px,
            16vw,
            230px
        );

    font-family:
        Georgia,
        serif;

    font-style: italic;

    transform:
        translate(
            -50%,
            -50%
        );

}



/* =========================================================
   MODAL CONTENT
========================================================== */

.project-modal-content {

    display: flex;

    flex-direction: column;

    padding:
        70px 50px 45px;

}


.project-modal-category {

    margin-bottom: 20px;

    color:
        var(--pink);

    font-size: 7px;

    letter-spacing: 0.2em;

}


.project-modal-content h3 {

    margin: 0 0 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-size:
        clamp(
            45px,
            5vw,
            75px
        );

    font-weight: 500;

    line-height: 0.84;

    letter-spacing: -0.07em;

}


.project-modal-content p {

    max-width: 390px;

    margin: 0 0 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.38
        );

    font-size: 9px;

    line-height: 1.9;

}


.project-modal-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

}


.project-modal-tags span {

    padding:
        7px 10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-radius: 100px;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    font-size: 6px;

}



/* =========================================================
   MODAL META
========================================================== */

.modal-project-meta {

    display: grid;

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

    gap: 12px;

    margin-top: auto;

    padding-top: 35px;

}


.modal-project-meta div {

    padding-top: 14px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

}


.modal-project-meta small {

    display: block;

    margin-bottom: 7px;

    color:
        rgba(
            255,
            255,
            255,
            0.2
        );

    font-size: 5px;

    letter-spacing: 0.15em;

}


.modal-project-meta strong {

    display: block;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 7px;

    font-weight: 400;

    line-height: 1.4;

}



/* =========================================================
   MODAL CONTACT
========================================================== */

.modal-contact-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 30px;

    padding:
        15px 0;

    border: 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-family: inherit;

    font-size: 7px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    cursor: pointer;

}


.modal-contact-btn i {

    display: grid;

    place-items: center;

    width: 32px;

    height: 32px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

    font-size: 11px;

    font-style: normal;

    transition:
        0.35s
        ease;

}


.modal-contact-btn:hover i {

    color: #09090b;

    background:
        var(--pink);

    border-color:
        var(--pink);

    transform:
        rotate(45deg);

}



/* =========================================================
   RESPONSIVE — 1000PX
========================================================== */

@media (max-width: 1000px) {

    .work-intro {

        grid-template-columns:
            1fr;

        gap: 35px;

    }


    .work-intro-side {

        max-width: 320px;

    }


    .project-featured {

        grid-template-columns:
            1fr;

    }


    .project-featured
    .project-visual-one {

        min-height: 550px;

    }


    .project-featured
    .project-info {

        min-height: 480px;

    }


    .project-wide {

        grid-column:
            span 2;

    }

}



/* =========================================================
   RESPONSIVE — 750PX
========================================================== */

@media (max-width: 750px) {

    .work-section {

        padding:
            130px 0 110px;

    }


    .work-heading {

        font-size:
            clamp(
                58px,
                15vw,
                90px
            );

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .project-wide {

        grid-column:
            span 1;

        display: block;

    }


    .project-wide
    .project-visual-four {

        min-height: 480px;

    }


    .project-small {

        min-height: 600px;

    }


    .project-modal-window {

        grid-template-columns:
            1fr;

        max-height:
            92vh;

        overflow-y: auto;

    }


    .project-modal-visual {

        min-height: 330px;

    }


    .project-modal-content {

        min-height: 400px;

    }

}



/* =========================================================
   RESPONSIVE — 600PX
========================================================== */

@media (max-width: 600px) {

    .work-section {

        padding:
            105px 0 90px;

    }


    .work-intro {

        margin:
            35px 0 55px;

    }


    .work-heading {

        font-size:
            58px;

    }


    .work-filter-bar {

        margin-bottom:
            25px;

    }


    .work-filter-btn {

        padding:
            10px 14px;

        font-size:
            6px;

    }


    .project-featured
    .project-visual-one {

        min-height:
            430px;

    }


    .project-display-type {

        font-size:
            100px;

    }


    .project-display-small {

        top:
            25px;

        left:
            25px;

        font-size:
            5px;

    }


    .project-display-circle {

        right:
            25px;

        bottom:
            25px;

        width:
            55px;

        height:
            55px;

    }


    .project-corner-label {

        left:
            25px;

        bottom:
            25px;

    }


    .project-info {

        min-height:
            430px;

        padding:
            32px;

    }


    .project-info h3 {

        font-size:
            48px;

    }


    .project-small {

        min-height:
            550px;

    }


    .project-visual-two,
    .project-visual-three,
    .project-visual-five,
    .project-visual-six {

        min-height:
            340px;

    }


    .project-wide
    .project-visual-four {

        min-height:
            400px;

    }


    .campaign-word {

        font-size:
            75px;

    }


    .campaign-word-two {

        left:
            17%;

    }


    .campaign-word-three {

        left:
            35%;

    }


    .campaign-orbit {

        width:
            110px;

        height:
            110px;

        right:
            5%;

    }


    .work-bottom {

        grid-template-columns:
            1fr;

        gap:
            22px;

        margin-top:
            45px;

    }


    .work-bottom-line {

        width:
            100%;

    }


    .work-bottom p {

        max-width:
            280px;

    }


    .archive-btn {

        justify-self:
            start;

    }


    .project-modal {

        padding:
            12px;

    }


    .project-modal-window {

        max-height:
            95vh;

    }


    .project-modal-visual {

        min-height:
            250px;

    }


    .modal-visual-symbol {

        font-size:
            130px;

    }


    .project-modal-content {

        padding:
            55px 28px 30px;

    }


    .project-modal-content h3 {

        font-size:
            50px;

    }


    .modal-project-meta {

        gap:
            8px;

    }

}



/* =========================================================
   RESPONSIVE — 380PX
========================================================== */

@media (max-width: 380px) {

    .work-heading {

        font-size:
            52px;

    }


    .project-info {

        padding:
            26px;

    }


    .project-info h3 {

        font-size:
            42px;

    }


    .project-display-type {

        font-size:
            80px;

    }


    .modal-project-meta {

        grid-template-columns:
            1fr;

    }

}



/* =========================================================
   REDUCED MOTION
========================================================== */

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

    .campaign-orbit {

        animation:
            none !important;

    }


    .project-card,
    .project-shape,
    .project-display-type,
    .digital-window,
    .editorial-page,
    .label-card,
    .phone-frame {

        transition:
            none !important;

    }

}




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

.mk-footer {

    position: relative;

    width: 100%;

    min-height: 700px;

    overflow: hidden;

    padding: 150px 0 25px;

    background: #080808;

    color: #fff;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

    isolation: isolate;
}


/* =========================================================
   ATMOSPHERE
========================================================= */

.mk-footer-noise {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

    z-index: -2;
}


.mk-footer-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    z-index: -1;
}


.mk-footer-orb-1 {

    width: 450px;
    height: 450px;

    top: -230px;
    left: -180px;

    background:
        rgba(255,255,255,0.045);
}


.mk-footer-orb-2 {

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: 50px;

    background:
        rgba(255,255,255,0.035);
}


/* =========================================================
   CONTAINER
========================================================= */

.mk-footer-container {

    width:
        min(
            1400px,
            calc(100% - 70px)
        );

    margin: 0 auto;
}


/* =========================================================
   CTA
========================================================= */

.mk-footer-cta {

    max-width: 1100px;

    padding-bottom: 100px;
}


.mk-footer-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 35px;

    color:
        rgba(255,255,255,0.42);

    font-size: 9px;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.mk-footer-status-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 14px
        rgba(255,255,255,0.7);

    animation:
        mkFooterPulse
        2s ease-in-out infinite;
}


.mk-footer-heading {

    margin: 0;

    max-width: 1000px;

    font-size:
        clamp(
            58px,
            9vw,
            145px
        );

    line-height: 0.88;

    letter-spacing: -0.075em;

    font-weight: 500;
}


.mk-footer-heading span {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    font-weight: 400;

    color:
        rgba(255,255,255,0.48);
}


.mk-footer-intro {

    max-width: 380px;

    margin:
        45px 0 0;

    color:
        rgba(255,255,255,0.38);

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   EMAIL
========================================================= */

.mk-footer-mail {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 35px;

    padding-bottom: 10px;

    color:
        rgba(255,255,255,0.85);

    text-decoration: none;

    font-size:
        clamp(14px,2vw,21px);

    border-bottom:
        1px solid
        rgba(255,255,255,0.3);

    transition:
        color .3s ease;
}


.mk-footer-mail::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    background: #fff;

    transform:
        scaleX(0);

    transform-origin: right;

    transition:
        transform .5s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-mail:hover {

    color: #fff;
}


.mk-footer-mail:hover::after {

    transform:
        scaleX(1);

    transform-origin: left;
}


.mk-footer-mail-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;
    height: 30px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 50%;

    font-size: 10px;

    transition:
        transform .4s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-mail:hover
.mk-footer-mail-icon {

    transform:
        translate(3px,-3px)
        rotate(8deg);
}


/* =========================================================
   DIVIDER
========================================================= */

.mk-footer-line {

    width: 100%;

    height: 1px;

    background:
        rgba(255,255,255,0.09);
}


/* =========================================================
   MAIN GRID
========================================================= */

.mk-footer-main-grid {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1.2fr;

    gap: 80px;

    padding: 70px 0;
}


/* =========================================================
   BRAND
========================================================= */

.mk-footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #fff;

    text-decoration: none;

    font-size: 21px;

    font-weight: 600;

    letter-spacing: -0.04em;
}


.mk-footer-logo span {

    font-size: 12px;

    transform:
        translateY(-3px);
}


.mk-footer-description {

    max-width: 340px;

    margin: 25px 0;

    color:
        rgba(255,255,255,0.38);

    font-size: 12px;

    line-height: 1.85;
}


.mk-footer-location {

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,0.35);

    font-size: 9px;

    letter-spacing: .05em;
}


.mk-footer-location i {

    font-size: 10px;

    color:
        rgba(255,255,255,0.65);
}


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

.mk-footer-label {

    display: block;

    margin-bottom: 20px;

    color:
        rgba(255,255,255,0.25);

    font-size: 8px;

    letter-spacing: .18em;

    text-transform: uppercase;
}


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

.mk-footer-links {

    display: flex;

    flex-direction: column;

    gap: 13px;
}


.mk-footer-links a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 170px;

    color:
        rgba(255,255,255,0.55);

    text-decoration: none;

    font-size: 12px;

    transition:
        color .3s ease,
        transform .35s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-links a i {

    font-size: 8px;

    opacity: 0;

    transform:
        translate(-5px,5px);

    transition:
        opacity .3s ease,
        transform .35s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-links a:hover {

    color: #fff;

    transform:
        translateX(4px);
}


.mk-footer-links a:hover i {

    opacity: .7;

    transform:
        translate(0,0);
}


/* =========================================================
   SOCIAL
========================================================= */

.mk-footer-socials {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.mk-footer-social {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 43px;

    padding: 6px 9px;

    border:
        1px solid
        transparent;

    border-radius: 12px;

    color:
        rgba(255,255,255,0.5);

    text-decoration: none;

    overflow: hidden;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .4s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-social::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -120%;

    width: 70%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.07),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-social:hover::before {

    left: 150%;
}


.mk-footer-social:hover {

    color: #fff;

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

    border-color:
        rgba(255,255,255,.1);

    transform:
        translateX(5px);
}


.mk-social-left {

    display: flex;

    align-items: center;

    gap: 11px;

    position: relative;

    z-index: 1;
}


.mk-social-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;
    height: 30px;

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

    border-radius: 9px;

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

    font-size: 12px;

    transition:
        transform .4s
        cubic-bezier(.16,1,.3,1),
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.mk-footer-social:hover
.mk-social-icon {

    transform:
        scale(1.1)
        rotate(-5deg);

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

    border-color:
        rgba(255,255,255,.18);

    box-shadow:
        0 0 20px
        rgba(255,255,255,.07);
}


.mk-social-name {

    font-size: 11px;

    transition:
        transform .3s ease;
}


.mk-footer-social:hover
.mk-social-name {

    transform:
        translateX(2px);
}


.mk-social-right {

    position: relative;

    display: flex;

    align-items: center;

    gap: 9px;

    z-index: 1;
}


.mk-social-right > i {

    font-size: 8px;

    opacity: .25;

    transition:
        opacity .3s ease,
        transform .4s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-social:hover
.mk-social-right > i {

    opacity: .8;

    transform:
        translate(2px,-2px);
}


/* =========================================================
   AVAILABLE SOON
========================================================= */

.mk-social-soon {

    padding:
        4px 6px;

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

    border-radius: 5px;

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

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

    font-size: 5.5px;

    letter-spacing: .12em;

    opacity: 0;

    transform:
        translateX(8px);

    transition:
        opacity .3s ease,
        transform .4s
        cubic-bezier(.16,1,.3,1);
}


.mk-footer-social:hover
.mk-social-soon {

    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   BOTTOM
========================================================= */

.mk-footer-bottom {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        auto;

    align-items: center;

    gap: 20px;

    padding:
        22px 0 5px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

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

    font-size: 7px;

    letter-spacing: .14em;
}


.mk-footer-made {

    text-align: center;
}


.mk-footer-made span {

    margin: 0 3px;

    color:
        rgba(255,255,255,.7);
}


.mk-back-top {

    display: flex;

    align-items: center;

    gap: 8px;

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

    text-decoration: none;

    transition:
        color .3s ease;
}


.mk-back-top:hover {

    color: #fff;
}


.mk-back-top i {

    transition:
        transform .35s ease;
}


.mk-back-top:hover i {

    transform:
        translateY(-3px);
}


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

@media (max-width: 900px) {

    .mk-footer-main-grid {

        grid-template-columns:
            1fr 1fr;

        gap: 55px 40px;
    }

    .mk-footer-brand {

        grid-column:
            1 / -1;
    }

}


@media (max-width: 600px) {

    .mk-footer {

        padding:
            100px 0 100px;
    }


    .mk-footer-container {

        width:
            calc(100% - 36px);
    }


    .mk-footer-cta {

        padding-bottom:
            70px;
    }


    .mk-footer-heading {

        font-size:
            clamp(
                48px,
                14vw,
                75px
            );
    }


    .mk-footer-intro {

        font-size:
            11px;
    }


    .mk-footer-main-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            45px 25px;

        padding:
            50px 0;
    }


    .mk-footer-brand {

        grid-column:
            1 / -1;
    }


    .mk-footer-bottom {

        grid-template-columns:
            1fr auto;

        gap: 12px;
    }


    .mk-footer-made {

        display: none;
    }

}


@media (max-width: 380px) {

    .mk-footer-main-grid {

        grid-template-columns:
            1fr;
    }


    .mk-footer-brand {

        grid-column:
            auto;
    }


    .mk-footer-bottom {

        grid-template-columns:
            1fr;
    }

}


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

@keyframes mkFooterPulse {

    0%,
    100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

}





/* =========================================================
   MOBILE FLOATING BOTTOM MENU
========================================================= */

.mk-mobile-menu {

    display: none;
}


/* =========================================================
   MOBILE ONLY
========================================================= */

@media (max-width: 768px) {

    .mk-mobile-menu {

        position: fixed;

        left: 10px;
        right: 10px;

        bottom: 10px;

        z-index: 999999;

        height: 67px;

        display: grid;

        grid-template-columns:
            repeat(5,1fr);

        align-items: center;

        padding:
            5px 7px;

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

        border-radius: 23px;

        background:
            rgba(12,12,12,.84);

        backdrop-filter:
            blur(22px)
            saturate(140%);

        -webkit-backdrop-filter:
            blur(22px)
            saturate(140%);

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.55),

            inset 0 1px 0
            rgba(255,255,255,.07);

        isolation: isolate;
    }


    /* =====================================================
       LIGHT
    ====================================================== */

    .mk-mobile-menu-light {

        position: absolute;

        width: 130px;
        height: 130px;

        left: 50%;
        top: 50%;

        transform:
            translate(-50%,-50%);

        border-radius: 50%;

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

        filter:
            blur(5px);

        pointer-events: none;

        z-index: -1;
    }


    /* =====================================================
       ITEM
    ====================================================== */

    .mk-mobile-item {

        position: relative;

        height: 55px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 4px;

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

        text-decoration: none;

        border-radius: 17px;

        transition:
            color .3s ease,
            transform .35s
            cubic-bezier(.16,1,.3,1);
    }


    .mk-mobile-item:active {

        transform:
            scale(.88);
    }


    /* =====================================================
       ICON
    ====================================================== */

    .mk-mobile-icon {

        position: relative;

        width: 27px;
        height: 27px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        font-size: 12px;

        transition:
            transform .4s
            cubic-bezier(.16,1,.3,1),
            color .3s ease,
            background .3s ease,
            box-shadow .3s ease;
    }


    /* =====================================================
       TEXT
    ====================================================== */

    .mk-mobile-text {

        font-size: 7px;

        line-height: 1;

        letter-spacing:
            .08em;

        text-transform:
            uppercase;

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


    /* =====================================================
       ACTIVE
    ====================================================== */

    .mk-mobile-item.active {

        color: #fff;
    }


    .mk-mobile-item.active
    .mk-mobile-icon {

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

        box-shadow:
            0 0 0 1px
            rgba(255,255,255,.08),

            0 0 20px
            rgba(255,255,255,.08);

        transform:
            translateY(-2px);
    }


    .mk-mobile-item.active
    .mk-mobile-text {

        color: #fff;

        transform:
            translateY(-1px);
    }


    .mk-mobile-item.active::after {

        content: "";

        position: absolute;

        bottom: 1px;

        width: 3px;
        height: 3px;

        border-radius: 50%;

        background: #fff;

        box-shadow:
            0 0 8px
            rgba(255,255,255,.7);
    }


    /* =====================================================
       ACTIVE RIPPLE
    ====================================================== */

    .mk-mobile-item.active
    .mk-mobile-icon::after {

        content: "";

        position: absolute;

        inset: -5px;

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

        border-radius: 50%;

        animation:
            mkMobilePulse
            2.3s
            ease-out
            infinite;
    }


    /* =====================================================
       WORK CENTER BUTTON
    ====================================================== */

    .mk-mobile-work
    .mk-mobile-icon {

        width: 37px;
        height: 37px;

        margin-top: -15px;

        background:
            #171717;

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

        box-shadow:
            0 9px 28px
            rgba(0,0,0,.5),

            inset 0 1px 0
            rgba(255,255,255,.08);

        font-size: 14px;

        color: #fff;
    }


    .mk-mobile-work::before {

        content: "";

        position: absolute;

        top: -7px;

        width: 49px;
        height: 49px;

        border-radius: 50%;

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

        pointer-events: none;
    }


    .mk-mobile-work:hover
    .mk-mobile-icon {

        transform:
            translateY(-3px)
            rotate(8deg);
    }


    /* =====================================================
       SAFE AREA
    ====================================================== */

    @supports (
        padding-bottom:
        env(safe-area-inset-bottom)
    ) {

        .mk-mobile-menu {

            bottom:
                calc(
                    8px +
                    env(safe-area-inset-bottom)
                );
        }

    }


    /* =====================================================
       SMALL PHONES
    ====================================================== */

    @media (max-width:380px) {

        .mk-mobile-menu {

            left: 7px;
            right: 7px;

            height: 63px;

            border-radius: 20px;
        }


        .mk-mobile-item {

            height: 51px;
        }


        .mk-mobile-text {

            font-size: 6px;
        }


        .mk-mobile-icon {

            width: 25px;
            height: 25px;

            font-size: 11px;
        }


        .mk-mobile-work
        .mk-mobile-icon {

            width: 34px;
            height: 34px;
        }

    }

}


@keyframes mkMobilePulse {

    0% {

        opacity: .8;

        transform:
            scale(.8);
    }

    70% {

        opacity: 0;

        transform:
            scale(1.25);
    }

    100% {

        opacity: 0;

        transform:
            scale(1.25);
    }

}





/* ====================================================
    Custom CSS
=================================================== */

/* =========================================================
   PRINT PROTECTION
========================================================= */


/*
    Everything below is only applied
    when the browser enters print mode.
*/

@media print {

    /* -----------------------------------------------------
       HIDE ORIGINAL PORTFOLIO
    ----------------------------------------------------- */

    body > * {
        display: none !important;
    }


    /* -----------------------------------------------------
       RESET PRINT PAGE
    ----------------------------------------------------- */

    html,
    body {
        width: 100% !important;
        min-height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }


    body {
        position: relative !important;

        color: #000000 !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif !important;
    }


    /* -----------------------------------------------------
       MAIN PROTECTION MESSAGE
    ----------------------------------------------------- */

    body::before {

        content:
            "✦ This creative work is protected and intended for digital viewing only. 🖤";


        display: flex !important;

        align-items: center;
        justify-content: center;

        position: fixed;

        inset: 0;

        width: 100%;
        height: 100%;

        box-sizing: border-box;

        padding: 20vh 10vw;

        background: #ffffff !important;

        color: #000000 !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif !important;

        font-size: 28px;

        font-weight: 700;

        line-height: 1.3;

        letter-spacing: 0.08em;

        text-align: center;

        z-index: 999999 !important;
    }


    /* -----------------------------------------------------
       SECONDARY MESSAGE
    ----------------------------------------------------- */

    body::after {

        content:
            "This portfolio is a protected digital work. "
            "Printing or reproducing the original portfolio "
            "content is not permitted.";


        display: block !important;

        position: fixed;

        left: 12%;
        right: 12%;

        top: 57%;

        box-sizing: border-box;

        color: #999399 !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif !important;

        font-size: 14px;

        font-weight: 400;

        line-height: 1.7;

        letter-spacing: 0.03em;

        text-align: center;

        z-index: 1000000 !important;
    }

}