/*--------------------------------------------------------------
Fullpage front template: sections, snap scrolling, reveal animations.
Loaded only on page-templates/template-home.php.
--------------------------------------------------------------*/

/*
 * --gh-screen is the height a single snap slide may occupy. The admin bar
 * pushes the document down via html { margin-top }, so it has to come off the
 * top or every slide overshoots the viewport and snapping drifts.
 */
html {
	--gh-screen: 100svh;
	--gh-scroll-offset: var(--gh-header-height);

	scroll-padding-top: var(--gh-scroll-offset);
}

html:has(body.admin-bar) {
	--gh-screen: calc(100svh - var(--gh-admin-bar-height, 32px));
	--gh-scroll-offset: calc(var(--gh-header-height) + var(--gh-admin-bar-height, 32px));
}

/* overflow-x: clip does not create a scroll container, so snapping stays on the viewport. */
body.gh-theme {
	overflow-x: clip;
}

/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/

.gh-container {
	width: min(100% - 2rem, 1600px);
	margin: 0 auto;
}

/*--------------------------------------------------------------
# Inner pages (everything that is not the fullpage front template)
--------------------------------------------------------------*/

.gh-page {
	flex: 1 0 auto;
	padding-top: var(--gh-header-height);
	background: var(--gh-graphite-800);
}

.gh-page-header {
	position: relative;
	padding: 2.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--gh-graphite-900);
}

.gh-breadcrumb {
	margin-bottom: 1.25rem;
	color: var(--gh-steel-dark);
	font-size: 0.75rem;
	line-height: 1.4;
}

.gh-breadcrumb a {
	color: var(--gh-steel-dark);
	text-decoration: none;
}

.gh-breadcrumb a:hover,
.gh-breadcrumb a:focus {
	color: #fff;
}

.gh-breadcrumb-sep {
	margin: 0 0.5rem;
	color: rgba(255, 255, 255, 0.25);
}

.gh-page-title {
	margin: 0 0 1rem;
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
}

.gh-page-body {
	padding: 3rem 0 4rem;
}

.gh-page-media {
	margin: 0 0 2.5rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
}

.gh-page-media img {
	width: 100%;
	height: auto;
	display: block;
}

/*--------------------------------------------------------------
# Editor output
--------------------------------------------------------------*/

.gh-prose {
	max-width: 72ch;
	color: var(--gh-steel-dark);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
}

.gh-prose > * + * {
	margin-top: 1.25rem;
}

.gh-prose > :first-child {
	margin-top: 0;
}

.gh-prose h2,
.gh-prose h3,
.gh-prose h4 {
	margin-bottom: 0;
	color: #fff;
	font-weight: 600;
	line-height: 1.25;
}

.gh-prose h2 {
	margin-top: 2.5rem;
	font-size: 1.5rem;
	font-weight: 700;
}

.gh-prose h3 {
	margin-top: 2rem;
	font-size: 1.1875rem;
}

.gh-prose h4 {
	margin-top: 1.75rem;
	font-size: 1rem;
}

.gh-prose a {
	color: var(--gh-steel);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transition: color 180ms ease, border-color 180ms ease;
}

.gh-prose a:hover,
.gh-prose a:focus {
	color: #fff;
	border-bottom-color: var(--gh-brand-red);
}

.gh-prose ul,
.gh-prose ol {
	padding-left: 1.25rem;
}

.gh-prose li + li {
	margin-top: 0.5rem;
}

.gh-prose ul li::marker {
	color: var(--gh-brand-red);
}

.gh-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

.gh-serial-guide {
	margin-inline: 0;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.gh-serial-guide__images {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

.gh-serial-guide__images img {
	display: block;
	object-fit: contain;
	background: #fff;
}

.gh-serial-guide figcaption {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.6;
}

.gh-catalogue-description {
	padding: 1.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.gh-catalogue-description > summary {
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.gh-catalogue-description > summary:focus-visible {
	outline: 2px solid var(--gh-brand-red);
	outline-offset: 6px;
}

.gh-catalogue-description[open] > summary {
	margin-bottom: 1.25rem;
}

.gh-prose blockquote {
	margin-left: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--gh-brand-red);
	color: var(--gh-steel);
	font-style: italic;
}

.gh-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.gh-prose th,
.gh-prose td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.gh-prose th {
	color: #fff;
	font-weight: 600;
}

.gh-prose code {
	padding: 0.125rem 0.375rem;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.9em;
}

/*--------------------------------------------------------------
# Subpage links
--------------------------------------------------------------*/

.gh-subpages {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gh-subpage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.03);
	color: #fff;
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease;
}

.gh-subpage:hover,
.gh-subpage:focus {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.gh-subpage-title {
	font-size: 0.9375rem;
	font-weight: 600;
}

.gh-subpage .fa-arrow-right {
	color: var(--gh-brand-red);
	transition: transform 180ms ease;
}

.gh-subpage:hover .fa-arrow-right {
	transform: translateX(0.25rem);
}

/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/

/*
 * The shorthand below would wipe out the header allowance .gh-page sets, so the
 * fixed header has to be carried in the padding here.
 */
.gh-404 {
	display: flex;
	align-items: center;
	min-height: var(--gh-screen);
	padding: calc(var(--gh-header-height) + 2.5rem) 0 3rem;
}

.gh-404-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

.gh-404-title {
	margin: 0 0 1rem;
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
}

.gh-404-title em {
	color: transparent;
	font-style: normal;
	background: linear-gradient(90deg, var(--gh-brand-red), #f87171);
	-webkit-background-clip: text;
	background-clip: text;
}

.gh-404-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: 34rem;
	margin-top: 2rem;
}

.gh-404-search input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 2px;
	background: rgba(10, 15, 20, 0.6);
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
}

.gh-404-search input::placeholder {
	color: rgba(196, 209, 217, 0.45);
}

.gh-404-search input:focus {
	border-color: var(--gh-tech-blue-light);
	outline: none;
}

.gh-404-links {
	display: grid;
	gap: 0.625rem;
	max-width: 34rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gh-404-link {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.03);
	color: #fff;
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease;
}

.gh-404-link:hover,
.gh-404-link:focus {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.gh-404-link-icon {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gh-brand-red);
}

.gh-404-link-label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
}

.gh-404-link-copy {
	display: block;
	color: var(--gh-steel-dark);
	font-size: 0.8125rem;
}

.gh-404-link .fa-arrow-right {
	margin-left: auto;
	color: var(--gh-brand-red);
	transition: transform 180ms ease;
}

.gh-404-link:hover .fa-arrow-right {
	transform: translateX(0.25rem);
}

/*
 * Numerals only. The brand mark was tried here and dropped on purpose: pairing
 * the logo with an error screen builds the wrong association.
 */
.gh-404-figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12rem;
}

