/*
 * Homepage sections — each scoped under its own bmx-home-* root class.
 * Only enqueued on the front page (see functions.php).
 */

/* ---------- Hero carousel ---------- */

.bmx-home-hero {
	background: linear-gradient( 160deg, var( --wp--preset--color--base ) 0%, var( --wp--preset--color--bmx-surface-alt ) 100% );
}

.bmx-hero-carousel {
	position: relative;
	max-width: 1550px;
	margin: 0 auto;
	padding: 0 var( --wp--preset--spacing--40 );
	box-sizing: border-box;
}

.bmx-hero-carousel__track {
	position: relative;
}

.bmx-hero-slide {
	display: none;
	align-items: center;
	gap: var( --wp--preset--spacing--40 );
	padding: var( --wp--preset--spacing--70 ) 0;
}

.bmx-hero-slide.is-active {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	opacity: 1;
}

/*
 * Fade-in is opt-in via a short-lived .is-entering class (added and
 * removed by JS around the display swap) rather than an `animation`
 * tied directly to .is-active — a CSS animation gated on that same
 * class can get stuck mid-keyframe (stuck at opacity:0) if the browser
 * throttles rAF/animations on the tab, e.g. while backgrounded. Base
 * visibility above never depends on the animation completing.
 */
.bmx-hero-slide.is-active.is-entering {
	animation: bmx-hero-fade 0.6s ease;
}

@keyframes bmx-hero-fade {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/*
 * Reference's slider-one_heading/text/button-box entrance: each element
 * animates in with a staggered delay (600ms/900ms/1200ms) rather than
 * all at once. Reproduced here on top of the base fade above, gated on
 * the same transient .is-entering class for the same anti-throttling
 * reason (see comment above).
 */
.bmx-hero-slide.is-active.is-entering .bmx-home-hero__eyebrow,
.bmx-hero-slide.is-active.is-entering .bmx-home-hero__heading {
	animation: bmx-hero-rise 0.9s ease both;
	animation-delay: 200ms;
}

.bmx-hero-slide.is-active.is-entering .bmx-home-hero__subheading {
	animation: bmx-hero-rise 0.9s ease both;
	animation-delay: 350ms;
}

.bmx-hero-slide.is-active.is-entering .bmx-home-hero__actions {
	animation: bmx-hero-rise 0.9s ease both;
	animation-delay: 500ms;
}

@keyframes bmx-hero-rise {
	from {
		opacity: 0;
		transform: translateY( 40px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.bmx-home-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-hero__heading {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-family: 'Inter', sans-serif;
	font-size: clamp( 2.5rem, 3vw + 1.5rem, 4.5rem );
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-home-hero__subheading {
	margin: 0 0 var( --wp--preset--spacing--40 );
	max-width: 46ch;
	font-family: 'Roboto', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var( --wp--preset--color--bmx-muted );
}

.bmx-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
}

.bmx-hero-slide__image img {
	width: 100%;
	height: auto;
}

.bmx-hero-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding-bottom: var( --wp--preset--spacing--30 );
}

.bmx-hero-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background-color: rgba( 29, 44, 56, 0.2 );
	cursor: pointer;
	transition: all 0.3s ease;
}

.bmx-hero-carousel__dot.is-active {
	width: 26px;
	background-color: var( --wp--preset--color--bmx-primary );
}

@media ( max-width: 767px ) {
	.bmx-hero-slide.is-active {
		grid-template-columns: 1fr;
		text-align: center;
		padding: var( --wp--preset--spacing--50 ) 0;
	}

	.bmx-home-hero__subheading {
		margin-left: auto;
		margin-right: auto;
	}

	.bmx-home-hero__actions {
		justify-content: center;
	}

	.bmx-hero-slide__image {
		order: -1;
	}
}

/* ---------- Capabilities (Services intro) ---------- */

.bmx-home-capabilities {
	padding: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--40 );
}

.bmx-home-capabilities__grid {
	gap: var( --wp--preset--spacing--40 );
}

/*
 * Reference's service-block_one-inner hover: a solid color panel wipes
 * in from the left (scaleX 0 -> 1, transform-origin left, 0.4s), text
 * and icon flip to white, and the icon itself flips via
 * scale(-1) rotate(180deg). Reproduced here rather than a generic
 * lift+shadow hover.
 */
.bmx-home-capabilities__card {
	position: relative;
	height: 100%;
	padding: var( --wp--preset--spacing--40 );
	background-color: var( --wp--preset--color--bmx-surface );
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
}

.bmx-home-capabilities__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var( --wp--preset--color--bmx-primary );
	transform: scaleX( 0 );
	transform-origin: right center;
	transition: transform 0.4s ease;
}

