@font-face {
    font-family: "NC Inter";
    src: url("/assets/framerusercontent.com/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.b517f9feb3.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --nc-about-ink: #111;
    --nc-about-soft: #8a8a8a;
    --nc-about-gutter: 56px;
    --nc-about-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

html {
    background: #fff;
    color: var(--nc-about-ink);
    font-family: "NC Inter", Inter, Arial, sans-serif;
    font-synthesis: none;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body {
    margin: 0;
    min-width: 320px;
    background: #fff;
}

a {
    color: inherit;
}

p,
h1,
figure {
    margin: 0;
}

.nc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nc-about-landing {
    position: relative;
    height: 434px;
    background: #fff;
}

.nc-about-header {
    position: absolute;
    top: 58px;
    left: var(--nc-about-gutter);
    display: flex;
}

.nc-about-brand {
    display: inline-block;
    color: var(--nc-about-ink);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: -0.22px;
    line-height: 13px;
    text-decoration: none;
}

.nc-about-brand:focus-visible,
.nc-about-action:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

.nc-about-studio {
    position: absolute;
    top: 250px;
    left: var(--nc-about-gutter);
}

.nc-about-studio p:first-child {
    color: var(--nc-about-ink);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: -0.11px;
    line-height: 15px;
}

.nc-about-studio p + p {
    margin-top: 4px;
    color: var(--nc-about-soft);
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: -0.21px;
    line-height: 15px;
}

.nc-about-actions {
    position: absolute;
    top: 227px;
    left: 65.7407407%;
    display: flex;
    gap: 38px;
}

.nc-about-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 50px;
    border: 0.5px solid #747474;
    border-radius: 5px;
    background: #fff;
    color: var(--nc-about-ink);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: -0.11px;
    line-height: 15px;
    text-decoration: none;
    transition:
        background-color 280ms ease,
        border-color 280ms ease,
        color 280ms ease;
}

.nc-about-action--client {
    gap: 10px;
}

.nc-about-action__pulse {
    display: block;
    width: 4px;
    height: 4px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.86;
    transform-origin: center;
    animation: nc-about-dot-pulse 2.8s 1.45s ease-in-out infinite;
}

.nc-about-action:hover {
    border-color: var(--nc-about-ink);
    background: var(--nc-about-ink);
    color: #fff;
}

.nc-about-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 1512 / 801;
    overflow: hidden;
    background: #efefef;
}

.nc-about-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.nc-about-bio {
    position: relative;
    height: 336px;
    background: #fff;
}

.nc-about-bio p {
    position: absolute;
    top: 92px;
    left: 65.7407407%;
    width: 411px;
    color: var(--nc-about-ink);
    font-size: 11px;
    font-weight: 300;
    line-height: 20px;
}

.nc-about-bio__line {
    display: block;
    letter-spacing: -0.02em;
}

.nc-about-bio__line--first {
    letter-spacing: 0px;
}

.nc-calm-reveal__word {
    display: inline-block;
}

.nc-calm-reveal__character {
    display: inline-block;
    opacity: 0.001;
    filter: blur(2px);
    transform: translate3d(0, 2px, 0);
    will-change: opacity, filter, transform;
}

.nc-about-bio.is-visible .nc-calm-reveal__character,
.nc-about-footer.is-visible .nc-calm-reveal__character {
    animation: nc-calm-character-reveal 3000ms linear both;
    animation-delay: calc(var(--nc-character-index) * 5ms);
}

.nc-about-footer {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: flex-start;
    padding: 32px var(--nc-about-gutter);
    background: #fff;
    color: var(--nc-about-soft);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.6;
}

.nc-about-footer__nav {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    white-space: nowrap;
}

.nc-about-footer__group {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}

.nc-about-footer__group--legal {
    margin-right: auto;
}

.nc-about-footer a,
.nc-about-footer__meta {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-decoration: none;
}

.nc-about-footer__identity {
    color: var(--nc-about-ink);
    margin-right: 0;
}

.nc-about-footer a:hover {
    color: var(--nc-about-ink);
}

.nc-about-footer a:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 4px;
}

.nc-about-footer__pipe {
    margin-left: 12px;
    margin-right: 8px;
    color: rgba(17, 17, 17, 0.2);
}

