:root {
    --bg: #F4F1EC;
    --paper: #FBF9F5;
    --ink: #111111;
    --charcoal: #1B1B1A;
    --mute: #6B6761;
    --line: #D9D4CB;
    --amber: #F29A1C;
    --orange: #E4571E;
    --red: #E2382F;
    --orange-ink: #A83A0C;
    --mute-dk: #9b958b;
    --pad: clamp(20px,5vw,72px);
    --max: 1400px;
    --nav: 78px;
    --f-sans: 'Manrope',system-ui,sans-serif;
    --f-mono: 'IBM Plex Mono',ui-monospace,monospace;
    --f-serif: 'Cormorant Garamond',Georgia,serif;
    --ease: cubic-bezier(.2,.8,.2,1);
}

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

@font-face {
    font-family: 'Mars Mission';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Mars Mission'), url('fonts/MarsMission.woff2') format('woff2'), url('https://fonts.cdnfonts.com/s/17321/Mars Mission.woff') format('woff');
}

@font-face {
    font-family: 'Mars Mission';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Mars Mission Italic'), url('fonts/MarsMission-Italic.woff2') format('woff2'), url('https://fonts.cdnfonts.com/s/17321/Mars Mission Italic.woff') format('woff');
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden
}

body {
    font-family: var(--f-sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip
}

img, video, svg, canvas {
    display: block;
    max-width: 100%
}

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

button, input, select, textarea {
    font: inherit;
    color: inherit
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad)
}

.eyebrow {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mute);
    display: block
}

h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .98
}

h1 {
    font-size: clamp(48px,9vw,148px)
}

h2 {
    font-size: clamp(36px,5.6vw,88px)
}

h3 {
    font-size: clamp(20px,2vw,28px);
    letter-spacing: -.02em;
    line-height: 1.1
}

.lead {
    font-size: clamp(17px,1.5vw,22px);
    color: var(--mute);
    max-width: 40ch;
    line-height: 1.45
}

.accent {
    color: var(--orange)
}

/* ---------- header ---------- */
.nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    inset: 0 0 auto 0;
    z-index: 50;
    transition: background .4s,backdrop-filter .4s,border-color .4s;
    border-bottom: 1px solid transparent
}

    .nav.scrolled, .nav.solid {
        background: rgba(244,241,236,.74);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        border-color: var(--line)
    }

    .nav .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--nav)
    }

.brand {
    font-family: "Mars Mission";
    display: flex;
    align-items: center;
    gap: 16px
}

    .brand img {
        height: 56px;
        width: auto
    }

.wm {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch
}

    .wm b {
        font-weight: 800;
        font-size: 21px;
        letter-spacing: .08em;
        line-height: 1;
        margin-right: -.08em
    }

    .wm small {
        display: flex;
        justify-content: space-between;
        width: 0;
        min-width: 100%;
        margin-top: 7px;
        font-family: var(--f-mono);
        font-size: 9.5px;
        font-weight: 500;
        line-height: 1;
        color: var(--mute)
    }

        .wm small i {
            font-style: normal;
            display: block
        }

            .wm small i.sp {
                width: .55em
            }

.nav ul {
    display: flex;
    gap: 36px;
    list-style: none;
    height: var(--nav)
}

.nav li {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative
}

    .nav li > a {
        font-size: 14px;
        font-weight: 600;
        position: relative;
        padding: 6px 0
    }

    .nav li > a {
        transition: color .35s var(--ease)
    }

        .nav li:hover > a, .nav li > a[aria-current] {
            color: var(--orange)
        }

        .nav li > a[aria-current] {
            font-weight: 800
        }

.dd {
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(640px,86vw);
    transform: translate(-50%,10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease),transform .5s var(--ease),visibility .35s
}

.nav li:hover .dd, .nav li:focus-within .dd {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0)
}

.dd-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 28px;
    padding: 22px 24px;
    background: rgba(251,249,245,.82);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(17,17,17,.1);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.35)
}

    .dd-in a {
        color: var(--ink);
        display: flex;
        align-items: baseline;
        gap: 12px;
        padding: 11px 0;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid rgba(17,17,17,.08);
        transition: color .3s,padding-left .45s var(--ease)
    }

        .dd-in a span {
            font-family: var(--f-mono);
            font-size: 10px;
            color: var(--mute)
        }

        .dd-in a:hover {
            color: var(--orange);
            padding-left: 8px
        }

.burger {
    display: none;
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: relative
}

    .burger span {
        position: absolute;
        left: 10px;
        right: 10px;
        height: 2px;
        background: var(--ink);
        transition: .3s
    }

        .burger span:nth-child(1) {
            top: 16px
        }

        .burger span:nth-child(2) {
            top: 26px
        }

.menu-open .burger span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg)
}

.menu-open .burger span:nth-child(2) {
    top: 21px;
    transform: rotate(-45deg)
}

.nav.on-dark:not(.scrolled) {
    color: #fff
}

    .nav.on-dark:not(.scrolled) .wm small {
        color: rgba(255,255,255,.62)
    }

    .nav.on-dark:not(.scrolled) .burger span {
        background: #fff
    }

.menu-open .nav.on-dark:not(.scrolled) {
    color: var(--ink)
}

    .menu-open .nav.on-dark:not(.scrolled) .burger span {
        background: var(--ink)
    }

    .menu-open .nav.on-dark:not(.scrolled) .wm small {
        color: var(--mute)
    }

/* ---------- buttons ---------- */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 32px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .03em;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    transition: color .5s var(--ease),border-color .5s var(--ease),transform .4s var(--ease),box-shadow .5s var(--ease)
}

    .btn::before {
        content: "";
        position: absolute;
        top: -1px;
        right: -1px;
        bottom: -1px;
        left: -1px;
        inset: -1px;
        background: var(--orange);
        transform: translateY(102%);
        transition: transform .6s var(--ease);
        z-index: -1
    }

    .btn:hover::before, .btn:focus-visible::before {
        transform: translateY(0)
    }

    .btn:hover, .btn:focus-visible {
        border-color: var(--orange);
        color: #fff;
        box-shadow: 0 14px 30px -14px rgba(228,87,30,.7)
    }

    .btn:active {
        transform: scale(.98)
    }

    .btn.ghost {
        background: transparent;
        color: var(--ink)
    }

        .btn.ghost::before {
            background: var(--ink)
        }

        .btn.ghost:hover {
            border-color: var(--ink);
            color: #fff;
            box-shadow: none
        }

    .btn.light {
        background: #fff;
        color: var(--ink);
        border-color: #fff
    }

        .btn.light:hover {
            color: #fff
        }

    .btn.glass {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.38);
        color: #fff;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px)
    }

        .btn.glass::before {
            background: #fff
        }

        .btn.glass:hover {
            color: var(--ink);
            border-color: #fff;
            box-shadow: none
        }

    .btn.sm {
        padding: 12px 22px;
        font-size: 13px
    }

    .btn:disabled {
        opacity: .6;
        pointer-events: none
    }

