@font-face {
    font-family: Space;
    src: url('assets/fonts/SpaceGrotesk.ttf') format('truetype');
    font-weight: 300 700;
    font-display: swap
}

:root {
    --bg: #110E18;
    --gutter: clamp(22px, 4.2vw, 80px);
    --ink: #18151F;
    --line: #35303E;
    --muted: #B1ABBC;
    --paper: #F4F2F7;
    --violet: #6827F5;
    --text-body: 18px;
    --text-small: 16px;
}

* {
    box-sizing: border-box
}

html {
    /* Oversized and rotated artwork must not widen the document. Clip keeps
       the page's vertical scroll container and sticky navigation intact. */
    overflow-x: clip;
    overscroll-behavior-x: none;
    scroll-behavior: smooth;
    scroll-padding-top: 30px
}

body {
    background: var(--bg);
    color: var(--paper);
    font-family: Space, Arial, sans-serif;
    font-size: var(--text-body);
    line-height: 1.6;
    margin: 0;
    min-width: 0;
    overflow-x: clip;
}

main {
    min-width: 0;
    overflow-x: clip;
}

.section-heading > *, .about-heading > *, .studio-intro > *,
.services > *, .services article > *, .process ol > *,
.location-layout > *, .contact-bottom > *, footer > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@supports not (overflow: clip) {
    html {
        overflow-x: hidden;
    }
}

@media (any-pointer: coarse) {
    body {
        /* Keep one-finger page movement vertical, while preserving pinch zoom. */
        touch-action: pan-y pinch-zoom;
    }
}

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

button {
    color: inherit;
    cursor: pointer;
    font: inherit;
}

a, button {
    -webkit-tap-highlight-color: transparent
}

button:disabled {
    cursor: default
}

button[hidden], [hidden] {
    display: none !important
}

a:focus-visible, button:focus-visible {
    outline: 2px solid #BDA0FF;
    outline-offset: 6px
}

::selection {
    background: var(--violet);
    color: white
}

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

h1, h2, h3, p, figure {
    margin: 0
}

h1, h2, h3 {
    font-weight: 500;
    line-height: 1.05
}

p {
    color: var(--muted)
}

.eyebrow {
    font-family: Space, Arial, sans-serif;
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.6;
    text-transform: uppercase;
}

.violet {
    color: var(--violet)
}

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

.skip-link {
    background: var(--paper);
    color: var(--ink);
    left: 20px;
    padding: 12px;
    position: fixed;
    top: -90px;
    z-index: 20;
}

.skip-link:focus {
    top: 10px
}

.site-header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    height: 100px;
    justify-content: space-between;
    margin: 0 var(--gutter);
    position: relative;
    z-index: 5
}

.wordmark {
    align-items: center;
    display: inline-flex;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -1.3px;
    white-space: nowrap
}

.wordmark span {
    font-weight: 400
}

.wordmark i {
    color: #9A71FF;
    font-size: 32px;
    font-style: normal;
    line-height: 1;
    margin-left: 8px;
}

.site-header nav {
    align-items: center;
    display: flex;
    font-size: var(--text-small);
    gap: 38px;
}

.site-header nav a {
    padding: 12px 0
}

.site-header nav sup {
    color: #AAA0B7;
    font-size: var(--text-small);
    margin-left: 5px
}

.site-header nav a:hover, .text-link:hover {
    color: #BDA0FF
}

.nav-contact {
    margin-left: 32px
}

.nav-contact span {
    margin-left: 24px
}

.menu-toggle {
    background: transparent;
    border: 0;
    padding: 10px
}

.hero {
    height: calc(100svh - 100px);
    isolation: isolate;
    max-height: 1020px;
    min-height: 740px;
    overflow: hidden;
    padding: 30px var(--gutter) 30px;
    position: relative;
}

.hero-top {
    color: var(--muted);
    display: flex;
    justify-content: space-between;
}

.hero h1 {
    font-size: clamp(80px, 9.9vw, 170px);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .98;
    margin-top: clamp(60px, 9vh, 110px);
    max-width: 1100px;
    position: relative;
}

.character {
    display: inline-block;
    margin-left: 10.5vw
}

.hero-bottom {
    align-items: end;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    margin-top: 46px;
}

.hero-description p {
    color: #D0CAD9;
    font-size: var(--text-body);
    line-height: 1.65
}

