.front-page-v3 .fpv3-hero, .front-page-v3 .fpv3-hero * {
	box-sizing: border-box;
}

.front-page-v3 .fpv3-hero {
	width: 100%;
	background: #fff;
	padding: 64px 64px 96px;
	overflow: hidden;
}

.front-page-v3 .fpv3-hero__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.front-page-v3 .fpv3-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
	width: 100%;
}

.front-page-v3 .fpv3-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	text-align: center;
}

.front-page-v3 .fpv3-hero__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: rgba(0, 0, 0, .55);
	font-size: var(--gsf-static-md-fs, 16px);
	font-weight: 300;
	line-height: var(--gsf-static-md-lh, 24px);
	letter-spacing: var(--gsf-static-md-ls, .12px);
}

.front-page-v3 .fpv3-hero__rating-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.front-page-v3 .fpv3-hero__rating-item img {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}

.front-page-v3 .fpv3-hero__rating-item strong {
	color: #262626;
	font-weight: 300;
}

.front-page-v3 .fpv3-hero__rating-divider {
	width: 1px;
	height: 16px;
	background: rgba(0, 0, 0, .1);
	flex: 0 0 1px;
}

.front-page-v3 .fpv3-hero__title {
	margin: 0;
	min-width: 100%;
	color: #262626;
	text-align: center;
}

.front-page-v3 .fpv3-hero__title span {
	color: #006746;
}

.front-page-v3 .fpv3-hero__text {
	width: 508px;
	max-width: 680px;
	margin: 0;
	padding-bottom: 8px;
	color: rgba(0, 0, 0, .75);
	text-align: center;
}

.front-page-v3 .fpv3-hero__actions {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
}

.front-page-v3 .fpv3-hero__button {}

.front-page-v3 .fpv3-hero__showcase {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
}

.front-page-v3 .fpv3-hero__tabs {
	width: 248px;
	max-width: 248px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	flex: 0 0 248px;
}

.front-page-v3 .fpv3-hero__tabs-list {
	/* Root of the global tabs component (sd-tabs--vertical-desktop). Tab visuals
       come only from css/style.min.css (.sd-tab); this section owns layout only. */
	width: 100%;
}

.front-page-v3 .fpv3-hero__controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.front-page-v3 .fpv3-hero__control {
	width: 48px;
	height: 48px;
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 999px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

.front-page-v3 .fpv3-hero__control img {
	width: 24px;
	height: 24px;
	display: block;
}

.front-page-v3 .fpv3-hero__control--prev img {
	transform: rotate(180deg);
}

.front-page-v3 .fpv3-hero__image {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	aspect-ratio: 920/511.111;
	position: relative;
}

.front-page-v3 .fpv3-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Splide's core CSS ships `.splide { visibility: hidden }`, only reversed by the
   combination `.is-initialized.is-rendered`. `is-initialized` is added unconditionally
   on mount(), but `is-rendered` is added by a component that Splide skips when
   `destroy: true` applies (desktop, see hero.js breakpoints) — so without this override
   the hero image stays invisible on desktop. */
.front-page-v3 .fpv3-hero__image.splide {
	visibility: visible;
}

.front-page-v3 .fpv3-hero__track {
	height: 100%;
}

.front-page-v3 .fpv3-hero__list {
	display: block;
	height: 100%;
}

.front-page-v3 .fpv3-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .22s ease;
	pointer-events: none;
}

/* `is-current` deliberately does NOT reuse Splide's own `is-active` slide class:
   Splide strips its status classes (is-active/is-visible/is-next/is-prev) from every
   slide when it destroys itself, which it does on every desktop mount and on every
   breakpoint crossing. Owning a separate class keeps the desktop fade independent of
   Splide's lifecycle — the server-rendered slide stays visible even before (or without)
   any JS. */
.front-page-v3 .fpv3-hero__slide.is-current {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 1024px) {
	.front-page-v3 .fpv3-hero {
		padding: 56px 32px 80px;
	}
	
	.front-page-v3 .fpv3-hero__content {
		gap: 56px;
	}
	
	.front-page-v3 .fpv3-hero__showcase {
		gap: 24px;
	}
	
	.front-page-v3 .fpv3-hero__tabs {
		width: 220px;
		max-width: 220px;
		flex-basis: 220px;
	}
}