.bmx-home-capabilities__card:hover::before {
	transform: scaleX( 1 );
	transform-origin: left center;
}

.bmx-home-capabilities__card-icon,
.bmx-home-capabilities__card-title,
.bmx-home-capabilities__card-text {
	position: relative;
	z-index: 1;
}

.bmx-home-capabilities__card-icon {
	display: block;
	/* --wp--preset--spacing--10 isn't a registered token in this theme's
	   scale (smallest slug is 20), so it resolved to an invalid/empty
	   value and the margin collapsed to 0. --spacing--40 = 30px, matching
	   the reference's .service-block_one-title margin-top: 30px gap. */
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: 'BMXFlaticon';
	font-size: 64px;
	line-height: 1em;
	color: var( --wp--preset--color--bmx-primary );
	transition: color 0.6s ease, transform 0.6s ease;
}

.bmx-home-capabilities__card:hover .bmx-home-capabilities__card-icon {
	color: var( --wp--preset--color--base );
	transform: scale( -1 ) rotate( 180deg );
}

.bmx-home-capabilities__card-title {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-home-capabilities__card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.bmx-home-capabilities__card:hover .bmx-home-capabilities__card-title a {
	color: var( --wp--preset--color--base );
}

.bmx-home-capabilities__card-text {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	color: var( --wp--preset--color--bmx-muted );
	line-height: 1.6;
	transition: color 0.3s ease;
}

.bmx-home-capabilities__card:hover .bmx-home-capabilities__card-text {
	color: var( --wp--preset--color--base );
}

/* ---------- About ---------- */

.bmx-home-about {
	padding: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--40 );
	background-color: var( --wp--preset--color--bmx-surface );
}

