/* =========================================================
   BLUEORBIT LABS
   Global Styles
========================================================= */


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background: #050608;
    color: #f5f7fa;

    font-family:
        "DM Sans",
        sans-serif;

    overflow-x: hidden;

    cursor: none;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


/* =========================
   VARIABLES
========================= */

:root {

    --background: #050608;
    --surface: #0b0e12;
    --surface-light: #11151b;

    --text: #f5f7fa;
    --text-muted: #8c929c;

    --blue: #3984ff;
    --blue-light: #65a3ff;

    --border: rgba(255, 255, 255, 0.09);

    --container: 1400px;

    --nav-height: 90px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================
   CUSTOM SCROLLBAR
========================= */

::-webkit-scrollbar {
    width: 7px;
}


::-webkit-scrollbar-track {
    background: #050608;
}


::-webkit-scrollbar-thumb {
    background: #242a33;
    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: var(--blue);
}


/* Firefox */

html {
    scrollbar-width: thin;
    scrollbar-color: #242a33 #050608;
}


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

.cursor {
    position: fixed;

    width: 8px;
    height: 8px;

    background: white;

    border-radius: 50%;

    pointer-events: none;

    z-index: 9999;

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

    transition:
        width 0.25s var(--ease),
        height 0.25s var(--ease),
        background 0.25s ease;
}


.cursor-follower {
    position: fixed;

    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    pointer-events: none;

    z-index: 9998;

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

    transition:
        width 0.35s var(--ease),
        height 0.35s var(--ease),
        border-color 0.35s ease;
}


body.cursor-hover .cursor {
    width: 5px;
    height: 5px;
    background: var(--blue-light);
}


body.cursor-hover .cursor-follower {
    width: 55px;
    height: 55px;

    border-color: var(--blue);
}


/* =========================
   NAVBAR
========================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--nav-height);

    z-index: 1000;

    background: rgba(5, 6, 8, 0.72);

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

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


.nav-container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================
   LOGO
========================= */

.logo {

    font-family: "Space Grotesk", sans-serif;

    display: flex;
    align-items: center;
    gap: 11px;

    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.03em;
}


.logo-text span {
    color: var(--text-muted);
    font-weight: 400;
}


/* Logo symbol */

.logo-mark {

    width: 28px;
    height: 28px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;
}


.logo-mark::before {

    content: "";

    position: absolute;

    width: 21px;
    height: 21px;

    border: 1.5px solid var(--blue);

    border-radius: 50%;

    transform: rotate(-25deg);
}


.logo-mark::after {

    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    background: var(--blue);

    border-radius: 50%;

    box-shadow: 0 0 18px rgba(57, 132, 255, 0.8);
}


.logo-mark span {

    position: absolute;

    width: 30px;
    height: 9px;

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

    transform: rotate(-30deg);

}


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

.nav-links {

    display: flex;

    align-items: center;

    gap: 38px;

    margin-left: auto;
    margin-right: 45px;
}


.nav-link {

    position: relative;

    font-size: 13px;

    color: var(--text-muted);

    transition: color 0.3s ease;
}


.nav-link:hover,
.nav-link.active {

    color: var(--text);
}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: var(--blue);

    transition: width 0.35s var(--ease);
}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;
}


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

.nav-cta {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 17px;

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

    border-radius: 100px;

    font-size: 12px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s var(--ease);
}


.nav-cta span {
    color: var(--blue-light);
    font-size: 15px;
}


.nav-cta:hover {

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

    border-color: rgba(57,132,255,0.4);

    transform: translateY(-2px);
}


/* =========================
   MOBILE MENU BUTTON
========================= */

.menu-toggle {

    display: none;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: transparent;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: none;
}


.menu-toggle span {

    display: block;

    width: 16px;
    height: 1px;

    background: white;

    transition:
        transform 0.4s var(--ease),
        opacity 0.3s ease;
}


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

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 999;

    background: #050608;

    transform: translateY(-100%);

    transition: transform 0.7s var(--ease);

    visibility: hidden;
}


.mobile-menu.active {

    transform: translateY(0);

    visibility: visible;
}


.mobile-menu-inner {

    height: 100%;

    padding:
        calc(var(--nav-height) + 40px)
        30px
        35px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.mobile-menu nav {

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.mobile-link {

    font-size: clamp(40px, 12vw, 70px);

    letter-spacing: -0.05em;

    font-weight: 500;

    color: #737983;

    transition: color 0.3s ease;
}


.mobile-link:hover {

    color: white;
}


.mobile-menu-footer {

    display: flex;

    justify-content: space-between;

    color: var(--text-muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.12em;
}


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



.hero {

    min-height: 100svh;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;
}


.hero-container {

    position: relative;

    z-index: 5;

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: auto;

    padding-top: var(--nav-height);
}

/* =========================================
   CREATIVE HERO BACKGROUND
========================================= */

.creative-background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    opacity: 0.55;
}


/* =========================
   DESIGN GRID
========================= */

.design-grid {
    position: absolute;

    width: 900px;
    height: 700px;

    right: -180px;
    top: 50%;

    transform:
        translateY(-50%)
        perspective(800px)
        rotateY(-18deg)
        rotateX(8deg);

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

    background-size: 60px 60px;

    mask-image:
        radial-gradient(
            ellipse,
            black 0%,
            transparent 70%
        );
}


/* =========================
   VECTOR LINES
========================= */

.vector-line {
    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;
}


.vector-line-one {

    right: 2%;
    top: 18%;

    transform:
        rotate(35deg)
        scaleX(1.8)
        scaleY(0.35);

}


.vector-line-two {

    right: 10%;
    top: 35%;

    transform:
        rotate(-20deg)
        scaleX(1.4)
        scaleY(0.25);

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

}


/* =========================
   DESIGN NODES
========================= */

.design-node {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow:
        0 0 12px rgba(57,132,255,0.7);

    opacity: 0.65;

    animation:
        nodeFloat 7s ease-in-out infinite;
}


.node-one {
    right: 26%;
    top: 24%;
}


.node-two {
    right: 15%;
    top: 48%;

    animation-delay: -2s;
}


.node-three {
    right: 38%;
    top: 63%;

    animation-delay: -4s;
}


.node-four {
    right: 8%;
    top: 70%;

    animation-delay: -1s;
}


@keyframes nodeFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

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

}


/* =========================
   FLOATING DESIGN SHAPES
========================= */

.floating-shape {

    position: absolute;

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

    opacity: 0.5;
}


.shape-one {

    width: 90px;
    height: 90px;

    right: 31%;
    top: 30%;

    transform:
        rotate(45deg);

    animation:
        slowRotate 18s linear infinite;

}


.shape-two {

    width: 45px;
    height: 45px;

    right: 13%;
    top: 24%;

    border-radius: 50%;

    animation:
        slowFloat 10s ease-in-out infinite;

}


@keyframes slowRotate {

    from {
        transform: rotate(45deg);
    }

    to {
        transform: rotate(405deg);
    }

}


@keyframes slowFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

}

/* =========================
   HERO GRID
========================= */

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: 0.3;

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

    background-size: 80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 70%,
            transparent
        );
}


/* =========================
   HERO GLOWS
========================= */

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}


.hero-glow-one {

    width: 500px;
    height: 500px;

    background: rgba(30, 100, 255, 0.09);

    top: 15%;
    right: 8%;
}


.hero-glow-two {

    width: 300px;
    height: 300px;

    background: rgba(30, 70, 180, 0.06);

    bottom: 0;
    left: 10%;
}


/* =========================
   HERO LABEL
========================= */

