/*
 * Components the VI content needs that the Sanjaya template does not ship.
 * They reuse the template's tokens, text presets and badge; layout only here.
 * Breakpoints follow the template: phone < 810px, tablet 810–1199px.
 */

/* VI's brand green (the pitch deck's lime) and the ink that sits on it; the navigation's Start a Project button uses both. */
:root {
    --vi-brand-green: #b6f23a;
    --vi-brand-green-ink: #050507;
}

.framer-1k8c80d:focus-visible {
    outline: 2px solid var(--vi-brand-green);
    outline-offset: 3px;
}

.framer-1k8c80d:hover > [data-framer-name='BG'] {
    filter: brightness(1.06);
}

/* ---- Project gallery: credit, official video, images ------------------------ */

.vi-project-gallery {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    padding-block: 40px 100px;
    padding-inline: 20px;
    box-sizing: border-box;
    position: relative;
}

.vi-project-gallery__container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    inline-size: 100%;
    max-inline-size: 1240px;
}

.vi-project-gallery__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-inline-size: 760px;
}

/* `:not(:first-child)` matches the template's paragraph-spacing rule (`h2.framer-text:not(:first-child)`, 0,2,1), which
 * would otherwise outrank a plain `.x .framer-text` and add its 20–40px margin on top of the component's flex gap. */
.vi-project-gallery__head .framer-text,
.vi-project-gallery__head .framer-text:not(:first-child) {
    margin: 0;
}

.vi-project-gallery__badge {
    position: relative;
}

.vi-project-gallery__credit {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
}

.vi-project-gallery__video {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    overflow: hidden;
    background: var(--token-7886ad80-b4fc-455a-bc36-fd9c2b0e226f, rgb(26, 26, 29));
}

.vi-project-gallery__video iframe,
.vi-project-gallery__video video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.vi-project-gallery__video video {
    background: #000;
    object-fit: contain;
}

.vi-project-gallery__grid {
    columns: 2;
    column-gap: 16px;
}

/* Every photograph at its own proportions (masonry columns): nothing is cropped; the lightbox opens the original. */
.vi-project-gallery__item {
    display: block;
    margin-block-end: 16px;
    break-inside: avoid;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
}

.vi-project-gallery__item--wide {
    column-span: all;
}

.vi-project-gallery__item img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vi-project-gallery__item:hover img {
    transform: scale(1.03);
}

@media (max-width: 809.98px) {
    .vi-project-gallery {
        padding-block: 24px 64px;
    }

    .vi-project-gallery__grid {
        columns: 1;
    }

    .vi-project-gallery__item {
        margin-block-end: 12px;
    }
}

/* ---- Lightbox (assets/js/vi.js) --------------------------------------------- */

.vi-lightbox {
    max-inline-size: 100vw;
    max-block-size: 100vh;
    inline-size: 100vw;
    block-size: 100vh;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
}

.vi-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vi-lightbox::backdrop {
    background: rgba(1, 0, 4, 0.92);
}

.vi-lightbox__img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.vi-lightbox__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    background: var(--token-7886ad80-b4fc-455a-bc36-fd9c2b0e226f, rgb(26, 26, 29));
    color: #fff;
    font:
        400 20px/1 'Geist',
        sans-serif;
    cursor: pointer;
}

/* ---- Projects listing: filter bar + pagination ------------------------------ */

.vi-filters,
.vi-pagination {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    padding-inline: 20px;
    box-sizing: border-box;
    scroll-margin-block-start: 100px;
}

/* Above the page title's "Overlay" layer, which reaches 100px below its section and took the tabs' clicks. */
.vi-filters {
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: 0 32px;
}

/* The studio a Home logo narrowed the list to (?studio=), with its way back to all projects. */
.vi-filters__studio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    inline-size: 100%;
    max-inline-size: 1240px;
    padding: 14px 16px;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    background: var(--token-7886ad80-b4fc-455a-bc36-fd9c2b0e226f, rgb(26, 26, 29));
    box-sizing: border-box;
}

