/**
 * RF Process Steps — custom Rose Fit Elementor widget.
 *
 * Figma node 252:235, 1:1 on the 1440 frame:
 *   eyebrow (Michroma 13/24) → two-line Anton headline → a gold rail with
 *   four dots → four step columns (icon, Manrope SemiBold 20 title, Manrope
 *   16/26 copy) → a solid gold "Book a Consultation" button.
 *
 * The rail is authored as an inline SVG line rather than the exported PNG so
 * it can be DRAWN: stroke-dashoffset animates from full length to zero, the
 * dots pop as the line reaches them, and each column rises behind its dot.
 * The dots are HTML, not SVG, so they stay perfectly round while the line
 * stretches to whatever width the container gives it.
 *
 * Everything is namespaced under .rf-steps and driven by CSS custom
 * properties, so each Elementor control writes one variable.
 */

.rf-steps,
.rf-steps * {
	box-sizing: border-box;
}

.rf-steps {
	/* ---------- design tokens (Figma node 252:235) ---------- */
	--rf-steps-bg: transparent;
	--rf-steps-inner-width: 1232px;
	--rf-steps-padding-top: 0px; /* ponytail: spacing owned by Elementor section */
	--rf-steps-padding-bottom: 0px;
	--rf-steps-padding-x: 20px;

	--rf-steps-eyebrow-color: #ffb300;
	--rf-steps-heading-gap: 25px;      /* eyebrow → headline */
	--rf-steps-title-color: #ffffff;
	--rf-steps-rail-gap: 17px;         /* headline 248 → rail 265 */

	--rf-steps-columns: 4;
	--rf-steps-gap: 21px;              /* 416 - (102 + 293) */
	--rf-steps-rail-inset: 85px;       /* line runs 189..1251 of the 1232 band */
	--rf-steps-rail-color: #ffb300;
	--rf-steps-rail-width: 1px;
	--rf-steps-dot-size: 11px;
	--rf-steps-dot-ring: 3px;
	--rf-steps-dot-core: #070707;

	--rf-steps-icon-gap: 36px;         /* dot 276 → icon 312 */
	--rf-steps-icon-size: 50px;
	--rf-steps-icon-title-gap: 15px;
	--rf-steps-title-text-gap: 20px;
	--rf-steps-step-title-color: #ffb300;
	--rf-steps-text-color: #ffffff;
	--rf-steps-text-width: 275px;

	--rf-steps-btn-gap: 43px;          /* copy 501 → button 544 */
	--rf-steps-btn-bg: #ffb300;
	--rf-steps-btn-color: #000000;
	--rf-steps-btn-hover-bg: #f4ea8a;
	--rf-steps-btn-hover-color: #000000;
	--rf-steps-btn-height: 51px;
	--rf-steps-btn-padding-x: 20px;
	--rf-steps-btn-radius: 5px;

	/* ---------- motion ---------- */
	--rf-steps-draw-duration: 1200ms;
	--rf-steps-stagger: 140ms;
	--rf-steps-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	width: 100%;
	background: var(--rf-steps-bg);
	/* ponytail: !important beats Elementor's cached post CSS, which still
	 * carries a saved padding value from before the control was removed. */
	padding: 0 !important;
}

