@font-face {
    font-family: 'Lonch Display';
    src:
        url('../assets/fonts/lonch-studio/unbounded-variable.woff2')
            format('woff2'),
        url('../assets/fonts/lonch-studio/unbounded-variable.ttf')
            format('truetype');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lonch Sans';
    src:
        url('../assets/fonts/lonch-studio/manrope-variable.woff2')
            format('woff2'),
        url('../assets/fonts/lonch-studio/manrope-variable.ttf')
            format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #080908;
    --ink-soft: #111210;
    --paper: #f1efe9;
    --paper-soft: #d8d6cf;
    --acid: #caff37;
    --acid-dark: #27340c;
    --line-dark: rgba(241, 239, 233, 0.18);
    --line-light: rgba(8, 9, 8, 0.18);
    --muted-dark: rgba(241, 239, 233, 0.65);
    --muted-light: rgba(8, 9, 8, 0.62);
    --edge: clamp(20px, 3vw, 52px);
    --control-radius: 12px;
    --compact-radius: 8px;
    --display: 'Lonch Display', Arial, sans-serif;
    --sans: 'Lonch Sans', Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    background: var(--ink);
}
body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.45;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
textarea {
    font: inherit;
}
button {
    color: inherit;
}
img {
    display: block;
    width: 100%;
}
figure {
    margin: 0;
}
::selection {
    background: var(--acid);
    color: var(--ink);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--acid) var(--ink);
}
* {
    caret-color: var(--acid);
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--ink);
}
::-webkit-scrollbar-thumb {
    border: 3px solid var(--ink);
    border-radius: 999px;
    background: var(--acid);
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    background: var(--acid);
    color: var(--ink);
    transform: translateY(-150%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.topbar {
    position: fixed;
    z-index: 100;
    top: 18px;
    left: var(--edge);
    right: var(--edge);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    color: var(--paper);
    pointer-events: none;
}

.topbar > * {
    pointer-events: auto;
}

.brand {
    justify-self: start;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 760;
    letter-spacing: -0.03em;
}

.brand-dot {
    color: var(--acid);
}
.topbar[data-theme='light'] .brand,
.topbar[data-theme='acid'] .brand {
    color: var(--ink);
}
.topbar[data-theme='acid'] .nav-cta {
    background: var(--ink);
    color: var(--acid);
}
.topbar.is-open .brand {
    color: var(--paper);
}

.nav-shell {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(241, 239, 233, 0.14);
    border-radius: 14px;
    background: rgba(8, 9, 8, 0.58);
    backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 0 8px 34px rgba(0, 0, 0, 0.16);
}

.nav-shell a {
    padding: 9px 14px;
    border-radius: var(--compact-radius);
    color: rgba(241, 239, 233, 0.76);
    font-size: 13px;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.nav-shell a:hover,
.nav-shell a:focus-visible {
    color: var(--paper);
    background: rgba(241, 239, 233, 0.1);
    outline: none;
}

.nav-cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-radius: var(--control-radius);
    background: var(--acid);
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    transform: translateY(-2px);
    background: #d7ff6a;
    outline: none;
}
.nav-cta svg {
    width: 15px;
    height: 15px;
}

.menu-button {
    display: none;
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(241, 239, 233, 0.18);
    border-radius: var(--compact-radius);
    background: rgba(8, 9, 8, 0.62);
    backdrop-filter: blur(18px);
    cursor: pointer;
}

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    background: #050605;
}

.hero-media,
.hero-media::after {
    position: absolute;
    inset: 0;
}

.hero-media {
    z-index: -2;
    overflow: hidden;
}

.hero-media img {
    height: 112%;
    object-fit: cover;
    object-position: 58% 45%;
    filter: saturate(0.88) contrast(1.08) brightness(0.82);
    transform: scale(1.04);
}

.hero-media::after {
    content: '';
    background:
        linear-gradient(
            180deg,
            rgba(5, 6, 5, 0.48) 0%,
            rgba(5, 6, 5, 0.06) 34%,
            rgba(5, 6, 5, 0.76) 79%,
            #080908 100%
        ),
        linear-gradient(90deg, rgba(5, 6, 5, 0.62) 0%, rgba(5, 6, 5, 0.04) 66%);
}

.hero-media--portal {
    background: #030503;
}

.hero-portal {
    position: absolute;
    z-index: 0;
    inset: -3% -2% -12%;
    overflow: hidden;
    contain: layout paint size;
    background: #030503;
    pointer-events: none;
}

.hero-portal__fallback,
.hero-portal__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-portal__fallback {
    overflow: hidden;
    opacity: 1;
    background:
        radial-gradient(
            ellipse 30% 44% at 65% 100%,
            rgba(202, 255, 55, 0.32),
            rgba(67, 94, 16, 0.12) 38%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 16% 82% at 65% 48%,
            rgba(202, 255, 55, 0.1),
            transparent 68%
        ),
        #030503;
    transition: opacity 180ms ease-out;
}

.hero-portal__fallback::before {
    position: absolute;
    top: -4%;
    bottom: -2%;
    left: 68.5%;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(241, 239, 233, 0.22),
        rgba(202, 255, 55, 0.88) 36%,
        #f1efe9 72%,
        var(--acid)
    );
    box-shadow:
        0 0 24px rgba(202, 255, 55, 0.56),
        0 0 80px rgba(202, 255, 55, 0.24);
    content: '';
}

.hero-portal__fallback::after {
    position: absolute;
    right: 16%;
    bottom: -22%;
    width: 38%;
    height: 44%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(202, 255, 55, 0.26),
        rgba(202, 255, 55, 0.08) 42%,
        transparent 76%
    );
    content: '';
}

.hero-portal__canvas {
    display: block;
    opacity: 0;
    transition: opacity 190ms ease-out;
}

.hero-portal.is-webgl-ready .hero-portal__canvas {
    opacity: 1;
}

