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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0b0b0b;
    color: #f2f0eb;
    overflow-x: hidden;
}

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

button {
    font-family: inherit;
}


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

.navbar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 90px;

    padding: 0 5vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 1000;

    mix-blend-mode: normal;
}


/* LOGO */

.logo {
    display: flex;
    flex-direction: column;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.logo span {
    margin-top: 5px;

    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.18em;

    opacity: 0.5;
}


/* MENU BUTTON */

.menu-button {
    width: 54px;
    height: 54px;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;

    background: transparent;

    display: flex;
    flex-direction: column;

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

    gap: 6px;

    cursor: pointer;

    transition: 0.3s ease;
}

.menu-button:hover {
    background: #f2f0eb;
}

.menu-button span {
    display: block;

    width: 20px;
    height: 1px;

    background: #f2f0eb;

    transition: 0.3s ease;
}

.menu-button:hover span {
    background: #0b0b0b;
}


/* =================================
   MENU OVERLAY
================================= */

.menu-overlay {
    position: fixed;

    inset: 0;

    background: #0b0b0b;

    z-index: 2000;

    padding: 35px 5vw;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-20px);

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

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* MENU TOP */

.menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 10px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

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

.close-button {
    width: 50px;
    height: 50px;

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

    border-radius: 10px;

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

    color: white;

    font-size: 30px;

    cursor: pointer;

    transition: 0.3s ease;
}

.close-button:hover {
    background: white;
    color: black;
}


/* MENU CONTENT */

.menu-content {
    height: calc(100vh - 120px);

    display: grid;

    grid-template-columns: 1.3fr 1fr;

    align-items: center;

    gap: 10vw;
}


/* MENU LINKS */

.menu-label {
    display: block;

    margin-bottom: 30px;

    font-size: 10px;

    letter-spacing: 0.3em;

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

    text-transform: uppercase;
}

.menu-links a {
    display: flex;

    align-items: baseline;

    gap: 25px;

    width: fit-content;

    margin-bottom: 8px;

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

    font-weight: 600;

    letter-spacing: -0.05em;

    transition: 0.3s ease;
}

.menu-links a small {
    width: 25px;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.1em;

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

    transition: 0.3s ease;
}

.menu-links a:hover {
    transform: translateX(12px);
}

.menu-links a:hover small {
    color: #ffffff;
}


/* SERVICES */

.menu-services {
    align-self: center;

    max-width: 450px;
}

.menu-services > p {
    margin-bottom: 18px;

    font-size: 18px;

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

    transition: 0.3s ease;
}

.menu-services > p:hover {
    color: white;

    transform: translateX(8px);
}


/* CONTACT INSIDE MENU */

.menu-contact {
    margin-top: 70px;

    padding-top: 30px;

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

.menu-contact > a {
    display: inline-block;

    font-size: 20px;

    margin-bottom: 25px;
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    font-size: 12px;

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

    transition: 0.3s ease;
}

.social-links a:hover {
    color: white;
}


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

.hero {
    min-height: 100vh;

    padding: 160px 5vw 70px;

    display: grid;

    grid-template-columns: 1fr 0.85fr;

    align-items: center;

    gap: 7vw;

    position: relative;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(90, 75, 55, 0.25),
            transparent 35%
        ),
        #0b0b0b;
}


/* HERO CONTENT */

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

.hero-label {
    margin-bottom: 35px;

    font-size: 10px;

    letter-spacing: 0.3em;

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

.hero h1 {
    font-size: clamp(55px, 7vw, 105px);

    line-height: 0.92;

    letter-spacing: -0.065em;

    font-weight: 600;

    max-width: 850px;
}

.hero h1 em {
    font-family: Georgia, serif;

    font-weight: 400;

    color: #b7afa3;
}


.hero-description {
    max-width: 500px;

    margin-top: 40px;

    font-size: 17px;

    line-height: 1.6;

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


/* HERO BUTTONS */

.hero-buttons {
    display: flex;

    gap: 15px;

    margin-top: 45px;
}

.button {
    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 16px 22px;

    border-radius: 100px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    transition: 0.3s ease;
}

.button-light {
    background: #f2f0eb;

    color: #0b0b0b;
}

.button-light:hover {
    transform: translateY(-3px);
}

.button-outline {
    border: 1px solid rgba(255,255,255,0.25);
}

.button-outline:hover {
    background: white;

    color: black;
}


/* =================================
   TEMPORARY SECTIONS
================================= */

.placeholder-section {
    min-height: 70vh;

    padding: 120px 5vw;

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

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.placeholder-section span {
    font-size: 12px;

    color: #999;

    margin-bottom: 20px;
}

.placeholder-section h2 {
    font-size: clamp(60px, 9vw, 150px);

    letter-spacing: -0.06em;
}


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

@media (max-width: 800px) {

    .navbar {
        height: 75px;

        padding: 0 6vw;
    }

    .hero {
        grid-template-columns: 1fr;

        padding: 140px 6vw 60px;
    }

    .hero-video {
        width: 100%;

        max-height: none;
    }

    .menu-content {
        grid-template-columns: 1fr;

        overflow-y: auto;

        padding: 50px 0;
    }

    .menu-services {
        display: none;
    }

    .menu-links a {
        font-size: 45px;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

}


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

.services-section {
    padding: 150px 5vw 180px;
    background: #0b0b0b;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.section-number {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.1em;
}

.section-label {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: rgba(255,255,255,0.45);
}

.services-intro {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr;
    gap: 8vw;
    padding: 90px 0 130px;
    align-items: end;
}

.services-intro h2 {
    max-width: 900px;
    font-size: clamp(55px, 7vw, 110px);
    line-height: 0.95;
    letter-spacing: -0.065em;
    font-weight: 500;
}

.services-intro h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: #b7afa3;
}

.services-intro p {
    max-width: 380px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.5);
}

/* SERVICES LIST */

.services-list {
    border-top: 1px solid rgba(255,255,255,0.15);
}

.service-item {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 30px;

    min-height: 130px;
    padding: 25px 40px;

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

    transition:
        padding 0.4s ease,
        background 0.4s ease;
}

.service-number {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.1em;
}

.service-name h3 {
    font-size: clamp(28px, 3.5vw, 55px);
    font-weight: 500;
    letter-spacing: -0.04em;
    transition: transform 0.4s ease;
}

.service-name p {
    margin-top: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.35);
}

.service-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;

    font-size: 18px;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        color 0.4s ease;
}

/* HOVER EFFECT */

/* =========================================
   SERVICE BLUE GLOW HOVER
========================================= */

.service-item:hover {
    padding-left: 20px;
    padding-right: 20px;

    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(100, 190, 255, 0.10),
            transparent 45%
        );

    box-shadow:
        0 0 35px rgba(80, 180, 255, 0.08),
        inset 0 1px 0 rgba(130, 210, 255, 0.15),
        inset 0 -1px 0 rgba(130, 210, 255, 0.15);
}

