:root {
    --ux-bg: #090b0e;
    --ux-bg-soft: #101318;
    --ux-card: #15191f;
    --ux-card-2: #1b2027;
    --ux-text: #f5f3ee;
    --ux-muted: #a7abb2;
    --ux-line: rgba(255,255,255,.10);
    --ux-accent: #d5ae69;
    --ux-accent-strong: #efca88;
    --ux-radius: 22px;
    --ux-shadow: 0 24px 70px rgba(0,0,0,.28);
}

body {
    background: var(--ux-bg);
}

.ux-page {
    overflow: clip;
}

.ux-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(9,11,14,.88);
    border-bottom: 1px solid var(--ux-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ux-site-header .site-header__inner {
    min-height: 76px;
}

.ux-brand {
    letter-spacing: .12em;
}

.ux-site-header .site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ux-site-header .site-nav a {
    padding: 10px 13px;
    border-radius: 12px;
    white-space: nowrap;
}

.ux-site-header .site-nav a:hover,
.ux-site-header .site-nav a[aria-current="page"] {
    background: rgba(255,255,255,.06);
}

.ux-header-phone {
    color: var(--ux-text);
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    opacity: .84;
}

.ux-header-phone:hover {
    opacity: 1;
}

.ux-header-cta {
    white-space: nowrap;
}

.ux-hero {
    padding-top: clamp(64px, 8vw, 118px);
    padding-bottom: clamp(54px, 7vw, 90px);
}

.ux-hero .hero-copy {
    max-width: 760px;
}

.ux-hero h1 {
    max-width: 900px;
    text-wrap: balance;
}

.ux-hero .lead-text {
    max-width: 760px;
}

.ux-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 18px;
    padding: 6px 11px;
    border: 1px solid var(--ux-line);
    border-radius: 999px;
    color: var(--ux-accent-strong);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ux-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 28px;
    border: 1px solid var(--ux-line);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.025);
}

.ux-trust-item {
    min-width: 0;
    padding: 16px 17px;
    border-right: 1px solid var(--ux-line);
}

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

.ux-trust-item strong,
.ux-trust-item span {
    display: block;
}

.ux-trust-item strong {
    margin-bottom: 3px;
    color: var(--ux-text);
    font-size: 14px;
}