.hero-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

    color: var(--text-muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.14em;
}


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--blue);

    box-shadow:
        0 0 0 5px rgba(57,132,255,0.1),
        0 0 18px rgba(57,132,255,0.7);
}


/* =========================
   HERO TITLE
========================= */

.hero-title {

    max-width: 1100px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: clamp(
        55px,
        7.5vw,
        118px
    );

    line-height: 0.94;

    letter-spacing: -0.065em;

    font-weight: 500;
}


.outline-text {

    color: transparent;

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

}


.blue-text {

    color: var(--blue);

    text-shadow:
        0 0 45px rgba(57,132,255,0.18);
}


/* =========================
   HERO BOTTOM
========================= */

.hero-bottom {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-top: 55px;
}


.hero-description {

    max-width: 390px;

    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================
   HERO ACTIONS
========================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 25px;
}


.primary-button {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 15px 19px;

    background: white;

    color: #050608;

    border-radius: 100px;

    font-size: 12px;

    font-weight: 600;

    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s ease;
}


.primary-button:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(255,255,255,0.12);
}


.button-arrow {

    font-size: 17px;
}


.secondary-button {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--text-muted);

    font-size: 12px;

    transition: color 0.3s ease;
}


.secondary-button:hover {

    color: white;
}


.secondary-button span {

    color: var(--blue);
}


/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator {

    position: absolute;

    left: 0;

    bottom: -110px;

    display: flex;

    align-items: center;

    gap: 13px;

    color: #5d636d;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.13em;
}


.scroll-line {

    width: 35px;

    height: 1px;

    background: #4d535d;
}


/* =========================
   ORBIT DECORATION
========================= */

.orbit-decoration {

    position: absolute;

    width: 650px;
    height: 650px;

    right: -160px;
    top: 50%;

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

    opacity: 0.5;

    pointer-events: none;
}


.orbit-ring {

    position: absolute;

    inset: 0;

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

    border-radius: 50%;
}


.orbit-ring-one {

    transform:
        rotate(60deg)
        scaleY(0.35);
}


.orbit-ring-two {

    transform:
        rotate(-60deg)
        scaleY(0.35);
}


.orbit-core {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 80px;
    height: 80px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,132,255,0.45),
            rgba(57,132,255,0.04) 60%,
            transparent 70%
        );

    filter: blur(2px);
}


/* =========================
   PLACEHOLDER SECTIONS
========================= */

.placeholder-section {

    min-height: 80vh;

    padding: 150px 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 20px;

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

    background: #07090c;
}


.placeholder-section span {

    color: var(--blue);

    font-size: 12px;

    letter-spacing: 0.15em;
}


.placeholder-section h2 {

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

    letter-spacing: -0.06em;

    font-weight: 500;

    color: rgba(255,255,255,0.15);
}


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

.reveal {

    opacity: 0;

    transform: translateY(30px);

    animation: revealUp 1s var(--ease) forwards;
}


.hero-label {
    animation-delay: 0.2s;
}


.hero-title {
    animation-delay: 0.35s;
}


.hero-description {
    animation-delay: 0.55s;
}


.hero-actions {
    animation-delay: 0.65s;
}


@keyframes revealUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


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

@media (max-width: 1000px) {

    .nav-links {
        gap: 25px;
        margin-right: 25px;
    }


    .orbit-decoration {

        width: 500px;
        height: 500px;

        right: -180px;

        opacity: 0.35;

    }


    .hero-bottom {

        align-items: flex-start;

        flex-direction: column;

    }


    .scroll-indicator {

        display: none;

    }

}


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

@media (max-width: 768px) {

    body {
        cursor: auto;
    }


    .cursor,
    .cursor-follower {
        display: none;
    }


    .navbar {
        height: 75px;
    }


    :root {
        --nav-height: 75px;
    }


    .nav-container {

        width: calc(100% - 40px);

    }


    .nav-links,
    .nav-cta {

        display: none;

    }


    .menu-toggle {

        display: flex;

    }


    .hero-container {

        width: calc(100% - 40px);

        padding-top: 80px;

    }


    .hero-title {

        font-size: clamp(
            52px,
            14vw,
            85px
        );

        line-height: 0.95;

    }


    .hero-label {

        margin-bottom: 25px;

    }


    .hero-bottom {

        margin-top: 40px;

        gap: 30px;

    }


    .hero-description {

        max-width: 330px;

        font-size: 13px;

    }


    .hero-actions {

        width: 100%;

        flex-wrap: wrap;

    }


    .orbit-decoration {

        width: 400px;
        height: 400px;

        right: -230px;
        top: 65%;

        opacity: 0.22;

    }


    .hero-glow-one {

        width: 300px;
        height: 300px;

        right: -100px;

    }


    .placeholder-section {

        min-height: 60vh;

        padding: 100px 20px;

    }

}


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

@media (max-width: 480px) {

    .logo {
    

        font-size: 15px;

    }


    .logo-mark {

        width: 24px;
        height: 24px;

    }


    .hero-title {

        font-size: 48px;

    }


    .hero-actions {

        align-items: flex-start;

        flex-direction: column;

    }


    .primary-button {

        width: 100%;

        justify-content: space-between;

    }

}


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

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        transition-duration: 0.01ms !important;

    }

}

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

.about-section {
    position: relative;

    min-height: 100vh;

    padding: 150px 0 110px;

    background: #07090c;

    overflow: hidden;

    isolation: isolate;
}


.about-container {
    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: auto;

    position: relative;

    z-index: 3;
}


/* =========================
   SECTION LABEL
========================= */

.section-label {
    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--text-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.16em;
}


.section-label > span:first-child {
    color: var(--blue);
}


.section-label-line {
    width: 45px;

    height: 1px;

    background: rgba(255,255,255,0.18);
}


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

.about-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(260px, 0.6fr);

    gap: 100px;

    align-items: end;

    margin-top: 90px;

    padding-bottom: 90px;

    border-bottom: 1px solid var(--border);
}


.about-heading {
    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(60px, 7.5vw, 112px);

    line-height: 0.93;

    letter-spacing: -0.07em;

    font-weight: 500;
}


