/* HML Homepage Features — Figma Testimonial / 6 / (1440 × 419, looping row) */

.hml-feat {
	--hml-feat-bg: #ffffff;
	--hml-feat-ink: #0b0b0b;
	--hml-feat-title: var(--hml-feat-ink);
	--hml-feat-body-c: var(--hml-feat-ink);
	--hml-feat-note-c: var(--hml-feat-ink);
	--hml-feat-accent: #c60651;
	--hml-feat-line: rgba(11, 11, 11, 0.15);
	--hml-feat-pad-x: calc(64 * var(--hml-u));
	--hml-feat-pad-y: calc(80 * var(--hml-u));
	--hml-feat-max: calc(1312 * var(--hml-u));
	--hml-feat-row-gap: calc(32 * var(--hml-u));
	--hml-feat-item-gap: calc(32 * var(--hml-u));
	--hml-feat-copy-gap: calc(10 * var(--hml-u));
	--hml-feat-item-pad: calc(20 * var(--hml-u));
	--hml-feat-stack-gap: calc(50 * var(--hml-u));
	--hml-feat-list-py: calc(8 * var(--hml-u));
	--hml-feat-tile: 60;
	--hml-feat-icon: calc(var(--hml-feat-tile) * var(--hml-u)) !important;
	--hml-feat-glyph: calc(var(--hml-feat-tile) * 40 / 60 * var(--hml-u)) !important;
	--hml-feat-icon-r: calc(8 * var(--hml-u));
	--hml-feat-h: calc(32 * var(--hml-u));
	--hml-feat-body: calc(18 * var(--hml-u));
	--hml-feat-note: calc(16 * var(--hml-u));
	--hml-feat-loop: 0px;
	--hml-feat-dur: 42s;
	--hml-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hml-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	isolation: isolate;
	overflow: visible;
	width: 100%;
	max-width: 100%;
	background: var(--hml-feat-bg);
	color: var(--hml-feat-ink);
	padding-top: var(--hml-feat-pad-y);
	padding-bottom: var(--hml-feat-pad-y);
	padding-left: max(var(--hml-feat-pad-x), env(safe-area-inset-left, 0px));
	padding-right: max(var(--hml-feat-pad-x), env(safe-area-inset-right, 0px));
	font-family: Inter, "Inter", system-ui, sans-serif;
	font-size: calc(16 * var(--hml-u));
	font-weight: 400;
	letter-spacing: 0;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hml-feat,
.hml-feat *,
.hml-feat *::before,
.hml-feat *::after {
	box-sizing: border-box;
}

.elementor-widget-hml-homepage-features,
.elementor-widget-hml-homepage-features > .elementor-widget-container {
	padding: 0;
	overflow: visible;
}

.hml-feat--fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

html:has(.hml-feat--fullbleed):not(:has(.hml-header--sticky)) {
	overflow-x: clip;
}

.elementor:has(.hml-feat--fullbleed) {
	overflow-x: clip;
}

.elementor-section:has(.elementor-widget-hml-homepage-features) > .elementor-container,
.elementor-inner-section:has(.elementor-widget-hml-homepage-features) > .elementor-container,
.e-con:has(.elementor-widget-hml-homepage-features) {
	max-width: none !important;
	width: 100% !important;
}

.elementor-widget-wrap:has(.elementor-widget-hml-homepage-features),
.e-con-inner:has(.elementor-widget-hml-homepage-features) {
	overflow: visible;
}

.hml-feat__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--hml-feat-stack-gap);
	width: 100%;
	max-width: var(--hml-feat-max);
	min-width: 0;
	margin: 0 auto;
}

.hml-feat--fullbleed .hml-feat__inner {
	max-width: none;
}

.hml-feat--fullbleed .hml-feat__note {
	padding-left: var(--hml-feat-pad-x);
	padding-right: var(--hml-feat-pad-x);
}