.nav.on-dark:not(.scrolled) .nav-cta {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.38);
    color: #fff;
    backdrop-filter: blur(14px)
}

    .nav.on-dark:not(.scrolled) .nav-cta::before {
        background: #fff
    }

    .nav.on-dark:not(.scrolled) .nav-cta:hover {
        color: var(--ink);
        border-color: #fff
    }

/* ---------- hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background: #0f0e0d;
    overflow: hidden;
    padding: 0
}

.hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0
}

    .hero-media canvas, .hero-media video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .hero-media video {
        opacity: 0;
        transition: opacity 1.4s ease
    }

        .hero-media video.ready {
            opacity: 1
        }

    .hero-media::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        background: linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.12) 38%,rgba(10,10,10,.8) 100%),linear-gradient(90deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,0) 62%)
    }

.hero-mark {
    position: absolute;
    right: clamp(24px,9vw,160px);
    top: 50%;
    height: clamp(230px,48vh,520px);
    width: auto;
    transform: translateY(-64%);
    filter: drop-shadow(0 40px 80px rgba(228,87,30,.38));
    animation: float 9s ease-in-out infinite;
    pointer-events: none
}

@keyframes float {
    50% {
        transform: translateY(-68%)
    }
}

.hero .wrap {
    position: relative;
    width: 100%;
    padding-bottom: clamp(40px,8vh,96px);
    padding-top: 150px
}

.hero .eyebrow {
    color: rgba(255,255,255,.72);
    margin-bottom: 28px
}

.hero h1 {
    max-width: 11ch
}

.hero-foot {
    display: flex;
    gap: 32px;
    align-items: flex-end;
    margin-top: 44px;
    flex-wrap: wrap
}

.hero .lead {
    color: rgba(255,255,255,.8)
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.glass {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255,255,255,.16)
}

.hero-card {
    position: absolute;
    right: var(--pad);
    bottom: clamp(40px,8vh,96px);
    padding: 22px 26px;
    display: none;
    min-width: 260px
}

    .hero-card strong {
        display: block;
        font-size: 64px;
        font-weight: 800;
        letter-spacing: -.045em;
        line-height: 1
    }

        .hero-card strong sup {
            color: var(--amber);
            font-size: .5em;
            vertical-align: top;
            margin-left: 2px
        }

    .hero-card span {
        display: block;
        margin-top: 8px;
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: rgba(255,255,255,.72)
    }

    .hero-card hr {
        border: 0;
        border-top: 1px solid rgba(255,255,255,.16);
        margin: 16px 0 14px
    }

    .hero-card p {
        font-size: 13px;
        color: rgba(255,255,255,.78)
    }

/* ---------- sections ---------- */
section {
    padding: clamp(80px,12vw,180px) 0;
    overflow-x: clip
}

.sec-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: clamp(40px,6vw,88px);
    flex-wrap: wrap
}

    .sec-head h2 {
        max-width: 12ch
    }

.dark {
    background: var(--charcoal);
    color: #F4F1EC
}

    .dark .eyebrow, .dark .lead {
        color: #a39d93
    }

/* stats */
.stats {
    padding: 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper)
}

    .stats .wrap {
        display: grid;
        grid-template-columns: repeat(4,1fr)
    }

.stat {
    padding: clamp(28px,4vw,56px) 0 clamp(28px,4vw,56px) clamp(16px,2.4vw,36px);
    border-right: 1px solid var(--line)
}

    .stat:first-child {
        padding-left: 0
    }

    .stat:last-child {
        border-right: 0
    }

    .stat strong {
        display: block;
        font-size: clamp(40px,6vw,96px);
        font-weight: 800;
        letter-spacing: -.045em;
        line-height: 1
    }

        .stat strong sup {
            font-size: .45em;
            color: var(--orange);
            vertical-align: top;
            margin-left: 2px
        }

    .stat > span {
        display: block;
        margin-top: 10px;
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--mute)
    }

/* service index (dark list) */
.svc-list {
    border-top: 1px solid #34332f;
    list-style: none
}

.svc-row {
    position: relative;
    display: grid;
    grid-template-columns: 70px 1fr 1.1fr 40px;
    gap: 24px;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #34332f;
    isolation: isolate
}

    .svc-row::before {
        content: "";
        position: absolute;
        top: 0;
        right: -28px;
        bottom: 0;
        left: -28px;
        inset: 0 -28px;
        background: linear-gradient(90deg,rgba(228,87,30,.18),rgba(228,87,30,0) 72%);
        opacity: 0;
        transform: scaleX(.94);
        transform-origin: left;
        transition: opacity .7s ease,transform 1s var(--ease);
        z-index: -1
    }

    .svc-row::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        height: 1px;
        width: 100%;
        background: var(--amber);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .9s var(--ease)
    }

    .svc-row .n, .svc-row h3, .svc-row p, .svc-row .go {
        transition: transform .9s var(--ease),color .6s ease,opacity .6s ease
    }

    .svc-row .n {
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--mute-dk)
    }

    .svc-row h3 {
        font-size: clamp(24px,3.4vw,52px);
        letter-spacing: -.035em
    }

    .svc-row p {
        color: #a39d93;
        font-size: 15px;
        max-width: 38ch
    }

    .svc-row .go {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--mute-dk);
        justify-self: end;
        white-space: nowrap
    }

    .svc-row:hover::before, .svc-row:focus-visible::before {
        opacity: 1;
        transform: none
    }

    .svc-row:hover::after, .svc-row:focus-visible::after {
        transform: scaleX(1)
    }

    .svc-row:hover h3, .svc-row:focus-visible h3 {
        transform: translateX(18px)
    }

    .svc-row:hover p {
        transform: translateX(8px);
        color: #cfc9bf
    }

    .svc-row:hover .go {
        color: var(--amber)
    }

    .svc-row:hover .n {
        color: var(--amber)
    }

.svc-list:hover li:not(:hover) .svc-row h3, .svc-list:hover li:not(:hover) .svc-row p {
    opacity: .38
}

.new-tag {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .14em;
    border: 1px solid var(--amber);
    color: var(--amber);
    padding: 3px 7px;
    margin-left: 12px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 500
}

/* ---------- work ---------- */
.wk-grid {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    gap: 20px
}

