/* =========================================================
   NOVA STUDIO — RESPONSIVE
   Desktop styles remain in style.css
========================================================= */


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

@media (max-width: 768px) {

    /* HEADER */

    .site-header {
        height: 72px;
        padding: 0 20px;

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

        background: rgba(3, 7, 12, .94);

        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }


    /* LOGO */

    .site-header .logo {
        position: relative;
        z-index: 1002;

        flex: 0 0 auto;
    }

    .site-header .logo img {
        width: 175px;
        height: auto;
    }


    /* HIDE DESKTOP CTA */

    .site-header .header-cta {
        display: none;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .site-header .menu-toggle {
        position: relative;
        z-index: 1002;

        display: block;

        width: 44px;
        height: 44px;

        margin: 0;
        padding: 0;

        border: 0;
        background: transparent;

        cursor: pointer;
    }


    .site-header .menu-toggle span {
        position: absolute;

        left: 9px;

        display: block;

        width: 26px;
        height: 2px;

        background: #fff;
        border-radius: 10px;

        transform-origin: center;

        transition:
            top .3s ease,
            transform .3s ease,
            opacity .2s ease;
    }


    .site-header .menu-toggle span:nth-child(1) {
        top: 13px;
    }

    .site-header .menu-toggle span:nth-child(2) {
        top: 21px;
    }

    .site-header .menu-toggle span:nth-child(3) {
        top: 29px;
    }


    /* HAMBURGER → X */

    .site-header .menu-toggle.is-open span:nth-child(1) {
        top: 21px;
        transform: rotate(45deg);
    }

    .site-header .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .site-header .menu-toggle.is-open span:nth-child(3) {
        top: 21px;
        transform: rotate(-45deg);
    }


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

    .site-header .main-nav {
        position: fixed;

        top: 0;
        left: 0;

        z-index: 1001;

        width: 100%;
        height: 100vh;
        height: 100dvh;

        box-sizing: border-box;

        margin: 0;
        padding: 125px 28px 40px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 0;

        background:
            radial-gradient(
                circle at 85% 20%,
                rgba(40, 100, 255, .17),
                transparent 32%
            ),
            #03070c;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-15px);

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .35s ease;
    }


    /* OPEN MENU */

    body.menu-open .site-header .main-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }


    /* LINKS */

    .site-header .main-nav__link {
        position: relative;

        width: 100%;

        box-sizing: border-box;

        padding: 17px 0;

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

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

        font-size: 20px;
        line-height: 1;

        font-weight: 500;
        letter-spacing: -.04em;

        text-decoration: none;
    }


    .site-header .main-nav__link.active {
        color: #fff;
    }


    /* remove desktop underline */

    .site-header .main-nav__link::after {
        display: none;
    }


    /* active blue detail */

    .site-header .main-nav__link.active::before {
        content: "";

        position: absolute;

        left: 0;
        bottom: -1px;

        width: 42px;
        height: 2px;

        background: #2864ff;

        box-shadow:
            0 0 10px rgba(40,100,255,.55);
    }


    /* PREVENT PAGE SCROLL WHEN MENU IS OPEN */

    body.menu-open {
        overflow: hidden;
    }

}
 
/* =========================================================
   MOBILE — PROJECTS FINAL TUNING
========================================================= */