.hml-feat__marquee {
	width: 100%;
	min-width: 0;
}

.hml-feat__viewport {
	width: 100%;
	overflow: hidden;
	padding-top: var(--hml-feat-list-py);
	padding-bottom: var(--hml-feat-list-py);
}

.hml-feat__track {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--hml-feat-row-gap);
	width: max-content;
	backface-visibility: hidden;
}

.hml-feat.is-looping .hml-feat__track {
	will-change: transform;
	animation: hml-feat-marquee var(--hml-feat-dur) linear infinite;
}

.hml-feat.is-looping .hml-feat__viewport:focus-within .hml-feat__track,
.hml-feat.is-looping.is-paused .hml-feat__track {
	animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
	.hml-feat.is-looping:not(.hml-feat--no-hover) .hml-feat__viewport:hover .hml-feat__track {
		animation-play-state: paused;
	}
}

@keyframes hml-feat-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--hml-feat-loop)), 0, 0); }
}

.hml-feat__set {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--hml-feat-row-gap);
	flex: 0 0 auto;
	width: max-content;
}

.hml-feat__item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--hml-feat-item-gap);
	flex: 0 0 auto;
	width: max-content;
	max-width: none;
	min-width: 0;
	padding: var(--hml-feat-item-pad);
	text-align: left;
}

.hml-feat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex: 0 0 var(--hml-feat-icon);
	width: var(--hml-feat-icon);
	height: var(--hml-feat-icon);
	border-radius: var(--hml-feat-icon-r);
	background: var(--hml-feat-accent);
	overflow: hidden;
}

.hml-feat__glyph {
	position: relative;
	flex: 0 0 var(--hml-feat-glyph);
	width: var(--hml-feat-glyph);
	height: var(--hml-feat-glyph);
	display: block;
	overflow: visible;
}

.elementor-widget-hml-homepage-features .hml-feat__glyph img,
.hml-feat .hml-feat__glyph img,
.hml-feat .hml-feat__item[data-glyph] .hml-feat__glyph img {
	position: static;
	inset: auto;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
	filter: brightness(0) invert(1);
}

.hml-feat__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hml-feat-copy-gap);
	flex: 0 0 auto;
	min-width: 0;
}

.hml-feat__title {
	margin: 0;
	width: auto;
	font-family: Manrope, Inter, sans-serif;
	font-weight: 700;
	font-size: var(--hml-feat-h);
	line-height: calc(38 * var(--hml-u));
	letter-spacing: calc(0.32 * var(--hml-u));
	color: var(--hml-feat-title);
	white-space: nowrap;
}

.hml-feat__text {
	margin: 0;
	width: auto;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: var(--hml-feat-body);
	line-height: calc(29 * var(--hml-u));
	letter-spacing: 0;
	color: var(--hml-feat-body-c);
	white-space: nowrap;
}

.hml-feat__text strong {
	font-weight: 700;
}

.hml-feat__rule {
	display: block;
	width: 100%;
	height: calc(1 * var(--hml-u));
	min-height: calc(1 * var(--hml-u));
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(11, 11, 11, 0.15);
	background: var(--hml-feat-line);
	flex-shrink: 0;
	align-self: stretch;
}

.hml-feat__rule span {
	display: none;
}

.hml-feat__note {
	margin: 0;
	width: 100%;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: var(--hml-feat-note);
	line-height: calc(26 * var(--hml-u));
	text-align: center;
	color: var(--hml-feat-note-c);
	overflow-wrap: break-word;
	word-break: break-word;
	text-wrap: pretty;
}

.hml-feat [data-hml-enter] {
	opacity: 0;
	transform: translate3d(0, calc(14 * var(--hml-u)), 0);
}

.hml-feat.is-inview [data-hml-enter] {
	animation: hml-feat-enter 0.85s var(--hml-ease-out) forwards;
	animation-delay: var(--hml-d, 0s);
}