.ux-trust-item span {
    color: var(--ux-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ux-section {
    padding: clamp(58px, 7vw, 96px) 0;
}

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

.ux-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.ux-section-head > div {
    max-width: 760px;
}

.ux-section-head h2 {
    margin-bottom: 10px;
    text-wrap: balance;
}

.ux-section-head p {
    max-width: 720px;
    margin-bottom: 0;
}

.ux-path-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ux-path-card {
    position: relative;
    min-height: 270px;
    padding: clamp(24px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid var(--ux-line);
    border-radius: var(--ux-radius);
    background:
        linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: var(--ux-shadow);
}

.ux-path-card::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(213,174,105,.08);
    pointer-events: none;
}

.ux-path-no {
    display: block;
    margin-bottom: 32px;
    color: var(--ux-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ux-path-card h3 {
    max-width: 540px;
    margin-bottom: 10px;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.08;
}

.ux-path-card > p {
    max-width: 620px;
    color: var(--ux-muted);
}

.ux-path-links {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.ux-path-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--ux-line);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: var(--ux-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.ux-path-links a:hover {
    border-color: rgba(213,174,105,.55);
    background: rgba(213,174,105,.10);
}

.ux-path-card--portfolio {
    background:
        linear-gradient(150deg, rgba(213,174,105,.13), rgba(255,255,255,.025));
}

.ux-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ux-proof {
    padding: 22px;
    border: 1px solid var(--ux-line);
    border-radius: 18px;
    background: var(--ux-card);
}

.ux-proof strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ux-accent-strong);
}

.ux-proof p {
    margin: 0;
    color: var(--ux-muted);
    font-size: 14px;
}

.ux-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ux-featured-grid .work-card {
    height: 100%;
}

.ux-featured-grid .work-card__body p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ux-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ux-process-step {
    padding: 22px;
    border: 1px solid var(--ux-line);
    border-radius: 18px;
    background: var(--ux-card);
}

.ux-process-step b {
    display: block;
    margin-bottom: 26px;
    color: var(--ux-accent);
    font-size: 13px;
}

.ux-process-step h3 {
    margin-bottom: 8px;
}

.ux-process-step p {
    margin: 0;
    color: var(--ux-muted);
    font-size: 14px;
}

.ux-final {
    padding: clamp(30px, 5vw, 58px);
    border: 1px solid rgba(213,174,105,.25);
    border-radius: 28px;
    background:
        radial-gradient(circle at 85% 15%, rgba(213,174,105,.13), transparent 30%),
        var(--ux-card);
}

.ux-final h2 {
    max-width: 720px;
    margin-bottom: 12px;
}

.ux-final p {
    max-width: 720px;
    color: var(--ux-muted);
}

.ux-service-groups {
    display: grid;
    gap: 42px;
}

.ux-service-group {
    scroll-margin-top: 100px;
}

.ux-group-head {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 30px;
    margin-bottom: 18px;
}

.ux-group-head h2 {
    margin: 0;
}

.ux-group-head p {
    margin: 0;
    color: var(--ux-muted);
}

.ux-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ux-service-card {
    display: flex;
    flex-direction: column;
    min-height: 255px;
    padding: 26px;
    border: 1px solid var(--ux-line);
    border-radius: var(--ux-radius);
    background: var(--ux-card);
    color: var(--ux-text);
    text-decoration: none;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.ux-service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(213,174,105,.43);
    background: var(--ux-card-2);
}

.ux-service-card__label {
    margin-bottom: 30px;
    color: var(--ux-accent);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ux-service-card h3 {
    margin-bottom: 9px;
    font-size: clamp(22px, 2.2vw, 29px);
}

.ux-service-card p {
    max-width: 640px;
    margin-bottom: 24px;
    color: var(--ux-muted);
}

.ux-service-card__go {
    margin-top: auto;
    font-size: 13px;
    font-weight: 800;
}

.ux-portfolio-intro {
    max-width: 720px;
}

.ux-portfolio-tools {
    position: sticky;
    top: 76px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    padding: 13px;
    border: 1px solid var(--ux-line);
    border-radius: 18px;
    background: rgba(9,11,14,.93);
    backdrop-filter: blur(18px);
}

.ux-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ux-filter {
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid var(--ux-line);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: var(--ux-text);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}

.ux-filter.is-active {
    border-color: var(--ux-accent);
    background: rgba(213,174,105,.13);
    color: var(--ux-accent-strong);
}

.ux-search-wrap {
    min-width: 240px;
    margin-left: auto;
}

.ux-search {
    width: 100%;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid var(--ux-line);
    border-radius: 11px;
    outline: 0;
    background: rgba(255,255,255,.035);
    color: var(--ux-text);
    font: inherit;
}

.ux-search:focus {
    border-color: rgba(213,174,105,.65);
}

.ux-result-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    color: var(--ux-muted);
    font-size: 13px;
}

.ux-empty {
    display: none;
    padding: 40px 20px;
    text-align: center;
    color: var(--ux-muted);
}

.ux-empty.is-visible {
    display: block;
}

#portfolioGrid .work-card[hidden] {
    display: none !important;
}

.ux-callback-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
    gap: 20px;
    align-items: start;
}

.ux-form-card,
.ux-side-card {
    border: 1px solid var(--ux-line);
    border-radius: 24px;
    background: var(--ux-card);
    box-shadow: var(--ux-shadow);
}

.ux-form-card {
    padding: clamp(22px, 4vw, 38px);
}

.ux-side-card {
    padding: 25px;
}

.ux-form-card h1,
.ux-form-card h2,
.ux-side-card h2,
.ux-side-card h3 {
    text-wrap: balance;
}

.ux-form-lead {
    max-width: 720px;
    margin-bottom: 26px;
    color: var(--ux-muted);
}

.ux-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ux-form-card label {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--ux-text);
    font-size: 13px;
    font-weight: 700;
}

.ux-form-card input,
.ux-form-card select,
.ux-form-card textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--ux-line);
    border-radius: 12px;
    outline: 0;
    background: rgba(255,255,255,.035);
    color: var(--ux-text);
    font: inherit;
}

.ux-form-card textarea {
    min-height: 120px;
    resize: vertical;
}

.ux-form-card input:focus,
.ux-form-card select:focus,
.ux-form-card textarea:focus {
    border-color: rgba(213,174,105,.65);
}

.ux-optional {
    margin: 8px 0 20px;
    border: 1px solid var(--ux-line);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}

.ux-optional summary {
    padding: 15px 16px;
    cursor: pointer;
    font-weight: 800;
}