.wk {
    min-width: 0;
    position: relative;
    display: block;
    overflow: hidden;
    background: #161514;
    color: #fff;
    isolation: isolate;
    min-height: 320px
}

    .wk.big {
        grid-column: span 7;
        aspect-ratio: 16/11
    }

    .wk.side {
        grid-column: span 5
    }

    .wk.wide {
        grid-column: span 12;
        aspect-ratio: 21/8
    }

    .wk.tri {
        grid-column: span 4;
        aspect-ratio: 4/3;
        min-height: 0
    }

        .wk.tri .wk-cap {
            left: 12px;
            right: 12px;
            bottom: 12px;
            padding: 16px 18px
        }

            .wk.tri .wk-cap h3 {
                font-size: clamp(18px,1.7vw,24px)
            }

        .wk.tri .wk-desc p {
            font-size: 14px;
            padding-top: 10px
        }

        .wk.tri .wk-cap header span {
            display: none
        }

div.wk {
    cursor: default
}

[data-filtered] .wk {
    grid-column: span 6;
    aspect-ratio: 4/3
}

.wk .ph {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    transition: transform 1.4s var(--ease)
}

.wk .ph-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.4s var(--ease)
}

.wk:hover .ph, .wk:hover .ph-img {
    transform: scale(1.06)
}

.wk::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.6) 100%);
    z-index: 1;
    pointer-events: none
}

.tag {
    position: absolute;
    top: 16px;
    z-index: 3;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 10px
}

    .tag.l {
        left: 16px;
        background: rgba(251,249,245,.92);
        color: var(--ink)
    }

    .tag.r {
        right: 16px;
        background: rgba(17,17,17,.55);
        color: #fff;
        backdrop-filter: blur(8px)
    }

.wk-cap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 20px 24px;
    background: rgba(18,17,16,.38);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .6s var(--ease),transform .8s var(--ease)
}

    .wk-cap header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px
    }

    .wk-cap h3 {
        font-size: clamp(22px,2.4vw,34px);
        letter-spacing: -.03em
    }

    .wk-cap header span {
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(255,255,255,.7);
        white-space: nowrap
    }

.wk-desc {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .7s var(--ease),opacity .6s ease
}

    .wk-desc > div {
        overflow: hidden;
        min-height: 0
    }

    .wk-desc p {
        padding-top: 14px;
        font-size: 15px;
        color: rgba(255,255,255,.86);
        max-width: 46ch
    }

    .wk-desc em {
        display: inline-block;
        margin-top: 14px;
        font-style: normal;
        font-family: var(--f-mono);
        font-size: 10.5px;
        letter-spacing: .16em;
        text-transform: uppercase;
        padding-bottom: 4px;
        background: linear-gradient(var(--amber),var(--amber)) 0 100%/100% 1px no-repeat
    }

.wk:hover .wk-desc, .wk:focus-visible .wk-desc {
    grid-template-rows: 1fr;
    opacity: 1
}

.wk:hover .wk-cap {
    background: rgba(18,17,16,.55)
}

@media (hover:none) {
    .wk-desc {
        grid-template-rows: 1fr;
        opacity: 1
    }
}

/* ---------- method ---------- */
.method {
    background: var(--paper);
    border-top: 1px solid var(--line)
}

    .method .wrap {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: clamp(30px,7vw,120px);
        align-items: start
    }

.method-left {
    position: sticky;
    top: 140px
}

    .method-left h2 {
        margin: 22px 0 28px;
        max-width: 10ch
    }

.method-list {
    list-style: none;
    position: relative;
    padding-left: 64px;
    --p: 0
}

    .method-list::before {
        content: "";
        position: absolute;
        left: 11px;
        top: 8px;
        bottom: 8px;
        width: 1px;
        background: var(--line)
    }

    .method-list::after {
        content: "";
        position: absolute;
        left: 11px;
        top: 8px;
        width: 1px;
        height: calc((100% - 16px)*var(--p));
        background: var(--orange)
    }

.mi {
    position: relative;
    padding: 0 0 clamp(36px,5vw,64px)
}

    .mi:last-child {
        padding-bottom: 0
    }

    .mi::before {
        content: "";
        position: absolute;
        left: -60px;
        top: 6px;
        width: 23px;
        height: 23px;
        border: 1px solid var(--line);
        background: var(--paper);
        transition: background .5s,border-color .5s
    }

    .mi.on::before {
        background: var(--orange);
        border-color: var(--orange);
        box-shadow: inset 0 0 0 6px var(--paper)
    }

    .mi .no {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .16em;
        color: var(--mute)
    }

    .mi h3 {
        font-size: clamp(28px,3.6vw,52px);
        letter-spacing: -.04em;
        margin: 10px 0 12px
    }

    .mi p {
        color: var(--mute);
        max-width: 40ch
    }

    .mi .out {
        display: inline-block;
        margin-top: 16px;
        font-family: var(--f-mono);
        font-size: 10.5px;
        letter-spacing: .14em;
        text-transform: uppercase;
        padding: 6px 10px;
        border: 1px solid var(--line);
        color: var(--ink)
    }

/* ---------- testimonial ---------- */
.tst {
    background: #EBE6DC;
    border-top: 1px solid var(--line)
}

    .tst .wrap {
        display: grid;
        grid-template-columns: 4fr 8fr;
        gap: clamp(30px,7vw,120px)
    }

.tst-side {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.mono-box {
    width: 68px;
    height: 68px;
    border: 1px solid var(--ink);
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: .04em;
    font-size: 20px
}

.tst-side b {
    display: block;
    font-size: 18px;
    letter-spacing: -.01em
}

.tst-side span {
    display: block;
    font-size: 14px;
    color: var(--mute);
    margin-top: 2px
}

.tst-side a {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 3px;
    align-self: flex-start;
    transition: color .3s,border-color .3s
}

    .tst-side a:hover {
        color: var(--orange);
        border-color: var(--orange)
    }

.tst-main {
    position: relative
}

    .tst-main .qm {
        font-family: var(--f-serif);
        font-size: clamp(120px,16vw,240px);
        line-height: .6;
        color: var(--orange);
        height: .4em;
        display: block;
        margin-bottom: 10px
    }

    .tst-main blockquote {
        font-family: var(--f-serif);
        font-style: italic;
        font-weight: 500;
        font-size: clamp(34px,4.8vw,72px);
        line-height: 1.06;
        letter-spacing: -.015em;
        max-width: 20ch
    }

.proof {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: clamp(40px,5vw,72px);
    border-top: 1px solid var(--ink)
}

    .proof div {
        padding: 22px 24px 0 0
    }

        .proof div + div {
            padding-left: 24px;
            border-left: 1px solid rgba(17,17,17,.18)
        }

    .proof b {
        display: block;
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--orange-ink);
        margin-bottom: 10px
    }

    .proof p {
        font-size: 15px;
        max-width: 26ch
    }