.service-item:hover .service-name h3 {
    transform: translateX(10px);
    color: #b9e8ff;

    text-shadow:
        0 0 15px rgba(100, 200, 255, 0.35),
        0 0 35px rgba(80, 180, 255, 0.15);
}

.service-item:hover .service-number {
    color: #9127c7;

    text-shadow:
        0 0 12px rgba(80, 190, 255, 0.6);
}

.service-item:hover .service-name p {
    color: #9127c7;;
}

.service-item:hover .service-arrow {
    transform: rotate(45deg);

    background: #b9e8ff;
    color: #071017;

    border-color: #b9e8ff;

    box-shadow:
        0 0 15px rgba(100, 200, 255, 0.5),
        0 0 35px rgba(80, 180, 255, 0.2);
}


/* =========================================
   SERVICES — MOBILE
========================================= */

@media (max-width: 800px) {

    .services-section {
        padding: 100px 6vw 120px;
    }

    .services-intro {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 70px 0 90px;
    }

    .services-intro h2 {
        font-size: clamp(50px, 13vw, 80px);
    }

    .services-intro p {
        max-width: 500px;
    }

    .service-item {
        grid-template-columns: 35px 1fr 45px;
        gap: 15px;
        min-height: 110px;
    }

    .service-name h3 {
        font-size: 28px;
    }

    .service-name p {
        font-size: 9px;
        line-height: 1.5;
    }

    .service-arrow {
        width: 40px;
        height: 40px;
    }

    .service-item:hover {
        padding-left: 10px;
        padding-right: 10px;
    }

}



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

.about-section {
    padding: 150px 5vw 170px;
    background: #0b0b0b;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.about-main {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr;
    gap: 10vw;

    padding: 100px 0 140px;
}

.about-heading h2 {
    max-width: 900px;

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

    font-weight: 500;
    letter-spacing: -0.065em;
}

.about-heading h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: #b7afa3;
}

.about-copy {
    max-width: 420px;
    align-self: end;
}

.about-statement {
    font-size: 20px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.5);
}

.about-copy p {
    margin-bottom: 25px;

    font-size: 14px;
    line-height: 1.75;

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

.about-button {
    display: inline-flex;
    align-items: center;
    gap: 35px;

    margin-top: 25px;
    padding: 15px 20px;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    transition: 0.35s ease;
}

.about-button span {
    font-size: 16px;
}

.about-button:hover {
    background: #f2f0eb;
    color: #0b0b0b;
    transform: translateY(-3px);
}


/* ABOUT DETAILS */

.about-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

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

.about-detail {
    min-height: 190px;
    padding: 30px 25px 30px 0;

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

.about-detail:not(:first-child) {
    padding-left: 25px;
}

.about-detail:last-child {
    border-right: none;
}

.about-detail > span {
    display: block;

    margin-bottom: 45px;

    font-size: 10px;
    color: rgba(255,255,255,0.35);
}

.about-detail h3 {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
}

.about-detail p {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}


/* =========================================
   ABOUT — MOBILE
========================================= */

@media (max-width: 800px) {

    .about-section {
        padding: 100px 6vw 120px;
    }

    .about-main {
        grid-template-columns: 1fr;
        gap: 60px;

        padding: 70px 0 90px;
    }

    .about-heading h2 {
        font-size: clamp(50px, 13vw, 80px);
    }

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

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

    .about-detail {
        min-height: 160px;
    }

    .about-detail:nth-child(2) {
        border-right: none;
    }

    .about-detail:nth-child(3),
    .about-detail:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,0.15);
    }

    .about-detail:nth-child(3) {
        padding-left: 0;
    }

}


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

.process-section {
    padding: 150px 5vw 180px;
    background: #0b0b0b;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.process-intro {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr;
    gap: 10vw;

    padding: 100px 0 120px;

    align-items: end;
}

.process-intro h2 {
    max-width: 850px;

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

    font-weight: 500;
    letter-spacing: -0.065em;
}

.process-intro h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: #b7afa3;
}

.process-intro p {
    max-width: 390px;

    font-size: 14px;
    line-height: 1.7;

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


/* PROCESS LIST */

.process-list {
    border-top: 1px solid rgba(255,255,255,0.15);
}

.process-item {
    position: relative;

    display: grid;
    grid-template-columns: 80px 1fr 60px;
    gap: 30px;

    align-items: center;

    min-height: 170px;
    padding: 30px 0;

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

    transition:
        padding 0.4s ease,
        background 0.4s ease;
}

.process-number {
    align-self: start;

    padding-top: 5px;

    font-size: 11px;
    letter-spacing: 0.1em;

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

    transition: 0.4s ease;
}

.process-content h3 {
    margin-bottom: 8px;

    font-size: clamp(32px, 4vw, 60px);
    line-height: 1;

    font-weight: 500;
    letter-spacing: -0.05em;

    text-transform: capitalize;

    transition: 0.4s ease;
}

.process-content p {
    max-width: 500px;

    font-size: 13px;
    line-height: 1.6;

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

    transition: 0.4s ease;
}

.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;

    font-size: 22px;
    font-weight: 300;

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


/* HOVER */

.process-item:hover {
    padding-left: 20px;
    padding-right: 20px;

    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(100, 190, 255, 0.07),
            transparent 45%
        );
}

.process-item:hover .process-number {
    color: #c379ff;

    text-shadow:
        0 0 12px rgba(162, 80, 255, 0.5);
}

.process-item:hover .process-content h3 {
    color: #c379ff

    transform: translateX(8px);

    text-shadow:
        0 0 15px rgba(100, 200, 255, 0.25);
}

.process-item:hover .process-content p {
    color: ##c379ff;
}

.process-item:hover .process-icon {
    transform: rotate(45deg);

    background: #b9e8ff;
    color: #071017;

    border-color: #b9e8ff;

    box-shadow:
        0 0 15px rgba(100, 200, 255, 0.45),
        0 0 30px rgba(80, 180, 255, 0.15);
}


/* =========================================
   PROCESS — MOBILE
========================================= */

@media (max-width: 800px) {

    .process-section {
        padding: 100px 6vw 120px;
    }

    .process-intro {
        grid-template-columns: 1fr;
        gap: 50px;

        padding: 70px 0 90px;
    }

    .process-intro h2 {
        font-size: clamp(50px, 13vw, 80px);
    }

    .process-item {
        grid-template-columns: 35px 1fr 45px;
        gap: 15px;

        min-height: 150px;
    }

    .process-content h3 {
        font-size: 34px;
    }

    .process-content p {
        font-size: 12px;
        max-width: 90%;
    }

    .process-icon {
        width: 40px;
        height: 40px;
    }

    .process-item:hover {
        padding-left: 10px;
        padding-right: 10px;
    }

}




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

.contact-section {
    padding: 150px 5vw 100px;
    background: #0b0b0b;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.contact-heading {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 10vw;

    padding: 100px 0 90px;

    align-items: end;
}

.contact-heading h2 {
    max-width: 900px;

    font-size: clamp(60px, 8vw, 125px);
    line-height: 0.9;

    font-weight: 500;
    letter-spacing: -0.07em;
}