.about-heading span {
    display: block;

    color: transparent;

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


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

.about-intro-side {
    max-width: 350px;

    padding-bottom: 5px;
}


.about-kicker {
    display: block;

    margin-bottom: 22px;

    color: var(--blue);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.15em;
}


.about-intro-side p {
    color: #858c96;

    font-size: 14px;

    line-height: 1.85;
}



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

.about-copy {
    max-width: 650px;
}


.about-copy p {
    color: #a0a6ae;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(18px, 1.8vw, 25px);

    line-height: 1.45;

    letter-spacing: -0.025em;
}


.about-copy p + p {
    margin-top: 35px;
}


.about-copy p::before {
    content: "—";

    color: var(--blue);

    margin-right: 15px;

    font-size: 14px;
}


/* =========================
   APPROACH
========================= */

.about-approach {
    display: grid;


    gap: 100px;


    padding-top: 30px;

    border-top: 1px solid var(--border);
}


.approach-label {
    display: flex;

    align-items: center;

    gap: 15px;

    color: var(--text-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.14em;
}


.approach-line {
    width: 35px;

    height: 1px;

    background: var(--blue);
}


.approach-content {
    max-width: 750px;
}


.approach-content h3 {
    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 1;

    letter-spacing: -0.055em;

    font-weight: 500;
}


.approach-content h3 span {
    color: var(--blue);
}


.approach-content p {
    max-width: 570px;

    margin-top: 30px;

    color: #6f7680;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================
   VALUES
========================= */

.about-values {
    display: grid;

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

    margin-top: 110px;

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

    border-bottom: 1px solid var(--border);
}


.value-item {
    position: relative;

    min-height: 190px;

    padding: 25px 25px 25px 0;

    border-right: 1px solid var(--border);
}


.value-item:not(:first-child) {
    padding-left: 25px;
}


.value-item:last-child {
    border-right: none;
}


.value-item > span {
    display: block;

    margin-bottom: 35px;

    color: var(--blue);

    font-size: 9px;
}


.value-item strong {
    display: block;

    color: #e5e8ec;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 15px;

    font-weight: 500;
}


.value-item p {
    max-width: 170px;

    margin-top: 10px;

    color: #5f6670;

    font-size: 11px;

    line-height: 1.6;
}


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

.about-bottom {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 90px;
}


.about-bottom-line {
    width: 45px;

    height: 1px;

    background: var(--blue);
}


.about-bottom p {
    color: #555c65;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.16em;
}


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

.about-reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.9s var(--ease),
        transform 0.9s var(--ease);
}


.about-reveal.revealed {
    opacity: 1;

    transform: translateY(0);
}

@media (max-width: 1000px) {

    .about-intro {
        gap: 60px;
    }

    .about-work {
        gap: 70px;

        padding-left: 4%;
    }

    .about-approach {
        gap: 60px;
    }

}


@media (max-width: 768px) {

    .about-section {
        min-height: auto;

        padding: 120px 0 80px;
    }


    .about-container {
        width: calc(100% - 40px);
    }


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

        gap: 45px;

        margin-top: 65px;

        padding-bottom: 60px;
    }


    .about-heading {
        font-size:
            clamp(48px, 13vw, 75px);
    }


    .about-intro-side {
        max-width: 450px;
    }


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

        gap: 50px;

        margin-top: 70px;

        padding-left: 0;
    }


    .about-copy p {
        font-size: 18px;
    }


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

        gap: 35px;

        margin-top: 90px;
    }


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

        margin-top: 80px;
    }


    .value-item:nth-child(2) {
        border-right: none;
    }


    .value-item:nth-child(3),
    .value-item:nth-child(4) {
        border-top: 1px solid var(--border);
    }


    .value-item:nth-child(3) {
        padding-left: 0;
    }


    .about-bottom {
        margin-top: 70px;
    }

}


@media (max-width: 480px) {

    .about-heading {
        font-size: 46px;
    }


    .about-intro-side p {
        font-size: 13px;
    }


    .about-copy p {
        font-size: 17px;

        line-height: 1.5;
    }


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


    .value-item,
    .value-item:not(:first-child) {
        min-height: auto;

        padding: 22px 0;

        border-right: none;

        border-bottom: 1px solid var(--border);
    }


    .value-item:last-child {
        border-bottom: none;
    }


    .value-item > span {
        margin-bottom: 20px;
    }

}

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

.services-section {

    position: relative;

    padding: 150px 0 120px;

    background: #050608;

    overflow: hidden;

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

}


.services-container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: auto;

}


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

.services-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.services-header-note {

    color: #454b54;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.15em;

}


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

.services-intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-top: 85px;

    margin-bottom: 90px;

}


.services-heading {

    max-width: 850px;

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 0.94;

    letter-spacing: -0.07em;

    font-weight: 500;

}


.services-heading span {

    display: block;

    color: transparent;

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

}


.services-intro-text {

    max-width: 330px;

    padding-bottom: 5px;

    color: #737a84;

    font-size: 13px;

    line-height: 1.8;

}


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

.services-grid {

    display: grid;

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

    gap: 12px;

}


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

.service-card {

    position: relative;

    min-height: 470px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.008)
        );

    overflow: hidden;

    transition:
        border-color 0.5s ease,
        transform 0.5s var(--ease),
        background 0.5s ease;

}


.service-card::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    bottom: -120px;

    border-radius: 50%;

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

    filter: blur(70px);

    opacity: 0;

    transition:
        opacity 0.6s ease;

}


.service-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(57,132,255,0.28);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.04),
            rgba(57,132,255,0.015)
        );

}


.service-card:hover::before {

    opacity: 1;

}


/* =========================
   CARD TOP
========================= */

.service-card-top {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.service-number {

    color: var(--blue);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 10px;

}


.service-arrow {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    color: #666d77;

    font-size: 15px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.4s var(--ease);
}


.service-card:hover .service-arrow {

    color: white;

    background:
        var(--blue);

    transform:
        rotate(45deg);

}


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


.service-card-content {

    position: relative;

    z-index: 2;

    max-width: 430px;

    margin-top: auto;

}


.service-card-content h3 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 0.98;

    letter-spacing: -0.045em;

    font-weight: 500;

}


.service-card-content h3 span {

    display: block;

    color: #747b85;

}


.service-card-content p {

    max-width: 420px;

    margin-top: 22px;

    color: #6c737d;

    font-size: 13px;

    line-height: 1.75;

}


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

.service-tags {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 30px;

}


.service-tags span {

    padding: 6px 9px;

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

    color: #565d67;

    font-size: 9px;

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

}


.service-card:hover .service-tags span {

    border-color:
        rgba(57,132,255,0.15);

    color: #747c87;

}


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

.services-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 80px;

    padding-top: 25px;

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

}


.services-footer p {

    color: #555c65;

    font-size: 11px;

}


.services-footer p span {

    color: #b0b5bc;

}


.services-cta {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 13px 18px;

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

    border-radius: 100px;

    color: white;

    font-size: 11px;

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

}


.services-cta span {

    color: var(--blue);

    font-size: 15px;

}


.services-cta:hover {

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

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

}

.services-reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.9s var(--ease),
        transform 0.9s var(--ease);

}


.services-reveal.revealed {

    opacity: 1;

    transform: translateY(0);

}


/* Stagger the cards */

.services-grid .service-card:nth-child(1) {
    transition-delay: 0.05s;
}

.services-grid .service-card:nth-child(2) {
    transition-delay: 0.1s;
}

.services-grid .service-card:nth-child(3) {
    transition-delay: 0.15s;
}

.services-grid .service-card:nth-child(4) {
    transition-delay: 0.2s;
}

.services-grid .service-card:nth-child(5) {
    transition-delay: 0.25s;
}

.services-grid .service-card:nth-child(6) {
    transition-delay: 0.3s;
}

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

@media (max-width: 900px) {

    .services-intro {

        align-items: flex-start;

        flex-direction: column;

    }


    .services-intro-text {

        max-width: 500px;

    }


    .service-card {

        min-height: 430px;

    }

}


@media (max-width: 768px) {

    .services-section {

        padding: 110px 0 80px;

    }


    .services-container {

        width: calc(100% - 40px);

    }


    .services-header-note {

        display: none;

    }


    .services-intro {

        margin-top: 65px;

        margin-bottom: 60px;

    }


    .services-heading {

        font-size:
            clamp(
                48px,
                12vw,
                75px
            );

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-card {

        min-height: 400px;

        padding: 25px;

    }


    .service-icon {

        top: 90px;

        right: 30px;

    }


    .services-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

    }

}


@media (max-width: 480px) {

    .services-heading {

        font-size: 46px;

    }


    .service-card {

        min-height: 390px;

    }


    .service-card-content h3 {

        font-size: 29px;

    }


    .service-icon {

        width: 65px;
        height: 65px;

        top: 85px;

        right: 25px;

    }

}

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

.work-section {

    position: relative;

    padding: 160px 0 120px;

    background: #07090c;

    overflow: hidden;

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

}


.work-container {

    width: min(
        calc(100% - 42px),
        860px
    );

    margin: auto;

}


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

.work-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.work-header-note {

    color: #454b54;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.15em;

}


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