.hero-actions {
    align-items: center;
    display: flex;
    font-size: var(--text-small);
    gap: 30px;
    margin-top: 27px;
}

.solid-link {
    align-items: center;
    background: var(--paper);
    color: var(--ink);
    display: flex;
    gap: 30px;
    justify-content: space-between;
    min-width: 154px;
    padding: 15px 22px;
    transition: background .2s
}

.solid-link:hover {
    background: #C8B1FF
}

.text-link {
    align-items: center;
    border-bottom: 1px solid #756D80;
    display: inline-flex;
    font-size: var(--text-small);
    gap: 28px;
    padding: 12px 0;
}

.cross {
    color: #A29AAA;
    font-size: 32px;
}

.scroll-note {
    bottom: 27px;
    color: #B1ABBC;
    display: flex;
    font-size: var(--text-small);
    gap: 46px;
    left: var(--gutter);
    position: absolute;
}

.section {
    padding: 110px var(--gutter);
    scroll-margin-top: 0
}

.section-heading {
    align-items: end;
    display: grid;
    gap: 40px;
    grid-template-columns:1fr 2fr 1.2fr;
    margin-bottom: 55px
}

.section-heading .eyebrow {
    align-self: start;
    padding-top: 10px
}

.section-heading h2, .studio h2 {
    font-size: clamp(38px, 4.3vw, 68px);
    letter-spacing: -.055em;
    line-height: 1.06
}

.section-heading > p:last-child {
    font-size: var(--text-body);
    line-height: 1.8
}

.work {
    border-top: 1px solid var(--line);
    padding-top: 90px
}

.work-empty {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    display: grid;
    gap: 40px;
    grid-template-columns:1fr 2fr 1.2fr;
    padding: 65px 0
}

.work-empty h3 {
    font-size: 25px;
    letter-spacing: -.04em;
    margin-bottom: 16px
}

.work-empty p {
    font-size: var(--text-body);
    margin-bottom: 18px;
    max-width: 440px;
}

.empty-note {
    align-self: end;
    color: #81798D;
    text-align: right
}

figcaption {
    align-items: start;
    display: flex;
    gap: 15px;
    justify-content: space-between;
    padding-top: 20px;
}

figcaption h3 {
    font-size: 19px;
    letter-spacing: -.03em;
    margin-bottom: 7px
}

figcaption p {
    font-size: var(--text-body)
}

figcaption .eyebrow {
    color: #73697E;
    font-size: var(--text-small);
    padding-top: 4px;
    text-align: right;
}

.studio {
    padding-top: 100px
}

.studio > .eyebrow {
    color: var(--muted);
    margin-bottom: 50px
}

.studio-intro {
    display: grid;
    gap: 12vw;
    grid-template-columns:1.25fr 1fr;
}

.studio-intro .lead {
    color: var(--paper);
    font-size: 24px;
    letter-spacing: -.035em;
    line-height: 1.4;
    margin-bottom: 25px
}

.studio-intro p:not(.lead) {
    font-size: var(--text-body);
    max-width: 450px
}

.studio-intro .text-link {
    margin-top: 20px
}

.services {
    display: grid;
    gap: 40px;
    grid-template-columns:1fr 3.2fr;
    margin-top: 100px
}

.services > h3 {
    color: var(--muted);
    padding-top: 25px
}

.services article {
    align-items: center;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 18px;
    grid-template-columns:32px 1.2fr 1fr 16px;
    padding: 28px 0
}

.services article:last-child {
    border-bottom: 1px solid var(--line)
}

.services article > span {
    color: #9A8FAB;
    font-family: monospace;
    font-size: var(--text-small);
}

.services article h3 {
    font-size: 18px;
    letter-spacing: -.025em;
    line-height: 1.4;
}

.services article p {
    font-size: var(--text-body)
}

.process {
    display: grid;
    gap: 40px;
    grid-template-columns:1fr 3.2fr;
    margin-top: 85px
}

.process > .eyebrow {
    color: var(--muted)
}