@media (max-width: 768px) {

    .projects__heading-row {
        position: relative;
    }

    /* SLIDER ARROWS */

    .projects__controls {
        position: absolute;
        right: 0px;
        bottom: -54px;
        z-index: 120;
        display: flex;
        gap: 10px;
    }

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

        width: 48px;
        height: 48px;

        opacity: 1;
        visibility: visible;

        border-radius: 50%;
    }


    /* PROJECT STAGE */

    .projects__stage {
        position: relative;

        display: flex;
        flex-direction: column;

        height: auto;
        min-height: 510px;

        padding: 70px 24px 25px;

        box-sizing: border-box;
    }


    /* INFO */

    .project-info {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        z-index: 10;

        width: 100%;

        margin: 0;

        transform: none;
    }

    .project-info__title {
        margin-bottom: 8px;
    }

    .project-info__type {
        display: block;
        margin-bottom: 28px;
    }

    .project-info__meta {
        margin-bottom: 20px;
    }

    .project-info__button {
        position: relative;
        z-index: 15;
    }


    /* LAPTOP */

    .project-device {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: auto;

        margin: 30px 0 0;

        transform: none;
    }

    .project-device__image {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        display: block;

        width: 115%;
        max-width: none;
        height: auto;

        margin-left: -7.5%;

        transform: none;
    }


    /* SIDE PREVIEWS */

    .project-peek {
        display: none;
    }

}
/* =========================================================
   MOBILE — FINAL CTA TUNING
========================================================= */

@media (max-width: 768px) {

    .final-cta {
        height: 650px;
        min-height: 650px;
    }

    .final-cta__container {
        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0 20px;

        box-sizing: border-box;
    }

    /*
     * OFFICE / ARCHITECTURE CIRCLE
     */

    .final-cta__visual {
        right: -65px;

        width: 245px;
        height: 245px;
    }

    .final-cta__visual img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

}
/* =========================================================
   MOBILE — FOOTER
========================================================= */

@media (max-width: 768px) {

    .footer {
        width: 100% ;
        height: auto ;
        min-height: 0 ;

        box-sizing: border-box ;

        padding: 42px 24px 38px ;

        display: flex ;
        flex-direction: column ;
        align-items: flex-start ;

        gap: 32px ;

        overflow: hidden ;

        background: #05080b ;
    }


    /* LOGO */

    .footer .logo {
        display: block ;

        width: auto ;

        margin: 0 ;
        padding: 0 ;
    }

    .footer .logo img {
        display: block ;

        width: 175px ;
        max-width: 100% ;
        height: auto ;
    }


    /* NAVIGATION */

    .footer nav {
        width: 100% ;

        margin: 0 ;
        padding: 0 ;

        display: grid ;

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

        column-gap: 28px ;
        row-gap: 0 ;
    }


    .footer nav a {
        display: block ;

        width: auto ;

        box-sizing: border-box ;

        margin: 0 ;
        padding: 14px 0 ;

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

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

        font-size: 11px ;
        line-height: 1.2 ;
        font-weight: 600 ;

        text-decoration: none ;
    }


    .footer nav a:hover {
        color: #fff ;
    }

}
/* =========================================================
   MOBILE — HERO FINAL LAYOUT
========================================================= */

@media (max-width: 768px) {

    .hero {
        position: relative;

        width: 100%;
        height: calc(100svh - 72px);
        min-height: 700px;

        margin-top: 72px;
        padding: 0;

        overflow: hidden;
    }


    /* =========================
       BACKGROUND / SPHERE
    ========================= */

    .hero-visual {
        position: absolute;
        top: 335px;
        right: -42px;
        left: auto;
        width: 515px;
        height: 390px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }


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

    .hero-kicker {
        position: absolute ;

        top: 95px ;
        left: 24px ;

        z-index: 5 ;

        width: auto ;
        margin: 0 ;

        font-size: 16px ;
        line-height: 1.25 ;
    }


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

    .hero h1 {
        position: absolute;
        top: 215px;
        left: 24px;
        z-index: 6;
        width: calc(100% - 48px);
        max-width: none;
        margin: 0;
        font-size: clamp(42px, 11vw, 58px);
        line-height: .88;
        letter-spacing: -.055em;
    }

    .hero h1 span,
    .hero h1 strong {
        max-width: 100% ;
    }


    /* =========================
       WATCH VIDEO
    ========================= */

    .play {
        position: absolute ;

        top: 500px ;
        right: 24px ;
        left: auto ;

        z-index: 10 ;

        transform: none ;
    }


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

    .hero-disciplines {
        position: absolute ;

        right: 24px ;
        bottom: 52px ;
        left: auto ;
        top: auto ;

        z-index: 10 ;

        width: 120px ;

        margin: 0 ;

        font-size: 16px ;
        line-height: 1.35 ;
    }


    /* =========================
       SCROLL / MORE
    ========================= */

    .scroll-link {
        position: absolute ;

        left: 24px ;
        bottom: 48px ;
        top: auto ;

        z-index: 10 ;

        margin: 0 ;
    }

}
/* =========================================================
   MOBILE — PROJECTS FINAL COMPOSITION
========================================================= */

