/**
 * Single project.
 */

.bv-project-single,
.bv-project-article {
	background: var(--bv-bg);
}

.bv-project-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	border-bottom: var(--bv-border-width) solid var(--bv-border);
}

.bv-project-hero::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 80% 32%, color-mix(in srgb, var(--bv-primary) 17%, transparent), transparent 32rem),
		linear-gradient(var(--bv-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--bv-border) 1px, transparent 1px);
	background-size: auto, 4rem 4rem, 4rem 4rem;
	content: "";
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent 92%);
	opacity: 0.34;
	pointer-events: none;
}

.bv-project-hero__inner {
	padding-block: var(--bv-section-space-compact);
}

.bv-project-hero__content {
	max-width: 66rem;
}

.bv-project-hero__eyebrow span {
	color: var(--bv-text-muted);
}

.bv-project-hero__title {
	max-width: 16ch;
	margin-bottom: var(--bv-space-6);
	font-size: var(--bv-type-display-lg);
	overflow-wrap: anywhere;
}

.bv-project-hero__summary {
	max-width: 48rem;
	color: var(--bv-text-secondary);
	font-size: var(--bv-type-body-lg);
}

.bv-project-hero__live-link {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: var(--bv-space-2);
	margin-top: var(--bv-space-8);
	font-weight: var(--bv-font-weight-medium);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
}

.bv-project-showcase {
	padding-block: clamp(var(--bv-space-8), 6vw, var(--bv-space-16));
	background: var(--bv-bg);
}

.bv-project-showcase__media {
	margin: 0;
	overflow: hidden;
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-large);
	background: var(--bv-surface);
	aspect-ratio: 16 / 10;
}

.bv-project-showcase__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.bv-project-facts {
	border-block: var(--bv-border-width) solid var(--bv-border);
	background: var(--bv-surface);
}

.bv-project-facts__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bv-space-8) var(--bv-space-4);
	margin: 0;
}

.bv-project-fact {
	min-width: 0;
}

.bv-project-fact dt,
.bv-project-stack__title {
	margin-bottom: var(--bv-space-2);
	color: var(--bv-text-muted);
	font-family: var(--bv-font-mono);
	font-size: var(--bv-type-label);
	font-weight: var(--bv-font-weight-medium);
	letter-spacing: var(--bv-tracking-label);
	text-transform: uppercase;
}

.bv-project-fact dd {
	margin: 0;
	color: var(--bv-text);
	font-size: var(--bv-type-body-lg);
	overflow-wrap: anywhere;
}

.bv-project-facts__client-logo {
	display: grid;
	width: fit-content;
	min-width: 8rem;
	min-height: 4.5rem;
	margin-top: var(--bv-space-8);
	padding: var(--bv-space-3) var(--bv-space-4);
	place-items: center;
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-default);
	background: var(--bv-surface-elevated);
}

.bv-project-facts__client-logo img {
	width: auto;
	max-width: 10rem;
	height: auto;
	max-height: 3rem;
	object-fit: contain;
}

.bv-project-stack {
	margin-top: var(--bv-space-12);
	padding-top: var(--bv-space-8);
	border-top: var(--bv-border-width) solid var(--bv-border);
}

.bv-project-stack__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bv-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bv-project-stack__list a,
.bv-project-stack__list span {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	padding: var(--bv-space-2) var(--bv-space-3);
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-small);
	background: var(--bv-bg);
	color: var(--bv-text-secondary);
	font-family: var(--bv-font-mono);
	font-size: var(--bv-type-body-sm);
	text-decoration: none;
}

.bv-project-content {
	background: var(--bv-bg);
}

.bv-project-content__inner {
	font-size: var(--bv-type-body-lg);
}

.bv-project-content__inner > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--bv-reading-max);
	margin-inline: auto;
}

.bv-project-content__inner > * + * {
	margin-top: var(--bv-space-6);
}

.bv-project-content__inner :where(h2, h3, h4) {
	margin-top: var(--bv-space-12);
}

.bv-project-content__inner :where(p, li) {
	color: var(--bv-text-secondary);
}

.bv-project-content__inner .alignwide {
	width: 100%;
}

.bv-project-content__inner .alignfull {
	width: min(100vw, var(--bv-container-max));
	max-width: none;
	margin-inline: 50%;
	transform: translateX(-50%);
}

.bv-project-services,
.bv-project-solutions {
	border-top: var(--bv-border-width) solid var(--bv-border);
	background: var(--bv-surface);
}

.bv-project-solutions {
	background: var(--bv-bg);
}