.gh-404-code {
	color: rgba(255, 255, 255, 0.06);
	font-size: clamp(7rem, 22vw, 15rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	user-select: none;
}

/*--------------------------------------------------------------
# Catalogue grid
--------------------------------------------------------------*/

.gh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1rem;
}

.gh-card--link {
	display: flex;
	flex-direction: column;
	padding: 0;
	color: inherit;
	text-decoration: none;
}

.gh-card--link:hover,
.gh-card--link:focus {
	color: inherit;
}

.gh-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--gh-graphite-700);
}

.gh-card-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 400ms ease;
}

.gh-card--link:hover .gh-card-media img,
.gh-card--link:focus .gh-card-media img {
	transform: scale(1.04);
}

.gh-card-media-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.12);
	font-size: 2rem;
}

.gh-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.25rem;
}

.gh-card--link .gh-card-title {
	margin: 0;
}

.gh-card-sub {
	color: var(--gh-tech-blue-light);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.gh-card--link .gh-card-copy {
	margin: 0;
}

.gh-card-count {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--gh-steel-dark);
	font-size: 0.75rem;
}

.gh-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1rem;
	color: var(--gh-steel-dark);
	font-size: 0.75rem;
	line-height: 1.35;
}

.gh-card-footer i {
	flex: 0 0 auto;
	color: var(--gh-brand-red);
	font-size: 0.75rem;
	transition: transform 180ms ease;
}

.gh-card--link:hover .gh-card-footer i,
.gh-card--link:focus .gh-card-footer i {
	transform: translateX(0.25rem);
}

.gh-catalogue-intro {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
}

.gh-catalogue-intro__content h2,
.gh-catalogue-cta h2,
.gh-category-results-head h2 {
	margin: 0;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.gh-catalogue-intro__content p:not(.gh-eyebrow),
.gh-catalogue-cta p {
	max-width: 58rem;
	margin: 1rem 0 0;
	color: var(--gh-steel-dark);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
}

.gh-catalogue-intro__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.gh-catalogue-intro__list li {
	position: relative;
	padding-left: 1.5rem;
}

.gh-catalogue-intro__list li::before {
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid rgba(197, 22, 29, 0.7);
	border-radius: 50%;
	content: "";
	transform: translateY(-50%);
}

.gh-catalogue-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.gh-catalogue-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.035);
	color: inherit;
	text-decoration: none;
	transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-catalogue-card::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	content: "";
	background: linear-gradient(90deg, var(--gh-brand-red), var(--gh-tech-blue-light));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms ease;
}

.gh-catalogue-card:hover,
.gh-catalogue-card:focus {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.055);
	color: inherit;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
	transform: translateY(-0.25rem);
}

.gh-catalogue-card:hover::after,
.gh-catalogue-card:focus::after {
	transform: scaleX(1);
}

.gh-catalogue-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 10.5rem;
	padding: 1.5rem;
	background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.14), transparent 60%), linear-gradient(135deg, rgba(231, 236, 239, 0.16), rgba(7, 31, 56, 0.28));
}

.gh-catalogue-card__media img {
	width: min(62%, 10rem);
	max-height: 7.5rem;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 1.25rem 1.6rem rgba(0, 0, 0, 0.32));
	transition: transform 360ms ease;
}

.gh-catalogue-card:hover .gh-catalogue-card__media img,
.gh-catalogue-card:focus .gh-catalogue-card__media img {
	transform: scale(1.06);
}

.gh-catalogue-card__empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	color: rgba(255, 255, 255, 0.18);
	font-size: 1.75rem;
}

.gh-catalogue-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
}

.gh-catalogue-card__title {
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.gh-catalogue-card__copy {
	color: var(--gh-steel-dark);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.6;
}

.gh-catalogue-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 0.5rem;
	color: var(--gh-tech-blue-light);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.35;
}

.gh-catalogue-card__footer i {
	flex: 0 0 auto;
	color: var(--gh-brand-red);
	font-size: 0.75rem;
	transition: transform 180ms ease;
}

.gh-catalogue-card:hover .gh-catalogue-card__footer i,
.gh-catalogue-card:focus .gh-catalogue-card__footer i {
	transform: translateX(0.25rem);
}

.gh-category-overview {
	display: grid;
	gap: 2rem;
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gh-category-overview__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 18rem;
	margin: 0;
	padding: 2rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.13), transparent 62%), linear-gradient(135deg, rgba(231, 236, 239, 0.14), rgba(7, 31, 56, 0.36));
}

.gh-category-overview__media img {
	width: min(68%, 24rem);
	max-height: 20rem;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.32));
}

.gh-category-overview__content {
	align-self: center;
}

.gh-category-results-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.gh-category-results-head span {
	flex: 0 0 auto;
	color: var(--gh-tech-blue-light);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
}

.gh-catalogue-cta {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 3rem;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: linear-gradient(135deg, rgba(197, 22, 29, 0.14), rgba(255, 255, 255, 0.035));
}

.gh-catalogue-cta--compact {
	margin-top: 4rem;
}