@media (max-width: 768px) {

    /* SECTION TOP */

    .projects {
        overflow: hidden ;
    }

    .projects__container {
        width: 100% ;
        max-width: none ;

        margin: 0 ;
        padding: 55px 24px 0 ;

        box-sizing: border-box ;
    }

    .projects__top {
        display: block ;
        margin: 0 0 48px ;
    }

    .projects__label {
        display: flex ;
        align-items: center ;

        gap: 16px ;

        margin-bottom: 25px ;
    }

    .projects__number {
        font-size: 14px ;
    }

    .projects__eyebrow {
        font-size: 14px ;
    }

    .projects__intro {
        width: 100% ;
        max-width: 270px ;

        margin: 0 ;

        font-size: 14px ;
        line-height: 1.5 ;
    }


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

    .projects__heading-row {
        position: relative ;

        display: block ;

        margin: 0 ;
        padding-bottom: 85px ;
    }

    .projects__heading {
        width: 100% ;

        margin: 0 ;

        font-size: clamp(48px, 13.5vw, 60px) ;
        line-height: .91 ;
        letter-spacing: -.055em ;
    }


    /* =========================
       ARROWS
    ========================= */

    .projects__controls {
        position: absolute ;

        right: 0 ;
        bottom: 18px ;

        display: flex ;

        gap: 10px ;

        z-index: 20 ;
    }

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

        width: 48px ;
        height: 48px ;

        margin: 0 ;
    }


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

    .projects__stage {
        position: relative ;

        display: flex ;
        flex-direction: column ;

        width: 100% ;
        height: auto ;
        min-height: 0 ;

        padding: 42px 24px 30px ;

        box-sizing: border-box ;
    }


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

    .project-info {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: 100% ;

        margin: 0 ;

        transform: none ;

        z-index: 10 ;
    }

    .project-info__title {
        margin: 0 0 7px ;

        font-size: 42px ;
        line-height: 1 ;
    }
    .services__description {
        font-size: 16px;
    }

    .project-info__type {
        display: block ;

        margin: 0 0 27px ;

        font-size: 16px ;
    }

    .project-info__meta {
        display: flex ;
        flex-wrap: wrap ;

        gap: 7px ;

        margin: 0 0 24px ;

        font-size: 16px ;
    }

    .project-info__button {
        position: relative ;

        display: inline-flex ;

        margin: 0 ;

        z-index: 10 ;
    }


    /* =========================
       LAPTOP
    ========================= */

    .project-device {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: calc(100% + 48px) ;
        height: auto ;

        margin:
            28px -24px
            0 ;

        transform: none ;

        overflow: visible ;
    }

    .project-device__image {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        display: block ;

        width: 110% ;
        max-width: none ;
        height: auto ;

        margin: 0 0 0 -5% ;

        transform: none ;
    }


    /* desktop side previews are unnecessary on phone */

    .project-peek--left,
    .project-peek--right {
        display: none ;
    }

}
/* =========================================================
   MOBILE — DIGITAL IDENTITY
========================================================= */