.bv-project-section-heading {
	max-width: 48rem;
	margin-bottom: var(--bv-space-12);
}

.bv-project-section-heading h2,
.bv-project-final-cta h2 {
	font-size: var(--bv-type-h2);
}

.bv-project-services__grid,
.bv-project-solutions__grid {
	display: grid;
	gap: var(--bv-space-4);
}

.bv-project-service,
.bv-project-solution {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--bv-space-6);
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-default);
	background: var(--bv-surface-elevated);
}

.bv-project-service h3,
.bv-project-solution h3 {
	margin-bottom: var(--bv-space-4);
	font-size: var(--bv-type-h4);
}

.bv-project-service h3 a,
.bv-project-solution h3 a {
	color: var(--bv-text);
	text-decoration: none;
}

.bv-project-service p,
.bv-project-solution p {
	margin-bottom: var(--bv-space-6);
	color: var(--bv-text-secondary);
}

.bv-project-service__link {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: var(--bv-space-2);
	margin-top: auto;
	font-weight: var(--bv-font-weight-medium);
}

.bv-project-solution time {
	margin-bottom: var(--bv-space-4);
	color: var(--bv-text-muted);
	font-family: var(--bv-font-mono);
	font-size: var(--bv-type-label);
}

.bv-project-navigation {
	border-top: var(--bv-border-width) solid var(--bv-border);
	background: var(--bv-bg);
}

.bv-project-navigation__inner {
	display: grid;
	gap: var(--bv-space-4);
}

.bv-project-navigation__item {
	display: flex;
	min-width: 0;
	min-height: 7.5rem;
	flex-direction: column;
	justify-content: center;
	padding: var(--bv-space-6);
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-default);
	background: var(--bv-surface);
	text-decoration: none;
}

.bv-project-navigation__item span {
	margin-bottom: var(--bv-space-3);
	color: var(--bv-text-muted);
	font-family: var(--bv-font-mono);
	font-size: var(--bv-type-label);
	letter-spacing: var(--bv-tracking-label);
	text-transform: uppercase;
}

.bv-project-navigation__item strong {
	color: var(--bv-text);
	font-size: var(--bv-type-h4);
	overflow-wrap: anywhere;
}

.bv-project-navigation__item--next {
	text-align: right;
}

.bv-project-final-cta {
	border-block: var(--bv-border-width) solid var(--bv-border);
	background: var(--bv-surface-elevated);
}

.bv-project-final-cta__inner {
	display: grid;
	gap: var(--bv-space-8);
}

.bv-project-final-cta h2 {
	max-width: 24ch;
	margin-bottom: var(--bv-space-6);
}

.bv-project-final-cta p:not(.bv-eyebrow) {
	max-width: 40rem;
	color: var(--bv-text-secondary);
	font-size: var(--bv-type-body-lg);
}

.bv-project-final-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--bv-space-3);
}

.bv-project-final-cta__actions .bv-button {
	width: 100%;
}

@media (min-width: 36rem) {
	.bv-project-final-cta__actions {
		flex-direction: row;
		align-items: center;
	}

	.bv-project-final-cta__actions .bv-button {
		width: auto;
	}
}

@media (min-width: 48rem) {
	.bv-project-facts__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bv-project-services__grid,
	.bv-project-solutions__grid,
	.bv-project-navigation__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bv-project-navigation__item--next:last-child {
		grid-column: 2;
	}
}

@media (min-width: 60rem) {
	.bv-project-final-cta__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}
}

