/* ============================================================================
   assets/css/pages/home.css — PAGE-SCOPED STYLES, HOMEPAGE ONLY
   Enqueued conditionally when is_front_page() (see inc/enqueue.php).
   Every rule is scoped under `.page-home` (added via body_class()) →
   zero global CSS pollution. A future page-branding.php + branding.css
   will never collide with a single rule in this file.
   ============================================================================ */

/* ----------------------------------------------------------------- reveal */
.page-home [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
	transition: opacity 0.95s var(--ease, cubic-bezier(0.16,1,0.3,1)), transform 0.95s var(--ease, cubic-bezier(0.16,1,0.3,1));
}
.page-home [data-reveal="fade"] { transform: translate3d(0, 12px, 0); }
.page-home [data-reveal].is-in { opacity: 1; transform: none; }
/* scrub elements own their transform; reveal only fades opacity */
.page-home [data-reveal][data-scrub] { transform: none; transition-property: opacity; }
.page-home [data-reveal][data-scrub].is-in { opacity: 1; }

/* --------------------------------------------------------- spotlight cards */
.page-home [data-spot] { position: relative; overflow: hidden; }
.page-home [data-spot]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		340px circle at var(--mx, 50%) var(--my, 50%),
		color-mix(in srgb, var(--brand-400) 13%, transparent),
		transparent 65%
	);
	opacity: 0;
	transition: opacity 0.45s;
	pointer-events: none;
	z-index: 0;
}
.page-home [data-spot]:hover::before { opacity: 1; }
.page-home [data-spot] > * { position: relative; z-index: 1; }

/* ==================================================================== HERO */
.page-home .hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: clamp(120px, 16vh, 170px);
	padding-bottom: 40px;
	overflow: clip;
}
.page-home .hero-bg { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.page-home .hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(color-mix(in srgb, var(--mist-200) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--mist-200) 5%, transparent) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(ellipse 85% 65% at 50% 34%, #000 25%, transparent 78%);
}
.page-home .hero-noise {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.page-home .blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	will-change: transform;
	pointer-events: none;
}
.page-home .blob-a {
	width: 560px; height: 560px;
	top: -180px; right: -120px;
	background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--brand-500) 55%, transparent), transparent 68%);
	animation: home-drift-a 16s ease-in-out infinite alternate;
}
.page-home .blob-b {
	width: 480px; height: 480px;
	bottom: -140px; left: -140px;
	background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--neon-500) 42%, transparent), transparent 66%);
	animation: home-drift-b 19s ease-in-out infinite alternate;
}
.page-home .blob-c {
	width: 320px; height: 320px;
	top: 34%; left: 16%;
	background: radial-gradient(circle, color-mix(in srgb, #e14d9e 34%, transparent), transparent 70%);
	animation: home-drift-c 22s ease-in-out infinite alternate;
}
@keyframes home-drift-a { to { transform: translate3d(-90px, 70px, 0) scale(1.12); } }
@keyframes home-drift-b { to { transform: translate3d(110px, -60px, 0) scale(0.92); } }
@keyframes home-drift-c { to { transform: translate3d(60px, 90px, 0) scale(1.15); } }

.page-home .hero-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		520px circle at var(--mx, 70%) var(--my, 30%),
		color-mix(in srgb, var(--brand-400) 12%, transparent),
		transparent 62%
	);
}

