:root {
    --black: #0D0F0F;
    --dark: #0d0d0d;
    --white: #f5f5f2;
    --gray: #999;
    --line: rgba(255,255,255,.13);
    --accent: #A6C900;
    --max: 1440px;
    --pad: clamp(20px, 4vw, 70px);
}

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

html {
    scroll-behavior: smooth;
    background: var(--black);
}

body {
    font-family: Inter, Arial, sans-serif;
    background: var(--white);
    color: var(--black);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

button,
input,
textarea {
    font: inherit;
}

img {
    display: block;
    width: 100%;
}

.container {
    width: min(var(--max), calc(100% - var(--pad) * 2));
    margin: 0 auto;
}

.section {
    padding: clamp(90px, 12vw, 190px) 0;
}

em {
    color: var(--accent);
    font-style: normal;
}

.section-label {
    display: flex;
    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(0,0,0,.15);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
}

.section-label.light {
    color: #fff;
    border-color: rgba(255,255,255,.2);
}

/* LOADER */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--black);
    transition: opacity .7s ease, visibility .7s ease;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    color: #fff;
    font-size: clamp(30px, 5vw, 70px);
    font-weight: 900;
    letter-spacing: -.07em;
}

.loader-logo span,
.logo span {
    color: var(--accent);
}

/* HEADER */

.site-header {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
}

.logo {
    color: #fff;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.06em;
}

.main-nav {
    display: flex;
    gap: 32px;
    margin-left: auto;
    margin-right: 40px;
}

.main-nav a {
    color: rgba(255,255,255,.8);
    font-size: 12px;
    font-weight: 600;
    transition: color .25s ease;
}

.main-nav a:hover {
    color: var(--accent);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    min-height: 58px;
    padding: 0 28px;
    background: var(--accent);
    color: var(--black);
    border: 1px solid var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: #fff;
}

.btn-small {
    min-height: 42px;
    padding: 0 19px;
}

.burger-btn {
    display: none;
    width: 45px;
    height: 45px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.burger-btn span {
    display: block;
    width: 28px;
    height: 2px;
    background: #fff;
    margin: 6px auto;
}

/* MOBILE MENU */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 25px var(--pad);
    background: var(--black);
    color: #fff;
    transform: translateY(-100%);
    transition: transform .5s cubic-bezier(.7,0,.2,1);
}

.mobile-menu.active {
    transform: translateY(0);
}

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

.mobile-close {
    width: 45px;
    height: 45px;
    background: none;
    color: #fff;
    border: 0;
    font-size: 40px;
    cursor: pointer;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    margin-top: 100px;
}

.mobile-menu nav a {
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(30px, 8vw, 70px);
    font-weight: 800;
    letter-spacing: -.05em;
}

.mobile-cta {
    margin-top: 40px;
}

/* HERO */

.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: var(--black);
    color: #fff;
}

.hero-image {
    position: absolute;
    inset: 0;
}

.hero-image img {
    height: 100%;
    object-fit: cover;
    opacity: .52;
    filter: saturate(.65) contrast(1.08);
}

.hero-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.25) 100%),
        linear-gradient(0deg, rgba(0,0,0,.7), transparent 40%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 140px;
    padding-bottom: 30px;
}

.hero-top,
.hero-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}

.hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 50px;
    align-items: end;
}

.hero h1 {
    font-size: clamp(55px, 8.7vw, 150px);
    line-height: .82;
    letter-spacing: -.075em;
    font-weight: 900;
}

.hero-side {
    padding-bottom: 8px;
}

.hero-side p {
    max-width: 240px;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 40px;
}

.round-link {
    width: 145px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.round-link b {
    position: absolute;
    right: 18px;
    bottom: 15px;
    color: var(--accent);
    font-size: 18px;
}

.round-link:hover {
    background: var(--accent);
    color: #000;
    transform: rotate(5deg);
}

/* MARQUEE */

.marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--accent);
    color: #000;
    padding: 20px 0;
}

.marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    will-change: transform;
    animation: marquee 22s linear infinite;
}

.marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 34px;
    padding-right: 34px;
}

.marquee-track span {
    display: block;
    flex-shrink: 0;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.marquee-track b {
    display: block;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}

@keyframes marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* STATEMENT */

.statement {
    background: var(--white);
}

.statement-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 10vw;
    padding-top: 90px;
}

.statement h2,
.section-heading h2,
.clients-title,
.team h2,
.final-heading h2 {
    font-size: clamp(55px, 8vw, 125px);
    line-height: .88;
    letter-spacing: -.075em;
    font-weight: 900;
}

.statement h2 span {
    color: #999;
}

.statement-copy {
    padding-top: 10px;
}

.statement-copy .lead {
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.04em;
    margin-bottom: 35px;
}

.statement-copy p:not(.lead) {
    max-width: 470px;
    color: #666;
    line-height: 1.65;
    font-size: 14px;
}

.text-link {
    display: inline-flex;
    gap: 30px;
    margin-top: 45px;
    padding-bottom: 8px;
    border-bottom: 1px solid #000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.text-link span {
    color: #7A9600;
    font-size: 17px;
}

/* SERVICES */

.services {
    background: var(--white);
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 50px;
    padding: 90px 0 80px;
    align-items: end;
}

.section-heading p {
    color: #666;
    line-height: 1.5;
    font-size: 14px;
}

.service-list {
    border-top: 1px solid #ccc;
}

.service-item {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1fr 28%;
    gap: 35px;
    align-items: center;
    min-height: 190px;
    padding: 25px 0;
    border-bottom: 1px solid #ccc;
    transition: padding .4s ease;
    overflow: hidden;
}

.service-item:hover {
    padding-left: 20px;
    background: #eaeaE6;
}

.service-number {
    color: #888;
    font-size: 11px;
    font-weight: 700;
}

.service-content h3 {
    font-size: clamp(28px, 3vw, 50px);
    line-height: .9;
    letter-spacing: -.06em;
}

.service-content p {
    max-width: 440px;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 15px;
}

.service-image {
    height: 130px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .4s ease, transform .4s ease;
}

.service-image img {
    height: 100%;
    object-fit: cover;
}

.service-item:hover .service-image {
    opacity: 1;
    transform: translateX(0);
}

.service-arrow {
    position: absolute;
    top: 28px;
    right: 0;
    color: #999;
    font-size: 20px;
}

/* FEATURED */

.featured-case {
    background: var(--black);
    color: #fff;
}

.featured-top {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 50px;
    padding: 80px 0 50px;
    align-items: end;
}

.case-meta {
    display: block;
    color: #999;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    margin-bottom: 30px;
}

.featured-top h2 {
    font-size: clamp(65px, 9vw, 140px);
    line-height: .8;
    letter-spacing: -.08em;
}









.case-bottom {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    padding-top: 30px;
}

.case-bottom p {
    max-width: 550px;
    color: #999;
    font-size: 14px;
    line-height: 1.6;
}

.light-link {
    color: #fff;
    border-color: #fff;
    white-space: nowrap;
}

/* CASES */




















/* PROCESS */



.process-heading {
    padding: 90px 0;
}

.process-heading h2 {
    font-size: clamp(55px, 8vw, 120px);
    line-height: .85;
    letter-spacing: -.075em;
}













/* SCALE */



.scale-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 100px 0 30px;
}

.scale-item {
    padding: 0 25px;
    border-left: 1px solid #ccc;
}

.scale-item:first-child {
    border-left: 0;
    padding-left: 0;
}

.scale-item strong {
    display: block;
    font-size: clamp(48px, 5vw, 85px);
    line-height: .9;
    letter-spacing: -.08em;
}

.scale-item span {
    display: block;
    color: #777;
    margin-top: 20px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}



/* CLIENTS */

.clients {
    background: #e8e8e3;
}

.clients-title {
    padding: 90px 0;
}

.client-list {
    border-top: 1px solid #bbb;
}

.client-list div {
    padding: 25px 0;
    border-bottom: 1px solid #bbb;
    font-size: clamp(22px, 3vw, 46px);
    font-weight: 800;
    letter-spacing: -.05em;
    transition: color .25s ease, padding .3s ease;
}

.client-list div:hover {
    color: #7A9600;
    padding-left: 20px;
}

/* TEAM */







/* CTA */

.final-cta {
    padding: 120px 0;
    background: var(--black);
    color: #fff;
}

.final-heading {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 80px;
    align-items: end;
    padding: 90px 0 60px;
}

.final-heading p {
    color: #999;
    line-height: 1.6;
    font-size: 14px;
}

.project-form {
    border-top: 1px solid var(--line);
    padding-top: 50px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.project-form label:not(.consent) {
    display: block;
    margin-bottom: 35px;
}

.project-form label > span {
    display: block;
    color: #888;
    margin-bottom: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.project-form input[type="text"],
.project-form input[type="tel"],
.project-form textarea {
    width: 100%;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid #555;
    outline: 0;
    background: transparent;
    color: #fff;
    border-radius: 0;
    font-size: 18px;
}

.project-form textarea {
    resize: vertical;
}

.project-form input::placeholder,
.project-form textarea::placeholder {
    color: #555;
}

.project-form input:focus,
.project-form textarea:focus {
    border-color: var(--accent);
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #777;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.consent input {
    margin-top: 2px;
    accent-color: var(--accent);
}

.consent a {
    color: var(--accent);
    text-decoration: underline;
}

.honeypot {
    position: absolute !important;
    left: -10000px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-status {
    min-height: 25px;
    margin-top: 20px;
    font-size: 12px;
}

/* FOOTER */

footer {
    background: var(--black);
    color: #fff;
    border-top: 1px solid var(--line);
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    padding: 70px 0;
}

.footer-brand p {
    max-width: 250px;
    color: #777;
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.5;
}

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

.footer-contact span {
    color: #666;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
}

.footer-contact a {
    color: #bbb;
    font-size: 12px;
}

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

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    color: #555;
    font-size: 9px;
}

.footer-bottom div {
    display: flex;
    gap: 20px;
}

.footer-bottom a:hover {
    color: #fff;
}

/* TOAST */

.toast {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 500;
    width: min(390px, calc(100% - 40px));
    padding: 20px;
    background: var(--accent);
    color: #000;
    transform: translateY(130%);
    transition: transform .4s ease;
}

.toast.active {
    transform: translateY(0);
}



.toast-message {
    margin-top: 8px;
    font-size: 13px;
}

/* RESPONSIVE */

@media (max-width: 900px) {

    .main-nav,
    .header-cta {
        display: none;
    }

    .burger-btn {
        display: block;
    }

    .hero-main,
    .statement-grid,
    .team-grid,
    .final-heading {
        grid-template-columns: 1fr;
    }

    .hero-side {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }

    .hero-side p {
        margin-bottom: 0;
    }

    .section-heading {
        grid-template-columns: 1fr;
    }

    .service-item {
        grid-template-columns: 50px 1fr;
    }

    .service-image {
        display: none;
    }

    

    

    .case-large .case-image,
    

    .scale-grid {
        grid-template-columns: 1fr 1fr;
        gap: 50px 0;
    }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {

    .nav-wrapper {
        height: 78px;
    }

    .hero-inner {
        padding-top: 110px;
    }

    .hero h1 {
        font-size: clamp(48px, 15vw, 80px);
    }

    .hero-main {
        gap: 40px;
    }

    .hero-side {
        align-items: flex-start;
    }

    .round-link {
        flex-shrink: 0;
        width: 110px;
        height: 110px;
    }

    .hero-bottom {
        font-size: 8px;
    }

    .statement-grid,
    

    .section-heading,
    .featured-top,
    .process-heading,
    .clients-title,
    .final-heading {
        padding-top: 60px;
        padding-bottom: 50px;
    }

    .featured-top {
        grid-template-columns: 1fr;
    }

    

    

    .case-bottom {
        flex-direction: column;
    }

    

    

    

    .scale-grid {
        grid-template-columns: 1fr;
    }

    .scale-item,
    .scale-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #ccc;
        padding: 30px 0 0;
    }

    .scale-item:first-child {
        border-top: 0;
        padding-top: 0;
    }

    

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

/* SCROLL REVEAL */

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.site-header {
    transition:
        background .3s ease,
        backdrop-filter .3s ease;
}

.site-header.scrolled {
    position: fixed;
    background: rgba(8,8,8,.82);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* =========================================================
   PREMIUM MOTION LAYER
   ========================================================= */

/* HEADER */

.site-header.scrolled .nav-wrapper {
    height: 72px;
}

.site-header.scrolled .logo {
    font-size: 18px;
}


/* HERO */

.hero-image img {
    transform: scale(1.04);
    transition: transform 1.8s cubic-bezier(.2,.65,.2,1);
}

.hero:hover .hero-image img {
    transform: scale(1.075);
}

.hero h1 {
    text-wrap: balance;
}

.hero h1 em {
    position: relative;
}

.hero h1 em::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.06em;
    width: 100%;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    animation: heroUnderline 1.1s .9s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes heroUnderline {
    to {
        transform: scaleX(1);
    }
}


/* HERO LOAD */

.hero-top,
.hero-main,
.hero-bottom {
    animation: heroFadeUp 1s .15s cubic-bezier(.2,.7,.2,1) both;
}

.hero-main {
    animation-delay: .3s;
}

.hero-bottom {
    animation-delay: .5s;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

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


/* ROUND CTA */

.round-link {
    overflow: hidden;
}

.round-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
    z-index: -1;
}

.round-link:hover::before {
    transform: scale(1);
}

.round-link:hover b {
    color: #000;
}


/* SECTION LABEL */

.section-label {
    position: relative;
}

.section-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 80px;
    height: 1px;
    background: var(--accent);
}


/* SERVICES */

.service-item {
    isolation: isolate;
}

.service-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--accent);
    z-index: -1;
    transition: width .45s cubic-bezier(.2,.7,.2,1);
}

.service-item:hover::before {
    width: 100%;
}

.service-item:hover .service-number,
.service-item:hover .service-content p {
    color: #222;
}

.service-item:hover .service-arrow {
    color: #000;
    transform: translate(5px,-5px);
}

.service-arrow {
    transition: transform .3s ease, color .3s ease;
}


/* CASE IMAGE */









/* FEATURED IMAGE */








/* PROCESS */












/* CLIENTS */

.client-list div {
    position: relative;
    overflow: hidden;
}

.client-list div::after {
    content: "";
    position: absolute;
    right: 0;
    opacity: 0;
    transform: translate(-15px,15px);
    transition:
        opacity .3s ease,
        transform .3s ease;
}

.client-list div:hover::after {
    opacity: 1;
    transform: translate(0,0);
}


/* SCALE */

.scale-item strong {
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    transform-origin: left center;
}

.scale-item:hover strong {
    transform: scale(1.04);
}


/* TEAM */


.team-placeholder:hover 


/* FORM */

.project-form input[type="text"],
.project-form input[type="tel"],
.project-form textarea {
    transition:
        border-color .3s ease,
        padding-left .3s ease;
}

.project-form input[type="text"]:focus,
.project-form input[type="tel"]:focus,
.project-form textarea:focus {
    padding-left: 12px;
}


/* CTA */

.final-cta {
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -250px;
    top: 100px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(200,255,0,.08),
        transparent 65%
    );
    pointer-events: none;
}

.final-cta .container {
    position: relative;
    z-index: 1;
}


/* TEXT LINK */

.text-link {
    transition:
        color .3s ease,
        padding-left .3s ease;
}

.text-link:hover {
    color: #7A9600;
    padding-left: 8px;
}


/* MOBILE */