.work-intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 70px;

    margin-top: 85px;

    margin-bottom: 90px;

}


.work-heading {

    max-width: 850px;

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            58px,
            7vw,
            108px
        );

    line-height: 0.93;

    letter-spacing: -0.07em;

    font-weight: 500;

}


.work-heading span {

    display: block;

    color: transparent;

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

}


.work-intro-text {

    max-width: 340px;

    padding-bottom: 5px;

    color: #737a84;

    font-size: 13px;

    line-height: 1.8;

}


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

.project {

    position: relative;
    display: block;
    width: 100%;
    margin: 0;

}


.project-visual {

    position: relative;

    overflow: hidden;

    background: #0b0e13;

}


.project-featured .project-visual {

    height: min(
        46vw,
        520px
    );

    min-height: 330px;

}


.project-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

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

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(57,132,255,0.08),
            transparent 45%
        ),
        #0b0e13;

    transition:
        transform 0.8s var(--ease);
}


.project-placeholder::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

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

    transform:
        scaleX(1.8)
        scaleY(0.35)
        rotate(-20deg);

    transition:
        transform 1s var(--ease),
        border-color 0.5s ease;

}


.project-placeholder::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(57,132,255,0.35),
            transparent 68%
        );

    filter: blur(20px);

    transition:
        transform 0.8s var(--ease);

}


.project:hover .project-placeholder::before {

    transform:
        scaleX(2)
        scaleY(0.4)
        rotate(25deg);

    border-color:
        rgba(57,132,255,0.25);

}


.project:hover .project-placeholder::after {

    transform:
        scale(1.3);

}


/* =========================
   GRID PATTERN
========================= */

.project-grid-pattern {

    position: absolute;

    inset: 0;

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

    background-size: 55px 55px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black,
            transparent 75%
        );

    opacity: 0.5;

}


/* =========================
   PLACEHOLDER CONTENT
========================= */

.project-placeholder-content {

    position: relative;

    z-index: 3;

    text-align: center;

}


.project-placeholder-content span {

    display: block;

    margin-bottom: 18px;

    color: var(--blue);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.2em;

}


.project-placeholder-content strong {

    display: block;

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

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 0.92;

    letter-spacing: -0.06em;

    font-weight: 500;

}


.project-placeholder-content small {

    display: block;

    max-width: 260px;

    margin: 25px auto 0;

    color: #555d67;

    font-size: 10px;

    line-height: 1.6;

}


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

.project-info {

    padding: 25px 0 0;

}


.project-meta {

    display: flex;

    align-items: center;

    gap: 15px;

    color: #555c66;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.13em;

}


.project-meta span:first-child {

    color: var(--blue);

}


.project-title-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 12px;

}


.project-title-row h3 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            25px,
            3vw,
            40px
        );

    letter-spacing: -0.04em;

    font-weight: 500;

}


.project-arrow {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

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

    border-radius: 50%;

    color: #666d77;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.4s var(--ease);

}


.project:hover .project-arrow {

    color: white;

    background: var(--blue);

    transform: rotate(45deg);

}


.project-info > p {

    max-width: 520px;

    margin-top: 10px;

    color: #666d77;

    font-size: 12px;

    line-height: 1.7;

}


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

.project-grid {

    display: grid;

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

    gap: 22px;

    margin-top: 110px;

}


.project-panel .project-visual {

    height: 560px;

}


.project-empty {

    padding: 22px 24px 28px;

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

    background:
        rgba(11, 14, 19, 0.96);

    overflow: hidden;

}

.project-card-number {

    color: var(--blue);

    font-size: 11px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    font-weight: 600;

}

.project-image-slot {

    width: 100%;
    height: 220px;

    margin-top: 22px;
    margin-bottom: 20px;

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        );

}

.project-card-copy {

    max-width: 520px;

}

.project-card-copy h3 {

    margin: 0;

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

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(26px, 2.4vw, 42px);

    line-height: 0.94;

    letter-spacing: -0.05em;

    font-weight: 500;

}

.project-card-copy h3 span {

    display: block;

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

}

.project-card-copy p {

    max-width: 470px;

    margin-top: 16px;

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

    font-size: 13px;

    line-height: 1.7;

}

.project-small .project-visual {

    height: 360px;

}


.project-alt {

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,0.04),
            transparent 45%
        ),
        #0b0e13;

}


.project-small
.project-placeholder-content strong {

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

}


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

.work-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 100px;

    padding-top: 25px;

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

}


.work-bottom p {

    color: #555c65;

    font-size: 11px;

}


.work-cta {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 13px 18px;

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

    border-radius: 100px;

    font-size: 11px;

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

}


.work-cta span {

    color: var(--blue);

    font-size: 15px;

}


.work-cta:hover {

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

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

}


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

.work-reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 1s var(--ease),
        transform 1s var(--ease);

}


.work-reveal.revealed {

    opacity: 1;

    transform: translateY(0);

}

/* =========================================================
   WORK — PROJECT PREVIEW
========================================================= */

.project-link {
    display: block;
    color: inherit;
    text-decoration: none;
}


/* =========================
   PROJECT IMAGE
========================= */

.project-image-wrap {
    position: relative;
    overflow: hidden;

    background: #080a0d;

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


/* =========================
   BROWSER MOCKUP
========================= */

.browser-mockup {

    width: 92%;

    margin: 45px auto 0;

    background: #0b0d10;

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

    border-radius: 10px 10px 0 0;

    overflow: hidden;

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

    transform:
        translateY(20px);

    transition:
        transform 0.8s var(--ease),
        box-shadow 0.8s ease;
}


/* =========================
   BROWSER BAR
========================= */

.browser-bar {

    height: 38px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    background: #111419;

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


/* Browser dots */

.browser-dots {

    display: flex;

    gap: 6px;

    width: 70px;
}

.browser-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.25);
}


/* Address */

.browser-address {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    min-width: 180px;

    padding: 5px 18px;

    border-radius: 20px;

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

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

    color: #646b74;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 8px;

    text-align: center;
}


/* =========================
   SCREEN
========================= */

.browser-screen {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #050608;
}


.browser-screen img {

    display: block;

    width: 100%;
    height: auto;

    transition:
        transform 1s var(--ease),
        filter 0.7s ease;
}


/* =========================
   HOVER
========================= */

.project-link:hover .browser-mockup {

    transform:
        translateY(5px);

    box-shadow:
        0 45px 100px
        rgba(0,0,0,0.6);
}


.project-link:hover .browser-screen img {

    transform:
        scale(1.025);

    filter:
        brightness(0.72);
}


/* =========================
   PROJECT OVERLAY
========================= */

.project-image-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    color: white;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.16em;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.4s ease;
}


.project-link:hover .project-image-overlay {

    opacity: 1;
}


.project-overlay-arrow {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--blue);

    color: white;

    font-size: 15px;

    transition:
        transform 0.35s var(--ease);
}


.project-link:hover
.project-overlay-arrow {

    transform:
        rotate(45deg);
}


/* =========================================================
   PROJECT INFORMATION
========================================================= */

.project-info {

    padding-top: 28px;
}


.project-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 16px;

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

    color: #626a74;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.12em;
}


.project-meta span:first-child {

    color:
        var(--blue);
}


.project-title-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-top: 22px;
}


.project-title-row h3 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 1;

    letter-spacing:
        -0.055em;

    font-weight: 500;
}


.project-arrow {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

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

    border-radius: 50%;

    color: white;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.4s var(--ease);
}


.project-link:hover
.project-arrow {

    background:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        rotate(45deg);
}