.page-home .hero h1 {
	margin-top: 26px;
	max-width: 810px;
	font-size: clamp(2.5rem, 7vw, 4.9rem);
	font-weight: 900;
	line-height: 1.35;
	color: #fff;
	text-wrap: balance;
}
.page-home .hero h1 .grad {
	background: linear-gradient(100deg, var(--brand-300) 0%, var(--neon-400) 60%, #9ef2ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.page-home .hero-lead {
	margin-top: 26px;
	max-width: 640px;
	font-size: clamp(1rem, 1.8vw, 1.15rem);
	line-height: 2.1;
	color: var(--mist-400);
}
.page-home .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.page-home .hero-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
	font-size: 14px;
	color: var(--mist-400);
}
.page-home .hero-rating .stars { display: inline-flex; gap: 3px; color: #ffc94d; }
.page-home .avatars { display: flex; }
.page-home .avatars i {
	width: 34px; height: 34px;
	margin-left: -9px;
	border-radius: 50%;
	border: 2px solid var(--ink-900);
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
}
.page-home .avatar-hue-1 { background: linear-gradient(135deg, #7c6cff, #38e1ff); }
.page-home .avatar-hue-2 { background: linear-gradient(135deg, #e14d9e, #7c6cff); }
.page-home .avatar-hue-3 { background: linear-gradient(135deg, #f2a344, #e14d9e); }
.page-home .avatar-hue-4 { background: linear-gradient(135deg, #2dd4a7, #38e1ff); }
.page-home .hero-rating b { color: #fff; font-weight: 800; }

.page-home .hero-stats {
	margin-top: clamp(44px, 7vh, 72px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--line);
	list-style: none;
}
.page-home .hero-stats li {
	padding: clamp(18px, 3vw, 30px) 12px;
	background: var(--card-bg);
	backdrop-filter: blur(10px);
	text-align: center;
}
.page-home .hero-stats strong {
	display: block;
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	font-weight: 900;
	background: linear-gradient(120deg, #fff, var(--neon-300));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.page-home .hero-stats li > span {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--mist-400);
}

/* trust marquee */
.page-home .trust { margin-top: clamp(40px, 6vh, 64px); }
.page-home .trust > p {
	text-align: center;
	font-size: 13px;
	color: var(--mist-500);
	letter-spacing: 0.02em;
}
.page-home .marquee {
	margin-top: 22px;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.page-home .marquee-track {
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	direction: ltr; /* RTL-safe travel math */
	animation: home-marquee 26s linear infinite;
}
.page-home .marquee:hover .marquee-track { animation-play-state: paused; }
.page-home .marquee-batch { display: inline-flex; gap: 14px; padding: 0; }
@keyframes home-marquee {
	/* 2 copies → travel exactly one copy width for a seamless loop */
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@keyframes home-marquee-3 {
	/* JS sets --marquee-distance to the exact pixel width of one batch. */
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--marquee-distance, 0px)), 0, 0); }
}
@keyframes home-marquee-3-rev {
	from { transform: translate3d(calc(-1 * var(--marquee-distance, 0px)), 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}
.page-home .brand-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgb(255 255 255 / 0.025);
	font-weight: 700;
	font-size: 15px;
	color: var(--mist-400);
	transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.page-home .brand-chip::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: linear-gradient(120deg, var(--brand-400), var(--neon-400));
	opacity: 0.65;
}
.page-home .brand-chip:hover { color: #fff; transform: translateY(-2px); }

.page-home .scroll-cue {
	position: absolute;
	bottom: 26px;
	right: 50%;
	transform: translateX(50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--mist-500);
	font-size: 11px;
	letter-spacing: 0.14em;
}
.page-home .scroll-cue i {
	width: 1px; height: 44px;
	background: linear-gradient(var(--neon-400), transparent);
	animation: home-cue 2s var(--ease) infinite;
}
@keyframes home-cue {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ================================================================== WHY US */
.page-home .why-grid {
	margin-top: clamp(44px, 6vw, 70px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	list-style: none;
}
.page-home .why-card {
	height: 100%;
	padding: 30px 26px 34px;
	border-radius: 22px;
	border: 1px solid var(--line);
	background: var(--card-bg);
	backdrop-filter: blur(8px);
	transition: border-color 0.4s, box-shadow 0.4s;
}
.page-home .why-card:hover {
	border-color: color-mix(in srgb, var(--brand-400) 40%, transparent);
	box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.8);
}
.page-home .why-icon {
	width: 52px; height: 52px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	color: var(--neon-300);
	background: linear-gradient(140deg, color-mix(in srgb, var(--brand-500) 26%, transparent), color-mix(in srgb, var(--neon-500) 14%, transparent));
	border: 1px solid color-mix(in srgb, var(--brand-400) 30%, transparent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.page-home .why-card h3 {
	margin-top: 20px;
	font-size: 1.06rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.7;
}
.page-home .why-card p {
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 2;
	color: var(--mist-400);
}
@media (min-width: 1024px) {
	.page-home .why-grid > li:nth-child(even) { margin-top: 44px; }
}

/* ================================================================ SERVICES */
.page-home .services { position: relative; }
.page-home .services-pin { position: relative; }
@media (min-width: 1024px) {
	.page-home .services-pin.is-pinned { height: 340vh; }
	.page-home .services-pin.is-pinned .services-sticky {
		position: sticky;
		top: 0;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: clip;
	}
}
.page-home .services-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}
.page-home .services-hint {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--mist-500);
	padding-bottom: 8px;
}
.page-home .services-hint .icon { animation: home-hint 1.6s ease-in-out infinite; }
@keyframes home-hint { 50% { transform: translateY(5px); opacity: 0.5; } }

.page-home .services-viewport { margin-top: clamp(38px, 5vw, 56px); }
@media (max-width: 1023.98px) {
	.page-home .services-viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 18px;
		scrollbar-width: none;
		margin-right: -4vw;
		padding-right: 4vw;
	}
	.page-home .services-viewport::-webkit-scrollbar { display: none; }

	/* On mobile the section is pinned too: normal vertical page scrolling
	   advances the cards horizontally, matching the desktop interaction. */
	.page-home .services-pin.is-pinned { height: 360vh; }
	.page-home .services-pin.is-pinned .services-sticky {
		position: sticky;
		top: 0;
		height: 100svh;
		min-height: 620px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
	}
	.page-home .services-pin.is-pinned .services-viewport {
		overflow: hidden;
		scroll-snap-type: none;
		margin-right: 0;
		padding-right: 0;
	}
	.page-home .services-pin.is-pinned .services-track {
		transform: translate3d(0,0,0);
	}
}
.page-home .services-track {
	display: flex;
	gap: 20px;
	width: max-content;
	will-change: transform;
	list-style: none;
}
.page-home .service-card {
	position: relative;
	width: clamp(300px, 30vw, 392px);
	min-height: 380px;
	display: flex;
	flex-direction: column;
	padding: 34px 30px;
	border-radius: 26px;
	border: 1px solid var(--line);
	background: linear-gradient(165deg, var(--card-bg), color-mix(in srgb, var(--ink-950) 55%, transparent));
	overflow: hidden;
	scroll-snap-align: start;
	transition: border-color 0.4s;
}
.page-home .service-card:hover { border-color: color-mix(in srgb, var(--neon-400) 36%, transparent); }
.page-home .service-num {
	position: absolute;
	top: 8px;
	left: 14px;
	font-size: 6.4rem;
	font-weight: 900;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--mist-200) 16%, transparent);
	pointer-events: none;
}
.page-home .service-icon {
	width: 58px; height: 58px;
	display: grid;
	place-items: center;
	border-radius: 17px;
	color: #fff;
	background: linear-gradient(135deg, var(--brand-500), var(--neon-500));
	box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--brand-500) 70%, transparent),
		inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.page-home .service-card h3 {
	margin-top: auto;
	padding-top: 44px;
	font-size: 1.32rem;
	font-weight: 850;
	color: #fff;
}
.page-home .service-card > p {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 2.05;
	color: var(--mist-400);
	min-height: 84px;
}
.page-home .service-link {
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 700;
	color: var(--neon-300);
	width: fit-content;
}
.page-home .service-link span { position: relative; }
.page-home .service-link span::after {
	content: "";
	position: absolute;
	right: 0; bottom: -4px;
	width: 100%; height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--ease);
}
.page-home .service-link:hover span::after { transform: scaleX(1); }

.page-home .services-progress {
	margin-top: 34px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.page-home .services-progress .bar {
	position: relative;
	flex: 1;
	height: 3px;
	border-radius: 3px;
	background: var(--line);
	overflow: hidden;
}
.page-home .services-progress .bar i {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 6%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--brand-400), var(--neon-400));
	transition: width 0.15s linear;
}
.page-home .services-progress b {
	font-size: 13px;
	font-weight: 800;
	color: var(--mist-400);
	font-variant-numeric: tabular-nums;
}
.page-home .services-progress b em { font-style: normal; color: var(--mist-500); }

/* =============================================================== PORTFOLIO */
.page-home .portfolio-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.page-home .ptabs { display: flex; flex-wrap: wrap; gap: 9px; }
.page-home .ptab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgb(255 255 255 / 0.02);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--mist-400);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
}
.page-home .ptab small {
	font-size: 10.5px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.06);
	color: var(--mist-500);
	transition: background 0.3s, color 0.3s;
}
.page-home .ptab:hover { color: #fff; transform: translateY(-2px); }
.page-home .ptab.is-active {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(120deg, var(--brand-500), var(--brand-600));
	box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--brand-500) 70%, transparent);
}
.page-home .ptab.is-active small { background: rgb(255 255 255 / 0.18); color: #fff; }

.page-home .pgrid {
	margin-top: clamp(36px, 5vw, 54px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	min-height: 200px;
}
.page-home .pcard {
	display: block;
	border-radius: 22px;
	border: 1px solid var(--line);
	background: var(--card-bg);
	overflow: hidden;
	transition: border-color 0.4s, box-shadow 0.5s;
}
.page-home .pcard:hover {
	border-color: color-mix(in srgb, var(--brand-400) 42%, transparent);
	box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.85);
}
.page-home .pcard-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.page-home .pcard-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 0.9s var(--ease);
}
.page-home .pcard:hover .pcard-media img { transform: scale(1.08); }
.page-home .pcard-noimg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--brand-300);
	background: linear-gradient(140deg, color-mix(in srgb, var(--brand-500) 22%, transparent), color-mix(in srgb, var(--neon-500) 12%, transparent));
}
.page-home .pcard-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--ink-950) 62%, transparent), transparent 46%);
}
.page-home .pcard-term {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: color-mix(in srgb, var(--ink-950) 62%, transparent);
	border: 1px solid rgb(255 255 255 / 0.16);
	backdrop-filter: blur(8px);
}
.page-home .pcard-goto {
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 2;
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var(--brand-500), var(--neon-500));
	transform: translateY(10px) rotate(-45deg);
	opacity: 0;
	transition: transform 0.45s var(--ease), opacity 0.35s;
}
.page-home .pcard:hover .pcard-goto { transform: translateY(0) rotate(0); opacity: 1; }
.page-home .pcard-body { padding: 20px 22px 24px; }
.page-home .pcard-meta {
	display: flex;
	justify-content: space-between;
	font-size: 11.5px;
	color: var(--mist-500);
}
.page-home .pcard-body h3 {
	margin-top: 10px;
	font-size: 1.12rem;
	font-weight: 850;
	color: #fff;
}
.page-home .pcard-body > p {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.95;
	color: var(--mist-400);
	min-height: 50px;
}