@media (max-width: 600px) {

    .hero-image img {
        transform: scale(1.01);
    }

    .hero:hover .hero-image img {
        transform: scale(1.01);
    }

    .hero h1 em::after {
        height: 2px;
    }

    .service-item::before {
        display: none;
    }

    .service-item:hover {
        padding-left: 0;
        background: transparent;
    }

    .service-item:hover .service-number,
    .service-item:hover .service-content p {
        color: inherit;
    }

    .client-list div::after {
        display: none;
    }

}


/* PREMIUM CURSOR */

.premium-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;

    width: 12px;
    height: 12px;

    margin-left: -6px;
    margin-top: -6px;

    border-radius: 50%;

    background: var(--accent);

    pointer-events: none;

    mix-blend-mode: difference;

    transition:
        width .25s ease,
        height .25s ease,
        margin .25s ease,
        opacity .25s ease;
}

.premium-cursor.cursor-active {
    width: 42px;
    height: 42px;
    margin-left: -21px;
    margin-top: -21px;
    opacity: .8;
}


/* =========================================================
   PREMIUM HEADER / NAVIGATION
   ========================================================= */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    overflow-x: hidden;
}


/* HEADER */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;

    background: transparent;

    transition:
        background .4s ease,
        backdrop-filter .4s ease,
        border-color .4s ease,
        transform .4s ease;
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

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

    opacity: 0;

    transition: opacity .4s ease;
}

header.scrolled {
    background: rgba(8,8,8,.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

header.scrolled::after {
    opacity: 1;
}

header .nav-wrapper {
    transition:
        height .4s cubic-bezier(.2,.7,.2,1),
        padding .4s ease;
}


/* NAV LINKS */

.main-nav a {
    position: relative;
    transition: color .25s ease;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -7px;

    height: 1px;

    background: var(--accent);

    transform: scaleX(0);
    transform-origin: right;

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

.main-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* CTA */

.header-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.header-cta::before {
    content: "";

    position: absolute;
    inset: 0;

    background: var(--accent);

    transform: translateY(101%);

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

    z-index: -1;
}

.header-cta:hover::before {
    transform: translateY(0);
}

.header-cta:hover {
    color: #000;
}


/* =========================================================
   SECTION TRANSITIONS
   ========================================================= */

section {
    position: relative;
}

section + section {
    border-top: 1px solid rgba(255,255,255,.055);
}


/* =========================================================
   IMAGE POLISH
   ========================================================= */

img {
    display: block;
    max-width: 100%;
}

.hero-image,
.case-image,
.featured-image {
    overflow: hidden;
}

.hero-image img,
.case-image img,
.featured-image img {
    will-change: transform;
}


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

::selection {
    background: var(--accent);
    color: #000;
}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   EDITORIAL CASES / PORTFOLIO
   ========================================================= */

.featured-intro {
    max-width: 330px;
    align-self: flex-end;
    padding-bottom: 8px;
}

.featured-intro span {
    display: block;
    font-size: 10px;
    letter-spacing: .14em;
    line-height: 1.6;
    color: rgba(255,255,255,.55);
}


















.case-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;

    padding: 45px 0 100px;
}

.case-bottom p {
    max-width: 590px;

    margin: 0;

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

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


/* PORTFOLIO GRID */























/* CASE CARD LINK */



EOF\
sudo tee -a css/style.css > /dev/null <<"EOF"


/* =========================================================
   EDITORIAL CASES / PORTFOLIO
   ========================================================= */

.featured-intro {
    max-width: 330px;
    align-self: flex-end;
    padding-bottom: 8px;
}

.featured-intro span {
    display: block;
    font-size: 10px;
    letter-spacing: .14em;
    line-height: 1.6;
    color: rgba(255,255,255,.55);
}


















.case-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;

    padding: 45px 0 100px;
}

.case-bottom p {
    max-width: 590px;

    margin: 0;

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

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


/* PORTFOLIO GRID */























/* CASE CARD LINK */





/* =========================================================
   PROCESS / HOW WE WORK
   ========================================================= */

.process-section {
    padding-top: 120px;
    padding-bottom: 120px;
}


.process-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
}


.process-heading p {
    max-width: 390px;
    margin: 0 0 5px;

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

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


.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-top: 85px;

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


.step-card {
    position: relative;

    min-height: 330px;

    padding: 28px 28px 30px 0;

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

    transition:
        background .4s ease,
        padding .4s ease;
}


.step-card:not(:first-child) {
    padding-left: 28px;
}


.step-card:last-child {
    border-right: 0;
}


.step-number {
    display: block;

    font-size: 11px;
    letter-spacing: .12em;

    color: var(--accent);
}


.step-line {
    width: 32px;
    height: 1px;

    margin: 55px 0 35px;

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

    transition:
        width .4s ease,
        background .4s ease;
}


.step-card:hover .step-line {
    width: 65px;
    background: var(--accent);
}


.step-card h3 {
    margin: 0 0 18px;

    font-size: clamp(22px, 2vw, 31px);
    line-height: 1;
    letter-spacing: -.04em;
}


.step-card p {
    max-width: 220px;

    margin: 0;

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

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


.step-card:hover {
    background: rgba(255,255,255,.025);
}


@media (max-width: 900px) {

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

    .step-card:nth-child(2) {
        border-right: 0;
    }

    .step-card:nth-child(3),
    .step-card:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,.12);
    }

}


@media (max-width: 600px) {

    .process-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .process-heading {
        display: block;
    }

    .process-heading p {
        margin-top: 25px;
    }

    .process-grid {
        grid-template-columns: 1fr;
        margin-top: 55px;
    }

    .step-card,
    .step-card:not(:first-child) {
        min-height: auto;

        padding: 28px 0;

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

    .step-card:first-child {
        border-top: 0;
    }

    .step-line {
        margin: 35px 0 25px;
    }

}


/* =========================================================
   SCALE / NUMBERS
   ========================================================= */

.scale-grid {
    display: grid;

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

    margin-top: 70px;

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


.scale-item {
    position: relative;

    min-height: 300px;

    padding: 30px 28px 35px 0;

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

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: background .4s ease;
}


.scale-item:not(:first-child) {
    padding-left: 28px;
}


.scale-item:last-child {
    border-right: 0;
}


.scale-item:hover {
    background: rgba(255,255,255,.025);
}


.scale-index {
    font-size: 10px;
    letter-spacing: .14em;

    color: var(--accent);
}


.scale-item strong {
    display: block;

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

    font-size: clamp(58px, 7vw, 108px);
    line-height: .82;

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

    color: #fff;
}


.scale-item strong span {
    color: var(--accent);
}


.scale-item p {
    margin: 0;

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

    letter-spacing: .08em;
    text-transform: uppercase;

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





@media (max-width: 800px) {

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

    .scale-item:nth-child(2) {
        border-right: 0;
    }

    .scale-item:nth-child(3),
    .scale-item:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,.12);
    }

}


@media (max-width: 520px) {

    .scale-grid {
        grid-template-columns: 1fr 1fr;
    }

    .scale-item,
    .scale-item:not(:first-child) {
        min-height: 220px;
        padding: 22px 16px 25px 0;
    }

    .scale-item:nth-child(2),
    .scale-item:nth-child(4) {
        padding-left: 16px;
    }

    .scale-item strong {
        font-size: 55px;
    }

    .scale-item p {
        font-size: 9px;
    }

}

/* Remove hero underline */
.hero h1 em::after {
    display: none !important;
    animation: none !important;
}


/* Remove hero underline */
.hero h1 em::after {
    display: none !important;
    animation: none !important;
}


/* =========================================================
   HERO H1 — REDUCED PREMIUM SCALE
   ========================================================= */

.hero h1 {
    font-size: clamp(52px, 6.2vw, 96px) !important;
    line-height: .88 !important;
    letter-spacing: -.055em !important;
}


/* highlighted word */
.hero h1 em {
    font-size: inherit !important;
}


/* desktop */
@media (min-width: 1100px) {

    .hero h1 {
        max-width: 850px;
        font-size: clamp(58px, 6vw, 92px) !important;
    }

}


/* tablet */
@media (max-width: 1099px) {

    .hero h1 {
        font-size: clamp(48px, 8vw, 76px) !important;
        line-height: .9 !important;
    }

}


/* mobile */
@media (max-width: 600px) {

    .hero h1 {
        max-width: 100%;
        font-size: clamp(38px, 11vw, 58px) !important;
        line-height: .91 !important;
        letter-spacing: -.045em !important;
    }

}


/* HERO — FIT FULL HEADING INTO FIRST SCREEN */

.hero h1 {
    font-size: clamp(46px, 5.2vw, 78px) !important;
    line-height: .82 !important;
    letter-spacing: -.06em !important;
    margin: 0 !important;
}

.hero-main {
    align-items: flex-start !important;
}

.hero h1 em {
    font-size: inherit !important;
}

@media (max-height: 800px) and (min-width: 700px) {
    .hero h1 {
        font-size: clamp(42px, 4.8vw, 70px) !important;
        line-height: .8 !important;
    }
}

@media (max-width: 600px) {
    .hero h1 {
        font-size: clamp(34px, 10vw, 52px) !important;
        line-height: .86 !important;
    }
}


/* HERO — FIT FULL HEADING INTO FIRST SCREEN */

.hero h1 {
    font-size: clamp(46px, 5.2vw, 78px) !important;
    line-height: .82 !important;
    letter-spacing: -.06em !important;
    margin: 0 !important;
}

.hero-main {
    align-items: flex-start !important;
}

.hero h1 em {
    font-size: inherit !important;
}

@media (max-height: 800px) and (min-width: 700px) {
    .hero h1 {
        font-size: clamp(42px, 4.8vw, 70px) !important;
        line-height: .8 !important;
    }
}

@media (max-width: 600px) {
    .hero h1 {
        font-size: clamp(34px, 10vw, 52px) !important;
        line-height: .86 !important;
    }
}


/* HERO — больше воздуха между словами */

.hero h1 {
    line-height: 0.94 !important;
}

@media (max-width: 1099px) {
    .hero h1 {
        line-height: 0.94 !important;
    }
}

@media (max-width: 600px) {
    .hero h1 {
        line-height: 0.97 !important;
    }
}


/* =========================================================
   FINAL HERO TYPOGRAPHY
   ========================================================= */

.hero h1 {
    font-size: clamp(46px, 5.2vw, 78px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.025em !important;
    word-spacing: 0 !important;
    margin: 0 !important;
}

.hero h1 em {
    font-size: inherit !important;
    letter-spacing: inherit !important;
}

@media (max-height: 800px) and (min-width: 700px) {

    .hero h1 {
        font-size: clamp(42px, 4.8vw, 70px) !important;
        line-height: 0.94 !important;
        letter-spacing: -0.025em !important;
    }

}

@media (max-width: 600px) {

    .hero h1 {
        font-size: clamp(34px, 10vw, 52px) !important;
        line-height: 0.97 !important;
        letter-spacing: -0.02em !important;
    }

}


/* =========================================================
   GLOBAL DISPLAY TYPOGRAPHY
   Воздух между буквами и строками
   ========================================================= */

/* Большие заголовки */
.statement h2,
.section-heading h2,
.team h2,
.final-heading h2,
.featured-top h2,
.clients-title,
.process-heading h2 {
    letter-spacing: -0.025em !important;
    word-spacing: 0.02em !important;
}

/* Заголовки карточек */
.service-content h3,
.case-info h3,
.process-item h3,
.step-card h3 {
    letter-spacing: -0.02em !important;
    word-spacing: 0.01em !important;
}

/* Выделенные слова внутри крупных заголовков */
.statement h2 span,
.statement h2 em,
.section-heading h2 em,
.team h2 em,
.final-heading h2 em,
.featured-top h2 em,
.clients-title em,
.process-heading h2 em {
    letter-spacing: inherit !important;
}

/* Нормальный вертикальный ритм */
.statement h2,
.section-heading h2,
.team h2,
.final-heading h2,
.featured-top h2,
.clients-title,
.process-heading h2 {
    line-height: 0.94 !important;
}

/* Карточки */
.service-content h3,
.case-info h3,
.process-item h3,
.step-card h3 {
    line-height: 0.96 !important;
}

/* Мобильная версия */
@media (max-width: 600px) {

    .statement h2,
    .section-heading h2,
    .team h2,
    .final-heading h2,
    .featured-top h2,
    .clients-title,
    .process-heading h2 {
        letter-spacing: -0.018em !important;
        word-spacing: 0.01em !important;
        line-height: 0.97 !important;
    }

    .service-content h3,
    .case-info h3,
    .process-item h3,
    .step-card h3 {
        letter-spacing: -0.015em !important;
        line-height: 1 !important;
    }

}


/* =========================================================
   FINAL TYPOGRAPHY FIX
   Единый воздух между буквами и строками
   ========================================================= */

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

.hero h1 {
    letter-spacing: -0.025em !important;
    word-spacing: 0.015em !important;
    line-height: 0.94 !important;
}

.hero h1 em {
    letter-spacing: -0.025em !important;
}


/* ---------------------------------------------------------
   ВСЕ КРУПНЫЕ ЗАГОЛОВКИ САЙТА
   --------------------------------------------------------- */

h1,
h2,
h3 {
    word-spacing: 0.015em;
}


/* Основные display-заголовки */

.section-heading h2,
.featured-top h2,
.clients-title,
.final-heading h2,
.team-copy h2,
.process-heading h2,
.statement h2 {
    letter-spacing: -0.025em !important;
    word-spacing: 0.015em !important;
    line-height: 0.94 !important;
}


/* Выделенные / зелёные части */

.section-heading h2 em,
.featured-top h2 em,
.clients-title em,
.final-heading h2 em,
.team-copy h2 em,
.process-heading h2 em,
.statement h2 em {
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
}


/* ---------------------------------------------------------
   ЗАГОЛОВКИ КАРТОЧЕК И КЕЙСОВ
   --------------------------------------------------------- */

.service-content h3,
.service-item h3,
.case-info h3,
.process-item h3,
.step-card h3 {
    letter-spacing: -0.018em !important;
    word-spacing: 0.01em !important;
    line-height: 0.97 !important;
}


/* ---------------------------------------------------------
   КРУПНЫЕ ТЕКСТОВЫЕ БЛОКИ
   --------------------------------------------------------- */

.statement,
.statement *,
.final-cta,
.final-cta *,
.featured-top,
.featured-top *,
.team-copy,
.team-copy * {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   SECTION LABELS
   --------------------------------------------------------- */

.section-label {
    letter-spacing: 0.08em !important;
}


/* ---------------------------------------------------------
   НАВИГАЦИЯ / КНОПКИ
   Не даём им слипаться
   --------------------------------------------------------- */

.main-nav a,
.header-cta,
.btn,
.round-link,
.text-link {
    letter-spacing: 0.02em;
}


/* ---------------------------------------------------------
   ЦИФРЫ И МЕТКИ
   --------------------------------------------------------- */

.hero-index,
.hero-eyebrow,
.eyebrow,
.case-meta,
.section-label span,
.case-image span,
.step-number,
.scale-item strong {
    letter-spacing: 0.06em;
}


/* ---------------------------------------------------------
   КЕЙСЫ
   --------------------------------------------------------- */






/* ---------------------------------------------------------
   ПРОЦЕСС
   --------------------------------------------------------- */

.process-heading p,
.step-card p,
.process-item p {
    letter-spacing: 0.005em;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   ОСНОВНОЙ ТЕКСТ
   --------------------------------------------------------- */

body {
    letter-spacing: 0;
}

p {
    word-spacing: 0.01em;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .hero h1,
    .section-heading h2,
    .featured-top h2,
    .clients-title,
    .final-heading h2,
    .team-copy h2,
    .process-heading h2,
    .statement h2 {
        letter-spacing: -0.018em !important;
        word-spacing: 0.01em !important;
        line-height: 0.96 !important;
    }

    .service-content h3,
    .service-item h3,
    .case-info h3,
    .process-item h3,
    .step-card h3 {
        letter-spacing: -0.012em !important;
        line-height: 0.99 !important;
    }
}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .hero h1 {
        letter-spacing: -0.012em !important;
        word-spacing: 0.01em !important;
        line-height: 0.98 !important;
    }

    .section-heading h2,
    .featured-top h2,
    .clients-title,
    .final-heading h2,
    .team-copy h2,
    .process-heading h2,
    .statement h2 {
        letter-spacing: -0.01em !important;
        word-spacing: 0.008em !important;
        line-height: 0.99 !important;
    }

    .service-content h3,
    .service-item h3,
    .case-info h3,
    .process-item h3,
    .step-card h3 {
        letter-spacing: 0 !important;
        line-height: 1.02 !important;
    }

    .section-label {
        letter-spacing: 0.07em !important;
    }
}


/* =========================================================
   FORM — SLIGHTLY LARGER / PREMIUM
   ========================================================= */

#projectForm {
    max-width: 1100px !important;
    gap: 22px !important;
}

/* Поля */
#projectForm input[type="text"],
#projectForm input[type="tel"],
#projectForm textarea {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

/* Имя и телефон */
#projectForm input[type="text"],
#projectForm input[type="tel"] {
    min-height: 62px !important;
    padding: 18px 0 !important;
}

/* Описание проекта */
#projectForm textarea {
    min-height: 145px !important;
    padding: 18px 0 !important;
}

/* Placeholder */
#projectForm input::placeholder,
#projectForm textarea::placeholder {
    font-size: 18px !important;
    opacity: .75;
}

/* Согласие */
#projectForm input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
}