.nc-about-footer__separator {
    margin-inline: 8px;
    color: var(--nc-about-soft);
}

html.has-nc-about-motion [data-about-brand],
html.has-nc-about-motion [data-about-statement],
html.has-nc-about-motion [data-about-services],
html.has-nc-about-motion [data-about-action],
html.has-nc-about-motion [data-about-portrait] {
    opacity: 0.001;
}

html.has-nc-about-motion.is-ready [data-about-brand] {
    animation: nc-about-brand-reveal 560ms 60ms var(--nc-about-enter-ease) both;
}

html.has-nc-about-motion.is-ready [data-about-statement] {
    animation: nc-about-enter-rise 620ms 300ms var(--nc-about-enter-ease) both;
}

html.has-nc-about-motion.is-ready [data-about-services] {
    animation: nc-about-enter-rise 620ms 450ms var(--nc-about-enter-ease) both;
}

html.has-nc-about-motion.is-ready [data-about-action="client"] {
    animation: nc-about-enter-rise 660ms 680ms var(--nc-about-enter-ease) both;
}

html.has-nc-about-motion.is-ready [data-about-action="team"] {
    animation: nc-about-enter-rise 660ms 800ms var(--nc-about-enter-ease) both;
}

html.has-nc-about-motion.is-ready [data-about-portrait] {
    animation: nc-about-portrait-enter 820ms 980ms var(--nc-about-enter-ease) both;
}

html.has-nc-about-motion .nc-about-action:focus-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

@keyframes nc-about-brand-reveal {
    from {
        opacity: 0.001;
        clip-path: inset(0 100% 0 0);
        transform: translate3d(-4px, 0, 0);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nc-about-enter-rise {
    from {
        opacity: 0.001;
        transform: translate3d(0, 6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nc-about-portrait-enter {
    from {
        opacity: 0.001;
        transform: translate3d(0, 6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nc-calm-character-reveal {
    from {
        opacity: 0.001;
        filter: blur(2px);
        transform: translate3d(0, 2px, 0);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes nc-about-dot-pulse {
    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.92);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@media (min-width: 810px) and (max-width: 1199.98px) {
    .nc-about-actions {
        right: var(--nc-about-gutter);
        left: auto;
    }

    .nc-about-bio p {
        right: var(--nc-about-gutter);
        left: auto;
    }
}

@media (max-width: 809.98px) {
    :root {
        --nc-about-gutter: 20px;
    }

    .nc-about-landing {
        height: 400px;
    }

    .nc-about-header {
        top: 24px;
    }

    .nc-about-studio {
        top: 154px;
        right: var(--nc-about-gutter);
    }

    .nc-about-studio p + p {
        max-width: 310px;
    }

    .nc-about-actions {
        top: 262px;
        right: var(--nc-about-gutter);
        left: var(--nc-about-gutter);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .nc-about-action {
        width: auto;
    }

    .nc-about-portrait {
        height: auto;
        aspect-ratio: 1512 / 801;
    }

    .nc-about-bio {
        height: auto;
        min-height: 332px;
        padding: 72px var(--nc-about-gutter) 120px;
    }

    .nc-about-bio p {
        position: static;
        width: min(100%, 411px);
        margin-left: auto;
    }

    .nc-about-bio__line {
        display: inline;
    }

    .nc-about-footer {
        min-height: 120px;
        align-items: flex-start;
        padding-top: 32px;
    }

    .nc-about-footer__nav {
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 8px;
        gap: 0;
    }
}

@media (max-width: 426px) {
    .nc-about-footer__group--copyright {
        margin-left: auto;
    }
}

@media (max-width: 370px) {
    .nc-about-action {
        font-size: 10px;
    }

    .nc-about-action--client {
        gap: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.has-nc-about-motion [data-about-brand],
    html.has-nc-about-motion [data-about-statement],
    html.has-nc-about-motion [data-about-services],
    html.has-nc-about-motion [data-about-action],
    html.has-nc-about-motion [data-about-portrait],
    .nc-calm-reveal__character {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .nc-about-action__pulse {
        opacity: 0.86 !important;
        transform: none !important;
        animation: none !important;
    }

    .nc-about-action {
        transition: none;
    }
}