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

:root {

    --black: #05050a;
    --black-soft: #080b17;

    --surface: #0d1120;
    --surface-2: #12182a;

    --white: #f7f8fc;
    --text-soft: #9da6bb;

    --cyan: #00e5ff;
    --blue: #3186ff;
    --violet: #7c3aed;
    --magenta: #ff3d8d;

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

    --container: 1380px;

}



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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: auto;

}


body {

    width: 100%;

    min-height: 100%;

    overflow-x: hidden;

    color: var(--white);

    background: var(--black);

    font-family:
        "Manrope",
        sans-serif;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    border: 0;

    color: inherit;

    font: inherit;

    cursor: pointer;

}


img {

    display: block;

    width: 100%;

}


::selection {

    color: #000;

    background: var(--cyan);

}



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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    height: 82px;

    display: flex;

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

    padding:

        0
        clamp(24px, 5vw, 80px);

    opacity: 0;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(5,5,10,.90),
            rgba(5,5,10,0)
        );

}


.site-header.is-visible {

    pointer-events: auto;

}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.brand-name {

    font-size: 14px;

    font-weight: 800;

}


.brand-name strong {

    color: var(--cyan);

}



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

.brand-lens {

    position: relative;

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border:

        1px solid
        rgba(0,229,255,.65);

    border-radius: 50%;

    box-shadow:

        0 0 25px
        rgba(0,229,255,.14);

}


.brand-lens::before {

    content: "";

    position: absolute;

    width: 19px;
    height: 19px;

    border:

        1px solid
        rgba(124,58,237,.7);

    border-radius: 50%;

}


.brand-lens span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:

        0 0 14px
        var(--cyan);

}



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

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 32px;

}


.desktop-nav a {

    color: var(--text-soft);

    font-size: 11px;

    transition:
        color .3s ease;

}


.desktop-nav a:hover {

    color: var(--white);

}


.header-cta {

    padding:

        11px
        19px;

    border:

        1px solid
        var(--border);

    border-radius: 999px;

    background:

        rgba(255,255,255,.03);

    font-size: 11px;

}



/* =========================================================
   BUTTONS
========================================================= */

.button {

    display: inline-flex;

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

    min-height: 52px;

    padding:

        0
        25px;

    border-radius: 12px;

    font-size: 13px;

    font-weight: 700;

    transition:

        transform .4s
        cubic-bezier(.16,1,.3,1),

        box-shadow .4s ease,

        border-color .4s ease;

}


.button:hover {

    transform:
        translateY(-3px);

}


.button-primary {

    color: #02050a;

    background:

        linear-gradient(
            120deg,
            var(--cyan),
            #59a3ff
        );

    box-shadow:

        0 18px 50px
        rgba(0,229,255,.16);

}


.button-secondary {

    border:

        1px solid
        var(--border);

    background:

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

}



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

.intro-shell {

    position: relative;

    width: 100%;

    background: var(--black);

}


.intro-stage {

    position: relative;

    width: 100%;

    height: 100svh;

    overflow: hidden;

    background: var(--black);

}



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

.hero-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 85% 18%,
            rgba(124,58,237,.17),
            transparent 31%
        ),

        radial-gradient(
            circle at 5% 85%,
            rgba(0,229,255,.14),
            transparent 34%
        ),

        radial-gradient(
            circle at 48% 110%,
            rgba(255,61,141,.06),
            transparent 34%
        ),

        #05050a;

}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .13;

    background-image:

        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),

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

    background-size:

        70px
        70px;

    mask-image:

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

}


.hero-glow {

    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    filter:
        blur(130px);

    pointer-events: none;

}


.hero-glow-one {

    right: -270px;

    top: -250px;

    background:

        rgba(124,58,237,.22);

}


.hero-glow-two {

    left: -320px;

    bottom: -330px;

    background:

        rgba(0,229,255,.14);

}


.hero-glow-three {

    left: 40%;

    bottom: -500px;

    background:

        rgba(255,61,141,.07);

}



/* =========================================================
   INTRO THREE CANVAS
========================================================= */

.intro-three-canvas {

    position: absolute;

    inset: 0;

    z-index: 12;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;

    will-change:
        opacity,
        filter;

}



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