#projectForm label,
#projectForm .form-согласие,
#projectForm .consent,
#projectForm span {
    font-size: 13px;
    line-height: 1.5;
}

/* Кнопка */
#projectForm button[type="submit"] {
    min-height: 68px !important;
    font-size: 14px !important;
    letter-spacing: .03em !important;
}

/* Мобильная версия */
@media (max-width: 600px) {

    #projectForm {
        gap: 18px !important;
    }

    #projectForm input[type="text"],
    #projectForm input[type="tel"],
    #projectForm textarea {
        font-size: 17px !important;
    }

    #projectForm input[type="text"],
    #projectForm input[type="tel"] {
        min-height: 58px !important;
    }

    #projectForm textarea {
        min-height: 125px !important;
    }

    #projectForm button[type="submit"] {
        min-height: 62px !important;
    }
}


/* =========================================================
   SAFE DIGITAL FORM
   НЕ МЕНЯЕТ СТРУКТУРУ И РАСКЛАДКУ ФОРМЫ
   ========================================================= */

#form-section {
    position: relative;
    overflow: hidden;
}

/* Тонкая digital-линия */
#form-section::before {
    content: "";
    position: absolute;

    left: 6%;
    right: 6%;
    top: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(200,255,0,0),
        rgba(200,255,0,.7),
        rgba(255,255,255,.12),
        rgba(200,255,0,0)
    );

    pointer-events: none;
}

/* Digital-маркер */
#form-section::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: -3px;
    left: 30%;

    background: var(--accent);

    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(200,255,0,.8),
        0 0 30px rgba(200,255,0,.25);

    pointer-events: none;
}


/* =========================================================
   ВАЖНО:
   ВОЗВРАЩАЕМ ФОРМЕ ИСХОДНУЮ СТРУКТУРУ
   ========================================================= */

#projectForm {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 1100px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    gap: 18px !important;

    padding: 0 !important;

    background: transparent !important;
}


/* =========================================================
   ПОЛЯ
   ========================================================= */

#projectForm input[type="text"],
#projectForm input[type="tel"],
#projectForm textarea {

    width: 100% !important;

    box-sizing: border-box !important;

    border-radius: 0 !important;

    background: transparent !important;

    color: #fff !important;

    border: 0 !important;

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

    font-size: 18px !important;

    padding: 18px 0 !important;

    transition:
        border-color .3s ease,
        color .3s ease;
}


/* textarea */
#projectForm textarea {
    min-height: 145px !important;

    resize: vertical !important;
}


/* focus */

#projectForm input[type="text"]:focus,
#projectForm input[type="tel"]:focus,
#projectForm textarea:focus {

    outline: none !important;

    border-bottom-color: var(--accent) !important;
}


/* placeholder */

#projectForm input::placeholder,
#projectForm textarea::placeholder {

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

    opacity: 1 !important;
}


/* =========================================================
   СОГЛАСИЕ
   ========================================================= */

#projectForm input[type="checkbox"] {

    width: 20px !important;
    height: 20px !important;

    flex-shrink: 0 !important;

    accent-color: var(--accent);

}


/* =========================================================
   КНОПКА
   ========================================================= */

#projectForm button[type="submit"] {

    width: 100% !important;

    min-height: 70px !important;

    margin-top: 15px !important;

    border-radius: 0 !important;

    border: 0 !important;

    background: var(--accent) !important;

    color: #000 !important;

    font-size: 14px !important;

    font-weight: 800 !important;

    letter-spacing: .04em !important;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#projectForm button[type="submit"]:hover {

    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(200,255,0,.16);
}


/* =========================================================
   DIGITAL FOCUS
   ========================================================= */

#projectForm input[type="text"]:focus,
#projectForm input[type="tel"]:focus,
#projectForm textarea:focus {

    box-shadow:
        0 8px 22px -18px rgba(200,255,0,.8);
}


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

@media (max-width: 700px) {

    #projectForm {

        width: 100% !important;

        gap: 16px !important;
    }

    #projectForm input[type="text"],
    #projectForm input[type="tel"],
    #projectForm textarea {

        font-size: 17px !important;

        padding: 16px 0 !important;
    }

    #projectForm textarea {

        min-height: 120px !important;
    }

    #projectForm button[type="submit"] {

        min-height: 64px !important;
    }

}


/* =========================================================
   KANTEMIROV — DIGITAL VALIDATION
   ========================================================= */

.custom-tooltip {
    position: absolute;

    left: 0;
    bottom: calc(100% + 14px);

    z-index: 100;

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

    width: max-content;
    max-width: 340px;

    padding: 12px 16px;

    background: #101212;
    color: #fff;

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

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    letter-spacing: .02em;
    line-height: 1.35;

    opacity: 0;
    visibility: hidden;

    transform: translateY(6px);

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.45),
        0 0 25px rgba(200,255,0,.06);
}

/* Зелёный цифровой маркер */
.custom-tooltip::before {
    content: "!";

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

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    background: var(--accent);
    color: #000;

    font-size: 12px;
    font-weight: 900;
}

/* Маленький указатель вниз */
.custom-tooltip::after {
    content: "";

    position: absolute;

    left: 18px;
    bottom: -6px;

    width: 10px;
    height: 10px;

    background: #101212;

    border-right: 1px solid rgba(200,255,0,.55);
    border-bottom: 1px solid rgba(200,255,0,.55);

    transform: rotate(45deg);
}

.custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Фокус на проблемном поле */

#projectForm input:invalid:focus,
#projectForm textarea:invalid:focus {
    border-bottom-color: var(--accent) !important;
}


/* Мобильная версия */

@media (max-width: 600px) {

    .custom-tooltip {
        left: 0;
        bottom: calc(100% + 10px);

        max-width: calc(100vw - 60px);

        font-size: 11px;
        padding: 10px 13px;
    }

}


/* =========================================================
   KANTEMIROV DIGITAL VALIDATION — FINAL
   ========================================================= */

.custom-tooltip {
    position: absolute;
    z-index: 9999;

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

    box-sizing: border-box;

    max-width: 360px;

    padding: 11px 16px 11px 11px;

    background: #101212;

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

    color: #fff;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.35;
    letter-spacing: .01em;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 0 25px rgba(200,255,0,.08);
}

.custom-tooltip.visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.custom-tooltip-icon {
    display: flex;

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

    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    background: var(--accent);

    color: #000;

    font-size: 12px;
    font-weight: 900;
}

.custom-tooltip-text {
    display: block;
}


/* Маленький digital-маркер */

.custom-tooltip::after {
    content: "";

    position: absolute;

    left: 18px;
    top: -5px;

    width: 9px;
    height: 9px;

    background: #101212;

    border-left: 1px solid rgba(200,255,0,.7);
    border-top: 1px solid rgba(200,255,0,.7);

    transform: rotate(45deg);
}


/* Фокус */

#projectForm input:focus,
#projectForm textarea:focus {
    outline: none;
}


/* Mobile */

@media (max-width: 600px) {

    .custom-tooltip {
        max-width: calc(100vw - 40px);

        font-size: 11px;
    }

}


/* =========================================================
   KANTEMIROV — FORM ERROR / DIGITAL UI
   ========================================================= */











/* Поле с ошибкой */






/* =========================================================
   KANTEMIROV — FORM ERROR
   ========================================================= */














/* =========================================================
   KANTEMIROV FORM VALIDATION
   Field-level digital errors
   ========================================================= */

.field-error-marker {
    display: flex;
    align-items: center;
    gap: 9px;

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

    margin-top: 10px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: .04em;
}





.field-has-error {
    border-color: var(--accent) !important;
}

input.field-has-error,
textarea.field-has-error {
    border-bottom-color: var(--accent) !important;
}

/*
 * Для согласия ПДН:
 * ошибка находится внутри блока согласия,
 * поэтому больше не улетает наверх формы.
 */

.consent.field-has-error {
    position: relative;

    border: 0 !important;
}

.consent .field-error-marker {
    margin-top: 12px;
    margin-left: 0;
}

/*
 * Небольшой цифровой акцент:
 * линия появляется под ошибочным полем.
 */

input.field-has-error,
textarea.field-has-error {
    box-shadow:
        0 1px 0 0 var(--accent);
}

/*
 * Checkbox
 */

input[type="checkbox"].field-has-error {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/*
 * Mobile
 */

@media (max-width: 600px) {

    .field-error-marker {
        font-size: 9px;
    }

    

}


/* =========================================================
   KANTEMIROV FORM VALIDATION
   Field-level digital errors
   ========================================================= */

.field-error-marker {
    display: flex;
    align-items: center;
    gap: 9px;

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

    margin-top: 10px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: .04em;
}





.field-has-error {
    border-color: var(--accent) !important;
}

input.field-has-error,
textarea.field-has-error {
    border-bottom-color: var(--accent) !important;
}

/*
 * Для согласия ПДН:
 * ошибка находится внутри блока согласия,
 * поэтому больше не улетает наверх формы.
 */

.consent.field-has-error {
    position: relative;

    border: 0 !important;
}

.consent .field-error-marker {
    margin-top: 12px;
    margin-left: 0;
}

/*
 * Небольшой цифровой акцент:
 * линия появляется под ошибочным полем.
 */

input.field-has-error,
textarea.field-has-error {
    box-shadow:
        0 1px 0 0 var(--accent);
}

/*
 * Checkbox
 */

input[type="checkbox"].field-has-error {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/*
 * Mobile
 */

@media (max-width: 600px) {

    .field-error-marker {
        font-size: 9px;
    }

    

}


/* =========================================================
   KANTEMIROV FORM VALIDATION
   Field-level digital errors
   ========================================================= */

.field-error-marker {
    display: flex;
    align-items: center;
    gap: 9px;

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

    margin-top: 10px;

    color: var(--accent);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: .04em;
}





.field-has-error {
    border-color: var(--accent) !important;
}

input.field-has-error,
textarea.field-has-error {
    border-bottom-color: var(--accent) !important;
}

/*
 * Для согласия ПДН:
 * ошибка находится внутри блока согласия,
 * поэтому больше не улетает наверх формы.
 */

.consent.field-has-error {
    position: relative;

    border: 0 !important;
}

.consent .field-error-marker {
    margin-top: 12px;
    margin-left: 0;
}

/*
 * Небольшой цифровой акцент:
 * линия появляется под ошибочным полем.
 */

input.field-has-error,
textarea.field-has-error {
    box-shadow:
        0 1px 0 0 var(--accent);
}

/*
 * Checkbox
 */

input[type="checkbox"].field-has-error {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/*
 * Mobile
 */

@media (max-width: 600px) {

    .field-error-marker {
        font-size: 9px;
    }

    

}


/* =========================================================
   ПРОВЕРКА СОГЛАСИЯ — СТИЛЬ ФОРМЫ
   ========================================================= */

.consent {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 12px;
    row-gap: 8px;
}

.consent .field-error-marker {
    order: 3;
    flex-basis: 100%;

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

    margin: 2px 0 0 0;
    padding: 0;

    color: var(--accent);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .035em;
}

.consent .field-error-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--accent);
    color: #050505;

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.consent .field-error-text {
    color: var(--accent);
}

.consent.field-has-error {
    border: 0 !important;
    box-shadow: none !important;
}

.consent input[type="checkbox"].field-has-error {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 600px) {

    .consent {
        align-items: flex-start;
    }

    .consent .field-error-marker {
        font-size: 9px;
        margin-top: 4px;
    }

}


/* =========================================================
   FORM CLEANUP — REMOVE PERSISTENT DECORATIVE LINE
   ========================================================= */

#form-section::before,
#form-section::after {
    display: none !important;
    content: none !important;
}

/* Ошибка поля: без постоянной зелёной полосы */


/* Зелёный акцент появляется только при фокусе */
#projectForm input[type="text"]:focus,
#projectForm input[type="tel"]:focus,
#projectForm textarea:focus {
    border-bottom-color: var(--accent) !important;
}

/* Ошибка остаётся фирменной, но не создаёт отдельную полосу */



/* =========================================================
   KANTEMIROV — SCALE / DIGITAL BLOCK
   ========================================================= */

.scale-block {
    position: relative;
    padding: 120px 0 140px;
    overflow: hidden;
}

.scale-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
    gap: 80px;
    align-items: end;
    margin-top: 55px;
}

.scale-heading h2 {
    margin: 0;
    font-size: clamp(48px, 6.5vw, 105px);
    line-height: .86;
    letter-spacing: -.065em;
    font-weight: 900;
}

.scale-heading h2 em {
    color: var(--accent);
    font-style: normal;
}

.scale-heading p {
    max-width: 390px;
    margin: 0 0 8px;
    color: rgba(255,255,255,.5);
    font-size: 15px;
    line-height: 1.65;
}

.scale-block .scale-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 95px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.scale-block .scale-item {
    position: relative;
    min-height: 210px;
    padding: 28px 28px 28px 0;
    border-right: 1px solid rgba(255,255,255,.12);
    transition:
        background .35s ease,
        padding .35s ease;
}

.scale-block .scale-item:not(:first-child) {
    padding-left: 28px;
}

.scale-block .scale-item:last-child {
    border-right: 0;
}

.scale-block .scale-item:hover {
    background: rgba(255,255,255,.025);
}

.scale-index {
    display: block;
    margin-bottom: 65px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.scale-block .scale-item strong {
    display: block;
    margin-bottom: 12px;
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: .95;
    letter-spacing: -.045em;
    font-weight: 900;
}

.scale-block .scale-item > span:last-child {
    display: block;
    color: rgba(255,255,255,.42);
    font-size: 13px;
    line-height: 1.5;
}

.scale-block .scale-item::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 24px;
    color: rgba(255,255,255,.22);
    font-size: 18px;
    transition:
        color .3s ease,
        transform .3s ease;
}