.ux-optional__body {
    padding: 0 16px 16px;
}

.ux-consent {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start;
    gap: 9px !important;
    font-weight: 500 !important;
}

.ux-consent input {
    width: auto !important;
    min-height: auto !important;
    margin-top: 3px;
}

.ux-contact-list {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.ux-contact-link {
    display: block;
    padding: 14px;
    border: 1px solid var(--ux-line);
    border-radius: 13px;
    color: var(--ux-text);
    text-decoration: none;
}

.ux-contact-link small,
.ux-contact-link strong {
    display: block;
}

.ux-contact-link small {
    margin-bottom: 3px;
    color: var(--ux-muted);
}

.ux-side-card .ux-mini-note {
    color: var(--ux-muted);
    font-size: 13px;
}

.ux-about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ux-about-card {
    padding: 24px;
    border: 1px solid var(--ux-line);
    border-radius: 20px;
    background: var(--ux-card);
}

.ux-about-card p {
    color: var(--ux-muted);
}

.ux-footer {
    margin-top: clamp(60px, 8vw, 100px);
}

.ux-footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(160px, .75fr));
    gap: 34px;
}

.ux-footer-brand p {
    max-width: 420px;
}

@media (max-width: 1050px) {
    .ux-header-phone {
        display: none;
    }

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

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

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

@media (max-width: 820px) {
    .ux-header-cta {
        display: none;
    }

    .ux-site-header .site-nav {
        gap: 0;
    }

    .ux-path-grid,
    .ux-service-grid,
    .ux-callback-grid,
    .ux-about-grid {
        grid-template-columns: 1fr;
    }

    .ux-group-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

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

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

    .ux-trust-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--ux-line);
    }

    .ux-portfolio-tools {
        position: static;
        display: grid;
    }

    .ux-search-wrap {
        min-width: 0;
        margin-left: 0;
    }
}

@media (max-width: 620px) {
    .ux-hero {
        padding-top: 48px;
    }

    .ux-path-grid,
    .ux-proof-grid,
    .ux-process-grid,
    .ux-featured-grid,
    .ux-footer-grid,
    .ux-form-grid {
        grid-template-columns: 1fr;
    }

    .ux-section-head {
        display: block;
    }

    .ux-section-head .btn {
        margin-top: 12px;
    }

    .ux-trust-strip {
        grid-template-columns: 1fr;
    }

    .ux-trust-item {
        border-right: 0;
        border-bottom: 1px solid var(--ux-line);
    }

    .ux-trust-item:last-child {
        border-bottom: 0;
    }

    .ux-path-card {
        min-height: 0;
    }

    .ux-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .ux-filter {
        flex: 0 0 auto;
    }
}

/* BEGIN BELVA PORTFOLIO V7 */

:root {
    --belva-content:
        1180px;

    --belva-content-wide:
        1320px;
}


.ux-page *,
.ux-site-header *,
.ux-footer * {
    box-sizing: border-box;
}


.ux-site-header {
    border-bottom:
        1px solid
        rgba(255,255,255,.075);
}


.ux-site-header
.site-header__inner {
    min-height: 74px;
}


.ux-site-header
.site-nav {
    gap: 4px;
}


.ux-site-header
.site-nav a {
    position: relative;

    min-height: 40px;

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

    padding:
        8px
        12px;

    border-radius: 11px;

    font-size: 13px;
}


.ux-site-header
.site-nav a[aria-current="page"] {
    color: #fff;

    background:
        rgba(255,255,255,.06);
}


.ux-site-header
.site-nav a[aria-current="page"]::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 1px;

    background:
        var(--ux-accent);
}


.ux-site-header
.ux-header-phone {
    font-size: 13px;
}


.ux-site-header
.ux-header-cta {
    min-height: 42px;

    padding:
        9px
        15px;

    border-radius: 12px;
}


.ux-portfolio-page {
    min-height:
        calc(100vh - 74px);

    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(213,174,105,.055),
            transparent 26%
        ),
        radial-gradient(
            circle at 5% 35%,
            rgba(43,72,92,.05),
            transparent 30%
        ),
        var(--ux-bg);
}


.ux-portfolio-head {
    padding:
        clamp(48px, 5.5vw, 76px)
        0
        clamp(32px, 4vw, 46px);
}


.ux-portfolio-heading-grid {
    display: grid;

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

    align-items: end;

    gap: 52px;
}


.ux-portfolio-heading-copy {
    max-width: 790px;
}