.vi-filters__studio-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0;
}

.vi-filters__studio-label,
.vi-filters__studio-count {
    font:
        500 12px/1 'Geist Mono',
        monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vi-filters__studio-label {
    color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
}

.vi-filters__studio-name {
    color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    font:
        500 20px/1.2 'Geist',
        'Geist Placeholder',
        sans-serif;
    letter-spacing: -0.02em;
}

.vi-filters__studio-count {
    color: var(--vi-brand-green);
}

.vi-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 36px;
    padding-inline: 14px;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    font:
        400 14px/1.2 'Geist',
        'Geist Placeholder',
        sans-serif;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.vi-filters__clear::before {
    content: '×';
    font-size: 18px;
    line-height: 1;
}

.vi-filters__clear:hover {
    background: rgba(255, 255, 255, 0.16);
}

.vi-filters__clear:focus-visible {
    outline: 2px solid var(--vi-brand-green);
    outline-offset: 2px;
}

.vi-filters__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    inline-size: 100%;
    max-inline-size: 1240px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vi-filters__chip,
.vi-pagination__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
    padding-inline: 14px;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    background: var(--token-7886ad80-b4fc-455a-bc36-fd9c2b0e226f, rgb(26, 26, 29));
    color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    font:
        400 14px/1.2 'Geist',
        'Geist Placeholder',
        sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.vi-filters__chip:hover,
.vi-pagination__link:hover {
    background: rgba(255, 255, 255, 0.16);
}

.vi-filters__chip.is-current,
.vi-pagination__link.is-current {
    background: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    color: var(--token-e4975242-9ac7-4109-b05e-9ce7105a1478, rgb(1, 0, 4));
}

.vi-pagination {
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 8px 100px;
}

@media (max-width: 809.98px) {
    /* One scrolling row on phones starts at the edge: centred, its first tabs would be cut off. */
    .vi-filters__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .vi-filters__list li {
        flex: none;
    }

    .vi-pagination {
        padding-block: 8px 64px;
    }
}

/* ---- Home hero: text links under the subtitle ------------------------------- */

.vi-hero-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    inline-size: 100%;
    margin-block-start: 14px;
}

/* The two hero links are equal: same type, no resting underline, the same hover and focus, a 32px hit area. */
.vi-hero-links__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-block-size: 32px;
    color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    font:
        500 12px/1.2 'Geist Mono',
        monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}

.vi-hero-links__link:hover,
.vi-hero-links__link:focus-visible {
    text-decoration-color: currentColor;
}

/* The hero sentence takes the capability labels' type (Geist Mono 12px) and reads as plain text; the template's text rules read these variables. */
.vi-hero-sub {
    --framer-font-family: 'Geist Mono', monospace;
    --framer-font-size: 12px;
    --framer-font-weight: 400;
    --framer-letter-spacing: 0.08em;
    --framer-line-height: 1.7;
    --framer-text-color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    margin: 0;
    transition: opacity 0.6s ease;
}

/* On phones the sentence block starts at the labels' edge instead of centring at its desktop width. */
@media (max-width: 809.98px) {
    .framer-pjFYw .framer-1xpry3c {
        max-width: none;
        align-items: flex-start;
    }
}

/* ---- Two-column "layers" table ([vi_comparison_table layout="layers"]) ------- */

.vi-layers {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 960px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.vi-layers__row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr);
}

.vi-layers__cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 72px;
    padding-block: 16px;
    padding-inline: 24px;
    box-sizing: border-box;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    margin-block-start: -1px;
    margin-inline-start: -1px;
    background-color: var(--token-bf57ee05-bd2b-4fb6-a79e-b3206953e026, rgba(1, 1, 1, 0.25));
    backdrop-filter: blur(10px);
}