.contact-heading h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: #b7afa3;
}

.contact-heading p {
    max-width: 300px;

    font-size: 14px;
    line-height: 1.7;

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


/* FORM */

.contact-form-wrapper {
    width: 100%;
    max-width: 900px;

    margin: 80px auto 0;

    padding: 70px 80px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,138,61,0.08),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(14,18,24,0.95),
            rgba(6,8,11,0.98)
        );

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

    border-radius: 4px;

    box-shadow:
        0 30px 100px rgba(0,0,0,0.40),
        inset 0 1px 0 rgba(255,255,255,0.04);

    box-sizing: border-box;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;

    animation: formFadeIn 0.5s ease;
}

@keyframes formFadeIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.form-step-top {
    display: flex;
    justify-content: space-between;

    margin-bottom: 70px;

    font-size: 10px;
    letter-spacing: 0.25em;

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

.form-step h3 {
    max-width: 700px;

    margin-bottom: 60px;

    font-size: clamp(40px, 5vw, 70px);
    line-height: 0.95;

    font-weight: 500;
    letter-spacing: -0.05em;
}

.form-step h3 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: #b7afa3;
}


/* INPUTS */

.input-group {
    margin-bottom: 35px;
}

.input-group label {
    display: block;

    margin-bottom: 12px;

    font-size: 9px;
    letter-spacing: 0.25em;

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

.input-group input,
.input-group textarea {

    width: 100%;

    padding: 18px 0;

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

    background: transparent;

    color: #f2f0eb;

    font-family: inherit;
    font-size: 20px;

    outline: none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.input-group textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.5;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: rgba(255,255,255,0.25);
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: #79cfff;

    box-shadow:
        0 1px 0 #79cfff;
}


/* BUTTONS */

.form-next,
.form-submit {
    display: inline-flex;
    align-items: center;
    gap: 35px;

    margin-top: 20px;

    padding: 17px 23px;

    border: none;
    border-radius: 100px;

    background: #f2f0eb;
    color: #0b0b0b;

    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    cursor: pointer;

    transition: 0.35s ease;
}

.form-next span,
.form-submit span {
    font-size: 17px;
}

.form-next:hover,
.form-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 20px rgba(100,200,255,0.2);
}


/* SERVICE OPTIONS */

.service-options {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 45px;
}

.service-option {
    display: flex;
    align-items: center;
    gap: 18px;

    min-height: 75px;
    padding: 18px 20px;

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

    cursor: pointer;

    transition: 0.3s ease;
}

.service-option input {
    appearance: none;

    width: 16px;
    height: 16px;

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;

    position: relative;
}

.service-option input:checked {
    border-color: #79cfff;
    background: #79cfff;

    box-shadow:
        0 0 12px rgba(100,200,255,0.4);
}

.service-option input:checked::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    background: #071017;

    border-radius: 50%;

    top: 50%;
    left: 50%;

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

.service-option:has(input:checked) {
    border-color: rgba(120,205,255,0.6);

    background:
        rgba(100,190,255,0.05);
}

.service-option:hover {
    border-color: rgba(120,205,255,0.5);
}

.service-option span {
    font-size: 14px;
}


/* NAVIGATION */

.form-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-back {
    border: none;
    background: transparent;

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

    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    cursor: pointer;

    transition: 0.3s ease;
}

.form-back:hover {
    color: white;
}


/* SUCCESS */

.form-success {
    display: none;

    text-align: center;

    padding: 60px 20px;
}

.form-success.active {
    display: block;

    animation: formFadeIn 0.6s ease;
}

.success-number {
    display: flex;

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

    width: 70px;
    height: 70px;

    margin: 0 auto 35px;

    border: 1px solid #79cfff;
    border-radius: 50%;

    color: #79cfff;

    box-shadow:
        0 0 25px rgba(100,200,255,0.2);
}

.form-success h3 {
    margin-bottom: 20px;

    font-size: clamp(50px, 6vw, 90px);
    line-height: 0.9;

    letter-spacing: -0.06em;
}

.form-success h3 em {
    font-family: Georgia, serif;
    font-weight: 400;
    color: #b7afa3;
}

.form-success p {
    color: rgba(255,255,255,0.5);
}


/* CONTACT FOOTER */

.contact-footer {
    display: flex;
    justify-content: space-between;

    padding-top: 60px;
}

.contact-footer > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-footer span {
    font-size: 9px;
    letter-spacing: 0.25em;
    color: rgba(255,255,255,0.35);
}

.contact-footer a {
    font-size: 14px;

    transition: 0.3s ease;
}

.contact-footer a:hover {
    color: #79cfff;
}

.contact-socials {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px;
}


/* =========================================
   CONTACT — MOBILE
========================================= */

@media (max-width: 800px) {

    .contact-section {
        padding: 100px 6vw 70px;
    }

    .contact-heading {
        grid-template-columns: 1fr;
        gap: 40px;

        padding: 70px 0;
    }

    .contact-heading h2 {
        font-size: clamp(55px, 14vw, 90px);
    }

    .contact-form-wrapper {
        padding: 50px 0;
    }

    .form-step-top {
        margin-bottom: 50px;
    }

    .form-step h3 {
        margin-bottom: 45px;
    }

    .service-options {
        grid-template-columns: 1fr;
    }

    .contact-footer {
        flex-direction: column;
        gap: 40px;
    }

}

/* =========================================
   SELECTED WORK
========================================= */

.work-section {
    padding: 150px 5vw 180px;
    background: #0b0b0b;
    border-top: 1px solid rgba(255,255,255,0.1);
}


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

.work-intro {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr;
    gap: 10vw;

    padding: 100px 0 120px;

    align-items: end;
}

.work-intro h2 {
    max-width: 850px;

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

    font-weight: 500;
    letter-spacing: -0.065em;
}

.work-intro h2 em {
    font-family: Georgia, serif;
    font-weight: 400;

    color: #b7afa3;
}

.work-intro p {
    max-width: 390px;

    font-size: 14px;
    line-height: 1.7;

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


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

.reels-grid {
    display: grid;

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

    gap: 25px;
}


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

.reel-card {
    min-width: 0;
}


/* VIDEO */

.reel-video {
    position: relative;

    width: 100%;
    aspect-ratio: 9 / 16;

    overflow: hidden;

    background: #151515;

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

.reel-video video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}


/* DARK OVERLAY */

.reel-video::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.25),
            transparent 30%,
            transparent 65%,
            rgba(0,0,0,0.35)
        );

    pointer-events: none;
}


/* VIDEO HOVER */

.reel-card:hover .reel-video video {
    transform: scale(1.03);

    filter:
        brightness(1.05)
        saturate(1.05);
}


/* =========================================
   VIDEO OVERLAY
========================================= */

.reel-overlay {
    position: absolute;

    top: 18px;
    left: 18px;
    right: 18px;

    display: flex;

    justify-content: space-between;

    z-index: 2;

    font-size: 9px;

    letter-spacing: 0.2em;

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

    pointer-events: none;
}

