.industries {
	.industry-hero-top {
		min-height: calc(86vh - 86px);
		position: relative;
		overflow: hidden;

		&::before {
			filter: grayscale(100%);
			animation: toColor 3.5s ease forwards;
			content: '';
			position: absolute;

			inset: -50px 0;
			background-size: 100%;
			background-position: top center;
			background-repeat: no-repeat;
			opacity: 1;
			z-index: -1;
			will-change: transform;
			transform: translateY(var(--parallax-offset, 0));

			@media (max-width: 767px) {
				background-size: cover;
				background-position: center center;
			}
		}

		.container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: calc(86vh - 86px);
			max-width: 720px;

			h4 {
				margin: 0 auto;
				line-height: 1;
				padding: var(--space-xs) var(--space-sm);
				border-radius: var(--border-radius-sm);
				font-size: var(--font-text);
				border: 1px solid rgba(var(--smx-color-text-rgb), 0.6);
				font-weight: normal;
				display: inline-block;
				backdrop-filter: blur(0.5rem);
			}

			h2 {
				font-size: var(--font-title-main);
				margin: 0;
				line-height: 1.2;

				strong {
					color: var(--smx-color-primary-contrast);
				}
			}
			h3 {
				line-height: 1.2;
				font-size: var(--font-size-lg);
				color: var(--smx-color-text);
				font-weight: normal;
				margin-top: var(--space-md);
			}

			a.wp-block-button__link {
				background: linear-gradient(
					0deg,
					var(--smx-color-primary-contrast) 0%,
					var(--smx-color-primary) 100%
				);
			}
		}
	}

	.double-top {
		background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
		padding: var(--space-lg) var(--space-sm);

		.industry-cases-cta {
			.container {
				z-index: 2;
				position: relative;
				overflow: hidden;
				padding: var(--space-lg);
				border-radius: var(--border-radius-xl);
				min-height: 65vh;
				display: flex;
				align-items: center;

				&::before {
					content: '';
					position: absolute;

					inset: -50px 0;
					background-size: 100%;
					background-position: center center;
					background-repeat: no-repeat;
					opacity: 1;
					z-index: -1;
					will-change: transform;
					transform: translateY(var(--parallax-offset, 0));

					@media (max-width: 767px) {
						background-size: cover;
						background-position: center center;
					}
				}

				.hero-content {
					color: var(--smx-color-white);
					max-width: 720px;
					margin: 0 auto;
					padding: var(--space-lg);

					h2 {
						font-size: var(--font-title-lg);
						color: var(--smx-color-primary);
					}
					h3 {
						strong {
							font-size: 1.36em;
							font-weight: bold;

							background: linear-gradient(
								0deg,
								var(--smx-color-primary-tint),
								var(--smx-color-primary)
							);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;

							background-clip: text;
							color: transparent;
						}
					}

					.wp-block-buttons {
						a.wp-block-button__link {
							background: linear-gradient(
								0deg,
								var(--smx-color-primary-contrast) 0%,
								var(--smx-color-primary) 100%
							);
						}
					}
				}
			}
		}

		.industry-about {
			min-height: 50vh;
			display: flex;
			align-items: center;

			.is-layout-grid {
				@media (max-width: 767px) {
					display: block;
				}
			}

			h2 {
				font-size: var(--font-title-lg);
				color: var(--smx-color-primary-contrast);
				margin: 0;
			}
			h3 {
				font-size: var(--font-subtitle);
				color: var(--smx-color-text-bold);
				margin: 0;
			}

			.wp-block-buttons {
				a.wp-block-button__link {
					background: linear-gradient(
						0deg,
						var(--smx-color-primary-contrast) 0%,
						var(--smx-color-primary) 100%
					);
				}
			}
		}
	}

	.industry-second-hero {
		min-height: calc(64vh - 86px);
		padding: var(--space-lg) var(--space-sm);

		h2 {
			font-size: var(--font-title-md);
			color: var(--smx-color-primary-contrast);
			margin-bottom: var(--space-sm);
			strong {
				color: var(--smx-color-primary-contrast);
			}
		}

		.container {
			.is-layout-grid {
				align-items: center;

				gap: var(--space-lg);

				@media (max-width: 767px) {
					grid-template-columns: 1fr;
					gap: var(--space-md);
				}

				.card {
					overflow: hidden;
					background: var(--smx-color-white);
					border-radius: var(--border-radius-lg);
					padding-top: var(--space-lg);
					height: 100%;
					display: flex;
					flex-direction: column;

					h4 {
						line-height: 1;
						padding: var(--space-xs) var(--space-sm);
						border-radius: var(--border-radius-sm);
						font-size: var(--font-size-sm);
						border: 1px solid rgba(var(--smx-color-text-rgb), 0.6);
						font-weight: normal;
						display: inline-block;
						margin: 0 var(--space-lg);
						text-transform: uppercase;
					}

					h3 {
						margin-top: var(--space-sm);
						margin-bottom: var(--space-md);
						font-size: var(--font-subtitle);
						color: var(--smx-color-primary-contrast);
						line-height: 1.2;
						padding: 0 var(--space-lg);
					}

					p {
						margin: 0;
						font-size: var(--font-text);
						flex: auto;
						padding: 0 var(--space-lg);
					}
				}
			}
		}
	}

	.industries-advantage {
		min-height: calc(64vh - 86px);
		padding: var(--space-xl) var(--space-sm);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			background-image: url(../../images/industries/digital-energy.webp);
			inset: -50px 0;
			background-size: 100%;
			background-position: center center;
			background-repeat: no-repeat;
			opacity: 1;
			z-index: -1;
			will-change: transform;
			transform: translateY(var(--parallax-offset, 0));

			@media (max-width: 767px) {
				background-size: cover;
				background-position: center center;
			}
		}
		.is-layout-grid {
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				gap: var(--space-md);
			}
		}

		.container {
			z-index: 1;

			h2 {
				font-size: var(--font-title-md);

				strong {
					color: var(--smx-color-primary-contrast);
				}
			}
		}

		.card {
			overflow: hidden;
			border-radius: var(--border-radius-lg);
			padding: var(--space-lg);
			height: 100%;
			display: flex;
			flex-direction: column;
			backdrop-filter: blur(2.4rem);

			h3 {
				margin-top: var(--space-sm);
				margin-bottom: var(--space-md);
				font-size: var(--font-subtitle);
				color: var(--smx-color-primary-tint);
				line-height: 1.2;
			}

			p {
				margin: 0;
				font-size: var(--font-text);
				color: var(--smx-color-background-light);

				em {
					display: inline-block;
					font-style: normal;
					font-weight: bold;
					color: var(--smx-color-white);
					background-color: var(--smx-color-primary-contrast);
					padding: var(--space-xs) var(--space-sm);
					line-height: 1;
					border-radius: var(--border-radius-full);
				}
			}
		}

		.industry-accelerate {
			a.wp-block-button__link {
				background: linear-gradient(
					0deg,
					var(--smx-color-primary-contrast) 0%,
					var(--smx-color-primary) 100%
				);
			}

			p {
				font-size: var(--font-subtitle);
			}
		}
	}

	.industry-results {
		min-height: calc(64vh - 86px);
		padding: var(--space-xl) var(--space-sm);
		position: relative;
		overflow: hidden;
		background: var(--smx-color-black);

		h2 {
			font-size: var(--font-title-md);
			color: var(--smx-color-white);
		}
		h3 {
			margin-top: var(--space-sm);
			margin-bottom: var(--space-md);
			font-size: var(--font-subtitle);
			color: var(--smx-color-primary-tint);
			line-height: 1.2;
		}

		.is-layout-flex {
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				gap: var(--space-md);
				display: grid;
			}
		}

		.card {
			text-align: center;

			h4 {
				line-height: 1.2;
				font-size: calc(var(--font-title-lg) * 2);
				font-weight: bold;

				background: linear-gradient(
					90deg,
					var(--smx-color-primary-tint),
					var(--smx-color-primary)
				);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				background-clip: text;
				color: transparent;
			}
			p {
				color: var(--smx-color-background-light);
				font-size: var(--z-index-base);
				margin-top: 0;
				font-weight: bold;
			}
		}
	}
}