.vi-layers__cell--us {
    background-color: var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
}

.vi-layers__cell .framer-text,
.vi-layers__cell .framer-text:not(:first-child) {
    margin: 0;
}

.vi-layers__criterion,
.vi-layers__label {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
}

.vi-layers__label {
    text-transform: uppercase;
}

.vi-layers__icon {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
}

.vi-layers .framer-gjr5j5-container {
    inline-size: 140px;
    block-size: 37px;
    position: relative;
}

@media (max-width: 809.98px) {
    .vi-layers__row {
        grid-template-columns: minmax(96px, 1fr) minmax(0, 2fr);
    }

    .vi-layers__cell {
        min-block-size: 60px;
        padding-inline: 14px;
    }

    .vi-layers .framer-gjr5j5-container {
        inline-size: 110px;
        block-size: 29px;
    }
}

/* ---- Sectors grid ([vi_testimonial_slider layout="grid"]) -------------------- */

.vi-sectors {
    display: flex;
    flex-direction: column;
    gap: 40px;
    inline-size: 100%;
}

.vi-sectors__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.vi-sectors__head .framer-text,
.vi-sectors__head .framer-text:not(:first-child) {
    margin: 0;
}

.vi-sectors__badge {
    position: relative;
}

.vi-sectors__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vi-sectors__tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 4 / 3;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    background: var(--token-7886ad80-b4fc-455a-bc36-fd9c2b0e226f, rgb(26, 26, 29));
}

.vi-sectors__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(1, 0, 4, 0.85) 0%, rgba(1, 0, 4, 0.15) 55%, rgba(1, 0, 4, 0.35) 100%);
}

.vi-sectors__tile img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.vi-sectors__tile:hover img {
    transform: scale(1.04);
}

.vi-sectors__number,
.vi-sectors__title {
    position: relative;
    z-index: 1;
    margin: 0;
}

.vi-sectors__number {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
}

.vi-sectors__title {
    --framer-text-color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    max-inline-size: 16ch;
}

/* Fixed-text stats ([vi_testimonial_stat text="RIYADH"]) sit a size down from the counters. */
.vi-stat-text {
    font-size: 0.72em;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
    .vi-sectors__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 809.98px) {
    .vi-sectors__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .vi-sectors__tile {
        aspect-ratio: 16 / 10;
        padding: 20px;
    }
}

/* ---- Empty listing ([vi_blog_list empty="…"]) -------------------------------- */

.vi-empty-state {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    padding-block: 40px 160px;
    padding-inline: 20px;
    box-sizing: border-box;
    text-align: center;
}

.vi-empty-state .framer-text,
.vi-empty-state .framer-text:not(:first-child) {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
    margin: 0;
}

/* ---- Card grid ([vi_card_grid]) --------------------------------------------- */

.vi-card-grid {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    padding-block: 100px;
    padding-inline: 20px;
    box-sizing: border-box;
    position: relative;
    scroll-margin-block-start: 80px;
}

.vi-card-grid__container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    inline-size: 100%;
    max-inline-size: 1240px;
}

.vi-card-grid__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-inline-size: 720px;
}

.vi-card-grid--center .vi-card-grid__head {
    align-items: center;
    align-self: center;
    text-align: center;
}

.vi-card-grid--center .vi-card-grid__head .framer-text {
    --framer-text-alignment: center;
}

.vi-card-grid__head .framer-text,
.vi-card-grid__head .framer-text:not(:first-child),
.vi-card-grid__card .framer-text,
.vi-card-grid__card .framer-text:not(:first-child) {
    margin: 0;
}

.vi-card-grid__badge {
    position: relative;
}

.vi-card-grid__text {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
}

.vi-card-grid__list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vi-card-grid__list--cols-1 {
    grid-template-columns: minmax(0, 1fr);
}
.vi-card-grid__list--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vi-card-grid__list--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vi-card-grid__list--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vi-card-grid__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    background: var(--token-7886ad80-b4fc-455a-bc36-fd9c2b0e226f, rgb(26, 26, 29));
}