.hero-portal.is-webgl-ready .hero-portal__fallback {
    visibility: hidden;
    opacity: 0;
}

.hero-inner {
    width: 100%;
    padding: clamp(150px, 19vh, 210px) var(--edge) 0;
}

.hero--editorial {
    min-height: 100svh;
}
.hero--editorial .hero-media img {
    height: 100%;
    object-position: 64% center;
    filter: none;
}
.hero--editorial .hero-media.hero-media--founder img {
    object-position: 61% center;
}
.hero--editorial .hero-media.hero-media--team img {
    object-position: 70% center;
}
.hero--editorial h1 {
    font-size: clamp(46px, 6.1vw, 96px);
    line-height: 1.02;
}
.hero--editorial .hero-media::after {
    background: linear-gradient(
        180deg,
        rgba(5, 6, 5, 0.1) 0%,
        rgba(5, 6, 5, 0.02) 30%,
        rgba(5, 6, 5, 0.62) 76%,
        rgba(5, 6, 5, 0.9) 100%
    );
}

.hero--editorial .hero-media--portal::after {
    background:
        radial-gradient(
            ellipse 38% 42% at 86% 78%,
            rgba(3, 5, 3, 0.68),
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 5, 3, 0.34) 0%,
            rgba(3, 5, 3, 0.02) 30%,
            rgba(3, 5, 3, 0.2) 68%,
            rgba(8, 9, 8, 0.74) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3, 5, 3, 0.82) 0%,
            rgba(3, 5, 3, 0.5) 31%,
            rgba(3, 5, 3, 0.02) 55%,
            rgba(3, 5, 3, 0.18) 100%
        );
}

.hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
    gap: clamp(28px, 5vw, 90px);
    align-items: end;
    padding-bottom: clamp(72px, 10vh, 118px);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 960px;
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(50px, 6.6vw, 112px);
    line-height: 0.94;
    font-weight: 620;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.hero-aside {
    padding-bottom: 0.4vw;
}
.hero-aside p {
    max-width: 370px;
    margin-bottom: 24px;
    color: rgba(241, 239, 233, 0.82);
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.45;
}

.round-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 220px;
    padding: 13px 14px 13px 18px;
    border: 1px solid rgba(241, 239, 233, 0.34);
    border-radius: var(--control-radius);
    font-size: 14px;
    font-weight: 700;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.round-link span:last-child {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--compact-radius);
    background: var(--acid);
    color: var(--ink);
    transition: transform 0.25s ease;
}

.round-link svg {
    width: 17px;
    height: 17px;
}

.round-link:hover,
.round-link:focus-visible {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    outline: none;
}
.round-link:hover span:last-child,
.round-link:focus-visible span:last-child {
    transform: rotate(45deg);
}

.section {
    padding: clamp(90px, 12vw, 170px) var(--edge);
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.55fr);
    gap: clamp(30px, 8vw, 130px);
    align-items: end;
    margin-bottom: clamp(55px, 8vw, 110px);
}