.rf-steps__inner {
	width: 100%;
	max-width: var(--rf-steps-inner-width);
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
 * HEADING
 * ========================================================= */
.rf-steps__eyebrow {
	margin: 0 0 var(--rf-steps-heading-gap);
	color: var(--rf-steps-eyebrow-color);
	font-family: "Michroma", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.52px;
	text-align: center;
	text-transform: uppercase;
}

.rf-steps__title {
	margin: 0 0 var(--rf-steps-rail-gap);
	color: var(--rf-steps-title-color);
	font-family: "Anton", sans-serif;
	font-size: 58px;
	font-weight: 400;
	line-height: 62px;
	letter-spacing: 2.32px;
	text-align: center;
	text-transform: uppercase;
}

/* =========================================================
 * TRACK — the rail plus the four columns that hang off it
 * ========================================================= */
.rf-steps__track {
	position: relative;
	overflow: visible;
}

/* The drawn line. Inset on both sides so it overshoots the outer dots by the
 * same 59.5px it does in Figma, and pinned to the dots' vertical centre.
 * The wrapper carries the left/right insets rather than the <svg> itself: an
 * absolutely positioned REPLACED element ignores `right` and falls back to
 * its intrinsic 100px width, which would leave the rail a stub. */
.rf-steps__rail {
	position: absolute;
	display: block;
	top: calc(var(--rf-steps-dot-size) / 2);
	left: var(--rf-steps-rail-inset);
	right: var(--rf-steps-rail-inset);
	height: var(--rf-steps-rail-width);
	pointer-events: none;
	overflow: visible;
}

.rf-steps__rail-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.rf-steps__rail-line {
	stroke: var(--rf-steps-rail-color);
	stroke-width: var(--rf-steps-rail-width);
	filter: drop-shadow(0 0 4px rgba(255, 179, 0, 0.45));
	/* Both set inline by the script from the line's measured length, so the
	 * dash always matches the real pixel width at any breakpoint. */
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.rf-steps__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--rf-steps-columns), minmax(0, 1fr));
	gap: var(--rf-steps-gap);
	align-items: start;
}

/* =========================================================
 * STEP
 * ========================================================= */
.rf-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ---------- the dot sitting on the rail ---------- */
.rf-step__dot {
	flex: 0 0 auto;
	width: var(--rf-steps-dot-size);
	height: var(--rf-steps-dot-size);
	margin-bottom: var(--rf-steps-icon-gap);
	border: var(--rf-steps-dot-ring) solid var(--rf-steps-rail-color);
	border-radius: 50%;
	background: var(--rf-steps-dot-core);
	box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.45);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.rf-step__icon {
	display: block;
	width: auto;
	height: var(--rf-steps-icon-size);
	max-width: 100%;
	margin-bottom: var(--rf-steps-icon-title-gap);
	transition: transform 0.4s var(--rf-steps-ease);
}

.rf-step__title {
	margin: 0 0 var(--rf-steps-title-text-gap);
	color: var(--rf-steps-step-title-color);
	font-family: "Manrope", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 0.2px;
}

.rf-step__text {
	margin: 0;
	max-width: min(var(--rf-steps-text-width), 100%);
	color: var(--rf-steps-text-color);
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.16px;
	text-wrap: pretty;
}

/* ---------- hover: the step lifts its icon and lights its dot ---------- */
.rf-step:hover .rf-step__icon {
	transform: translateY(-6px) scale(1.06);
}

.rf-step:hover .rf-step__dot {
	transform: scale(1.25);
	box-shadow: 0 0 0 6px rgba(255, 179, 0, 0.16);
}

/* =========================================================
 * BUTTON
 * ========================================================= */
.rf-steps__cta-row {
	display: flex;
	justify-content: center;
	margin-top: var(--rf-steps-btn-gap);
}

.rf-steps__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--rf-steps-btn-height);
	padding: 0 var(--rf-steps-btn-padding-x);
	border: 0;
	border-radius: var(--rf-steps-btn-radius);
	background: var(--rf-steps-btn-bg);
	color: var(--rf-steps-btn-color);
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0.18px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.rf-steps__btn:hover,
.rf-steps__btn:focus-visible {
	background: var(--rf-steps-btn-hover-bg);
	color: var(--rf-steps-btn-hover-color);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(255, 179, 0, 0.22);
	text-decoration: none;
}

/* =====================================================================
 * ENTRANCE ANIMATION
 * The script adds .rf--ready once it has measured the line (which parks
 * everything off-stage), then .rf--play when the section scrolls in.
 * Nothing is hidden until .rf--ready lands, so a visitor with JS disabled
 * — or one who reaches the section before the script runs — still sees
 * the finished layout.
 * ===================================================================== */