@media (max-width: 768px) {

    .identity {
        position: relative ;

        width: 100% ;
        height: 720px ;
        min-height: 720px ;

        margin: 0 ;

        overflow: hidden ;

        -webkit-mask-image: none ;
        mask-image: none ;
    }


    /* BACKGROUND */

    .identity__bg {
        position: absolute ;
        inset: 0 ;

        width: 100% ;
        height: 100% ;

        background-size: cover ;
        background-position: center center ;
        background-repeat: no-repeat ;

        transform: none ;
    }


    /* DARK OVERLAY */

    .identity__overlay {
        position: absolute ;
        inset: 0 ;

        background:
            linear-gradient(
                to bottom,
                rgba(2,6,12,.12) 0%,
                rgba(2,6,12,.05) 45%,
                rgba(2,6,12,.42) 100%
            ) ;
    }


    /* CONTAINER */

    .identity__container {
        position: relative ;

        width: 100% ;
        height: 100% ;
        min-height: 0 ;

        margin: 0 ;
        padding: 0 24px ;

        box-sizing: border-box ;

        z-index: 3 ;
    }


    /* НИЕ НЕ ПРОСТО... */

    .identity__intro {
        position: absolute ;

        top: 48px ;
        left: 24px ;

        width: auto ;

        margin: 0 ;

        font-size: 13px ;
        line-height: 1.25 ;
        font-weight: 600 ;
    }


    /* MAIN TITLE */

    .identity__title {
        position: absolute ;

        top: 165px ;
        left: 24px ;
        right: 24px ;

        width: auto ;
        max-width: none ;

        margin: 0 ;

        font-size: clamp(39px, 11.5vw, 52px) ;
        line-height: .92 ;
        letter-spacing: -.055em ;

        transform: none ;
    }

    .identity__title-light,
    .identity__title strong {
        display: block ;
    }


    /* DESCRIPTION */

    .identity__text {
        position: absolute ;

        top: auto ;
        right: auto ;
        bottom: 100px ;
        left: 24px ;

        width: 205px ;

        margin: 0 ;

        font-size: 16px ;
        line-height: 1.45 ;

        transform: none ;
    }


    /* ROUND ARROW */

    .identity__button {
        position: absolute ;

        top: auto ;
        right: 24px ;
        bottom: 30px ;
        left: auto ;

        width: 54px ;
        height: 54px ;

        transform: none ;

        z-index: 5 ;
    }

}
 
 
/* =========================================================
   MOBILE — PROCESS + FINAL CTA
========================================================= */

