/* Homepage sections (front page only). Data sections are styled in components.css. */

/* Layout containers manage their own gaps (WordPress blockGap would add margins). */
.gp-home :where(.gp-slide__inner, .gp-slide__stage, .gp-intro__grid, .gp-values, .gp-solutions__grid, .gp-solutions__list, .gp-solution, .gp-steps, .gp-about__grid) > *,
:where(.gp-cta__inner) > * {
	margin-block: 0;
}

.gp-solutions,
.gp-quality,
.gp-footprint {
	background: var(--wp--preset--color--surface);
}

/* ---------- Hero slider ---------- */

.gp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 0;
	min-height: clamp(34rem, 82svh, 50rem);
	display: grid;
}

.gp-hero__slides {
	display: grid;
	min-height: inherit;
}

/* All slides share one grid cell, so the hero keeps the height of the tallest slide (no layout shift). */
.gp-slide {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 900ms var(--wp--custom--motion--ease-in-out), visibility 0s 900ms;
}

.gp-slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 900ms var(--wp--custom--motion--ease-in-out), visibility 0s;
	z-index: 1;
}

.gp-slide__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -1;
}

.gp-slide__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	scale: 1.08;
	filter: saturate(0.75) contrast(1.05);
	transition: scale 7s linear, translate 600ms var(--wp--custom--motion--ease);
	translate: 0 var(--gp-shift, 0);
}

.gp-slide.is-active .gp-slide__bg img {
	scale: 1.0;
}

/* Dark grading: ink from the text side, GP indigo tint across, strength set per slide. */
.gp-slide__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(21 22 58 / var(--gp-overlay)) 0%, rgb(21 22 58 / calc(var(--gp-overlay) * 0.8)) 40%, rgb(21 22 58 / calc(var(--gp-overlay) * 0.3)) 100%),
		linear-gradient(0deg, rgb(21 22 58 / 0.85) 0%, transparent 35%);
}

.gp-slide__inner {
	position: relative;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(4rem, 3rem + 5vw, 7rem);
}

@media (min-width: 64em) {
	.gp-slide__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
}

.gp-slide__copy > * {
	margin-block: 0;
}

.gp-slide__title {
	font-size: clamp(2.35rem, 1.5rem + 3.6vw, 4.6rem);
	font-weight: 650;
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 15ch;
	color: var(--wp--preset--color--white);
}

.gp-slide__lead {
	margin-top: 1.4rem !important;
	max-width: 38rem;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.84);
}

.gp-slide__actions {
	margin-top: 2rem !important;
	gap: 0.75rem;
}

/* Foreground layer in perspective. */
.gp-slide__stage {
	position: relative;
	display: grid;
	justify-items: end;
	perspective: 1600px;
}

.gp-slide__layer {
	margin: 0;
	width: min(100%, 36rem);
	transform: rotateY(calc(-9deg + var(--gp-ry, 0deg))) rotateX(calc(3deg + var(--gp-rx, 0deg))) translateZ(0);
	transform-origin: 70% 50%;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.gp-slide__layer img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.14);
}

/* A soft light sweep crosses the framed photo once per slide. */
.gp-slide__layer {
	position: relative;
}

.gp-slide__layer::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radius--large);
	background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.16) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
	pointer-events: none;
}