/* ---------- cta / footer ---------- */
.cta {
    position: relative;
    overflow: hidden;
    background: #0f0e0d;
    color: #fff
}

.cta-mark {
    position: absolute;
    right: -2vw;
    top: 50%;
    transform: translateY(-50%);
    height: 150%;
    width: auto;
    opacity: .16;
    pointer-events: none
}

.cta .wrap {
    position: relative
}

.cta h2 {
    font-size: clamp(44px,8.5vw,140px);
    max-width: 12ch
}

.cta .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-top: 56px;
    flex-wrap: wrap
}

.cta a.mail {
    font-family: var(--f-mono);
    font-size: 14px;
    letter-spacing: .06em;
    color: #a39d93;
    border-bottom: 1px solid #444;
    padding-bottom: 4px;
    transition: .4s
}

    .cta a.mail:hover {
        color: #fff;
        border-color: var(--orange)
    }

footer {
    background: var(--charcoal);
    color: #a39d93;
    padding: 70px 0 30px;
    border-top: 1px solid #2c2b28
}

.foot {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr 1.2fr 1fr;
    gap: 40px
}

    .foot .wm b {
        color: #fff
    }

    .foot .wm small {
        color: var(--mute-dk)
    }

    .foot h4, .foot .fh {
        font-family: var(--f-mono);
        line-height: 1.5;
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--mute-dk);
        margin-bottom: 18px;
        font-weight: 500
    }

    .foot ul {
        list-style: none;
        display: grid;
        gap: 10px;
        font-size: 14px
    }

    .foot a {
        transition: color .3s
    }

        .foot a:hover {
            color: #fff
        }

.foot-base {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid #2c2b28;
    font-size: 12px;
    flex-wrap: wrap
}

.wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    width: 54px;
    height: 54px;
    background: rgba(17,17,17,.82);
    backdrop-filter: blur(10px);
    color: #fff;
    display: grid;
    place-items: center;
    transition: background .4s,transform .4s var(--ease);
    border: 1px solid rgba(255,255,255,.14)
}

    .wa:hover {
        background: var(--orange);
        transform: translateY(-3px)
    }

    .wa svg {
        width: 24px;
        height: 24px
    }

/* ---------- inner pages ---------- */
.page-hero {
    padding: clamp(160px,20vw,270px) 0 clamp(50px,7vw,100px);
    position: relative;
    overflow: hidden
}

    .page-hero h1 {
        font-size: clamp(44px,8vw,128px);
        max-width: 14ch;
        position: relative
    }

    .page-hero .lead {
        margin-top: 32px;
        position: relative
    }

    .page-hero .eyebrow {
        position: relative
    }

.big-n {
    position: absolute;
    right: var(--pad);
    top: 50%;
    transform: translateY(-46%);
    font-weight: 800;
    font-size: clamp(160px,30vw,460px);
    letter-spacing: -.06em;
    line-height: 1;
    color: #EAE4D9;
    pointer-events: none;
    user-select: none
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px,6vw,100px);
    align-items: start
}

.values {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--ink)
}

.value {
    padding: 32px 28px 36px 0
}

    .value + .value {
        padding-left: 28px;
        border-left: 1px solid var(--line)
    }

    .value h3 {
        margin-bottom: 12px;
        font-size: clamp(28px,3.4vw,48px)
    }

    .value p {
        color: var(--mute);
        max-width: 28ch
    }

.intro {
    font-size: clamp(24px,2.8vw,40px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.12;
    max-width: 22ch
}

.incl {
    list-style: none;
    border-top: 1px solid var(--ink)
}

    .incl li {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 12px;
        padding: 20px 0;
        border-bottom: 1px solid var(--line);
        font-size: clamp(17px,1.5vw,21px);
        font-weight: 600;
        letter-spacing: -.01em;
        transition: padding-left .6s var(--ease),color .4s
    }

        .incl li span {
            font-family: var(--f-mono);
            font-size: 11px;
            color: var(--orange-ink);
            padding-top: 6px;
            letter-spacing: .1em
        }

        .incl li:hover {
            padding-left: 12px
        }

.band {
    background: var(--charcoal);
    color: #F4F1EC;
    padding: clamp(44px,6vw,80px) 0
}

    .band .wrap {
        display: grid;
        grid-template-columns: 4fr 8fr;
        gap: clamp(24px,6vw,100px);
        align-items: start
    }

    .band p:not(.eyebrow) {
        font-size: clamp(20px,2.4vw,34px);
        font-weight: 700;
        letter-spacing: -.025em;
        line-height: 1.2;
        max-width: 30ch
    }

    .band .eyebrow {
        color: #a39d93
    }

.rel {
    list-style: none;
    border-top: 1px solid var(--ink)
}

    .rel a {
        display: grid;
        grid-template-columns: 70px 1fr auto;
        gap: 24px;
        align-items: center;
        padding: 28px 0;
        border-bottom: 1px solid var(--line);
        position: relative;
        transition: padding-left .8s var(--ease),color .4s
    }

        .rel a:hover {
            padding-left: 16px;
            color: var(--orange)
        }

    .rel .n, .rel .go {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .14em;
        color: var(--mute);
        text-transform: uppercase
    }

    .rel h3 {
        font-size: clamp(24px,3.2vw,46px);
        letter-spacing: -.035em
    }

.group {
    margin-bottom: clamp(50px,7vw,100px)
}

    .group > .eyebrow {
        margin-bottom: 26px
    }

.idx {
    list-style: none;
    border-top: 1px solid var(--ink)
}

    .idx a {
        display: grid;
        grid-template-columns: 70px 1fr 1.1fr auto;
        gap: 24px;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid var(--line);
        position: relative;
        isolation: isolate
    }

        .idx a::before {
            content: "";
            position: absolute;
            top: 0;
            right: -28px;
            bottom: 0;
            left: -28px;
            inset: 0 -28px;
            background: linear-gradient(90deg,rgba(228,87,30,.1),rgba(228,87,30,0) 72%);
            opacity: 0;
            transition: opacity .7s;
            z-index: -1
        }

        .idx a:hover::before {
            opacity: 1
        }

    .idx .n, .idx .go {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .14em;
        color: var(--mute);
        text-transform: uppercase
    }

    .idx h3 {
        font-size: clamp(26px,3.6vw,50px);
        letter-spacing: -.04em;
        transition: transform .9s var(--ease),color .5s
    }

    .idx p {
        color: var(--mute);
        max-width: 38ch;
        font-size: 15px;
        transition: transform .9s var(--ease)
    }

    .idx a:hover h3 {
        transform: translateX(16px);
        color: var(--orange)
    }

    .idx a:hover p {
        transform: translateX(8px)
    }

    .idx a:hover .go {
        color: var(--orange)
    }

.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap
}