.project-info > p {

    max-width: 560px;

    margin:
        16px 0 0;

    color:
        #626a74;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   PROJECT DETAIL PAGE
========================================================= */

.project-page {

    background:
        #050608;

    color: white;
}


.project-detail {

    background:
        #050608;
}


.project-detail-container {

    width:
        min(
            calc(100% - 80px),
            1240px
        );

    margin:
        0 auto;
}


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

.project-detail-hero {

    padding:
        170px 0 110px;
}


.project-back {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        #646b75;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    transition:
        color 0.3s ease;
}


.project-back:hover {

    color:
        white;
}


.project-detail-heading {

    display: grid;

    grid-template-columns:
        1.2fr 0.55fr;

    gap:
        100px;

    align-items: end;

    margin-top:
        80px;
}


.project-detail-number {

    color:
        var(--blue);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        0.16em;
}


.project-detail-heading h1 {

    margin:
        22px 0 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height:
        0.86;

    letter-spacing:
        -0.075em;

    font-weight:
        500;
}


.project-detail-heading h1 span {

    display: block;

    color:
        transparent;

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


.project-detail-heading > p {

    max-width:
        380px;

    margin:
        0;

    color:
        #737a84;

    font-size:
        13px;

    line-height:
        1.85;
}


/* =========================
   MAIN PROJECT IMAGE
========================= */

.project-main-preview {

    margin-top:
        90px;

    padding:
        20px;

    background:
        #0a0c0f;

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


.project-main-preview img {

    display:
        block;

    width:
        100%;

    height:
        auto;
}


/* =========================
   PROJECT META
========================= */

.project-meta-grid {

    display:
        grid;

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

    margin-top:
        35px;

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

    border-bottom:
        1px solid
        var(--border);
}


.project-meta-grid > div {

    min-height:
        120px;

    padding:
        24px;

    border-right:
        1px solid
        var(--border);
}


.project-meta-grid > div:first-child {

    padding-left:
        0;
}


.project-meta-grid > div:last-child {

    border-right:
        none;
}


.project-meta-grid span {

    display:
        block;

    margin-bottom:
        14px;

    color:
        #505761;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        0.13em;
}


.project-meta-grid strong {

    color:
        #b8bec6;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        13px;

    font-weight:
        500;
}


/* =========================================================
   PROJECT OVERVIEW
========================================================= */

.project-overview {

    padding:
        120px 0;

    border-top:
        1px solid
        var(--border);
}


.project-section-label {

    color:
        var(--blue);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        0.16em;
}


.project-overview-grid {

    display:
        grid;

    grid-template-columns:
        0.95fr 0.75fr;

    gap:
        120px;

    margin-top:
        65px;
}


.project-overview-grid h2 {

    margin:
        0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height:
        0.95;

    letter-spacing:
        -0.06em;

    font-weight:
        500;
}


.project-overview-grid h2 span {

    display:
        block;

    color:
        transparent;

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


.project-overview-grid p {

    margin:
        0;

    color:
        #737a84;

    font-size:
        14px;

    line-height:
        1.85;
}


.project-overview-grid p + p {

    margin-top:
        25px;
}


/* =========================================================
   PROJECT TECHNOLOGIES
========================================================= */

.project-tech {

    padding:
        100px 0;

    border-top:
        1px solid
        var(--border);
}


.tech-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        40px;
}


.tech-list span {

    padding:
        10px 16px;

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

    border-radius:
        100px;

    color:
        #a4abb4;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;
}


/* =========================================================
   PROJECT GALLERY
========================================================= */

.project-gallery {

    padding:
        120px 0;

    border-top:
        1px solid
        var(--border);
}


.project-gallery-main {

    margin-top:
        60px;

    padding:
        20px;

    background:
        #090b0f;

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


.project-gallery-main img {

    display:
        block;

    width:
        100%;
}


.project-gallery-secondary {

    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap:
        70px;

    align-items:
        center;

    margin-top:
        70px;
}


.project-gallery-secondary img {

    display:
        block;

    width:
        100%;

    height:
        auto;
}


.project-gallery-copy {

    max-width:
        430px;
}


.project-gallery-copy span {

    color:
        var(--blue);

    font-size:
        9px;
}


.project-gallery-copy h3 {

    margin:
        22px 0 18px;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height:
        0.98;

    letter-spacing:
        -0.05em;

    font-weight:
        500;
}


.project-gallery-copy p {

    color:
        #626a74;

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   LIVE PROJECT
========================================================= */

.project-live {

    padding:
        120px 0;

    background:
        #06080b;

    border-top:
        1px solid
        var(--border);
}


.project-live-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;
}


.project-live-label {

    color:
        var(--blue);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        0.15em;
}


.project-live h2 {

    margin:
        22px 0 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height:
        0.92;

    letter-spacing:
        -0.065em;

    font-weight:
        500;
}


.project-live h2 em {

    display:
        block;

    color:
        transparent;

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

    font-style:
        normal;
}


.project-live-button {

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    padding:
        17px 18px 17px 24px;

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

    border-radius:
        100px;

    color:
        white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        11px;
}


.project-live-button span:last-child {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--blue);
}


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

@media (max-width: 900px) {

    .project-detail-heading {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .project-overview-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;
    }

    .project-gallery-secondary {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 768px) {

    .project-detail-container {

        width:
            calc(100% - 40px);
    }

    .project-detail-hero {

        padding:
            130px 0 80px;
    }

    .project-detail-heading {

        margin-top:
            60px;
    }

    .project-detail-heading h1 {

        font-size:
            clamp(52px, 13vw, 80px);
    }

    .project-main-preview {

        margin-top:
            60px;

        padding:
            10px;
    }

    .project-meta-grid {

        grid-template-columns:
            1fr;
    }

    .project-meta-grid > div {

        min-height:
            auto;

        padding:
            20px 0;

        border-right:
            none;

        border-top:
            1px solid
            var(--border);
    }

    .project-meta-grid > div:first-child {

        border-top:
            none;
    }

    .project-overview,
    .project-tech,
    .project-gallery,
    .project-live {

        padding:
            90px 0;
    }

    .project-live-inner {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .project-live-button {

        width:
            100%;

        justify-content:
            space-between;
    }

}


@media (max-width: 480px) {

    .browser-mockup {

        width:
            96%;

        margin-top:
            25px;
    }

    .browser-bar {

        height:
            30px;
    }

    .browser-address {

        display:
            none;
    }

    .browser-dots span {

        width:
            5px;

        height:
            5px;
    }

}


/* =========================================================
   PROJECT 02 — LOGO DESIGN
========================================================= */

.logo-project-preview {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(57,132,255,0.08),
            transparent 55%
        ),
        #080a0d;

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

}


/* Subtle background grid */

.logo-project-preview::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );

}


/* Image presentation */

.logo-project-image {

    position: relative;

    z-index: 2;

    width: 65%;

    max-width: 360px;

    padding: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 6px;

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

    transform:
        rotate(-3deg);

    transition:
        transform 0.7s var(--ease),
        box-shadow 0.7s ease;

}


.logo-project-image img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

}


.project-small:hover
.logo-project-image {

    transform:
        rotate(0deg)
        scale(1.04)
        translateY(-8px);

    box-shadow:
        0 45px 100px
        rgba(0,0,0,0.6);

}


/* Mobile */

@media (max-width: 768px) {

    .logo-project-preview {

        min-height: 420px;

    }

    .logo-project-image {

        width: 70%;

        padding: 25px;

    }

}


@media (max-width: 480px) {

    .logo-project-preview {

        min-height: 350px;

    }

    .logo-project-image {

        width: 72%;

        padding: 20px;

    }

}

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

@media (max-width: 900px) {

    .work-intro {

        align-items: flex-start;

        flex-direction: column;

    }


    .work-intro-text {

        max-width: 500px;

    }


    .project-featured .project-visual {

        min-height: 400px;

    }


    .project-small .project-visual {

        height: 400px;

    }

}


@media (max-width: 768px) {

    .work-section {

        padding: 110px 0 80px;

    }


    .work-container {

        width: calc(100% - 40px);

    }


    .work-header-note {

        display: none;

    }


    .work-intro {

        margin-top: 65px;

        margin-bottom: 60px;

    }


    .work-heading {

        font-size:
            clamp(
                48px,
                12vw,
                75px
            );

    }


    .project-featured .project-visual {

        height: 450px;

        min-height: 0;

    }


    .project-grid {

        grid-template-columns: 1fr;

        gap: 65px;

        margin-top: 80px;

    }


    .project-panel .project-visual {

        height: 500px;

    }


    .project-small .project-visual {

        height: 400px;

    }


    .work-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;

    }

}