.scale-block .scale-item:hover::after {
    color: var(--accent);
    transform: translate(3px,-3px);
}

@media (max-width: 900px) {

    .scale-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    .scale-block .scale-item:nth-child(2) {
        border-right: 0;
    }

    .scale-block .scale-item:nth-child(3),
    .scale-block .scale-item:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,.12);
    }
}

@media (max-width: 600px) {

    .scale-block {
        padding: 80px 0 90px;
    }

    .scale-heading {
        margin-top: 35px;
    }

    .scale-heading h2 {
        font-size: clamp(42px, 13vw, 70px);
    }

    .scale-heading p {
        font-size: 14px;
    }

    .scale-block .scale-grid {
        grid-template-columns: 1fr;
        margin-top: 55px;
    }

    .scale-block .scale-item,
    .scale-block .scale-item:not(:first-child) {
        min-height: 175px;
        padding: 25px 0;
        border-right: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .scale-block .scale-item:first-child {
        border-top: 0;
    }

    .scale-index {
        margin-bottom: 45px;
    }
}


/* =========================================================
   KANTEMIROV — PREMIUM LIGHT & MOTION
   Дополнительный визуальный слой.
   Не меняет структуру сайта.
========================================================= */

/* ---------- GLOBAL ATMOSPHERE ---------- */

body {
    background:
        radial-gradient(
            900px 600px at 82% 8%,
            rgba(200,255,0,.045),
            transparent 65%
        ),
        radial-gradient(
            700px 500px at 12% 42%,
            rgba(255,255,255,.025),
            transparent 70%
        ),
        #0D0F0F;
}

/* мягкое свечение поверх страницы */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9990;

    background:
        radial-gradient(
            500px 300px at 75% 15%,
            rgba(200,255,0,.035),
            transparent 70%
        );

    opacity: .8;
    animation: ambientLight 12s ease-in-out infinite alternate;
}

@keyframes ambientLight {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
        opacity: .55;
    }

    100% {
        transform: translate3d(2%, 2%, 0) scale(1.08);
        opacity: .9;
    }
}


/* ---------- HERO LIGHT ---------- */

.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;

    width: 55vw;
    height: 55vw;

    right: -22vw;
    top: -18vw;

    background: radial-gradient(
        circle,
        rgba(200,255,0,.08) 0%,
        rgba(200,255,0,.025) 28%,
        transparent 68%
    );

    filter: blur(18px);

    pointer-events: none;

    animation: heroGlow 9s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0% {
        transform: translate3d(-3%, 0, 0) scale(.92);
    }

    100% {
        transform: translate3d(4%, 5%, 0) scale(1.08);
    }
}


/* ---------- HERO IMAGE MOTION ---------- */

.hero-image img {
    transform: scale(1.03);
    transition:
        transform 1.8s cubic-bezier(.2,.7,.2,1),
        filter 1.2s ease;
}

.hero:hover .hero-image img {
    transform: scale(1.07);
}


/* ---------- LIGHT GRAIN ---------- */

body::after {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 9991;

    opacity: .025;

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

    mix-blend-mode: soft-light;
}


/* ---------- SECTION LABELS ---------- */

.section-label {
    transition:
        opacity .5s ease,
        transform .5s ease;
}

.section-label::after {
    transition:
        width .7s cubic-bezier(.2,.7,.2,1),
        opacity .5s ease;
}


/* ---------- CARDS ---------- */

.case-card,
.service-item,
.step-card {
    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        background .4s ease,
        border-color .4s ease;
}








/* ---------- IMAGE LIGHT SWEEP ---------- */






/* ---------- SERVICE MOTION ---------- */

.service-item {
    position: relative;
    overflow: hidden;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -110px;

    border-radius: 50%;

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

    transition:
        transform .8s ease,
        opacity .6s ease;

    opacity: 0;
}

.service-item:hover::after {
    transform: scale(1.6);
    opacity: 1;
}


/* ---------- PROCESS ---------- */

.step-card:hover {
    transform: translateY(-4px);
}

.step-number {
    transition:
        color .4s ease,
        transform .4s ease;
}

.step-card:hover .step-number {
    transform: translateX(6px);
}


/* ---------- BUTTONS ---------- */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transform: skewX(-20deg);

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

    pointer-events: none;
}

.btn:hover::after {
    left: 140%;
}


/* ---------- DIGITAL CURSOR LINE ---------- */

.main-nav a {
    transition:
        color .3s ease,
        letter-spacing .3s ease;
}

.main-nav a:hover {
    letter-spacing: .04em;
}


/* ---------- FORM LIGHT ---------- */

#projectForm {
    position: relative;
}

#projectForm input,
#projectForm textarea {
    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

#projectForm input:focus,
#projectForm textarea:focus {
    background: rgba(255,255,255,.045) !important;

    box-shadow:
        0 8px 35px rgba(0,0,0,.18),
        0 0 0 1px rgba(200,255,0,.04);
}

#projectForm button[type="submit"] {
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
}

#projectForm button[type="submit"]:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 45px rgba(200,255,0,.14);

    filter: brightness(1.04);
}


/* ---------- ACCESSIBILITY ---------- */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}


/* =========================================================
   KANTEMIROV — ANTI TEMPLATE VISUAL LAYER
========================================================= */

/*
 * Убираем ощущение готового UI-шаблона.
 * Фирменный зелёный остаётся только там,
 * где он действительно нужен.
 */

/* ---------- SECTION DECORATION ---------- */

.section-label::after {
    display: none !important;
}

/* ---------- NAV UNDERLINES ---------- */

.main-nav a::after {
    display: none !important;
}

/* ---------- SERVICE DECORATION ---------- */

.service-item::before {
    display: none !important;
}

.service-item:hover::before {
    display: none !important;
}

/* ---------- PROCESS DECORATION ---------- */





/* ---------- CLIENT LIST LINES ---------- */

.client-list div::after {
    display: none !important;
}

.client-list div:hover::after {
    display: none !important;
}

/* ---------- HEADER DECORATION ---------- */

header::after,
header.scrolled::after {
    display: none !important;
}

/* ---------- HERO UNDERLINE ---------- */

.hero h1 em::after {
    display: none !important;
}

/* ---------- FORM TOP DIGITAL LINE ---------- */

#form-section::before {
    display: none !important;
}

#form-section::after {
    display: none !important;
}

/* ---------- ROUND BUTTON GREEN FILL ---------- */

.round-link::before {
    opacity: .12 !important;
}

/* ---------- LESS GREEN, MORE LIGHT ---------- */

.section-label {
    color: rgba(255,255,255,.48) !important;
}

.step-number {
    color: rgba(255,255,255,.42) !important;
}

/* ---------- TYPOGRAPHIC AIR ---------- */

h1,
h2,
h3,
.section-heading h2,
.clients-title,
.final-heading h2 {
    letter-spacing: -.055em;
}

/* ---------- IMAGES BECOME THE VISUAL ACCENT ---------- */

.case-image,
.featured-image,
.hero-image {
    position: relative;
    overflow: hidden;
}

.case-image img,
.featured-image img,
.hero-image img {
    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1),
        filter 1.2s ease;
}



/* ---------- SUBTLE IMAGE LIGHT ---------- */



/* ---------- CARDS: LESS "UI", MORE EDITORIAL ---------- */

.case-card,
.service-item,
.step-card {
    border-radius: 0 !important;
}

/* ---------- HOVER WITHOUT TEMPLATE EFFECT ---------- */



.service-item:hover {
    transform: translateY(-3px);
}

/* ---------- GREEN ONLY AS MICRO ACCENT ---------- */



/* ---------- REMOVE EXCESSIVE GLOW ---------- */

body::before {
    opacity: .45;
}

body::after {
    opacity: .012;
}

/* ---------- DESKTOP AIR ---------- */

@media (min-width: 1100px) {

    .section-label {
        margin-bottom: 70px;
    }

    .section-heading {
        margin-bottom: 90px;
    }

    

}

/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

    .section-label {
        margin-bottom: 35px;
    }

    .section-heading {
        margin-bottom: 50px;
    }

}


/* =========================================================
   KANTEMIROV — DESKTOP HEADER SCALE
   Увеличиваем визуальный масштаб шапки на ПК
========================================================= */

@media (min-width: 901px) {

    header {
        min-height: 82px !important;
    }

    header .container,
    .header-inner {
        min-height: 82px !important;
    }

    /* Логотип */
    .logo,
    .header-logo,
    header .brand {
        font-size: 21px !important;
        letter-spacing: -.045em !important;
    }

    /* Навигация */
    .main-nav {
        gap: 34px !important;
    }

    .main-nav a {
        font-size: 14px !important;
        line-height: 1 !important;
        letter-spacing: -.015em !important;
    }

    /* CTA */
    .header-cta {
        min-height: 50px !important;
        padding: 0 25px !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: -.01em !important;
    }

    /* Чуть больше воздуха между логотипом,
       меню и кнопкой */
    

}


/* Большие мониторы */
@media (min-width: 1400px) {

    header {
        min-height: 88px !important;
    }

    header .container,
    .header-inner {
        min-height: 88px !important;
    }

    .logo,
    .header-logo,
    header .brand {
        font-size: 23px !important;
    }

    .main-nav {
        gap: 38px !important;
    }

    .main-nav a {
        font-size: 15px !important;
    }

    .header-cta {
        min-height: 52px !important;
        padding: 0 29px !important;
        font-size: 14px !important;
    }

}


/* Не даём мобильной версии унаследовать
   desktop-масштаб */
@media (max-width: 900px) {

    header .main-nav {
        gap: initial !important;
    }

}


/* =========================================================
   KANTEMIROV — PREMIUM SHRINK HEADER
========================================================= */

@media (min-width: 901px) {

    header {
        height: 82px !important;
        min-height: 82px !important;

        transition:
            height .55s cubic-bezier(.2,.7,.2,1),
            min-height .55s cubic-bezier(.2,.7,.2,1),
            background .45s ease,
            backdrop-filter .45s ease,
            box-shadow .45s ease;
    }

    header .container,
    header .header-inner {
        height: 82px !important;
        min-height: 82px !important;

        transition:
            height .55s cubic-bezier(.2,.7,.2,1),
            min-height .55s cubic-bezier(.2,.7,.2,1);
    }

    /* Логотип */
    header .logo,
    header .header-logo,
    header .brand {
        transform-origin: left center;

        transition:
            transform .5s cubic-bezier(.2,.7,.2,1),
            font-size .5s ease,
            opacity .3s ease;
    }

    /* Навигация */
    header .main-nav {
        transition:
            gap .5s cubic-bezier(.2,.7,.2,1);
    }

    header .main-nav a {
        transition:
            font-size .4s ease,
            opacity .3s ease,
            letter-spacing .4s ease;
    }

    /* Кнопка */
    header .header-cta {
        transition:
            min-height .5s cubic-bezier(.2,.7,.2,1),
            padding .5s cubic-bezier(.2,.7,.2,1),
            font-size .4s ease,
            transform .35s ease;
    }


    /* =====================================================
       SCROLLED
    ===================================================== */

    header.scrolled {
        height: 66px !important;
        min-height: 66px !important;

        background: rgba(8,8,8,.88) !important;

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

        box-shadow:
            0 10px 40px rgba(0,0,0,.28);
    }

    header.scrolled .container,
    header.scrolled .header-inner {
        height: 66px !important;
        min-height: 66px !important;
    }

    header.scrolled .logo,
    header.scrolled .header-logo,
    header.scrolled .brand {
        transform: scale(.88);
    }

    header.scrolled .main-nav {
        gap: 27px !important;
    }

    header.scrolled .main-nav a {
        font-size: 13px !important;
    }

    header.scrolled .header-cta {
        min-height: 42px !important;
        padding-left: 21px !important;
        padding-right: 21px !important;
        font-size: 12px !important;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    header {
        height: 88px !important;
        min-height: 88px !important;
    }

    header .container,
    header .header-inner {
        height: 88px !important;
        min-height: 88px !important;
    }

    header.scrolled {
        height: 68px !important;
        min-height: 68px !important;
    }

    header.scrolled .container,
    header.scrolled .header-inner {
        height: 68px !important;
        min-height: 68px !important;
    }

}


/* =========================================================
   MOBILE — НЕ ТРОГАЕМ
========================================================= */

@media (max-width: 900px) {

    header,
    header .container,
    header .header-inner {
        height: auto !important;
        min-height: 0 !important;
    }

}


/* =========================================================
   KANTEMIROV — HEADER FINAL POLISH
========================================================= */

@media (min-width: 901px) {

    header {
        background: linear-gradient(
            180deg,
            rgba(5,5,5,.78) 0%,
            rgba(5,5,5,.34) 100%
        ) !important;

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

    header.scrolled {
        background: rgba(7,7,7,.78) !important;

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

        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }

    /* Логотип остаётся главным якорем */
    header .logo,
    header .header-logo,
    header .brand {
        transition:
            transform .55s cubic-bezier(.2,.7,.2,1),
            opacity .4s ease;
    }

    header.scrolled .logo,
    header.scrolled .header-logo,
    header.scrolled .brand {
        transform: scale(.9);
    }

    /* Навигация чуть тише логотипа */
    header .main-nav a {
        opacity: .72;
    }

    header .main-nav a:hover {
        opacity: 1;
    }

    header.scrolled .main-nav a {
        opacity: .62;
    }

    header.scrolled .main-nav a:hover {
        opacity: 1;
    }

    /* CTA не должен выглядеть как обычная кнопка */
    header .header-cta {
        box-shadow: none !important;
    }

    header .header-cta:hover {
        transform: translateY(-1px);
        box-shadow:
            0 8px 30px rgba(200,255,0,.12) !important;
    }

}

/* =========================================================
   KANTEMIROV — HERO PREMIUM
   Только визуальная полировка.
   HTML и размеры layout не меняем.
========================================================= */

@media (min-width: 901px) {

    /* Фотография становится главным источником света */
    .hero-image img {
        opacity: .64 !important;
        filter:
            saturate(.72)
            contrast(1.04)
            brightness(.92) !important;

        transform: scale(1.045);
        transition:
            transform 2.2s cubic-bezier(.2,.65,.2,1),
            filter 1.2s ease,
            opacity 1.2s ease;
    }

    .hero:hover .hero-image img {
        transform: scale(1.065);
        filter:
            saturate(.78)
            contrast(1.04)
            brightness(.97) !important;
    }

    /* Вместо тяжёлой чёрной вуали — мягкий градиент */
    .hero-image-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.82) 0%,
                rgba(5,5,5,.48) 48%,
                rgba(5,5,5,.12) 100%
            ),
            linear-gradient(
                0deg,
                rgba(5,5,5,.64) 0%,
                transparent 46%
            ) !important;
    }

    /* Мягкий свет */
    .hero::before {
        content: "";
        position: absolute;

        width: 700px;
        height: 700px;

        right: -220px;
        top: -220px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(255,255,255,.055) 0%,
                rgba(200,255,0,.025) 25%,
                transparent 68%
            );

        filter: blur(20px);
        pointer-events: none;

        animation: heroAmbientLight 10s ease-in-out infinite alternate;
    }

    @keyframes heroAmbientLight {

        0% {
            transform: translate3d(-15px, 8px, 0) scale(.96);
            opacity: .55;
        }

        100% {
            transform: translate3d(18px, -12px, 0) scale(1.04);
            opacity: .9;
        }

    }

    /* Заголовок — спокойнее и массивнее */
    .hero h1 {
        letter-spacing: -.082em !important;
    }

    /* Убираем типичное зелёное подчёркивание */
    .hero h1 em::after {
        display: none !important;
    }

    /* Но оставляем очень тонкий фирменный акцент */
    .hero h1 em {
        color: #f2f2ee;
        text-shadow:
            0 0 35px rgba(255,255,255,.035);
    }

    /* Правый текст */
    .hero-side p {
        color: rgba(255,255,255,.66) !important;
        line-height: 1.65 !important;
    }

    /* Круглая CTA */
    .round-link {
        transition:
            transform .6s cubic-bezier(.2,.7,.2,1),
            border-color .5s ease,
            background .5s ease;
    }

    .round-link:hover {
        transform: translateY(-5px) rotate(-3deg);
        border-color: rgba(255,255,255,.8);
        background: rgba(255,255,255,.035);
    }

    /* Стрелка реагирует отдельно */
    .round-link b {
        transition:
            transform .45s cubic-bezier(.2,.7,.2,1);
    }

    .round-link:hover b {
        transform: translate(5px, 5px);
    }

    /* Верхняя служебная строка */
    .hero-top {
        opacity: .72;
    }

    /* Нижняя строка */
    .hero-bottom {
        opacity: .62;
    }

}


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

