/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme {
    :root, :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family:var(--font-mono)
    }
}

@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding:0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding:0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color:transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width:1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration:underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight:inherit
    }

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

    b, strong {
        font-weight:bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size:1em
    }

    small {
        font-size:80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position:relative
    }

    sub {
        bottom:-.25em
    }

    sup {
        top:-.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse:collapse
    }

    :-moz-focusring {
        outline:auto
    }

    progress {
        vertical-align:baseline
    }

    summary {
        display:list-item
    }

    ol, ul, menu {
        list-style:none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display:block
    }

    img, video {
        max-width: 100%;
        height:auto
    }

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius:0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius:0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight:bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start:20px
    }

    ::file-selector-button {
        margin-inline-end:4px
    }

    ::placeholder {
        opacity:1
    }

    @supports (not ((-webkit-appearance: -apple-pay-button))) or(contain-intrinsic-size: 1px) {
        ::placeholder {
            color:currentColor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color:color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize:vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance:none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align:inherit
    }

    ::-webkit-datetime-edit {
        display:inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding:0
    }

    ::-webkit-datetime-edit {
        padding-block:0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0
    }

    ::-webkit-calendar-picker-indicator {
        line-height:1
    }

    :-moz-ui-invalid {
        box-shadow:none
    }

    button, input:where([type=button], [type=reset], [type=submit]) {
        appearance:button
    }

    ::file-selector-button {
        appearance:button
    }

    ::-webkit-inner-spin-button {
        height:auto
    }

    ::-webkit-outer-spin-button {
        height:auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;
@layer utilities {
    .invisible {
        visibility:hidden
    }

    .visible {
        visibility:visible
    }

    .relative {
        position:relative
    }

    .start {
        inset-inline-start:var(--spacing)
    }

    .table {
        display:table
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing:grayscale
    }
}

:root {
    --ink: #050608;
    --ink-soft: #141a20;
    --panel: #11161b;
    --line: #ffffff1f;
    --line-soft: #ffffff12;
    --paper: #f2efe8;
    --muted: #969da3;
    --brand: #d6a97c;
    --blue:#43b7ed;
    --text-xsm: 12px;
    --text-sm: 14px;
    --text-base: 16px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    background: var(--ink);
    color: var(--paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin:0
}

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

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

.shell {
    width: min(1280px, 100% - 96px);
    margin-inline:auto
}

.site-header {
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgba(7, 9, 11, var(--header-opacity, 0));
    position: fixed;
    inset:0 0 auto
}

.site-header.nav-open {
    background-color:var(--ink)
}

.header-inner {
    align-items: center;
    gap: 56px;
    height: 92px;
    display:flex
}

.brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    display:inline-flex
}

.brand-logo {
    mix-blend-mode: screen;
    width: 196px;
    height: auto;
    position: relative;
    top: 8px;
    display:block
}

.brand-tagline {
    color: #8c9296;
    font: italic var(--text-sm) 'Google Sans Flex', sans-serif
}

nav {
    letter-spacing: .06em;
    align-items: center;
    gap: 38px;
    font-size: var(--text-base);
    flex: 1;
    margin-left: 60px;
    display:flex
}

nav a:not(.nav-cta) {
    color: #c8cbcd;
    position: relative;
    transition:color .2s
}

nav a:hover {
    color:#fff
}

nav a:not(.nav-cta)[aria-current="page"] {
    color: #fff;
    font-weight:700
}

nav a:not(.nav-cta)[aria-current="page"]::after {
    content: "";
    background: #3b9ecd;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    bottom:-10px
}

.nav-cta {
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: .12em;
    border: 1px solid #ffffff73;
    padding: 13px 17px;
    font-size: var(--text-sm);
    font-weight:700
}

.nav-cta span {
    color: var(--brand);
    margin-left:12px
}

.language-selector {
    margin-left:auto;
    position:relative
}

.language-selector summary {
    min-width:72px;
    height:44px;
    padding:0 14px;
    border:1px solid #ffffff73;
    color:#fff;
    cursor:pointer;
    list-style:none;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:var(--text-sm);
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    transition:border-color .2s, background .2s
}

.language-selector summary::-webkit-details-marker {
    display:none
}

.language-selector summary:hover,
.language-selector[open] summary {
    border-color:#3b9ecd;
    background:#0d1820
}

.language-selector summary:focus-visible {
    outline:2px solid #3b9ecd;
    outline-offset:3px
}

.language-selector summary i {
    width:7px;
    height:7px;
    border-right:1px solid var(--brand);
    border-bottom:1px solid var(--brand);
    transform:translateY(-2px) rotate(45deg);
    transition:transform .2s
}

.language-selector[open] summary i {
    transform:translateY(2px) rotate(225deg)
}

.language-menu {
    position:absolute;
    top:calc(100% + 9px);
    right:0;
    min-width:164px;
    padding:7px;
    border:1px solid var(--line);
    background:#080b0ef7;
    box-shadow:0 18px 45px #0009;
    backdrop-filter:blur(14px)
}

nav .language-menu a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:10px 11px;
    color:#aeb4b8;
    font-size:var(--text-sm);
    letter-spacing:.08em;
    white-space:nowrap
}

nav .language-menu a:hover,
nav .language-menu a[aria-current="page"] {
    color:#fff;
    background:#ffffff0a
}

nav .language-menu a[aria-current="page"]::after {
    content:"";
    position:static;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#3b9ecd
}

.burger {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 0;
    background: 0 0;
    margin-left: auto;
    padding: 0;
    display: none;
    cursor: pointer
}

.burger span {
    background: var(--paper);
    width: 26px;
    align-self:flex-end;
    height: 2px;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease
}

.burger[aria-expanded="true"] span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)
}

.burger[aria-expanded="true"] span:nth-child(2) {
    opacity:0
}

.burger[aria-expanded="true"] span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)
}

.hero {
    isolation: isolate;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    position: relative;
    overflow:hidden
}

.hero-image {
    z-index: -2;
    background: url(../images/img2.jpg) 50%/cover no-repeat;
    position: absolute;
    inset:0
}

.hero-lights {
    z-index: -1;
    position: absolute;
    inset: 0;
    pointer-events:none
}

.hero-lights i {
    background: transparent;
    border-radius: 50%;
    width: 3px;
    height: 3px;
    position: absolute;
    opacity: 0;
    box-shadow: 0 0 0 0 #0000;
    animation: hero-light-blink 3.2s ease-in-out infinite
}

.hero-lights i:nth-child(2) {
    animation-duration: 2.6s;
    animation-delay:.4s
}

.hero-lights i:nth-child(3) {
    animation-duration: 4.1s;
    animation-delay:1.1s
}

.hero-lights i:nth-child(4) {
    animation-duration: 3.6s;
    animation-delay:.2s
}

