/* Home page styles. */

.section-photo {
	position: relative;
	overflow: hidden;
	background-color: #39434b;
}

.section-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(120deg, rgba(4, 13, 21, 0.72), rgba(9, 21, 32, 0.36)),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 26px),
		linear-gradient(45deg, #182633, #566978);
	transform: none;
}

.section-photo > * {
	position: relative;
	z-index: 2;
}

.section-photo > .section-photo__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.section-photo.has-media::before {
	background: linear-gradient(120deg, rgba(4, 13, 21, 0.68), rgba(9, 21, 32, 0.3));
}

.hero {
	min-height: calc(87vh - 108px);
}

.hero__content {
	display: flex;
	align-items: center;
	min-height: calc(87vh - 108px);
}

.hero h1 {
	max-width: 520px;
	margin: 0 0 40px;
	color: #fff;
	font-size: 38px;
	line-height: 1.08;
	font-weight: 900;
}

.product-strip {
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	width: min(1600px, calc(100% - 72px));
	margin-top: -100px;
	padding-bottom: 78px;
}

.product-card {
	position: relative;
	overflow: visible;
	min-height: 300px;
	margin-top: 0;
	background: #fff;
	text-align: center;
	padding: 158px 16px 24px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
	transition: margin-top 900ms ease, padding-bottom 900ms ease, background-color 900ms ease, color 900ms ease, box-shadow 900ms ease;
	animation: smax-product-card-enter 700ms ease-out both;
}

.product-card:nth-child(2) {
	animation-delay: 80ms;
}

.product-card:nth-child(3) {
	animation-delay: 160ms;
}

.product-card:nth-child(4) {
	animation-delay: 240ms;
}

.product-card:nth-child(5) {
	animation-delay: 320ms;
}