.reel-card:hover .reel-overlay {
    color: #b9e8ff;
}


/* =========================================
   REEL INFO
========================================= */

.reel-info {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    padding: 22px 0;

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

.reel-info > div {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.reel-number {
    font-size: 9px;

    letter-spacing: 0.15em;

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

.reel-info h3 {
    font-size: 18px;

    font-weight: 500;

    letter-spacing: -0.02em;

    transition: 0.3s ease;
}

.reel-category {
    padding-top: 3px;

    font-size: 9px;

    letter-spacing: 0.18em;

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

    text-align: right;
}

.reel-card:hover .reel-info h3 {
    color: #b9e8ff;
}

.reel-card:hover .reel-number {
    color: #79cfff;
}


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

@media (max-width: 800px) {

    .work-section {
        padding: 100px 6vw 120px;
    }

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

        gap: 45px;

        padding: 70px 0 80px;
    }

    .work-intro h2 {
        font-size: clamp(50px, 13vw, 80px);
    }

    .work-intro p {
        max-width: 500px;
    }


    /* One reel per row */

    .reels-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .reel-video {
        width: 100%;

        max-width: 430px;

        margin: 0 auto;
    }


    .reel-info {
        max-width: 430px;

        margin: 0 auto;
    }

}





/* =========================================================
   MAVEN EDITS — PURPLE / WHITE / GREY THEME
   ========================================================= */

/* ---------------------------------------------------------
   01 — MAVEN COLOR SYSTEM
   --------------------------------------------------------- */

:root {
    --purple: #7C3AED;
    --purple-light: #A78BFA;
    --purple-soft: #EDE9FE;

    --black: #0B0B0D;
    --dark: #17171A;
    --dark-blue: #1F1F23;

    --white: #FAFAFA;
    --gray: #E9E9EC;
    --light-gray: #F4F4F5;

    --text-dark: #111114;
    --text-muted: #66666F;

    /* Remap old blue variables to purple */
    --blue: #7C3AED;
    --blue-light: #A78BFA;
    --cyan: #A78BFA;

    --blue-soft: rgba(124, 58, 237, 0.10);
    --blue-glow: rgba(124, 58, 237, 0.18);
    --cyan-glow: rgba(167, 139, 250, 0.16);

    --border: rgba(17, 17, 20, 0.10);
    --blue-border: rgba(124, 58, 237, 0.30);

    --surface: rgba(255,255,255,0.75);
    --surface-blue: rgba(124,58,237,0.05);
    --surface-hover: rgba(124,58,237,0.08);

    --muted: #66666F;
    --dim: #8A8A93;
}


/* ---------------------------------------------------------
   02 — GLOBAL
   --------------------------------------------------------- */

html {
    background: var(--white);
}

body {
    background: var(--white);
    color: var(--text-dark);
}


/* ---------------------------------------------------------
   03 — NAVBAR
   --------------------------------------------------------- */

.navbar {
    background: rgba(250,250,250,0.82);
    border-bottom: 1px solid rgba(17,17,20,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.logo {
    color: var(--text-dark);
}

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

.menu-button span {
    background: var(--text-dark);
}


/* ---------------------------------------------------------
   04 — FULL SCREEN MENU
   --------------------------------------------------------- */

.menu-overlay {
    background: #0B0B0D;
}

.menu-top {
    color: rgba(255,255,255,0.55);
}

.menu-label {
    color: rgba(255,255,255,0.35);
}

.menu-links a {
    color: var(--white);
}

.menu-links a:hover {
    color: var(--purple-light);
}

.menu-links a small {
    color: var(--purple-light);
}

.menu-services p {
    color: rgba(255,255,255,0.70);
}

.menu-services p:hover {
    color: var(--purple-light);
}

.menu-contact a {
    color: var(--purple-light);
}

.social-links a:hover {
    color: var(--purple-light);
}


/* ---------------------------------------------------------
   05 — HERO
   --------------------------------------------------------- */

.hero {
    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(124,58,237,0.10),
            transparent 32%
        ),
        var(--white);
    color: var(--text-dark);
}

.hero h1 {
    color: var(--text-dark);
}

.hero h1 em {
    color: var(--purple);
}

.hero p {
    color: var(--text-muted);
}

.hero .hero-label,
.hero .section-label {
    color: var(--purple);
}

.hero a {
    color: var(--text-dark);
}

.hero a:hover {
    color: var(--purple);
}


/* ---------------------------------------------------------
   06 — SECTION HEADERS
   --------------------------------------------------------- */

.section-header {
    border-bottom-color: rgba(17,17,20,0.12);
}

.section-number {
    color: var(--purple);
}

.section-label {
    color: var(--text-muted);
}


/* ---------------------------------------------------------
   07 — SERVICES
   SOFT GREY SECTION
   --------------------------------------------------------- */

.services-section {
    background: var(--light-gray);
    color: var(--text-dark);
    border-top-color: rgba(17,17,20,0.08);
}

.services-intro h2 {
    color: var(--text-dark);
}

.services-intro h2 em {
    color: var(--purple);
}

.services-intro p {
    color: var(--text-muted);
}

.service-item {
    background: rgba(255,255,255,0.78);
    border-color: rgba(17,17,20,0.10);
}

.service-item:hover {
    background: #FFFFFF;
    border-color: rgba(124,58,237,0.35);
    box-shadow:
        0 20px 60px rgba(124,58,237,0.08);
    transform: translateX(8px);
}

.service-number {
    color: var(--purple);
}

.service-name h3 {
    color: var(--text-dark);
}

.service-name p {
    color: var(--text-muted);
}

.service-arrow {
    color: var(--text-muted);
}

.service-item:hover .service-arrow {
    color: var(--purple);
}


/* ---------------------------------------------------------
   08 — WORK
   DARK CINEMATIC SECTION
   --------------------------------------------------------- */

.work-section {
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(124,58,237,0.15),
            transparent 35%
        ),
        #0B0B0D;
    color: var(--white);
    border-top-color: rgba(255,255,255,0.08);
}

.work-section .section-header {
    border-bottom-color: rgba(255,255,255,0.10);
}

.work-section .section-label {
    color: rgba(255,255,255,0.45);
}

.work-intro h2 {
    color: var(--white);
}

.work-intro h2 em {
    color: var(--purple-light);
}

.work-intro p {
    color: rgba(255,255,255,0.50);
}


/* ---------------------------------------------------------
   09 — REEL CAROUSEL
   PURPLE ACCENTS
   --------------------------------------------------------- */

.reels-stage {
    filter: drop-shadow(
        0 30px 70px rgba(124,58,237,0.08)
    );
}

.reel-slide .reel-video {
    background: #17171A;
    border-color: rgba(255,255,255,0.08);
}

.reel-slide.active .reel-video {
    box-shadow:
        0 30px 80px rgba(0,0,0,0.45),
        0 0 45px rgba(124,58,237,0.12);
}

.reel-slide.prev,
.reel-slide.next {
    opacity: 0.45;
}

.reel-overlay {
    color: rgba(255,255,255,0.65);
}

.reel-number {
    color: var(--purple-light);
}

.reel-info h3 {
    color: var(--white);
}

.reel-category {
    color: rgba(255,255,255,0.38);
}

.reel-slide:hover .reel-info h3 {
    color: var(--purple-light);
}

.reel-slide:hover .reel-number {
    color: var(--purple-light);
}


/* PLAY BUTTON */

.reel-play {
    background: rgba(11,11,13,0.65);
    border-color: rgba(255,255,255,0.25);
    color: white;
    box-shadow:
        0 0 0 1px rgba(124,58,237,0.20),
        0 0 35px rgba(124,58,237,0.18);
}

.reel-play:hover {
    background: var(--purple);
    border-color: var(--purple);
    box-shadow:
        0 0 35px rgba(124,58,237,0.40);
}


/* CAROUSEL ARROWS */

.reel-nav {
    color: rgba(255,255,255,0.60);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
}

.reel-nav:hover {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
    box-shadow:
        0 0 30px rgba(124,58,237,0.25);
}


/* ---------------------------------------------------------
   10 — ABOUT
   WHITE SECTION
   --------------------------------------------------------- */

.about-section {
    background: var(--white);
    color: var(--text-dark);
    border-top-color: rgba(17,17,20,0.08);
}

.about-heading h2 {
    color: var(--text-dark);
}

.about-heading h2 em {
    color: var(--purple);
}

.about-copy {
    color: var(--text-muted);
}

.about-statement {
    color: var(--text-dark);
}

.about-button {
    color: var(--text-dark);
    border-color: rgba(17,17,20,0.15);
}

.about-button:hover {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
    box-shadow:
        0 15px 40px rgba(124,58,237,0.18);
}

.about-detail {
    border-top-color: rgba(17,17,20,0.10);
}

.about-detail span {
    color: var(--purple);
}

.about-detail h3 {
    color: var(--text-dark);
}

.about-detail p {
    color: var(--text-muted);
}


/* ---------------------------------------------------------
   11 — PROCESS
   SOFT GREY SECTION
   --------------------------------------------------------- */

.process-section {
    background: var(--light-gray);
    color: var(--text-dark);
    border-top-color: rgba(17,17,20,0.08);
}

.process-intro h2 {
    color: var(--text-dark);
}

.process-intro h2 em {
    color: var(--purple);
}

.process-intro p {
    color: var(--text-muted);
}

.process-item {
    background: rgba(255,255,255,0.72);
    border-color: rgba(17,17,20,0.10);
}

.process-item:hover {
    background: white;
    border-color: rgba(124,58,237,0.30);
    box-shadow:
        0 20px 50px rgba(124,58,237,0.08);
}

.process-number {
    color: var(--purple);
}

.process-content h3 {
    color: var(--text-dark);
}

.process-content p {
    color: var(--text-muted);
}

.process-icon {
    color: var(--purple);
}


/* ---------------------------------------------------------
   12 — CONTACT
   DARK SECTION
   --------------------------------------------------------- */

.contact-section {
    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(124,58,237,0.15),
            transparent 35%
        ),
        #0B0B0D;
    color: var(--white);
    border-top-color: rgba(255,255,255,0.08);
}

.contact-section .section-label {
    color: rgba(255,255,255,0.45);
}

.contact-heading h2 {
    color: var(--white);
}

.contact-heading h2 em {
    color: var(--purple-light);
}

.contact-heading p {
    color: rgba(255,255,255,0.50);
}


/* ---------------------------------------------------------
   13 — CONTACT FORM
   --------------------------------------------------------- */

.contact-form-wrapper {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.10);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.25);
}

