.vp-projects-page .vp-about-page__scrim { background: rgb(0 0 0 / 52%); }
.vp-projects-page .vp-about-page__background picture { display: block; width: 100%; height: 100%; }

@media (min-width: 53rem) {
	.vp-projects-page .vp-about-page__hero { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}

.vp-projects-intro { width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(5rem, 9vw, 9rem) calc(2.35vw + 1rem); background: #fff; color: var(--vp-color-grey-900); }
.vp-projects-intro__inner { display: grid; grid-template-columns: minmax(14rem, .75fr) minmax(28rem, 1.25fr); gap: clamp(2rem, 7vw, 8rem); max-width: 100rem; margin: 0 auto; }
.vp-projects-intro__eyebrow { display: flex; align-items: center; gap: .75rem; margin: .4rem 0 0; color: var(--vp-color-red); font: 400 1.25rem/1.2 var(--vp-font-body); }
.vp-projects-intro__eyebrow span { width: .5rem; height: .5rem; flex: 0 0 .5rem; border-radius: 50%; background: currentColor; }
.vp-projects-intro__content { text-align: right; }
.vp-projects-intro h2 { max-width: 55rem; margin: 0 0 2rem auto; font: 400 3.5rem/1.08 var(--vp-font-heading); letter-spacing: -.05em; }
.vp-projects-intro__content p { max-width: 42rem; margin: 0 0 0 auto; color: #555; font: 400 1rem/1.5 var(--vp-font-body); }
@media (max-width: 52rem) { .vp-projects-intro { padding: 5rem 1.25rem; } .vp-projects-intro__inner { grid-template-columns: 1fr; gap: 3rem; } .vp-projects-intro__eyebrow { align-self: start; margin: 0; font-size: 1rem; } .vp-projects-intro__content { text-align: right; } .vp-projects-intro h2 { max-width: 20rem; margin: 0 0 1rem auto; font-size: 2.375rem; line-height: 1.05; } .vp-projects-intro__content p { max-width: 20rem; margin: 0 0 0 auto; font-size: .875rem; line-height: 1.55; } .vp-projects-intro__eyebrow span { width: .4rem; height: .4rem; flex-basis: .4rem; } }

.vp-projects-showcase { width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(4rem, 8vw, 8rem) calc(2.35vw + 1rem) clamp(4rem, 7vw, 7rem); background: #fff; color: var(--vp-color-grey-900); }
.vp-projects-showcase__layer { position: sticky; top: 7vh; z-index: var(--vp-project-index); max-width: 100rem; margin: 0 auto clamp(8rem, 16vh, 14rem); background: #fff; }
.vp-projects-showcase__layer:last-child { margin-bottom: 0; }
.vp-projects-showcase__layer--title { display: flex; height: 600px; align-items: center; padding: 2rem; }
.vp-projects-showcase__layer--title h2 { margin: 0; color: #c9c9c9; font: 400 9.375rem/.95 var(--vp-font-heading); letter-spacing: -.06em; }
.vp-projects-showcase__layer--end { justify-content: flex-end; text-align: right; }
.vp-projects-showcase__layer--start { justify-content: flex-start; text-align: left; }
.vp-projects-showcase__layer--center { justify-content: center; text-align: center; }
.vp-projects-showcase__card { top: 12vh; display: grid; grid-template-columns: minmax(16rem, .78fr) minmax(20rem, 1.22fr); gap: clamp(1.5rem, 3vw, 3rem); height: 600px; padding: 1.5rem; box-sizing: border-box; }
.vp-projects-showcase__card figure { align-self: center; height: 400px; margin: 0; overflow: hidden; border-radius: .5rem; background: #eee; }
.vp-projects-showcase__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-projects-showcase__card-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(.5rem, 2vw, 2rem) clamp(.25rem, 1vw, 1.5rem); }
.vp-projects-showcase__card h3 { margin: 0 0 1.25rem; font: 500 clamp(1.5rem, 2.15vw, 2.25rem)/1.12 var(--vp-font-heading); letter-spacing: -.035em; }
.vp-projects-showcase__card p { max-width: 44rem; margin: 0; color: #555; font: 400 1rem/1.55 var(--vp-font-body); }
.vp-projects-showcase__card small { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: #777; font: 400 .75rem/1.2 var(--vp-font-body); }
.vp-projects-showcase__card small img { width: 1rem; height: 1rem; object-fit: contain; }
@media (max-width: 52rem) { .vp-projects-showcase { padding: 3rem 1.25rem 4rem; } .vp-projects-showcase__layer { top: 4vh; width: 100%; box-sizing: border-box; margin-bottom: 5rem; } .vp-projects-showcase__layer--title { height: 34vh; min-height: 0; margin-bottom: 0; padding: 1.5rem; justify-content: flex-start; } .vp-projects-showcase__layer--title h2 { font-size: clamp(2.6rem, 11vw, 4.5rem); text-align: left; } .vp-projects-showcase__card { top: 8vh; grid-template-columns: 1fr; gap: 1.25rem; height: auto; min-height: 0; padding: 1rem; } .vp-projects-showcase__card figure { height: 14rem; } .vp-projects-showcase__card-content { padding: .5rem; } .vp-projects-showcase__card h3 { margin-bottom: .75rem; font-size: 1.5rem; } .vp-projects-showcase__card small { margin-top: 1rem; } }

.vp-projects-stats { width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(5rem, 9vw, 9rem) calc(2.35vw + 1rem); background: #fff; color: var(--vp-color-grey-900); }
.vp-projects-stats__inner { max-width: 100rem; }
.vp-projects-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 5rem); }
.vp-projects-stats__item { text-align: center; }
.vp-projects-stats__item strong { display: block; color: var(--vp-color-red); font: 400 clamp(4rem, 8vw, 6.25rem)/.95 var(--vp-font-heading); letter-spacing: -.06em; }
.vp-projects-stats__item span { display: block; margin-top: 1rem; color: #555; font: 500 1rem/1.35 var(--vp-font-body); }
.vp-projects-stats__inner > p { max-width: 78rem; margin: clamp(4rem, 7vw, 7rem) auto 0; color: var(--vp-color-grey-900); text-align: center; font: 400 clamp(1.75rem, 3.1vw, 3rem)/1.18 var(--vp-font-heading); letter-spacing: -.035em; }
@media (max-width: 52rem) { .vp-projects-stats { padding: 5rem 1.25rem; } .vp-projects-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.25rem; } .vp-projects-stats__item strong { font-size: clamp(3.5rem, 15vw, 5rem); } .vp-projects-stats__item span { margin-top: .75rem; font-size: .9375rem; } .vp-projects-stats__inner > p { margin-top: 4rem; font-size: clamp(1.75rem, 8vw, 2.5rem); } }