.industry-financial {
	.industry-hero-top {
		&::before {
			background-image: url(../../images/industries/financial.webp);
		}
	}
	.industry-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/financial-cta.webp);
			}
		}
	}
}

.industry-industrial {
	.industry-hero-top {
		&::before {
			background-image: url(../../images/industries/industrial.webp);
			background-position: top left;
		}
		.container {
			h3,
			h4 {
				color: var(--smx-color-text-bold);
			}
		}
	}
	.industry-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/support-car.webp);
				background-position: bottom right;
			}
		}
	}

	.industry-second-hero {
		.is-layout-grid {
			max-width: 760px;
			margin: 0 auto;
		}
	}
}

.industry-healthcare {
	.industry-hero-top {
		&::before {
			background-image: url(../../images/industries/healthcare.webp);
			background-position: center center;
		}

		.container {
			h4 {
				color: var(--smx-color-text-bold);
				background: rgba(var(--smx-color-white-rgb), 0.4);
			}
		}
	}

	.industry-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/healthcare-pc.webp);
				background-position: top center;
			}
		}
	}
	.industry-results {
		.card {
			h4 {
				font-size: calc(var(--font-title-lg) * 1.24);
			}
		}

		img {
			max-width: 720px;
			margin: 0 auto;
			display: block;
			width: 100%;
			height: auto;
		}
	}
}

.industry-telecom {
	.industry-hero-top {
		&::before {
			background-image: url(../../images/industries/telecom.webp);
		}

		.container {
			h3,
			h4 {
				color: var(--smx-color-text-bold);
			}
		}
	}
	.industry-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/telecom-cta.webp);
			}
		}
	}
}

.industry-retail {
	.industry-hero-top {
		&::before {
			background-image: url(../../images/industries/retail.webp);
		}

		.container {
			h3,
			h4 {
				color: var(--smx-color-text-bold);
			}
		}
	}
	.industry-cases-cta {
		.container {
			&::before {
				background-image: url(../../images/industries/retail-cta.webp);
			}
		}
	}

	.industry-results {
		.card {
			h4 {
				font-size: calc(var(--font-title-lg) * 1.24);
			}
		}
	}
}

@keyframes toColor {
	to {
		filter: grayscale(0%);
	}
}