.form-step-top {
    color: rgba(255,255,255,0.40);
}

.form-step h3 {
    color: var(--white);
}

.form-step h3 em {
    color: var(--purple-light);
}

.input-group label {
    color: rgba(255,255,255,0.45);
}

.input-group input,
.input-group textarea {
    color: white;
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.12);
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: rgba(124,58,237,0.60);
    box-shadow:
        0 0 0 3px rgba(124,58,237,0.10);
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: rgba(255,255,255,0.28);
}


/* ---------------------------------------------------------
   14 — SERVICE OPTIONS
   --------------------------------------------------------- */

.service-option {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.10);
}

.service-option:hover {
    background: rgba(124,58,237,0.07);
    border-color: rgba(124,58,237,0.35);
}

.service-option span {
    color: rgba(255,255,255,0.72);
}

.service-option:has(input:checked) {
    background: rgba(124,58,237,0.12);
    border-color: var(--purple);
}

.service-option:has(input:checked) span {
    color: var(--purple-light);
}

.service-option input:checked {
    accent-color: var(--purple);
}


/* ---------------------------------------------------------
   15 — FORM BUTTONS
   --------------------------------------------------------- */

.form-next,
.form-submit {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
    box-shadow:
        0 15px 35px rgba(124,58,237,0.20);
}

.form-next:hover,
.form-submit:hover {
    background: #6D28D9;
    box-shadow:
        0 20px 45px rgba(124,58,237,0.30);
    transform: translateY(-3px);
}

.form-back {
    color: rgba(255,255,255,0.50);
}

.form-back:hover {
    color: var(--purple-light);
}


/* ---------------------------------------------------------
   16 — SUCCESS STATE
   --------------------------------------------------------- */

.success-number {
    color: var(--purple-light);
    border-color: var(--purple);
    box-shadow:
        0 0 30px rgba(124,58,237,0.20);
}

.form-success h3 {
    color: white;
}

.form-success h3 em {
    color: var(--purple-light);
}

.form-success p {
    color: rgba(255,255,255,0.50);
}


/* ---------------------------------------------------------
   17 — CONTACT FOOTER
   --------------------------------------------------------- */

.contact-footer {
    border-top-color: rgba(255,255,255,0.10);
}

.contact-footer > div > span {
    color: rgba(255,255,255,0.35);
}

.contact-footer a {
    color: rgba(255,255,255,0.70);
}

.contact-footer a:hover {
    color: var(--purple-light);
}


/* ---------------------------------------------------------
   18 — SITE FOOTER
   --------------------------------------------------------- */

.site-footer {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(124,58,237,0.16),
            transparent 35%
        ),
        #0B0B0D;
    color: white;
}

.footer-statement h2 {
    color: white;
}

.footer-statement h2 em {
    color: var(--purple-light);
    text-shadow:
        0 0 35px rgba(124,58,237,0.18);
}

.footer-cta:hover {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
    box-shadow:
        0 0 30px rgba(124,58,237,0.30);
}

.footer-column a:hover {
    color: var(--purple-light);
}

.footer-bottom a:hover {
    color: var(--purple-light);
}


/* ---------------------------------------------------------
   19 — PURPLE DETAILS
   --------------------------------------------------------- */

a:hover {
    transition: 0.3s ease;
}

