/* EquiPal Studio: how-we-work section (connected steps + tenure chart). */

.ep-proc-section .ep-icon { overflow: visible; }

/* Call to action */
.ep-proc-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.5rem;
	border-radius: 999px;
	background: var(--ep-silk);
	color: var(--ep-white);
	font-size: 0.8125rem;
	font-stretch: 115%;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 160ms var(--ep-ease-gallop), transform 160ms var(--ep-ease-gallop);
}
.ep-proc-cta span { transition: transform 420ms var(--wp--custom--ease--trot); }
.ep-proc-cta:hover { background: #7250B3; color: var(--ep-white); }
.ep-proc-cta:hover span { transform: translateX(4px); }
.ep-proc-cta:active { transform: scale(.96); }

/* =========================================================
   Connected steps + tenure chart
   ========================================================= */
.ep-proc5__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.ep-proc5__step {
	position: relative;
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding: 1.75rem 1.5rem;
	border-radius: 14px;
	background: var(--ep-iron);
	box-shadow: inset 0 0 0 1px var(--ep-rule);
}
.ep-proc5__step:not(:last-child)::after {
	/* hoops connector to the next step */
	content: "";
	position: absolute;
	top: 3.1rem;
	right: -1rem;
	width: 1rem;
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--ep-sheen) 0 4px, transparent 4px 8px);
	animation: ep-hoops-flow 900ms linear infinite;
}
@keyframes ep-hoops-flow { to { background-position: 8px 0; } }
.ep-proc5__icon { width: 2.75rem; height: 2.75rem; color: var(--ep-sheen); }
.ep-proc5__icon .ep-icon { width: 100%; height: 100%; }
.ep-proc5__num { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--ep-dapple); }
.ep-proc5__step h3 { margin: 0.5rem 0 0; font-size: 1.625rem !important; }
.ep-proc5__step p { margin: 0; color: var(--ep-flea); font-size: var(--wp--preset--font-size--small); }

.ep-proc5__chart {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 16px;
	background:
		radial-gradient(60% 100% at 0% 0%, rgba(101, 63, 166, .28), transparent 70%),
		var(--ep-iron);
	display: grid;
	gap: 1.5rem;
}
.ep-proc5__chart-head p { margin: 0.5rem 0 0; font-weight: 600; font-stretch: 108%; letter-spacing: -0.03em; font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--ep-white); }
.ep-proc5__row { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: 1.5rem; }
.ep-proc5__who { display: flex; align-items: center; gap: 0.9rem; font-weight: 600; color: var(--ep-white); }
.ep-proc5__who > span:last-child { display: grid; }
.ep-proc5__who small { font-weight: 500; color: var(--ep-flea); font-size: 0.8125rem; }
.ep-proc5__who .ep-logo { width: 3.5rem !important; }
.ep-proc5__avg { width: 3.5rem; height: 2.5rem; display: grid; place-items: center; font-size: 1.5rem; color: var(--ep-sheen); }
.ep-proc5__track { position: relative; height: 3rem; border-radius: 10px; background: rgba(13, 11, 17, .5); overflow: hidden; }
.ep-proc5__bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--w);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 1rem;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--ep-heritage), var(--ep-silk));
	transform-origin: 0 50%;
}
.ep-proc5__bar--hero { background: linear-gradient(90deg, var(--ep-heritage), var(--ep-silk) 60%, var(--ep-sheen)); box-shadow: 0 0 30px rgba(166, 133, 224, .35); }
.ep-proc5__bar--hero::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ep-white); box-shadow: 0 0 0 0 rgba(236, 234, 240, .6); animation: ep-pulse-dot 2s ease-out infinite; }
@keyframes ep-pulse-dot { 70%, 100% { box-shadow: 0 0 0 12px rgba(236, 234, 240, 0); } }
.ep-proc5__bar b { font-weight: 600; font-size: 0.875rem; color: var(--ep-white); white-space: nowrap; }
.ep-proc5__axis { position: relative; height: 1.25rem; margin-left: calc(15rem + 1.5rem); border-top: 1px solid var(--ep-rule); }
.ep-proc5__axis span { position: absolute; top: 0.35rem; transform: translateX(-50%); font-size: 0.75rem; color: var(--ep-flea); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ep-proc5__axis span:first-child { transform: none; }
.ep-proc5__axis span:last-child { transform: translateX(-100%); }
.ep-proc5__chart .ep-proc-cta { justify-self: start; margin-top: 0.5rem; }
@media (max-width: 1024px) {
	.ep-proc5__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ep-proc5__step:nth-child(2)::after { display: none; }
}
@media (max-width: 700px) {
	.ep-proc5__steps { grid-template-columns: 1fr; }
	.ep-proc5__step::after { display: none; }
	.ep-proc5__row { grid-template-columns: 1fr; gap: 0.75rem; }
	.ep-proc5__axis { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ep-proc5__step::after, .ep-proc5__bar--hero::after { animation: none !important; }
}