@media (max-width: 900px) {

    .hero-image img {
        opacity: .58 !important;
    }

    .hero-image-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.76),
                rgba(5,5,5,.28)
            ),
            linear-gradient(
                0deg,
                rgba(5,5,5,.7),
                transparent 55%
            ) !important;
    }

    .hero h1 em::after {
        display: none !important;
    }

}


/* =========================================================
   KANTEMIROV — HEADER HIDE / REVEAL
========================================================= */

@media (min-width: 901px) {

    header {
        transition:
            transform .55s cubic-bezier(.2,.7,.2,1),
            height .55s cubic-bezier(.2,.7,.2,1),
            min-height .55s cubic-bezier(.2,.7,.2,1),
            background .45s ease,
            box-shadow .45s ease !important;

        will-change: transform;
    }

    header.header-hidden {
        transform: translateY(-105%) !important;
    }

}


/* Mobile */

@media (max-width: 900px) {

    header {
        transition:
            transform .45s cubic-bezier(.2,.7,.2,1),
            background .35s ease !important;

        will-change: transform;
    }

    header.header-hidden {
        transform: translateY(-105%) !important;
    }

}


/* =========================================================
   KANTEMIROV — TRUE SMOOTH HEADER
========================================================= */

@media (min-width: 901px) {

    header {
        transform: translate3d(0, 0, 0) !important;

        transition:
            transform .7s cubic-bezier(.22,.61,.36,1) !important;

        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    header.header-hidden {
        transform: translate3d(0, -110%, 0) !important;
    }

}

@media (max-width: 900px) {

    header {
        transform: translate3d(0, 0, 0) !important;

        transition:
            transform .55s cubic-bezier(.22,.61,.36,1) !important;

        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    header.header-hidden {
        transform: translate3d(0, -110%, 0) !important;
    }

}

/* =========================================================
   KANTEMIROV — FINAL HEADER TRANSITION
========================================================= */

@media (min-width: 901px) {

    header {
        transform: translate3d(0,0,0) !important;

        transition:
            transform .65s cubic-bezier(.22,.61,.36,1) !important;

        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    header.header-hidden {
        transform: translate3d(0,-110%,0) !important;
    }

}

@media (max-width: 900px) {

    header {
        transform: translate3d(0,0,0) !important;

        transition:
            transform .5s cubic-bezier(.22,.61,.36,1) !important;

        will-change: transform;
    }

    header.header-hidden {
        transform: translate3d(0,-110%,0) !important;
    }

}


/* =========================================================
   KANTEMIROV — TYPOGRAPHY SYSTEM
========================================================= */

:root {
    --font-display: "Unbounded", sans-serif;
    --font-body: "Inter", sans-serif;
}

/* Основной текст */
html,
body {
    font-family: var(--font-body) !important;
}

/* Логотип */
.logo,
.site-logo,
header .logo {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
}

/* Все крупные заголовки */
h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.statement h2,
.clients-title,
.final-heading h2,
.team-copy h2,
.section-title {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
}

/* Навигация и служебные подписи */
.main-nav,
.main-nav a,
.header-cta,
.btn,
.eyebrow,
.section-label,
.hero-top,
.hero-bottom {
    font-family: var(--font-body) !important;
}

/* Бегущая строка */
.marquee,
.marquee-track,
.marquee-track span,
.marquee-track b {
    font-family: var(--font-display) !important;
}

/* Цифры / крупные акценты */
.scale-item strong,
.process-number,


/* Форма */
.project-form,
.project-form input,
.project-form textarea,
.project-form button,
.project-form label,
.form-status,
.form-error {
    font-family: var(--font-body) !important;
}

/* Текстовые ссылки */
p,
li,
input,
textarea,
button {
    font-family: var(--font-body) !important;
}

/* =========================================================
   HERO — 2026 EVENT IMAGE
========================================================= */

.hero-image img {
    opacity: .78 !important;
    filter:
        saturate(.82)
        contrast(1.03)
        brightness(.98) !important;

    transform: scale(1.035) !important;
    transition:
        transform 2.4s cubic-bezier(.2,.65,.2,1),
        opacity 1s ease,
        filter 1s ease !important;
}

.hero-image-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.30) 48%,
            rgba(0,0,0,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.48) 0%,
            rgba(0,0,0,.04) 58%,
            transparent 100%
        ) !important;
}

/* Мягкое свечение сцены */
.hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;

    width: 800px;
    height: 800px;

    right: -260px;
    top: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.055) 0%,
            rgba(200,255,0,.018) 28%,
            transparent 68%
        );

    filter: blur(25px);
    animation: heroLight 12s ease-in-out infinite alternate;
}

@keyframes heroLight {
    from {
        transform: translate3d(-15px, 10px, 0);
        opacity: .55;
    }

    to {
        transform: translate3d(15px, -10px, 0);
        opacity: .9;
    }
}

.hero-inner {
    z-index: 3;
}

@media (max-width: 900px) {

    .hero-image img {
        opacity: .68 !important;
    }

    .hero-image-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.62),
                rgba(0,0,0,.20)
            ),
            linear-gradient(
                0deg,
                rgba(0,0,0,.52),
                transparent 60%
            ) !important;
    }

}


/* =========================================================
   KANTEMIROV — HERO / PHOTO + TYPOGRAPHY
   FINAL OVERRIDE
========================================================= */

.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #0D0F0F;
    color: #fff;
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;

    opacity: .74 !important;

    filter:
        saturate(.82)
        contrast(1.06)
        brightness(.92) !important;

    transform: scale(1.035) !important;

    transition:
        transform 2.4s cubic-bezier(.2,.65,.2,1),
        opacity 1s ease;
}

.hero-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.58) 34%,
            rgba(0,0,0,.28) 68%,
            rgba(0,0,0,.38) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.66) 0%,
            rgba(0,0,0,.08) 55%,
            rgba(0,0,0,.28) 100%
        ) !important;
}

.hero-inner {
    position: relative;
    z-index: 5;

    min-height: 100svh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding-top: 150px;
    padding-bottom: 32px;
}

.hero-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: "Inter", sans-serif !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;

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

.hero-main {
    width: 100%;

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

    align-items: end;
    gap: 80px;
}

.hero-title-wrap {
    max-width: 820px;
}

.hero h1 {
    margin: 0;

    font-family: "Unbounded", sans-serif !important;
    font-size: clamp(58px, 7.2vw, 132px);
    font-weight: 800 !important;

    line-height: .84;
    letter-spacing: -.075em;

    color: #fff;

    text-wrap: balance;
}

.hero h1 em {
    position: relative;
    font-style: normal;
}

.hero-side {
    align-self: end;
    padding-bottom: 5px;
}