.intro-wordmark {

    position: absolute;

    z-index: 15;

    left: 50%;

    top: 50%;

    display: flex;

    align-items: center;

    transform:

        translate(
            30px,
            -50%
        );

    font-size:

        clamp(
            30px,
            4vw,
            58px
        );

    font-weight: 800;

    letter-spacing: -.055em;

    line-height: 1;

    white-space: nowrap;

    pointer-events: none;

    will-change:

        transform,
        opacity,
        filter;

}


.intro-word {

    color: transparent;

    -webkit-text-fill-color:
        transparent;

    -webkit-text-stroke:

        1.7px
        rgba(255,255,255,.96);

}


.intro-word-frame {

    -webkit-text-stroke:

        1.8px
        rgba(0,229,255,.98);

    filter:

        drop-shadow(
            0 0 10px
            rgba(0,229,255,.13)
        );

}



/* =========================================================
   INTRO TRAVEL COPY
========================================================= */

.intro-travel-copy {

    position: absolute;

    z-index: 16;

    left: 50%;

    top: 50%;

    width:

        min(
            500px,
            calc(100% - 48px)
        );

    transform:

        translate(
            -50%,
            -50%
        );

    text-align: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.intro-travel-copy span {

    color:
        var(--cyan);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .28em;

}


.intro-travel-copy p {

    margin-top: 13px;

    color:
        var(--text-soft);

    font-size:

        clamp(
            16px,
            2vw,
            23px
        );

}



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

.intro-hint {

    position: absolute;

    z-index: 20;

    left: 50%;

    bottom: 44px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 14px;

}


.intro-hint > span {

    color:
        var(--text-soft);

    font-size: 8px;

    letter-spacing: .3em;

}


.intro-hint > div {

    width: 80px;

    height: 1px;

    overflow: hidden;

    background:

        rgba(255,255,255,.13);

}


.intro-hint > div span {

    display: block;

    width: 30%;
    height: 100%;

    background:
        var(--cyan);

    animation:

        scrollLine
        1.8s
        ease-in-out
        infinite;

}


@keyframes scrollLine {

    from {

        transform:
            translateX(-130%);

    }

    to {

        transform:
            translateX(330%);

    }

}



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

.intro-progress {

    position: absolute;

    z-index: 20;

    right: 30px;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


.intro-progress > span {

    color:
        var(--text-soft);

    font-size: 8px;

    letter-spacing: .14em;

}


.intro-progress-track {

    position: relative;

    width: 2px;

    height: 130px;

    overflow: hidden;

    background:

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

}


.intro-progress-fill {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transform:
        scaleY(0);

    transform-origin:
        top;

    background:

        linear-gradient(
            to bottom,
            var(--cyan),
            var(--violet),
            var(--magenta)
        );

}



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

.hero-content {

    position: absolute;

    z-index: 8;

    left: 50%;

    top: 50%;

    width:

        min(
            calc(100% - 48px),
            1200px
        );

    transform:

        translate(-50%, -50%)
        scale(.96);

    text-align: center;

    opacity: 0;

    visibility: hidden;

}


.hero-eyebrow {

    display: flex;

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

    gap: 12px;

    margin-bottom: 26px;

    color:
        var(--text-soft);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .25em;

}


.hero-eyebrow span {

    width: 34px;

    height: 1px;

    background:
        var(--cyan);

}


.hero-content h1 {

    max-width: 1100px;

    margin: auto;

    font-size:

        clamp(
            55px,
            7vw,
            108px
        );

    line-height: .96;

    letter-spacing: -.065em;

    font-weight: 600;

}


.hero-content h1 strong {

    display: block;

    margin-top: 12px;

    color: transparent;

    background:

        linear-gradient(
            90deg,
            var(--cyan),
            #5d88ff,
            var(--violet),
            var(--magenta)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

}


.hero-content > p {

    max-width: 690px;

    margin:

        30px
        auto
        32px;

    color:
        var(--text-soft);

    font-size: 14px;

    line-height: 1.8;

}


.hero-actions {

    display: flex;

    justify-content: center;

    gap: 12px;

}


.hero-meta {

    width:

        min(
            100%,
            680px
        );

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    margin:

        55px
        auto
        0;

    padding-top: 21px;

    border-top:

        1px solid
        var(--border);

}


.hero-meta div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.hero-meta strong {

    font-size: 9px;

    letter-spacing: .2em;

}


.hero-meta span {

    color:
        var(--text-soft);

    font-size: 10px;

}



/* =========================================================
   EXPERIENCE
========================================================= */

.experience-section {

    position: relative;

    width: 100%;

    background:
        var(--black);

}


.experience-stage {

    position: relative;

    width: 100%;

    height: 100svh;

    overflow: hidden;

    background:
        var(--black);

}


.experience-background {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at center,
            #10182c,
            #080b15 38%,
            #05050a 73%
        );

}


.experience-grid {

    position: absolute;

    inset: 0;

    opacity: .13;

    background-image:

        linear-gradient(
            rgba(0,229,255,.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,229,255,.12) 1px,
            transparent 1px
        );

    background-size:

        82px
        82px;

    mask-image:

        radial-gradient(
            circle,
            black,
            transparent 76%
        );

}


.experience-vignette {

    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;

    box-shadow:

        inset 0 0 220px
        rgba(0,0,0,.9);

}


.experience-light {

    position: absolute;

    z-index: 2;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    filter:
        blur(130px);

}


.experience-light-one {

    left: -320px;

    top: 25%;

    background:

        rgba(0,229,255,.15);

}


.experience-light-two {

    right: -330px;

    top: 5%;

    background:

        rgba(124,58,237,.17);

}


.experience-light-three {

    right: 20%;

    bottom: -480px;

    background:

        rgba(255,61,141,.12);

}


.three-canvas {

    position: absolute;

    inset: 0;

    z-index: 4;

    width: 100%;
    height: 100%;

    display: block;

}



/* =========================================================
   EXPERIENCE TEXT
========================================================= */

.scene-content {

    position: absolute;

    z-index: 20;

    width:

        min(
            470px,
            calc(100% - 48px)
        );

}


.scene-kicker {

    display: block;

    margin-bottom: 17px;

    color:
        var(--cyan);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .25em;

}


.scene-content h2 {

    font-size:

        clamp(
            38px,
            5vw,
            70px
        );

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 600;

}


.scene-content h2 strong {

    color:
        var(--cyan);

}


.scene-content p {

    margin-top: 20px;

    color:
        var(--text-soft);

    font-size: 14px;

    line-height: 1.8;

}


.scene-intro {

    left: 8%;

    top: 50%;

    transform:
        translateY(-50%);

}


.scene-step {

    opacity: 0;

    visibility: hidden;

}


.scene-index {

    position: absolute;

    top: -80px;

    left: -5px;

    color:

        rgba(255,255,255,.07);

    font-size: 80px;

    font-weight: 800;

}


.scene-tech {

    display: block;

    margin-top: 25px;

    padding-top: 14px;

    border-top:

        1px solid
        var(--border);

    color:
        var(--text-soft);

    font-size: 8px;

    letter-spacing: .25em;

}


.scene-audio {

    left: 8%;

    top: 53%;

}


.scene-video {

    right: 8%;

    top: 26%;

}


.scene-photo {

    left: 8%;

    bottom: 15%;

}


.scene-final {

    left: 50%;

    top: 50%;

    width:

        min(
            850px,
            calc(100% - 48px)
        );

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

    text-align: center;

    opacity: 0;

    visibility: hidden;

}


.scene-final h2 {

    font-size:

        clamp(
            50px,
            7vw,
            105px
        );

}


.scene-final h2 span,
.scene-final h2 strong {

    display: block;

}


.scene-final h2 span {

    color:
        var(--violet);

}


.scene-final h2 strong {

    color:
        var(--magenta);

}


.scene-final p {

    max-width: 600px;

    margin:

        25px
        auto
        30px;

}



/* =========================================================
   EXPERIENCE STATUS
========================================================= */

.experience-status {

    position: absolute;

    z-index: 25;

    left: 28px;

    top: 50%;

    transform:

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

    display: flex;

    align-items: center;

    gap: 14px;

}


.experience-status span {

    color:
        var(--text-soft);

    font-size: 8px;

    letter-spacing: .22em;

}


.experience-status div {

    width: 55px;

    height: 1px;

    background:
        var(--border);

}



/* =========================================================
   EXPERIENCE PROGRESS
========================================================= */

.experience-progress {

    position: absolute;

    z-index: 25;

    right: 30px;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


.experience-progress > span {

    color:
        var(--text-soft);

    font-size: 8px;

}


.experience-progress-track {

    position: relative;

    width: 2px;

    height: 150px;

    overflow: hidden;

    background:

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

}


.experience-progress-fill {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    transform:
        scaleY(0);

    transform-origin:
        top;

    background:

        linear-gradient(
            to bottom,
            var(--cyan),
            var(--violet),
            var(--magenta)
        );

}


.experience-scroll {

    position: absolute;

    z-index: 25;

    left: 50%;

    bottom: 24px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 14px;

}


.experience-scroll > span {

    color:
        var(--text-soft);

    font-size: 8px;

    letter-spacing: .2em;

}


.experience-scroll > div {

    width: 80px;

    height: 1px;

    overflow: hidden;

    background:

        rgba(255,255,255,.13);

}


.experience-scroll > div span {

    display: block;

    width: 30%;
    height: 100%;

    background:
        var(--cyan);

    animation:

        scrollLine
        1.8s
        ease-in-out
        infinite;

}



/* =========================================================
   GENERAL
========================================================= */

.section-container {

    width:

        min(
            calc(100% - 48px),
            var(--container)
        );

    margin: auto;

}


.section-heading {

    display: grid;

    grid-template-columns:

        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    align-items: end;

    gap: 70px;

}


.section-eyebrow {

    display: block;

    margin-bottom: 22px;

    color:
        var(--cyan);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .25em;

}


.section-heading h2 {

    font-size:

        clamp(
            45px,
            6vw,
            82px
        );

    line-height: .97;

    letter-spacing: -.055em;

}


.section-heading h2 strong {

    display: block;

    color:
        var(--text-soft);

}


.section-heading > p {

    color:
        var(--text-soft);

    font-size: 14px;

    line-height: 1.8;

}



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

.services-section {

    padding:

        150px
        0;

    background:

        linear-gradient(
            180deg,
            #05050a,
            #080b17
        );

}


.services-grid {

    display: grid;

    grid-template-columns:

        repeat(4, 1fr);

    gap: 16px;

    margin-top: 75px;

}


.service-card {

    position: relative;

    min-height: 430px;

    padding: 30px;

    overflow: hidden;

    border:

        1px solid
        var(--border);

    border-radius: 22px;

    background:

        linear-gradient(
            150deg,
            rgba(18,24,42,.72),
            rgba(7,9,18,.75)
        );

    transition:

        transform .5s
        cubic-bezier(.16,1,.3,1),

        border-color .4s ease;

}


.service-card:hover {

    transform:
        translateY(-10px);

    border-color:

        rgba(0,229,255,.35);

}


.service-number {

    color:
        var(--text-soft);

    font-size: 9px;

}


.service-symbol {

    margin-top: 60px;

    color:
        var(--cyan);

    font-size: 55px;

}


.service-card:nth-child(2)
.service-symbol {

    color:
        var(--violet);

}


.service-card:nth-child(3)
.service-symbol {

    color:
        var(--magenta);

}


.service-card h3 {

    margin-top: 35px;

    font-size: 24px;

}


.service-card p {

    margin-top: 14px;

    color:
        var(--text-soft);

    font-size: 13px;

    line-height: 1.7;

}


.service-tags {

    position: absolute;

    left: 30px;
    right: 30px;

    bottom: 28px;

    display: flex;

    gap: 7px;

    flex-wrap: wrap;

}


.service-tags span {

    padding:

        7px
        10px;

    border:

        1px solid
        var(--border);

    border-radius: 999px;

    color:
        var(--text-soft);

    font-size: 8px;

}



/* =========================================================
   SHOWREEL
========================================================= */

.showreel-section {

    padding:

        130px
        24px;

    background:
        #080b17;

}


.showreel-copy {

    width:

        min(
            100%,
            var(--container)
        );

    margin:

        0 auto
        40px;

}


.showreel-copy span {

    color:
        var(--cyan);

    font-size: 9px;

    letter-spacing: .2em;

}


.showreel-copy h2 {

    margin-top: 12px;

    font-size:

        clamp(
            40px,
            5vw,
            70px
        );

    letter-spacing: -.05em;

}


.showreel-frame {

    position: relative;

    width:

        min(
            100%,
            var(--container)
        );

    height:

        min(
            70vw,
            720px
        );

    min-height: 470px;

    margin: auto;

    overflow: hidden;

    border:

        1px solid
        var(--border);

    border-radius: 28px;

    background:
        #070914;

}


.showreel-background {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(124,58,237,.38),
            transparent 25%
        ),

        radial-gradient(
            circle at 25% 75%,
            rgba(0,229,255,.20),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(255,61,141,.18),
            transparent 30%
        );

}


.showreel-play {

    position: absolute;

    z-index: 6;

    left: 50%;
    top: 50%;

    width: 110px;
    height: 110px;

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

    border:

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

    border-radius: 50%;

    background:

        rgba(5,5,10,.25);

    backdrop-filter:
        blur(14px);

    font-size: 26px;

}


.showreel-lines {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 420px;
    height: 420px;

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

    border:

        1px solid
        rgba(0,229,255,.14);

    border-radius: 50%;

}


.showreel-lines::before,
.showreel-lines::after {

    content: "";

    position: absolute;

    inset: 50px;

    border:

        1px solid
        rgba(124,58,237,.2);

    border-radius: 50%;

}


.showreel-lines::after {

    inset: 100px;

    border-color:

        rgba(255,61,141,.17);

}


.showreel-info {

    position: absolute;

    left: 35px;
    bottom: 35px;

    z-index: 5;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.showreel-info span {

    color:
        var(--cyan);

    font-size: 8px;

    letter-spacing: .2em;

}


.showreel-info strong {

    font-size: 16px;

}


.showreel-info small {

    color:
        var(--text-soft);

}



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

.portfolio-section {

    padding:

        150px
        0;

    background:
        var(--black);

}


.portfolio-grid {

    display: grid;

    grid-template-columns:

        1.35fr
        .65fr;

    gap: 20px;

    margin-top: 75px;

}


.project-large {

    grid-row:
        span 2;

}


.project-image {

    position: relative;

    min-height: 350px;

    overflow: hidden;

    border-radius: 22px;

}


.project-large
.project-image {

    min-height: 720px;

}


.project-image img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:

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

}


.project-card:hover
.project-image img {

    transform:
        scale(1.05);

}


.project-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 28px;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.25),
            transparent 45%,
            rgba(0,0,0,.45)
        );

}


