<section class="vbc-section" aria-labelledby="vbc-heading">

<!--
CONTENT

Header
Heading
Intro

Team
Card
Photo
Role
Name
-->

<style>
.vbc-section,
.vbc-section * {
box-sizing: border-box;
}

.vbc-section {
--vb-page: #f1f1f3;
--vb-panel: #ffffff;
--vb-ink: #26272b;
--vb-muted: #5f6168;
--vb-accent: #635bff;
--vb-card-bg: #e8e8eb;
--vb-open-grow: 5.2;
--vb-closed-grow: 1.35;

--vb-grid-width: 1200px;
--vb-content-width: 1160px;
--vb-grid-gutter: 20px;

width: 100%;
padding: 40px 0;

background: #ffffff;

font-family: Arial, Helvetica, sans-serif;
}

.vbc-panel {
width:
calc(
100% -
var(--vb-grid-gutter) *
2
);

max-width:
var(--vb-content-width);

margin: 0 auto;
padding: 0;

border-radius: 0;

background: transparent;
}

.vbc-header {
margin-bottom:
clamp(24px,3vw,40px);
}

.vbc-heading {
max-width: 720px;

margin: 0 0 12px;

font-size:
clamp(32px,4vw,46px);

font-weight: 700;
line-height: 1.08;
letter-spacing: -0.025em;

color: var(--vb-ink);

text-wrap: balance;

cursor: text;
user-select: text;
-webkit-user-select: text;
}

.vbc-intro {
max-width: 440px;

margin: 0;

font-size: 15px;
font-weight: 400;
line-height: 1.5;

color: var(--vb-muted);

cursor: text;
user-select: text;
-webkit-user-select: text;
}

.vbc-row {
display: flex;
align-items: stretch;

gap: 16px;

width: 100%;
height: min(62vh,500px);
}

.vbc-card {
position: relative;

flex:
var(--vb-closed-grow)
1
0;

min-width: 44px;
min-height: 0;

overflow: hidden;

border-radius: 14px;

background: var(--vb-card-bg);

cursor: default;

transition:
flex-grow
1400ms
cubic-bezier(0.16,0.84,0.24,1);

isolation: isolate;
}

.vbc-card.vbc-card--open {
flex-grow:
var(--vb-open-grow);
}

.vbc-card__photo {
position: absolute;

inset: 0;

z-index: 0;

display: block;

width: 100%;
height: 100%;

object-fit: cover;
object-position: 50% 30%;

filter:
grayscale(1)
contrast(1.04);

transform:
scale(1.04);

transition:
transform
1650ms
cubic-bezier(0.16,0.84,0.24,1),
filter
1250ms
ease
120ms;

cursor: pointer;

user-select: none;
-webkit-user-select: none;
}

.vbc-card.vbc-card--open
.vbc-card__photo {
filter:
grayscale(0)
contrast(1);

transform:
scale(1);
}

.vbc-card__label {
position: absolute;

z-index: 2;

top: 22px;
left: 22px;

display: flex;
flex-direction: column;
align-items: flex-start;

width: max-content;
max-width:
calc(100% - 44px);

padding:
14px 18px 15px;

border-radius: 12px;

background: #ffffff;

box-shadow:
0 1px 2px rgba(20,22,30,0.06),
0 10px 28px rgba(20,22,30,0.14);

opacity: 0;

transform:
translateY(14px)
scale(0.965);

transform-origin: 0 0;

transition:
opacity
520ms
ease,
transform
620ms
cubic-bezier(0.16,0.84,0.24,1);

pointer-events: none;
}

.vbc-card.vbc-card--open
.vbc-card__label {
opacity: 1;

transform: none;

transition:
opacity
820ms
ease
330ms,
transform
900ms
cubic-bezier(0.16,0.84,0.24,1)
290ms;

pointer-events: auto;
}

.vbc-card__role {
display: block;

margin: 0 0 5px;

font-size: 11px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;

color: var(--vb-accent);

cursor: text;
user-select: text;
-webkit-user-select: text;
}