@media (min-width: 760px) {
	.gh-catalogue-intro {
		grid-template-columns: minmax(0, 7fr) minmax(18rem, 4fr);
		align-items: center;
		padding: 2rem;
	}

	.gh-catalogue-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 1.25rem;
	}

	.gh-category-overview:has(.gh-category-overview__media + .gh-category-overview__content) {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: center;
	}

	.gh-catalogue-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 2rem;
	}
}

.gh-empty {
	max-width: 46rem;
	padding: 2rem;
	border: 1px dashed rgba(255, 255, 255, 0.15);
	border-radius: 2px;
	color: var(--gh-steel-dark);
}

/*--------------------------------------------------------------
# Catalogue detail
--------------------------------------------------------------*/

.gh-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

.gh-detail-media {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: var(--gh-graphite-900);
}

.gh-detail-media img {
	width: 100%;
	height: auto;
	display: block;
}

.gh-data-table {
	width: 100%;
	margin-top: 2.5rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.gh-data-table caption {
	margin-bottom: 0.875rem;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
}

.gh-data-table th,
.gh-data-table td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.gh-data-table th {
	width: 45%;
	color: var(--gh-steel-dark);
	font-weight: 400;
}

.gh-data-table td {
	color: #fff;
	font-weight: 500;
}

.gh-downloads {
	list-style: none;
	display: grid;
	gap: 0.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
}

.gh-download {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.03);
	color: #fff;
	font-size: 0.9375rem;
	text-decoration: none;
}

.gh-download:hover,
.gh-download:focus {
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.gh-download i {
	color: var(--gh-brand-red);
}

.gh-download-meta {
	margin-left: auto;
	color: var(--gh-steel-dark);
	font-size: 0.75rem;
	text-transform: uppercase;
}

.gh-related {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gh-related-title {
	margin: 0 0 1.5rem;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
}

.gh-termlist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.gh-term-chip {
	padding: 0.3125rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	color: var(--gh-steel);
	font-size: 0.75rem;
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease;
}

.gh-term-chip:hover,
.gh-term-chip:focus {
	border-color: var(--gh-brand-red);
	color: #fff;
}

.gh-product-order {
	margin-top: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.035);
}

.gh-product-order__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.125rem;
	color: #fff;
	cursor: pointer;
	list-style: none;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.gh-product-order__summary::-webkit-details-marker {
	display: none;
}

.gh-product-order__summary:hover,
.gh-product-order__summary:focus {
	background: rgba(255, 255, 255, 0.045);
	outline: none;
}

.gh-product-order__summary:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 112, 201, 0.42);
}