.section-intro h2,
.light-statement,
.contact-title {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(42px, 6.5vw, 112px);
    line-height: 0.96;
    font-weight: 560;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.section-intro p {
    margin-bottom: 0;
    color: var(--muted-dark);
    font-size: clamp(17px, 1.35vw, 22px);
}

.services {
    padding-top: clamp(92px, 8vw, 124px);
    padding-bottom: clamp(96px, 8vw, 128px);
    background: var(--paper);
    color: var(--ink);
}
.services-layout {
    display: grid;
    gap: clamp(54px, 6vw, 86px);
}
.services-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.7fr);
    gap: clamp(36px, 8vw, 132px);
    align-items: end;
}
.services-copy h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(44px, 6vw, 96px);
    line-height: 0.94;
    font-weight: 540;
    letter-spacing: -0.04em;
}
.services-intro {
    display: grid;
    gap: 20px;
    max-width: 610px;
    padding-bottom: 6px;
}
.services-copy p {
    margin: 0;
    color: var(--muted-light);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.55;
}
.services-note {
    display: block;
    max-width: 56ch;
    color: var(--muted-light);
    font-size: 13px;
    line-height: 1.55;
}
.service-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.15vw, 18px);
    align-items: stretch;
}
.service-direction {
    position: relative;
    min-width: 0;
    min-height: clamp(360px, 29vw, 410px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(24px, 2vw, 32px);
    border: 1px solid rgba(8, 9, 8, 0.07);
    border-radius: var(--control-radius);
    background: #e8e6df;
    transition:
        border-color 420ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-direction::before {
    position: absolute;
    top: -1px;
    left: clamp(24px, 2vw, 32px);
    width: 52px;
    height: 2px;
    border-radius: 2px;
    background: var(--acid);
    content: "";
    pointer-events: none;
}
.service-direction:focus-within {
    border-color: rgba(8, 9, 8, 0.42);
}
@media (hover: hover) and (pointer: fine) {
    .service-direction:hover {
        border-color: rgba(8, 9, 8, 0.18);
        background: #e1dfd8;
    }
}
.service-direction__heading {
    width: 100%;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(22px, 2.1vw, 34px);
    line-height: 1.1;
    font-weight: 520;
    letter-spacing: -0.035em;
}
.service-direction__title {
    width: 100%;
    display: block;
    color: var(--ink);
    transition:
        color 320ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-direction__title-text {
    display: block;
    max-width: 16ch;
    text-wrap: balance;
}
.service-direction__title:hover,
.service-direction__title:focus-visible {
    color: var(--ink);
}
.service-direction > p {
    max-width: 34ch;
    margin: 28px 0 0;
    color: var(--muted-light);
    font-size: 16px;
    line-height: 1.58;
}
#service-web,
#service-crm,
#service-ai,
#service-products {
    scroll-margin-top: 110px;
}
.service-direction__items {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
}
.service-direction__items li {
    min-width: 0;
    width: 100%;
}
.service-direction__items a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 9px 0;
    background: transparent;
    color: rgba(8, 9, 8, 0.78);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    transition:
        color 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-direction__items a:hover,
.service-direction__items a:focus-visible {
    background: transparent;
    color: var(--ink);
}
.services-index-link {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    min-width: 190px;
    min-height: 48px;
    padding: 10px 12px 10px 16px;
    border-radius: var(--control-radius);
    background: rgba(8, 9, 8, 0.08);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    transition:
        color 300ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.services-index-link svg {
    width: 17px;
    height: 17px;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.services-index-link:hover,
.services-index-link:focus-visible {
    background: var(--acid);
    color: var(--ink);
}
.services-index-link:hover svg,
.services-index-link:focus-visible svg {
    transform: translate3d(4px, 0, 0);
}

.work {
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
}
.work .section-intro p {
    color: var(--muted-dark);
}
.work-head-actions {
    display: flex;
    justify-content: flex-end;
    margin: -24px 0 46px;
}
.case-track {
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 4vw, 72px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: none;
    scrollbar-width: none;
    padding: 0 0 18px;
}

.case-track::-webkit-scrollbar {
    display: none;
}
.case-card {
    --case-media-height: clamp(440px, 39vw, 540px);
    scroll-snap-align: start;
    display: block;
    flex: 0 0 clamp(350px, 33vw, 440px);
    min-width: 0;
    color: var(--paper);
}
.case-card--shape-1 {
    --case-media-height: clamp(275px, 24vw, 320px);
    flex-basis: clamp(220px, 20vw, 270px);
    margin-top: clamp(120px, 12vw, 170px);
}
.case-card--shape-3 {
    --case-media-height: clamp(350px, 32vw, 430px);
    flex-basis: clamp(260px, 25vw, 330px);
    margin-top: clamp(125px, 11vw, 160px);
}
.case-card--shape-4 {
    --case-media-height: clamp(410px, 36vw, 510px);
    flex-basis: clamp(325px, 29vw, 390px);
    margin-top: clamp(15px, 3vw, 40px);
}
.case-card-media {
    position: relative;
    height: var(--case-media-height);
    overflow: hidden;
    border-radius: 16px;
    background: var(--ink-soft);
}
.case-card-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 4, 3, 0.42), transparent 27%), linear-gradient(180deg, transparent 39%, rgba(3, 4, 3, 0.83) 100%);
    content: '';
    pointer-events: none;
}
.case-card--captioned .case-card-media::after {
    background: linear-gradient(180deg, rgba(3, 4, 3, 0.78), transparent 52%);
}
.case-card-media > img {
    height: 100%;
    object-fit: cover;
}
.case-preview {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.case-device {
    --device-rotate: 0deg;
    position: absolute;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(8, 9, 8, 0.22);
    background: #050605;
    transform: rotate(var(--device-rotate));
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-device img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: top center;
}
.case-device--desktop {
    left: 4%;
    right: 4%;
    top: 12%;
    bottom: 8%;
    display: grid;
    grid-template-rows: 18px minmax(0, 1fr);
    border-radius: 10px 10px 3px 3px;
}
.case-device__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    background: #111210;
}
.case-device__bar i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(241, 239, 233, 0.44);
}
.case-device--phone {
    right: 2%;
    bottom: -3%;
    z-index: 2;
    display: grid;
    width: 24%;
    height: 80%;
    padding: 8px 5px 5px;
    border: 5px solid #080908;
    border-radius: 27px;
}
.case-device--phone img {
    border-radius: 16px;
}
.case-device__sensor {
    position: absolute;
    z-index: 2;
    top: 3px;
    left: 50%;
    width: 30%;
    height: 4px;
    border-radius: 4px;
    background: #080908;
    transform: translateX(-50%);
}
.case-preview--browser .case-device--phone {
    display: none;
}
.case-preview--split .case-device--desktop {
    --device-rotate: -1.4deg;
    right: 17%;
    top: 10%;
    bottom: 7%;
}
.case-preview--split .case-device--phone {
    --device-rotate: 2.4deg;
}
.case-preview--tablet .case-device--desktop {
    --device-rotate: -2.2deg;
    left: 7%;
    right: 18%;
    top: 7%;
    bottom: 7%;
    grid-template-rows: minmax(0, 1fr);
    padding: 7px;
    border: 6px solid #080908;
    border-radius: 22px;
}
.case-preview--tablet .case-device__bar {
    display: none;
}
.case-preview--tablet .case-device--desktop img {
    border-radius: 10px;
}
.case-preview--tablet .case-device--phone {
    --device-rotate: 3deg;
    right: 3%;
    height: 72%;
}
.case-preview--mobile .case-device--desktop {
    --device-rotate: -1.6deg;
    right: 22%;
    top: 15%;
    bottom: 13%;
    opacity: 0.78;
}
.case-preview--mobile .case-device--phone {
    --device-rotate: 2.8deg;
    right: 8%;
    width: 29%;
    height: 84%;
}
.case-card:hover .case-device,
.case-card:focus-visible .case-device {
    transform: translateY(-7px) rotate(var(--device-rotate));
}
.case-card-tag {
    position: absolute;
    z-index: 4;
    top: 22px;
    left: 22px;
    padding: 9px 13px;
    border: 1px solid rgba(241, 239, 233, 0.72);
    border-radius: var(--compact-radius);
    color: var(--paper);
    background: transparent;
    font-size: 12px;
    font-weight: 650;
    text-shadow: 0 1px 5px rgba(3, 4, 3, 0.6);
}
.case-card-media__copy {
    position: absolute;
    z-index: 3;
    right: 20px;
    bottom: 22px;
    left: 20px;
    color: var(--paper);
}
.case-card--captioned .case-card-media__copy {
    top: 84px;
    bottom: auto;
}
.case-card-media__copy > span {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.case-card-media__copy h3 {
    max-width: 21ch;
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(18px, 1.9vw, 26px);
    line-height: 1.18;
    font-weight: 520;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.case-card--shape-1 .case-card-media__copy h3 {
    font-size: clamp(17px, 1.55vw, 21px);
}
.case-card-caption {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 20px;
    min-height: 76px;
    padding-top: 20px;
}
.case-card-caption--featured {
    justify-content: space-between;
    min-height: 102px;
}
.case-card-caption__title {
    max-width: 14ch;
    font-family: var(--sans);
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.06;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-wrap: balance;
}
.case-card-arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--acid);
    border-radius: var(--compact-radius);
    color: var(--acid);
    transition: background-color 260ms ease, color 260ms ease, transform 260ms ease;
}
.case-card-arrow svg {
    width: 27px;
    height: 27px;
}
.case-card:hover .case-card-arrow,
.case-card:focus-visible .case-card-arrow {
    background: var(--acid);
    color: var(--ink);
    transform: translateX(4px);
}
.work .text-link {
    border-color: var(--line-dark);
    color: var(--paper);
}
.work .text-link:hover,
.work .text-link:focus-visible {
    border-color: var(--acid);
    background: var(--acid);
    color: var(--ink);
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid currentColor;
    border-radius: var(--control-radius);
    font-weight: 760;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}