.vbc-card__name {
display: block;

margin: 0;

font-size:
clamp(19px,1.8vw,24px);

font-weight: 400;
line-height: 1.12;
letter-spacing: -0.015em;

color: var(--vb-ink);

cursor: text;
user-select: text;
-webkit-user-select: text;
}

.vbc-section.vbc-single
.vbc-card {
flex-grow: 1;
}

@media (min-width: 768px) and (max-width: 1199px) {
.vbc-row {
gap: 10px;
height: min(56vh,420px);
}

.vbc-card {
min-width: 38px;
border-radius: 12px;
}

.vbc-card__label {
top: 16px;
left: 16px;

max-width:
calc(100% - 32px);

padding:
12px 15px 13px;
}
}

@media (max-width: 767px) {
.vbc-section {
padding: 24px 0;
}

.vbc-panel {
width:
calc(
100% -
var(--vb-grid-gutter) *
2
);

max-width:
var(--vb-content-width);

padding: 0;

border-radius: 0;
}

.vbc-row {
display: flex;
flex-direction: column;

gap: 8px;

height: auto;
}

.vbc-card {
flex: none;

width: 100%;
height: 82px;
min-width: 0;
min-height: 82px;

border-radius: 12px;

transition:
height
1250ms
cubic-bezier(0.16,0.84,0.24,1);
}

.vbc-card.vbc-card--open {
height:
min(64vh,460px);
}

.vbc-card__photo {
object-position: 50% 30%;
}

.vbc-card__label {
top: 14px;
left: 14px;

max-width:
calc(100% - 28px);

padding:
11px 14px 12px;
}

.vbc-card__role,
.vbc-card__name {
white-space: normal;
}
}

@media (prefers-reduced-motion: reduce) {
.vbc-card,
.vbc-card__photo,
.vbc-card__label,
.vbc-card.vbc-card--open
.vbc-card__label {
transition:
none !important;
}
}
</style>

<div class="vbc-panel">

<header class="vbc-header">
<h2 class="vbc-heading" id="vbc-heading" data-tilda-edit="y">The people behind the work</h2>

<p class="vbc-intro" data-tilda-edit="y">Five minds shaping the direction, craft and culture of everything we build.</p>
</header>

<div class="vbc-row" role="list">

<article class="vbc-card" role="listitem">
<img class="vbc-card__photo" data-tilda-img="y" src="https://static.tildacdn.com/tild3637-6261-4063-a432-623130353930/Team_1.jpg" alt="Sarah Chen, Chief Operating Officer" draggable="false">

<div class="vbc-card__label">
<p class="vbc-card__role" data-tilda-edit="y">Chief Operating Officer</p>
<p class="vbc-card__name" data-tilda-edit="y">Sarah Chen</p>
</div>
</article>

<article class="vbc-card" role="listitem">
<img class="vbc-card__photo" data-tilda-img="y" src="https://static.tildacdn.com/tild3336-6264-4834-a664-303966363366/Team_4.jpg" alt="Marcus Reid, Chief Product Officer" draggable="false">

<div class="vbc-card__label">
<p class="vbc-card__role" data-tilda-edit="y">Chief Product Officer</p>
<p class="vbc-card__name" data-tilda-edit="y">Marcus Reid</p>
</div>
</article>

<article class="vbc-card vbc-card--open" role="listitem" data-vb-lead="">
<img class="vbc-card__photo" data-tilda-img="y" src="https://static.tildacdn.com/tild3535-3338-4237-a665-363563666562/Team_25.jpg" alt="Daniel Frost, Chief Executive Officer" draggable="false">

<div class="vbc-card__label">
<p class="vbc-card__role" data-tilda-edit="y">Chief Executive Officer</p>
<p class="vbc-card__name" data-tilda-edit="y">Daniel Frost</p>
</div>
</article>

<article class="vbc-card" role="listitem">
<img class="vbc-card__photo" data-tilda-img="y" src="https://static.tildacdn.com/tild3064-3361-4161-b834-373661383030/Team_27.jpg" alt="Priya Sharma, Chief People Officer" draggable="false">