.chip {
    border: 1px solid var(--ink);
    background: transparent;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .4s var(--ease),color .4s var(--ease)
}

    .chip.on, .chip:hover {
        background: var(--ink);
        color: #fff
    }

.wk.hide {
    display: none
}

form.f {
    display: grid;
    gap: 0
}

.field {
    border-bottom: 1px solid var(--ink);
    padding: 22px 0 10px;
    position: relative;
    transition: border-color .4s
}

    .field label {
        display: block;
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--mute)
    }

    .field input, .field select, .field textarea {
        width: 100%;
        background: transparent;
        border: 0;
        outline: 0;
        padding: 10px 0 8px;
        font-size: 20px;
        font-weight: 600;
        resize: none;
        border-radius: 0
    }

    .field select {
        margin-left: -4px
    }

    .field:focus-within {
        border-color: var(--orange)
    }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px
}

.f .btn {
    margin-top: 32px;
    justify-self: start
}

.f-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--mute)
}

.contact-list {
    display: grid;
    gap: 34px
}

    .contact-list b {
        display: block;
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--mute);
        font-weight: 500;
        margin-bottom: 6px
    }

    .contact-list a, .contact-list p {
        font-size: clamp(20px,2vw,28px);
        font-weight: 700;
        letter-spacing: -.02em;
        transition: color .3s
    }

        .contact-list a:hover {
            color: var(--orange)
        }

.socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

    .socials a {
        font-size: 13px !important;
        border: 1px solid var(--ink);
        padding: 9px 16px;
        letter-spacing: 0 !important;
        transition: background .4s var(--ease),color .4s !important
    }

        .socials a:hover {
            background: var(--ink);
            color: #fff !important
        }

.about-mark {
    position: relative;
    aspect-ratio: 4/5;
    background: #0f0e0d;
    overflow: hidden;
    display: grid;
    place-items: center
}

    .about-mark canvas {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        width: 100%;
        height: 100%
    }

    .about-mark img {
        position: relative;
        height: 62%;
        width: auto;
        filter: drop-shadow(0 30px 60px rgba(228,87,30,.35))
    }

/* reveal (only hidden when scripts can bring it back) */
.js .rv {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1s var(--ease),transform 1s var(--ease)
}

    .js .rv.in {
        opacity: 1;
        transform: none
    }

    .rv.d1 {
        transition-delay: .1s
    }

    .rv.d2 {
        transition-delay: .2s
    }

    .rv.d3 {
        transition-delay: .3s
    }

@media (prefers-reduced-motion:reduce) {
    .js .rv {
        opacity: 1;
        transform: none;
        transition: none
    }

    html {
        scroll-behavior: auto
    }

    .hero-mark {
        animation: none
    }
}

@media (min-width:1000px) {
    .hero-card {
        display: block
    }
}

@media (max-width:960px) {
    :root {
        --nav: 76px
    }

    .brand img {
        height: 46px
    }

    .wm b {
        font-size: 17px
    }

    .wm small {
        font-size: 7.6px;
        margin-top: 6px
    }

    .nav ul, .nav-cta {
        display: none
    }

    .burger {
        display: block
    }

    /* mobile menu: solid full-screen panel. backdrop-filter on the header would
       trap position:fixed children, so it is switched off while the menu is open */
    .menu-open .nav, .menu-open .nav.scrolled, .menu-open .nav.solid, .menu-open .nav.on-dark:not(.scrolled) {
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-color: var(--line)
    }

        .menu-open .nav ul {
            display: flex;
            position: fixed;
            top: var(--nav);
            left: 0;
            right: 0;
            bottom: 0;
            height: calc(100vh - var(--nav));
            height: calc(100vh - var(--nav));
            height: calc(100dvh - var(--nav));
            background: var(--bg);
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0;
            padding: 12px var(--pad) 40px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            z-index: 60
        }

        .menu-open .nav li {
            display: block;
            height: auto
        }

            .menu-open .nav li > a {
                display: block;
                font-size: clamp(26px,8vw,34px);
                font-weight: 800;
                letter-spacing: -.03em;
                padding: 16px 0;
                border-bottom: 1px solid var(--line);
                width: 100%;
                color: var(--ink)
            }

                .menu-open .nav li > a::after {
                    display: none
                }

    .menu-open .dd {
        display: block;
        position: static;
        width: auto;
        transform: none;
        opacity: 1;
        visibility: visible
    }

    .menu-open .dd-in {
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
        padding: 6px 0 12px;
        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }

    .menu-open .nav .dd-in a {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        padding: 11px 0;
        width: auto
    }

    .dd {
        display: none
    }

    body.menu-open {
        overflow: hidden
    }

    .hero-mark {
        right: -6vw;
        top: 96px;
        height: 34vh;
        transform: none;
        opacity: .5;
        animation: none
    }

    .stats .wrap {
        grid-template-columns: repeat(2,1fr)
    }

    .stat:nth-child(2) {
        border-right: 0
    }

    .stat:nth-child(3) {
        padding-left: 0
    }

    .stat:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }

    .svc-row, .idx a {
        grid-template-columns: 44px 1fr auto
    }

        .svc-row p, .idx p {
            display: none
        }

        .svc-row .go {
            display: none
        }

    .values, .proof {
        grid-template-columns: 1fr
    }

        .value + .value, .proof div + div {
            padding-left: 0;
            border-left: 0;
            border-top: 1px solid var(--line);
            margin-top: 30px
        }

        .proof div {
            padding-right: 0
        }

    .split, .foot, .field-row, .method .wrap, .tst .wrap, .band .wrap {
        grid-template-columns: 1fr
    }

    .method-left {
        position: static
    }

    .wk-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 16px
    }

    .wk.big, .wk.side, .wk.wide, .wk.tri, [data-filtered] .wk {
        grid-column: 1 / -1;
        aspect-ratio: 4/3;
        min-height: 0
    }

    .wk.side {
        aspect-ratio: 4/3
    }

    .rel a {
        grid-template-columns: 44px 1fr
    }

    .rel .go {
        display: none
    }

    .big-n {
        opacity: .6
    }
}

.wk video.ph-img {
    background: transparent
}

/* conditional budget field */
.field-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .7s var(--ease),opacity .5s ease
}

    .field-reveal > div {
        overflow: hidden;
        min-height: 0
    }

    .field-reveal.on {
        grid-template-rows: 1fr;
        opacity: 1
    }