.text-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.text-link:hover,
.text-link:focus-visible {
    color: var(--paper);
    background: var(--ink);
    outline: none;
}
.text-link:hover svg {
    transform: translate(3px, -3px);
}

.clients {
    position: relative;
    z-index: 2;
    padding: clamp(95px, 13vw, 190px) var(--edge);
    border-radius: var(--motion-scene-radius);
    background: #151714;
    overflow: hidden;
}

.clients-head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    gap: clamp(35px, 8vw, 130px);
    align-items: end;
    margin-bottom: clamp(55px, 8vw, 105px);
}

.clients-head h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(42px, 7vw, 118px);
    line-height: 0.96;
    font-weight: 540;
    letter-spacing: -0.04em;
}

.clients-head p {
    margin: 0;
    color: var(--muted-dark);
    font-size: clamp(17px, 1.35vw, 22px);
}
.client-logo-grid {
    --client-tile-size: clamp(190px, 20vw, 282px);
    --client-expanded-size: min(42vw, 440px);
    --client-expand-half: max(0px, calc((var(--client-expanded-size) - var(--client-tile-size)) / 2));
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 2px max(var(--edge), var(--client-expand-half)) 2px var(--client-expand-half);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--client-expand-half);
}
.client-logo-grid::-webkit-scrollbar { display: none; }
.client-logo-grid:has(> .client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active)) > .client-logo {
    transform: translateX(calc(-1 * var(--client-expand-half)));
}

.client-logo {
    position: relative;
    isolation: isolate;
    display: block;
    flex: 0 0 var(--client-tile-size);
    width: var(--client-tile-size);
    max-width: none;
    height: var(--client-tile-size);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(241, 239, 233, .22);
    border-radius: 22px;
    background: transparent;
    color: var(--paper);
    text-align: center;
    cursor: pointer;
    scroll-snap-align: start;
    transition: flex-basis 560ms cubic-bezier(.2, .8, .2, 1), transform 560ms cubic-bezier(.2, .8, .2, 1), border-color 320ms ease;
}
.client-logo--static { cursor: default; }
.client-logo:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active) {
    flex-basis: var(--client-expanded-size);
    border-color: rgba(241, 239, 233, .42);
}
.client-logo__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 420ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1);
}
.client-logo::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .72));
    opacity: 0;
    content: '';
    pointer-events: none;
    transition: opacity 420ms ease;
}
.client-logo__base {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 1;
    transition: opacity 240ms ease, transform 440ms cubic-bezier(.2, .8, .2, 1);
}
.client-logo__mark {
    position: absolute;
    z-index: 1;
    right: 24px;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    opacity: 0;
    text-align: left;
    transform: translateY(18px);
    transition: opacity 280ms ease 100ms, transform 500ms cubic-bezier(.2, .8, .2, 1) 80ms;
}
.client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active) :is(.client-logo__photo, .client-logo__mark),
.client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active)::after { opacity: 1; }
.client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active) .client-logo__photo { transform: scale(1); }
.client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active) .client-logo__base { opacity: 0; transform: translateY(-12px); }
.client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active) .client-logo__mark { transform: translateY(0); }
.client-logo strong {
    font-family: var(--display);
    font-size: clamp(20px, 2vw, 29px);
    line-height: 1.08;
    font-weight: 560;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}
.client-logo__mark strong { font-size: clamp(22px, 2.2vw, 32px); }
.client-logo :is(.client-logo__base, .client-logo__mark) img {
    display: block;
    width: min(75%, 180px);
    max-height: 78px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
}
.client-logo__mark img { width: min(50%, 150px); }
@media (prefers-reduced-motion: reduce) {
    .client-logo,
    .client-logo__photo,
    .client-logo::after,
    .client-logo__base,
    .client-logo__mark { transition-duration: 0.01ms !important; }
}
.integrations-band {
    margin-top: clamp(48px, 7vw, 90px);
}
.integrations-band > strong {
    display: block;
    margin-bottom: 22px;
    color: var(--paper);
    font-size: 13px;
}
.integration-logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
}
.integration-logos span {
    min-height: 92px;
    display: grid;
    place-items: center;
    padding: 14px;
    border-right: 1px solid var(--line-dark);
    color: var(--paper-soft);
    font-family: var(--display);
    font-size: clamp(12px, 1.1vw, 17px);
    text-align: center;
}
.integration-logos span:last-child {
    border-right: 0;
}

.trust {
    margin-top: calc(-1 * var(--motion-scene-radius));
    background: var(--acid);
    color: var(--ink);
    padding: clamp(90px, 12vw, 175px) var(--edge);
    padding-top: calc(clamp(90px, 12vw, 175px) + var(--motion-scene-radius));
}