@media (max-width: 768px) {

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

    .process {
        width: 100% ;
        height: auto ;
        min-height: 0 ;

        overflow: hidden ;
    }

    .process__container {
        width: 100% ;
        height: auto ;

        margin: 0 ;
        padding: 35px 24px 45px ;

        box-sizing: border-box ;

        display: block ;
    }

    .process__steps {
        width: 100% ;

        display: flex ;
        flex-direction: column ;

        gap: 0 ;
    }

    .process__step {
        position: relative ;

        width: 100% ;
        min-width: 0 ;

        box-sizing: border-box ;

        padding: 20px 0 22px ;

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

    .process__number {
        position: relative ;

        top: auto ;
        left: auto ;

        display: block ;

        margin: 0 0 8px ;

        font-size: 10px ;
        line-height: 1 ;

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

    .process__name {
        width: 100% ;

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

        font-size: 24px ;
        line-height: 1 ;

        white-space: normal ;
    }

    .process__arrow {
        position: absolute ;

        right: 0 ;
        top: 50% ;

        margin: 0 ;

        transform: translateY(-50%) ;
    }

    .process__caption {
        width: 100% ;

        margin: 32px 0 0 ;
        padding: 0 ;

        font-size: 11px ;
        line-height: 1.45 ;
    }


    /* =====================================================
       FINAL CTA
    ===================================================== */

    .final-cta {
        position: relative ;

        width: 100% ;
        height: 650px ;
        min-height: 650px ;

        overflow: hidden ;
    }

    .final-cta__container {
        position: relative ;

        width: 100% ;
        height: 100% ;

        margin: 0 ;
        padding: 70px 24px 45px ;

        box-sizing: border-box ;
    }


    /* ГОТОВ ЛИ СИ? */

    .final-cta__eyebrow {
        position: relative ;

        top: auto ;
        left: auto ;

        margin: 0 0 28px ;

        font-size: 12px ;
    }


    /* MAIN TITLE */

    .final-cta__title {
        position: relative ;

        top: auto ;
        left: auto ;

        width: 100% ;
        max-width: none ;

        margin: 0 ;

        font-size: clamp(43px, 12vw, 56px) ;
        line-height: .91 ;
        letter-spacing: -.055em ;
    }


    /* RIGHT TEXT */

    .final-cta__text {
        position: absolute ;

        top: auto ;
        right: auto ;
        bottom: 125px ;
        left: 24px ;

        width: 135px ;

        font-size: 10px ;
        line-height: 1.25 ;

        margin: 0 ;
    }


    /* CTA BUTTON */

    .final-cta__button {
        position: absolute ;

        left: 24px ;
        bottom: 45px ;

        width: 230px ;
        height: 58px ;

        margin: 0 ;
    }


    /* OFFICE CIRCLE */

    .final-cta__visual {
        position: absolute ;

        right: -70px ;
        bottom: 85px ;

        width: 230px ;
        height: 230px ;

        margin: 0 ;
    }

    .final-cta__visual img {
        width: 100% ;
        height: 100% ;

        object-fit: cover ;
        object-position: center ;
    }

}
/* =========================================================
   MOBILE — FINAL CTA FIX
========================================================= */

@media (max-width: 768px) {

    .final-cta {
        position: relative ;

        width: 100% ;
        height: auto ;
        min-height: 680px ;

        overflow: hidden ;
    }

    .final-cta__container {
        position: relative ;

        width: 100% ;
        max-width: none ;
        min-height: 680px ;

        margin: 0 ;
        padding: 70px 24px 45px ;

        box-sizing: border-box ;

        display: flex ;
        flex-direction: column ;
        align-items: flex-start ;

        z-index: 3 ;
    }


    /* ГОТОВ ЛИ СИ? */

    .final-cta__eyebrow {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: auto ;

        margin: 0 0 25px ;

        transform: none ;

        font-size: 12px ;
        line-height: 1.2 ;

        z-index: 5 ;
    }


    /* ДА СЪЗДАДЕМ НЕЩО ВЕЛИКО */

    .final-cta__title {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: 100% ;
        max-width: none ;

        margin: 0 ;

        transform: none ;

        font-size: 48px ;
        line-height: .90 ;
        letter-spacing: -2.5px ;

        z-index: 5 ;
    }


    /* BLUE DOT */

    .final-cta__title i {
        display: inline ;
    }


    /* SMALL TEXT */

    .final-cta__text {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: 160px ;

        margin: 42px 0 0 auto ;

        transform: none ;

        font-size: 11px ;
        line-height: 1.35 ;

        z-index: 5 ;
    }


    /* BUTTON */

    .final-cta__button {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: 230px ;
        height: 58px ;

        margin: 45px 0 0 ;

        transform: none ;

        z-index: 6 ;
    }


    /* OFFICE CIRCLE */

    .final-cta__visual {
        position: absolute ;

        top: auto ;
        right: -80px ;
        bottom: 45px ;
        left: auto ;

        width: 235px ;
        height: 235px ;

        margin: 0 ;

        transform: none ;

        z-index: 2 ;
    }

    .final-cta__visual img {
        display: block ;

        width: 100% ;
        height: 100% ;

        object-fit: cover ;
        object-position: center ;
    }

}
/* =========================================================
   MOBILE — FINAL CTA
========================================================= */

@media (max-width: 768px) {

    .final-cta {
        position: relative ;

        width: 100% ;
        height: auto ;
        min-height: 650px ;

        overflow: hidden ;
    }


    /* MAIN CONTAINER */

    .final-cta__container {
        position: relative ;

        width: 100% ;
        max-width: none ;
        min-height: 650px ;

        margin: 0 ;
        padding: 70px 24px 45px ;

        box-sizing: border-box ;
    }


    /* CONTENT */

    .final-cta__content {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: 100% ;
        max-width: none ;

        margin: 0 ;
        padding: 0 ;

        transform: none ;

        z-index: 5 ;
    }


    /* ГОТОВ ЛИ СИ? */

    .final-cta__eyebrow {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        margin: 0 0 26px ;

        font-size: 12px ;
        line-height: 1.2 ;

        transform: none ;
    }


    /* ДА СЪЗДАДЕМ / НЕЩО ВЕЛИКО */

    .final-cta__title {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: 100% ;
        max-width: none ;

        margin: 0 ;

        font-size: clamp(42px, 11.5vw, 54px) ;
        line-height: .90 ;
        letter-spacing: -.055em ;

        transform: none ;
    }

    .final-cta__title span,
    .final-cta__title strong {
        display: block ;
    }

    .final-cta__title .final-cta__dot {
        display: inline ;
    }


    /* SIDE TEXT */

    .final-cta__side-text {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

        width: 145px ;

        margin: 38px 0 0 auto ;
        padding: 0 ;

        font-size: 11px ;
        line-height: 1.3 ;

        transform: none ;

        z-index: 5 ;
    }


    /* BUTTON */

    .final-cta__button {
        position: relative ;

        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;

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

        width: 230px ;
        height: 58px ;

        margin: 42px 0 0 ;
        padding: 0 22px ;

        box-sizing: border-box ;

        transform: none ;

        z-index: 6 ;
    }

}
/* =========================================================
   STUDIO — MOBILE FINAL
========================================================= */

@media (max-width: 768px) {

    section#studio.studio {
        width: 100%;
        min-height: 0;
        height: auto;
        overflow: hidden;
    }

    section#studio.studio .studio__container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 45px 52px 40px;
        box-sizing: border-box;
    }


    /* 03 — СТУДИОТО */

    section#studio.studio .studio__top {
        display: flex;
        align-items: center;
        gap: 16px;

        width: 100%;
        margin: 0 0 70px;
        padding: 0;
    }


    /* MAIN */

    section#studio.studio .studio__grid {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;

        gap: 0;

        grid-template-columns: none;
        column-gap: 0;
    }


    /* TITLE */

    section#studio.studio .studio__title {
        position: static;

        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;

        margin: 0 0 45px;
        padding: 0;

        font-size: 48px;
        line-height: .94;
        letter-spacing: -2.6px;

        transform: none;
    }

    section#studio.studio .studio__title > span {
        display: block;
        white-space: nowrap;
    }


    /* CONTENT */

    section#studio.studio .studio__content {
        position: static;

        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;

        margin: 0 0 38px;
        padding: 0;

        transform: none;
        opacity: 1;
        visibility: visible;
    }

    section#studio.studio .studio__description {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        color: #17191c;

        font-size: 12px;
        line-height: 1.55;

        opacity: 1;
        visibility: visible;
    }

    section#studio.studio .studio__description br {
        display: none;
    }


    /* BUTTON */

    section#studio.studio .studio__button {
        position: static;

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

        width: 190px;
        height: 48px;

        margin: 27px 0 0;
        padding: 0 18px;

        box-sizing: border-box;

        transform: none;
        opacity: 1;
        visibility: visible;
    }


    /* IMAGE */

    section#studio.studio .studio__visual {
        position: relative;

        display: block;

        width: 100%;
        height: 270px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border-radius: 10px;

        transform: none;
        opacity: 1;
        visibility: visible;
    }

    section#studio.studio .studio__visual img {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        transform: none;
        opacity: 1;
        visibility: visible;
    }

    section#studio.studio .studio__visual-index {
        display: none;
    }
}
 