.prose {
    display: grid;
    gap: 18px;
    margin-top: 28px;
    max-width: 46ch
}

    .prose p {
        color: var(--mute);
        font-size: clamp(16px,1.3vw,19px);
        line-height: 1.6
    }

/* mobile menu: current page in brand orange (the marker is hidden there) */
.menu-open .nav li > a[aria-current] {
    color: var(--orange)
}

/* page hero headline: masked rise on load */
.page-hero h1 {
    animation: h1rise 1.1s var(--ease) both
}

@keyframes h1rise {
    from {
        clip-path: inset(0 0 100% 0);
        transform: translateY(24px)
    }

    to {
        clip-path: inset(0 0 -10% 0);
        transform: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .page-hero h1 {
        animation: none
    }
}

/* dropdown links stay ink even when parent link is active/hovered */
.nav .dd-in a {
    color: var(--ink);
    font-weight: 600
}

    .nav .dd-in a:hover {
        color: var(--orange)
    }

/* ---------- inner page heroes (image + animated backdrop) ---------- */
.page-hero {
    background: #0f0e0d;
    color: #fff;
    min-height: 74vh;
    min-height: min(74vh,760px);
    min-height: min(74svh,760px);
    display: flex;
    align-items: flex-end
}

    .page-hero > .wrap {
        width: 100%;
        z-index: 2
    }

    .page-hero .eyebrow {
        color: rgba(255,255,255,.72)
    }

    .page-hero .lead {
        color: rgba(255,255,255,.82)
    }

.hero-media img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-tag {
    position: absolute;
    right: var(--pad);
    bottom: 18px;
    z-index: 3;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: rgba(17,17,17,.55);
    color: rgba(255,255,255,.8);
    backdrop-filter: blur(8px)
}

.page-hero .big-n {
    color: rgba(255,255,255,.08);
    z-index: 1
}

.page-hero + section {
    padding-top: clamp(60px,8vw,120px) !important
}

/* rotating phrase in the home hero */
.hero h1 {
    max-width: 13ch
}

.rot {
    display: inline-grid;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .14em;
    margin-bottom: -.14em;
    color: var(--orange)
}

    .rot > span {
        grid-area: 1/1;
        transform: translateY(105%);
        opacity: 0;
        transition: transform .9s var(--ease),opacity .6s ease
    }

        .rot > span.on {
            transform: none;
            opacity: 1
        }

        .rot > span.out {
            transform: translateY(-105%);
            opacity: 0
        }

        .rot > span.reset {
            transition: none
        }

@media (max-width:960px) {
    .page-hero .hero-tag {
        top: calc(var(--nav) + 10px);
        bottom: auto;
        left: var(--pad);
        right: auto;
        max-width: calc(100% - var(--pad)*2)
    }
}

/* ---------- projects: index + live stage ---------- */
.pj-wrap {
    display: grid;
    grid-template-columns: minmax(0,7fr) minmax(0,5fr);
    gap: clamp(30px,5vw,88px);
    align-items: start
}

.pj-list {
    grid-column: 1;
    grid-row: 1;
    list-style: none;
    border-top: 1px solid var(--ink)
}

.pj {
    border-bottom: 1px solid var(--line)
}

    .pj.hide {
        display: none
    }

.pj-d {
    display: none
}

.pj-row {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) auto;
    gap: 20px;
    align-items: baseline;
    padding: clamp(18px,2.2vw,30px) 0
}

    .pj-row .n, .pj-row .c {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--mute);
        transition: color .5s ease
    }

    .pj-row h3 {
        font-size: clamp(26px,3.6vw,56px);
        letter-spacing: -.04em;
        line-height: 1.02;
        transition: transform .9s var(--ease),color .5s ease,opacity .5s ease
    }

.pj:not(.on) .pj-row h3 {
    opacity: .38
}

.pj.on .pj-row h3 {
    color: var(--orange);
    transform: translateX(14px)
}

.pj.on .pj-row .n, .pj.on .pj-row .c {
    color: var(--orange)
}

.pj-row:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px
}

.pj-stage {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--nav) + 28px);
    height: min(calc(100vh - var(--nav) - 56px),680px);
    background: #161514;
    color: #fff;
    overflow: hidden;
    isolation: isolate
}

    .pj-stage::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        background: linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.62) 100%);
        z-index: 2;
        pointer-events: none
    }

.pj-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    opacity: 0;
    transition: opacity .9s var(--ease);
    pointer-events: none
}

    .pj-media.on {
        opacity: 1
    }

    .pj-media .ph, .pj-media .ph-img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transform: scale(1.08);
        transition: transform 1.8s var(--ease)
    }

    .pj-media.on .ph, .pj-media.on .ph-img {
        transform: none
    }

    .pj-media .tag.l {
        display: none
    }

    .pj-media .tag {
        z-index: 3
    }

.pj-count {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 3;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: rgba(255,255,255,.75)
}

    .pj-count b {
        color: #fff;
        font-weight: 500
    }

    .pj-count i {
        font-style: normal
    }

.pj-cap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 20px 24px;
    background: rgba(18,17,16,.42);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .5s var(--ease)
}

    .pj-cap:hover {
        background: rgba(18,17,16,.62)
    }

    .pj-cap header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px
    }

    .pj-cap h3 {
        font-size: clamp(22px,2.2vw,32px);
        letter-spacing: -.03em
    }

    .pj-cap header span {
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(255,255,255,.72);
        white-space: nowrap
    }

    .pj-cap p {
        margin-top: 10px;
        font-size: 14px;
        color: rgba(255,255,255,.86);
        max-width: 46ch
    }

    .pj-cap em {
        display: inline-block;
        margin-top: 12px;
        font-style: normal;
        font-family: var(--f-mono);
        font-size: 10.5px;
        letter-spacing: .16em;
        text-transform: uppercase;
        padding-bottom: 4px;
        background: linear-gradient(var(--amber),var(--amber)) 0 100%/100% 1px no-repeat
    }

    .pj-cap.swap > * {
        animation: capin .7s var(--ease) both
    }

@keyframes capin {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (max-width:960px) {
    .pj-wrap {
        grid-template-columns: minmax(0,1fr);
        gap: 16px
    }

    .pj-stage {
        grid-column: 1;
        grid-row: 1;
        top: calc(var(--nav) + 6px);
        height: clamp(220px,38vh,340px);
        z-index: 5
    }

    .pj-list {
        grid-row: 2
    }

    .pj-row {
        grid-template-columns: 34px minmax(0,1fr) auto;
        gap: 12px
    }

        .pj-row h3 {
            font-size: clamp(24px,7.4vw,40px)
        }

    .pj-cap {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 14px 16px
    }

        .pj-cap p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
        }
}