.process ol {
    display: grid;
    gap: 24px;
    grid-template-columns:repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.process li > span {
    color: #A58BBF;
    font-family: monospace;
    font-size: var(--text-small);
}

.process h3 {
    font-size: 18px;
    letter-spacing: -.03em;
    margin: 17px 0 13px;
}

.process p {
    font-size: var(--text-body);
    line-height: 1.8
}

.contact {
    border-top: 1px solid var(--line);
    padding-bottom: 85px;
    padding-top: 42px;
}

.contact-top {
    color: var(--muted);
    display: flex;
    justify-content: space-between;
}

.contact h2 {
    font-size: clamp(65px, 9.5vw, 150px);
    letter-spacing: -.065em;
    line-height: 1.03;
    margin: 75px 0 55px;
    max-width: 1300px;
    position: relative;
}

.contact-arrow {
    bottom: 5%;
    color: #9C74FF;
    font-size: 1.3em;
    line-height: .8;
    position: absolute;
    right: 0;
    transition: transform .25s
}

.contact-arrow:hover {
    transform: translate(5px, -5px)
}

.contact-bottom {
    align-items: end;
    display: flex;
    gap: 30px;
    justify-content: space-between;
}

.contact-bottom p {
    font-size: var(--text-body)
}

.email-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    position: relative;
}

.email-link {
    border-bottom: 1px solid #7B708C;
    font-size: clamp(16px, 2vw, 28px);
    letter-spacing: -.04em;
    padding-bottom: 5px
}

.email-group button {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-small);
    min-height: 44px;
    padding: 8px 0;
}

.email-group #copy-status {
    color: #C9AFEA;
    font-size: var(--text-small);
    margin-top: 8px;
    position: absolute;
    right: 0;
    top: 100%;
}

footer {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 25px;
    justify-content: space-between;
    margin: 0 var(--gutter);
    padding: 30px 0;
}

footer .wordmark {
    font-size: 19px
}

footer .wordmark i {
    font-size: 27px
}

footer > span, footer > a:last-child {
    color: var(--muted);
    font-size: var(--text-small);
}

dialog {
    background: var(--paper);
    border: 0;
    color: var(--ink);
    max-height: 85vh;
    padding: 40px;
    width: min(900px, 90vw);
}

dialog::backdrop {
    backdrop-filter: blur(8px);
    background: #110E18CC;
}

.dialog-close {
    background: transparent;
    border: 0;
    display: block;
    margin-left: auto;
    min-height: 44px
}

dialog h2 {
    font-size: 40px;
    margin: 20px 0
}

dialog h3 {
    margin: 24px 0 12px
}

dialog p {
    color: #655B6F
}

dialog img {
    margin: 22px 0
}

dialog .text-link {
    color: var(--violet)
}

.project-feature {
    border-top: 1px solid var(--line);
    padding: 40px 0
}

.project-feature button {
    background: none;
    border: 0;
    display: block;
    padding: 0;
    text-align: left;
    width: 100%;
}

.project-feature h3 {
    font-size: 28px;
    margin: 20px 0 12px
}

.project-feature img {
    max-height: 650px;
    object-fit: cover
}

.project-feature p {
    font-size: var(--text-body);
    max-width: 600px
}

.project-feature .eyebrow {
    color: #BCA9D2;
    display: block;
    margin-top: 16px;
}