@keyframes hero-light-blink {
    0%, 42%, 100% {
        opacity: 0;
        box-shadow: 0 0 0 0 #0000
    }

    50% {
        opacity: .8;
        box-shadow: 0 0 40px 16px #a9e2ff80, 0 0 80px 34px #3aa0e85c
    }

    58% {
        opacity:0
    }
}

.hero:before {
    content: "";
    z-index: -1;
    background: linear-gradient(90deg, #030507fa 0%, #030507d9 30%, #03050747 69%, #03050729 100%), linear-gradient(0deg, #040507cc 0, #0000 35%);
    position: absolute;
    inset:0
}

.hero-content {
    padding-top:25px
}

.eyebrow, .section-label {
    text-transform: uppercase;
    letter-spacing: .24em;
    color: #b1b6ba;
    font:700 var(--text-sm)/1.2 Arial, sans-serif
}

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

.eyebrow {
    align-items: center;
    gap: 13px;
    margin: 0 0 30px;
    display:flex
}

.eyebrow span {
    background: var(--brand);
    width: 26px;
    height:1px
}

h1, h2, h3, blockquote {
    letter-spacing: -.045em;
    font-family: 'Google Sans Flex', sans-serif;
    font-weight:600
}

h1 {
    max-width: 870px;
    margin: 0;
    font-size: clamp(62px, 6.6vw, 98px);
    line-height:.94
}

h1 em, h2 em, blockquote em {
    color: #3b9ecd;
    font-weight:400
}

.intro h2 em, .quote blockquote em, .sync h2 em, .sync-explainer h2 em {
    color:var(--brand)
}

.hero-copy {
    color: #fff;
    max-width: 545px;
    margin: 34px 0 37px;
    font-size: var(--text-base);
    line-height:1.75
}

.hero-actions {
    align-items: center;
    gap: 34px;
    display:flex
}

.button {
    text-transform: uppercase;
    letter-spacing: .13em;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-height: 52px;
    padding: 0 24px;
    font-size: var(--text-sm);
    font-weight: 800;
    transition: transform .2s, background .2s;
    display:inline-flex
}

.button:hover {
    transform:translateY(-2px)
}

.button-primary {
    background: #3b9ecd;
    color:#171009
}

.play {
    border: 1px solid #00000059;
    border-radius: 50%;
    place-items: center;
    width: 23px;
    height: 23px;
    font-size: var(--text-sm);
    display:grid
}

.text-link {
    text-transform: uppercase;
    letter-spacing: .12em;
    border-bottom: 1px solid #ffffff59;
    align-items: center;
    gap: 16px;
    padding-bottom: 6px;
    font-size: var(--text-sm);
    font-weight: 700;
    display:inline-flex
}

.text-link span {
    color:#3b9ecd
}

.hero-actions .text-link span {
    color:var(--brand)
}

.hero-meta {
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #969b9f;
    gap: 38px;
    font: 700 var(--text-xsm) Arial, sans-serif;
    display: flex;
    position: absolute;
    bottom: 31px;
    left: 50%;
    transform:translate(-50%)
}

.scroll-cue {
    writing-mode: vertical-rl;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #9da2a5;
    align-items: center;
    gap: 16px;
    font-size: var(--text-xsm);
    display: flex;
    position: absolute;
    bottom: 34px;
    right:32px
}

.scroll-cue i {
    background: linear-gradient(var(--brand) 45%, var(--line) 45%);
    width: 1px;
    height: 45px;
    transform-origin: top;
    animation:scroll-cue-bounce 1.8s ease-in-out infinite
}

@keyframes scroll-cue-bounce {
    0%, 100% {
        transform:translateY(0)
    }

    50% {
        transform:translateY(10px)
    }
}

.trust-strip {
    border-bottom: 1px solid var(--line);
    background:var(--ink-soft)
}

.trust-strip .shell {
    align-items: center;
    gap: 70px;
    min-height: 152px;
    display:flex
}

.trust-strip p {
    color: #737b81;
    text-transform: lowercase;
    letter-spacing: .2em;
    flex: none;
    width: 150px;
    margin: 0;
    font:700 var(--text-xsm)/1.6 Arial
}

.client-logos {
    color: #8c9296;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    display:flex
}

.client-logos strong {
    letter-spacing: -.03em;
    font-size:var(--text-base)
}

.client-logos strong:nth-child(2), .client-logos strong:nth-child(4) {
    letter-spacing: .06em;
    font-size:var(--text-sm)
}

.client-logos span {
    color:var(--brand)
}

.section {
    padding:135px 0
}

.section-label {
    color: #778087;
    gap: 15px;
    display:flex
}

.section-label span {
    color:var(--brand)
}

.services .section-label span, .work .section-label span, .contact .section-label span {
    color:#3b9ecd
}

.intro {
    background:var(--ink)
}

.intro-grid {
    grid-template-columns: 28% 72%;
    display:grid
}

.kicker {
    color: #858d92;
    margin: 0 0 14px;
    font:italic 18px Georgia, serif
}

h2 {
    margin: 0;
    font-size: clamp(50px, 5.2vw, 78px);
    line-height:.98
}

.intro-copy {
    color: #9da4a9;
    grid-template-columns: 1fr 1fr;
    column-gap:62px;
    row-gap:22px;
    max-width: 810px;
    margin-top: 46px;
    font-size: var(--text-sm);
    line-height: 1.8;
    display:grid
}

.intro-copy p {
    margin:0
}

.intro-copy > p:first-child {
    color: #fff;
    font-size:var(--text-base)
}

.studio-page-link {
    grid-column:1/-1;
    width:auto;
    justify-self:end;
    text-align:right;
    color:#d4d5d4
}

.stats {
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
    max-width: 880px;
    margin-top: 64px;
    padding-top: 36px;
    display:grid
}

.stats div {
    flex-direction: column;
    gap: 9px;
    display:flex
}

.stats strong {
    color: var(--brand);
    font:400 40px Georgia, serif
}

.stats span {
    color: #7d858a;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size:var(--text-xsm)
}

.sync {
    background: linear-gradient(90deg, rgb(3 5 7 / 47%) 30%, rgb(3 5 7 / 47.9%) 60%, rgb(3 5 7 / 15.2%) 99%, rgb(3 5 7 / 8.5%) 100%), linear-gradient(0deg, rgb(4 5 7 / 42.5%) 0, #0000 35%), url(../images/table-mix.jpg) 100% 45%/cover no-repeat
}

.sync-copy {
    color: #fff;
    max-width: 760px;
    margin-top: 34px;
    font-size: var(--text-base);
    line-height:1.8
}

.sync-copy p {
    margin:0
}

.sync-copy p + p {
    margin-top:22px
}

.sync-cta {
    margin:38px 0 0
}

.sync-cta .button-primary {
    background:var(--brand)
}

.sync-list-label {
    color: #d4d5d4;
    max-width: 640px;
    margin: 40px 0 16px;
    font:italic var(--text-base) Georgia, serif
}

.services {
    background:var(--ink-soft)
}

.section-heading {
    grid-template-columns: 28% 44% 28%;
    align-items: end;
    margin-bottom: 78px;
    display:grid
}

.contact .section-heading {
    grid-template-columns: 1.15fr 1fr;
    gap:70px
}

.contact .section-heading h2 {
    grid-column:2
}

.section-heading > p {
    color: #d4d5d4;
    margin: 0 0 5px;
    font-size: var(--text-base);
    line-height:1.7
}

.service {
    border-top: 1px solid var(--line);
    grid-template-columns: 3.3% 28% 36.7% 32%;
    align-items: start;
    gap: 0;
    background: var(--ink);
    padding: 36px 0;
    transition: background .25s;
    display:grid
}

.service > div:first-child {
    grid-column:2
}

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

.service:hover {
    background:var(--ink)
}

.service-list .service {
    transition:background .25s
}

.service h3 {
    margin: 0 0 8px;
    font:600 25px 'Google Sans Flex', sans-serif
}

.service-subtitle {
    font: italic var(--text-sm) Georgia, serif;
    color:#747d83 !important
}

.service > p {
    grid-column:3;
    color: #fff;
    margin: 2px 50px 0 0;
    font-size: var(--text-base);
    line-height:1.75
}

.tags {
    grid-column:4;
    flex-wrap: wrap;
    gap: 7px;
    display:flex
}

.tags span {
    border: 1px solid var(--line);
    background: #00000059;
    text-transform: uppercase;
    color: #9ca3a7;
    letter-spacing: .13em;
    border-radius: 20px;
    padding: 8px 11px;
    font-size:var(--text-xsm)
}

.work {
    background:var(--ink-soft);
    padding-bottom:67.5px
}

.section-heading.compact {
    grid-template-columns: 28% 1fr auto;
    margin-bottom:58px
}

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

.video-work-card {
    grid-column:span 2
}

.work-category-link {
    grid-column:1/-1;
    justify-self:end;
    margin-top:3px
}

.video-work-link {
    margin-bottom:50px
}

.work-audio-player {
    aspect-ratio:4/3
}

.work-audio-player .audio-play-button:disabled {
    opacity:.62
}

.work-video-player[data-vimeo-clean] .clean-video-controls {
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none
}

.clean-video-surface {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:#00000070;
    -webkit-backdrop-filter:saturate(.66) brightness(.78);
    backdrop-filter:saturate(.66) brightness(.78);
    cursor:pointer;
    pointer-events:auto;
    transition:background-color .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease
}

.clean-video-surface:after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%, #43b7ed2b 0%, #43b7ed16 22%, transparent 48%);
    opacity:1;
    transition:opacity .35s ease
}

.work-video-player:hover .clean-video-surface,
.work-video-player:focus-within .clean-video-surface,
.work-video-player.is-playing .clean-video-surface {
    background:#0000;
    -webkit-backdrop-filter:saturate(1) brightness(1);
    backdrop-filter:saturate(1) brightness(1)
}

.work-video-player:hover .clean-video-surface:after,
.work-video-player:focus-within .clean-video-surface:after,
.work-video-player.is-playing .clean-video-surface:after {
    opacity:0
}

.clean-video-start {
    position:absolute;
    left:50%;
    top:50%;
    width:58px;
    height:58px;
    border:1px solid #43b7edb0;
    border-radius:50%;
    background:#071016d9;
    color:var(--blue);
    display:grid;
    place-items:center;
    transform:translate(-50%, -50%);
    cursor:pointer;
    pointer-events:auto;
    transition:opacity .2s, transform .2s
}

.clean-video-start span {
    padding-left:4px
}

.work-video-player:hover .clean-video-start,
.work-video-player:focus-within .clean-video-start {
    transform:translate(-50%, -50%) scale(1.06);
    box-shadow:0 0 28px #43b7ed2e
}

.work-video-player.is-playing .clean-video-start {
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, -50%) scale(.9)
}