.bmx-home-about__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-about__heading {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-home-about__text {
	max-width: 70ch;
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: 'Roboto', sans-serif;
	color: var( --wp--preset--color--bmx-body );
	line-height: 1.7;
}

.bmx-home-about__blocks {
	margin-bottom: var( --wp--preset--spacing--40 );
}

.bmx-home-about__block {
	height: 100%;
}

/*
 * Icon above the Mission/Vision title — present in the reference
 * (.about-one_block-icon) but missing from the page as it existed
 * before the About page's ACF refactor (see inc/about-fields.php).
 * Sized/colored to match the same icon language already used for the
 * capability-highlight cards just below this section.
 */
.bmx-home-about__block-icon {
	display: block;
	margin: 0 0 12px;
	font-family: 'BMXFlaticon';
	font-size: 32px;
	line-height: 1em;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-about__block-title {
	margin: 0 0 0.5em;
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-about__block-text {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	color: var( --wp--preset--color--bmx-muted );
	line-height: 1.6;
}

.bmx-home-about__columns {
	gap: var( --wp--preset--spacing--60 );
}

.bmx-home-about__image {
	position: relative;
	border-radius: 25px;
	overflow: hidden;
}

.bmx-home-about__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Why choose us ---------- */

.bmx-home-why {
	padding: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--40 );
	text-align: center;
}

.bmx-home-why__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-why__heading {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-home-why__text {
	max-width: 60ch;
	margin: 0 auto var( --wp--preset--spacing--40 );
	font-family: 'Roboto', sans-serif;
	color: var( --wp--preset--color--bmx-muted );
	line-height: 1.6;
}

.bmx-home-why__list {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--30 );
	text-align: left;
}

.bmx-home-why__item {
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	align-items: flex-start;
	padding: var( --wp--preset--spacing--30 );
	background-color: var( --wp--preset--color--bmx-surface );
	border-radius: 12px;
}

.bmx-home-why__item-number {
	flex: 0 0 auto;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-why__item-title {
	margin: 0 0 0.35em;
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-home-why__item-text {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	color: var( --wp--preset--color--bmx-muted );
	line-height: 1.6;
}

/* ---------- Why choose us / "How It Works" (dark, two-column — home only) ---------- */
/*
 * Reference's steps-two.style-two section (application/views/home.php,
 * assets/css/style.css). Values below are copied from that CSS rather
 * than approximated: icon circles are 70px/2px-border absolute-positioned
 * badges (not flex items), the heading is overridden to 32px/42px inside
 * this section specifically, and the image column reproduces the two
 * staggered images + offset border frame + floating icon badge + faint
 * pattern-layer background exactly as steps-two_image-inner does.
 */

@font-face {
	font-family: 'BMXFlaticon';
	src: url( '../fonts/flaticon_kashIT-flat.woff' ) format( 'woff' ),
		url( '../fonts/flaticon_kashIT-flat.ttf' ) format( 'truetype' );
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.bmx-why-us {
	padding: 110px var( --wp--preset--spacing--40 ) 80px;
	background: linear-gradient( 160deg, var( --wp--preset--color--bmx-dark ) 0%, var( --wp--preset--color--bmx-primary-dark ) 100% );
}

.bmx-why-us__columns {
	gap: var( --wp--preset--spacing--60 );
}

.bmx-why-us__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-why-us__heading {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-family: 'Inter', sans-serif;
	font-size: 32px;
	line-height: 42px;
	color: var( --wp--preset--color--base );
}

.bmx-why-us__text {
	max-width: 50ch;
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: rgba( 255, 255, 255, 0.7 );
}

.bmx-why-us__list {
	display: flex;
	flex-direction: column;
}

.bmx-why-us__item {
	margin-bottom: 30px;
}

.bmx-why-us__item:last-child {
	margin-bottom: 0;
}

.bmx-why-us__item-inner {
	position: relative;
	padding-left: 100px;
}

.bmx-why-us__item-icon {
	position: absolute;
	left: 0;
	top: 2px;
	width: 70px;
	height: 70px;
	line-height: 66px;
	text-align: center;
	border-radius: 50px;
	border: 2px solid var( --wp--preset--color--bmx-primary );
	color: var( --wp--preset--color--bmx-primary );
	font-family: 'BMXFlaticon', sans-serif;
	font-size: 34px;
	transition: all 500ms ease;
}

.bmx-why-us__item-icon::before {
	font-family: 'BMXFlaticon';
}

.bmx-flaticon-idea::before {
	content: '\f1b3';
}

.bmx-flaticon-lamp::before {
	content: '\f1b2';
}

.bmx-flaticon-cloud::before {
	content: '\f195';
}

.bmx-flaticon-light-bulb::before {
	content: '\f176';
}

.bmx-flaticon-customer-support-1::before {
	content: '\f1da';
}

.bmx-flaticon-cloud-service::before {
	content: '\f1d3';
}

.bmx-flaticon-cloud-service-1::before {
	content: '\f1d8';
}

.bmx-flaticon-seo::before {
	content: '\f1cb';
}

/*
 * Per-service icons for the "Our Services" grid (bmx_get_service_icon())
 * and the two new "Our Design & Development Process" step icons — see
 * inc/post-types.php and patterns/home-process.php. Codepoints pulled
 * directly from the reference's flaticon_kashIT-flat.css.
 */
.bmx-flaticon-shopping-cart::before {
	content: '\f121';
}

.bmx-flaticon-stopwatch::before {
	content: '\f126';
}

.bmx-flaticon-software::before {
	content: '\f184';
}

.bmx-flaticon-apple-logo::before {
	content: '\f102';
}

.bmx-flaticon-playstore::before {
	content: '\f138';
}

.bmx-flaticon-search::before {
	content: '\f127';
}

.bmx-flaticon-target::before {
	content: '\f1c3';
}

.bmx-flaticon-share::before {
	content: '\f11c';
}

.bmx-flaticon-pen::before {
	content: '\f186';
}

.bmx-flaticon-gear::before {
	content: '\f1ac';
}

.bmx-flaticon-shopping-bag::before {
	content: '\f173';
}

.bmx-flaticon-link::before {
	content: '\f15a';
}

.bmx-flaticon-law::before {
	content: '\f166';
}

.bmx-flaticon-house::before {
	content: '\f11d';
}

.bmx-flaticon-heart::before {
	content: '\f118';
}

.bmx-flaticon-infrastructure::before {
	content: '\f1bc';
}

.bmx-flaticon-secure-shield::before {
	content: '\f13b';
}

.bmx-flaticon-settings::before {
	content: '\f119';
}

.bmx-flaticon-planet-earth::before {
	content: '\f177';
}

.bmx-flaticon-maps-and-flags::before {
	content: '\f13d';
}

.bmx-flaticon-data::before {
	content: '\f1bb';
}

.bmx-flaticon-document::before {
	content: '\f1a3';
}

.bmx-flaticon-cloud-1::before {
	content: '\f1cf';
}

.bmx-flaticon-shopping-basket::before {
	content: '\f1a9';
}

.bmx-flaticon-atom::before {
	content: '\f1b4';
}

.bmx-flaticon-atom-1::before {
	content: '\f1c0';
}

.bmx-flaticon-folder::before {
	content: '\f18b';
}

.bmx-flaticon-squares::before {
	content: '\f187';
}

.bmx-flaticon-settings-1::before {
	content: '\f132';
}

.bmx-flaticon-cyber-security-1::before {
	content: '\f19f';
}

.bmx-flaticon-secure::before {
	content: '\f1b0';
}

/* Matches reference's step-two_block-inner:hover icon fill + flip */
.bmx-why-us__item:hover .bmx-why-us__item-icon {
	color: var( --wp--preset--color--base );
	background-color: var( --wp--preset--color--bmx-primary );
	transform: scale( -1 ) rotate( 180deg );
}

.bmx-why-us__item-title {
	position: relative;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	color: var( --wp--preset--color--base );
}

.bmx-why-us__item-text {
	position: relative;
	margin: 10px 0 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: rgba( 255, 255, 255, 0.7 );
}

.bmx-why-us__image-inner {
	position: relative;
	padding-left: 30px;
}

.bmx-why-us__image-inner::before {
	content: '';
	position: absolute;
	left: 60px;
	top: 30px;
	right: -30px;
	bottom: -30px;
	z-index: 1;
	border-radius: 25px;
	border: 5px solid var( --wp--preset--color--bmx-primary );
}

.bmx-why-us__pattern-layer {
	position: absolute;
	left: -30px;
	top: -100px;
	right: 0;
	bottom: 0;
	width: 721px;
	height: 481px;
	opacity: 0.1;
	background-repeat: no-repeat;
}

.bmx-why-us__floating-icon {
	position: absolute;
	left: 46%;
	top: 44%;
	z-index: 2;
	width: 70px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	border-radius: 50px;
	background-color: var( --wp--preset--color--bmx-primary );
	color: var( --wp--preset--color--base );
	font-family: 'BMXFlaticon', sans-serif;
	font-size: 40px;
	transform: translate( -50%, -50% );
}

.bmx-why-us__image-row {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --wp--preset--spacing--20 );
}

.bmx-why-us__image {
	position: relative;
	border-radius: 35px;
	overflow: hidden;
}

.bmx-why-us__image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 145deg, rgba( 29, 44, 56, 0.45 ) 20%, rgba( 0, 146, 255, 0.4 ) 90% );
}

.bmx-why-us__image--offset {
	transform: translateY( 65px );
}

.bmx-why-us__image img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( max-width: 767px ) {
	.bmx-why-us__image-column {
		order: -1;
	}

	.bmx-why-us__image--offset {
		transform: none;
	}

	.bmx-why-us__item-inner {
		padding-left: 85px;
	}

	.bmx-why-us__item-icon,
	.bmx-why-us__floating-icon {
		width: 60px;
		height: 60px;
		line-height: 56px;
		font-size: 28px;
	}
}

/* ---------- Process ---------- */
/*
 * Reference's feature-one.style-two: ONE solid blue rounded bar
 * spanning the section, five columns divided by thin vertical lines
 * (not individual bordered cards) — style.css .feature-one .inner-
 * container / .feature-block_one-inner::before.
 */

.bmx-home-process {
	padding: 110px var( --wp--preset--spacing--40 ) 0;
}

.bmx-home-process__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-process__heading {
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

/*
 * Card chrome intentionally matches .bmx-home-services-grid .bmx-service-card
 * (bordered surface card, left-aligned, color-wipe hover) per explicit
 * request to make this section visually consistent with "Our Services" —
 * content (the 5 numbered steps) is unchanged.
 */
.bmx-home-process__grid {
	gap: var( --wp--preset--spacing--30 );
}

.bmx-home-process__card {
	position: relative;
	height: 100%;
	padding: var( --wp--preset--spacing--30 );
	background-color: var( --wp--preset--color--bmx-surface );
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
	text-align: left;
	transition: none;
}

.bmx-home-process__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var( --wp--preset--color--bmx-primary );
	transform: scaleX( 0 );
	transform-origin: right center;
	transition: transform 0.4s ease;
}

.bmx-home-process__card:hover::before {
	transform: scaleX( 1 );
	transform-origin: left center;
}

.bmx-home-process__card-icon,
.bmx-home-process__card-title,
.bmx-home-process__card-text {
	position: relative;
	z-index: 1;
}

/* Same 64px icon treatment (size, weight, hover flip) as
   .bmx-home-services-grid .bmx-service-card__icon, so the two sections
   feel like the same component. */
.bmx-home-process__card-icon {
	display: block;
	margin: 0 0 20px;
	font-family: 'BMXFlaticon';
	font-size: 64px;
	line-height: 1em;
	color: var( --wp--preset--color--bmx-primary );
	transition: color 0.3s ease, transform 0.3s ease;
}

.bmx-home-process__card:hover .bmx-home-process__card-icon {
	color: var( --wp--preset--color--base );
	transform: scale( -1 ) rotate( 180deg );
}

.bmx-home-process__card-title {
	margin: 0 0 0.5em;
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
	transition: color 0.3s ease;
}

.bmx-home-process__card:hover .bmx-home-process__card-title {
	color: var( --wp--preset--color--base );
}

.bmx-home-process__card-text {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 0.875rem;
	color: var( --wp--preset--color--bmx-muted );
	line-height: 1.6;
	transition: color 0.3s ease;
}

.bmx-home-process__card:hover .bmx-home-process__card-text {
	color: var( --wp--preset--color--base );
}

/* ---------- Services grid ---------- */

.bmx-home-services-grid {
	padding: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--40 );
}

.bmx-home-services-grid__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-services-grid__heading {
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-home-services-grid__list {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --wp--preset--spacing--30 );
	margin-bottom: var( --wp--preset--spacing--40 );
}

@media ( max-width: 1024px ) {
	.bmx-home-services-grid__list {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 640px ) {
	.bmx-home-services-grid__list {
		grid-template-columns: 1fr;
	}
}

.bmx-home-services-grid .bmx-service-card__icon {
	position: relative;
	z-index: 1;
	display: block;
	/* --spacing--10 isn't a registered token in this theme's scale (see
	   .bmx-home-capabilities__card-icon) — using --spacing--40 (30px) to
	   match the reference's icon-to-title gap. */
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: 'BMXFlaticon';
	font-size: 64px;
	line-height: 1em;
	color: var( --wp--preset--color--bmx-primary );
	transition: color 0.3s ease, transform 0.3s ease;
}

.bmx-home-services-grid .bmx-service-card:hover .bmx-service-card__icon {
	color: var( --wp--preset--color--base );
	transform: scale( -1 ) rotate( 180deg );
}

/*
 * Reference's service-block_one.style-two hover: a bordered card whose
 * ::before panel wipes in solid color from the left, turning title/text/
 * link white — same mechanic as .bmx-home-capabilities__card above, not
 * the generic lift+shadow this class inherits from service-archive.css
 * (that lift stays appropriate on the /services/ archive's photo-led
 * cards, which have no reference equivalent).
 */
.bmx-home-services-grid .bmx-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var( --wp--preset--spacing--30 );
	background-color: var( --wp--preset--color--bmx-surface );
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
	transform: none;
	box-shadow: none;
	transition: none;
}

.bmx-home-services-grid .bmx-service-card:hover {
	transform: none;
	box-shadow: none;
}

.bmx-home-services-grid .bmx-service-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var( --wp--preset--color--bmx-primary );
	transform: scaleX( 0 );
	transform-origin: right center;
	transition: transform 0.4s ease;
}