@media (max-width: 480px) {

    .work-heading {

        font-size: 46px;

    }


    .project-featured .project-visual {

        height: 380px;

    }


    .project-small .project-visual {

        height: 350px;

    }


    .project-placeholder-content strong {

        font-size: 36px;

    }


    .project-info {

        padding-top: 20px;

    }

}

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

.process-section {

    position: relative;

    padding: 160px 0 130px;

    background: #050608;

    overflow: hidden;

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

}


.process-container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: auto;

}


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

.process-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.process-header-note {

    color: #454b54;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.15em;

}


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

.process-intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 70px;

    margin-top: 85px;

    margin-bottom: 120px;

}


.process-heading {

    max-width: 800px;

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 0.93;

    letter-spacing: -0.07em;

    font-weight: 500;

}


.process-heading span {

    display: block;

    color: transparent;

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

}


.process-intro-text {

    max-width: 340px;

    padding-bottom: 5px;

    color: #737a84;

    font-size: 13px;

    line-height: 1.8;

}


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

.process-timeline {

    position: relative;

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

}


/* Vertical blue line */

.process-timeline::before {

    content: "";

    position: absolute;

    left: 48px;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            var(--blue),
            rgba(57,132,255,0.08)
        );

    opacity: 0.35;

}


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

.process-step {

    position: relative;

    display: grid;

    grid-template-columns:
        100px minmax(300px, 1fr) 240px;

    gap: 70px;

    min-height: 250px;

    padding: 45px 0;

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

}


/* =========================
   MARKER
========================= */

.process-marker {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


.process-marker span {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(57,132,255,0.25);

    border-radius: 50%;

    background: #050608;

    color: var(--blue);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 9px;

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

}


.process-step:hover .process-marker span {

    background: var(--blue);

    border-color: var(--blue);

    color: white;

    transform: scale(1.12);

}


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

.process-step-content {

    max-width: 650px;

}


.process-step-label {

    display: block;

    margin-bottom: 16px;

    color: var(--blue);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.14em;

}


.process-step-content h3 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 0.95;

    letter-spacing: -0.055em;

    font-weight: 500;

    transition:
        transform 0.4s var(--ease);

}


.process-step:hover
.process-step-content h3 {

    transform: translateX(7px);

}


.process-step-content p {

    max-width: 520px;

    margin-top: 22px;

    color: #6b727c;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================
   STEP SIDE
========================= */

.process-step-side {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    padding-top: 28px;

}


.process-step-side span {

    color: #505761;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    transition:
        color 0.3s ease,
        transform 0.3s var(--ease);

}


.process-step:hover
.process-step-side span {

    color: #7c838d;

    transform: translateX(4px);

}


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

.process-bottom {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 90px;

}


.process-bottom-line {

    width: 45px;

    height: 1px;

    background: var(--blue);

}


.process-bottom p {

    color: #555c65;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.16em;

}


.process-bottom p span {

    color: #8a9098;

}


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

.process-reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.9s var(--ease),
        transform 0.9s var(--ease);

}


.process-reveal.revealed {

    opacity: 1;

    transform: translateY(0);

}

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

@media (max-width: 1000px) {

    .process-step {

        grid-template-columns:
            80px 1fr 170px;

        gap: 40px;

    }


    .process-timeline::before {

        left: 39px;

    }

}


@media (max-width: 768px) {

    .process-section {

        padding: 110px 0 80px;

    }


    .process-container {

        width: calc(100% - 40px);

    }


    .process-header-note {

        display: none;

    }


    .process-intro {

        align-items: flex-start;

        flex-direction: column;

        gap: 40px;

        margin-top: 65px;

        margin-bottom: 75px;

    }


    .process-heading {

        font-size:
            clamp(
                48px,
                12vw,
                75px
            );

    }


    .process-step {

        grid-template-columns: 55px 1fr;

        gap: 25px;

        min-height: 0;

        padding: 40px 0;

    }


    .process-timeline::before {

        left: 27px;

    }


    .process-marker span {

        width: 32px;
        height: 32px;

    }


    .process-step-side {

        display: none;

    }


    .process-step-content h3 {

        font-size: 38px;

    }


    .process-step-content p {

        font-size: 12px;

    }


    .process-bottom {

        margin-top: 70px;

    }

}


@media (max-width: 480px) {

    .process-heading {

        font-size: 46px;

    }


    .process-step {

        grid-template-columns: 45px 1fr;

        gap: 18px;

    }


    .process-timeline::before {

        left: 22px;

    }


    .process-marker span {

        width: 28px;
        height: 28px;

        font-size: 8px;

    }


    .process-step-content h3 {

        font-size: 34px;

    }

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    position: relative;

    min-height: 90vh;

    display: flex;

    align-items: center;

    padding: 150px 0 100px;

    background: #050608;

    overflow: hidden;

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

}


.contact-container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: auto;

}


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

.contact-header {

    position: relative;

    z-index: 3;

}


/* =========================
   MAIN
========================= */

.contact-main {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 120px 0 130px;

}


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

.contact-orbit {

    position: absolute;

    width: 650px;
    height: 650px;

    top: 50%;
    left: 50%;

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

    pointer-events: none;

    opacity: 0.7;

}


.contact-orbit-line {

    position: absolute;

    inset: 0;

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

    border-radius: 50%;

    transform:
        rotate(-20deg)
        scaleY(0.28);

    animation:
        contactOrbit 18s linear infinite;

}


.contact-orbit-line::before {

    content: "";

    position: absolute;

    inset: 80px;

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

    border-radius: 50%;

}


.contact-orbit-dot {

    position: absolute;

    width: 7px;
    height: 7px;

    top: 50%;
    left: 4%;

    border-radius: 50%;

    background:
        var(--blue);

    box-shadow:
        0 0 20px
        rgba(57,132,255,0.7);

}


@keyframes contactOrbit {

    from {

        transform:
            rotate(-20deg)
            scaleY(0.28);

    }

    to {

        transform:
            rotate(340deg)
            scaleY(0.28);

    }

}


/* =========================
   HEADING
========================= */

.contact-heading {

    position: relative;

    z-index: 2;

    max-width: 1100px;

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

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

    line-height: 0.88;

    letter-spacing: -0.075em;

    font-weight: 500;

}


.contact-heading span {

    display: block;

    color: transparent;

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

}


/* =========================
   DESCRIPTION
========================= */

.contact-description {

    position: relative;

    z-index: 2;

    max-width: 490px;

    margin-top: 45px;

    color: #737a84;

    font-size: 14px;

    line-height: 1.8;

}


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