.clean-video-bar {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:58px;
    padding:20px 18px 12px;
    display:grid;
    grid-template-columns:28px minmax(0, 1fr) 42px 28px;
    align-items:center;
    gap:11px;
    background:linear-gradient(0deg, #030609f2 0%, #030609b8 48%, transparent 100%);
    pointer-events:auto;
    opacity:0;
    transition:opacity .2s
}

.work-video-player:hover .clean-video-bar,
.work-video-player:focus-within .clean-video-bar,
.work-video-player.is-playing .clean-video-bar {
    opacity:1
}

.clean-video-toggle,
.clean-video-volume,
.clean-video-fullscreen {
    border:0;
    background:transparent;
    color:#f4f1eb;
    cursor:pointer;
    font:700 10px/1 Arial, sans-serif;
    padding:0
}

.clean-video-toggle {
    color:var(--blue);
    font-size:14px
}

.clean-video-progress {
    width:100%;
    height:2px;
    margin:0;
    accent-color:var(--blue);
    cursor:pointer
}

.youtube-video-cover {
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    border:0;
    background:#00000070;
    -webkit-backdrop-filter:saturate(.66) brightness(.78);
    backdrop-filter:saturate(.66) brightness(.78);
    cursor:pointer;
    transition:opacity .35s ease, background-color .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease
}

.youtube-video-cover:after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%, #43b7ed2b 0%, #43b7ed16 22%, transparent 48%);
    opacity:1;
    transition:opacity .35s ease
}

.youtube-video-cover > span {
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    width:58px;
    height:58px;
    border:1px solid #43b7edb0;
    border-radius:50%;
    background:#071016d9;
    color:var(--blue);
    display:grid;
    place-items:center;
    padding-left:4px;
    transform:translate(-50%, -50%);
    transition:transform .2s, box-shadow .2s
}

.vimeo-player[data-youtube-id]:hover .youtube-video-cover,
.vimeo-player[data-youtube-id]:focus-within .youtube-video-cover {
    background:#0000;
    -webkit-backdrop-filter:saturate(1) brightness(1);
    backdrop-filter:saturate(1) brightness(1)
}

.vimeo-player[data-youtube-id]:hover .youtube-video-cover:after,
.vimeo-player[data-youtube-id]:focus-within .youtube-video-cover:after {
    opacity:0
}

.vimeo-player[data-youtube-id]:hover .youtube-video-cover > span,
.vimeo-player[data-youtube-id]:focus-within .youtube-video-cover > span {
    transform:translate(-50%, -50%) scale(1.06);
    box-shadow:0 0 28px #43b7ed2e
}

.vimeo-player[data-youtube-id].is-playing .youtube-video-cover {
    opacity:0;
    pointer-events:none
}

.work-card {
    border:0;
    background:transparent;
    transition: transform .25s, border-color .25s;
    display:block
}