::selection {
    background: var(--purple);
    color: white;
}


/* ---------------------------------------------------------
   20 — MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    body {
        background: var(--white);
    }

    .services-section,
    .process-section {
        background: var(--light-gray);
    }

    .work-section,
    .contact-section,
    .site-footer {
        background: #0B0B0D;
    }

    .service-item:hover {
        transform: none;
    }

    .process-item:hover {
        transform: none;
    }

    .contact-form-wrapper {
        background: rgba(255,255,255,0.035);
    }

    .reels-stage {
        filter: none;
    }
}



/* =========================================================
   REELS — CINEMATIC CAROUSEL
========================================================= */

.reels-carousel {

    position: relative;

    width: 100%;

    margin-top: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ---------------------------------------------------------
   STAGE
--------------------------------------------------------- */

.reels-stage {

    position: relative;

    width: min(100%, 1100px);

    height: 720px;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 1200px;

}


/* ---------------------------------------------------------
   SLIDES
--------------------------------------------------------- */

.reel-slide {

    position: absolute;

    width: 340px;

    transition:
        transform 0.65s cubic-bezier(.22,.61,.36,1),
        opacity 0.5s ease,
        filter 0.5s ease;

    transform-style: preserve-3d;

    opacity: 0;

    pointer-events: none;

}


/* ---------------------------------------------------------
   CENTER
--------------------------------------------------------- */

.reel-slide.active {

    transform:
        translateX(0)
        translateZ(100px)
        scale(1);

    opacity: 1;

    z-index: 5;

    pointer-events: auto;

}


/* ---------------------------------------------------------
   LEFT
--------------------------------------------------------- */

.reel-slide.prev {

    transform:
        translateX(-390px)
        translateZ(-120px)
        rotateY(10deg)
        scale(0.82);

    opacity: 0.55;

    z-index: 2;

    pointer-events: auto;

    cursor: pointer;

}


/* ---------------------------------------------------------
   RIGHT
--------------------------------------------------------- */

.reel-slide.next {

    transform:
        translateX(390px)
        translateZ(-120px)
        rotateY(-10deg)
        scale(0.82);

    opacity: 0.55;

    z-index: 2;

    pointer-events: auto;

    cursor: pointer;

}


/* ---------------------------------------------------------
   HIDDEN
--------------------------------------------------------- */

.reel-slide.hidden {

    opacity: 0;

    transform:
        translateX(0)
        translateZ(-300px)
        scale(0.65);

    z-index: 0;

    pointer-events: none;

}


/* ---------------------------------------------------------
   VIDEO CARD
--------------------------------------------------------- */

.reel-slide .reel-video {

    position: relative;

    width: 100%;

    aspect-ratio: 9 / 16;

    overflow: hidden;

    border-radius: 22px;

    background:

        linear-gradient(
            145deg,
            #0a1018,
            #020304
        );

    border:
        1px solid
        rgba(80,170,255,0.22);

    box-shadow:

        0 30px 80px
        rgba(0,0,0,0.55),

        inset 0 1px 0
        rgba(255,255,255,0.06);

}


/* CENTER GLOW */

.reel-slide.active .reel-video {

    border-color:
        rgba(90,190,255,0.55);

    box-shadow:

        0 0 60px
        rgba(35,130,255,0.13),

        0 35px 90px
        rgba(0,0,0,0.60),

        inset 0 1px 0
        rgba(130,220,255,0.10);

}


/* ---------------------------------------------------------
   VIDEO
--------------------------------------------------------- */

.reel-slide video {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* Dark overlay */

.reel-slide .reel-video::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to bottom,
            rgba(0,0,0,0.15),
            transparent 35%,
            transparent 65%,
            rgba(0,0,0,0.45)
        );

    pointer-events: none;

}


/* ---------------------------------------------------------
   PLAY BUTTON
--------------------------------------------------------- */

.reel-play {

    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 68px;
    height: 68px;

    border-radius: 50%;

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

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

    color:
        #020304;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left:
        4px;

    font-size:
        17px;

    cursor: pointer;

    z-index: 5;

    box-shadow:

        0 0 0 7px
        rgba(100,180,255,0.08),

        0 0 35px
        rgba(60,160,255,0.28);

    transition:
        0.35s ease;

}


.reel-play:hover {

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

    background:
        #ffffff;

    box-shadow:

        0 0 0 9px
        rgba(100,180,255,0.10),

        0 0 50px
        rgba(60,180,255,0.45);

}


/* ---------------------------------------------------------
   OVERLAY LABELS
--------------------------------------------------------- */

.reel-overlay {

    position: absolute;

    top: 20px;

    left: 20px;

    right: 20px;

    display: flex;

    justify-content: space-between;

    z-index: 4;

    font-size:
        9px;

    letter-spacing:
        0.2em;

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

    pointer-events:
        none;

}


/* ---------------------------------------------------------
   REEL INFO
--------------------------------------------------------- */

.reel-slide .reel-info {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    padding:
        22px 2px;

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

}