.project-overlay span {

    font-size: 8px;

    letter-spacing: .2em;

}


.project-overlay strong {

    align-self: flex-end;

    font-size: 95px;

    opacity: .15;

}


.project-info {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding:

        20px
        3px;

}


.project-info div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.project-info span {

    color:
        var(--text-soft);

    font-size: 8px;

    letter-spacing: .16em;

}


.project-info h3 {

    font-size: 19px;

}



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

.gallery-section {

    padding:

        150px
        0;

    background:

        linear-gradient(
            180deg,
            #05050a,
            #080b17
        );

}


.photo-collage {

    display: grid;

    grid-template-columns:

        repeat(12, 1fr);

    grid-auto-rows:
        150px;

    gap: 14px;

    margin-top: 75px;

}


.collage-item {

    position: relative;

    grid-column:
        span 4;

    grid-row:
        span 2;

    overflow: hidden;

    border:

        1px solid
        var(--border);

    border-radius: 20px;

}


.collage-main {

    grid-column:
        span 7;

    grid-row:
        span 4;

}


.collage-tall {

    grid-column:
        span 5;

    grid-row:
        span 4;

}


.collage-wide {

    grid-column:
        span 8;

    grid-row:
        span 2;

}


.collage-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:

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

}


.collage-item:hover img {

    transform:
        scale(1.07);

}