@media (prefers-reduced-motion:reduce) {
    .pj-media .ph, .pj-media .ph-img {
        transform: none;
        transition: none
    }

    .pj-cap.swap > * {
        animation: none
    }
}

/* ---------- projects option B: pinned horizontal film strip ---------- */
.fs {
    position: relative;
    background: #0f0e0d;
    color: #fff
}

.fs-stick {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: calc(var(--nav) + 14px)
}

.fs-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad)
}

    .fs-head .filters {
        margin: 0
    }

.fs .chip {
    border-color: rgba(255,255,255,.35);
    color: #fff
}

    .fs .chip.on, .fs .chip:hover {
        background: #fff;
        color: var(--ink);
        border-color: #fff
    }

.fs-meter {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: rgba(255,255,255,.7)
}

    .fs-meter b {
        color: #fff;
        font-weight: 500
    }

    .fs-meter i {
        font-style: normal
    }

.fs-bar {
    width: clamp(80px,14vw,200px);
    height: 2px;
    background: rgba(255,255,255,.2)
}

    .fs-bar i {
        display: block;
        height: 100%;
        background: var(--orange);
        transform-origin: left;
        transform: scaleX(0)
    }

.fs-hint {
    text-transform: uppercase
}

.fs-track-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 0
}

.fs-track {
    display: flex;
    gap: clamp(16px,2vw,32px);
    width: max-content;
    padding: 0 var(--pad);
    list-style: none;
    align-items: center;
    will-change: transform
}

.fs-card {
    flex: none;
    width: clamp(300px,32vw,540px);
    height: 56vh;
    height: min(56vh,560px);
    height: min(56svh,560px)
}

    .fs-card:nth-child(even) {
        transform: translateY(6vh);
        transform: translateY(6svh)
    }

    .fs-card:nth-child(odd) {
        transform: translateY(-3vh);
        transform: translateY(-3svh)
    }

    .fs-card.hide {
        display: none
    }

.fs-link {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    background: #161514;
    isolation: isolate
}

.fs-media .ph, .fs-media .ph-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.6s var(--ease)
}

.fs-link:hover .ph, .fs-link:hover .ph-img {
    transform: scale(1.06)
}

.fs-media .tag {
    z-index: 3
}

.fs-n {
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 3;
    font-size: clamp(56px,6vw,96px);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.8);
    text-shadow: 0 0 24px rgba(0,0,0,.25);
    transition: color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease)
}

.fs-link:hover .fs-n, .fs-link:focus-visible .fs-n {
    color: #fff;
    -webkit-text-stroke-color: #fff
}

.fs-cap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 20px 24px;
    background: rgba(18,17,16,.38);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .6s var(--ease)
}

.fs-link:hover .fs-cap {
    background: rgba(18,17,16,.55)
}

.fs-cap .c {
    display: block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7)
}

.fs-cap h3 {
    margin-top: 8px;
    font-size: clamp(24px,2.6vw,32px);
    letter-spacing: -.035em
}

.fs-cap .d {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .7s var(--ease),opacity .6s ease
}

    .fs-cap .d > div {
        overflow: hidden;
        min-height: 0
    }

.fs-cap p {
    padding-top: 12px;
    font-size: 14px;
    color: rgba(255,255,255,.86);
    max-width: 42ch
}

.fs-cap em {
    display: inline-block;
    margin-top: 12px;
    font-style: normal;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding-bottom: 4px;
    background: linear-gradient(var(--amber),var(--amber)) 0 100%/100% 1px no-repeat
}

.fs-link:hover .d, .fs-link:focus-visible .d {
    grid-template-rows: 1fr;
    opacity: 1
}

@media (hover:none) {
    .fs-cap .d {
        grid-template-rows: 1fr;
        opacity: 1
    }
}

.fs-end .fs-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 28px;
    padding: 28px;
    background: radial-gradient(120% 90% at 80% 10%,#E4571E 0%,#8a2a12 55%,#1b1210 100%)
}

    .fs-end .fs-link::after {
        display: none
    }

.fs-end h3 {
    font-size: clamp(34px,4vw,64px)
}

.fs-endn {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.8)
}

.fs-end .btn.light:hover {
    color: #fff
}

@media (max-width:960px) {
    .fs {
        height: auto !important
    }

    .fs-stick {
        position: static;
        height: auto;
        padding: 40px 0 56px;
        gap: 28px
    }

    .fs-track-wrap {
        display: block
    }

    .fs-track {
        width: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        transform: none !important;
        scrollbar-width: none;
        padding-bottom: 12px
    }

        .fs-track::-webkit-scrollbar {
            display: none
        }

    .fs-card {
        width: 78vw;
        height: 62vh;
        height: min(62vh,520px);
        height: min(62svh,520px);
        scroll-snap-align: center;
        transform: none !important
    }

    .fs-hint {
        display: none
    }
}

/* legal pages: privacy policy, terms and conditions */
.page-hero.legal-hero {
    min-height: 46vh;
    min-height: min(46vh,440px);
    min-height: min(46svh,440px)
}

.legal {
    padding-top: clamp(48px,6vw,96px) !important
}

.legal-grid {
    display: grid;
    grid-template-columns: minmax(0,250px) minmax(0,1fr);
    gap: clamp(32px,7vw,120px);
    align-items: start
}

.legal-toc {
    position: sticky;
    top: calc(var(--nav) + 28px)
}

    .legal-toc .eyebrow {
        margin-bottom: 18px
    }

    .legal-toc ol {
        list-style: none;
        display: grid;
        border-top: 1px solid var(--line)
    }

    .legal-toc li a {
        display: flex;
        gap: 14px;
        padding: 11px 0;
        border-bottom: 1px solid var(--line);
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        transition: color .3s var(--ease),padding .3s var(--ease)
    }

        .legal-toc li a span {
            font-family: var(--f-mono);
            font-size: 11px;
            letter-spacing: .08em;
            color: var(--mute);
            padding-top: 2px;
            min-width: 20px
        }

        .legal-toc li a:hover, .legal-toc li a.on {
            color: var(--orange-ink);
            padding-left: 6px
        }

.legal-body {
    max-width: 72ch
}

    .legal-body > .legal-lead {
        font-size: clamp(19px,1.7vw,24px);
        line-height: 1.5;
        color: var(--ink);
        font-weight: 600;
        letter-spacing: -.01em;
        padding-bottom: clamp(28px,4vw,48px);
        border-bottom: 1px solid var(--line)
    }

