/**
 * References page — reference ReferencesPage.jsx parity.
 */

body.duende-site.duende-references-page {
	background:
		radial-gradient(1200px 600px at 20% 0%, rgba(230, 57, 70, 0.08), transparent 60%),
		radial-gradient(900px 600px at 90% 20%, rgba(10, 14, 39, 1), transparent 70%),
		#050714 !important;
	color: #fff;
}

.duende-references-page {
	position: relative;
	background: transparent;
	color: #fff;
}

/* PageHero */
.duende-references-page .duende-page-hero {
	position: relative;
	overflow: hidden;
	padding: 10rem 0 4rem;
}

@media (min-width: 768px) {
	.duende-references-page .duende-page-hero {
		padding: 12rem 0 6rem;
	}
}

.duende-references-page .duende-page-hero__glow {
	pointer-events: none;
	position: absolute;
	inset: 0;
}

.duende-references-page .duende-page-hero__glow::before {
	content: "";
	position: absolute;
	top: -10rem;
	left: -10rem;
	width: 36rem;
	height: 36rem;
	border-radius: 9999px;
	background: rgba(230, 57, 70, 0.12);
	filter: blur(140px);
}

.duende-references-page .duende-page-hero__inner {
	position: relative;
	width: min(90rem, 100%);
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 768px) {
	.duende-references-page .duende-page-hero__inner {
		padding: 0 3rem;
	}
}

.duende-references-page .duende-page-hero__kicker {
	margin: 0 0 2rem;
	color: #fff;
	font-family: var(--duende-body);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}

.duende-references-page .duende-page-hero__title {
	margin: 0;
	max-width: 18ch;
	color: #fff;
	font-family: var(--duende-display);
	font-size: 3rem;
	font-weight: 900;
	font-optical-sizing: auto;
	font-variation-settings: "opsz" 96;
	line-height: 0.92;
	letter-spacing: -0.03em;
}

@media (min-width: 768px) {
	.duende-references-page .duende-page-hero__title {
		font-size: 4.5rem;
	}
}

@media (min-width: 1024px) {
	.duende-references-page .duende-page-hero__title {
		font-size: 7vw;
	}
}

.duende-references-page .duende-page-hero__lead {
	margin: 2.5rem 0 0;
	max-width: 42rem;
	color: rgba(255, 255, 255, 0.65);
	font-family: var(--duende-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.625;
}

@media (min-width: 768px) {
	.duende-references-page .duende-page-hero__lead {
		font-size: 1.125rem;
	}
}

/* Logo grid */
.duende-references-grid-section {
	padding: 0 0 6rem;
}

@media (min-width: 768px) {
	.duende-references-grid-section {
		padding-bottom: 8rem;
	}
}

.duende-references-grid-section__inner {
	width: min(90rem, 100%);
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 768px) {
	.duende-references-grid-section__inner {
		padding: 0 3rem;
	}
}