@keyframes smax-product-card-enter {
	from {
		opacity: 0;
		transform: translateY(44px);
	}

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

.machine-placeholder {
	display: block;
	width: min(280px, 92%);
	height: auto;
	aspect-ratio: 340 / 222;
	margin: -34px auto 18px;
	background:
		linear-gradient(#cfd8df, #7e94a4 48%, #31495a 50%, #c8d2d9 52%, #71899b),
		linear-gradient(90deg, transparent 8%, #1a2c36 8% 12%, transparent 12% 88%, #1a2c36 88% 92%, transparent 92%);
	border-radius: 2px;
	box-shadow: 0 9px 18px rgba(0, 0, 0, 0.22);
}

.product-card .machine-placeholder {
	position: absolute;
	top: -92px;
	left: 50%;
	z-index: 1;
	width: min(340px, calc(100% + 72px));
	margin: 0;
	transform: translateX(-50%);
}

.product-card__logo {
	position: relative;
	z-index: 2;
	min-height: 16px;
	margin: 0 0 12px;
	color: #28292d;
	font-size: 13px;
	font-weight: 900;
	line-height: 16px;
	transition: color 400ms ease;
}

.product-card__logo-image {
	display: block;
	width: auto;
	max-width: 64px;
	height: 16px;
	margin: 0 auto;
	object-fit: contain;
	transition: filter 400ms ease;
}

img.machine-placeholder {
	object-fit: contain;
}

.product-card img.machine-placeholder {
	background: none;
	box-shadow: none;
}

.machine-placeholder--wide {
	width: 270px;
	height: 120px;
	margin: 0;
}

.product-card h2 {
	margin: 0 0 10px;
	color: var(--blue);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
	transition: color 220ms ease;
}

.product-card p {
	margin: 0;
	color: #4f5961;
	font-size: 16px;
	line-height: 1.3;
	transition: color 220ms ease;
}

.product-card:hover {
	margin-top: -20px;
	padding-bottom: 44px;
	background: var(--blue);
	box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
}

.product-card:hover h2,
.product-card:hover p {
	color: #fff;
}

.product-card:hover .product-card__logo {
	color: #fff;
}

.product-card:hover .product-card__logo-image {
	filter: brightness(0) invert(1);
}

.built {
	min-height: 0;
	padding: 100px 0 70px;
	display: flex;
	align-items: center;
}

.built__panel {
	width: 560px;
	margin-left: 20px;
	padding: 52px 42px;
	background: rgba(0, 0, 0, 0.63);
	color: #fff;
}

.built > .section-photo__media {
	object-position: center center;
}

.built__panel h2 {
	margin: 0 0 18px;
	font-size: 52px;
	line-height: 0.98;
	font-weight: 900;
}

.built__panel p {
	color: #d9e0e6;
	font-size: 15px;
}

.finder {
	padding: 72px 0 76px;
	background: #f7f7f7;
	text-align: center;
}

.finder h2 {
	position: relative;
	margin: 0 0 30px;
	font-size: 34px;
	font-weight: 900;
}

.finder h2 span {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 0;
	color: rgba(33, 37, 43, 0.14);
	font-size: 120px;
	transform: translate(-50%, -50%);
}

.finder h2 {
	z-index: 1;
}

.finder__row {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 28px;
}

.finder__buttons {
	display: flex;
	gap: 14px;
}

.finder img.machine-placeholder {
	background: none;
	box-shadow: none;
}

.quick-links,
.service-band {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.quick-link {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	aspect-ratio: 2 / 1;
	color: #fff;
	cursor: pointer;
	text-align: center;
	font-size: 18px;
	font-weight: 900;
}

.quick-link::before {
	transition: background 250ms ease;
}

.quick-link.has-media::before {
	background: rgba(8, 15, 22, 0.72);
}

.quick-link:hover::before {
	background: rgba(249, 101, 6, 0.86);
}

.quick-link__icon {
	display: block;
	width: 64px;
	height: 64px;
	font-size: 64px;
}

.video-channel {
	display: grid;
	grid-template-columns: 0.78fr 2fr;
	gap: 64px;
	align-items: center;
	padding: 76px 0 42px;
}

.video-channel h2,
.applications h2,
.news h2 {
	margin: 0 0 20px;
	font-size: 42px;
	line-height: 0.95;
	font-weight: 900;
	text-align: center;
}

.video-channel h2 {
	text-align: left;
}

.video-channel p {
	color: #58616b;
	font-size: 15px;
}

.video-placeholder {
	display: grid;
	place-items: center;
	min-height: 0;
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(135deg, rgba(249, 101, 6, 0.35), transparent),
		repeating-linear-gradient(90deg, #1e2930 0 24px, #2f444f 24px 48px);
	color: #fff;
	font-size: 28px;
	font-weight: 900;
}

.video-placeholder[data-video-tone="2"] {
	background-position: 20px 0;
}

.video-placeholder[data-video-tone="3"] {
	background-position: 40px 0;
}

.video-placeholder--media {
	display: block;
	width: 100%;
	object-fit: cover;
	background: #111;
}

.video-carousel {
	position: relative;
	display: grid;
	grid-template-columns: 42px 1fr 42px;
	gap: 20px;
	align-items: stretch;
	padding-bottom: 70px;
}

.video-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	padding: 10px 0 0;
}

.video-card {
	border-left: 1px solid #cfd5da;
	padding: 4px 16px 8px 18px;
	color: #57616c;
	font-size: 14px;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease;
}

.video-card.is-active {
	border-left-color: var(--blue);
	color: var(--ink);
}

.video-card p {
	margin: 0;
}

.video-carousel__arrow {
	display: grid;
	place-items: center;
	align-self: center;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent;
	color: #c3c9cd;
	cursor: pointer;
}

.video-carousel__arrow:hover,
.video-carousel__arrow:focus-visible {
	color: var(--blue);
}

.video-carousel__arrow .dashicons {
	width: 30px;
	height: 30px;
	font-size: 30px;
}

.applications {
	background: #f9f9f9;
}

.applications h2 {
	padding: 34px 0 28px;
	margin: 0;
}

.application-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.application-card {
	position: relative;
	height: 360px;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 26px;
	font-weight: 900;
	text-align: center;
	cursor: pointer;
	perspective: 1000px;
}

.application-card__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 1.25s cubic-bezier(0.2, 0.72, 0.25, 1);
}

.application-card:focus-visible .application-card__inner,
.application-card.is-flipped .application-card__inner {
	transform: rotateY(-180deg);
}

@media (hover: hover) and (pointer: fine) {
	.application-card:hover .application-card__inner {
		transform: rotateY(-180deg);
	}
}

.application-card:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: -3px;
}

.application-card__face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	backface-visibility: hidden;
}

.application-card__front {
	text-shadow: 0 3px 8px rgba(0, 0, 0, 0.65);
}

.application-card__front::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
		radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.22), transparent 24%),
		linear-gradient(135deg, #17232d, #59636d);
	z-index: 1;
}