.rf-step__dot,
.rf-step__body,
.rf-steps__cta-row,
.rf-steps__rail {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.rf-steps.rf--ready .rf-steps__rail-line {
	stroke-dashoffset: var(--rf-steps-line-length, 1200px);
}

.rf-steps.rf--ready .rf-step__dot {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}

.rf-steps.rf--ready .rf-step__body,
.rf-steps.rf--ready .rf-steps__cta-row {
	opacity: 0;
	-webkit-transform: translateY(18px);
	transform: translateY(18px);
}

.rf-steps.rf--play .rf-steps__rail-line {
	stroke-dashoffset: 0;
	-webkit-transition: stroke-dashoffset var(--rf-steps-draw-duration) var(--rf-steps-ease);
	transition: stroke-dashoffset var(--rf-steps-draw-duration) var(--rf-steps-ease);
}

/* Each dot lands as the drawn line reaches it: the inline --rf-dot-delay is
 * the line duration scaled by that dot's position along the rail. */
.rf-steps.rf--play .rf-step__dot {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition:
		opacity 400ms ease var(--rf-dot-delay, 0ms),
		-webkit-transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--rf-dot-delay, 0ms);
	transition:
		opacity 400ms ease var(--rf-dot-delay, 0ms),
		transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--rf-dot-delay, 0ms);
	animation: rf-steps-pulse 900ms ease-out var(--rf-dot-delay, 0ms) 1;
}

.rf-steps.rf--play .rf-step__body {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition:
		opacity 620ms var(--rf-steps-ease) var(--rf-body-delay, 0ms),
		-webkit-transform 620ms var(--rf-steps-ease) var(--rf-body-delay, 0ms);
	transition:
		opacity 620ms var(--rf-steps-ease) var(--rf-body-delay, 0ms),
		transform 620ms var(--rf-steps-ease) var(--rf-body-delay, 0ms);
}

.rf-steps.rf--play .rf-steps__cta-row {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition:
		opacity 620ms var(--rf-steps-ease) var(--rf-cta-delay, 0ms),
		-webkit-transform 620ms var(--rf-steps-ease) var(--rf-cta-delay, 0ms);
	transition:
		opacity 620ms var(--rf-steps-ease) var(--rf-cta-delay, 0ms),
		transform 620ms var(--rf-steps-ease) var(--rf-cta-delay, 0ms);
}

@keyframes rf-steps-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(255, 179, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0); }
}

/* The step body is a plain wrapper so the dot can animate independently of
 * the icon/title/copy that rise behind it. */
.rf-step__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* =========================================================
 * RESPONSIVE
 * ========================================================= */
@media (max-width: 1024.98px) {
	.rf-steps {
		--rf-steps-columns: 1;
		--rf-steps-padding-top: 0px;
		--rf-steps-padding-bottom: 0px;
	}

	.rf-steps__inner {
		max-width: 100%;
	}

	.rf-steps__track {
		max-width: 580px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		overflow: hidden !important;
	}

	.rf-steps__title {
		font-size: 44px;
		line-height: 48px;
	}

	.rf-steps .rf-steps__grid {
		display: flex;
		flex-direction: column;
		gap: 36px;
	}

	.rf-steps .rf-step {
		position: relative !important;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		text-align: center;
		padding-left: 44px;
		margin-bottom: 0;
	}

	.rf-steps .rf-step__dot {
		position: absolute;
		top: 69px;
		left: 18px;
		-webkit-transform: translateX(-50%) scale(1) !important;
		transform: translateX(-50%) scale(1) !important;
		opacity: 1 !important;
		visibility: visible !important;
		display: block !important;
		flex: 0 0 auto;
		width: var(--rf-steps-dot-size);
		height: var(--rf-steps-dot-size);
		margin-bottom: 0;
		z-index: 2;
	}

	.rf-steps.rf--ready .rf-step__dot {
		opacity: 1 !important;
		visibility: visible !important;
		display: block !important;
		-webkit-transform: translateX(-50%) scale(1) !important;
		transform: translateX(-50%) scale(1) !important;
	}

	.rf-steps.rf--play .rf-step__dot {
		opacity: 1 !important;
		visibility: visible !important;
		display: block !important;
		-webkit-transform: translateX(-50%) scale(1) !important;
		transform: translateX(-50%) scale(1) !important;
		animation: rf-steps-pulse 900ms ease-out var(--rf-dot-delay, 0ms) 1;
	}

	.rf-steps .rf-step__body {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 100%;
		flex: 1;
		position: relative;
		z-index: 1;
	}

	.rf-steps .rf-step__icon {
		margin-bottom: 12px;
	}

	.rf-steps .rf-step__title {
		margin: 0 0 8px;
		text-align: center;
	}

	.rf-steps .rf-step__text {
		margin: 0;
		text-align: center;
		max-width: 440px;
	}

	.rf-steps .rf-steps__rail {
		display: block;
		position: absolute;
		top: 0 !important;
		left: 18px;
		right: auto;
		width: var(--rf-steps-rail-width, 1px);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 1;
	}
}