@media (hover: hover) and (pointer: fine) {
	.bv-project-hero__live-link:hover {
		text-decoration-color: currentColor;
	}

	.bv-project-stack__list a:hover {
		border-color: var(--bv-accent);
		color: var(--bv-text);
	}

	.bv-project-service:hover,
	.bv-project-solution:hover,
	.bv-project-navigation__item:hover {
		border-color: color-mix(in srgb, var(--bv-accent) 42%, var(--bv-border));
	}

	.bv-project-service h3 a:hover,
	.bv-project-solution h3 a:hover {
		color: var(--bv-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bv-project-stack__list a,
	.bv-project-service,
	.bv-project-solution,
	.bv-project-navigation__item {
		transition: none;
	}
}
/* Reusable case-study content system. */
.bv-case-study__content .bv-project-content__inner {
	font-size: var(--bv-type-body);
}

.bv-case-study__content .bv-project-content__inner > .bv-case-section {
	width: 100%;
	max-width: 68.75rem;
}

.bv-case-section {
	padding-top: var(--bv-space-8);
	border-top: var(--bv-border-width) solid var(--bv-border);
}

.bv-case-section + .bv-case-section {
	margin-top: var(--bv-section-space-compact);
}

.bv-case-section > * + * {
	margin-top: var(--bv-space-6);
}

.bv-case-number {
	margin-bottom: var(--bv-space-3);
	color: var(--bv-accent);
	font-family: var(--bv-font-mono);
	font-size: var(--bv-type-label);
	font-weight: var(--bv-font-weight-medium);
	letter-spacing: var(--bv-tracking-label);
	text-transform: uppercase;
}

.bv-case-section > h2 {
	max-width: 24ch;
	margin-top: 0;
	font-size: clamp(2rem, 3.5vw, 3.25rem);
	line-height: 1.08;
}

.bv-case-section > :where(p:not(.bv-case-number), ul, ol) {
	max-width: 72ch;
}

.bv-case-lead {
	max-width: 70ch;
	color: var(--bv-text);
	font-size: clamp(1.1875rem, 1.55vw, 1.375rem);
	font-weight: var(--bv-font-weight-medium);
	line-height: 1.55;
}

.bv-case-grid {
	display: grid;
	gap: var(--bv-space-4);
}

.bv-case-grid > * {
	min-width: 0;
}

.bv-case-grid h3 {
	margin-top: 0;
	font-size: var(--bv-type-h4);
}

.bv-case-note {
	padding: var(--bv-space-6);
	border: var(--bv-border-width) solid var(--bv-border);
	border-left: 3px solid var(--bv-accent);
	border-radius: var(--bv-radius-default);
	background: var(--bv-surface);
}

.bv-case-note > *:last-child {
	margin-bottom: 0;
}

.bv-case-flow {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: stretch;
	gap: var(--bv-space-3);
	margin-block: var(--bv-space-8);
	padding: var(--bv-space-4);
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-default);
	background: var(--bv-surface);
}

.bv-case-flow .bv-case-flow__item,
.bv-case-flow .bv-case-flow__arrow {
	margin: 0;
}

.bv-case-flow__item {
	display: grid;
	min-width: 0;
	min-height: 3.5rem;
	padding: var(--bv-space-3);
	place-items: center;
	border: var(--bv-border-width) solid var(--bv-border);
	border-radius: var(--bv-radius-small);
	background: var(--bv-surface-elevated);
	color: var(--bv-text);
	font-family: var(--bv-font-mono);
	font-size: var(--bv-type-body-sm);
	font-weight: var(--bv-font-weight-medium);
	letter-spacing: 0.04em;
	text-align: center;
	overflow-wrap: anywhere;
}

.bv-case-flow__arrow {
	align-self: center;
	color: var(--bv-text-muted);
	font-family: var(--bv-font-mono);
	line-height: 1;
}

.bv-case-study :where(code, pre) {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

@media (min-width: 64rem) {
	.bv-case-section {
		display: grid;
		grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.55fr);
		column-gap: clamp(var(--bv-space-8), 5vw, var(--bv-space-16));
		align-items: start;
		padding-top: var(--bv-space-12);
	}

	.bv-case-section > * {
		min-width: 0;
		margin-top: 0;
	}

	.bv-case-section > .bv-case-number,
	.bv-case-section > h2 {
		grid-column: 1;
	}

	.bv-case-section > .bv-case-number {
		grid-row: 1;
		margin-bottom: var(--bv-space-4);
	}

	.bv-case-section > h2 {
		grid-row: 2 / span 20;
		max-width: 16ch;
	}

	.bv-case-section > :not(.bv-case-number):not(h2):not(.bv-case-flow):not(.bv-case-grid):not(.bv-case-note) {
		grid-column: 2;
	}

	.bv-case-section > :where(p, ul, ol) + :where(p, ul, ol) {
		margin-top: var(--bv-space-6);
	}

	.bv-case-section > :where(.bv-case-flow, .bv-case-grid, .bv-case-note) {
		grid-column: 1 / -1;
		margin-top: var(--bv-space-12);
	}

	.bv-case-flow {
		gap: var(--bv-space-4);
		padding: var(--bv-space-6);
	}

	.bv-case-flow__item {
		min-height: 5rem;
		padding: var(--bv-space-4);
	}
}
@media (min-width: 48rem) {
	.bv-case-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bv-case-flow {
		flex-direction: row;
		align-items: center;
	}

	.bv-case-flow__item {
		flex: 1 1 0;
	}

	.bv-case-flow__arrow {
		transform: rotate(-90deg);
	}
}