.trust-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    gap: clamp(55px, 10vw, 160px);
    align-items: start;
}

.trust-copy {
    position: sticky;
    top: 120px;
}
.light-statement {
    position: relative;
}
.trust .light-statement {
    font-size: clamp(42px, 5.25vw, 88px);
}
.trust-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-width: 220px;
    margin-top: 36px;
    padding: 14px 15px 14px 19px;
    border-radius: var(--control-radius);
    background: var(--ink);
    color: var(--acid);
    font-size: 14px;
    font-weight: 760;
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}
.trust-cta span:last-child {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--compact-radius);
    background: var(--acid);
    color: var(--ink);
}
.trust-cta svg {
    width: 16px;
    height: 16px;
}
.trust-cta:hover {
    transform: translateY(-3px);
    background: #151713;
}
.trust-list {
    border-top: 1px solid var(--line-light);
}
.trust-item {
    padding: 25px 0 27px;
    border-bottom: 1px solid var(--line-light);
}

.trust-item h3 {
    margin-bottom: 10px;
    font-family: var(--display);
    font-size: clamp(19px, 1.8vw, 28px);
    font-weight: 560;
    letter-spacing: -0.025em;
}
.trust-item p {
    margin-bottom: 0;
    color: var(--muted-light);
    font-size: 16px;
}

.process {
    background: #0c0d0b;
}
.process-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
    gap: 40px;
    align-items: end;
    margin-bottom: clamp(55px, 8vw, 100px);
}

.process-head h2 {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(44px, 7vw, 118px);
    line-height: 0.94;
    font-weight: 540;
    letter-spacing: -0.04em;
}
.process-head p {
    margin-bottom: 0;
    color: var(--muted-dark);
    font-size: 18px;
}
.process-list {
    border-top: 1px solid var(--line-dark);
}
.process-step {
    min-height: 150px;
    display: grid;
    grid-template-columns: 80px minmax(240px, 0.75fr) minmax(300px, 1.25fr);
    gap: 28px;
    align-items: center;
    border-bottom: 1px solid var(--line-dark);
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.process-step:hover {
    color: var(--acid);
    transform: translateX(14px);
}
.process-step > span {
    color: var(--acid);
    font-size: 12px;
}
.process-step h3 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(24px, 2.7vw, 43px);
    font-weight: 520;
    letter-spacing: -0.03em;
}
.process-step p {
    max-width: 580px;
    margin: 0;
    color: var(--muted-dark);
    font-size: 16px;
}

.reviews {
    background: var(--paper);
    color: var(--ink);
}
.reviews .section-intro p {
    color: var(--muted-light);
}
.review-slider {
    min-width: 0;
}
.review-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% + 1px) / 2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    border-top: 1px solid var(--line-light);
    border-left: 1px solid var(--line-light);
}
.review-grid::-webkit-scrollbar {
    display: none;
}
.review-card {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: clamp(26px, 3.5vw, 48px);
    border-right: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
    scroll-snap-align: start;
}
.review-card::before {
    content: '“';
    height: 64px;
    color: var(--acid-dark);
    font-family: var(--display);
    font-size: 92px;
    line-height: 0.85;
}
.review-card p {
    margin: auto 0 34px;
    font-family: var(--display);
    font-size: clamp(20px, 2vw, 31px);
    line-height: 1.18;
    font-weight: 480;
    letter-spacing: -0.03em;
}
.review-card footer {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid var(--line-light);
}
.review-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-light);
    border-radius: 50%;
    background: var(--acid);
    color: var(--ink);
}
.review-avatar svg {
    width: 23px;
    height: 23px;
}
.review-person {
    display: grid;
    gap: 4px;
}
.review-card footer strong {
    font-size: 14px;
}
.review-card footer .review-person span {
    color: var(--muted-light);
    font-size: 12px;
}
.review-placeholder {
    align-self: flex-start;
    margin-bottom: 24px;
    padding: 6px 9px;
    border-radius: var(--compact-radius);
    background: var(--acid);
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.review-navigation {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto auto;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    margin-top: 24px;
}
.review-progress {
    height: 1px;
    overflow: hidden;
    background: var(--line-light);
}
.review-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.review-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--muted-light);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.review-count strong {
    color: var(--ink);
    font-size: 16px;
}
.review-controls {
    display: flex;
    gap: 8px;
}
.review-control {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-light);
    border-radius: var(--compact-radius);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;
}
.review-control svg {
    width: 17px;
    height: 17px;
}
.review-control:hover,
.review-control:focus-visible {
    color: var(--paper);
    background: var(--ink);
}
.review-control:disabled {
    opacity: 0.28;
    cursor: not-allowed;
}

.blog {
    background: var(--ink-soft);
}
.blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 30px clamp(28px, 4vw, 64px);
}
.blog-card {
    display: grid;
    gap: 22px;
    position: relative;
}
.blog-card:first-child {
    grid-row: 1 / span 2;
}
.blog-card:not(:first-child) {
    grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr);
    align-items: start;
    padding-top: 28px;
    border-top: 1px solid var(--line-dark);
}
.blog-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #191a18;
}
.blog-card:first-child .blog-media {
    aspect-ratio: 4 / 3;
}
.blog-card:not(:first-child) .blog-media {
    aspect-ratio: 1;
}
.blog-media img {
    height: 100%;
    object-fit: cover;
    filter: saturate(0.7) brightness(0.88);
    transition:
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.3s ease;
}
.blog-card:hover .blog-media img {
    transform: scale(1.035);
    filter: saturate(1) brightness(1);
}
.blog-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
    color: var(--muted-dark);
    font-size: 12px;
}
.blog-card h3 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(20px, 1.75vw, 28px);
    line-height: 1.08;
    font-weight: 520;
    letter-spacing: -0.035em;
}
.blog-card:first-child h3 {
    max-width: 760px;
    font-size: clamp(30px, 3.2vw, 52px);
}
.blog-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.blog-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--paper);
    font-size: 13px;
    font-weight: 760;
}
.blog-read svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}
.blog-card:hover .blog-read svg {
    transform: translate(3px, -3px);
}
.blog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(40px, 6vw, 75px);
}
.blog .text-link {
    color: var(--paper);
}
.blog .text-link:hover,
.blog .text-link:focus-visible {
    color: var(--ink);
    background: var(--acid);
}