@media (max-width: 767.98px) {
	.rf-steps__title {
		font-size: 32px;
		line-height: 38px;
		letter-spacing: 1.2px;
	}

	.rf-steps__track {
		max-width: 100%;
	}
}

/* =========================================================
 * VERTICAL RAIL (Responsive single-column / timeline view)
 * ========================================================= */
.rf-steps.rf-steps--vertical .rf-steps__track {
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden !important;
}

.rf-steps.rf-steps--vertical .rf-steps__grid {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.rf-steps.rf-steps--vertical .rf-step {
	position: relative !important;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	text-align: center;
	padding-left: 44px;
	margin-bottom: 0;
}

.rf-steps.rf-steps--vertical .rf-step__dot {
	position: absolute;
	top: 69px;
	left: 18px;
	-webkit-transform: translateX(-50%) scale(1) !important;
	transform: translateX(-50%) scale(1) !important;
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	flex: 0 0 auto;
	width: var(--rf-steps-dot-size);
	height: var(--rf-steps-dot-size);
	margin-bottom: 0;
	z-index: 2;
}

.rf-steps.rf-steps--vertical.rf--ready .rf-step__dot {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	-webkit-transform: translateX(-50%) scale(1) !important;
	transform: translateX(-50%) scale(1) !important;
}

.rf-steps.rf-steps--vertical.rf--play .rf-step__dot {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	-webkit-transform: translateX(-50%) scale(1) !important;
	transform: translateX(-50%) scale(1) !important;
	animation: rf-steps-pulse 900ms ease-out var(--rf-dot-delay, 0ms) 1;
}

.rf-steps.rf-steps--vertical .rf-step__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	flex: 1;
	position: relative;
	z-index: 1;
}

.rf-steps.rf-steps--vertical .rf-step__icon {
	margin-bottom: 12px;
}

.rf-steps.rf-steps--vertical .rf-step__title {
	margin: 0 0 8px;
	text-align: center;
}

.rf-steps.rf-steps--vertical .rf-step__text {
	margin: 0;
	text-align: center;
	max-width: 440px;
}

.rf-steps.rf-steps--vertical .rf-steps__rail {
	display: block;
	position: absolute;
	top: 0 !important;
	left: 18px;
	right: auto;
	width: var(--rf-steps-rail-width, 1px);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
}

/* =========================================================
 * ACCESSIBILITY — everything arrives at once, statically
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.rf-steps .rf-steps__rail-line,
	.rf-steps.rf--ready .rf-steps__rail-line,
	.rf-steps.rf--play .rf-steps__rail-line {
		stroke-dashoffset: 0 !important;
		-webkit-transition: none !important;
		transition: none !important;
	}

	.rf-steps .rf-step__dot,
	.rf-steps .rf-step__body,
	.rf-steps .rf-steps__cta-row,
	.rf-steps.rf--ready .rf-step__dot,
	.rf-steps.rf--ready .rf-step__body,
	.rf-steps.rf--ready .rf-steps__cta-row,
	.rf-steps.rf--play .rf-step__dot,
	.rf-steps.rf--play .rf-step__body,
	.rf-steps.rf--play .rf-steps__cta-row {
		opacity: 1 !important;
		transform: none !important;
		-webkit-transform: none !important;
		transition: none !important;
		-webkit-transition: none !important;
		animation: none !important;
	}

	.rf-steps.rf-steps--vertical .rf-step__dot,
	.rf-steps.rf-steps--vertical.rf--ready .rf-step__dot,
	.rf-steps.rf-steps--vertical.rf--play .rf-step__dot {
		opacity: 1 !important;
		transform: translateX(-50%) !important;
		-webkit-transform: translateX(-50%) !important;
		transition: none !important;
		-webkit-transition: none !important;
		animation: none !important;
	}

	.rf-step:hover .rf-step__icon,
	.rf-step:hover .rf-step__dot,
	.rf-steps__btn:hover {
		transform: none;
		-webkit-transform: none;
	}
}