@media (max-width: 767px) {
	.front-page-v3 .fpv3-hero {
		padding: 48px 0;
	}
	
	.front-page-v3 .fpv3-hero__inner {
		max-width: none;
		padding: 0 20px 0 20px;
	}
	
	.front-page-v3 .fpv3-hero__content {
		align-items: flex-start;
		gap: 48px;
	}
	
	.front-page-v3 .fpv3-hero__copy {
		width: calc(100vw - 40px);
		gap: 16px;
		max-width: 500px;
		margin: 0 auto;
		text-align: center;
	}
	
	.front-page-v3 .fpv3-hero__rating {
		justify-content: flex-start;
		gap: 12px;
		font-size: 16px;
		line-height: 24px;
	}
	
	.front-page-v3 .fpv3-hero__title {
		min-width: 0;
		width: 100%;
		padding-top: 8px;
	}
	
	.front-page-v3 .fpv3-hero__title br {
		display: block;
	}
	
	.front-page-v3 .fpv3-hero__text {
		width: 100%;
		max-width: 330px;
	}
	
	.front-page-v3 .fpv3-hero__actions {
		width: 100%;
		flex-direction: column;
		gap: 16px;
	}
	
	.front-page-v3 .fpv3-hero__button {
		width: 100%;
	}
	
	.front-page-v3 .fpv3-hero__showcase {
		width: 100%;
		flex-direction: column;
		gap: 24px;
		overflow: visible;
	}
	
	.front-page-v3 .fpv3-hero__tabs {
		width: 100%;
		max-width: none;
		flex: 0 0 auto;
		gap: 0;
		overflow: visible;
	}
	
	/*
     * Full-bleed scroller: the hero inner has a 20px side padding, so by default the
     * strip would be clipped 20px away from the screen edge and the tabs would look cut
     * off in mid-air. Negative side margins pull the tabs root out to the viewport
     * edges, while the matching padding on the scrolling list keeps the first/last tab
     * aligned with the rest of the content. width:auto is required — with width:100%
     * the negative margins would only shift the strip instead of widening it.
     */
	.front-page-v3 .fpv3-hero__tabs-list {
		width: auto;
		max-width: none;
		margin-left: -20px;
		margin-right: -20px;
	}
	
	.front-page-v3 .fpv3-hero__tabs-list .sd-tabs__list {
		box-sizing: border-box;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.front-page-v3 .fpv3-hero__controls {
		display: none;
	}
	
	.front-page-v3 .fpv3-hero__image {
		width: 100%;
		flex: 0 0 auto;
		aspect-ratio: 350/194.444;
	}
	
	.front-page-v3 .fpv3-hero__list {
		display: flex;
	}
	
	.front-page-v3 .fpv3-hero__slide {
		position: relative;
		inset: auto;
		opacity: 1;
		pointer-events: auto;
		transition: none;
	}
	
	/* Let the browser handle vertical page scroll natively and hand only
       horizontal drags to Splide, so swiping the hero never blocks page scroll. */
	.front-page-v3 .fpv3-hero__track {
		touch-action: pan-y;
	}
}

@media (max-width: 389px) {
	.front-page-v3 .fpv3-hero {
		background: #fff;
	}
	
	.front-page-v3 .fpv3-hero__image {
		width: calc(100vw - 40px);
	}
}

/* Spacing Padding (Theme Settings / page override) — CSS custom properties set inline per section. */
.fpv3-hero.new-solutions-component-spacing {
	padding-top: var(--ns-desktop-padding-top, 0);
	padding-bottom: var(--ns-desktop-padding-bottom, 0);
}

@media (max-width: 767px) {
	.fpv3-hero.new-solutions-component-spacing {
		padding-top: var(--ns-mobile-padding-top, 0);
		padding-bottom: var(--ns-mobile-padding-bottom, 0);
	}
}