.ux-portfolio-heading-copy
.ux-kicker {
    margin-bottom: 15px;
}


.ux-portfolio-heading-copy h1 {
    max-width: 760px;

    margin:
        0
        0
        17px;

    color:
        var(--ux-text);

    font-size:
        clamp(
            44px,
            5.25vw,
            70px
        );

    line-height: .98;

    letter-spacing: -.047em;

    text-wrap: balance;
}


.ux-portfolio-heading-copy p {
    max-width: 690px;

    margin: 0;

    color:
        var(--ux-muted);

    font-size:
        clamp(
            16px,
            1.35vw,
            19px
        );

    line-height: 1.58;
}


.ux-portfolio-summary {
    display: flex;

    gap: 10px;
}


.ux-portfolio-summary > div {
    min-width: 126px;

    padding:
        17px
        19px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );
}


.ux-portfolio-summary strong,
.ux-portfolio-summary span {
    display: block;
}


.ux-portfolio-summary strong {
    margin-bottom: 4px;

    color:
        var(--ux-text);

    font-size: 30px;

    line-height: 1;

    letter-spacing: -.04em;
}


.ux-portfolio-summary span {
    color:
        var(--ux-muted);

    font-size: 11px;
}


.ux-portfolio-catalog {
    padding:
        0
        0
        80px;
}


.ux-portfolio-tools {
    position: static !important;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(230px, 330px);

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;

    padding: 10px;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius: 16px;

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

    box-shadow:
        inset
        0
        1px
        rgba(255,255,255,.025);

    backdrop-filter: none;
}


.ux-filter-row {
    gap: 7px;
}


.ux-filter {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 11px;

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

    color:
        var(--ux-text);

    font-size: 12px;

    font-weight: 760;
}


.ux-filter span {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 23px;
    height: 23px;

    padding:
        0
        6px;

    border-radius: 999px;

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

    color:
        var(--ux-muted);

    font-size: 10px;
}


.ux-filter:hover {
    border-color:
        rgba(213,174,105,.34);
}


.ux-filter.is-active {
    border-color:
        rgba(213,174,105,.60);

    background:
        rgba(213,174,105,.105);

    color:
        var(--ux-accent-strong);
}


.ux-filter.is-active span {
    background:
        rgba(213,174,105,.13);

    color:
        var(--ux-accent-strong);
}


.ux-search-wrap {
    min-width: 0;

    margin: 0;
}


.ux-search {
    min-height: 42px;

    padding:
        9px
        13px;

    border-radius: 11px;

    background:
        rgba(255,255,255,.025);
}


.ux-search::placeholder {
    color:
        rgba(167,171,178,.72);
}


.ux-result-line {
    min-height: 30px;

    margin-bottom: 18px;

    padding:
        0
        2px;
}


.ux-result-line a {
    color:
        var(--ux-muted);

    text-underline-offset:
        4px;
}


.ux-result-line a:hover {
    color:
        var(--ux-text);
}


#portfolioGrid.ux-project-grid {
    display: grid;

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

    align-items: stretch;

    gap: 18px;
}


.ux-project-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 19px;

    background:
        linear-gradient(
            165deg,
            #181c22,
            #12161b
        );

    box-shadow:
        0
        18px
        50px
        rgba(0,0,0,.15);

    color:
        var(--ux-text);

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.ux-project-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(213,174,105,.40);

    box-shadow:
        0
        25px
        65px
        rgba(0,0,0,.23);
}


.ux-project-card
.work-card__media {
    position: relative;

    flex:
        0
        0
        auto;

    aspect-ratio:
        4 / 3;

    min-height: 0;

    overflow: hidden;

    background:
        #0f1216;
}


.ux-project-card
.work-card__media::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0)
            58%,
            rgba(0,0,0,.12)
            100%
        );
}


.ux-project-card
.work-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .38s ease,
        filter .38s ease;
}


.ux-project-card:hover
.work-card__media img {
    transform:
        scale(1.026);

    filter:
        saturate(1.025);
}


.ux-project-card__placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(213,174,105,.12),
            transparent 34%
        ),
        linear-gradient(
            140deg,
            #171c22,
            #0e1115
        );
}


.ux-project-card__placeholder span {
    color:
        rgba(255,255,255,.12);

    font-size: 34px;

    font-weight: 900;

    letter-spacing: .18em;
}