.bmx-home-services-grid .bmx-service-card:hover::before {
	transform: scaleX( 1 );
	transform-origin: left center;
}

.bmx-home-services-grid .bmx-service-card__title,
.bmx-home-services-grid .bmx-service-card__excerpt,
.bmx-home-services-grid .bmx-service-card__more {
	position: relative;
	z-index: 1;
}

.bmx-home-services-grid .bmx-service-card__title a {
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
	text-decoration: none;
	transition: color 0.3s ease;
}

.bmx-home-services-grid .bmx-service-card:hover .bmx-service-card__title a {
	color: var( --wp--preset--color--base );
}

.bmx-home-services-grid .bmx-service-card__excerpt {
	font-family: 'Roboto', sans-serif;
	font-size: 0.875rem;
	color: var( --wp--preset--color--bmx-muted );
	transition: color 0.3s ease;
}

.bmx-home-services-grid .bmx-service-card:hover .bmx-service-card__excerpt {
	color: var( --wp--preset--color--base );
}

.bmx-home-services-grid .bmx-service-card__more {
	/* Pinned to the card's bottom edge (rather than following variable
	   excerpt length) so the button sits in the same position on every
	   card, with a divider giving it clear separation from the text
	   above — matches the reference's bordered .service-block_one-lower-box. */
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--20 );
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --wp--preset--color--bmx-primary );
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.bmx-home-services-grid .bmx-service-card:hover .bmx-service-card__more {
	color: var( --wp--preset--color--base );
	border-top-color: rgba( 255, 255, 255, 0.2 );
}