.hml-feat__marquee { --hml-d: 0.06s; }
.hml-feat__note { --hml-d: 0.28s; }

@keyframes hml-feat-enter {
	from {
		opacity: 0;
		transform: translate3d(0, calc(14 * var(--hml-u)), 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.hml-feat--no-motion [data-hml-enter] {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

.hml-feat--no-loop .hml-feat__viewport {
	overflow: visible;
	scrollbar-width: none;
}

.hml-feat--no-loop .hml-feat__track {
	animation: none !important;
	transform: none !important;
	width: 100%;
}

.hml-feat--no-loop.hml-feat--fullbleed .hml-feat__inner {
	max-width: var(--hml-feat-max);
	padding-left: var(--hml-feat-pad-x);
	padding-right: var(--hml-feat-pad-x);
}

.hml-feat--no-loop.hml-feat--fullbleed .hml-feat__note {
	padding-left: 0;
	padding-right: 0;
}

.hml-feat--no-loop .hml-feat__set {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	max-width: 100%;
}

.hml-feat--no-loop .hml-feat__item {
	width: auto;
	max-width: 100%;
}

.hml-feat--no-loop .hml-feat__copy {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.hml-feat--no-loop .hml-feat__title,
.hml-feat--no-loop .hml-feat__text {
	white-space: normal;
	overflow-wrap: break-word;
}

@media (max-width: 900px) {
	.hml-feat--no-loop .hml-feat__set {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.hml-feat {
		--hml-feat-pad-x: 48px;
	}

	.hml-feat--fullbleed {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: max(var(--hml-feat-pad-x), env(safe-area-inset-left, 0px));
		padding-right: max(var(--hml-feat-pad-x), env(safe-area-inset-right, 0px));
	}

	.hml-feat--fullbleed .hml-feat__note {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 1024px) {
	.elementor-widget-hml-homepage-features,
	.elementor-widget-hml-homepage-features > .elementor-widget-container {
		min-height: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}

	.hml-feat {
		--hml-feat-pad-x: 40px;
		--hml-feat-pad-y: 64px;
		--hml-feat-stack-gap: 40px;
		--hml-feat-h: 28px;
		--hml-feat-body: 16px;
		overflow: visible;
	}

	.hml-feat__title {
		line-height: 1.2;
		letter-spacing: 0.01em;
	}

	.hml-feat__text,
	.hml-feat__note {
		line-height: 1.6;
	}

	.hml-feat--fullbleed {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: max(var(--hml-feat-pad-x), env(safe-area-inset-left, 0px)) !important;
		padding-right: max(var(--hml-feat-pad-x), env(safe-area-inset-right, 0px)) !important;
	}
}

@media (max-width: 767px) {
	.hml-feat {
		--hml-feat-pad-x: 20px;
		--hml-feat-pad-y: 48px;
		--hml-feat-stack-gap: 32px;
		--hml-feat-h: 22px;
		--hml-feat-icon: 48px !important;
		--hml-feat-glyph: 32px !important;
		--hml-feat-item-pad: 12px;
		--hml-feat-item-gap: 16px;
		--hml-feat-row-gap: 16px;
		--hml-feat-note: 14px;
	}

	.hml-feat__title {
		font-size: var(--hml-feat-h);
		line-height: 1.2;
		letter-spacing: 0.01em;
	}

	.hml-feat__text {
		line-height: 1.6;
	}

	.hml-feat__note {
		line-height: 1.6;
	}

}

@media (max-width: 380px) {
	.hml-feat {
		--hml-feat-h: 20px;
		--hml-feat-pad-x: 16px;
		--hml-feat-icon: 44px !important;
		--hml-feat-glyph: 30px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hml-feat [data-hml-enter],
	.hml-feat.is-inview [data-hml-enter],
	.hml-feat__track,
	.hml-feat.is-looping .hml-feat__track {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.hml-feat__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}