.ux-project-card
.work-card__body {
    display: flex;

    flex:
        1
        1
        auto;

    flex-direction: column;

    min-height: 218px;

    padding:
        20px;
}


.ux-project-card__top {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    min-height: 27px;

    gap: 10px;

    margin-bottom: 12px;
}


.ux-project-card
.badge {
    flex:
        0
        0
        auto;
}


.ux-project-card__stage-label {
    overflow: hidden;

    color:
        var(--ux-muted);

    font-size: 10px;

    text-overflow:
        ellipsis;

    white-space: nowrap;
}


.ux-project-card h3 {
    margin:
        0
        0
        10px;

    color:
        var(--ux-text);

    font-size:
        clamp(
            21px,
            1.9vw,
            28px
        );

    line-height: 1.07;

    letter-spacing:
        -.025em;

    text-wrap: balance;
}


.ux-project-card p {
    display: -webkit-box;

    margin:
        0
        0
        20px;

    overflow: hidden;

    color:
        var(--ux-muted);

    font-size: 13px;

    line-height: 1.52;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;
}


.ux-project-open {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    width: 100%;

    margin-top: auto;

    padding-top: 15px;

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

    color:
        #f4f2ed;

    font-size: 12px;

    font-weight: 800;
}


.ux-project-open
span:last-child {
    color:
        var(--ux-accent-strong);

    font-size: 17px;

    transition:
        transform .18s ease;
}


.ux-project-card:hover
.ux-project-open
span:last-child {
    transform:
        translateX(3px);
}


.ux-project-stage-badge {
    position: absolute;

    z-index: 2;

    top: 12px;
    right: 12px;

    display: inline-flex;

    align-items: center;

    min-height: 31px;

    padding:
        6px
        10px;

    border:
        1px solid
        rgba(213,174,105,.46);

    border-radius:
        999px;

    background:
        rgba(8,10,13,.86);

    box-shadow:
        0
        8px
        24px
        rgba(0,0,0,.20);

    color:
        var(--ux-accent-strong);

    font-size: 10px;

    font-weight: 800;

    backdrop-filter:
        blur(10px);
}


.ux-empty {
    padding:
        48px
        20px;

    border:
        1px dashed
        rgba(255,255,255,.10);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.018);
}


.ux-empty strong,
.ux-empty span {
    display: block;
}


.ux-empty strong {
    margin-bottom: 6px;

    color:
        var(--ux-text);
}


.ux-empty span {
    color:
        var(--ux-muted);

    font-size: 13px;
}


.ux-portfolio-bottom {
    padding-top: 0;
}


.ux-project-card:focus-visible,
.ux-filter:focus-visible,
.ux-search:focus-visible,
.ux-site-header a:focus-visible,
.ux-site-header button:focus-visible {
    outline:
        2px solid
        var(--ux-accent-strong);

    outline-offset:
        3px;
}


@media (max-width: 1100px) {

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


    .ux-portfolio-heading-grid {
        grid-template-columns:
            1fr;

        gap: 27px;
    }


    .ux-portfolio-summary {
        max-width: 400px;
    }
}


@media (max-width: 820px) {

    .ux-portfolio-head {
        padding-top: 42px;
    }


    .ux-portfolio-tools {
        grid-template-columns:
            1fr;
    }


    .ux-filter-row {
        display: flex;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 2px;

        scrollbar-width: thin;
    }


    .ux-filter {
        flex:
            0
            0
            auto;
    }


    .ux-search-wrap {
        width: 100%;
    }
}


@media (max-width: 620px) {

    .ux-portfolio-head {
        padding:
            38px
            0
            28px;
    }


    .ux-portfolio-heading-copy h1 {
        font-size:
            clamp(
                39px,
                12vw,
                54px
            );
    }


    .ux-portfolio-heading-copy p {
        font-size:
            15px;
    }


    .ux-portfolio-summary {
        display: grid;

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

        max-width: none;
    }


    .ux-portfolio-summary > div {
        min-width: 0;

        padding:
            14px
            15px;
    }


    #portfolioGrid.ux-project-grid {
        grid-template-columns:
            1fr;

        gap: 14px;
    }


    .ux-project-card
    .work-card__body {
        min-height: 198px;

        padding:
            18px;
    }


    .ux-project-card h3 {
        font-size: 23px;
    }
}


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

    .ux-project-card,
    .ux-project-card img,
    .ux-project-open span {
        transition:
            none !important;
    }
}

/* END BELVA PORTFOLIO V7 */