/* ---------- Services Two ("What Your Business Deserves") ---------- */
/*
 * Reference's services-two / service-block_two: image cards (30px radius)
 * with a gradient overlay that wipes in on hover (scaleX 0 -> 1, origin
 * left) revealing a circular icon, and a pill-shaped dark content panel
 * overlapping the image bottom that switches to the primary color on
 * hover. Horizontal carousel with dot navigation, same lightweight
 * vanilla-JS pattern as the hero (see hero-carousel.js).
 */

.bmx-home-services-two {
	padding: 110px var( --wp--preset--spacing--40 );
	background-color: var( --wp--preset--color--bmx-surface-alt );
}

.bmx-home-services-two__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-services-two__heading {
	margin: 0 0 var( --wp--preset--spacing--50 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-services-two-carousel {
	position: relative;
}

.bmx-services-two-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 300px, 1fr );
	gap: var( --wp--preset--spacing--30 );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var( --wp--preset--spacing--10 );
	scrollbar-width: none;
}

.bmx-services-two-carousel__track::-webkit-scrollbar {
	display: none;
}

.bmx-service-block-two {
	scroll-snap-align: start;
}

.bmx-service-block-two__image {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.bmx-service-block-two__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bmx-service-block-two__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 145deg, rgba( 29, 44, 56, 0.63 ) 20%, rgba( 0, 146, 255, 0.56 ) 90% );
	transform: scaleX( 0 );
	transform-origin: right center;
	transition: transform 0.4s ease;
}