<div class="vbc-card__label">
<p class="vbc-card__role" data-tilda-edit="y">Chief People Officer</p>
<p class="vbc-card__name" data-tilda-edit="y">Priya Sharma</p>
</div>
</article>

<article class="vbc-card" role="listitem">
<img class="vbc-card__photo" data-tilda-img="y" src="https://static.tildacdn.com/tild6533-6364-4139-b539-626136666633/Team_28.jpg" alt="James Okafor, Chief Financial Officer" draggable="false">

<div class="vbc-card__label">
<p class="vbc-card__role" data-tilda-edit="y">Chief Financial Officer</p>
<p class="vbc-card__name" data-tilda-edit="y">James Okafor</p>
</div>
</article>

</div>

</div>

<script>
(function () {
'use strict';

var script =
document.currentScript;

var section =
script &&
script.closest
? script.closest('.vbc-section')
: null;

if (
!section ||
section.classList.contains('vbc-ready')
) {
return;
}

var row =
section.querySelector('.vbc-row');

if (!row) {
return;
}

var mobile =
window.matchMedia('(max-width: 767px)');

var editorMode = false;

try {
editorMode =
window.self !==
window.top;
}
catch (error) {
editorMode = true;
}

var cards = [];
var activeCard = null;
var leadCard = null;
var mutationTimer = null;
var initialized = false;

function refreshCards() {
cards =
Array.prototype.slice.call(
row.querySelectorAll('.vbc-card')
);

section.classList.toggle(
'vbc-single',
cards.length <= 1
);

if (
cards.length === 0
) {
activeCard = null;
leadCard = null;

return;
}

leadCard =
cards.find(
function (card) {
return card.hasAttribute('data-vb-lead');
}
) ||
cards[
Math.floor(
cards.length /
2
)
];

if (!initialized) {
activeCard =
mobile.matches
? cards[0]
: (
cards.find(
function (card) {
return card.classList.contains('vbc-card--open');
}
) ||
leadCard
);

initialized = true;
}
else if (
!activeCard ||
cards.indexOf(activeCard) < 0
) {
activeCard =
mobile.matches
? cards[0]
: leadCard;
}

openCard(activeCard);
}

function openCard(card) {
if (
!card ||
cards.indexOf(card) < 0
) {
return;
}

activeCard = card;

cards.forEach(
function (item) {
var isOpen =
item === card;

item.classList.toggle(
'vbc-card--open',
isOpen
);

item.setAttribute(
'aria-expanded',
isOpen
? 'true'
: 'false'
);
}
);
}

function getCard(target) {
var card =
target.closest
? target.closest('.vbc-card')
: null;

if (
!card ||
!row.contains(card)
) {
return null;
}

return card;
}

row.addEventListener(
'mouseover',
function (event) {
if (mobile.matches) {
return;
}

var card =
getCard(event.target);

if (!card) {
return;
}

var related =
event.relatedTarget;

if (
related &&
card.contains(related)
) {
return;
}

openCard(card);
}
);

row.addEventListener(
'click',
function (event) {
if (!mobile.matches) {
return;
}

var card =
getCard(event.target);

if (!card) {
return;
}

if (
editorMode &&
event.target.closest(
'[data-tilda-edit="y"],[data-tilda-img="y"]'
)
) {
return;
}

openCard(card);
}
);

if (
mobile.addEventListener
) {
mobile.addEventListener(
'change',
function (event) {
if (
cards.length === 0
) {
refreshCards();

return;
}

if (event.matches) {
openCard(cards[0]);
}
else {
openCard(leadCard || cards[0]);
}
}
);
}

if (
'MutationObserver' in window
) {
var observer =
new MutationObserver(
function (records) {
var structuralChange =
records.some(
function (record) {
return (
record.type === 'childList'
);
}
);

if (!structuralChange) {
return;
}

clearTimeout(
mutationTimer
);

mutationTimer =
setTimeout(
refreshCards,
40
);
}
);

observer.observe(
row,
{
childList: true
}
);
}

section.classList.add(
'vbc-ready'
);

refreshCards();

})();
</script>

</section>