.contact-button {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 35px;

    margin-top: 45px;

    padding: 17px 18px 17px 25px;

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

    border-radius: 100px;

    color: white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 12px;

    letter-spacing: 0.02em;

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

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

}


.contact-button-arrow {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--blue);

    font-size: 16px;

    transition:
        transform 0.4s var(--ease);

}


.contact-button:hover {

    background:
        rgba(57,132,255,0.07);

    border-color:
        rgba(57,132,255,0.35);

}


.contact-button:hover
.contact-button-arrow {

    transform:
        rotate(45deg);

}


/* =========================
   CONTACT DETAILS
========================= */

.contact-details {

    display: grid;

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

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

}


.contact-detail {

    padding: 25px 25px 25px 0;

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

}


.contact-detail:not(:first-child) {

    padding-left: 25px;

}


.contact-detail:last-child {

    border-right: none;

}


.contact-detail > span {

    display: block;

    margin-bottom: 13px;

    color: #4e555f;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.14em;

}


.contact-detail a,
.contact-detail p {

    margin: 0;

    color: #b4bac2;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 13px;

    transition:
        color 0.3s ease;

}


.contact-detail a:hover {

    color: var(--blue);

}


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

.contact-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 1s var(--ease),
        transform 1s var(--ease);

}


.contact-reveal.revealed {

    opacity: 1;

    transform:
        translateY(0);

}

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

@media (max-width: 768px) {

    .contact-section {

        min-height: auto;

        padding: 110px 0 70px;

    }


    .contact-container {

        width:
            calc(100% - 40px);

    }


    .contact-main {

        padding:
            90px 0 100px;

    }


    .contact-heading {

        font-size:
            clamp(
                52px,
                13vw,
                80px
            );

    }


    .contact-description {

        max-width: 420px;

        margin-top: 35px;

        font-size: 13px;

    }


    .contact-orbit {

        width: 500px;
        height: 500px;

    }


    .contact-details {

        grid-template-columns: 1fr;

    }


    .contact-detail,
    .contact-detail:not(:first-child) {

        padding:
            20px 0;

        border-right: none;

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

    }


    .contact-detail:last-child {

        border-bottom: none;

    }

}


@media (max-width: 480px) {

    .contact-heading {

        font-size: 48px;

    }


    .contact-description {

        font-size: 12px;

    }


    .contact-button {

        gap: 25px;

        padding-left: 20px;

    }


    .contact-orbit {

        width: 380px;
        height: 380px;

        opacity: 0.5;

    }

}

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

.site-footer {

    position: relative;

    padding:
        80px 0 30px;

    background:
        #030406;

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

}


.footer-container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: auto;

}


/* =========================
   TOP
========================= */

.footer-top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding-bottom: 70px;

}


.footer-logo {

    color: white;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 28px;

    font-weight: 600;

    letter-spacing: -0.05em;

}


.footer-logo span {

    color: var(--blue);

}


.footer-tagline {

    color: #555c65;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.15em;

}


/* =========================
   MIDDLE
========================= */

.footer-middle {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding:
        25px 0;

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

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

}


.footer-nav {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

}


.footer-nav a,
.footer-social a {

    color: #666d77;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    transition:
        color 0.3s ease;

}


.footer-nav a:hover,
.footer-social a:hover {

    color: white;

}


.footer-social {

    display: flex;

    gap: 25px;

}


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

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 25px;

}


.footer-bottom > span {

    color: #3f454d;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}


.back-to-top {

    padding: 0;

    border: none;

    background: none;

    color: #555c65;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    cursor: pointer;

    transition:
        color 0.3s ease;

}


.back-to-top:hover {

    color: var(--blue);

}


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

@media (max-width: 768px) {

    .site-footer {

        padding:
            60px 0 25px;

    }


    .footer-container {

        width:
            calc(100% - 40px);

    }


    .footer-top {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        padding-bottom: 50px;

    }


    .footer-middle {

        flex-direction: column;

        gap: 35px;

    }


    .footer-nav {

        gap: 18px;

    }


    .footer-social {

        gap: 20px;

    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

    }

}

/* =========================================================
   PRELOADER
========================================================= */

.preloader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #050608;

    color: white;

    overflow: hidden;

}


.preloader-inner {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 35px 0;

}


/* =========================
   BRAND
========================= */

.preloader-brand {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: -0.04em;

}


.preloader-brand span {

    color: var(--blue);

}


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

.preloader-center {

    width: min(
        420px,
        70vw
    );

    margin: auto;

}


.preloader-number {

    display: flex;

    align-items: baseline;

    justify-content: center;

    margin-bottom: 20px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: clamp(
        60px,
        10vw,
        120px
    );

    line-height: 1;

    letter-spacing: -0.07em;

    font-weight: 500;

}


.preloader-number small {

    margin-left: 5px;

    color: var(--blue);

    font-size: 14px;

    letter-spacing: 0;

}


/* =========================
   PROGRESS LINE
========================= */

.preloader-line {

    position: relative;

    width: 100%;

    height: 1px;

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

    overflow: hidden;

}


.preloader-line span {

    position: absolute;

    left: 0;
    top: 0;

    width: 0%;

    height: 100%;

    background: var(--blue);

    box-shadow:
        0 0 12px
        rgba(57,132,255,0.5);

}


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

.preloader-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #4d545e;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.14em;

}


/* =========================
   EXIT ANIMATION
========================= */

.preloader.is-hidden {

    animation:
        preloaderExit 0.9s
        cubic-bezier(
            0.76,
            0,
            0.24,
            1
        )
        forwards;

}


@keyframes preloaderExit {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(-100%);

    }

}


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

@media (max-width: 480px) {

    .preloader-inner {

        width:
            calc(100% - 40px);

        padding:
            25px 0;

    }


    .preloader-brand {

        font-size: 16px;

    }


    .preloader-bottom {

        font-size: 8px;

    }

}


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

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

    .preloader.is-hidden {

        animation:
            none;

        opacity: 0;

        transition:
            opacity 0.3s ease;

    }

}

body.loading {
    overflow: hidden;
}

/* =========================================================
   BLUEORBIT — WORK SPACING REFINEMENT
   Cleaner spacing + compact project grid
========================================================= */

.work-section {
    padding: 125px 0 105px;
}

.work-container {
    width: min(
        calc(100% - 80px),
        1240px
    );
}

.work-intro {
    gap: 90px;
    margin-top: 70px;
    margin-bottom: 55px;
}

.work-heading {
    max-width: 760px;
    font-size: clamp(54px, 6vw, 88px);
    line-height: 0.9;
}

.work-intro-text {
    max-width: 330px;
}

/* Three projects across */

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

    gap: 22px;

    margin-top: 0;
}

/* Remove the oversized card height */

.project-panel .project-visual {
    height: auto;
}

.project-empty {
    min-height: 0;
    padding: 18px 18px 22px;
}

/* Smaller project image area */

.project-image-slot {
    height: 175px;
    margin-top: 16px;
    margin-bottom: 18px;
}

/* Compact project typography */

.project-card-copy h3 {
    font-size: clamp(22px, 2vw, 30px);
    line-height: 0.98;
}

.project-card-copy p {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.6;
}

/* Keep the bottom section close to the projects */

.work-bottom {
    margin-top: 60px;
}


/* =========================================================
   PROJECT DETAIL — SMALLER PRESENTATION IMAGES
========================================================= */

.project-main-preview {
    width: 86%;
    margin: 65px auto 0;
    padding: 14px;
}

.project-main-preview img {
    width: 100%;
    height: auto;
}

.project-gallery-main {
    width: 82%;
    margin: 45px auto 0;
    padding: 14px;
}