/* skeleton + empty */
.page-home .pskel { border-radius: 22px; border: 1px solid var(--line); overflow: hidden; }
.page-home .pskel .im { aspect-ratio: 4/3; }
.page-home .pskel .ln { height: 13px; border-radius: 7px; margin: 16px 20px; }
.page-home .pskel .ln.short { width: 42%; margin-top: 4px; margin-bottom: 24px; }
.page-home .shimmer {
	background: linear-gradient(100deg, rgb(255 255 255 / 0.035) 30%, rgb(255 255 255 / 0.1) 50%, rgb(255 255 255 / 0.035) 70%);
	background-size: 220% 100%;
	animation: home-shimmer 1.5s linear infinite;
}
@keyframes home-shimmer { to { background-position: -220% 0; } }

.page-home .pempty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 70px 24px;
	border-radius: 22px;
	border: 1.5px dashed var(--line);
	color: var(--mist-400);
}
.page-home .pempty .icon { color: var(--mist-500); }
.page-home .pempty h3 { margin-top: 18px; font-weight: 800; color: var(--mist-200); }
.page-home .pempty p { margin-top: 8px; font-size: 13.5px; }

/* ============================================================ TESTIMONIALS */
.page-home .voices { overflow: clip; }
.page-home .voices-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 60% 45% at 50% 42%, color-mix(in srgb, var(--brand-500) 9%, transparent), transparent 70%);
}
.page-home .voices-lane {
	margin-top: clamp(40px, 6vw, 60px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.page-home .voice-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.page-home .voice-track {
	display: flex;
	gap: 18px;
	width: max-content;
	direction: ltr;
	animation: home-marquee-3 46s linear infinite;
}
.page-home .voice-track.reverse { animation-name: home-marquee-3-rev; }
.page-home .voices .marquee-batch { gap: 18px; padding: 0; }
.page-home .voice-marquee:hover .voice-track { animation-play-state: paused; }
.page-home .voice-card {
	width: min(400px, 82vw);
	padding: 26px 26px 22px;
	border-radius: 22px;
	border: 1px solid var(--line);
	background: var(--card-bg);
	backdrop-filter: blur(8px);
	transition: border-color 0.35s;
}
.page-home .voice-card:hover { border-color: color-mix(in srgb, var(--brand-400) 35%, transparent); }
.page-home .voice-card > .icon { color: var(--brand-300); }
.page-home .voice-card blockquote p {
	margin-top: 14px;
	font-size: 14px;
	line-height: 2.05;
	color: var(--mist-200);
}
.page-home .voice-card figcaption {
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px dashed var(--line);
}
.page-home .voice-ava {
	width: 42px; height: 42px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 900;
	color: #fff;
	background: linear-gradient(135deg, var(--brand-500), var(--neon-500));
}
.page-home .voice-card figcaption strong { display: block; font-size: 13.5px; color: #fff; }
.page-home .voice-card figcaption small { font-size: 11.5px; color: var(--mist-500); }

/* ================================================================= ARTICLES */
.page-home .agrid {
	margin-top: clamp(38px, 5vw, 56px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.page-home .acard {
	display: flex;
	flex-direction: column;
	border-radius: 22px;
	border: 1px solid var(--line);
	background: var(--card-bg);
	overflow: hidden;
	transition: border-color 0.4s, transform 0.5s var(--ease);
}
.page-home .acard:hover {
	border-color: color-mix(in srgb, var(--neon-400) 34%, transparent);
	transform: translateY(-6px);
}
.page-home .acard .media { position: relative; aspect-ratio: 16/10; overflow: hidden; display: block; background: linear-gradient(140deg, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent); }
.page-home .acard .media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}
.page-home .acard:hover .media img { transform: scale(1.07); }
.page-home .acard .cat {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: color-mix(in srgb, var(--ink-950) 60%, transparent);
	border: 1px solid rgb(255 255 255 / 0.16);
	backdrop-filter: blur(8px);
}
.page-home .acard .body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.page-home .acard h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.85; color: #fff; }
.page-home .acard h3 a {
	color: inherit;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1.5px;
	background-repeat: no-repeat;
	background-position: right bottom;
	transition: background-size 0.5s var(--ease);
}
.page-home .acard:hover h3 a { background-size: 100% 1.5px; }
.page-home .acard .excerpt {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.95;
	color: var(--mist-400);
	flex: 1;
}
.page-home .acard .meta {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px dashed var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 11.5px;
	color: var(--mist-500);
}
.page-home .acard .meta-item { display: inline-flex; align-items: center; gap: 6px; }

/* ==================================================================== FAQ */
.page-home .faq-wrap {
	margin-top: clamp(38px, 5vw, 54px);
	max-width: 780px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-home .faq-item {
	border-radius: 18px;
	border: 1px solid var(--line);
	background: var(--card-bg);
	overflow: clip;
	transition: border-color 0.35s;
}
.page-home .faq-item.is-open { border-color: color-mix(in srgb, var(--brand-400) 38%, transparent); }
.page-home .faq-item h3 { font-size: inherit; }
.page-home .faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 22px;
	font-size: 14.5px;
	font-weight: 750;
	color: var(--mist-200);
	text-align: right;
	cursor: pointer;
	transition: color 0.3s;
}
.page-home .faq-item.is-open .faq-q { color: #fff; }
.page-home .faq-q .ic {
	flex-shrink: 0;
	width: 34px; height: 34px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	border: 1px solid var(--line);
	color: var(--brand-300);
	transition: transform 0.45s var(--ease), background 0.3s, color 0.3s;
}
.page-home .faq-item.is-open .faq-q .ic {
	transform: rotate(135deg);
	background: linear-gradient(135deg, var(--brand-500), var(--neon-500));
	color: #fff;
	border-color: transparent;
}
.page-home .faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.55s var(--ease);
}
.page-home .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.page-home .faq-a > div { overflow: hidden; }
.page-home .faq-a p {
	padding: 0 22px 22px;
	font-size: 13.5px;
	line-height: 2.05;
	color: var(--mist-400);
}
.page-home .faq-ask { margin-top: 30px; text-align: center; font-size: 13.5px; color: var(--mist-500); }
.page-home .faq-ask a { color: var(--neon-300); font-weight: 700; }

/* ================================================================= CONTACT */
.page-home .contact { overflow: clip; }
.page-home .contact-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 55% 60% at 88% 10%, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 68%),
		radial-gradient(ellipse 50% 55% at 8% 90%, color-mix(in srgb, var(--neon-500) 10%, transparent), transparent 70%);
}
.page-home .contact-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(30px, 5vw, 72px);
	align-items: start;
}
.page-home .perks { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; list-style: none; }
.page-home .perks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--mist-200);
}
.page-home .perks .tick {
	width: 30px; height: 30px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 10px;
	color: var(--neon-300);
	background: color-mix(in srgb, var(--neon-500) 13%, transparent);
	border: 1px solid color-mix(in srgb, var(--neon-400) 30%, transparent);
}