.clause {
    padding: clamp(28px,4vw,48px) 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav) + 16px)
}

    .clause h2 {
        display: flex;
        gap: 18px;
        align-items: baseline;
        font-size: clamp(22px,2.2vw,30px);
        line-height: 1.15;
        letter-spacing: -.02em;
        margin-bottom: 18px
    }

        .clause h2 span {
            font-family: var(--f-mono);
            font-size: 12px;
            letter-spacing: .1em;
            color: var(--orange-ink);
            font-weight: 500
        }

    .clause p, .clause li {
        font-size: 16px;
        line-height: 1.7;
        color: #3d3a36
    }

        .clause p + p, .clause p + ul, .clause ul + p {
            margin-top: 14px
        }

    .clause ul {
        list-style: none;
        display: grid;
        gap: 8px
    }

        .clause ul li {
            padding-left: 22px;
            position: relative
        }

            .clause ul li::before {
                content: "";
                position: absolute;
                left: 0;
                top: .72em;
                width: 9px;
                height: 1px;
                background: var(--ink)
            }

    .clause a {
        color: var(--ink);
        font-weight: 700;
        border-bottom: 1px solid var(--orange);
        transition: color .3s var(--ease)
    }

        .clause a:hover {
            color: var(--orange)
        }

@media (max-width:960px) {
    .legal-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .legal-toc {
        position: static
    }

        .legal-toc ol {
            grid-template-columns: repeat(2,minmax(0,1fr));
            column-gap: 24px
        }
}

@media (max-width:560px) {
    .legal-toc ol {
        grid-template-columns: minmax(0,1fr)
    }

    .clause h2 {
        gap: 12px
    }
}

/* keep the "Visit website" underline clear of the clipped edge while the caption opens */
.wk-desc > div, .fs-cap .d > div {
    padding-bottom: 2px
}

/* =====================================================================
   v9 refinements: accessibility, motion and typographic polish
   ===================================================================== */
html { scroll-padding-top: calc(var(--nav) + 24px); -webkit-text-size-adjust: 100% }
::selection { background: var(--orange); color: #fff }

/* skip link + screen-reader text */
.skip {
    position: fixed; top: 12px; left: 12px; z-index: 100;
    padding: 12px 18px; background: #fff; color: var(--ink);
    font-weight: 700; font-size: 14px; border: 1px solid var(--ink);
    transform: translateY(-160%); transition: transform .3s var(--ease)
}
.skip:focus { transform: none }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

/* visible keyboard focus */
:focus { outline: none }
:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 3px }
.nav.on-dark:not(.scrolled) :focus-visible, .dark :focus-visible, .cta :focus-visible, footer :focus-visible,
.hero :focus-visible, .page-hero :focus-visible, .band :focus-visible, .skip:focus-visible { outline-color: var(--amber) }
.skip:focus-visible { outline-color: var(--orange-ink) }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none }
.field:focus-within { border-color: var(--orange-ink); box-shadow: 0 1px 0 0 var(--orange-ink) }
.wk:focus-visible, .fs-link:focus-visible { outline-offset: -3px }

/* eyebrow labels that are now real headings keep their label look */
h2.eyebrow { font-weight: 400; letter-spacing: .16em; line-height: 1.5; font-size: 12px }
.foot .fh { font-weight: 500 }

/* typography */
h1, h2, h3, .intro, .lead, blockquote { text-wrap: balance }
p, li { text-wrap: pretty }
.stat strong, .hero-card strong, .fs-num, .fs-tot, .pj-count { font-variant-numeric: tabular-nums }
.nav.scrolled li:hover > a, .nav.scrolled li > a[aria-current] { color: var(--orange-ink) }

/* hero: orchestrated load sequence (CSS only, no script needed) */
.hero h1 { animation: h1rise 1.2s var(--ease) .15s both }
.hero .eyebrow { animation: fadeup .9s var(--ease) .05s both }
.hero .lead, .hero-actions { animation: fadeup 1s var(--ease) .55s both }
.hero-actions { animation-delay: .7s }
.hero-card { animation: fadeup 1.1s var(--ease) .9s both }
.page-hero .eyebrow { animation: fadeup .9s var(--ease) .05s both }
.page-hero .lead { animation: fadeup 1s var(--ease) .5s both }
.page-hero .big-n { animation: fadeup 1.4s var(--ease) .25s both }
@keyframes fadeup { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

/* parallax drift on hero media (driven by main.js through --py) */
.hero-media { will-change: transform }
.js-par .hero-media, .js-par .page-hero .hero-media {
    transform: translate3d(0, var(--py, 0px), 0) scale(1.08); transform-origin: 50% 0
}

/* header: slides away on the way down, returns on the way up */
.nav { transition: background .4s, backdrop-filter .4s, border-color .4s, transform .55s var(--ease) }
.nav.nav-hide { transform: translateY(-101%) }

/* staggered reveal inside lists */
.js .svc-list li.rv, .js .idx li.rv, .js .stat.rv { transition-delay: calc(var(--i, 0) * 70ms) }

/* soft cross-page transition where the browser supports it */
@view-transition { navigation: auto }
.nav { view-transition-name: site-nav }
.wa { view-transition-name: site-wa }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s }

/* legal contents: current section marker */
.legal-toc li a.on { padding-left: 6px }

/* pause-motion control (WCAG 2.2.2) */
.mo {
    background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; color: inherit;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(163,157,147,.5)
}
.mo:hover { color: #fff; text-decoration-color: var(--amber) }
.mo[aria-pressed="true"] { color: var(--amber) }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important }
.motion-off .rot > span { transition: none !important }
.motion-off.js-par .hero-media { transform: none }

/* reduced motion: also drop the new effects */
@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero .eyebrow, .hero .lead, .hero-actions, .hero-card, .page-hero .eyebrow, .page-hero .lead, .page-hero .big-n { animation: none }
    .js-par .hero-media { transform: none }
    .nav, .nav.nav-hide { transition: none; transform: none }
    @view-transition { navigation: none }
}

/* forced-colours + print */
@media (forced-colors: active) { .btn, .chip { border: 1px solid ButtonText } }
@media print {
    .nav, .wa, .cta, .hero-media, .burger, .skip, .mo, .legal-toc { display: none !important }
    body { background: #fff; color: #000 }
    .page-hero { min-height: 0; background: none; color: #000; padding: 0 0 24px }
    .page-hero h1, .page-hero .lead, .page-hero .eyebrow { color: #000; animation: none }
    section { padding: 24px 0 !important }
    .js .rv { opacity: 1 !important; transform: none !important }
    footer { background: none; color: #000; border-top: 1px solid #999 }
    .clause a::after { content: " (" attr(href) ")"; font-size: 11px }
}