.collage-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.8),
            transparent 55%
        );

}


.collage-item figcaption {

    position: absolute;

    z-index: 3;

    left: 22px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.collage-item figcaption span {

    color:
        var(--cyan);

    font-size: 8px;

    letter-spacing: .18em;

}


.collage-item figcaption strong {

    font-size: 18px;

}


.gallery-note {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    margin-top: 30px;

    padding-top: 22px;

    border-top:

        1px solid
        var(--border);

}


.gallery-note span {

    color:
        var(--cyan);

    font-size: 8px;

    letter-spacing: .2em;

}


.gallery-note p {

    max-width: 600px;

    color:
        var(--text-soft);

    font-size: 12px;

}



/* =========================================================
   VIDEO PROJECTS
========================================================= */

.video-projects-section {

    padding:

        150px
        0;

    background:
        #080b17;

}


.video-projects-grid {

    display: grid;

    grid-template-columns:

        1.35fr
        .65fr;

    gap: 20px;

    margin-top: 75px;

}


.video-project-large {

    grid-row:
        span 2;

}


.video-project-poster {

    position: relative;

    min-height: 320px;

    overflow: hidden;

    border:

        1px solid
        var(--border);

    border-radius: 22px;

}


.video-project-large
.video-project-poster {

    min-height: 690px;

}


.poster-one {

    background:

        radial-gradient(
            circle at 60% 40%,
            rgba(0,229,255,.35),
            transparent 25%
        ),

        radial-gradient(
            circle at 30% 70%,
            rgba(124,58,237,.30),
            transparent 30%
        ),

        #080d19;

}


.poster-two {

    background:

        radial-gradient(
            circle at center,
            rgba(255,61,141,.35),
            transparent 30%
        ),

        #110710;

}


.poster-three {

    background:

        radial-gradient(
            circle at center,
            rgba(124,58,237,.40),
            transparent 28%
        ),

        #080713;

}


.video-category {

    position: absolute;

    left: 25px;

    top: 25px;

    font-size: 8px;

    letter-spacing: .2em;

}


.video-play {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 80px;
    height: 80px;

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

    border:

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

    border-radius: 50%;

    background:

        rgba(0,0,0,.18);

    backdrop-filter:
        blur(12px);

}


.video-project-number {

    position: absolute;

    right: 20px;
    bottom: 10px;

    font-size: 80px;

    font-weight: 800;

    opacity: .1;

}


.video-project-copy {

    display: flex;

    justify-content: space-between;

    padding:

        18px
        2px;

}


.video-project-copy div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.video-project-copy span,
.video-project-copy small {

    color:
        var(--text-soft);

    font-size: 8px;

    letter-spacing: .14em;

}


.video-project-copy h3 {

    font-size: 18px;

}



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

.process-section {

    padding:

        140px
        0;

    background:
        var(--black);

}


.process-grid {

    display: grid;

    grid-template-columns:

        repeat(4, 1fr);

    margin-top: 75px;

    border-top:

        1px solid
        var(--border);

}


.process-grid article {

    min-height: 270px;

    padding:

        28px
        25px;

    border-right:

        1px solid
        var(--border);

}


.process-grid article:last-child {

    border-right: 0;

}


.process-grid article > span {

    color:
        var(--cyan);

    font-size: 9px;

}


.process-grid h3 {

    margin-top: 70px;

    font-size: 23px;

}


.process-grid p {

    margin-top: 13px;

    color:
        var(--text-soft);

    font-size: 13px;

    line-height: 1.7;

}



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

.contact-section {

    position: relative;

    min-height: 100svh;

    display: flex;

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

    overflow: hidden;

    padding:

        100px
        24px;

    text-align: center;

    background:
        #05050a;

}


.contact-glow {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 850px;
    height: 850px;

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

    border-radius: 50%;

    filter:
        blur(140px);

    background:

        radial-gradient(
            circle,
            rgba(124,58,237,.18),
            rgba(0,229,255,.08),
            transparent 70%
        );

}


.contact-content {

    position: relative;

    z-index: 2;

    width:

        min(
            900px,
            100%
        );

}


.contact-content h2 {

    font-size:

        clamp(
            50px,
            7vw,
            100px
        );

    line-height: .95;

    letter-spacing: -.065em;

}


.contact-content h2 strong {

    display: block;

    color: transparent;

    background:

        linear-gradient(
            90deg,
            var(--cyan),
            var(--violet),
            var(--magenta)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

}


.contact-content p {

    max-width: 580px;

    margin:

        28px
        auto
        32px;

    color:
        var(--text-soft);

    line-height: 1.8;

}


.example-data {

    display: block;

    margin-top: 20px;

    color:
        var(--text-soft);

}



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

.site-footer {

    border-top:

        1px solid
        var(--border);

    background:
        #040409;

}


.footer-container {

    width:

        min(
            calc(100% - 48px),
            var(--container)
        );

    margin: auto;

}


.footer-top {

    display: grid;

    grid-template-columns:

        1.5fr
        .65fr
        .65fr
        .8fr;

    gap: 60px;

    padding:

        85px
        0;

}


.footer-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 17px;

    font-weight: 800;

}


.footer-logo strong {

    color:
        var(--cyan);

}


.footer-brand-column > p {

    max-width: 430px;

    margin-top: 22px;

    color:
        var(--text-soft);

    font-size: 13px;

    line-height: 1.8;

}


.footer-socials {

    display: flex;

    gap: 9px;

    margin-top: 28px;

}


.footer-socials a {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:

        1px solid
        var(--border);

    border-radius: 50%;

    color:
        var(--text-soft);

    font-size: 9px;

}


.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;

}