.bmx-service-block-two:hover .bmx-service-block-two__overlay {
	transform: scaleX( 1 );
	transform-origin: left center;
}

.bmx-service-block-two__icon {
	position: relative;
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 999px;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
}

.bmx-service-block-two__content {
	position: relative;
	z-index: 2;
	margin: -40px 40px 0 30px;
	padding: 22px 35px;
	border-radius: 50px;
	background-color: var( --wp--preset--color--bmx-dark );
	transition: background-color 0.3s ease;
}

.bmx-service-block-two:hover .bmx-service-block-two__content {
	background-color: var( --wp--preset--color--bmx-primary );
}

.bmx-service-block-two__title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	font-weight: 500;
	color: var( --wp--preset--color--base );
}

.bmx-service-block-two__text {
	margin: 0.5em 0 0;
	font-family: 'Roboto', sans-serif;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.8 );
}

.bmx-services-two-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: var( --wp--preset--spacing--30 );
}

.bmx-services-two-carousel__dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 5px solid rgba( 57, 57, 57, 0.1 );
	border-radius: 999px;
	background-color: rgba( 57, 57, 57, 0.3 );
	background-clip: padding-box;
	cursor: pointer;
	transition: all 0.3s ease;
}

.bmx-services-two-carousel__dot:hover,
.bmx-services-two-carousel__dot.is-active {
	border-color: rgba( 0, 146, 255, 0.4 );
	background-color: var( --wp--preset--color--bmx-primary );
}