.project-gallery-main img {
    width: 100%;
}

.project-gallery-secondary {
    width: 90%;
    margin: 55px auto 0;
    gap: 55px;
}

.project-gallery-secondary img {
    width: 100%;
}


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

@media (max-width: 1000px) {

    .work-container {
        width: calc(100% - 60px);
    }

    .project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .project-image-slot {
        height: 190px;
    }

}


@media (max-width: 768px) {

    .work-section {
        padding: 100px 0 80px;
    }

    .work-container {
        width: calc(100% - 40px);
    }

    .work-intro {
        display: block;
        margin-top: 55px;
        margin-bottom: 45px;
    }

    .work-heading {
        font-size: clamp(46px, 12vw, 72px);
    }

    .work-intro-text {
        margin-top: 30px;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .project-image-slot {
        height: 220px;
    }

    .project-main-preview {
        width: 100%;
        margin-top: 50px;
        padding: 10px;
    }

    .project-gallery-main {
        width: 100%;
        margin-top: 40px;
        padding: 10px;
    }

    .project-gallery-secondary {
        width: 100%;
        margin-top: 45px;
    }

}


@media (max-width: 480px) {

    .work-section {
        padding: 85px 0 70px;
    }

    .work-heading {
        font-size: 46px;
    }

    .project-empty {
        padding: 16px 16px 20px;
    }

    .project-image-slot {
        height: 190px;
    }

}

/* =========================================================
   WORK PROJECT IMAGES — FINAL
   Actual image area for every portfolio card
========================================================= */

.project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 0;
}

.project-panel .project-visual {
    height: auto;
}

.project-empty {
    min-height: 0;
    padding: 18px 18px 22px;
}

.project-image-slot {
    position: relative;
    width: 100%;
    height: 210px;
    margin: 16px 0 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080a0e;
    border: 1px solid rgba(255,255,255,0.08);
}

.project-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s var(--ease), opacity 0.4s ease;
}

.project-card-image-contain {
    object-fit: contain;
    padding: 10px;
}

.project-panel:hover .project-card-image {
    transform: scale(1.035);
}

.project-panel:hover .project-card-image-contain {
    transform: scale(1.02);
}

.project-card-copy h3 {
    font-size: clamp(21px, 1.8vw, 27px);
    line-height: 0.98;
}

.project-card-copy p {
    margin-top: 11px;
    font-size: 11px;
    line-height: 1.6;
}


/* Project detail images */

.project-main-preview {
    width: min(86%, 1050px);
    margin: 60px auto 0;
    padding: 12px;
}

.project-main-preview img {
    display: block;
    width: 100%;
    height: auto;
}

.project-gallery-main {
    width: min(82%, 980px);
    margin: 42px auto 0;
    padding: 12px;
}

.project-gallery-main img {
    display: block;
    width: 100%;
    height: auto;
}


/* Tablet */

@media (max-width: 1000px) {

    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .project-image-slot {
        height: 200px;
    }

}


/* Mobile */

@media (max-width: 768px) {

    .project-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .project-image-slot {
        height: 230px;
    }

    .project-main-preview,
    .project-gallery-main {
        width: 100%;
        padding: 8px;
    }

}


@media (max-width: 480px) {

    .project-image-slot {
        height: 195px;
    }

}


.contact-main {
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr);
    gap:clamp(55px,8vw,130px);
    align-items:center;
}
.contact-copy{position:relative;z-index:2}
.contact-copy .contact-description{max-width:440px}
.contact-form-wrap{position:relative;z-index:3;width:100%}
.contact-form-wrap::before{
    content:"";position:absolute;width:260px;height:260px;right:-90px;bottom:-110px;
    border-radius:50%;background:rgba(57,132,255,.08);filter:blur(85px);pointer-events:none;
}
.contact-form{
    position:relative;display:flex;flex-direction:column;gap:18px;
    padding:clamp(26px,3vw,38px);
    border:1px solid rgba(255,255,255,.09);
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    box-shadow:0 25px 80px rgba(0,0,0,.22);overflow:hidden;
}
.contact-form::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(135deg,rgba(57,132,255,.045),transparent 32%);
}
.contact-form-head{
    position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
    gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.07);
}
.contact-form-eyebrow{
    display:block;margin-bottom:8px;color:var(--blue,#3984ff);
    font-family:"Space Grotesk",sans-serif;font-size:9px;text-transform:uppercase;letter-spacing:.16em;
}
.contact-form-title{
    margin:0;color:#f2f4f7;font-family:"Space Grotesk",sans-serif;
    font-size:clamp(24px,2.5vw,34px);line-height:.98;letter-spacing:-.045em;font-weight:500;
}
.contact-form-meta{color:#515965;font-size:9px;line-height:1.5;text-align:right;white-space:nowrap}
.contact-form-row{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-field{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}
.contact-field label{
    font-family:"Space Grotesk",sans-serif;font-size:9px;text-transform:uppercase;
    letter-spacing:.13em;color:#69717c;
}
.contact-field input,.contact-field select,.contact-field textarea{
    width:100%;border:1px solid rgba(255,255,255,.085);border-radius:0;outline:none;
    background:rgba(4,6,9,.42);color:#f3f5f8;font-family:"DM Sans",sans-serif;font-size:13px;
    padding:15px;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.contact-field input:hover,.contact-field select:hover,.contact-field textarea:hover{border-color:rgba(255,255,255,.15)}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#454d58}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{
    border-color:rgba(57,132,255,.62);background:rgba(57,132,255,.035);
    box-shadow:0 0 0 3px rgba(57,132,255,.055);
}
.contact-field select{
    color:#aeb5be;appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,#69717c 50%),linear-gradient(135deg,#69717c 50%,transparent 50%);
    background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.contact-field select option{background:#0b0d10;color:#f3f5f8}
.contact-field textarea{min-height:135px;resize:vertical;line-height:1.6}
.contact-form-actions{
    position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;margin-top:3px;padding-top:6px;
}
.contact-form-status{min-height:18px;max-width:310px;color:#707985;font-size:10px;line-height:1.5}
.contact-form-status.success{color:#82c99a}
.contact-form-status.error{color:#e88989}
.contact-form-note{margin-top:5px;max-width:310px;color:#454c56;font-size:9px;line-height:1.5}
.contact-submit{
    position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
    min-width:176px;padding:9px 9px 9px 18px;border:1px solid rgba(57,132,255,.55);
    border-radius:999px;background:var(--blue,#3984ff);color:#fff;font-family:"Space Grotesk",sans-serif;
    font-size:11px;font-weight:600;cursor:pointer;transition:transform .3s ease,background .3s ease,box-shadow .3s ease,opacity .3s ease;
}
.contact-submit>span:last-child{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:rgba(0,0,0,.14);transition:transform .35s var(--ease);
}
.contact-submit:hover{transform:translateY(-2px);background:#4b91ff;box-shadow:0 12px 35px rgba(57,132,255,.18)}
.contact-submit:hover>span:last-child{transform:rotate(45deg)}
.contact-submit:disabled{opacity:.65;cursor:wait;transform:none;box-shadow:none}

@media(max-width:1050px){
    .contact-main{grid-template-columns:1fr;gap:60px}
    .contact-copy .contact-description{max-width:560px}
}
@media(max-width:768px){.contact-form{padding:24px}}
@media(max-width:560px){
    .contact-form-head{align-items:flex-start;flex-direction:column}
    .contact-form-meta{text-align:left}
    .contact-form-row{grid-template-columns:1fr}
    .contact-form-actions{align-items:stretch;flex-direction:column}
    .contact-submit{width:100%}
}