.work-card:hover {
    transform:translateY(-5px)
}

.work-grid .work-card {
    transition: transform .25s, border-color .25s
}

.work-visual {
    background: radial-gradient(circle at 30% 20%, #41a9e040, #0000 40%), #0a1118;
    place-items: center;
    height: 163px;
    display: grid;
    position: relative;
    overflow:hidden
}

.work-card.amber .work-visual {
    background:radial-gradient(circle at 65% 25%, #e7943747, #0000 38%), #17110c
}

.work-card.violet .work-visual {
    background:radial-gradient(circle at 30% 20%, #7153aa59, #0000 42%), #110e17
}

.wave-lines {
    opacity: .8;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: calc(100% - 64px);
    height: 70px;
    display: flex;
    position: relative
}

.wave-lines i {
    background: var(--blue);
    flex: 1;
    min-height:3px
}

.amber .wave-lines i {
    background:#d6a97c
}

.violet .wave-lines i {
    background:#9f75e8
}

.play-large {
    color: #101215;
    background: #f5f0e6f0;
    border-radius: 50%;
    place-items: center;
    width: 60px;
    height: 60px;
    font-size: var(--text-base);
    display: grid;
    position: absolute;
    z-index: 2;
    box-shadow:0 10px 30px #0006
}

.work-visual .play-large {
    width: 46px;
    height: 46px;
    font-size:var(--text-sm)
}

.work-info {
    border-bottom:1px solid var(--line);
    background:transparent;
    padding: 25px 26px 28px;
    position:relative
}

.work-info > span {
    color: #778086;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size:var(--text-sm)
}

.work-info h3 {
    margin: 13px 0 4px;
    font:600 26px 'Google Sans Flex', sans-serif
}

.work-card .work-info h3 {
    margin-top:0
}

.work-info p {
    color: #858d92;
    margin: 0;
    font:italic var(--text-sm) Georgia, serif
}

.quote {
    text-align: center;
    background: var(--ink);
    position: relative;
    overflow:hidden
}

.quote:before {
    content: "";
    background: radial-gradient(circle at 50% 40%, #d6a97c3d, #0000 42%);
    position: absolute;
    inset:0
}

.quote .shell {
    position:relative
}

.quote-mark {
    color: var(--brand);
    font:400 65px/1 Georgia, serif
}

blockquote {
    margin: 5px 0 48px;
    font-size: clamp(42px, 5vw, 69px);
    line-height:1.05
}

.contact {
    background: linear-gradient(270deg, #030507fa 30%, #030507d9 60%, #03050747 99%, #03050729 100%), linear-gradient(0deg, #040507cc 0, #0000 35%), url(../images/voice.jpg) calc(37% - 60px) 12%/cover no-repeat
}

.contact-columns {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    gap: 70px;
    display:grid
}

.contact-columns .contact-form {
    background: rgba(5,6,8,.7);
    margin:0
}

.contact-lead {
    color: #d4d5d4;
    max-width: 420px;
    margin: 0 0 40px;
    font-size: var(--text-base);
    line-height:1.7
}

.contact-transit {
    color: #9da4a9;
    max-width: 420px;
    margin: 40px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
    line-height:1.8
}

.contact-transit a {
    color: #3b9ecd;
    border-bottom: 1px solid #3b9ecd59
}

.footer {
    border-top: 1px solid var(--line);
    background: var(--ink);
    padding:75px 0 28px
}

.footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 80px;
    padding-bottom: 70px;
    display:grid
}

.footer-grid > div:first-child p {
    color: #6f777c;
    margin: 24px 0 0;
    font:italic var(--text-sm)/1.6 Georgia, serif
}

.footer-links {
    color: #b5b9bb;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    font-size: var(--text-sm);
    display:flex
}

.footer-links span {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #3b9ecd;
    margin-bottom: 8px;
    font-size:var(--text-sm)
}

.footer-bottom {
    border-top: 1px solid var(--line-soft);
    color: #555d62;
    text-transform: uppercase;
    letter-spacing: .17em;
    justify-content: space-between;
    padding-top: 25px;
    font-size: var(--text-xsm);
    display:flex
}

.page-hero {
    border-bottom: 1px solid var(--line);
    background: #080b0e;
    align-items: flex-end;
    min-height: 610px;
    padding: 190px 0 105px;
    display: flex;
    position: relative;
    overflow:hidden
}

.page-hero:before {
    content: "";
    background: radial-gradient(circle at 82% 12%, #2f88bc33, #0000 26%), radial-gradient(circle at 61% 64%, #d6a97c1f, #0000 30%);
    position: absolute;
    inset:0
}

.page-hero:after {
    content: "";
    border: 1px solid #ffffff0e;
    border-radius: 50%;
    width: 440px;
    height: 440px;
    position: absolute;
    top: 18%;
    right: 7%;
    box-shadow:0 0 0 70px #ffffff05, 0 0 0 140px #ffffff03
}

.page-hero-grid {
    z-index: 1;
    grid-template-columns: 23% 50% 27%;
    align-items: end;
    display: grid;
    position:relative
}

.page-hero .section-label span {
    color:var(--brand)
}

.page-hero h1 {
    font-size:clamp(62px, 6.2vw, 92px)
}

.page-hero-grid > p {
    color: #8e969b;
    max-width: 330px;
    margin: 0 0 9px;
    font-size: var(--text-sm);
    line-height:1.8
}

.portfolio-content {
    background:var(--ink-soft)
}

.filter-row {
    flex-wrap: wrap;
    gap: 8px;
    margin: -5px 0 50px;
    display:flex
}

.filter-row button {
    appearance: none;
    border: 1px solid var(--line);
    color: #8d959a;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    background: 0 0;
    border-radius: 999px;
    padding: 11px 17px;
    font-size: var(--text-sm);
    font-weight: 700;
    transition:color .2s, border-color .2s, background .2s
}

.filter-row button:hover {
    color: var(--paper);
    border-color:#ffffff52
}

.filter-row button.active {
    background: var(--brand);
    color: #171009;
    border-color:var(--brand)
}

.portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 54px 18px;
    display:grid
}

.portfolio-card {
    min-width:0
}

.portfolio-art {
    border: 1px solid var(--line-soft);
    background: radial-gradient(circle at 62% 32%, #43b7ed47, #0000 35%), linear-gradient(140deg, #08141d, #0a0e13);
    place-items: center;
    height: 430px;
    display: grid;
    position: relative;
    overflow:hidden
}

.portfolio-card.amber .portfolio-art {
    background:radial-gradient(circle at 62% 32%, #d6a97c52, #0000 35%), linear-gradient(140deg, #171009, #0e0c0a)
}

.portfolio-card.violet .portfolio-art {
    background:radial-gradient(circle at 62% 32%, #855fcf57, #0000 35%), linear-gradient(140deg, #140e1e, #0d0b12)
}

.portfolio-card.red .portfolio-art {
    background:radial-gradient(circle at 62% 32%, #ca413757, #0000 35%), linear-gradient(140deg, #1b0b0c, #100b0c)
}

.portfolio-card.rose .portfolio-art {
    background:radial-gradient(circle at 62% 32%, #ca5d8f52, #0000 35%), linear-gradient(140deg, #190e15, #100b0e)
}

.portfolio-card.green .portfolio-art {
    background:radial-gradient(circle at 62% 32%, #3aa77e4f, #0000 35%), linear-gradient(140deg, #0a1813, #09100e)
}

.project-index {
    color: #ffffff52;
    font: 700 var(--text-sm)/1 Arial, sans-serif;
    letter-spacing: .18em;
    position: absolute;
    top: 24px;
    left:26px
}

.duration {
    color: #ffffff80;
    font: 700 var(--text-sm)/1 "Courier New", monospace;
    letter-spacing: .13em;
    position: absolute;
    top: 24px;
    right:26px
}

.orbit {
    border: 1px solid #ffffff21;
    border-radius: 50%;
    width: 235px;
    height: 235px;
    position:relative
}

.orbit:after {
    content: "";
    border: 1px solid #ffffff14;
    border-radius: 50%;
    position: absolute;
    inset:34px
}

.orbit i {
    background: var(--brand);
    border-radius: 50%;
    width: 7px;
    height: 7px;
    position: absolute;
    box-shadow:0 0 18px
}

.orbit i:first-child {
    top: 27px;
    left:31px
}

.orbit i:nth-child(2) {
    top: 50%;
    right:-4px
}

.orbit i:nth-child(3) {
    bottom: 16px;
    left:66px
}

.portfolio-art .play-large {
    cursor: pointer;
    border: 0;
    transition:transform .2s, background .2s
}

.portfolio-art .play-large:hover {
    background: #fff;
    transform:scale(1.08)
}

.portfolio-art .wave-lines {
    opacity:.48
}

.portfolio-art.is-playing .orbit {
    animation:8s linear infinite orbit-spin
}

.portfolio-art.is-playing .wave-lines i {
    animation:.6s ease-in-out infinite alternate wave-pulse
}

.portfolio-art.is-playing .wave-lines i:nth-child(2n) {
    animation-delay:-.3s
}

@keyframes orbit-spin {
    to {
        transform:rotate(360deg)
    }
}

@keyframes wave-pulse {
    to {
        opacity: .45;
        transform:scaleY(.38)
    }
}

.portfolio-info {
    justify-content: space-between;
    gap: 30px;
    padding: 24px 3px 0;
    display:flex
}

.portfolio-info > div > span, .portfolio-info > span {
    color: #687177;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size:var(--text-sm)
}

.portfolio-info h2 {
    margin: 10px 0 5px;
    font-size:31px
}

.portfolio-info p {
    color: #8d959a;
    margin: 0;
    font:italic var(--text-sm) Georgia, serif
}

.portfolio-cta .eyebrow {
    justify-content:center
}

.contact-page {
    background: #080a0c;
    min-height: 930px;
    padding: 165px 0 105px;
    position: relative;
    overflow:hidden
}

.contact-image {
    opacity: .52;
    background: linear-gradient(90deg, #04060838, #040608b8), url(../images/voice.jpg) 44%/cover no-repeat;
    position: absolute;
    inset:0 51% 0 0
}

.contact-page:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, #0000 0 42%, #080a0c 52%), radial-gradient(circle at 15% 45%, #d6a97c1f, #0000 35%);
    position: absolute;
    inset:0
}

.contact-grid {
    z-index: 1;
    grid-template-columns: 42% 58%;
    align-items: start;
    gap: 85px;
    display: grid;
    position:relative
}

.contact-intro {
    padding-top:62px
}

.contact-intro h1 {
    font-size:clamp(60px, 5.8vw, 86px)
}

.contact-intro > p:not(.eyebrow) {
    color: #fff;
    max-width: 470px;
    margin: 34px 0 50px;
    font-size: var(--text-base);
    line-height:1.8
}

.contact-details {
    border-top: 1px solid var(--line);
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
    max-width: 460px;
    padding-top: 32px;
    display:grid
}

.contact-details div > span {
    color: #3b9ecd;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: 11px;
    font-size: var(--text-sm);
    display:block
}

.contact-details a, .contact-details p {
    color: #d2d5d6;
    margin: 0;
    font-size: var(--text-sm);
    line-height:1.6
}

.contact-details a[href^="mailto"] {
    color: #3b9ecd;
    border-bottom: 1px solid #3b9ecd59
}

.contact-form {
    border: 1px solid var(--line);
    background: #101419;
    padding: 42px 44px 40px;
    box-shadow:0 35px 90px #00000061
}

.form-heading {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    margin-bottom: 31px;
    padding-bottom: 24px;
    display:flex
}

.form-heading span {
    font:600 26px/1.2 'Google Sans Flex', sans-serif
}

.form-heading strong {
    color: #3b9ecd;
    letter-spacing: .17em;
    font-size:var(--text-sm)
}

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

.contact-form label {
    margin-bottom: 27px;
    display:block
}

.contact-form label > span, .contact-form legend {
    color: #8f979c;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: 10px;
    font-size: var(--text-sm);
    font-weight: 700;
    display:block
}

.contact-form input:not([type=checkbox]), .contact-form textarea {
    width: 100%;
    color: var(--paper);
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #ffffff29;
    border-radius: 0;
    outline: 0;
    padding: 10px 0 13px;
    transition:border-color .2s
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
    color:#515960
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color:var(--brand)
}

.contact-form fieldset {
    border: 0;
    margin: 2px 0 28px;
    padding:0
}

.service-options {
    flex-wrap: wrap;
    gap: 8px;
    display:flex
}

.service-options label {
    margin:0
}

.service-options input {
    opacity: 0;
    pointer-events: none;
    position:absolute
}

.service-options span {
    border: 1px solid var(--line);
    cursor: pointer;
    border-radius: 999px;
    padding: 10px 13px;
    transition: border-color .2s, color .2s, background .2s;
    color: #8f979c !important;
    margin:0 !important
}

.service-options input:checked + span {
    border-color: var(--brand);
    background: #d6a97c1f;
    color:var(--paper) !important
}

.service-options input:focus-visible + span {
    outline: 2px solid var(--blue);
    outline-offset:2px
}

.contact-form textarea {
    resize: vertical;
    min-height:95px
}

.form-submit {
    cursor: pointer;
    border: 0;
    width:100%
}

.form-note {
    text-align: center;
    color: #626a70;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 15px 0 0;
    font-size:var(--text-sm)
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset:4px
}

::selection {
    background: var(--brand);
    color:#171009
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform:translateY(24px)
    }

    to {
        opacity: 1;
        transform:translateY(0)
    }
}

@keyframes rise-in-centered {
    from {
        opacity: 0;
        transform:translate(-50%, 24px)
    }

    to {
        opacity: 1;
        transform:translate(-50%, 0)
    }
}

.hero-content .eyebrow, .hero-content h1, .hero-content .hero-copy, .hero-content .hero-actions {
    opacity: 0;
    animation: rise-in .9s cubic-bezier(.16, .8, .3, 1) forwards
}

.hero-content .eyebrow {
    animation-delay:.1s
}

.hero-content h1 {
    animation-delay:.24s
}

.hero-content .hero-copy {
    animation-delay:.4s
}

.hero-content .hero-actions {
    animation-delay:.54s
}

.hero-meta {
    opacity: 0;
    animation: rise-in-centered .9s cubic-bezier(.16, .8, .3, 1) .7s forwards
}

[data-reveal] {
    --reveal-y: 36px;
    opacity: 0;
    transform: translateY(var(--reveal-y));
    transition: opacity .8s cubic-bezier(.16, .8, .3, 1), transform .8s cubic-bezier(.16, .8, .3, 1)
}

[data-reveal].is-visible {
    --reveal-y: 0px;
    opacity:1
}

.intro-grid > [data-reveal]:nth-child(2) {
    transition-delay:.15s
}

.service-list .service:nth-child(2) {
    transition-delay:.12s
}

.service-list .service:nth-child(3) {
    transition-delay:.24s
}

.work-grid .work-card:nth-child(2) {
    transition-delay:.12s
}

.work-grid .work-card:nth-child(3) {
    transition-delay:.24s
}

@media (prefers-reduced-motion: reduce) {
    .hero-content .eyebrow, .hero-content h1, .hero-content .hero-copy, .hero-content .hero-actions, .hero-meta, [data-reveal], .scroll-cue i {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important
    }

    .hero-lights i {
        animation: none !important;
        opacity:0 !important
    }
}

@media (width<=1180px) {
    .shell {
        width:min(100% - 40px, 1280px)
    }

    .burger {
        display:flex
    }

    nav {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin-left: 0;
        background: var(--ink);
        padding: 40px 24px 24px;
        position: fixed;
        top: 92px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s
    }

    .site-header.nav-open nav {
        opacity: 1;
        visibility: visible;
        transform:translateY(0)
    }

    nav a:not(.nav-cta) {
        padding: 14px 0;
        border-bottom: 1px solid var(--line-soft)
    }

    nav a[aria-current="page"]::after {
        display:none
    }

    .nav-cta {
        margin-left: 0;
        justify-content: center;
        margin-top:20px
    }

    .language-selector {
        margin:24px 0 0
    }

    .language-selector summary {
        width:100%
    }

    .language-menu {
        position:static;
        margin-top:8px;
        box-shadow:none
    }

    .scroll-cue {
        display:none
    }

    .trust-strip .shell {
        gap:30px
    }

    .client-logos {
        flex-wrap: wrap;
        gap:24px
    }

    .intro-grid, .section-heading {
        grid-template-columns: 1fr;
        gap:35px
    }

    .intro-grid > .section-label {
        margin-bottom:12px
    }

    .service {
        grid-template-columns:3.3% 38% 58.7%
    }

    .service > p {
        grid-column: 2/4;
        max-width: 600px;
        margin:22px 0
    }

    .tags {
        grid-column:2/4
    }

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

    .video-work-card {
        grid-column:span 1
    }

    .page-hero-grid {
        grid-template-columns: 1fr;
        gap:32px
    }

    .page-hero-grid > p {
        max-width: 650px;
        margin-left:24%
    }

    .portfolio-art {
        height:360px
    }

    .contact-grid {
        grid-template-columns:1fr
    }

    .contact-page {
        padding-top:120px
    }

    .contact-page:after {
        background:linear-gradient(#080a0c73 0%, #080a0c 60%)
    }

    .contact-image {
        opacity: .22;
        inset:0
    }

    .contact-intro {
        max-width:650px
    }

    .contact-form {
        max-width:700px
    }
}

@media (width<=620px) {
    .shell {
        width:calc(100% - 32px)
    }

    .contact-columns {
        grid-template-columns: 1fr;
        gap:48px
    }

    .contact .section-heading {
        grid-template-columns: 1fr;
        gap:35px
    }

    .header-inner {
        height:76px
    }

    nav {
        top:76px
    }

    .brand {
        font-size:var(--text-sm)
    }

    .brand-logo {
        width:157px
    }

    .nav-cta {
        padding: 11px 12px;
        font-size:var(--text-sm)
    }

    .hero {
        align-items:center
    }

    .hero-image {
        background-position:58%
    }

    .hero:before {
        background:linear-gradient(90deg, rgb(3 5 7 / 65%), rgb(3 5 7 / 10%)), linear-gradient(#0000 35%, rgb(3 5 7 / 50%))
    }

    h1 {
        font-size:51px
    }

    .hero-content .eyebrow {
        color:#fff
    }

    .hero-copy {
        color: #fff;
        font-size: var(--text-base);
        line-height:1.65
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap:24px
    }

    .hero-meta {
        white-space: nowrap;
        gap: 16px;
        overflow:hidden
    }

    .trust-strip .shell {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        min-height:170px
    }

    .trust-strip p {
        width:auto
    }

    .client-logos {
        gap:18px 25px
    }

    .section {
        padding:92px 0
    }

    .work {
        padding-bottom:46px
    }

    h2 {
        font-size:47px
    }

    .intro-copy {
        grid-template-columns: 1fr;
        gap:25px
    }

    .stats {
        gap:18px
    }

    .stats strong {
        font-size:30px
    }

    .section-heading.compact {
        grid-template-columns:1fr
    }

    .service {
        grid-template-columns:5% 95%
    }

    .service > p, .tags {
        grid-column:2
    }

    .services .section-label,
    .services .section-heading h2,
    .service h3,
    .services .tags span {
        color:#fff
    }

    .sync .section-label,
    .sync h2 {
        color:#fff
    }

    .sync-tags span {
        color:#fff
    }

    .contact-transit,
    .contact-details a,
    .contact-details p,
    .contact .section-label,
    .contact .section-heading h2 {
        color:#fff
    }

    .contact {
        background:linear-gradient(270deg, rgb(3 5 7 / 65%) 30%, rgb(3 5 7 / 56.3%) 60%, rgb(3 5 7 / 17.9%) 99%, rgb(3 5 7 / 10%) 100%), linear-gradient(0deg, rgb(4 5 7 / 50%) 0, #0000 35%), url(../images/voice.jpg) calc(37% - 60px) 12%/cover no-repeat
    }

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

    .work-visual {
        height:145px
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap:45px
    }

    .footer-bottom {
        flex-direction: column;
        gap:12px
    }

    .page-hero {
        min-height: 590px;
        padding:150px 0 75px
    }

    .page-hero h1 {
        font-size:52px
    }

    .page-hero-grid > p {
        margin-left:0
    }

    .portfolio-grid {
        grid-template-columns:1fr
    }

    .portfolio-art {
        height:300px
    }

    .orbit {
        width: 190px;
        height:190px
    }

    .contact-page {
        padding:105px 0 80px
    }

    .contact-grid {
        gap:42px
    }

    .contact-intro {
        padding-top:55px
    }

    .contact-intro h1 {
        font-size:51px
    }

    .contact-details, .field-row {
        grid-template-columns:1fr
    }

    .contact-details {
        gap:25px
    }

    .contact-form {
        padding: 30px 22px
    }
}

/* Radio advertising portfolio */
.portfolio-radio-page .radio-portfolio-hero {
    background-image:url(../images/hero-radio-spots-clean.jpg);
    background-position:center
}

.audio-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:58px 22px
}

.audio-card {
    min-width:0
}

.audio-player {
    aspect-ratio:4/3;
    border:1px solid var(--line);
    background:radial-gradient(circle at 50% 48%, #43b7ed16, transparent 42%), #090c0f;
    position:relative;
    overflow:hidden
}

.audio-player:before {
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(90deg, transparent 0 42px, #ffffff08 42px 43px)
}

.audio-player:not(.is-ready):after {
    content:"Audio coming soon";
    position:absolute;
    left:18px;
    bottom:17px;
    color:#697177;
    text-transform:uppercase;
    letter-spacing:.16em;
    font:700 10px/1 Arial, sans-serif
}

.audio-number {
    position:absolute;
    top:17px;
    left:18px;
    color:#747c82;
    font:700 10px/1 Arial, sans-serif;
    letter-spacing:.18em
}

.audio-wave {
    width:74%;
    height:48px;
    position:absolute;
    left:13%;
    top:50%;
    transform:translateY(-50%);
    opacity:.34;
    background:repeating-linear-gradient(90deg, var(--blue) 0 2px, transparent 2px 7px);
    -webkit-mask-image:linear-gradient(0deg, transparent 4%, #000 32%, #000 68%, transparent 96%);
    mask-image:linear-gradient(0deg, transparent 4%, #000 32%, #000 68%, transparent 96%)
}

.audio-play-button {
    width:52px;
    height:52px;
    border:1px solid #43b7ed8c;
    border-radius:50%;
    background:#081016d9;
    color:var(--blue);
    cursor:pointer;
    display:grid;
    place-items:center;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:2
}

.audio-play-button span {
    padding-left:3px
}

.audio-play-button:disabled {
    cursor:default;
    opacity:.62
}

.audio-player.is-playing .audio-play-button span {
    padding-left:0
}

.audio-progress {
    position:absolute;
    left:18px;
    right:58px;
    bottom:20px;
    height:2px;
    background:#ffffff21;
    cursor:pointer;
    z-index:2;
    opacity:0
}

.audio-player.is-ready .audio-progress {
    opacity:1
}

.audio-progress i {
    display:block;
    width:0;
    height:100%;
    background:var(--blue)
}

.audio-time {
    position:absolute;
    right:17px;
    bottom:15px;
    color:#858d92;
    font:700 10px/1 Arial, sans-serif;
    opacity:0
}

.audio-player.is-ready .audio-time {
    opacity:1
}

.audio-card-info {
    border-bottom:1px solid var(--line);
    padding:22px 1px 24px
}

.audio-card-info > span {
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:.17em;
    font-size:10px
}

.audio-card-info h3 {
    font-size:27px;
    line-height:1;
    margin:9px 0 13px
}

.audio-card-info p {
    color:#7f878c;
    font-size:12px;
    line-height:1.55;
    margin:0
}

@media (width<=1000px) {
    .audio-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (width<=620px) {
    .portfolio-radio-page .radio-portfolio-hero {
        background-position:68% center
    }

    .audio-grid {
        grid-template-columns:1fr;
        gap:46px
    }

    .audio-player {
        aspect-ratio:16/10
    }
}

/* TV & Web advertising portfolio */
.portfolio-video-page {
    background:#050608
}

/* Brussels recording studio service page */
.studio-brussels-page .studio-service-hero {
    min-height:clamp(392px, 49vh, 532px);
    height:auto
}

.studio-brussels-page .studio-service-hero:after {
    background:linear-gradient(90deg, #050608e8 0%, #0506088c 55%, #05060824 100%)
}

.studio-brussels-page .studio-service-hero .video-portfolio-hero-content {
    padding-top:55px;
    padding-bottom:55px
}

.studio-brussels-page .studio-service-hero h1 {
    max-width:1050px;
    font-size:clamp(48px, 6.2vw, 104px);
    line-height:.9
}

.studio-hero-copy {
    max-width:680px;
    color:#fff;
    font-size:clamp(17px, 1.3vw, 21px);
    line-height:1.65;
    margin:34px 0 28px
}

.studio-hero-button {
    align-self:flex-start;
    background:var(--blue)
}

.studio-promise,
.studio-advantage {
    padding:clamp(85px, 9vw, 145px) 0
}

.portfolio-role.studio-promise {
    background:radial-gradient(ellipse at center, rgba(214, 169, 124, .28) 0%, rgba(214, 169, 124, .12) 34%, transparent 70%), var(--ink)
}

.studio-promise h2,
.studio-advantage h2 {
    margin-top:34px
}

.studio-promise .video-portfolio-hero-grid,
.studio-advantage .video-portfolio-hero-grid {
    align-items:start
}

.studio-promise h2 em,
.studio-advantage h2 em {
    color:var(--brand)
}

.studio-services .section-heading h2,
.studio-faq .video-showcase-heading h2 {
    margin:0
}

.studio-services .service {
    grid-template-columns:3.3% 28% 36.7% 32%
}

.studio-services .service > p {
    grid-column:3
}

.studio-services .service:nth-child(3) h3 {
    margin-right:20px
}

.portfolio-role.studio-advantage {
    background:radial-gradient(ellipse at 27% 64%, rgba(214, 169, 124, .32) 0%, rgba(214, 169, 124, .14) 30%, transparent 62%), var(--ink)
}

.studio-faq {
    background:var(--ink-soft)
}

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

.faq-item {
    display:grid;
    grid-template-columns:minmax(280px, .8fr) 1.2fr;
    gap:70px;
    border-top:1px solid var(--line);
    padding:38px 0
}

.faq-item h3 {
    margin:0;
    font-size:clamp(21px, 2vw, 29px);
    line-height:1.22
}

.faq-item p {
    max-width:760px;
    color:#fff;
    line-height:1.75;
    margin:0
}

@media (width<=900px) {
    .studio-services .section-heading,
    .studio-services .service,
    .faq-item {
        grid-template-columns:1fr
    }

    .studio-services .section-heading {
        gap:30px
    }

    .studio-services .service {
        gap:24px;
        padding:38px 24px
    }

    .studio-services .service > div:first-child,
    .studio-services .service > p,
    .studio-services .service .tags {
        grid-column:1
    }

    .faq-item {
        gap:20px
    }
}

@media (width<=620px) {
    .studio-brussels-page .studio-service-hero {
        min-height:372px
    }

    .studio-brussels-page .studio-service-hero .video-portfolio-hero-content {
        padding-top:35px;
        padding-bottom:35px
    }

    .studio-hero-copy {
        margin-top:26px
    }
}

.video-portfolio-hero {
    min-height:clamp(392px, 49vh, 532px);
    height:auto;
    aspect-ratio:auto;
    margin-top:92px;
    position: relative;
    overflow: hidden;
    background:#050608 url(../images/hero-spots-tv-web-clean.jpg) center/cover no-repeat;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center
}

.video-portfolio-hero + .portfolio-role {
    border-top:0
}

.video-portfolio-hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, #050608e8 0%, #0506088c 55%, #05060824 100%);
    pointer-events:none
}

.video-portfolio-hero-content {
    position:relative;
    z-index:1;
    height:100%;
    padding-top:55px;
    padding-bottom:55px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.video-portfolio-hero-content h1 {
    max-width:1050px;
    margin:0;
    color:#fff;
    text-transform:none;
    font-size:clamp(48px, 6.2vw, 104px);
    font-weight:750;
    line-height:.9;
    letter-spacing:-.065em
}

.video-portfolio-hero-content .eyebrow {
    margin-bottom:24px
}

.video-portfolio-hero-content .video-portfolio-subtitle {
    color:#969b9f;
    text-transform:uppercase;
    letter-spacing:.22em;
    margin:0 0 0 4px;
    font:700 var(--text-xsm)/1 Arial, sans-serif;
    position:absolute;
    left:0;
    bottom:28px
}

.video-portfolio-hero-content .video-portfolio-subtitle span {
    margin:0 .32em
}

.video-portfolio-hero-grid {
    display:grid;
    grid-template-columns: 1.28fr .72fr;
    align-items:end;
    gap:90px;
    position:relative
}

.portfolio-role {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--ink);
    padding:105px 0
}

.portfolio-role h2 {
    margin:0;
    font-size:clamp(54px, 5vw, 76px)
}

.video-portfolio-intro {
    border-left:1px solid var(--line);
    padding-left:40px
}

.video-portfolio-intro .kicker {
    margin:0 0 22px
}

.video-portfolio-intro > p:not(.kicker) {
    color:#fff;
    font-size:var(--text-base);
    line-height:1.8;
    margin:0
}

.portfolio-role-tags {
    margin-top:30px;
    grid-column:auto
}

.video-showcase {
    background:var(--ink-soft)
}

.video-showcase .section-label span {
    color:var(--blue)
}

.video-showcase-heading {
    display:grid;
    grid-template-columns: 1fr 1.45fr .75fr;
    align-items:end;
    gap:55px;
    margin-bottom:75px
}

.video-showcase-heading h2 {
    margin:0
}

.video-showcase-heading > p {
    color:#969da3;
    line-height:1.75;
    margin:0
}

.video-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:64px 34px
}

.video-card {
    min-width:0
}

.vimeo-player {
    aspect-ratio:16/9;
    background:#090c0f;
    border:1px solid var(--line);
    overflow:hidden;
    position:relative
}

.vimeo-player iframe {
    width:100%;
    height:100%;
    border:0;
    display:block
}

.vimeo-placeholder {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    background: radial-gradient(circle at 50% 50%, #43b7ed17, #0000 42%), repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 46px), #090c0f
}

.video-number {
    position:absolute;
    top:20px;
    left:22px;
    color:#747c82;
    font:700 var(--text-xsm)/1 Arial, sans-serif;
    letter-spacing:.18em
}

.video-play {
    width:58px;
    height:58px;
    border:1px solid #43b7ed80;
    border-radius:50%;
    color:var(--blue);
    display:grid;
    place-items:center;
    padding-left:4px
}

.video-status {
    position:absolute;
    left:22px;
    bottom:19px;
    color:#6f777c;
    text-transform:uppercase;
    letter-spacing:.17em;
    font-size:var(--text-xsm)
}

.video-card-info {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    border-bottom:1px solid var(--line);
    padding:25px 2px 26px
}

.video-card-info span {
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:.17em;
    font-size:var(--text-xsm)
}

.video-card-info h3 {
    font-size:31px;
    line-height:1;
    margin:9px 0 0
}

.video-card-info p {
    color:#7f878c;
    font-size:var(--text-sm);
    margin:0;
    text-align:right
}

.portfolio-contact {
    background: radial-gradient(circle at 78% 48%, #d6a97c3d, transparent 42%), var(--ink)
}

.portfolio-contact-inner {
    display:grid;
    grid-template-columns:1.25fr .75fr;
    align-items:end;
    gap:90px
}

.portfolio-contact h2 {
    margin:35px 0 0
}

.portfolio-contact h2 em {
    color:var(--brand)
}

.portfolio-contact .button-primary {
    background:var(--brand)
}

.portfolio-contact-inner > div:last-child p {
    color:#aab0b4;
    line-height:1.75;
    margin:0 0 30px
}

@media (width<=900px) {
    .video-portfolio-hero-grid,
    .video-showcase-heading,
    .portfolio-contact-inner {
        grid-template-columns:1fr;
        gap:42px
    }

    .video-portfolio-intro {
        max-width:680px
    }
}

@media (width<=620px) {
    .video-portfolio-hero {
        margin-top:76px;
        height:auto;
        min-height:372px;
        aspect-ratio:auto;
        background-position:64% center
    }

    .video-portfolio-hero-content {
        padding-top:35px;
        padding-bottom:35px
    }

    .video-portfolio-hero-content h1 {
        max-width:340px;
        font-size:clamp(41px, 12.4vw, 51px);
        line-height:.88
    }

    .video-portfolio-hero-content .eyebrow {
        margin-bottom:18px
    }

    .video-portfolio-hero-content .video-portfolio-subtitle {
        position:static;
        max-width:none;
        margin:20px 0 0 4px;
        line-height:1.7
    }

    .portfolio-role {
        padding:76px 0
    }

    .portfolio-role h2 {
        font-size:47px
    }

    .video-portfolio-intro {
        border-left:0;
        border-top:1px solid var(--line);
        padding:28px 0 0
    }

    .video-showcase-heading {
        margin-bottom:48px
    }

    .video-grid {
        grid-template-columns:1fr;
        gap:48px
    }

    .video-card-info {
        align-items:flex-start;
        flex-direction:column;
        gap:16px
    }

    .video-card-info p {
        text-align:left
    }
}