@media ( max-width: 767px ) {
	.bmx-services-two-carousel__track {
		grid-auto-columns: minmax( 240px, 85% );
	}
}

/* ---------- FAQ ---------- */

.bmx-home-faq {
	padding: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--40 );
	background-color: var( --wp--preset--color--bmx-surface );
}

.bmx-home-faq__eyebrow {
	margin: 0 0 var( --wp--preset--spacing--10 );
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-faq__heading {
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: 'Inter', sans-serif;
	color: var( --wp--preset--color--bmx-heading );
}

.bmx-home-faq__accordion {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--20 );
}

.bmx-home-faq__item {
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 );
	background-color: var( --wp--preset--color--base );
	border-radius: 12px;
}

.bmx-home-faq__question {
	cursor: pointer;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: var( --wp--preset--color--bmx-heading );
	list-style: none;
}

.bmx-home-faq__question::-webkit-details-marker {
	display: none;
}

.bmx-home-faq__question::after {
	content: '+';
	float: right;
	font-weight: 400;
	color: var( --wp--preset--color--bmx-primary );
}

.bmx-home-faq__item[open] .bmx-home-faq__question::after {
	content: '\2212';
}

.bmx-home-faq__answer {
	margin-top: 0.75em;
	font-family: 'Roboto', sans-serif;
	color: var( --wp--preset--color--bmx-muted );
	line-height: 1.6;
}

@media ( max-width: 768px ) {
	.bmx-home-why__item {
		flex-direction: column;
	}
}