.footer-heading {

    margin-bottom: 10px;

    color:
        var(--cyan);

    font-size: 8px;

    letter-spacing: .22em;

}


.footer-column a {

    color:
        var(--text-soft);

    font-size: 12px;

    transition:
        color .3s ease;

}


.footer-column a:hover {

    color:
        var(--white);

}


.footer-example {

    color: #687187;

    font-size: 9px;

}


.footer-button {

    margin-top: 12px;

    padding:

        11px
        15px;

    border:

        1px solid
        var(--border);

    border-radius: 999px;

}


.footer-bottom {

    min-height: 72px;

    display: flex;

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

    gap: 20px;

    border-top:

        1px solid
        var(--border);

    color: #697287;

    font-size: 8px;

    letter-spacing: .15em;

}



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

@media (max-width: 1050px) {

    .services-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }


    .section-heading {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .process-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }


    .footer-top {

        grid-template-columns:

            repeat(2, 1fr);

    }

}



@media (max-width: 850px) {

    .desktop-nav {

        display: none;

    }


    .intro-wordmark {

        font-size:

            clamp(
                27px,
                7vw,
                42px
            );

        transform:

            translate(
                -5px,
                85px
            );

    }


    .intro-progress {

        right: 14px;

    }


    .hero-content h1 {

        font-size:

            clamp(
                48px,
                12vw,
                76px
            );

    }


    .scene-content {

        left: 24px !important;

        right: auto !important;

        top: auto !important;

        bottom: 14% !important;

        transform: none;

        width:

            calc(
                100% - 75px
            );

    }


    .scene-intro {

        top: 20% !important;

        bottom: auto !important;

    }


    .scene-final {

        left: 50% !important;

        top: 50% !important;

        bottom: auto !important;

        transform:

            translate(
                -50%,
                -50%
            );

    }


    .experience-status {

        display: none;

    }


    .portfolio-grid,
    .video-projects-grid {

        grid-template-columns:
            1fr;

    }


    .project-large,
    .video-project-large {

        grid-row:
            auto;

    }


    .project-large
    .project-image {

        min-height: 500px;

    }


    .video-project-large
    .video-project-poster {

        min-height: 500px;

    }


    .photo-collage {

        grid-template-columns:

            repeat(2, 1fr);

        grid-auto-rows:
            260px;

    }


    .collage-item,
    .collage-main,
    .collage-tall,
    .collage-wide {

        grid-column:
            span 1;

        grid-row:
            span 1;

    }


    .collage-main {

        grid-column:
            span 2;

    }

}