.gp-slide__layer--product img {
	object-fit: contain;
	background: radial-gradient(110% 85% at 50% 20%, #FFFFFF 0%, #E9EBF2 75%);
	padding: 6%;
	box-sizing: border-box;
}

.gp-slide__stage .gp-chip {
	position: absolute;
	left: 0;
	bottom: -1.75rem;
	z-index: 2;
	transform: translateZ(60px);
}

@media (max-width: 63.99em) {
	.gp-slide__stage {
		justify-items: stretch;
	}

	.gp-slide__layer {
		width: 100%;
		transform: none;
	}

	.gp-slide__layer img {
		aspect-ratio: 16 / 9;
	}

	.gp-slide__stage .gp-chip {
		position: relative;
		left: auto;
		bottom: auto;
		margin: -2.25rem 0.75rem 0;
		transform: none;
	}
}

/* Phones and tablets: the photo layer would push the text below the fold; the background photo carries the slide. */
@media (max-width: 63.99em) {
	.gp-slide__layer {
		display: none;
	}

	.gp-slide__stage .gp-chip {
		margin: 0;
	}
}

/* Entrance of the active slide: copy rises, layer settles in depth, light sweeps. */
@media (prefers-reduced-motion: no-preference) {
	body:not(.gp-motion-off) .gp-slide.is-active .gp-slide__copy > * {
		animation: gp-rise 800ms var(--wp--custom--motion--ease) both;
	}

	body:not(.gp-motion-off) .gp-slide.is-active .gp-slide__copy > :nth-child(2) { animation-delay: 120ms; }
	body:not(.gp-motion-off) .gp-slide.is-active .gp-slide__copy > :nth-child(3) { animation-delay: 240ms; }

	body:not(.gp-motion-off) .gp-hero--depth .gp-slide.is-active .gp-slide__layer {
		animation: gp-settle 1100ms var(--wp--custom--motion--ease) both;
	}

	body:not(.gp-motion-off) .gp-slide.is-active .gp-slide__layer::after {
		animation: gp-sweep 1600ms 700ms var(--wp--custom--motion--ease-in-out) both;
	}

	body:not(.gp-motion-off) .gp-slide.is-active .gp-chip {
		animation: gp-rise 700ms 500ms var(--wp--custom--motion--ease) both;
	}
}

@keyframes gp-rise {
	from {
		opacity: 0;
		translate: 0 1.25rem;
	}
}

@keyframes gp-settle {
	from {
		opacity: 0;
		translate: 3rem 0;
		scale: 0.94;
	}
}

@keyframes gp-sweep {
	to {
		background-position: 150% 0;
	}
}

/* Oil-flow lines: slow technical curves along the base of the hero. */
.gp-hero__flow {
	position: absolute;
	inset: auto 0 0 0;
	width: 100%;
	height: 60%;
	z-index: 2;
	pointer-events: none;
	fill: none;
	stroke-width: 1.2;
	opacity: 0.5;
}

.gp-hero__flow path {
	stroke: var(--wp--preset--color--amber);
	stroke-dasharray: 6 14;
	vector-effect: non-scaling-stroke;
}

.gp-hero__flow path:nth-child(2) {
	stroke: var(--wp--preset--color--blue);
	opacity: 0.8;
}

.gp-hero__flow path:nth-child(3) {
	stroke: #FFFFFF;
	opacity: 0.25;
}

@media (prefers-reduced-motion: no-preference) {
	body:not(.gp-motion-off) .gp-hero__flow path {
		animation: gp-flow 14s linear infinite;
	}

	body:not(.gp-motion-off) .gp-hero__flow path:nth-child(2) {
		animation-duration: 20s;
		animation-direction: reverse;
	}
}

@keyframes gp-flow {
	to {
		stroke-dashoffset: -400;
	}
}

/* Progress line: thin and quiet, instead of dots. */
.gp-hero__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	z-index: 3;
	background: rgb(255 255 255 / 0.12);
}

.gp-hero__progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--wp--preset--color--amber);
	transform-origin: left;
	transform: scaleX(0);
}

/* Controls are hidden until a keyboard user reaches them (WCAG 2.2.2: moving content must be pausable). */
.gp-hero__controls {
	position: absolute;
	right: var(--gp-gutter);
	bottom: 1.25rem;
	z-index: 4;
	display: flex;
	gap: 0.5rem;
}

.gp-hero__controls button {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	padding: 0.55rem 0.9rem;
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: var(--wp--custom--radius--small);
	background: rgb(21 22 58 / 0.85);
	color: var(--wp--preset--color--white);
	font: 600 0.875rem / 1 var(--wp--preset--font-family--display);
	cursor: pointer;
}

.gp-hero__controls:focus-within button {
	position: static;
	width: auto;
	height: auto;
	min-height: 2.75rem;
	overflow: visible;
	clip-path: none;
}

/* Under reduced motion or with JavaScript off only the first slide shows; nothing moves. */
@media (prefers-reduced-motion: reduce) {
	.gp-slide__bg img {
		scale: 1;
		transition: none;
	}

	.gp-slide__layer {
		transform: none;
	}
}

/* ---------- Positioning ---------- */

.gp-intro__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}

@media (min-width: 56em) {
	.gp-intro__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: end;
	}
}

.gp-intro__title {
	font-size: var(--wp--preset--font-size--heading-1);
	max-width: 16ch;
}

.gp-intro__text {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--steel);
}