.faq {
    background: var(--paper);
    color: var(--ink);
}
.faq-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: end;
    gap: 40px;
    margin-bottom: clamp(50px, 7vw, 90px);
}
.faq-head h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(44px, 7vw, 118px);
    line-height: 0.94;
    font-weight: 540;
    letter-spacing: -0.04em;
}
.faq-head p {
    max-width: 410px;
    margin: 0;
    color: var(--muted-light);
    font-size: 17px;
}
.faq-list {
    border-top: 1px solid var(--line-light);
}
.faq-item {
    border-bottom: 1px solid var(--line-light);
}

.faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 3vw, 40px) 0;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary:focus-visible {
    outline: 2px solid var(--acid);
    outline-offset: 6px;
}
.faq-item summary span:first-child {
    font-family: var(--display);
    font-size: clamp(21px, 2.4vw, 38px);
    font-weight: 520;
    letter-spacing: -0.03em;
}
.faq-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-light);
    border-radius: var(--compact-radius);
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.faq-toggle svg {
    width: 14px;
    height: 14px;
}
.faq-item[open] .faq-toggle {
    transform: rotate(45deg);
    background: var(--acid);
}
.faq-answer {
    max-width: 740px;
    padding: 0 64px clamp(28px, 4vw, 50px) 0;
}
.faq-answer p {
    margin: 0;
    color: var(--muted-light);
    font-size: clamp(16px, 1.4vw, 20px);
}

.contact {
    position: relative;
    padding: clamp(100px, 13vw, 180px) var(--edge);
    overflow: hidden;
    background: var(--ink);
}

.contact-top {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
    gap: clamp(45px, 9vw, 140px);
    align-items: start;
}
.contact-title {
    max-width: 760px;
    font-size: clamp(52px, 5.6vw, 96px);
}
.contact-title > span {
    white-space: normal;
}
.contact-title em {
    color: var(--acid);
    font-style: normal;
}
.contact-form {
    padding-top: 10px;
}
.contact-form p {
    margin: 0 0 30px;
    color: var(--muted-dark);
    font-size: 18px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
.field--wide {
    grid-column: 1 / -1;
}
.field {
    position: relative;
    margin-bottom: 19px;
}
.field label {
    position: absolute;
    left: 0;
    top: 17px;
    color: var(--muted-dark);
    font-size: 14px;
    transition:
        transform 0.2s ease,
        font-size 0.2s ease,
        color 0.2s ease;
    pointer-events: none;
}
.field input,
.field textarea {
    width: 100%;
    padding: 20px 0 11px;
    border: 0;
    border-bottom: 1px solid rgba(241, 239, 233, 0.3);
    border-radius: 0;
    background: transparent;
    color: var(--paper);
    outline: none;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--acid);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    transform: translateY(-17px);
    font-size: 11px;
    color: var(--acid);
}
.field--phone label {
    transform: translateY(-17px);
    font-size: 11px;
    color: var(--acid);
}
.field--phone input::placeholder {
    color: rgba(241, 239, 233, 0.46);
    opacity: 1;
}
.submit-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--acid);
    color: var(--ink);
    font-weight: 750;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.submit-button:hover,
.submit-button:focus-visible {
    background: #d8ff70;
    transform: translateY(-2px);
    outline: none;
}
.form-fallback {
    margin-top: 14px;
    color: var(--muted-dark);
    font-size: 12px;
}
.form-fallback a {
    color: var(--paper);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-footer {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--motion-scene-radius));
    padding: clamp(70px, 9vw, 125px) var(--edge) 28px;
    padding-top: calc(clamp(70px, 9vw, 125px) + var(--motion-scene-radius));
    border-radius: var(--motion-scene-radius) var(--motion-scene-radius) 0 0;
    background: #151714;
    color: var(--paper);
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(150px, 0.7fr));
    gap: clamp(35px, 6vw, 90px);
    padding-bottom: clamp(65px, 9vw, 110px);
}

.footer-brand-block {
    max-width: 390px;
}
.footer-brand {
    font-family: var(--display);
    font-size: clamp(42px, 5vw, 78px);
    font-weight: 650;
    letter-spacing: -0.04em;
    line-height: 0.8;
}
.footer-brand-block p {
    max-width: 340px;
    margin: 32px 0 0;
    color: var(--muted-dark);
    font-size: 16px;
}
.footer-column h3 {
    margin: 0 0 22px;
    color: var(--muted-dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.footer-column ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-column a,
.footer-column span {
    color: var(--paper);
    font-size: 14px;
}
.footer-column a {
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}
.footer-column a:hover {
    color: var(--acid);
    text-decoration: underline;
    text-decoration-color: var(--acid);
}
.footer-placeholder {
    color: var(--muted-dark) !important;
}
.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}
.footer-social-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-dark);
    border-radius: var(--compact-radius);
    color: var(--paper);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}
.footer-social-icon svg {
    width: 18px;
    height: 18px;
}
.footer-social-icon:hover {
    background: var(--acid);
    color: var(--ink);
    transform: translateY(-2px);
}
.footer-social-note {
    display: block;
    margin-top: 10px;
    color: var(--muted-dark);
    font-size: 10px;
}
.footer-legal {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--line-dark);
    color: var(--muted-dark);
    font-size: 12px;
}
.footer-legal a {
    color: var(--muted-dark);
}
.footer-legal a:hover {
    color: var(--acid);
}