/* =========================================================
   FINAL CTA — MOBILE BOTTOM TEXT
========================================================= */

@media (max-width: 768px) {

    section.final-cta {
        position: relative;
        min-height: 680px;
    }

    section.final-cta .final-cta__container {
        position: relative;
        min-height: 680px;
    }

    section.final-cta .final-cta__side-text {
        position: absolute;

        top: auto;
        left: auto;
        right: 24px;
        bottom: 32px;

        width: 150px;
        margin: 0;
        padding: 0;

        text-align: right;

        font-size: 22px;
        line-height: 1.3;
        font-weight: 600;

        color: #fff;

        transform: none;
        z-index: 10;
    }
}
/* =========================================================
   FOOTER — MOBILE FINAL
========================================================= */

@media (max-width: 768px) {

    body .footer {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        height: auto;

        padding: 50px 24px 38px;
        box-sizing: border-box;
    }


    /* LOGO */

    body .footer > .logo {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
     }

    body .footer > .logo img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }


    /* NAVIGATION */

    body .footer > nav {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;
        gap: 0;
    }

    body .footer > nav a {
        display: flex;
        align-items: center;

        width: 100%;
        height: 48px;

        margin: 0;
        padding: 0 4px;

        box-sizing: border-box;
        font-size: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .22);

        color: rgba(255, 255, 255, .72);
   
        font-weight: 600;
        text-decoration: none;
    }

    body .footer > nav a:first-child {
        border-top: 1px solid rgba(255, 255, 255, .22);
    }

}
/* =========================================================
   PROCESS CAPTION — MOBILE
========================================================= */