.gh-product-order__summary-main {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.gh-product-order__summary-main i {
	flex: 0 0 auto;
	color: var(--gh-brand-red);
	font-size: 0.95rem;
}

.gh-product-order__summary-icon {
	flex: 0 0 auto;
	color: var(--gh-tech-blue-light);
	font-size: 0.75rem;
	transition: transform 220ms ease;
}

.gh-product-order[open] .gh-product-order__summary-icon {
	transform: rotate(180deg);
}

.gh-product-order__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

.gh-product-order[open] .gh-product-order__panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

.gh-product-order__inner {
	overflow: hidden;
	padding: 0 1.125rem;
}

.gh-product-order[open] .gh-product-order__inner {
	padding-bottom: 1.125rem;
}

.gh-product-order__head {
	padding-top: 0.25rem;
}

.gh-product-order__head h2 {
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

.gh-product-order__head p {
	margin: 0.625rem 0 0;
	color: var(--gh-steel-dark);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.6;
}

.gh-product-order__notice {
	margin-top: 1rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	color: #fff;
	font-size: 0.875rem;
	line-height: 1.45;
}

.gh-product-order__notice:not([hidden]) {
	animation: gh-product-order-notice-in 220ms ease;
}

.gh-product-order__notice.is-success {
	border-color: rgba(0, 112, 201, 0.36);
	background: rgba(0, 112, 201, 0.12);
}

.gh-product-order__notice.is-error {
	border-color: rgba(197, 22, 29, 0.42);
	background: rgba(197, 22, 29, 0.12);
}

.gh-product-order__form {
	display: grid;
	gap: 0.875rem;
	margin-top: 1.125rem;
}

.gh-product-order__field {
	display: grid;
	gap: 0.375rem;
	margin: 0;
}

.gh-product-order__field span {
	color: var(--gh-steel-dark);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
}

.gh-product-order__field input,
.gh-product-order__field textarea {
	width: 100%;
	min-height: 2.875rem;
	padding: 0.6875rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	background: rgba(7, 31, 56, 0.42);
	color: #fff;
	font: inherit;
	line-height: 1.35;
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.gh-product-order__field textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.gh-product-order__field input:focus,
.gh-product-order__field textarea:focus {
	border-color: rgba(0, 112, 201, 0.72);
	background: rgba(7, 31, 56, 0.62);
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 112, 201, 0.18);
}

.gh-product-order__field--honeypot {
	position: absolute;
	left: -999rem;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gh-product-order__error {
	margin: 0;
	color: #ffb4b7;
	font-size: 0.8125rem;
	line-height: 1.45;
}

.gh-product-order__form.has-contact-error input[name="customer_phone"],
.gh-product-order__form.has-contact-error input[name="customer_email"],
.gh-contact-form .has-contact-error input[name="customer_phone"],
.gh-contact-form .has-contact-error input[name="customer_email"] {
	border-color: rgba(197, 22, 29, 0.72);
}

.gh-contact-form .gh-product-order__notice {
	margin: 0 0 1rem;
}

.gh-contact-form .gh-product-order__error {
	margin-bottom: 0.5rem;
}

.gh-product-order__submit {
	justify-self: start;
	margin-top: 0.25rem;
}

.gh-product-order__submit:disabled {
	cursor: wait;
	opacity: 0.72;
}

.gh-product-order__submit.is-loading i {
	animation: gh-product-order-spin 720ms linear infinite;
}

@keyframes gh-product-order-notice-in {
	from {
		opacity: 0;
		transform: translateY(-0.375rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gh-product-order-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 720px) {
	.gh-product-order__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gh-product-order__field--wide,
	.gh-product-order__error,
	.gh-product-order__submit {
		grid-column: 1 / -1;
	}
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/

.gh-page-body .navigation.pagination {
	margin-top: 3rem;
}

.gh-page-body .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gh-page-body .page-numbers {
	min-width: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	color: var(--gh-steel);
	font-size: 0.875rem;
	text-decoration: none;
}

.gh-page-body .page-numbers.current {
	border-color: var(--gh-brand-red);
	background: var(--gh-brand-red);
	color: #fff;
}

.gh-page-body a.page-numbers:hover {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

/*--------------------------------------------------------------
# Section shell
--------------------------------------------------------------*/

/*
 * No scroll-margin-top here: scroll-padding-top on the scroller already keeps
 * snap points and anchor targets clear of the fixed header. Setting both makes
 * the browser count the header twice and rest a header-height short of every
 * section.
 */
.gh-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--gh-graphite-800);
}

.gh-section:not(.gh-hero) {
	display: flex;
	align-items: center;
	padding: 4rem 0;
}

/* Hero sizes itself in theme.css; re-base it on --gh-screen so it snaps like the rest. */
.gh-hero {
	min-height: var(--gh-screen);
}

.gh-hero-inner {
	min-height: calc(var(--gh-screen) - var(--gh-header-height));
}

.gh-section--alt {
	background: var(--gh-graphite-900);
}

.gh-section--media {
	background: var(--gh-graphite-900);
}

/* Doubled class keeps these ahead of .gh-section:not(.gh-hero) above. */
.gh-section.gh-section--split {
	align-items: stretch;
	padding: 0;
}

.gh-section-inner {
	position: relative;
	z-index: 1;
	width: min(100% - 2rem, 1600px);
	margin: 0 auto;
}

.gh-section-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.gh-section-bg img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	opacity: 0.35;
}

.gh-section-bg::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(
		to bottom,
		rgba(10, 15, 20, 0.94) 0%,
		rgba(10, 15, 20, 0.72) 50%,
		rgba(10, 15, 20, 0.96) 100%
	);
}

/*--------------------------------------------------------------
# Section heading
--------------------------------------------------------------*/

.gh-section-head {
	max-width: 46rem;
	margin-bottom: 2.5rem;
}

.gh-section-head--center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.gh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	color: var(--gh-steel-dark);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gh-eyebrow-dot {
	width: 0.375rem;
	height: 0.375rem;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--gh-brand-red);
}

.gh-rule {
	width: 48px;
	height: 2px;
	display: block;
	margin: 0 0 1.25rem;
	background: var(--gh-brand-red);
}

.gh-section-head--center .gh-rule {
	margin-inline: auto;
}

.gh-h2 {
	margin: 0 0 1rem;
	color: #fff;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
}

.gh-h2 em {
	color: transparent;
	font-style: normal;
	background: linear-gradient(90deg, var(--gh-brand-red), #f87171);
	-webkit-background-clip: text;
	background-clip: text;
}

.gh-lead {
	max-width: 40rem;
	margin: 0;
	color: var(--gh-steel-dark);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.65;
}

.gh-section-head--center .gh-lead {
	margin-inline: auto;
}

.gh-section-actions {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/*--------------------------------------------------------------
# Reveal animation
--------------------------------------------------------------*/

.gh-anim .gh-reveal {
	opacity: 0;
	filter: blur(4px);
	transform: translateY(24px);
	transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), filter 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--gh-delay, 0ms);
}

.gh-anim .is-visible .gh-reveal {
	opacity: 1;
	filter: blur(0);
	transform: none;
}

.gh-anim .gh-reveal-media {
	clip-path: inset(0 100% 0 0);
	transform: scale(1.06);
	transition-duration: 1200ms;
	transition-property: clip-path, filter, opacity, transform;
}

.gh-anim .is-visible .gh-reveal-media {
	clip-path: inset(0);
	transform: scale(1);
}

.gh-anim .gh-reveal-media:is(.gh-hero-bg, .gh-section-bg, .gh-split-media, .gh-photo) img,
.gh-anim .gh-reveal-media.gh-hero-bg video {
	transform: scale(1.04);
	transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-anim .is-visible .gh-reveal-media:is(.gh-hero-bg, .gh-section-bg, .gh-split-media, .gh-photo) img,
.gh-anim .is-visible .gh-reveal-media.gh-hero-bg video {
	transform: scale(1);
}

.gh-anim .gh-rule.gh-reveal {
	transform: scaleX(0);
	transform-origin: left center;
}

.gh-anim .is-visible .gh-rule.gh-reveal {
	transform: scaleX(1);
}

.gh-anim .gh-section-head--center .gh-rule.gh-reveal {
	transform-origin: center;
}

/*--------------------------------------------------------------
# Products
--------------------------------------------------------------*/

.gh-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.gh-card {
	position: relative;
	padding: 1.5rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.03);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-card::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	content: "";
	background: var(--gh-brand-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms ease;
}

.gh-card:hover {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
	transform: translateY(-0.25rem);
}

.gh-card:hover::after {
	transform: scaleX(1);
}

.gh-card.gh-card--link {
	padding: 0;
}

.gh-card-index {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	color: rgba(255, 255, 255, 0.12);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.gh-card-icon {
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gh-brand-red);
	font-size: 1.125rem;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-card:hover .gh-card-icon {
	border-color: rgba(197, 22, 29, 0.45);
	background: rgba(197, 22, 29, 0.09);
	color: #f87171;
	transform: translateY(-0.125rem);
}

.gh-card-title {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.gh-card-copy {
	margin: 0 0 1rem;
	color: var(--gh-steel-dark);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.6;
}

.gh-card-meta {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	color: var(--gh-tech-blue-light);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gh-card-action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.gh-card-action:hover,
.gh-card-action:focus {
	color: #fff;
	text-decoration: none;
}

.gh-card-action i {
	color: var(--gh-brand-red);
	font-size: 0.75rem;
	transition: transform 180ms ease;
}

.gh-card-action:hover i,
.gh-card-action:focus i {
	transform: translateX(0.25rem);
}

/*--------------------------------------------------------------
# Applications
--------------------------------------------------------------*/

.gh-split {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}

.gh-split-body {
	display: flex;
	align-items: center;
}

.gh-split-inner {
	width: min(100% - 2rem, 1600px);
	margin: 0 auto;
	padding: 4rem 0;
}

.gh-split-media {
	position: relative;
	min-height: 14rem;
	overflow: hidden;
	background: var(--gh-graphite-900);
}

.gh-split-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	opacity: 0.75;
}

.gh-split-media::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(to bottom, rgba(7, 31, 56, 0.85), rgba(15, 49, 76, 0.25));
}

.gh-industry-list {
	list-style: none;
	display: grid;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
}

.gh-industry {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	isolation: isolate;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-industry::before {
	position: absolute;
	inset: -0.625rem -0.75rem;
	z-index: -1;
	content: "";
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	opacity: 0;
	transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}

.gh-industry:hover,
.gh-industry:focus-within {
	transform: translateX(0.25rem);
}

.gh-industry:hover::before,
.gh-industry:focus-within::before {
	border-color: rgba(112, 196, 255, 0.14);
	background: rgba(255, 255, 255, 0.035);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
	opacity: 1;
}

.gh-industry-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gh-tech-blue-light);
	transition: background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-industry:hover .gh-industry-icon,
.gh-industry:focus-within .gh-industry-icon {
	border-color: rgba(112, 196, 255, 0.36);
	background: rgba(112, 196, 255, 0.1);
	transform: translateY(-0.125rem);
}

.gh-industry-title {
	display: block;
	margin-bottom: 0.125rem;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.25;
}

.gh-industry-copy {
	display: block;
	color: var(--gh-steel-dark);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.5;
}

/*--------------------------------------------------------------
# Custom solutions process
--------------------------------------------------------------*/

.gh-steps {
	position: relative;
	list-style: none;
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.gh-step {
	position: relative;
	padding-left: 3.75rem;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-step-marker {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(197, 22, 29, 0.4);
	border-radius: 999px;
	background: var(--gh-graphite-700);
	color: var(--gh-brand-red);
	font-size: 1rem;
	box-shadow: 0 0 0 rgba(197, 22, 29, 0);
	transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-step:hover {
	transform: translateY(-0.25rem);
}

.gh-step:hover .gh-step-marker {
	border-color: rgba(197, 22, 29, 0.64);
	background: rgba(197, 22, 29, 0.12);
	box-shadow: 0 0 0 0.3125rem rgba(197, 22, 29, 0.08), 0 18px 36px rgba(0, 0, 0, 0.18);
	transform: translateY(-0.125rem);
}

.gh-step-num {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--gh-tech-blue-light);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.gh-step-title {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.gh-step-copy {
	margin: 0;
	color: var(--gh-steel-dark);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.6;
}

/*--------------------------------------------------------------
# Facts
--------------------------------------------------------------*/

.gh-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.gh-fact {
	position: relative;
	padding: 1rem;
	margin: -1rem;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 2px;
	text-align: center;
	transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-fact:hover {
	border-color: rgba(112, 196, 255, 0.14);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
	transform: translateY(-0.25rem);
}

.gh-fact-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.125rem;
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: color 220ms ease, text-shadow 220ms ease;
}

.gh-fact:hover .gh-fact-value {
	color: #fff;
	text-shadow: 0 0 22px rgba(112, 196, 255, 0.16);
}

.gh-fact-affix {
	color: var(--gh-brand-red);
	font-size: 0.55em;
	font-weight: 600;
}

.gh-fact-label {
	margin: 0 0 0.25rem;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gh-fact-copy {
	max-width: 18rem;
	margin: 0 auto;
	color: var(--gh-steel-dark);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.5;
}

/*--------------------------------------------------------------
# Company
--------------------------------------------------------------*/

.gh-company {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.gh-timeline {
	position: relative;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0 0 0 1.75rem;
}

.gh-timeline::before {
	position: absolute;
	top: 0.5rem;
	bottom: 1.5rem;
	left: 0.34rem;
	width: 1px;
	content: "";
	background: linear-gradient(to bottom, var(--gh-brand-red), rgba(255, 255, 255, 0.08));
}

.gh-timeline-item {
	position: relative;
	display: flex;
	gap: 1rem;
	padding-bottom: 1.25rem;
}

.gh-timeline-item::before {
	position: absolute;
	top: 0.375rem;
	left: -1.75rem;
	width: 0.6875rem;
	height: 0.6875rem;
	content: "";
	border: 2px solid var(--gh-brand-red);
	border-radius: 999px;
	background: var(--gh-graphite-900);
}

.gh-timeline-year {
	flex: 0 0 auto;
	min-width: 3.25rem;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
}

.gh-timeline-copy {
	color: var(--gh-steel-dark);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.5;
}

.gh-photo-stack {
	position: relative;
	min-height: 17rem;
}

.gh-photo {
	position: absolute;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: linear-gradient(135deg, var(--gh-graphite-700), var(--gh-graphite-900));
}

.gh-photo img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	opacity: 0.75;
}

.gh-photo--back {
	inset: 0 18% 20% 0;
}

.gh-photo--front {
	inset: 24% 0 0 22%;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.gh-photo-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.12);
	font-size: 2.75rem;
}

/*--------------------------------------------------------------
# Contact + inline footer
--------------------------------------------------------------*/

.gh-section.gh-section--contact {
	align-items: stretch;
	padding: 0;
}

.gh-contact-shell {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.gh-contact {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-content: center;
	padding: 4rem 0 3rem;
}

.gh-contact-list {
	list-style: none;
	display: grid;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
}

.gh-contact-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-contact-item:hover,
.gh-contact-item:focus-within {
	transform: translateX(0.25rem);
}

.gh-contact-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gh-brand-red);
	transition: background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-contact-item:hover .gh-contact-icon,
.gh-contact-item:focus-within .gh-contact-icon {
	border-color: rgba(197, 22, 29, 0.4);
	background: rgba(197, 22, 29, 0.09);
	transform: translateY(-0.125rem);
}

.gh-contact-label {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--gh-steel-dark);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gh-contact-value {
	display: block;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.gh-form-mock {
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.03);
}

.gh-form-note {
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
	color: var(--gh-steel-dark);
	font-size: 0.75rem;
	font-style: italic;
}

.gh-field {
	margin-bottom: 1rem;
}

.gh-field label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--gh-steel-dark);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gh-field input,
.gh-field textarea {
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2px;
	background: rgba(10, 15, 20, 0.6);
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	resize: vertical;
}

.gh-field input:disabled,
.gh-field textarea:disabled {
	opacity: 1;
	cursor: not-allowed;
}

.gh-field input::placeholder,
.gh-field textarea::placeholder {
	color: rgba(196, 209, 217, 0.45);
}

.gh-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

.gh-form-mock .gh-button {
	width: 100%;
	margin-top: 0.5rem;
}

.gh-form-mock .gh-button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.gh-inline-footer {
	flex: 0 0 auto;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--gh-graphite-900);
	color: var(--gh-steel-dark);
}

/*--------------------------------------------------------------
# Section dot navigation
--------------------------------------------------------------*/

.gh-section-nav {
	display: none;
}

/*--------------------------------------------------------------
# Header scrolled state
--------------------------------------------------------------*/

.gh-site-header.is-scrolled {
	background: rgba(7, 31, 56, 0.94);
	border-bottom-color: rgba(112, 196, 255, 0.14);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

/*--------------------------------------------------------------
# Breakpoints
--------------------------------------------------------------*/

@media (max-width: 782px) {
	html:has(body.admin-bar) {
		--gh-screen: calc(100svh - var(--gh-admin-bar-height, 46px));
		--gh-scroll-offset: calc(var(--gh-header-height) + var(--gh-admin-bar-height, 46px));
	}
}

@media (min-width: 640px) {
	.gh-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.gh-h2 {
		font-size: 2.25rem;
	}

	.gh-industry-list,
	.gh-contact-list,
	.gh-facts,
	.gh-field-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gh-photo-stack {
		min-height: 20rem;
	}
}

@media (min-width: 1024px) {
	.gh-container {
		width: min(100% - 6rem, 1600px);
	}

	.gh-page-header {
		padding: 3.5rem 0 3rem;
	}

	.gh-page-title {
		font-size: 3rem;
	}

	.gh-page-body {
		padding: 4rem 0 6rem;
	}

	.gh-prose {
		font-size: 1.0625rem;
	}

	.gh-subpages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.gh-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 1.5rem;
	}

	.gh-detail {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 4rem;
	}

	.gh-404-inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 4rem;
	}

	.gh-404-title {
		font-size: 3rem;
	}

	.gh-404-figure {
		min-height: 20rem;
	}

	.gh-detail--single {
		grid-template-columns: minmax(0, 72ch);
	}

	.gh-section:not(.gh-hero) {
		padding: 6rem 0;
	}

	.gh-section.gh-section--split,
	.gh-section.gh-section--contact {
		padding: 0;
	}

	.gh-section-inner {
		width: min(100% - 6rem, 1600px);
	}

	.gh-section-head {
		margin-bottom: 3.5rem;
	}

	.gh-h2 {
		font-size: 3rem;
	}

	.gh-lead {
		font-size: 1.125rem;
	}

	.gh-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.gh-card {
		padding: 1.75rem;
	}

	.gh-split {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.gh-split-body {
		padding-right: 3rem;
		padding-left: max(3rem, calc((100vw - 1600px) / 2 + 3rem));
	}

	.gh-split-inner {
		width: 100%;
		max-width: 46rem;
		margin: 0;
		padding: 6rem 0;
	}

	.gh-split-media {
		align-self: stretch;
		min-height: 100%;
	}

	.gh-split-media::after {
		background: linear-gradient(to right, rgba(7, 31, 56, 0.9), rgba(15, 49, 76, 0.05));
	}

	.gh-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}

	.gh-steps::before {
		position: absolute;
		top: 1.375rem;
		right: 12%;
		left: 12%;
		height: 1px;
		content: "";
		background: linear-gradient(90deg, transparent, rgba(197, 22, 29, 0.55), transparent);
	}

	.gh-step {
		padding-left: 0;
		text-align: center;
	}

	.gh-step-marker {
		position: static;
		display: flex;
		margin: 0 auto 1.25rem;
	}

	.gh-facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2.5rem;
	}

	.gh-fact-value {
		font-size: 3.5rem;
	}

	.gh-company {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 4rem;
		align-items: center;
	}

	.gh-photo-stack {
		min-height: 26rem;
	}

	.gh-contact {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: center;
		padding: 7rem 0 4rem;
	}

	.gh-contact-list {
		grid-template-columns: 1fr;
	}

	.gh-form-mock {
		padding: 2rem;
	}
}

/* Snapping only where a full screen actually fits. */
@media (min-width: 1024px) and (min-height: 580px) {
	html.gh-snap {
		scroll-snap-type: y mandatory;
	}

	.gh-section {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/*
	 * Snap points sit --gh-scroll-offset below the viewport top, so every slide
	 * after the hero only owns the area under the fixed header. The hero keeps
	 * the full screen because it carries that header allowance as padding.
	 */
	.gh-hero {
		min-height: var(--gh-screen);
	}

	.gh-section:not(.gh-hero) {
		min-height: calc(var(--gh-screen) - var(--gh-header-height));
	}

	.gh-section.gh-section--contact {
		display: flex;
		align-items: stretch;
	}

	.gh-section-nav {
		position: fixed;
		top: 50%;
		right: 1.5rem;
		z-index: 40;
		display: block;
		transform: translateY(-50%);
	}

	.gh-section-nav ul {
		position: relative;
		list-style: none;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 0.875rem;
		margin: 0;
		padding: 0;
	}

	.gh-section-nav ul::before {
		position: absolute;
		top: 0.25rem;
		right: 0.21875rem;
		bottom: 0.25rem;
		width: 1px;
		content: "";
		background: linear-gradient(to bottom, rgba(112, 196, 255, 0), rgba(112, 196, 255, 0.2), rgba(112, 196, 255, 0));
	}

	.gh-section-nav-dot {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.625rem;
		color: var(--gh-steel);
		text-decoration: none;
	}

	.gh-section-nav-dot::after {
		position: relative;
		z-index: 1;
		width: 0.5rem;
		height: 0.5rem;
		flex: 0 0 auto;
		content: "";
		border: 1px solid rgba(255, 255, 255, 0.36);
		border-radius: 999px;
		background: rgba(7, 31, 56, 0.96);
		box-shadow: 0 0 0 0 rgba(112, 196, 255, 0);
		transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
	}

	.gh-section-nav-dot.is-active::after {
		border-color: var(--gh-tech-blue-light);
		background: var(--gh-brand-red);
		box-shadow: 0 0 0 0.3125rem rgba(112, 196, 255, 0.12), 0 0 24px rgba(112, 196, 255, 0.22);
		transform: scale(1.28);
	}

	.gh-section-nav-label {
		color: var(--gh-steel);
		font-size: 0.75rem;
		line-height: 1;
		white-space: nowrap;
		opacity: 0;
		transform: translateX(6px);
		transition: color 220ms ease, opacity 220ms ease, transform 220ms ease;
	}

	.gh-section-nav-dot.is-active .gh-section-nav-label {
		color: #fff;
		opacity: 1;
		transform: none;
	}

	.gh-section-nav-dot:hover .gh-section-nav-label,
	.gh-section-nav-dot:focus-visible .gh-section-nav-label {
		opacity: 1;
		transform: none;
	}
}

/*
 * Compact mode. On a 1366x768-class screen the desktop type scale alone is
 * taller than the viewport, which pushes a slide past its snap point. Tighten
 * the vertical rhythm instead of letting sections overflow.
 */
@media (min-width: 1024px) and (max-height: 900px) {
	.gh-hero-inner {
		padding-block: 2.5rem;
	}

	.gh-hero-badge {
		margin-bottom: 1.25rem;
	}

	.gh-hero-title {
		margin-bottom: 1rem;
		font-size: 3.25rem;
	}

	.gh-hero-copy {
		margin-bottom: 1.75rem;
		font-size: 1.0625rem;
	}

	.gh-hero-actions {
		margin-bottom: 2rem;
	}

	.gh-trust-list {
		gap: 1rem;
		padding-top: 1.5rem;
	}

	.gh-scroll-indicator {
		bottom: 1rem;
	}

	.gh-scroll-line {
		height: 2rem;
	}

	.gh-section:not(.gh-hero):not(.gh-section--split):not(.gh-section--contact) {
		padding: 3.5rem 0;
	}

	.gh-card {
		padding: 1.375rem;
	}

	.gh-card-icon {
		margin-bottom: 0.875rem;
	}

	.gh-card-copy {
		margin-bottom: 0.75rem;
	}

	.gh-section-head {
		margin-bottom: 2rem;
	}

	.gh-h2 {
		font-size: 2.25rem;
	}

	.gh-lead {
		font-size: 1rem;
	}

	.gh-split-inner {
		padding: 3.5rem 0;
	}

	.gh-steps {
		gap: 1.5rem;
	}

	.gh-facts {
		gap: 2rem;
	}

	.gh-fact-value {
		font-size: 2.75rem;
	}

	.gh-photo-stack {
		min-height: 20rem;
	}

	.gh-contact {
		gap: 2rem;
		padding: 4rem 0 1rem;
	}

	/* The footer rides inside this slide, so it has to give up height too. */
	.gh-inline-footer .gh-footer-inner {
		gap: 0.625rem;
		padding: 0.875rem 0;
	}

	.gh-inline-footer .gh-footer-logo {
		height: 1.75rem;
	}

	.gh-inline-footer .gh-footer-row--credit {
		padding-top: 0.625rem;
	}

	.gh-contact-list {
		gap: 1rem;
		margin-top: 1.5rem;
	}

	.gh-form-mock {
		padding: 1.25rem;
	}
}

/*
 * Narrow desktop. Four product cards in one row leave ~230px per card, so the
 * copy wraps deep and that slide outgrows the screen. Shrink the card interior
 * rather than let the section break out of its snap area.
 */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 900px) {
	.gh-section-head {
		margin-bottom: 1.5rem;
	}

	.gh-lead {
		font-size: 0.9375rem;
	}

	.gh-cards {
		gap: 0.875rem;
	}

	.gh-card {
		padding: 1.125rem;
	}

	.gh-card-icon {
		width: 2.25rem;
		height: 2.25rem;
		margin-bottom: 0.75rem;
	}

	.gh-card-copy {
		font-size: 0.8125rem;
		line-height: 1.5;
	}

	.gh-card-meta {
		padding: 0.1875rem 0.5rem;
	}

	.gh-split-inner {
		padding: 3rem 0;
	}

	.gh-industry-list {
		gap: 1rem;
		margin-top: 1.5rem;
	}

	.gh-contact {
		padding: 3rem 0 0.75rem;
	}

	.gh-contact-icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.gh-inline-footer .gh-footer-inner {
		gap: 0.5rem;
		padding: 0.75rem 0;
	}
}

/*
 * Short desktop. A 1536x816 laptop at 125% Windows scaling reports a 695px
 * viewport, which leaves only 615px under the header — the contact slide misses
 * that by 17px and the products grid by a little more. Squeeze the vertical
 * rhythm once more rather than drop these screens out of snap scrolling.
 */
@media (min-width: 1024px) and (max-height: 760px) {
	.gh-section:not(.gh-hero):not(.gh-section--split):not(.gh-section--contact) {
		padding: 2.5rem 0;
	}

	.gh-section-head {
		margin-bottom: 1.5rem;
	}

	.gh-split-inner {
		padding: 2.5rem 0;
	}

	.gh-cards {
		gap: 0.875rem;
	}

	.gh-card {
		padding: 1.125rem;
	}

	.gh-card-icon {
		margin-bottom: 0.625rem;
	}

	.gh-card-copy {
		margin-bottom: 0.625rem;
	}

	.gh-steps {
		gap: 1.25rem;
	}

	.gh-facts {
		gap: 1.5rem;
	}

	.gh-contact {
		gap: 1.5rem;
		padding: 2.5rem 0 0.75rem;
	}

	.gh-contact-list {
		gap: 0.75rem;
		margin-top: 1rem;
	}

	.gh-form-mock {
		padding: 1rem;
	}

	.gh-field {
		margin-bottom: 0.75rem;
	}

	.gh-inline-footer .gh-footer-inner {
		gap: 0.5rem;
		padding: 0.625rem 0;
	}

	.gh-inline-footer .gh-footer-row--credit {
		padding-top: 0.5rem;
	}
}

/*
 * Very short desktop (down to the 580px floor where snapping is still allowed).
 * At this height a slide has barely 500px under the header, so the type scale
 * drops a step and every vertical gap is cut to the bone.
 */
@media (min-width: 1024px) and (max-height: 660px) {
	.gh-hero-inner {
		padding-block: 1.5rem;
	}

	.gh-hero-badge {
		margin-bottom: 0.75rem;
	}

	.gh-hero-title {
		margin-bottom: 0.75rem;
		font-size: 2.5rem;
	}

	.gh-hero-copy {
		margin-bottom: 1.25rem;
		font-size: 1rem;
	}

	.gh-hero-actions {
		margin-bottom: 1.25rem;
	}

	.gh-trust-list {
		gap: 0.75rem;
		padding-top: 1rem;
	}

	.gh-trust-icon {
		width: 2rem;
		height: 2rem;
	}

	/* The label would collide with the trust row at this height. */
	.gh-scroll-indicator {
		display: none;
	}

	.gh-section:not(.gh-hero):not(.gh-section--split):not(.gh-section--contact) {
		padding: 1.5rem 0;
	}

	.gh-section-head {
		margin-bottom: 1rem;
	}

	.gh-h2 {
		font-size: 1.75rem;
	}

	.gh-lead {
		font-size: 0.9375rem;
		line-height: 1.5;
	}

	.gh-split-inner {
		padding: 1.5rem 0;
	}

	.gh-cards {
		gap: 0.75rem;
	}

	.gh-card {
		padding: 0.875rem;
	}

	.gh-card-icon {
		width: 2rem;
		height: 2rem;
		margin-bottom: 0.5rem;
	}

	.gh-card-copy {
		margin-bottom: 0.5rem;
		line-height: 1.45;
	}

	.gh-industry-list {
		gap: 0.75rem;
		margin-top: 1rem;
	}

	.gh-steps {
		gap: 0.875rem;
	}

	.gh-step-marker {
		width: 2.25rem;
		height: 2.25rem;
		margin-bottom: 0.625rem;
	}

	.gh-step-copy {
		font-size: 0.8125rem;
		line-height: 1.45;
	}

	.gh-section-actions {
		margin-top: 1.25rem;
	}

	.gh-facts {
		gap: 1rem;
	}

	.gh-fact-value {
		font-size: 2.25rem;
	}

	.gh-timeline {
		margin-top: 1rem;
	}

	.gh-timeline-item {
		padding-bottom: 0.75rem;
	}

	.gh-contact {
		gap: 1.25rem;
		padding: 1.5rem 0 0.5rem;
	}

	.gh-contact-list {
		gap: 0.625rem;
		margin-top: 0.75rem;
	}

	.gh-contact-icon {
		width: 2rem;
		height: 2rem;
	}

	.gh-form-mock {
		padding: 0.875rem;
	}

	.gh-form-note {
		margin-bottom: 0.75rem;
		padding-bottom: 0.5rem;
	}

	.gh-field {
		margin-bottom: 0.5rem;
	}

	.gh-field input,
	.gh-field textarea {
		padding: 0.5rem 0.75rem;
	}

	.gh-inline-footer .gh-footer-inner {
		gap: 0.375rem;
		padding: 0.5rem 0;
	}

	.gh-inline-footer .gh-footer-logo {
		height: 1.5rem;
	}
}

/* Narrow *and* short: the contact column wraps hardest here. */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 660px) {
	.gh-contact {
		padding: 1.25rem 0 0.25rem;
	}

	.gh-contact-list {
		gap: 0.5rem;
	}

	.gh-contact-value {
		font-size: 0.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.gh-snap {
		scroll-snap-type: none;
	}

	.gh-anim .gh-reveal,
	.gh-anim .is-visible .gh-reveal,
	.gh-anim .gh-reveal-media,
	.gh-anim .gh-rule.gh-reveal {
		clip-path: none;
		filter: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.gh-anim .gh-reveal-media:is(.gh-hero-bg, .gh-section-bg, .gh-split-media, .gh-photo) img,
	.gh-anim .gh-reveal-media.gh-hero-bg video {
		transform: none;
		transition: none;
	}

	.gh-card::after,
	.gh-card,
	.gh-card-icon,
	.gh-industry,
	.gh-industry::before,
	.gh-industry-icon,
	.gh-step,
	.gh-step-marker,
	.gh-fact,
	.gh-fact-value,
	.gh-contact-item,
	.gh-contact-icon,
	.gh-section-nav-label,
	.gh-section-nav-dot::after,
	.gh-site-header,
	.gh-site-header::after {
		transition: none;
	}
}