@media (max-width: 620px) {

    .site-header {

        height: 70px;

        padding:

            0
            18px;

    }


    .header-cta {

        display: none;

    }


    .intro-wordmark {

        left: 50%;

        top: 62%;

        transform:

            translate(
                -50%,
                0
            );

        font-size:

            clamp(
                22px,
                8vw,
                31px
            );

    }


    .intro-progress {

        display: none;

    }


    .intro-hint {

        flex-direction:
            column;

    }


    .hero-content {

        width:

            calc(
                100% - 36px
            );

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .hero-actions .button {

        width: 100%;

    }


    .hero-meta {

        grid-template-columns:
            1fr;

        gap: 9px;

    }


    .hero-meta div {

        padding:
            7px 0;

        border-bottom:

            1px solid
            var(--border);

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .service-card {

        min-height: 360px;

    }


    .photo-collage {

        grid-template-columns:
            1fr;

    }


    .collage-main {

        grid-column:
            span 1;

    }


    .gallery-note {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .process-grid {

        grid-template-columns:
            1fr;

    }


    .process-grid article {

        border-right: 0;

        border-bottom:

            1px solid
            var(--border);

    }


    .footer-top {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .footer-bottom {

        flex-direction:
            column;

        justify-content:
            center;

        padding:

            25px
            0;

        text-align:
            center;

    }

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    * {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}