/* estimator */
.page-home .est {
	position: relative;
	border-radius: 28px;
	border: 1px solid var(--line);
	background: linear-gradient(170deg, color-mix(in srgb, var(--ink-800) 88%, transparent), color-mix(in srgb, var(--ink-950) 72%, transparent));
	backdrop-filter: blur(16px);
	padding: clamp(24px, 3.4vw, 36px);
	overflow: clip;
}
.page-home .est::before {
	content: "";
	position: absolute;
	inset-inline: 0; top: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--brand-400), var(--neon-400), transparent);
}
.page-home .est-steps { display: flex; align-items: center; gap: 8px; list-style: none; width: 100%; margin: 0 0 12px; padding: 0; }
.page-home .est-steps .dot {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--mist-500);
}
.page-home .est-steps .dot i {
	width: 26px; height: 26px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-style: normal;
	font-size: 11px;
	border: 1.5px solid var(--line);
	transition: all 0.4s var(--ease);
}
.page-home .est-steps .dot::after {
	content: "";
	flex: 1;
	height: 1.5px;
	background: var(--line);
	transition: background 0.4s;
}
.page-home .est-steps .dot:last-child::after { display: none; }
.page-home .est-steps .dot.is-active { color: #fff; }
.page-home .est-steps .dot.is-active i {
	background: linear-gradient(135deg, var(--brand-500), var(--neon-500));
	border-color: transparent;
	color: #fff;
}
.page-home .est-steps .dot.is-done { color: var(--neon-300); }
.page-home .est-steps .dot.is-done i { border-color: var(--neon-400); color: var(--neon-300); }

.page-home .est-title { margin-top: 26px; font-size: 1.14rem; font-weight: 850; color: #fff; }
.page-home .est-sub { margin-top: 8px; font-size: 12.5px; color: var(--mist-500); line-height: 1.9; }
.page-home .step-anim { animation: home-step 0.55s var(--ease) both; }
@keyframes home-step {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to { opacity: 1; transform: none; }
}

/* step 1 */
.page-home .types { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.page-home .type-opt { position: relative; cursor: pointer; display: block; }
.page-home .type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.page-home .type-opt .box {
	display: flex;
	flex-direction: column;
	gap: 5px;
	height: 100%;
	padding: 15px 16px;
	border-radius: 15px;
	border: 1.5px solid var(--line);
	background: rgb(255 255 255 / 0.02);
	transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.page-home .type-opt:hover .box { transform: translateY(-2px); }
.page-home .type-opt .box b { font-size: 13.5px; font-weight: 800; color: var(--mist-200); }
.page-home .type-opt .box small { font-size: 11px; color: var(--mist-500); line-height: 1.7; }
.page-home .type-opt input:checked + .box {
	border-color: var(--brand-400);
	background: color-mix(in srgb, var(--brand-500) 14%, transparent);
	box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--brand-500) 60%, transparent);
}
.page-home .type-opt input:checked + .box b { color: #fff; }
.page-home .type-opt input:focus-visible + .box { outline: 2px solid var(--neon-400); outline-offset: 2px; }

/* step 2 */
.page-home .chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 9px; }
.page-home .chip-opt { position: relative; cursor: pointer; }
.page-home .chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.page-home .chip-opt .chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: rgb(255 255 255 / 0.02);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--mist-400);
	transition: all 0.3s var(--ease);
}
.page-home .chip-opt .chip::before { content: "+"; font-weight: 400; font-size: 15px; color: var(--mist-500); }
.page-home .chip-opt input:checked + .chip {
	border-color: var(--neon-400);
	color: #fff;
	background: color-mix(in srgb, var(--neon-500) 15%, transparent);
}
.page-home .chip-opt input:checked + .chip::before { content: "✓"; color: var(--neon-300); }
.page-home .chip-opt input:focus-visible + .chip { outline: 2px solid var(--neon-400); outline-offset: 2px; }