.gp-values {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin: var(--wp--preset--spacing--60) 0 0 !important;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.gp-value {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	max-width: none;
	padding: 1.5rem 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.gp-value::before {
	content: "";
	width: 2.5rem;
	height: 2.5rem;
	background: var(--wp--preset--color--indigo);
	-webkit-mask: var(--gp-icon) center / contain no-repeat;
	mask: var(--gp-icon) center / contain no-repeat;
}

.gp-value--industry {
	--gp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 36V18l9 5v-5l9 5v-5l9 5V6h6v30z'/%3E%3Cpath d='M9 30h4m5 0h4m5 0h4'/%3E%3C/svg%3E");
}

.gp-value--global {
	--gp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='16'/%3E%3Cpath d='M4 20h32M20 4c5 4.5 7 10 7 16s-2 11.5-7 16c-5-4.5-7-10-7-16s2-11.5 7-16z'/%3E%3C/svg%3E");
}

.gp-value--iso {
	--gp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 3l14 5v10c0 9-6 15.5-14 19C12 33.5 6 27 6 18V8z'/%3E%3Cpath d='M13.5 19.5l4.5 4.5 8.5-9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.gp-value--local {
	--gp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 37s12-11.5 12-21a12 12 0 0 0-24 0c0 9.5 12 21 12 21z'/%3E%3Ccircle cx='20' cy='16' r='4.5'/%3E%3C/svg%3E");
}

/* ---------- Solutions ---------- */

.gp-solutions__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

@media (min-width: 64em) {
	.gp-solutions__grid {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: start;
	}

	.gp-solutions__head {
		position: sticky;
		top: calc(var(--gp-header-h) + 2rem);
	}
}

.gp-solutions__head p {
	color: var(--wp--preset--color--steel);
	font-size: var(--wp--preset--font-size--lead);
}

.gp-solutions__list {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.gp-solution {
	display: grid;
	gap: 0.75rem 2rem;
	align-content: start;
	padding: 1rem;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--raised);
}

@media (min-width: 44em) {
	.gp-solution {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		padding: 1rem 2rem 1rem 1rem;
	}

	.gp-solution__photo {
		grid-row: span 2;
	}

	.gp-solution h3 {
		align-self: end;
		padding-top: 1rem;
	}
}

.gp-solution h3 {
	font-size: var(--wp--preset--font-size--heading-3);
}

.gp-solution p {
	color: var(--wp--preset--color--steel);
}

.gp-solution__photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--medium);
}

.gp-solution__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 15rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.gp-solution__photo--product img {
	object-position: 50% 85%;
}

/* Photo captions name the real location, set as a label on the photo. */
.gp-solution__photo figcaption,
.gp-about__photo figcaption {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.3rem 0.6rem;
	border-radius: var(--wp--custom--radius--small);
	background: rgb(21 22 58 / 0.78);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
	line-height: 1.35;
	max-width: calc(100% - 1.5rem);
}

/* ---------- Four-step approach ---------- */

.gp-approach__title {
	max-width: 20ch;
}

.gp-steps {
	counter-reset: gp-step;
	display: grid;
	gap: 2rem;
	margin: var(--wp--preset--spacing--60) 0 0 !important;
	padding: 0;
	list-style: none;
	position: relative;
}

@media (min-width: 56em) {
	.gp-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2.5rem;
	}

	/* The rail behind the step numbers fills in when the list first scrolls into view. */
	.gp-steps::before,
	.gp-steps::after {
		content: "";
		position: absolute;
		top: 1.6rem;
		left: 1.6rem;
		right: 0;
		height: 2px;
		background: var(--wp--preset--color--rule);
	}

	.gp-steps::after {
		background: var(--wp--preset--color--indigo);
		transform-origin: left;
		transition: transform 1400ms var(--wp--custom--motion--ease-in-out);
	}

	.gp-steps.gp-pending::after {
		transform: scaleX(0);
	}
}

.gp-steps li {
	counter-increment: gp-step;
	position: relative;
	display: grid;
	gap: 0.6rem;
	align-content: start;
	max-width: none;
	color: var(--wp--preset--color--steel);
}

.gp-steps li::before {
	content: counter(gp-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	margin-bottom: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 700;
	box-shadow: 0 0 0 6px var(--wp--preset--color--white);
	transition: background-color 300ms ease, color 300ms ease;
}

.gp-steps.gp-pending li::before {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--indigo);
	box-shadow: 0 0 0 6px var(--wp--preset--color--white), inset 0 0 0 2px var(--wp--preset--color--rule);
}

.gp-steps li:nth-child(2)::before { transition-delay: 350ms; }
.gp-steps li:nth-child(3)::before { transition-delay: 700ms; }
.gp-steps li:nth-child(4)::before { transition-delay: 1050ms; }

.gp-steps strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

/* ---------- About ---------- */

.gp-about__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	align-items: center;
}

@media (min-width: 60em) {
	.gp-about__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.gp-about__photo {
	position: relative;
	margin: 0;
}

.gp-about__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--large);
}

.gp-about__copy {
	display: grid;
	gap: 1rem;
}

.gp-about__copy > * {
	margin-block: 0;
}

.gp-about__copy p {
	color: var(--wp--preset--color--steel);
}

.gp-about__copy .gp-about__lead {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--text);
}

.gp-about__copy .wp-block-buttons {
	margin-top: 0.75rem;
}

/* ---------- Quality and products ---------- */

.gp-quality h2 {
	margin-bottom: var(--wp--preset--spacing--60);
}

.gp-range__featured {
	margin: var(--wp--preset--spacing--70) 0 1.25rem !important;
	font-size: var(--wp--preset--font-size--heading-3);
}

/* ---------- Closing call to action ---------- */

.gp-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, var(--wp--preset--color--indigo) 0%, var(--wp--preset--color--indigo-deep) 45%, var(--wp--preset--color--ink) 100%);
}

/* The GP globe as a faint watermark. */
.gp-cta::after {
	content: "";
	position: absolute;
	right: -6rem;
	top: 50%;
	width: min(36rem, 70vw);
	aspect-ratio: 1;
	translate: 0 -50%;
	background: url("../brand/gp-mark.webp") center / contain no-repeat;
	opacity: 0.09;
	pointer-events: none;
}

.gp-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.gp-cta h2 {
	font-size: var(--wp--preset--font-size--heading-1);
	max-width: 18ch;
}

.gp-cta p {
	font-size: var(--wp--preset--font-size--lead);
	max-width: 46rem;
}

.gp-cta .wp-block-buttons {
	margin-top: 0.75rem;
}