.reel-slide .reel-info > div {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.reel-slide .reel-number {

    font-size:
        9px;

    letter-spacing:
        0.15em;

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

}


.reel-slide .reel-info h3 {

    font-size:
        17px;

    font-weight:
        500;

    letter-spacing:
        -0.02em;

}


.reel-slide .reel-category {

    padding-top:
        3px;

    font-size:
        8px;

    letter-spacing:
        0.18em;

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

    text-align:
        right;

}


/* ---------------------------------------------------------
   NAVIGATION ARROWS
--------------------------------------------------------- */

.reel-nav {

    position: relative;

    z-index: 10;

    width: 54px;

    height: 54px;

    flex-shrink: 0;

    border-radius: 50%;

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

    background:
        rgba(5,10,16,0.75);

    backdrop-filter:
        blur(12px);

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

    font-size:
        22px;

    cursor:
        pointer;

    transition:
        0.35s ease;

}


.reel-nav:hover {

    background:
        rgba(20,130,220,0.18);

    border-color:
        rgba(70,190,255,0.65);

    color:
        #5edcff;

    box-shadow:
        0 0 25px
        rgba(20,130,255,0.20);

    transform:
        scale(1.08);

}


.reel-prev {

    margin-right:
        35px;

}


.reel-next {

    margin-left:
        35px;

}


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

@media (max-width: 900px) {

    .reels-stage {

        height:
            650px;

    }

    .reel-slide {

        width:
            280px;

    }

    .reel-slide.prev {

        transform:
            translateX(-230px)
            translateZ(-100px)
            rotateY(8deg)
            scale(0.78);

        opacity:
            0.35;

    }

    .reel-slide.next {

        transform:
            translateX(230px)
            translateZ(-100px)
            rotateY(-8deg)
            scale(0.78);

        opacity:
            0.35;

    }

    .reel-prev {

        margin-right:
            5px;

    }

    .reel-next {

        margin-left:
            5px;

    }

}


@media (max-width: 650px) {

    .reels-carousel {

        padding:
            0 5vw;

    }

    .reels-stage {

        height:
            610px;

        width:
            100%;

    }

    .reel-slide {

        width:
            min(72vw, 300px);

    }

    .reel-slide.prev {

        transform:
            translateX(-105px)
            translateZ(-100px)
            rotateY(6deg)
            scale(0.78);

        opacity:
            0.18;

    }

    .reel-slide.next {

        transform:
            translateX(105px)
            translateZ(-100px)
            rotateY(-6deg)
            scale(0.78);

        opacity:
            0.18;

    }

    .reel-nav {

        position:
            absolute;

        top:
            42%;

        width:
            45px;

        height:
            45px;

        font-size:
            18px;

    }

    .reel-prev {

        left:
            0;

    }

    .reel-next {

        right:
            0;

    }

}





/* =========================================================
   MAVEN EDITS — FINAL COLOR + READABILITY CLEANUP
   ========================================================= */

/* ---------- BRAND COLORS ---------- */

:root {
    --purple: #7C3AED;
    --purple-light: #A78BFA;
    --purple-soft: #EDE9FE;

    --black: #0B0B0D;
    --dark: #17171A;

    --white: #FAFAFA;
    --gray: #E9E9EC;
    --light-gray: #F4F4F5;

    --text-dark: #111114;
    --text-muted: #66666F;
}


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

html {
    background: var(--white);
}

body {
    background: var(--white);
    color: var(--text-dark);
}


/* =========================================================
   LIGHT SECTIONS — MAKE EVERYTHING READABLE
   ========================================================= */

.services-section,
.about-section,
.process-section {
    color: var(--text-dark);
}


/* section labels */

.services-section .section-label,
.about-section .section-label,
.process-section .section-label {
    color: var(--text-muted);
}

.services-section .section-number,
.about-section .section-number,
.process-section .section-number {
    color: var(--purple);
}


/* headings */

.services-intro h2,
.about-heading h2,
.process-intro h2 {
    color: var(--text-dark);
}

.services-intro h2 em,
.about-heading h2 em,
.process-intro h2 em {
    color: var(--purple);
}


/* paragraphs */

.services-intro p,
.about-copy p,
.process-intro p,
.service-name p,
.about-detail p,
.process-content p {
    color: var(--text-muted);
}


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

.services-section {
    background: var(--light-gray);
}

.service-item {
    background: rgba(255,255,255,0.82);
    border-color: rgba(17,17,20,0.10);
}

.service-item:hover {
    background: #FFFFFF;
    border-color: rgba(124,58,237,0.35);
    box-shadow: 0 20px 60px rgba(124,58,237,0.08);
}

.service-number {
    color: var(--purple);
}

.service-name h3 {
    color: var(--text-dark);
}

.service-arrow {
    color: var(--text-muted);
}


/* OLD BLUE SERVICE HOVERS → PURPLE */

.service-item:hover .service-name h3 {
    color: var(--purple);
    text-shadow: none;
}

.service-item:hover .service-number {
    color: var(--purple);
    text-shadow: none;
}

.service-item:hover .service-arrow {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
    box-shadow: 0 0 20px rgba(124,58,237,0.25);
}


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

.about-section {
    background: var(--white);
    border-top-color: rgba(17,17,20,0.08);
}

.about-heading h2 {
    color: var(--text-dark);
}

.about-heading h2 em {
    color: var(--purple);
}

.about-statement {
    color: var(--text-dark);
}

.about-copy {
    color: var(--text-muted);
}

.about-detail {
    border-top-color: rgba(17,17,20,0.10);
}

.about-detail span {
    color: var(--purple);
}

.about-detail h3 {
    color: var(--text-dark);
}

.about-detail p {
    color: var(--text-muted);
}

.about-button {
    color: var(--text-dark);
    border-color: rgba(17,17,20,0.15);
}

.about-button:hover {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 15px 40px rgba(124,58,237,0.18);
}


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

.process-section {
    background: var(--light-gray);
}

.process-item {
    background: rgba(255,255,255,0.82);
    border-color: rgba(17,17,20,0.10);
}

.process-item:hover {
    background: #FFFFFF;
    border-color: rgba(124,58,237,0.30);
    box-shadow: 0 20px 50px rgba(124,58,237,0.08);
}

.process-number {
    color: var(--purple);
}

.process-content h3 {
    color: var(--text-dark);
}

.process-content p {
    color: var(--text-muted);
}

.process-icon {
    color: var(--purple);
}


/* OLD BLUE PROCESS HOVERS → PURPLE */

.process-item:hover .process-content h3 {
    color: var(--purple);
    text-shadow: none;
}

.process-item:hover .process-number {
    color: var(--purple);
    text-shadow: none;
}

.process-item:hover .process-icon {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
    box-shadow: 0 0 20px rgba(124,58,237,0.25);
}


/* =========================================================
   WORK — DARK SECTION
   ========================================================= */

.work-section {
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(124,58,237,0.14),
            transparent 35%
        ),
        #0B0B0D;

    color: var(--white);
}

.work-section .section-label {
    color: rgba(255,255,255,0.45);
}

.work-section .section-number {
    color: var(--purple-light);
}

.work-intro h2 {
    color: white;
}

.work-intro h2 em {
    color: var(--purple-light);
}

.work-intro p {
    color: rgba(255,255,255,0.55);
}


/* =========================================================
   REEL CAROUSEL
   ========================================================= */

.reel-slide .reel-video {
    background: #17171A;
    border-color: rgba(255,255,255,0.08);
}

.reel-slide .reel-number {
    color: var(--purple-light);
}

.reel-slide .reel-info h3 {
    color: white;
}

.reel-slide .reel-category {
    color: rgba(255,255,255,0.40);
}

.reel-slide:hover .reel-info h3 {
    color: var(--purple-light);
}

.reel-slide:hover .reel-number {
    color: var(--purple-light);
}


/* PLAY BUTTON */

.reel-play {
    background: rgba(11,11,13,0.70);
    border-color: rgba(255,255,255,0.25);
    color: white;

    box-shadow:
        0 0 0 1px rgba(124,58,237,0.20),
        0 0 35px rgba(124,58,237,0.18);
}

.reel-play:hover {
    background: var(--purple);
    border-color: var(--purple);
    box-shadow: 0 0 35px rgba(124,58,237,0.40);
}


/* ARROWS */

.reel-nav {
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
}

.reel-nav:hover {
    color: white;
    background: var(--purple);
    border-color: var(--purple);
}


/* =========================================================
   CONTACT — DARK
   ========================================================= */

.contact-section {
    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(124,58,237,0.15),
            transparent 35%
        ),
        #0B0B0D;

    color: white;
}

.contact-section .section-number {
    color: var(--purple-light);
}

.contact-section .section-label {
    color: rgba(255,255,255,0.45);
}

.contact-heading h2 {
    color: white;
}

.contact-heading h2 em {
    color: var(--purple-light);
}

.contact-heading p {
    color: rgba(255,255,255,0.50);
}