[data-reveal] {
    opacity: 1;
    transform: none;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--acid) !important;
    outline-offset: 4px;
}

.field input:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--acid);
    outline-offset: 4px;
}

@media (min-width: 981px) and (max-width: 1150px) {
    .service-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .service-direction {
        min-height: 330px;
    }
}

@media (max-width: 980px) {
    .topbar {
        grid-template-columns: 1fr auto;
    }
    .nav-shell,
    .nav-cta {
        display: none;
    }
    .menu-button {
        display: grid;
        place-items: center;
    }
    .topbar.is-open .nav-shell {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: 0;
        background: rgba(8, 9, 8, 0.97);
        z-index: -1;
    }
    .topbar.is-open .nav-shell a {
        font-family: var(--display);
        font-size: clamp(30px, 8vw, 60px);
    }
    .hero-copy,
    .section-intro,
    .services-layout,
    .clients-head,
    .process-head,
    .faq-head,
    .contact-top {
        grid-template-columns: 1fr;
    }
    .hero-copy {
        gap: 28px;
    }
    .hero-aside {
        max-width: 450px;
    }
    .services-copy p {
        margin-top: 0;
    }
    .services-copy {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .services-intro {
        max-width: 650px;
    }
    .service-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .service-direction {
        min-height: 330px;
    }
    .hero--editorial .hero-copy {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
        gap: 32px;
    }
    .hero--editorial h1 {
        font-size: clamp(40px, 5.7vw, 58px);
    }
    .hero--editorial .hero-media.hero-media--team img {
        height: 74%;
        object-position: 80% center;
    }
    .hero--editorial .hero-media.hero-media--team::after {
        background: linear-gradient(
            180deg,
            rgba(5, 6, 5, 0.1),
            transparent 25%,
            rgba(8, 9, 8, 0.2) 50%,
            #080908 74%
        );
    }
    .hero-portal__fallback::before {
        left: 81.5%;
    }
    .hero--editorial .hero-media--portal::after {
        background:
            radial-gradient(
                ellipse 48% 38% at 84% 78%,
                rgba(3, 5, 3, 0.7),
                transparent 100%
            ),
            linear-gradient(
                180deg,
                rgba(3, 5, 3, 0.34) 0%,
                rgba(3, 5, 3, 0.03) 28%,
                rgba(3, 5, 3, 0.3) 67%,
                rgba(8, 9, 8, 0.76) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3, 5, 3, 0.8) 0%,
                rgba(3, 5, 3, 0.4) 45%,
                rgba(3, 5, 3, 0.08) 74%,
                rgba(3, 5, 3, 0.34) 100%
            );
    }
    .case-track {
        gap: 32px;
    }
    .case-card {
        --case-media-height: 420px;
        flex-basis: 320px;
    }
    .case-card--shape-1 {
        --case-media-height: 260px;
        flex-basis: 200px;
        margin-top: 100px;
    }
    .case-card--shape-3 {
        --case-media-height: 330px;
        flex-basis: 240px;
        margin-top: 110px;
    }
    .case-card--shape-4 {
        --case-media-height: 400px;
        flex-basis: 300px;
        margin-top: 24px;
    }
    .review-grid {
        grid-auto-columns: 76%;
    }
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }
    .blog-card:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .blog-card:not(:first-child) {
        grid-template-columns: 1fr;
    }
    .blog-card:not(:first-child) .blog-media {
        aspect-ratio: 3 / 2;
    }
    .integration-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .integration-logos span:nth-child(3) {
        border-right: 0;
    }
    .integration-logos span:nth-child(-n + 3) {
        border-bottom: 1px solid var(--line-dark);
    }
    .trust-layout {
        grid-template-columns: 1fr;
    }
    .trust-copy {
        position: relative;
        top: 0;
    }
    .process-step {
        grid-template-columns: 55px minmax(180px, 0.7fr) minmax(240px, 1.3fr);
    }
    .faq-head {
        display: grid;
    }
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    :root {
        --edge: 18px;
    }
    html,
    body {
        max-width: 100%;
    }
    * {
        scrollbar-width: none;
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    h1,
    h2,
    h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .hero,
    main,
    section,
    .hero-inner,
    .hero-copy,
    .hero-copy > *,
    .section-intro,
    .section-intro > *,
    .services-layout,
    .services-layout > *,
    .service-matrix,
    .service-matrix > *,
    .service-direction,
    .service-direction > *,
    .case-track,
    .case-track > *,
    .clients-head,
    .clients-head > *,
    .client-logo-grid,
    .client-logo-grid > *,
    .review-grid,
    .review-grid > *,
    .blog-grid,
    .blog-grid > *,
    .trust-layout,
    .trust-layout > *,
    .process-head,
    .process-head > *,
    .faq-head,
    .faq-head > *,
    .contact-top,
    .contact-top > *,
    .footer-main,
    .footer-main > * {
        min-width: 0;
        max-width: 100%;
    }
    .topbar {
        top: 12px;
        width: auto;
        max-width: calc(100vw - 36px);
    }
    .menu-button {
        display: grid !important;
    }
    .hero {
        min-height: 100svh;
    }
    .hero-inner {
        padding-top: 130px;
    }
    .hero-media img {
        object-position: 62% center;
    }
    .hero-copy {
        padding-bottom: 56px;
    }
    h1 {
        font-size: clamp(38px, 10.3vw, 48px);
        line-height: 0.95;
    }
    .hero-aside p {
        font-size: 16px;
    }
    .section {
        padding-top: 86px;
        padding-bottom: 86px;
    }
    .section-intro {
        margin-bottom: 46px;
    }
    .section-intro h2,
    .services-copy h2,
    .light-statement,
    .clients-head h2,
    .process-head h2,
    .faq-head h2 {
        font-size: clamp(34px, 9.5vw, 48px);
    }
    .trust .light-statement {
        font-size: clamp(30px, 8.2vw, 36px);
        overflow-wrap: normal;
        word-break: normal;
    }
    .contact-title {
        font-size: clamp(34px, 9vw, 42px);
    }
    .services-layout {
        gap: 44px;
    }
    .services-copy {
        gap: 15px;
    }
    .services-copy p {
        margin-top: 2px;
        font-size: 16px;
    }
    .service-matrix {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .service-direction {
        min-height: 0;
        padding: 22px;
    }
    .service-direction__heading {
        font-size: clamp(25px, 7.4vw, 34px);
    }
    .service-direction__title-text {
        max-width: 15ch;
    }
    .service-direction > p {
        margin-top: 20px;
        font-size: 16px;
    }
    .service-direction__items {
        gap: 7px;
        margin-top: 26px;
    }
    .service-direction__items a {
        font-size: 14px;
    }
    .services-index-link {
        width: 100%;
        justify-self: stretch;
    }
    .hero--editorial .hero-inner {
        padding-top: 150px;
    }
    .hero--editorial .hero-copy {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding-bottom: 42px;
    }
    .hero--editorial h1 {
        font-size: clamp(32px, 8.5vw, 48px);
        line-height: 1.08;
    }
    .hero--editorial .hero-media img {
        object-position: 70% center;
    }
    .hero--editorial .hero-media.hero-media--team img {
        height: 50%;
        object-position: 76% center;
    }
    .hero--editorial .hero-media.hero-media--team::after {
        background: linear-gradient(
            180deg,
            rgba(5, 6, 5, 0.1),
            transparent 22%,
            rgba(8, 9, 8, 0.18) 34%,
            #080908 50%
        );
    }
    .hero-portal {
        inset: -2% -8% -10%;
    }
    .hero--editorial .hero-media--portal::after {
        background:
            linear-gradient(
                180deg,
                rgba(3, 5, 3, 0.22) 0%,
                rgba(3, 5, 3, 0.02) 25%,
                rgba(3, 5, 3, 0.66) 58%,
                rgba(8, 9, 8, 0.82) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3, 5, 3, 0.76) 0%,
                rgba(3, 5, 3, 0.28) 56%,
                rgba(3, 5, 3, 0.1) 100%
            );
    }
    .case-track {
        gap: 20px;
    }
    .case-card {
        --case-media-height: min(100vw, 390px);
        flex-basis: 82vw;
        margin-top: 0;
    }
    .case-card--shape-1 {
        --case-media-height: min(80vw, 330px);
        flex-basis: 72vw;
        margin-top: 0;
    }
    .case-card--shape-3 {
        --case-media-height: min(90vw, 350px);
        flex-basis: 76vw;
        margin-top: 0;
    }
    .case-card--shape-4 {
        --case-media-height: min(96vw, 380px);
        flex-basis: 80vw;
        margin-top: 0;
    }
    .case-card-caption {
        min-height: 66px;
        padding-top: 16px;
    }
    .case-card-caption--featured {
        min-height: 92px;
    }
    .case-card-caption__title {
        font-size: clamp(23px, 6vw, 27px);
    }
    .case-card-media__copy h3 {
        font-size: clamp(18px, 5.1vw, 22px);
    }
    .case-card--shape-1 .case-card-media__copy h3 {
        font-size: clamp(17px, 4.6vw, 20px);
    }
    .case-card-arrow {
        width: 46px;
        height: 46px;
    }
    .case-card-arrow svg {
        width: 24px;
        height: 24px;
    }
    .case-card-tag {
        top: 16px;
        left: 16px;
    }
    .work-head-actions {
        margin: -24px 0 26px;
    }
    .clients-head {
        margin-bottom: 46px;
    }
    .client-logo-grid {
        --client-tile-size: clamp(180px, 58vw, 235px);
        --client-expanded-size: min(82vw, 320px);
    }
    .client-logo-grid > .client-logo {
        max-width: none;
    }
    .client-logo {
        min-height: 0;
    }
    .client-logo:not(.client-logo--static):is(:hover, :focus-visible, .is-active) {
        flex-basis: var(--client-expanded-size);
    }
    .integration-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .integration-logos span {
        min-height: 72px;
        border-bottom: 1px solid var(--line-dark);
    }
    .integration-logos span:nth-child(odd) {
        border-right: 1px solid var(--line-dark);
    }
    .integration-logos span:nth-child(even) {
        border-right: 0;
    }
    .trust-layout {
        gap: 50px;
    }
    .process-step {
        min-height: 0;
        grid-template-columns: 34px 1fr;
        gap: 13px;
        padding: 25px 0;
    }
    .process-step p {
        grid-column: 2;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-card:first-child {
        grid-column: auto;
    }
    .blog-card:not(:first-child) {
        grid-template-columns: 1fr;
    }
    .blog-card:first-child .blog-media,
    .blog-card:not(:first-child) .blog-media {
        aspect-ratio: 3 / 2;
    }
    .review-grid {
        grid-auto-columns: 88%;
    }
    .review-card {
        min-height: 330px;
    }
    .review-navigation {
        grid-template-columns: 1fr auto;
        gap: 16px;
    }
    .review-progress {
        grid-column: 1 / -1;
    }
    .faq-item summary {
        grid-template-columns: minmax(0, 1fr) 34px;
        gap: 14px;
    }
    .faq-item summary span:first-child {
        font-size: 21px;
    }
    .faq-toggle {
        width: 34px;
        height: 34px;
    }
    .faq-answer {
        padding-right: 0;
    }
    .contact-top {
        gap: 56px;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .footer-main,
    .footer-legal {
        grid-template-columns: 1fr;
    }
    .footer-main {
        gap: 42px;
    }
    .footer-legal {
        align-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero-media img {
        animation: none;
        transform: none;
    }
    .hero-portal__canvas {
        transition: none;
    }
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}