.vi-card-grid__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 8px 8px 0;
    border-radius: 8px;
}

.vi-card-grid__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.vi-card-grid__card:hover .vi-card-grid__media img {
    transform: scale(1.04);
}

.vi-card-grid__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    flex: 1 0 auto;
}

.vi-card-grid__number {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
}

.vi-card-grid__copy {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
}

.vi-card-grid__lines {
    display: flex;
    flex-direction: column;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.vi-card-grid__lines li {
    --framer-text-color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    padding-block: 11px;
    border-block-start: 1px solid var(--token-84fdabbd-5baa-489b-95c1-2ea3eb52f594, rgba(255, 255, 255, 0.1));
    text-transform: uppercase;
}

@media (min-width: 810px) and (max-width: 1199.98px) {
    .vi-card-grid__list--cols-3,
    .vi-card-grid__list--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 809.98px) {
    .vi-card-grid {
        padding-block: 64px;
    }

    .vi-card-grid__container {
        gap: 32px;
    }

    .vi-card-grid__list--cols-2,
    .vi-card-grid__list--cols-3,
    .vi-card-grid__list--cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .vi-card-grid__body {
        padding: 20px;
    }
}

/* ---- Notes under a section's text (vi_note()) and the logo wall's text ------- */

.vi-note {
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
    margin: 16px 0 0;
    text-transform: uppercase;
}

.vi-note--center {
    --framer-text-alignment: center;
    align-self: stretch;
    inline-size: 100%;
    text-align: center;
}

/* Inline text link inside a section's text slot (vi_inline_html) */
.vi-link {
    color: var(--token-a3219389-8dfb-405c-9d8d-a88f85ea6820, rgb(255, 255, 255));
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 4px;
    white-space: nowrap;
}

.vi-link:hover {
    text-decoration-color: currentColor;
}

/*
 * Links in running text (article, project and legal bodies: vi_apply_text_presets() gives them the link preset)
 * are underlined like .vi-link, so they read as links without relying on colour (WCAG 1.4.1).
 */
p.framer-text a.framer-styles-preset-jv5lnj,
li.framer-text a.framer-styles-preset-jv5lnj {
    --framer-link-text-decoration: underline;
    --framer-link-text-decoration-color: rgba(255, 255, 255, 0.35);
    --framer-link-text-decoration-offset: 4px;
}

p.framer-text a.framer-styles-preset-jv5lnj:hover,
li.framer-text a.framer-styles-preset-jv5lnj:hover {
    --framer-link-text-decoration-color: currentColor;
}

.vi-logo-wall-text {
    --framer-text-alignment: center;
    --framer-text-color: var(--token-6bbb07ae-7b45-43ac-b1f1-7c56e99bc32f, rgb(168, 168, 168));
    max-inline-size: 640px;
    margin: 0 auto;
    text-align: center;
}

/*
 * Logo tiles (inc/shortcodes/logo-wall.php): a studio with projects on the site
 * links to them with the template's own hover (the tile lifts and settles) and
 * a green focus ring for the keyboard; other logos are shown on their own, as
 * the template's "No hover" tile, which neither lifts nor shows a pointer.
 */
a[data-vi-logo='link']:focus-visible {
    outline: 2px solid var(--vi-brand-green);
    outline-offset: -2px;
}

/* The footer's mark loop fades out before its edges, so its frame never shows as a square on the footer. */
.vi-footer-mark {
    -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
}

/* ---- Long badges wrap on phones (hero eyebrow) ------------------------------- */

@media (max-width: 809.98px) {
    .vi-badge-wrap {
        inline-size: auto !important;
        max-inline-size: 100%;
    }

    .vi-badge-wrap p {
        white-space: normal !important;
        line-height: 1.5 !important;
    }

    .vi-badge-wrap .framer-pbg3ex-container {
        flex: 1 1 auto !important;
        min-inline-size: 0;
    }
}

/* ---- Home shifts: chips stay inside the viewport -----------------------------
 * Each chip is centred on a point around the circle (translate -50%) and
 * site.js drifts it sideways while the section scrolls (chip 2 up to 55px
 * right, chip 3 70px left, chips 4 and 5 24px right). The template's two-word
 * labels never reached the edge; the VI lines are 3-4x longer. A chip may be
 * as wide as the viewport less the 16px gutters and its drift (440px at most;
 * from 810px up a side chip also keeps to twice its anchor's distance from the
 * edge, so it wraps beside its point instead of sliding toward the centre),
 * its text wraps inside that, and its centring translate is clamped so both
 * edges stay inside the gutters at either end of the drift. */

.framer-pjFYw .framer-ozhxva :is(.framer-101lx2u, .framer-jxkkny, .framer-33v74s, .framer-1d4c98r, .framer-g7p0vb) {
    --vi-chip-dl: 0px;
    --vi-chip-dr: 0px;
    inline-size: max-content;
    transform: translate(
        max(
            calc(16px + var(--vi-chip-dl) - var(--vi-chip-x)),
            min(-50%, calc(100vw - 16px - var(--vi-chip-dr) - var(--vi-chip-x) - 100%))
        ),
        -50%
    );
}

.framer-pjFYw :is(.framer-101lx2u, .framer-jxkkny, .framer-33v74s, .framer-1d4c98r, .framer-g7p0vb) .framer-1hor4dp {
    inline-size: max-content;
    max-inline-size: min(440px, var(--vi-chip-room, 440px), calc(100vw - 32px - var(--vi-chip-dl) - var(--vi-chip-dr)));
}

.framer-pjFYw :is(.framer-101lx2u, .framer-jxkkny, .framer-33v74s, .framer-1d4c98r, .framer-g7p0vb) .framer-18kdonu {
    flex: 1 1 auto;
    min-inline-size: 0;
    white-space: normal;
}

/* Anchors (share of the width) from 810px up: 50 / 17 / 84 / 37 / 83. */
.framer-pjFYw .framer-ozhxva .framer-101lx2u {
    --vi-chip-x: 50vw;
}

.framer-pjFYw .framer-ozhxva .framer-jxkkny {
    --vi-chip-x: 17vw;
    --vi-chip-dr: 55px;
}

.framer-pjFYw .framer-ozhxva .framer-33v74s {
    --vi-chip-x: 84vw;
    --vi-chip-dl: 70px;
}

.framer-pjFYw .framer-ozhxva .framer-1d4c98r {
    --vi-chip-x: 37vw;
    --vi-chip-dr: 24px;
}

.framer-pjFYw .framer-ozhxva .framer-g7p0vb {
    --vi-chip-x: 83vw;
    --vi-chip-dr: 24px;
}

@media (min-width: 810px) {
    .framer-pjFYw .framer-ozhxva :is(.framer-jxkkny, .framer-g7p0vb) {
        --vi-chip-room: calc(34vw - 32px);
    }

    .framer-pjFYw .framer-ozhxva .framer-33v74s {
        --vi-chip-room: calc(32vw - 32px);
    }
}

/* Phone anchors: 50 / 30 / 63 / 37 / 61. The chip text drops from the 18px
 * preset to 16px so every line fits in two rows on short phones. */
@media (max-width: 809.98px) {
    .framer-pjFYw .framer-ozhxva .framer-jxkkny {
        --vi-chip-x: 30vw;
    }

    .framer-pjFYw .framer-ozhxva .framer-33v74s {
        --vi-chip-x: 63vw;
    }

    .framer-pjFYw .framer-ozhxva .framer-g7p0vb {
        --vi-chip-x: 61vw;
    }

    .framer-pjFYw
        .framer-ozhxva
        :is(.framer-101lx2u, .framer-jxkkny, .framer-33v74s, .framer-1d4c98r, .framer-g7p0vb)
        .framer-18kdonu
        h5 {
        --framer-font-size: 16px;
    }
}

/* ---- Contact form consent line: its links read as links ----------------------
 * The template marks them by colour alone (white on #a8a8a8, 2.4:1), below
 * WCAG 1.4.1's 3:1 for colour-only links, so they carry an underline. */

.framer-1qrovog a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Project approach / results without an image ------------------------------
 * A reference project whose studio page offers one photo shows it once, in the
 * hero; these sections then drop the image column and keep a readable measure. */

.vi-no-media :is(.framer-x1vbds, .framer-iq49lj) {
    max-inline-size: 760px;
}

/* Turnstile widget (vi.js): out of the flow while it is hidden, so the form keeps its layout; in the flow once Cloudflare asks for a click. */
.vi-turnstile {
    position: absolute;
}

.vi-turnstile.is-visible {
    position: static;
    align-self: flex-start;
}

/* ---- Showreel player and back-to-top (inc/showreel.php) ----------------------- */

.vi-top {
    position: fixed;
    inset-block-end: max(16px, env(safe-area-inset-bottom));
    z-index: 9;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(16, 16, 19, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

.vi-top:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.vi-top:focus-visible,
.vi-btn:focus-visible,
.vi-reel__close:focus-visible {
    outline: 2px solid var(--vi-brand-green);
    outline-offset: 3px;
}

.vi-btn__play {
    flex: none;
    inline-size: 0;
    block-size: 0;
    border-block: 5px solid transparent;
    border-inline-start: 8px solid var(--vi-brand-green);
}

.vi-top {
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

.vi-top::before {
    content: '';
    inline-size: 10px;
    block-size: 10px;
    margin-block-start: 4px;
    border-block-start: 2px solid var(--vi-brand-green);
    border-inline-start: 2px solid var(--vi-brand-green);
    transform: rotate(45deg);
}

.vi-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.vi-reel {
    inline-size: min(1200px, 92vw);
    max-inline-size: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.vi-reel::backdrop {
    background: rgba(5, 5, 7, 0.88);
}

.vi-reel__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.vi-reel__video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.vi-reel__close {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(5, 5, 7, 0.6);
    cursor: pointer;
}

.vi-reel__close::before,
.vi-reel__close::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 16px;
    block-size: 2px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.vi-reel__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * Project hero: the details keep 40px from the intro on desktop too (the template's tablet and
 * phone gap). Its desktop column spreads them with space-between alone, which leaves nothing
 * once the photo frame takes the photo's own, often shorter, shape.
 */
.vi-project-hero__text {
    row-gap: 40px;
}

/* ---- Project video: Play Video over the hero photo ([vi_project_hero], vi.js) - */

.vi-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-block-size: 48px;
    padding-block: 0;
    padding-inline: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(5, 5, 7, 0.62);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font:
        500 15px/1 'Geist',
        sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.vi-play:hover {
    border-color: var(--vi-brand-green);
    background: rgba(5, 5, 7, 0.82);
}

.vi-play:focus-visible {
    outline: 2px solid var(--vi-brand-green);
    outline-offset: 3px;
}

/* A play mark points right in every writing direction, so its border is physical. */
.vi-play__icon {
    flex: none;
    inline-size: 0;
    block-size: 0;
    border-block: 7px solid transparent;
    border-left: 11px solid var(--vi-brand-green);
}

.vi-reel__frame iframe.vi-reel__video {
    border: 0;
}

/* ---- Home hero, top row: the client's placement (2026-10-25) ------------------ */

/* The three labels and the paragraph share one top line, 42px lower than the
   paragraph sat (the template centred the labels against it). Phones stack them. */
@media (min-width: 810px) {
    [data-framer-name='Hero'] .vi-hero__top {
        align-items: flex-start;
        padding-block-start: 42px;
    }

    /* The labels' first line sits 5px lower, level with the paragraph's text in the client's frame. */
    .vi-hero__top > [data-framer-name='Services'] {
        padding-block-start: 5px;
    }
}

/* ---- Home hero card as the showreel's trigger ([vi_hero_video card_showreel]) - */

/* The title's button stretches over the whole card, so the card is one target. */
.vi-hero-reel__trigger {
    all: unset;
    cursor: pointer;
}

.vi-hero-reel__trigger::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 12px;
}

.vi-hero-reel__trigger:focus-visible::after {
    outline: 2px solid var(--vi-brand-green);
    outline-offset: 3px;
}

/* With no role line or button, the title sits level with the middle of the poster. The
   wrappers between the button and the card are static, so its hit area spans the card. */
.vi-hero-reel > [data-framer-name='Content'] {
    justify-content: center;
}

.vi-hero-reel > [data-framer-name='Content'],
.vi-hero-reel [data-framer-name='Main text'],
.vi-hero-reel [data-framer-name='Name'] {
    position: static;
}

.vi-hero-reel__poster,
.vi-card-avatar {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.vi-hero-reel__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(5, 5, 7, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transform: translate(-50%, -50%);
    transition: border-color 0.2s ease;
}

/* A play mark points right in every writing direction, so its border is physical. */
.vi-hero-reel__play::before {
    content: '';
    margin-left: 3px;
    border-block: 6px solid transparent;
    border-left: 10px solid var(--vi-brand-green);
}

.vi-hero-reel:hover .vi-hero-reel__play {
    border-color: var(--vi-brand-green);
}

/* ---- Hero buttons ([vi_hero_image button_* / link_*]) ---------------------- */

.vi-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-block-start: 28px;
    transition: opacity 0.6s ease;
}

.vi-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-block-size: 44px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font:
        500 15px/1 'Geist',
        sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition:
        filter 0.2s ease,
        border-color 0.2s ease;
}

.vi-btn--primary {
    border-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%), var(--vi-brand-green);
    color: var(--vi-brand-green-ink);
}

.vi-btn--primary .vi-btn__play {
    border-inline-start-color: var(--vi-brand-green-ink);
}

.vi-btn--primary:hover {
    filter: brightness(1.06);
}

.vi-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.vi-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.vi-hero-note {
    margin-block-start: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .vi-top {
        transition: none;
    }
}

/*
 * Project images (hero, approach, results): the whole photograph, contained, over a blurred and darkened copy of
 * itself, in a frame that takes the photo's own shape (--vi-ratio, held between 4:5 and 16:9 by vi_img_ratio()).
 * The scroll parallax is slight: the moving box is 30px (hero) or 40px taller than the frame, matching the drift
 * in inc/families/single-project.json, and the photo enters at 1.05 instead of the template's 1.2 / 1.3 zoom.
 */
.framer-EGJBe .vi-ratio-frame {
    aspect-ratio: var(--vi-ratio, 1);
}

.framer-EGJBe .framer-iawd9q {
    inset: -30px 0 0;
}

/* The hero is on screen at rest (drift 0): the photo sits exactly in the frame there and slides down as the page scrolls. */
.framer-EGJBe .framer-iawd9q .vi-fit-frame > img {
    inset-block-start: 15px;
}

.framer-EGJBe .framer-19qg7lx,
.framer-EGJBe .framer-682g0y {
    inset: -40px 0 0;
}

.vi-fit-frame {
    overflow: hidden;
    background: #0b0b0d;
}

.vi-fit-frame::before {
    content: '';
    position: absolute;
    inset: -32px;
    background: var(--vi-fill) center / cover no-repeat;
    filter: blur(28px) brightness(0.42) saturate(1.1);
}

.vi-fit-frame > img {
    position: relative;
}