/* FORM */

.contact-form-wrapper {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.10);
}

.form-step h3 {
    color: white;
}

.form-step h3 em {
    color: var(--purple-light);
}

.form-step-top {
    color: rgba(255,255,255,0.40);
}

.input-group label {
    color: rgba(255,255,255,0.45);
}

.input-group input,
.input-group textarea {
    color: white;
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.12);
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: rgba(255,255,255,0.30);
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: rgba(124,58,237,0.60);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.10);
}


/* SERVICE OPTIONS */

.service-option {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.10);
}

.service-option:hover {
    background: rgba(124,58,237,0.07);
    border-color: rgba(124,58,237,0.35);
}

.service-option span {
    color: rgba(255,255,255,0.72);
}

.service-option:has(input:checked) {
    background: rgba(124,58,237,0.12);
    border-color: var(--purple);
}

.service-option:has(input:checked) span {
    color: var(--purple-light);
}

.service-option input:checked {
    accent-color: var(--purple);
}


/* FORM BUTTONS */

.form-next,
.form-submit {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
}

.form-next:hover,
.form-submit:hover {
    background: #6D28D9;
    border-color: #6D28D9;
}


/* BACK BUTTON */

.form-back {
    color: rgba(255,255,255,0.50);
}

.form-back:hover {
    color: var(--purple-light);
}


/* SUCCESS */

.success-number {
    color: var(--purple-light);
    border-color: var(--purple);
}

.form-success h3 {
    color: white;
}

.form-success h3 em {
    color: var(--purple-light);
}

.form-success p {
    color: rgba(255,255,255,0.50);
}


/* CONTACT FOOTER */

.contact-footer {
    border-top-color: rgba(255,255,255,0.10);
}

.contact-footer > div > span {
    color: rgba(255,255,255,0.35);
}

.contact-footer a {
    color: rgba(255,255,255,0.70);
}

.contact-footer a:hover {
    color: var(--purple-light);
}


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

.site-footer {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(124,58,237,0.15),
            transparent 35%
        ),
        #0B0B0D;

    color: white;
}

.footer-statement h2 {
    color: white;
}

.footer-statement h2 em {
    color: var(--purple-light);
}

.footer-cta:hover {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
}

.footer-column a:hover,
.footer-bottom a:hover {
    color: var(--purple-light);
}


/* =========================================================
   REMOVE OLD BLUE SUCCESS / FORM COLORS
   ========================================================= */

.form-success .success-number {
    border-color: var(--purple);
    color: var(--purple-light);
}

.contact-footer a:hover {
    color: var(--purple-light);
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background: var(--purple);
    color: white;
}


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

@media (max-width: 800px) {

    body {
        background: var(--white);
    }

    .services-section,
    .process-section {
        background: var(--light-gray);
    }

    .about-section {
        background: var(--white);
    }

    .work-section,
    .contact-section,
    .site-footer {
        background: #0B0B0D;
    }

    .service-item:hover,
    .process-item:hover {
        transform: none;
    }

    .reels-stage {
        filter: none;
    }
}




/* =========================================================
   ABOUT — READABILITY FIX
   ========================================================= */

.about-section .about-statement {
    color: #111114;
    opacity: 1;
}

.about-section .about-copy p {
    color: #66666F;
    opacity: 1;
}

.about-section .about-heading h2 {
    color: #111114;
}

.about-section .about-heading h2 em {
    color: #7C3AED;
}



/* =========================================================
   REEL CAROUSEL — PURPLE ONLY
   ========================================================= */

.work-section .reel-slide .reel-video {
    border-color: rgba(255,255,255,0.10);
    background: #17171A;
}

.work-section .reel-slide.active .reel-video {
    box-shadow:
        0 30px 80px rgba(0,0,0,0.45),
        0 0 45px rgba(124,58,237,0.15);
}


/* Reel number */

.work-section .reel-slide .reel-number {
    color: #A78BFA;
}


/* Reel title */

.work-section .reel-slide .reel-info h3 {
    color: #FAFAFA;
}

.work-section .reel-slide:hover .reel-info h3 {
    color: #A78BFA;
}


/* Category */

.work-section .reel-slide .reel-category {
    color: rgba(255,255,255,0.40);
}


/* Overlay */

.work-section .reel-slide .reel-overlay {
    color: rgba(255,255,255,0.65);
}

.work-section .reel-slide:hover .reel-overlay {
    color: #A78BFA;
}


/* Play button */

.work-section .reel-play {
    background: rgba(11,11,13,0.72);
    border: 1px solid rgba(255,255,255,0.25);
    color: #FFFFFF;

    box-shadow:
        0 0 0 1px rgba(124,58,237,0.20),
        0 0 35px rgba(124,58,237,0.18);
}

.work-section .reel-play:hover {
    background: #7C3AED;
    border-color: #7C3AED;
    color: white;

    box-shadow:
        0 0 35px rgba(124,58,237,0.40);
}


/* Arrows */

.work-section .reel-nav {
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.15);
}

.work-section .reel-nav:hover {
    color: #FFFFFF;
    background: #7C3AED;
    border-color: #7C3AED;

    box-shadow:
        0 0 30px rgba(124,58,237,0.25);
}


/* Reel side cards */

.work-section .reel-slide.prev,
.work-section .reel-slide.next {
    opacity: 0.45;
}


/* Reel info divider */

.work-section .reel-slide .reel-info {
    border-bottom-color: rgba(255,255,255,0.12);
}


/* =========================================
   PROCESS — BETTER NUMBER SPACING
========================================= */

.process-item {
    padding-left: 40px;
    padding-right: 40px;
}

.process-item:hover {
    padding-left: 50px;
    padding-right: 50px;
}


/* =========================================
   CONTACT INPUTS — CLEANER SPACING
========================================= */

.contact-form-wrapper .input-group input,
.contact-form-wrapper .input-group textarea {
    padding: 14px 18px;
    box-sizing: border-box;
}


/* =========================================
   MAVEN EDITS — CIRCLE CURSOR
========================================= */

.custom-cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    border: 1px solid #7C3AED;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;

    left: 0;
    top: 0;

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

    opacity: 0;

    transition:
        width 0.25s ease,
        height 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        opacity 0.2s ease;
}

/* When hovering something clickable */

.custom-cursor.hover {
    width: 50px;
    height: 50px;
    background: rgba(124, 58, 237, 0.08);
    border-color: #A78BFA;
}

/* Hide normal mouse cursor */

@media (min-width: 769px) {
    body,
    a,
    button,
    input,
    textarea,
    select {
        cursor: none !important;
    }
}

/* Don't use custom cursor on phones */

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


/* =========================================
   MAVEN EDITS — CURSOR DOT
========================================= */

.cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    background: #7C3AED;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    
    left: 0;
    top: 0;
    
    transform: translate(-50%, -50%);
    
    opacity: 0;
    
    transition:
        width 0.2s ease,
        height 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;
}

.cursor-dot.hover {
    width: 8px;
    height: 8px;
}