.application-card.has-media .application-card__front::before {
	background: rgba(0, 0, 0, 0.42);
}

.application-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.application-card--2 .application-card__front::before { background-color: #1f2b31; }
.application-card--3 .application-card__front::before { background-color: #563820; }
.application-card--4 .application-card__front::before { background-color: #3e4650; }
.application-card--5 .application-card__front::before { background-color: #172020; }
.application-card--6 .application-card__front::before { background-color: #5f625d; }

.application-card__title {
	position: relative;
	z-index: 2;
	max-width: 210px;
}

.application-card__back {
	align-content: center;
	gap: 14px;
	padding: clamp(16px, 2.4vw, 34px);
	background: #4a5154;
	transform: rotateY(180deg);
}

.application-card__back-title {
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.1;
}

.application-card__copy {
	max-width: 320px;
	font-size: clamp(13px, 1.1vw, 17px);
	font-weight: 500;
	line-height: 1.38;
}

@media (prefers-reduced-motion: reduce) {
	.product-card {
		animation: none;
	}

	.application-card__inner {
		transition: none;
	}
}

/* Homepage responsive overrides must remain after its desktop rules. */
@media (max-width: 900px) {
	.hero,
	.hero__content {
		min-height: clamp(620px, calc(100svh - 155px), 745px);
	}

	.hero h1 {
		max-width: 100%;
		font-size: 32px;
		font-weight: 600;
		line-height: 44px;
	}

	.hero__content {
		transform: translateY(-42px);
	}

	.product-strip {
		grid-template-columns: 1fr;
		row-gap: 100px;
		width: min(92vw, 430px);
		margin-top: -98px;
		padding-bottom: 54px;
	}

	.product-card {
		min-height: 270px;
		padding: 160px 16px 24px;
		background: transparent;
		box-shadow: none;
	}

	.product-card::before {
		content: "";
		position: absolute;
		inset: 18px 0 0;
		z-index: 0;
		background: #fff;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
	}

	.product-card > * {
		position: relative;
		z-index: 1;
	}

	.product-card:hover {
		margin-top: 0;
		padding: 160px 16px 24px;
		background: transparent;
		box-shadow: none;
	}

	.product-card:hover h2 {
		color: var(--blue);
	}

	.product-card:hover p {
		color: #4f5961;
	}

	.product-card:hover .product-card__logo {
		color: #28292d;
	}

	.product-card:hover .product-card__logo-image {
		filter: none;
	}

	.product-card .machine-placeholder {
		position: absolute;
		top: -80px;
		width: min(300px, 100%);
		margin: 0;
		transform: translateX(-50%);
	}

	.built {
		min-height: 460px;
	}

	.built__panel {
		width: auto;
		margin: 0;
		padding: 30px 24px;
	}

	.built__panel h2,
	.video-channel h2,
	.applications h2,
	.news h2 {
		font-size: 36px;
	}

	.finder {
		padding: 58px 0;
	}

	.finder h2 {
		font-size: 28px;
	}

	.finder h2 span {
		font-size: 82px;
	}

	.finder__row,
	.video-channel,
	.finder__buttons {
		display: flex;
		flex-direction: column;
	}

	.video-channel {
		align-items: stretch;
		gap: 32px;
		padding: 54px 0 32px;
	}

	.quick-links {
		grid-template-columns: 1fr;
	}

	.quick-link {
		aspect-ratio: 2 / 1;
	}

	.video-carousel {
		grid-template-columns: 36px 1fr 36px;
		gap: 8px;
		padding-bottom: 52px;
	}

	.video-cards {
		display: block;
	}

	.video-card {
		display: none;
		min-height: 92px;
	}

	.video-card.is-active,
	.video-card:nth-child(3).is-active {
		display: block;
	}

	.application-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.application-card {
		height: 280px;
		font-size: 20px;
	}

	.news-grid,
	.facebook-grid {
		grid-template-columns: 1fr;
	}
}

.news {
	padding: 70px 0 48px;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.news-card {
	text-align: center;
	background: #fff;
	padding-bottom: 24px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.news-card__image,
.smax-news-card__image {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 1.75 / 1;
	object-fit: cover;
	background:
		linear-gradient(135deg, rgba(249, 101, 6, 0.25), rgba(255, 255, 255, 0.1)),
		repeating-linear-gradient(90deg, #dfe6ea 0 36px, #879baa 36px 72px);
}

.news-card h3 {
	min-height: 76px;
	margin: 18px 22px;
	font-size: 16px;
	line-height: 1.28;
}

.news-card.smax-news-card {
	text-align: left;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 5px;
	box-shadow: 0 3px 20px rgba(26, 35, 40, 0.12);
}

.news-card .smax-news-card__media {
	display: block;
	line-height: 0;
	background: #4a5154;
}

.news-card .smax-news-card__image {
	height: clamp(165px, 12vw, 240px);
	aspect-ratio: auto;
}

.news-card .smax-news-card__body {
	display: flex;
	min-height: 300px;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px 32px 26px;
}

.news-card.smax-news-card h3 {
	min-height: 0;
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.news-card.smax-news-card h3 a {
	color: var(--ink);
	text-decoration: none;
}

.news-card .smax-news-card__body p {
	margin: 0;
	color: #7b7e82;
	font-size: 14px;
	line-height: 1.58;
}

.news-card .smax-news-card__link {
	margin-top: auto;
	color: var(--blue);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.news-card .smax-news-card__date {
	display: block;
	padding: 16px 32px;
	color: #9a9da0;
	border-top: 1px solid #ededed;
	font-size: 14px;
	line-height: 1.35;
}

.news-card.smax-news-card--home {
	border-radius: 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.news-card.smax-news-card--home .smax-news-card__image {
	height: auto;
	aspect-ratio: 1.78 / 1;
}

.news-card.smax-news-card--home .smax-news-card__body {
	min-height: 264px;
	align-items: center;
	padding: 26px 30px 34px;
	text-align: center;
}

.news-card.smax-news-card--home h3 {
	margin: 0;
	font-size: 22px;
	line-height: 1.35;
}

.smax-home-news-card__link {
	display: inline-flex;
	min-width: 220px;
	min-height: 58px;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 0 30px;
	color: #fff;
	border-radius: 999px;
	background: var(--blue);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.smax-home-news-card__link:hover {
	color: #fff;
	background: #c95105;
}

@media (max-width: 900px) {
	.news-grid {
		grid-template-columns: 1fr;
	}

	.news-card .smax-news-card__image {
		height: auto;
		aspect-ratio: 1.75 / 1;
	}

	.news-card .smax-news-card__body {
		min-height: 0;
		padding: 30px 28px 34px;
	}

	.news-card.smax-news-card h3 {
		margin-bottom: 16px;
		font-size: 22px;
	}

	.news-card .smax-news-card__date {
		padding: 17px 28px;
	}

	.news-card.smax-news-card--home .smax-news-card__body {
		min-height: 208px;
		padding: 24px 22px 28px;
	}

	.news-card.smax-news-card--home h3 {
		font-size: 20px;
	}
}

.facebook {
	padding-bottom: 72px;
}

.facebook__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
}

.facebook__heading > .dashicons {
	width: 28px;
	height: 28px;
	font-size: 28px;
	color: var(--ink);
}

.facebook h2 {
	margin: 0;
	font-size: 26px;
}

.facebook-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.facebook-post {
	font-size: 14px;
	color: #626b74;
}

.facebook-grid h3 {
	margin: 0 0 3px;
	color: var(--ink);
	font-size: 15px;
}

.facebook-post__meta {
	min-height: 52px;
}

.facebook-post__meta time {
	color: #7b838b;
	font-size: 12px;
}

.facebook-grid a {
	color: var(--blue);
	font-weight: 800;
}

.service-card {
	display: grid;
	place-content: center;
	height: 360px;
	padding: 28px;
	color: #fff;
	text-align: center;
}

.service-card.has-media::before {
	background: rgba(0, 0, 0, 0.35);
}

.service-card strong {
	font-size: 24px;
	line-height: 1.1;
}

.service-card .service-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0 auto 14px;
	max-width: none;
	color: #fff;
	font-size: 48px;
	line-height: 1;
}

.service-card__icon::before {
	font-family: "Elementskit";
	font-style: normal;
	font-weight: 400;
}

.service-card__icon--settings::before {
	content: "\ea69";
}

.service-card__icon--support::before {
	content: "\ea06";
}

.service-card__icon--cart::before {
	content: "\e9cf";
}

.service-card span {
	max-width: 400px;
	color: #dce3e8;
	font-size: 16px;
	line-height: 1.35;
}

@media (max-width: 560px) {
	.service-band {
		grid-template-columns: 1fr;
	}
}