@media (max-width: 768px) {

    body .process__caption {
        width: 150px;

        margin: 28px 0 0 auto;
        padding: 0;

        text-align: right;

        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;

        color: #fff;
    }

}
/* =========================================================
   PROJECTS → IDENTITY — MOBILE BLEND
========================================================= */

@media (max-width: 768px) {

    /* Identity влиза леко под Projects */
    body section.identity {
        position: relative;
        margin-top: -55px;
        padding-top: 55px;
        z-index: 5;

        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            rgba(0, 0, 0, .45) 22px,
            #000 65px,
            #000 100%
        );

        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            rgba(0, 0, 0, .45) 22px,
            #000 65px,
            #000 100%
        );
    }

    /* допълнително затъмняване в началото */
    body section.identity .identity__overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(2, 6, 12, .75) 0%,
                rgba(2, 6, 12, .35) 35px,
                transparent 90px
            );
    }
    .process__arrow {
        display: none;
    }
}
/* =========================================================
   TABLET — 769px → 1199px
========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {

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

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }


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

    .site-header {
        height: 76px;
        padding: 0 48px;
    }

    .site-header .logo img {
        width: 190px;
    }

    .site-header .main-nav {
        gap: 26px;
    }

    .site-header .main-nav__link {
        font-size: 14px;
    }

    .site-header .header-cta {
        width: 170px;
        margin-left: 30px;
    }

    .site-header .menu-toggle {
        display: none;
    }


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

    /* ========================================
   HERO — TABLET
======================================== */

.hero {
    position: relative;

    width: 100%;
    height: 620px;
    min-height: 620px;

    margin-top: 76px;
    padding: 0;

    overflow: hidden;
}