@keyframes entrance {
    from {
        opacity: 0;
        transform: translateY(15px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.hero h1, .hero-description {
    animation: entrance .8s both
}

.hero-description {
    animation-delay: .15s
}

@media (min-width: 1600px) {
    .hero-bottom {
        margin-top: 60px
    }
}

@media (max-width: 1000px) {
    .site-header nav {
        gap: 23px
    }

    .nav-contact {
        margin-left: 0
    }

    .hero {
        min-height: 700px
    }

    .hero h1 {
        font-size: 11vw;
        margin-top: 100px
    }

    .section-heading {
        gap: 25px;
        grid-template-columns:1fr 2fr;
    }

    .section-heading > p:last-child {
        grid-column: 2
    }

    .work-empty {
        grid-template-columns:1fr 2fr
    }

    .empty-note {
        display: none
    }

    .studio-intro {
        gap: 7vw
    }

    .services, .process {
        gap: 24px;
        grid-template-columns:1fr 3fr;
    }

    .services article {
        grid-template-columns:22px 1fr 16px
    }

    .services article p {
        grid-column: 2;
        grid-row: 2
    }

    .services article > span:last-child {
        grid-column: 3;
        grid-row: 1
    }

    .process ol {
        grid-template-columns:1fr 1fr;
        row-gap: 35px
    }

    footer > span:first-of-type {
        display: none
    }

    .contact-bottom {
        align-items: start;
        flex-direction: column;
        gap: 35px
    }
}

@media (max-width: 600px) {
    .site-header {
        height: 80px
    }

    .wordmark {
        font-size: 21px
    }

    .wordmark i {
        font-size: 28px
    }

    .menu-toggle:not([hidden]) {
        display: block
    }

    .site-header nav {
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        display: flex;
        flex-wrap: wrap;
        gap: 12px 25px;
        left: calc(-1 * var(--gutter));
        padding: 25px var(--gutter);
        position: absolute;
        right: calc(-1 * var(--gutter));
        top: 79px;
    }

    .site-header nav[data-open=false] {
        display: none
    }

    .site-header nav a {
        font-size: var(--text-small);
        padding: 8px 0
    }

    .site-header:has(.menu-toggle[hidden]) {
        flex-wrap: wrap;
        gap: 12px;
        height: auto;
        min-height: 80px;
        padding: 20px 0;
    }

    .site-header:has(.menu-toggle[hidden]) nav {
        border: 0;
        gap: 15px;
        padding: 0;
        position: static;
    }

    .hero {
        height: 850px;
        max-height: calc(100svh + 150px);
        min-height: 0;
        padding-top: 25px
    }

    .hero-top {
        font-size: var(--text-small)
    }

    .hero h1 {
        font-size: clamp(56px, 13.9vw, 84px);
        letter-spacing: -.07em;
        line-height: 1.05;
        margin-top: 49px;
    }

    .character {
        margin-left: 0
    }

    .hero-bottom {
        bottom: 90px;
        left: var(--gutter);
        margin: 0;
        position: absolute;
        right: var(--gutter);
    }

    .hero-description p {
        font-size: var(--text-body)
    }

    .hero-actions {
        font-size: var(--text-small);
        gap: 24px;
        margin-top: 22px;
    }

    .solid-link {
        min-width: 135px;
        padding: 13px 16px;
    }

    .scroll-note {
        bottom: 28px
    }

    .section {
        padding: 65px var(--gutter)
    }

    .section-heading {
        display: block;
        margin-bottom: 35px
    }

    .section-heading > .eyebrow {
        margin-bottom: 28px;
        padding: 0;
    }

    .section-heading h2, .studio h2 {
        font-size: 43px
    }

    .section-heading > p:last-child {
        font-size: var(--text-body);
        margin-top: 25px;
    }

    .work-empty {
        gap: 22px;
        grid-template-columns:32px 1fr;
        padding: 35px 0
    }

    .work-empty h3 {
        font-size: 23px;
        line-height: 1.2
    }

    .work-empty p {
        font-size: var(--text-body)
    }

    figcaption h3 {
        font-size: 18px
    }

    figcaption .eyebrow {
        font-size: var(--text-small)
    }

    .studio > .eyebrow {
        margin-bottom: 28px
    }

    .studio-intro {
        display: block
    }

    .studio-intro > div {
        margin-top: 32px
    }

    .studio-intro .lead {
        font-size: 22px
    }

    .services {
        display: block;
        margin-top: 60px
    }

    .services > h3 {
        margin-bottom: 22px
    }

    .services article {
        gap: 8px 15px;
        padding: 23px 0;
    }

    .services article h3 {
        font-size: 18px
    }

    .process {
        display: block;
        margin-top: 50px
    }

    .process ol {
        gap: 30px 20px;
        margin-top: 25px;
    }

    .contact-top > span {
        display: none
    }

    .contact h2 {
        font-size: clamp(51px, 12.6vw, 76px);
        margin: 45px 0 35px
    }

    .contact-arrow {
        bottom: 5px;
        font-size: .8em;
        right: 0;
    }

    .contact-bottom p {
        font-size: var(--text-body)
    }

    .email-group {
        gap: 16px
    }

    .email-link {
        font-size: 19px
    }

    .email-group button {
        font-size: var(--text-small)
    }

    footer {
        flex-wrap: wrap;
        gap: 18px;
        padding: 25px 0;
    }

    footer .wordmark {
        flex-basis: 100%
    }

    footer > span {
        flex: 1
    }

    footer > a:last-child {
        margin-left: auto
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    *, *:before, *:after {
        animation: none !important;
        transition: none !important
    }
}

/* Desktop navigation uses links; the menu button belongs to mobile. */
@media (min-width: 601px) {
    .menu-toggle {
        display: none
    }
}

.hero h1 {
    text-shadow: 0 2px 30px #110E1880
}