.hero-side p {
    margin: 0 0 38px;

    max-width: 260px;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;

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

.round-link {
    width: 145px;
    height: 145px;

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

    position: relative;

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

    color: #fff;

    font-family: "Inter", sans-serif !important;
    font-size: 10px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

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

.round-link b {
    position: absolute;
    right: 17px;
    bottom: 13px;

    color: var(--accent);
    font-size: 19px;
    line-height: 1;

    transition: transform .35s ease;
}

.round-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    transform: rotate(4deg) scale(1.03);
}

.round-link:hover b {
    color: #000;
    transform: translate(3px,-3px);
}

.hero-bottom {
    width: 100%;

    display: flex;
    justify-content: space-between;

    font-family: "Inter", sans-serif !important;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;

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

.hero:hover .hero-image img {
    transform: scale(1.055) !important;
}

@media (max-width: 900px) {

    .hero-inner {
        padding-top: 120px;
        padding-bottom: 25px;
    }

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

    .hero h1 {
        font-size: clamp(46px, 10vw, 82px);
        line-height: .86;
    }

    .hero-side {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 25px;
    }

    .hero-side p {
        margin-bottom: 0;
    }

    .round-link {
        width: 110px;
        height: 110px;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {

    .hero-inner {
        padding-top: 105px;
    }

    .hero-top {
        font-size: 8px;
    }

    .hero h1 {
        font-size: clamp(40px, 12vw, 65px);
    }

    .hero-side {
        display: block;
    }

    .hero-side p {
        font-size: 13px;
        margin-bottom: 28px;
    }

    .hero-bottom {
        font-size: 8px;
    }

    .hero-bottom span:nth-child(2) {
        display: none;
    }

    .round-link {
        width: 105px;
        height: 105px;
    }
}

/* =========================================================

/* =========================================================
   FINAL CTA — CLEAN TYPOGRAPHY
========================================================= */

.final-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 80px;
    align-items: end;

    padding: 90px 0 60px;
}

.final-heading h2 {
    margin: 0;
    min-width: 0;

    font-family: "Unbounded", sans-serif;
    font-size: clamp(48px, 5.4vw, 92px);
    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 800;
}

.final-heading h2 em {
    color: var(--accent);
    font-style: normal;
}

.final-heading p {
    width: 100%;
    max-width: 300px;

    margin: 0;

    color: rgba(255,255,255,.68);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* Планшет */
@media (max-width: 900px) {
    .final-heading {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 40px;
    }

    .final-heading h2 {
        font-size: clamp(40px, 6vw, 70px);
    }

    .final-heading p {
        max-width: 260px;
    }
}

/* Телефон */
@media (max-width: 700px) {
    .final-heading {
        display: block;
        padding: 60px 0 50px;
    }

    .final-heading h2 {
        font-size: clamp(38px, 10vw, 62px);
        margin-bottom: 32px;
    }

    .final-heading p {
        max-width: 420px;
    }
}

/* 2026-08-12 — Hide toast notification frame */
.toast,
.toast.active {
    display: none !important;
}

/* =========================================================
   2026-08-12 — MOBILE ARROWS / SAFARI FIX
   Нормализуем символ ↗ на iPhone / iOS Safari
   ========================================================= */

@media (max-width: 700px) {

    .service-arrow,
    .form-submit span,
    .client-list div::after,
    .scale-block .scale-item::after {
        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Helvetica Neue",
            Arial,
            sans-serif !important;

        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        text-rendering: geometricPrecision !important;
        -webkit-font-smoothing: antialiased !important;
    }

    .service-arrow {
        font-size: 20px !important;
        transform-origin: center center !important;
    }

.client-list div::after {
        font-size: 18px !important;
    }

    .scale-block .scale-item::after {
        font-size: 18px !important;
    }
}


/* =========================================================
   2026-08-12 — CSS DRAWN ARROWS
   Убираем Unicode ↗ и рисуем стрелки CSS.
   Safari / iOS больше не зависит от шрифта символа.
   ========================================================= */

/* SERVICE ARROW */

.service-arrow {
    width: 18px !important;
    height: 18px !important;

    display: block !important;

    font-size: 0 !important;
    line-height: 0 !important;

    position: absolute !important;
    top: 28px !important;
    right: 0 !important;

    color: #999 !important;

    transform: none !important;
}

.service-arrow::before {
    content: "" !important;

    position: absolute !important;

    width: 11px !important;
    height: 1.5px !important;

    right: 1px !important;
    top: 11px !important;

    background: currentColor !important;

    transform: rotate(-45deg) !important;
    transform-origin: right center !important;
}

.service-arrow::after {
    content: "" !important;

    position: absolute !important;

    width: 7px !important;
    height: 7px !important;

    right: 1px !important;
    top: 4px !important;

    border-top: 1.5px solid currentColor !important;
    border-right: 1.5px solid currentColor !important;

    transform: rotate(0deg) !important;
}

/* BUTTON ARROW */







/* CLIENT LIST ARROWS */

.client-list div::after {
    content: "" !important;

    width: 15px !important;
    height: 15px !important;

    right: 0 !important;
    top: 50% !important;

    border-top: 1.5px solid currentColor !important;
    border-right: 1.5px solid currentColor !important;

    transform: translate(-15px, -50%) rotate(0deg) !important;

    font-size: 0 !important;
}

/* SCALE BLOCK ARROWS */

.scale-block .scale-item::after {
    content: "" !important;

    width: 14px !important;
    height: 14px !important;

    right: 24px !important;
    bottom: 24px !important;

    border-top: 1.5px solid currentColor !important;
    border-right: 1.5px solid currentColor !important;

    transform: rotate(0deg) !important;

    font-size: 0 !important;
}

/* MOBILE */

@media (max-width: 700px) {

    .service-arrow {
        width: 17px !important;
        height: 17px !important;
    }

    

    .client-list div::after {
        width: 14px !important;
        height: 14px !important;
    }

    .scale-block .scale-item::after {
        width: 13px !important;
        height: 13px !important;
    }
}


/* =========================================================
   FINAL ARROW FIX — 2026-08-12
   No Unicode arrow characters.
   Pure CSS arrow prevents iOS Safari emoji rendering.
   ========================================================= */

.arrow-css {
    position: relative !important;

    display: inline-block !important;

    width: 18px !important;
    height: 18px !important;

    margin-left: 7px !important;

    vertical-align: middle !important;

    font-size: 0 !important;
    line-height: 0 !important;

    color: currentColor !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}

.arrow-css::before {
    content: "" !important;

    position: absolute !important;

    width: 11px !important;
    height: 1.5px !important;

    left: 2px !important;
    top: 10px !important;

    background: currentColor !important;

    transform: rotate(-45deg) !important;
    transform-origin: right center !important;

    border: 0 !important;
}

.arrow-css::after {
    content: "" !important;

    position: absolute !important;

    width: 7px !important;
    height: 7px !important;

    right: 1px !important;
    top: 3px !important;

    background: transparent !important;

    border-top: 1.5px solid currentColor !important;
    border-right: 1.5px solid currentColor !important;

    transform: none !important;

    box-shadow: none !important;
}

/* SERVICE ARROWS */

.service-arrow.arrow-css {
    position: absolute !important;

    top: 28px !important;
    right: 0 !important;

    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;

    color: #999 !important;

    transform: none !important;
}

/* HERO ROUND CTA */

.round-link .arrow-css {
    position: absolute !important;

    right: 28px !important;
    bottom: 28px !important;

    margin: 0 !important;

    color: #fff !important;

    z-index: 5 !important;
}

/* FORM BUTTON */

/* MOBILE */

@media (max-width: 700px) {

    .arrow-css {
        width: 17px !important;
        height: 17px !important;
    }

    .service-arrow.arrow-css {
        width: 17px !important;
        height: 17px !important;
    }

    .round-link .arrow-css {
        right: 25px !important;
        bottom: 25px !important;
    }
}


/* =========================================================
   2026-08-12 — REMOVE ALL DECORATIVE ARROWS
   Все стрелки на сайте отключены.
   Кнопки и ссылки сохраняют функциональность.
   ========================================================= */

.service-arrow,
.arrow-css,
.round-link > b,
.client-list div::after,
.scale-block .scale-item::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   KANTEMIROV — FINAL MOBILE LAYOUT
   2026-08-12
   Desktop styles are not changed.
   ========================================================= */

@media (max-width: 700px) {

    /* ---------- BASE ---------- */

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

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    img,
    video,
    svg {
        max-width: 100%;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }


    /* ---------- HEADER ---------- */

    header,
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .nav-wrapper {
        min-height: 64px !important;
        height: 64px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .logo {
        font-size: 16px !important;
        letter-spacing: -.045em !important;
        white-space: nowrap;
    }

    .main-nav,
    .header-cta {
        display: none !important;
    }

    .burger-btn {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
    }


    /* ---------- MOBILE MENU ---------- */

    .mobile-menu {
        padding:
            calc(20px + env(safe-area-inset-top))
            20px
            calc(25px + env(safe-area-inset-bottom))
            20px !important;
    }

    .mobile-menu .logo {
        font-size: 17px !important;
    }

    .mobile-menu nav {
        margin-top: 45px !important;
    }

    .mobile-menu nav a {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }


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

    .hero {
        min-height: 100svh !important;
        min-height: 100dvh !important;
        height: auto !important;
    }

    .hero-image {
        position: absolute !important;
        inset: 0 !important;
    }

    .hero-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    .hero-inner {
        min-height: 100svh !important;
        min-height: 100dvh !important;

        padding-top: calc(88px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .hero-top {
        font-size: 8px !important;
        letter-spacing: .12em !important;
        gap: 15px !important;
    }

    .hero-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
    }

    .hero-title-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero h1 {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(36px, 11.5vw, 58px) !important;
        line-height: .88 !important;
        letter-spacing: -.065em !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .hero-side {
        width: 100% !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 20px !important;
    }

    .hero-side p {
        max-width: 230px !important;
        margin: 0 !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .round-link {
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
        flex-shrink: 0 !important;

        font-size: 8px !important;
        letter-spacing: .08em !important;
    }

    .hero-bottom {
        font-size: 7px !important;
        letter-spacing: .1em !important;
        gap: 12px !important;
    }

    .hero-bottom span {
        white-space: nowrap !important;
    }

    .hero-bottom span:nth-child(2) {
        display: none !important;
    }


    /* ---------- MARQUEE ---------- */

    .marquee {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .marquee-track {
        width: max-content !important;
    }

    .marquee-group {
        flex-shrink: 0 !important;
    }


    /* ---------- GENERAL SECTIONS ---------- */

    .section {
        width: 100% !important;
        overflow: hidden !important;
    }

    .section-label {
        width: 100% !important;
        margin-bottom: 35px !important;

        font-size: 8px !important;
        letter-spacing: .13em !important;
    }


    /* ---------- ABOUT ---------- */

    .statement {
        padding-top: 75px !important;
        padding-bottom: 80px !important;
    }

    .statement-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
    }

    .statement-grid h2 {
        max-width: 100% !important;
        font-size: clamp(38px, 11vw, 58px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
    }

    .statement-copy {
        max-width: 100% !important;
    }

    .statement-copy .lead {
        font-size: 19px !important;
        line-height: 1.35 !important;
    }

    .statement-copy p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /* ---------- SERVICES ---------- */

    .services {
        padding-top: 75px !important;
        padding-bottom: 80px !important;
    }

    .section-heading {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        margin-bottom: 45px !important;
    }

    .section-heading h2 {
        font-size: clamp(40px, 11vw, 60px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
    }

    .section-heading p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .service-list {
        width: 100% !important;
    }

    .service-item {
        min-height: 0 !important;
        padding: 24px 0 !important;

        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        column-gap: 15px !important;
        row-gap: 15px !important;
    }

    .service-number {
        font-size: 9px !important;
        padding-top: 4px !important;
    }

    .service-content {
        min-width: 0 !important;
    }

    .service-content h3 {
        font-size: clamp(21px, 6vw, 30px) !important;
        line-height: .95 !important;
        letter-spacing: -.045em !important;
    }

    .service-content p {
        max-width: 100% !important;
        margin-top: 14px !important;

        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .service-image {
        grid-column: 1 / -1 !important;
        position: relative !important;

        width: 100% !important;
        height: 190px !important;

        opacity: 1 !important;
        transform: none !important;
    }

    .service-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .service-arrow,
    .arrow-css,
    .round-link > b,
    .client-list div::after,
    .scale-block .scale-item::after {
        display: none !important;
        content: none !important;
    }


    /* ---------- FEATURED PROJECT ---------- */

    .featured-case {
        overflow: hidden !important;
    }

    .featured-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .featured-top h2 {
        font-size: clamp(38px, 11vw, 58px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
    }

    .featured-intro {
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    

    

    

    .case-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        padding-top: 28px !important;
    }

    .case-bottom p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /* ---------- PROCESS ---------- */

    .process-section {
        padding-top: 75px !important;
    }

    .process-heading {
        margin-bottom: 40px !important;
    }

    .process-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .step-card {
        min-height: 0 !important;
        padding: 28px 0 !important;
    }

    .step-card h3 {
        font-size: 21px !important;
    }

    .step-card p {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


    /* ---------- SCALE ---------- */

    .scale-block {
        width: 100% !important;
        overflow: hidden !important;
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .scale-heading {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .scale-heading h2 {
        font-size: clamp(38px, 10vw, 56px) !important;
        line-height: .92 !important;
        letter-spacing: -.055em !important;
    }

    .scale-heading p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .scale-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 35px !important;
    }

    .scale-item {
        min-height: 0 !important;
        padding: 25px 0 !important;
    }


    /* ---------- CLIENTS ---------- */

    .clients {
        padding-top: 75px !important;
        padding-bottom: 80px !important;
    }

    .clients-title {
        font-size: clamp(40px, 11vw, 58px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
        margin-bottom: 45px !important;
    }

    .client-list {
        width: 100% !important;
    }

    .client-list div {
        min-height: 0 !important;
        padding: 19px 0 !important;
        padding-right: 0 !important;

        font-size: 12px !important;
        line-height: 1.3 !important;
    }


    /* ---------- FINAL CTA ---------- */

    .final-cta {
        overflow: hidden !important;
    }

    .final-heading {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;

        padding: 65px 0 45px !important;
    }

    .final-heading h2 {
        font-size: clamp(34px, 9.8vw, 54px) !important;
        line-height: .94 !important;
        letter-spacing: -.055em !important;
    }

    .final-heading p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .project-form {
        width: 100% !important;
    }

    .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .project-form label {
        width: 100% !important;
    }

    .project-form input,
    .project-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;

        font-size: 16px !important;
    }

    .project-form textarea {
        min-height: 140px !important;
    }

    .consent {
        display: grid !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .consent span {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

/* ---------- FOOTER ---------- */

    footer {
        overflow: hidden !important;
    }

    .footer-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        padding-top: 55px !important;
        padding-bottom: 45px !important;
    }

    .footer-brand p {
        max-width: 260px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .footer-contact {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;

        padding-top: 20px !important;
        padding-bottom: calc(25px + env(safe-area-inset-bottom)) !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .container {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }

    .hero-inner {
        padding-top: calc(82px + env(safe-area-inset-top)) !important;
    }

    .hero h1 {
        font-size: clamp(33px, 10.8vw, 48px) !important;
    }

    .hero-side p {
        max-width: 205px !important;
        font-size: 11px !important;
    }

    .round-link {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
    }

    .service-image {
        height: 165px !important;
    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .hero:hover .hero-image img,
    .service-item:hover .service-image,
    .service-item:hover .service-arrow {
        transform: none !important;
    }

    .service-item:hover::before {
        width: 0 !important;
    }

}

/* =========================================================
   KANTEMIROV — FINAL MOBILE LAYOUT
   2026-08-12
   Desktop styles are not changed.
   ========================================================= */

@media (max-width: 700px) {

    /* ---------- BASE ---------- */

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

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    img,
    video,
    svg {
        max-width: 100%;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }


    /* ---------- HEADER ---------- */

    header,
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .nav-wrapper {
        min-height: 64px !important;
        height: 64px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .logo {
        font-size: 16px !important;
        letter-spacing: -.045em !important;
        white-space: nowrap;
    }

    .main-nav,
    .header-cta {
        display: none !important;
    }

    .burger-btn {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
    }


    /* ---------- MOBILE MENU ---------- */

    .mobile-menu {
        padding:
            calc(20px + env(safe-area-inset-top))
            20px
            calc(25px + env(safe-area-inset-bottom))
            20px !important;
    }

    .mobile-menu .logo {
        font-size: 17px !important;
    }

    .mobile-menu nav {
        margin-top: 45px !important;
    }

    .mobile-menu nav a {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }


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

    .hero {
        min-height: 100svh !important;
        min-height: 100dvh !important;
        height: auto !important;
    }

    .hero-image {
        position: absolute !important;
        inset: 0 !important;
    }

    .hero-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }

    .hero-inner {
        min-height: 100svh !important;
        min-height: 100dvh !important;

        padding-top: calc(88px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .hero-top {
        font-size: 8px !important;
        letter-spacing: .12em !important;
        gap: 15px !important;
    }

    .hero-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
    }

    .hero-title-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero h1 {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(36px, 11.5vw, 58px) !important;
        line-height: .88 !important;
        letter-spacing: -.065em !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .hero-side {
        width: 100% !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 20px !important;
    }

    .hero-side p {
        max-width: 230px !important;
        margin: 0 !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .round-link {
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
        flex-shrink: 0 !important;

        font-size: 8px !important;
        letter-spacing: .08em !important;
    }

    .hero-bottom {
        font-size: 7px !important;
        letter-spacing: .1em !important;
        gap: 12px !important;
    }

    .hero-bottom span {
        white-space: nowrap !important;
    }

    .hero-bottom span:nth-child(2) {
        display: none !important;
    }


    /* ---------- MARQUEE ---------- */

    .marquee {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .marquee-track {
        width: max-content !important;
    }

    .marquee-group {
        flex-shrink: 0 !important;
    }


    /* ---------- GENERAL SECTIONS ---------- */

    .section {
        width: 100% !important;
        overflow: hidden !important;
    }

    .section-label {
        width: 100% !important;
        margin-bottom: 35px !important;

        font-size: 8px !important;
        letter-spacing: .13em !important;
    }


    /* ---------- ABOUT ---------- */

    .statement {
        padding-top: 75px !important;
        padding-bottom: 80px !important;
    }

    .statement-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
    }

    .statement-grid h2 {
        max-width: 100% !important;
        font-size: clamp(38px, 11vw, 58px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
    }

    .statement-copy {
        max-width: 100% !important;
    }

    .statement-copy .lead {
        font-size: 19px !important;
        line-height: 1.35 !important;
    }

    .statement-copy p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /* ---------- SERVICES ---------- */

    .services {
        padding-top: 75px !important;
        padding-bottom: 80px !important;
    }

    .section-heading {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        margin-bottom: 45px !important;
    }

    .section-heading h2 {
        font-size: clamp(40px, 11vw, 60px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
    }

    .section-heading p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .service-list {
        width: 100% !important;
    }

    .service-item {
        min-height: 0 !important;
        padding: 24px 0 !important;

        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        column-gap: 15px !important;
        row-gap: 15px !important;
    }

    .service-number {
        font-size: 9px !important;
        padding-top: 4px !important;
    }

    .service-content {
        min-width: 0 !important;
    }

    .service-content h3 {
        font-size: clamp(21px, 6vw, 30px) !important;
        line-height: .95 !important;
        letter-spacing: -.045em !important;
    }

    .service-content p {
        max-width: 100% !important;
        margin-top: 14px !important;

        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .service-image {
        grid-column: 1 / -1 !important;
        position: relative !important;

        width: 100% !important;
        height: 190px !important;

        opacity: 1 !important;
        transform: none !important;
    }

    .service-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .service-arrow,
    .arrow-css,
    .round-link > b,
    .client-list div::after,
    .scale-block .scale-item::after {
        display: none !important;
        content: none !important;
    }


    /* ---------- FEATURED PROJECT ---------- */

    .featured-case {
        overflow: hidden !important;
    }

    .featured-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .featured-top h2 {
        font-size: clamp(38px, 11vw, 58px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
    }

    .featured-intro {
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    

    

    

    .case-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        padding-top: 28px !important;
    }

    .case-bottom p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    /* ---------- PROCESS ---------- */

    .process-section {
        padding-top: 75px !important;
    }

    .process-heading {
        margin-bottom: 40px !important;
    }

    .process-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .step-card {
        min-height: 0 !important;
        padding: 28px 0 !important;
    }

    .step-card h3 {
        font-size: 21px !important;
    }

    .step-card p {
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }


    /* ---------- SCALE ---------- */

    .scale-block {
        width: 100% !important;
        overflow: hidden !important;
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .scale-heading {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .scale-heading h2 {
        font-size: clamp(38px, 10vw, 56px) !important;
        line-height: .92 !important;
        letter-spacing: -.055em !important;
    }

    .scale-heading p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .scale-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 35px !important;
    }

    .scale-item {
        min-height: 0 !important;
        padding: 25px 0 !important;
    }


    /* ---------- CLIENTS ---------- */

    .clients {
        padding-top: 75px !important;
        padding-bottom: 80px !important;
    }

    .clients-title {
        font-size: clamp(40px, 11vw, 58px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
        margin-bottom: 45px !important;
    }

    .client-list {
        width: 100% !important;
    }

    .client-list div {
        min-height: 0 !important;
        padding: 19px 0 !important;
        padding-right: 0 !important;

        font-size: 12px !important;
        line-height: 1.3 !important;
    }


    /* ---------- FINAL CTA ---------- */

    .final-cta {
        overflow: hidden !important;
    }

    .final-heading {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;

        padding: 65px 0 45px !important;
    }

    .final-heading h2 {
        font-size: clamp(34px, 9.8vw, 54px) !important;
        line-height: .94 !important;
        letter-spacing: -.055em !important;
    }

    .final-heading p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .project-form {
        width: 100% !important;
    }

    .form-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .project-form label {
        width: 100% !important;
    }

    .project-form input,
    .project-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;

        font-size: 16px !important;
    }

    .project-form textarea {
        min-height: 140px !important;
    }

    .consent {
        display: grid !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    .consent span {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

/* ---------- FOOTER ---------- */

    footer {
        overflow: hidden !important;
    }

    .footer-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        padding-top: 55px !important;
        padding-bottom: 45px !important;
    }

    .footer-brand p {
        max-width: 260px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .footer-contact {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;

        padding-top: 20px !important;
        padding-bottom: calc(25px + env(safe-area-inset-bottom)) !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .container {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }

    .hero-inner {
        padding-top: calc(82px + env(safe-area-inset-top)) !important;
    }

    .hero h1 {
        font-size: clamp(33px, 10.8vw, 48px) !important;
    }

    .hero-side p {
        max-width: 205px !important;
        font-size: 11px !important;
    }

    .round-link {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
    }

    .service-image {
        height: 165px !important;
    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .hero:hover .hero-image img,
    .service-item:hover .service-image,
    .service-item:hover .service-arrow {
        transform: none !important;
    }

    .service-item:hover::before {
        width: 0 !important;
    }

}

/* =========================================================
   BURGER MENU — FINAL
   3 clean horizontal lines
   ========================================================= */

.burger-btn {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;

    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
}

.burger-btn span {
    display: block !important;

    width: 30px !important;
    height: 2px !important;

    min-width: 30px !important;
    max-width: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    border: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}

/* Mobile */
@media (max-width: 700px) {
    .burger-btn {
        width: 42px !important;
        height: 42px !important;
        gap: 6px !important;
    }

    .burger-btn span {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 2px !important;
    }
}


/* =========================================================
   MOBILE HERO — KANTEMIROV TEAM
   2026-08-12
   ========================================================= */

@media (max-width: 700px) {

    /* HEADER */

    .site-header .nav-wrapper {
        height: 68px !important;
        padding-left: 18px !important;
        padding-right: 14px !important;
    }

    .site-header .logo {
        font-size: 15px !important;
        letter-spacing: -.055em !important;
        white-space: nowrap !important;
    }

    .main-nav,
    .header-cta {
        display: none !important;
    }

    .burger-btn {
        flex-shrink: 0 !important;
    }


    /* HERO */

    .hero {
        min-height: 100svh !important;
        min-height: 100vh !important;
    }

    .hero-inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-top: 88px !important;
        padding-bottom: 28px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .hero-top {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .hero-top .eyebrow {
        font-size: 9px !important;
        letter-spacing: .12em !important;
    }

    .hero-index {
        font-size: 9px !important;
        white-space: nowrap !important;
    }


    /* HERO TITLE */

    .hero-main {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        gap: 28px !important;

        width: 100% !important;
    }

    .hero-title-wrap {
        width: 100% !important;
        max-width: none !important;
    }

    .hero h1 {
        font-size: clamp(46px, 13.2vw, 76px) !important;
        line-height: .86 !important;
        letter-spacing: -.07em !important;
        max-width: 100% !important;
    }


    /* HERO DESCRIPTION + CTA */

    .hero-side {
        width: 100% !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 20px !important;
    }

    .hero-side p {
        max-width: 220px !important;
        margin: 0 !important;

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

    .round-link {
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
        flex-shrink: 0 !important;
    }

    .round-link span {
        font-size: 9px !important;
        line-height: 1.25 !important;
    }


    /* BOTTOM META */

    .hero-bottom {
        width: 100% !important;

        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        gap: 10px !important;
    }

    .hero-bottom span {
        font-size: 8px !important;
        letter-spacing: .08em !important;
        white-space: nowrap !important;
    }

    .hero-bottom span:last-child {
        text-align: right !important;
    }


    /* IMAGE */

    .hero-image img {
        transform: scale(1.01) !important;
        object-position: center center !important;
    }

}


/* SMALL PHONES */

@media (max-width: 390px) {

    .site-header .nav-wrapper {
        padding-left: 15px !important;
        padding-right: 11px !important;
    }

    .site-header .logo {
        font-size: 14px !important;
    }

    .hero-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero h1 {
        font-size: clamp(42px, 12.8vw, 62px) !important;
    }

    .hero-side p {
        max-width: 190px !important;
        font-size: 10px !important;
    }

    .round-link {
        width: 82px !important;
        height: 82px !important;
        min-width: 82px !important;
    }

    .hero-bottom span {
        font-size: 7px !important;
    }

}

/* =========================================================
   SERVICES — MOBILE
   2026-08-12
   ========================================================= */

@media (max-width: 700px) {

    .service-list {
        width: 100% !important;
    }

    .service-item {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

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

        padding: 24px 0 28px !important;
        margin: 0 !important;

        gap: 18px !important;

        overflow: hidden !important;

        background: transparent !important;
    }

    /* отключаем desktop hover */

    .service-item::before {
        display: none !important;
    }

    .service-item:hover {
        padding-left: 0 !important;
        background: transparent !important;
    }

    /* NUMBER */

    .service-number {
        display: block !important;

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

        color: #888 !important;

        margin: 0 !important;
    }

    /* CONTENT */

    .service-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .service-content h3 {
        width: 100% !important;

        font-size: clamp(30px, 9vw, 48px) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;

        margin: 0 !important;
    }

    .service-content p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 14px 0 0 !important;

        font-size: 12px !important;
        line-height: 1.5 !important;

        color: #666 !important;
    }

    /* IMAGE */

    .service-image {
        display: block !important;

        width: 100% !important;
        height: 180px !important;

        margin: 0 !important;

        opacity: 1 !important;
        transform: none !important;

        overflow: hidden !important;
    }

    .service-image img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

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

        transform: none !important;
    }

    .service-item:hover .service-image {
        opacity: 1 !important;
        transform: none !important;
    }

    .service-item:hover .service-number,
    .service-item:hover .service-content p {
        color: inherit !important;
    }

    /* NO ARROWS */

    .service-arrow {
        display: none !important;
    }

}


/* SMALL PHONES */

@media (max-width: 390px) {

    .service-item {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
        gap: 15px !important;
    }

    .service-content h3 {
        font-size: clamp(28px, 9vw, 40px) !important;
    }

    .service-content p {
        font-size: 11px !important;
    }

    .service-image {
        height: 155px !important;
    }

}


/* =========================================================
   KANTEMIROV TEAM — TYPOGRAPHY REFINEMENT
   2026-08-14
   More air in uppercase headings + clearer small text
   ========================================================= */


/* ---------------------------------------------------------
   LARGE HEADINGS
   --------------------------------------------------------- */

h1,
h2,
h3,
.service-content h3,
.section-heading h2,
.featured-case h2,
.process-section h2,
.scale-block h2,
.clients-title,
.final-heading h2 {
    letter-spacing: -.045em;
}


/* Hero — preserve the large editorial character */

.hero h1 {
    letter-spacing: -.055em !important;
}


/* ---------------------------------------------------------
   SECTION LABELS
   --------------------------------------------------------- */

.section-label,
.eyebrow,
.hero-index,
.case-meta,
.case-number,
.case-location,
.step-number,
.scale-index {
    letter-spacing: .14em !important;
}


/* ---------------------------------------------------------
   UPPERCASE NAVIGATION / MICRO UI
   --------------------------------------------------------- */

.main-nav a,
.btn,
.header-cta,
.mobile-cta,
.round-link span,
.form-submit,
.footer-bottom,
.footer-links,
.client-list,
.service-number {
    letter-spacing: .09em;
}


/* ---------------------------------------------------------
   SMALL BODY TEXT
   --------------------------------------------------------- */

.service-content p,
.hero-side p,
.section-heading > p,
.process-item p,
.scale-item p,
.client-list div,
.case-description,
.final-heading p {
    font-size: 14px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   SMALL SECONDARY TEXT
   --------------------------------------------------------- */

.case-meta,
.case-location,
.step-number,
.scale-index,
.service-number {
    font-size: 11px;
}


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

.main-nav a {
    font-size: 12px;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.footer-bottom {
    font-size: 11px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   MOBILE TYPOGRAPHY
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .hero h1 {
        letter-spacing: -.06em !important;
    }

    h2,
    .section-heading h2,
    .featured-case h2,
    .process-section h2,
    .scale-block h2,
    .clients-title,
    .final-heading h2 {
        letter-spacing: -.04em !important;
    }

    .section-label,
    .eyebrow,
    .hero-index,
    .case-meta,
    .case-number,
    .case-location,
    .step-number,
    .scale-index {
        letter-spacing: .11em !important;
    }

    .service-content p,
    .hero-side p,
    .section-heading > p,
    .process-item p,
    .scale-item p,
    .client-list div,
    .case-description,
    .final-heading p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .service-number,
    .step-number,
    .scale-index,
    .case-meta {
        font-size: 9px !important;
    }

}


/* ---------------------------------------------------------
   VERY SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 390px) {

    .service-content p,
    .hero-side p,
    .section-heading > p,
    .process-item p,
    .scale-item p,
    .client-list div,
    .case-description,
    .final-heading p {
        font-size: 12px !important;
    }

}


/* =========================================================
   KANTEMIROV TEAM — MORE AIR IN TEXT
   ========================================================= */

.service-content p,
.hero-side p,
.section-heading > p,
.process-item p,
.scale-item p,
.client-list div,
.case-description,
.final-heading p {
    line-height: 1.7 !important;
}

/* Служебные и короткие подписи */
.case-meta,
.case-location,
.step-number,
.scale-index,
.service-number,
.section-label,
.hero-index {
    line-height: 1.5 !important;
}

/* Навигация и кнопки */
.main-nav a,
.btn,
.header-cta,
.mobile-cta,
.round-link span,
/* Мобильная версия */
@media (max-width: 700px) {

    .service-content p,
    .hero-side p,
    .section-heading > p,
    .process-item p,
    .scale-item p,
    .client-list div,
    .case-description,
    .final-heading p {
        line-height: 1.65 !important;
    }

    .case-meta,
    .case-location,
    .step-number,
    .scale-index,
    .service-number {
        line-height: 1.45 !important;
    }
}

@media (max-width: 390px) {

    .service-content p,
    .hero-side p,
    .section-heading > p,
    .process-item p,
    .scale-item p,
    .client-list div,
    .case-description,
    .final-heading p {
        line-height: 1.6 !important;
    }

}

/* =========================================================
   KANTEMIROV TEAM — PREMIUM HEADING SPACING
   Больше воздуха между буквами и строками
   ========================================================= */

/* Крупные заголовки секций */

.section-heading h2,
.featured-case h2,
.process-section h2,
.scale-block h2,
.clients-title,
.final-heading h2 {
    letter-spacing: -0.025em !important;
    line-height: 0.98 !important;
}

/* H3 в карточках */

.service-content h3 {
    letter-spacing: -0.025em !important;
    line-height: 0.98 !important;
}

/* Главный H1 */

.hero h1 {
    letter-spacing: -0.045em !important;
    line-height: 0.91 !important;
}

/* Выделенные слова через EM */

.hero h1 em,
.section-heading h2 em,
.featured-case h2 em,
.process-section h2 em,
.final-heading h2 em {
    letter-spacing: -0.025em !important;
}


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

@media (max-width: 700px) {

    .section-heading h2,
    .featured-case h2,
    .process-section h2,
    .scale-block h2,
    .clients-title,
    .final-heading h2 {
        letter-spacing: -0.02em !important;
        line-height: 0.98 !important;
    }

    .service-content h3 {
        letter-spacing: -0.02em !important;
        line-height: 0.98 !important;
    }

    .hero h1 {
        letter-spacing: -0.04em !important;
        line-height: 0.92 !important;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .section-heading h2,
    .featured-case h2,
    .process-section h2,
    .scale-block h2,
    .clients-title,
    .final-heading h2 {
        letter-spacing: -0.015em !important;
        line-height: 1 !important;
    }

    .service-content h3 {
        letter-spacing: -0.015em !important;
        line-height: 1 !important;
    }

    .hero h1 {
        letter-spacing: -0.035em !important;
        line-height: 0.94 !important;
    }

}

/* =========================================================
   KANTEMIROV TEAM
   WIDE PREMIUM TYPOGRAPHY
   ========================================================= */

/* ОСНОВНЫЕ КРУПНЫЕ ЗАГОЛОВКИ */

.hero h1,
.section-heading h2,
.featured-case h2,
.process-section h2,
.scale-block h2,
.clients-title,
.final-heading h2 {
    letter-spacing: 0.005em !important;
    line-height: 1.04 !important;
}

/* ВЫДЕЛЕННЫЕ СЛОВА */

.hero h1 em,
.section-heading h2 em,
.featured-case h2 em,
.process-section h2 em,
.final-heading h2 em {
    letter-spacing: 0.005em !important;
}

/* ЗАГОЛОВКИ КОМПЕТЕНЦИЙ */

.service-content h3 {
    letter-spacing: 0.005em !important;
    line-height: 1.02 !important;
}

/* КРУПНЫЕ ЦИФРЫ / МАСШТАБ */

.scale-item > span:first-child,
.scale-index {
    letter-spacing: 0.02em !important;
}


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

@media (max-width: 700px) {

    .hero h1,
    .section-heading h2,
    .featured-case h2,
    .process-section h2,
    .scale-block h2,
    .clients-title,
    .final-heading h2 {
        letter-spacing: 0.008em !important;
        line-height: 1.06 !important;
    }

    .hero h1 em,
    .section-heading h2 em,
    .featured-case h2 em,
    .process-section h2 em,
    .final-heading h2 em {
        letter-spacing: 0.008em !important;
    }

    .service-content h3 {
        letter-spacing: 0.006em !important;
        line-height: 1.04 !important;
    }

}


/* =========================================================
   SMALL IPHONES
   ========================================================= */

@media (max-width: 390px) {

    .hero h1,
    .section-heading h2,
    .featured-case h2,
    .process-section h2,
    .scale-block h2,
    .clients-title,
    .final-heading h2 {
        letter-spacing: 0.01em !important;
        line-height: 1.07 !important;
    }

    .service-content h3 {
        letter-spacing: 0.008em !important;
        line-height: 1.05 !important;
    }

}

/* =========================================================
   KANTEMIROV TEAM
   PREMIUM BODY TEXT SCALE
   ========================================================= */

/* Основной описательный текст */

.hero-side p,
.section-heading > p,
.service-content p,
.process-item p,
.scale-item p,
.case-description,
.final-heading p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* Текст внутри карточек */

.service-content p {
    font-size: 14px !important;
    line-height: 1.68 !important;
}


/* Второстепенная информация */

.case-meta,
.case-location,
.step-number,
.scale-index {
    font-size: 12px !important;
    line-height: 1.5 !important;
}


/* Клиенты / списки */

.client-list div {
    font-size: 14px !important;
    line-height: 1.65 !important;
}


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

@media (max-width: 700px) {

    .hero-side p,
    .section-heading > p,
    .service-content p,
    .process-item p,
    .scale-item p,
    .case-description,
    .final-heading p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .service-content p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .client-list div {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .case-meta,
    .case-location,
    .step-number,
    .scale-index {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .hero-side p,
    .section-heading > p,
    .service-content p,
    .process-item p,
    .scale-item p,
    .case-description,
    .final-heading p {
        font-size: 14px !important;
        line-height: 1.62 !important;
    }

    .client-list div {
        font-size: 14px !important;
        line-height: 1.58 !important;
    }

}

/* =========================================================
   CLIENTS — CLEAN HOVER
   Убираем цветной hover со списка заказчиков
   ========================================================= */

.client-list div:hover,
.client-list div:focus,
.client-list div:active {
    background: transparent !important;
    color: inherit !important;
}

.client-list div:hover span,
.client-list div:hover b,
.client-list div:hover strong {
    color: inherit !important;
}

/* Убираем старую Tiffany/green подсветку */
.client-list div::before,
.client-list div::after {
    background: transparent !important;
}

/* Лёгкое движение вместо цветной заливки */
.client-list div {
    transition:
        color .3s ease,
        padding-left .3s ease,
        background .3s ease !important;
}

.client-list div:hover {
    padding-left: 8px !important;
}


/* =========================================================
   FINAL PROCESS + SCALE FIX
   2026-08-14
   Возвращаем видимость контента и нормальную структуру.
   ========================================================= */


/* ---------- PROCESS ---------- */

.process-section {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.process-section .section-label,
.process-section .process-heading,
.process-section .process-grid {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.process-heading {
    position: relative !important;
}

.process-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.step-card {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-height: 260px !important;
}

.step-card h3,
.step-card p,
.step-card .step-number,
.step-card .step-line {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.step-card h3 {
    color: inherit !important;
}

.step-card p {
    color: #666 !important;
}


/* ---------- SCALE ---------- */

.scale-block {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
}

.scale-block .section-label,
.scale-heading,
.scale-grid {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.scale-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
}

.scale-item {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;

    min-height: 220px !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

    overflow: visible !important;
}

.scale-item > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.scale-item strong,
.scale-item span {
    visibility: visible !important;
    opacity: 1 !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

    .process-grid {
        grid-template-columns: 1fr !important;
    }

    .step-card {
        min-height: 210px !important;
        padding: 28px 0 !important;
    }

    .scale-grid {
        grid-template-columns: 1fr !important;
    }

    .scale-item {
        min-height: 180px !important;
        padding: 28px 0 !important;
    }

    .process-section,
    .scale-block {
        overflow: visible !important;
    }
}


/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 390px) {

    .step-card {
        min-height: 190px !important;
    }

    .scale-item {
        min-height: 160px !important;
    }
}


/* =========================================================
   DESKTOP HEADER FIX
   Burger only on mobile.
   ========================================================= */

@media (min-width: 701px) {

    .burger-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}


@media (max-width: 700px) {

    .burger-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

}


/* =========================================================
   PREMIUM HEADER CTA
   Спокойная архитектурная кнопка вместо тяжёлой плашки.
   ========================================================= */

.header-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;
    padding: 0 22px !important;

    background: rgba(45, 212, 191, 0.06) !important;
    border: 1px solid rgba(45, 212, 191, 0.72) !important;
    border-radius: 2px !important;

    color: #fff !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;

    white-space: nowrap !important;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease !important;
}


/* убираем старую заливку снизу */
.header-cta::before {
    display: none !important;
}


/* hover */
.header-cta:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #050505 !important;
    transform: translateY(-1px) !important;
}


/* mobile */
@media (max-width: 700px) {

    .header-cta {
        min-height: 42px !important;
        padding: 0 17px !important;

        font-size: 11px !important;
        border-radius: 2px !important;
    }

}


/* very small phones */
@media (max-width: 390px) {

    .header-cta {
        min-height: 40px !important;
        padding: 0 15px !important;
        font-size: 10px !important;
    }

}


/* =========================================================
   PREMIUM FORM SUBMIT
   Единый стиль CTA с header-cta.
   ========================================================= */

/* отключаем старую широкую заливку */
/* hover */

/* focus */

/* mobile */




/* =========================================================
   PREMIUM FORM SUBMIT
   Единый стиль CTA с header-cta.
   ========================================================= */

/* отключаем старую широкую заливку */
/* hover */

/* focus */

/* mobile */




/* =========================================================
   PREMIUM FORM SUBMIT
   Единый стиль CTA с header-cta.
   ========================================================= */

/* отключаем старую широкую заливку */
/* hover */

/* focus */

/* mobile */




/* =========================================================
   FORM BUTTON — FINAL CLEAN FIX
   Убираем старые декоративные элементы и стрелку.
   ========================================================= */

button.form-submit::before,
/* =========================================================
   FINAL CTA CLEANUP
   2026-08-14
   ========================================================= */


/* Убираем кастомную зелёную точку-курсор */

.premium-cursor {
    display: none !important;
}


/* FORM BUTTON — спокойный премиальный вид */

/* Никаких псевдоэлементов */

button.form-submit::before,
/* Убираем стрелку */

/* Hover — лёгкий, не блочный */

/* Active */

/* Focus */

/* MOBILE */

@media (max-width: 700px) {

}


/* =========================================================
   FINAL FORM CTA
   Кнопка формы больше НЕ использует .btn.
   ========================================================= */

/* НИКАКИХ декоративных элементов */

.form-submit::before,
.form-submit::after,
/* Hover */

/* Active */

/* Focus */

/* Mobile */

@media (max-width: 700px) {

}


/* =========================================================
   FORM CTA — TRUE OUTLINE
   Только тонкая Tiffany-рамка.
   Внутри кнопка полностью прозрачная.
   ========================================================= */

/* полностью убираем любые внутренние заливки */

button.form-submit::before,
/* hover — только лёгкая прозрачная подсветка */

/* active */

/* mobile */

@media (max-width: 700px) {
}

/* =========================================================
   FORM SUBMIT — CLEAN FINAL STYLE
   КАНТЕМИРОВ ТЕАМ
   ========================================================= */

.form-submit {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    min-height: 54px !important;

    margin-top: 28px !important;
    padding: 0 28px !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 1px solid #A6C900 !important;
    border-radius: 0 !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease !important;
}


/* Никаких декоративных элементов */

.form-submit::before,
.form-submit::after,
.form-submit .arrow-css {
    display: none !important;
    content: none !important;

    width: 0 !important;
    height: 0 !important;

    background: none !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Hover — только лёгкое затемнение/подсветка,
   без сплошной Tiffany-заливки */

.form-submit:hover {
    background: rgba(45, 212, 191, .06) !important;
    background-color: rgba(45, 212, 191, .06) !important;
    background-image: none !important;

    border: 1px solid #A6C900 !important;

    color: #fff !important;

    box-shadow: none !important;

    transform: translateY(-1px) !important;
}


/* Active */

.form-submit:active {
    background: rgba(45, 212, 191, .10) !important;
    transform: translateY(0) !important;
}


/* Focus */

.form-submit:focus,
.form-submit:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    outline: 1px solid #A6C900 !important;
    outline-offset: 4px !important;
}


/* Mobile */

@media (max-width: 700px) {

    .form-submit {
        width: 100% !important;
        max-width: none !important;

        min-height: 52px !important;

        margin-top: 24px !important;
        padding: 0 20px !important;

        font-size: 11px !important;
    }

}


/* =========================================================
   KANTEMIROV TEAM — FINAL FORM BUTTON ISOLATION
   ========================================================= */

/* Сам элемент */
#projectForm button.form-submit,
#projectForm > button.form-submit,
form#projectForm button[type="submit"].form-submit {

    /* геометрия */
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    max-width: 420px !important;
    min-height: 54px !important;

    /* убираем ВСЕ возможные заливки */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    /* именно рамка */
    border: 1px solid #A6C900 !important;
    border-color: #A6C900 !important;

    border-radius: 0 !important;

    /* текст */
    color: #fff !important;

    /* убираем всё декоративное */
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;

    /* трансформации */
    transform: none !important;

    overflow: hidden !important;
}


/* Псевдоэлементы — полностью отключаем */

#projectForm button.form-submit::before,
#projectForm button.form-submit::after,
#projectForm button.form-submit .arrow-css {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    content: none !important;

    width: 0 !important;
    height: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Hover — НЕ заливка */

#projectForm button.form-submit:hover,
#projectForm button.form-submit:focus,
#projectForm button.form-submit:focus-visible {

    background: rgba(45,212,191,.035) !important;
    background-color: rgba(45,212,191,.035) !important;
    background-image: none !important;

    border: 1px solid #A6C900 !important;
    border-color: #A6C900 !important;

    color: #fff !important;

    box-shadow: none !important;
    filter: none !important;

    transform: translateY(-1px) !important;
}


/* Active */

#projectForm button.form-submit:active {
    background: rgba(45,212,191,.06) !important;
    background-color: rgba(45,212,191,.06) !important;

    border-color: #A6C900 !important;

    transform: translateY(0) !important;
}


/* Mobile */

@media (max-width: 700px) {

    #projectForm button.form-submit,
    #projectForm > button.form-submit {
        width: 100% !important;
        max-width: none !important;
        min-height: 52px !important;
    }

}


/* =========================================
   KANTEMIROV TELEGRAM CTA
   ========================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-telegram {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .25s ease;
}

.header-telegram span {
    font-size: 15px;
    line-height: 1;
    transition: transform .25s ease;
}

.header-telegram:hover {
    opacity: .55;
}

.header-telegram:hover span {
    transform: translate(2px, -2px);
}

.mobile-telegram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,.14);
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mobile-telegram span {
    font-size: 18px;
}

@media (max-width: 900px) {

    .header-actions {
        display: none;
    }

}

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

.concept-list {
    margin-top: 70px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.concept-card {
    display: grid;
    grid-template-columns: 80px minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 45px;
    padding: 55px 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.concept-number {
    font-family: "Unbounded", sans-serif;
    font-size: 13px;
    letter-spacing: .04em;
    opacity: .55;
    padding-top: 7px;
}

.concept-content {
    min-width: 0;
}

.concept-content .case-meta {
    display: block;
    margin-bottom: 22px;
    opacity: .55;
}

.concept-content h3 {
    margin: 0;
    font-size: clamp(34px, 4vw, 64px);
    line-height: .95;
    letter-spacing: -.045em;
}

.concept-content h3 em {
    font-style: normal;
    font-weight: 400;
}

.concept-name {
    margin: 24px 0 16px;
    font-size: 18px;
    color: rgba(255,255,255,.75);
}

.concept-content > p:not(.concept-name) {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 16px;
    line-height: 1.65;
}

.concept-status {
    display: inline-block;
    margin-top: 28px;
    font-size: 11px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.45);
}

.concept-side {
    align-self: center;
    padding-left: 35px;
    border-left: 1px solid rgba(255,255,255,.12);
}

.concept-side > span {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: .14em;
    color: rgba(255,255,255,.4);
}

.concept-side p {
    margin: 0 0 30px;
    max-width: 390px;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.65;
}

.concept-side p:last-child {
    margin-bottom: 0;
}

.concept-disclaimer {
    max-width: 720px;
    margin: 35px 0 0;
    padding-left: 125px;
    color: rgba(255,255,255,.38);
    font-size: 12px;
    line-height: 1.6;
}

.featured-case .case-bottom {
    margin-top: 60px;
}


/* -------------------------
   MOBILE
   ------------------------- */

@media (max-width: 900px) {

    .concept-card {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 20px;
        padding: 40px 0;
    }

    .concept-side {
        grid-column: 2;
        padding-left: 0;
        padding-top: 25px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .concept-disclaimer {
        padding-left: 65px;
    }
}


@media (max-width: 600px) {

    .concept-list {
        margin-top: 45px;
    }

    .concept-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 35px 0;
    }

    .concept-number {
        padding-top: 0;
    }

    .concept-content h3 {
        font-size: 36px;
    }

    .concept-side {
        grid-column: auto;
    }

    .concept-disclaimer {
        padding-left: 0;
        margin-top: 25px;
    }

    .featured-case .case-bottom {
        margin-top: 40px;
    }
}





/* =========================================================
   FINAL LAYOUT — SINGLE GRID
   ========================================================= */

@media (min-width: 901px) {

    :root {
        --site-edge: 100px;
    }

    /* ЕДИНАЯ СЕТКА */

    .container {
        width: calc(100% - 200px) !important;
        max-width: none !important;
        margin-left: 100px !important;
        margin-right: 100px !important;
    }

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

    .hero-inner {
        width: calc(100% - 200px) !important;
        max-width: none !important;
        margin: 0 100px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 260px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .hero-title-wrap {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .hero h1 {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }


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

    .process-section {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    .process-section > .section-label,
    .process-section > .process-heading,
    .process-section > .process-grid {
        width: calc(100% - 200px) !important;
        margin-left: 100px !important;
        margin-right: 100px !important;
    }

    .process-section > .section-label {
        position: static !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .process-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        align-items: end !important;
        gap: 50px !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 90px 0 80px !important;
        transform: none !important;
    }

    .process-heading h2 {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .process-heading p {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: 300px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .process-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }

    .step-card {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        height: auto !important;
        min-height: 300px !important;
        margin: 0 !important;
        padding: 28px 28px 35px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: visible !important;
    }

    .step-card:not(:first-child) {
        padding-left: 28px !important;
        border-left: 1px solid rgba(255,255,255,.25) !important;
    }

    .step-card .step-number,
    .step-card .step-line,
    .step-card h3,
    .step-card p {
        position: static !important;
        display: block !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    .step-card .step-line {
        margin-top: 28px !important;
        margin-bottom: 35px !important;
    }

    .step-card h3 {
        margin-top: 0 !important;
    }

    .step-card p {
        margin-top: 18px !important;
    }


    /* =====================================================
       SCALE
       ===================================================== */

    .scale-block {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    .scale-block > .section-label,
    .scale-heading,
    .scale-grid {
        width: calc(100% - 200px) !important;
        margin-left: 100px !important;
        margin-right: 100px !important;
    }

    .scale-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 50px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 90px 0 80px !important;
    }

    .scale-heading h2,
    .scale-heading p {
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .scale-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 30px !important;
    }

    .scale-item {
        position: relative !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }


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

    .concept-list {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .concept-card {
        width: 100% !important;
        height: auto !important;
        min-height: 280px !important;
        margin: 0 !important;
        transform: none !important;
    }
}


/* =========================================================
   MOBILE — ОТДЕЛЬНО, ПОКА БЕЗ ИЗМЕНЕНИЯ СТИЛЯ
   ========================================================= */

@media (max-width: 900px) {

    .container {
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .process-section {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    .process-section > .section-label,
    .process-section > .process-heading,
    .process-section > .process-grid {
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .process-heading {
        display: block !important;
        height: auto !important;
        padding: 60px 0 50px !important;
    }

    .process-grid {
        display: block !important;
        height: auto !important;
    }

    .step-card {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 30px 0 !important;
        border-left: 0 !important;
        transform: none !important;
    }

    .step-card:not(:first-child) {
        padding-left: 0 !important;
    }

    .scale-block {
        height: auto !important;
        min-height: 0 !important;
    }

    .scale-block > .section-label,
    .scale-heading,
    .scale-grid {
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .scale-heading {
        display: block !important;
        height: auto !important;
        padding: 60px 0 50px !important;
    }

    .scale-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   HERO TYPOGRAPHY — FINAL OVERRIDE (крупнее, плотнее, увереннее)
   ========================================================= */
.hero h1 {
    font-size: clamp(52px, 7vw, 108px) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.03em !important;
    font-weight: 800 !important;
}

.hero h1 em {
    font-style: normal !important;
    color: var(--accent) !important;
}

@media (max-width: 600px) {
    .hero h1 {
        font-size: clamp(36px, 11vw, 56px) !important;
        line-height: 0.9 !important;
    }
}

/* =========================================================
   HERO — BRIGHTER (более яркий лайм + меньше затемнения фото)
   ========================================================= */
:root {
    --accent: #C8FF00 !important;
}

.hero-image-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.35) 34%,
            rgba(0,0,0,.15) 68%,
            rgba(0,0,0,.22) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.40) 0%,
            rgba(0,0,0,.05) 55%,
            rgba(0,0,0,.15) 100%
        ) !important;
}

/* =========================================================
   HEADER — BOLDER (крупнее и увереннее)
   Только для десктопа/планшета — на мобильных ширинах логотип
   управляется мобильными медиа-запросами выше (700px/390px),
   иначе этот !important перебивал их и обрезал текст логотипа.
   ========================================================= */
@media (min-width: 701px) {
    .site-header .logo,
    header .logo {
        font-size: 28px !important;
        font-weight: 900 !important;
        letter-spacing: -.04em !important;
    }
}

.site-header .main-nav a,
header .main-nav a {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
}

.site-header .header-cta,
header .header-cta {
    background: var(--accent) !important;
    color: #0d0d0d !important;
    font-weight: 800 !important;
    padding: 12px 24px !important;
}

.site-header.scrolled {
    background: rgba(13,13,13,.92) !important;
    backdrop-filter: blur(12px) !important;
}