/* SPHERE */
.hero-visual {
    position: absolute;

    top: 280px;
    right: 20px;
    left: auto;

    width: 100%;
    height: 500px;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* SMALL INTRO */
.hero-kicker {
    position: absolute;

    top: 80px;
    left: 52px;

    z-index: 5;

    margin: 0;

    font-size: 17px;
    line-height: 1.25;
}

/* MAIN TITLE */
.hero h1 {
    position: absolute;

    top: 205px;
    left: 52px;

    z-index: 6;

    width: 610px;
    max-width: none;

    margin: 0;

    font-size: 64px;
    line-height: .88;
    letter-spacing: -.055em;
}

/* WATCH VIDEO */
.play {
    position: absolute;

    top: 150px;
    right: 55px;
    left: auto;

    z-index: 10;

    transform: none;
}

/* SCROLL */
.scroll-link {
    position: absolute;

    left: 52px;
    bottom: 38px;
    top: auto;

    z-index: 10;
}

/* SERVICES */
.hero-disciplines {
    position: absolute;
    font-size: 18px;
    right: 55px;
    bottom: 38px;
    left: auto;
    top: auto;

    z-index: 10;
}
.projects__intro {
    font-size: 16px;
}


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

    .services {
        width: 100%;
        overflow: hidden;
    }

    .services__container {
        width: 100%;
        max-width: none;

        margin: 0;
        padding-left: 52px;
        padding-right: 52px;

        box-sizing: border-box;
    }


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

    .projects {
        width: 100%;
        overflow: hidden;
    }

    .projects__container {
        width: 100%;
        max-width: none;

        margin: 0;
        padding-left: 52px;
        padding-right: 52px;

        box-sizing: border-box;
    }


    /* ========================================
       IDENTITY
    ======================================== */

    .identity {
        width: 100%;
        overflow: hidden;
    }

    .identity__container {
        width: 100%;
        max-width: none;

        margin-left: 0;
        margin-right: 0;

        box-sizing: border-box;
    }


    /* ========================================
       STUDIO
    ======================================== */

    section#studio.studio {
        width: 100%;
        overflow: hidden;
    }

    section#studio.studio .studio__container {
        width: 100%;
        max-width: none;

        margin: 0;
        padding-left: 52px;
        padding-right: 52px;

        box-sizing: border-box;
    }


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

    .process {
        width: 100%;
        overflow: hidden;
    }

    .process__container {
        width: 100%;
        max-width: none;

        margin: 0;
        padding-left: 52px;
        padding-right: 52px;

        box-sizing: border-box;
    }


    /* ========================================
       FINAL CTA
    ======================================== */

    .final-cta {
        width: 100%;
        overflow: hidden;
    }

    .final-cta__container {
        width: 100%;
        max-width: none;

        margin-left: 0;
        margin-right: 0;

        box-sizing: border-box;
    }


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

    .footer {
        width: 100%;
        box-sizing: border-box;
    }
    .project-peek--right {
    width: 260px;
    right: -300px;
}
.project-peek--left {
    width: 230px;
    left: -240px;
    opacity: .5;
}
.identity__intro {
    left: 80px
}
.identity__title {
    left: 80px;
}
section.studio .studio__visual,
.process__caption {
    display: none;
}
.process {
    padding: 20px 0;
}
section.studio {
    min-height: unset!important;
    padding-bottom: 0;
}
.final-cta__content {
    left: 80px;
}
.project-info__type {
    font-size: 17px;
}
.project-info__meta{
    font-size: 12px;
}
.project-info__button {
     font-size: 14px;
}
.services__description {
      font-size: 20px;
}
.footer nav {
    margin-right: 40px;
}
@media (min-width: 769px) and (max-width: 1200px) {

    .studio .studio__grid .studio__visual {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        max-width: 340px;
        height: auto;

        margin: 0;
        justify-self: end;

        transform: none;
    }

    .studio .studio__grid .studio__visual img {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;

        margin: 0;

        object-fit: cover;
        object-position: center;

        transform: none;
    }
}
}
/* ==========================================
   STUDIO — TABLET FIX
========================================== */

@media (min-width: 769px) and (max-width: 1200px) {

    section.studio .studio__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(200px, .75fr)
            minmax(220px, .8fr);

        gap: 35px;
    }

    section.studio .studio__visual {
        width: 100%;
        max-width: 300px;
        height: 300px;

        position: relative;
        right: auto;
        left: auto;

        justify-self: end;

        transform: none;
    }

    section.studio .studio__visual img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;
    }
}