.page-home .seg { margin-top: 24px; }
.page-home .seg > span { display: block; font-size: 13px; font-weight: 800; color: var(--mist-200); margin-bottom: 12px; }
.page-home .seg-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.page-home .seg-opt { position: relative; cursor: pointer; }
.page-home .seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.page-home .seg-opt .lab {
	display: block;
	padding: 12px 10px;
	border-radius: 13px;
	border: 1.5px solid var(--line);
	background: rgb(255 255 255 / 0.02);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: var(--mist-400);
	transition: all 0.3s;
}
.page-home .seg-opt input:checked + .lab {
	border-color: var(--brand-400);
	color: #fff;
	background: color-mix(in srgb, var(--brand-500) 14%, transparent);
}
.page-home .seg-opt input:focus-visible + .lab { outline: 2px solid var(--neon-400); outline-offset: 2px; }

/* step 3 */
.page-home .fields { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.page-home .field { display: flex; flex-direction: column; gap: 7px; }
.page-home .field.full { grid-column: 1 / -1; }
.page-home .field label { font-size: 12.5px; font-weight: 700; color: var(--mist-200); }
.page-home .field label i { font-style: normal; color: var(--neon-400); }
.page-home .field label small { color: var(--mist-500); }
.page-home .field input,
.page-home .field textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: 13px;
	border: 1.5px solid var(--line);
	background: rgb(255 255 255 / 0.03);
	color: #fff;
	font-size: 14px;
	transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.page-home .field input::placeholder,
.page-home .field textarea::placeholder { color: var(--mist-500); }
.page-home .field input:focus,
.page-home .field textarea:focus {
	outline: none;
	border-color: var(--brand-400);
	background: rgb(255 255 255 / 0.05);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.page-home .field.has-error input,
.page-home .field.has-error textarea { border-color: #ff6b81; box-shadow: 0 0 0 4px rgb(255 107 129 / 0.12); }
.page-home .field .err { display: none; font-size: 11.5px; color: #ff8ba0; }
.page-home .field.has-error .err { display: block; animation: home-step 0.35s var(--ease); }
.page-home .field-note { margin-top: 4px; font-size: 11px; color: var(--mist-500); line-height: 1.8; }

/* honeypot must be invisible to humans */
.hp-field {
	position: absolute !important;
	inset-inline-start: -9999px !important;
	height: 0 !important;
	width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
}

/* footer buttons + error */
.page-home .est-foot { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.page-home .est-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 14px;
	border: 1px solid var(--line);
	color: var(--mist-400);
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}
.page-home .est-back:hover { color: #fff; border-color: var(--mist-500); }
.page-home .est-back[disabled] { opacity: 0.35; pointer-events: none; }
.page-home .est-step-error {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 12.5px;
	color: #ffb3c0;
	background: rgb(255 107 129 / 0.08);
	border: 1px solid rgb(255 107 129 / 0.25);
	animation: home-step 0.4s var(--ease);
}
.page-home .est-step-error[hidden] { display: none; }

/* result */
.page-home .est-result { text-align: center; padding-block: 10px; }
.page-home .est-result .range {
	margin-top: 18px;
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 10px;
	font-size: clamp(1.4rem, 3.4vw, 2rem);
	font-weight: 900;
	background: linear-gradient(110deg, var(--brand-300), var(--neon-300));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.page-home .est-result .range small { font-size: 0.5em; color: var(--mist-500); -webkit-text-fill-color: var(--mist-500); }
.page-home .est-result .hint { margin-top: 12px; font-size: 12px; color: var(--mist-500); line-height: 1.9; }
.page-home .est-meta {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: var(--mist-400);
}
.page-home .est-meta > span {
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgb(255 255 255 / 0.03);
}
.page-home .est-meta b { color: #fff; font-weight: 800; }

.page-home .est-success { text-align: center; padding-block: 24px; }
.page-home .success-mark {
	width: 76px; height: 76px;
	margin-inline: auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, #2dd4a7, var(--neon-500));
	box-shadow: 0 18px 48px -14px rgb(45 212 167 / 0.65);
	animation: home-pop 0.7s var(--ease) both;
}
@keyframes home-pop {
	from { transform: scale(0.4); opacity: 0; }
	60% { transform: scale(1.08); }
	to { transform: scale(1); opacity: 1; }
}
.page-home .est-success h3 { margin-top: 22px; font-size: 1.3rem; font-weight: 900; color: #fff; }
.page-home .est-success p { margin-top: 12px; font-size: 13px; line-height: 2; color: var(--mist-400); max-width: 380px; margin-inline: auto; }
.page-home .est-success .ticket { color: #fff; }
.page-home .est-success .btn, .page-home .est-success .reset { margin-top: 24px; }

.page-home .spinner {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 2px solid rgb(255 255 255 / 0.35);
	border-top-color: #fff;
	animation: home-spin 0.8s linear infinite;
	display: inline-block;
}
@keyframes home-spin { to { transform: rotate(360deg); } }

/* ============================================================ RESPONSIVE */
@media (max-width: 1023.98px) {
	.page-home .why-grid { grid-template-columns: 1fr 1fr; }
	.page-home .pgrid { grid-template-columns: 1fr 1fr; }
	.page-home .agrid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
	.page-home .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.page-home .hero-stats { grid-template-columns: 1fr 1fr; }
	.page-home .why-grid { grid-template-columns: 1fr; }
	.page-home .pgrid { grid-template-columns: 1fr; }
	.page-home .fields { grid-template-columns: 1fr; }
	.page-home .types { grid-template-columns: 1fr; }
	.page-home .seg-opts { grid-template-columns: 1fr; }
	.page-home .est-steps .dot span { display: none; }
	.page-home .est-steps .dot::after { margin-inline: 4px; }
	.page-home .hero { min-height: auto; }
}

/* ----------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.page-home [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.page-home .blob,
	.page-home .scroll-cue i,
	.page-home .services-hint .icon { animation: none !important; }
	.page-home .marquee-track,
	.page-home .voice-track { animation: none !important; }
	.page-home [data-dup] { display: none !important; }
	.page-home .services-pin.is-pinned { height: auto !important; }
	.page-home .services-pin.is-pinned .services-sticky { position: static !important; height: auto !important; }
	.page-home .services-viewport { overflow-x: auto; }
}


/* ===== Combecom custom fixes ===== */
.page-home .hero { padding-bottom: 90px; }
.page-home .scroll-cue { position: relative; bottom:auto; right:auto; transform:none; margin:34px auto 0; }
.page-home .trust { position: relative; }

/* Portfolio header: title/lead first, tabs underneath. */
.page-home .portfolio-head {
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:20px;
}
.page-home .portfolio-head .section-head { width:100%; }
.page-home .ptabs { width:100%; justify-content:flex-start; }

/* Articles keep their CTA beside the section heading. */
.page-home .article-head {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:28px;
	flex-wrap:wrap;
}
.page-home .article-head .section-head { flex:1 1 0; min-width:0; }
.page-home .article-head > .btn { flex:0 0 auto; width:auto; align-self:flex-end; }

/* ==========================================================
 * Seamless infinite marquees
 * Each track contains 3 identical batches. The animation travels
 * exactly one batch (33.3333% of the track), then repeats with no
 * delay/pause. Every batch has the same dimensions so the reset is
 * visually indistinguishable.
 * ========================================================== */
.page-home .marquee-track,
.page-home .voice-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	width: max-content;
	will-change: transform;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-fill-mode: both;
}
.page-home .marquee-batch {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 14px;
	padding: 0;
}
.page-home .marquee-track { animation: home-marquee-3 26s linear infinite; }
.page-home .voice-track { animation: home-marquee-3 55s linear infinite; }
.page-home .voice-card,
.page-home .voice-card * { direction: rtl; text-align: right; }
.page-home .voice-card figcaption { justify-content: flex-start; }

/* Testimonials are a single horizontal infinite lane. */
.page-home .voices-lane { display: block; }
.page-home .voices .voice-marquee { width: 100%; }
.page-home .voices .voice-track { flex-wrap: nowrap; width: max-content; }
.page-home .voices .marquee-batch {
	display: flex;
	flex: 0 0 auto;
	gap: 18px;
	padding: 0;
}
.page-home .voice-marquee:hover .voice-track,
.page-home .marquee:hover .marquee-track { animation-play-state: paused; }

/* Estimator: prevent grid/flex children from forcing the page wider than the viewport. */
.page-home .contact-grid > *,
.page-home .est,
.page-home #est-form,
.page-home .fields,
.page-home .field { min-width:0; }
.page-home .contact-grid,
.page-home .est { max-width:100%; }
.page-home input,
.page-home textarea,
.page-home select,
.page-home button { box-sizing:border-box; max-width:100%; }

@media(max-width:768px){
	.page-home .hero { overflow:hidden; }
	.page-home .scroll-cue { display:flex; }
	.page-home .ptabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; }
	.page-home .ptabs::-webkit-scrollbar { display:none; }

	.page-home .article-head {
		align-items:stretch;
		gap:18px;
	}
	.page-home .article-head > .btn {
		width:100%;
		align-self:stretch;
	}

	/* Keep both requested marquees moving on mobile during normal vertical page scrolling. */
	.page-home .marquee-track { animation-duration:22s; animation-delay:0s; }
	.page-home .voice-track { animation-duration:48s; animation-delay:0s; }

	/* Compact testimonial cards: one row, no second lane. */
	.page-home .voices-lane { margin-top:32px; }
	.page-home .voice-card { width:min(340px,78vw); padding:22px 20px 18px; }

	/* Mobile estimator: buttons wrap instead of overflowing left/right. */
	.page-home .est {
		width:100%;
		padding:22px 16px;
		overflow:hidden;
	}
	.page-home .est-steps { width:100%; min-width:0; }
	.page-home .est-foot {
		width:100%;
		flex-wrap:wrap;
		gap:10px;
	}
	.page-home .est-foot .est-back,
	.page-home .est-foot .btn {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		padding-inline: 10px;
		flex: 1 1 0;
		white-space: normal;
		text-align: center;
	}
	.page-home .est-foot .est-back { justify-content: center; }
	.page-home .fields { width:100%; grid-template-columns:1fr; }
	.page-home .field.full { grid-column:auto; }
	.page-home .field input,
	.page-home .field textarea { width:100%; min-width:0; }
}

/* Estimator footer: all three no-JS fallback buttons must remain inside the card. */
.page-home .est-foot > * {
	min-width: 0;
	box-sizing: border-box;
}
.page-home .est-foot .btn,
.page-home .est-foot .est-back {
	padding-inline: clamp(9px, 1.2vw, 16px);
}
@media (min-width: 641px) {
	.page-home .est-foot > * {
		flex: 1 1 0;
	}
}

/* Final mobile safeguards */
@media(max-width:640px){
	.page-home .contact-grid > *,
	.page-home .est,
	.page-home #est-form { min-width:0; width:100%; }
	.page-home .est-foot .est-back,
	.page-home .est-foot .btn { white-space:normal; min-height:46px; }
}

@media(max-width:640px){
	.page-home .services-pin.is-pinned .services-sticky {
		height:100dvh;
		min-height:0;
	}
	.page-home .services-pin.is-pinned .services-viewport { margin-top:24px; }
	.page-home .services-pin.is-pinned .service-card {
		width:min(300px,82vw);
		min-height:320px;
		padding:26px 22px;
	}
}


/* Final estimator/mobile layout: navigation row above the primary submit action. */
.page-home .est-foot [hidden] { display: none !important; }
@media (max-width: 640px) {
	.page-home .est-foot {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px;
		align-items: stretch;
	}
	.page-home .est-foot .est-back,
	.page-home .est-foot [data-est-next] {
		grid-row: 1;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding-inline: 8px;
	}
	.page-home .est-foot [data-est-submit] {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding-inline: 10px;
	}
}

/* Seamless marquee batches: no artificial gap between repeated copies. */
.page-home .marquee-track,
.page-home .voice-track {
	gap: 0 !important;
	--marquee-distance: 0px;
}
/*
 * The space between cards/chips is part of the repeating unit.
 * Previously the internal batch had a gap, but there was ZERO space between
 * the end of one batch and the beginning of the next. That created a visible
 * seam at every loop boundary. Include one trailing spacer in each batch so
 * every boundary has exactly the same spacing as every other item.
 */
.page-home .marquee-track > .marquee-batch {
	margin: 0 !important;
	padding-inline-end: 14px !important;
}
.page-home .voice-track > .marquee-batch {
	margin: 0 !important;
	padding-inline-end: 18px !important;
}

/* Mobile hero CTAs: keep both primary actions on a single row. */
@media (max-width: 640px) {
	.page-home .hero-ctas {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		gap: 8px;
	}
	.page-home .hero-ctas > .btn {
		flex: 1 1 0;
		min-width: 0;
		width: 0;
		max-width: none;
		padding-inline: 8px;
		font-size: 12.5px;
		gap: 6px;
		white-space: nowrap;
	}
	.page-home .hero-ctas > .btn .icon {
		width: 15px;
		height: 15px;
		flex: 0 0 15px;
	}
}

/* Runtime JS marquee engine override */
.marquee-track, .voice-track { animation: none !important; }

/* Final fix: remove leftover empty second testimonial row spacing */
.page-home .voices-lane {
    gap: 0 !important;
    margin-bottom: 0 !important;
}
.page-home .voices .voice-marquee {
    margin-bottom: 0 !important;
}
.page-home .voices .voice-track {
    margin-bottom: 0 !important;
}