/* Process Steps */
.bel-process-steps {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 640px;
	padding-top: 230px;
	overflow: hidden;
	background: var(--bel-dark) var(--bel-ps-img, none) center / cover no-repeat;
	color: #fff;
}
.bel-process-steps::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 20, 20, .15) 0%, rgba(20, 20, 20, .45) 45%, rgba(20, 20, 20, .8) 100%); pointer-events: none; }
.bel-process-steps--hero { min-height: min(92vh, 820px); padding-top: 120px; }
.bel-process-steps__head { position: relative; z-index: 1; margin-bottom: auto; padding-bottom: 50px; }
.bel-process-steps__title { max-width: 760px; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.16; }
.bel-process-steps__list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--bel-ps-n, 4), minmax(0, 1fr)); align-items: end; margin: 0; padding: 0; list-style: none; }
.bel-process-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 390px;
	padding: 34px 40px 44px;
	border-left: 1px solid rgba(255, 255, 255, .16);
	background: rgba(30, 30, 30, .42);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	text-align: center;
	cursor: pointer;
	outline: none;
	transition: height .5s var(--bel-ease), background-color .4s;
}
.bel-process-steps__item:first-child { border-left: 0; }
.bel-process-steps__num { position: relative; display: grid; place-items: center; height: 100px; transition: opacity .35s, transform .45s var(--bel-ease); }
.bel-process-steps__num b { color: transparent; font: 600 100px/1 var(--bel-font-h); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .45); letter-spacing: -.03em; }
.bel-process-steps__num em { position: absolute; color: #fff; font: 500 24px/1 var(--bel-font-h); font-style: normal; }
.bel-process-steps__body { display: flex; flex-direction: column; align-items: center; margin-top: auto; width: 100%; }
.bel-process-steps__icon { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 22px; background: #fff; color: var(--bel-dark); transition: background-color .3s, color .3s; }
.bel-process-steps__icon .bel-icon { width: 36px; height: 36px; stroke-width: 1.3; }
.bel-process-steps__name { margin: 0; color: #fff; font-size: clamp(1.3rem, 2vw, 1.75rem); }
.bel-process-steps__more { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; width: 100%; max-height: 0; margin-top: 0; overflow: hidden; border-top: 1px solid transparent; opacity: 0; text-align: left; transition: max-height .5s var(--bel-ease), opacity .4s, margin .4s, padding .4s, border-color .4s; }
.bel-process-steps__more p { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .9); }
.bel-process-steps__go { display: grid; place-items: center; width: 60px; height: 60px; background: var(--bel-accent); color: var(--bel-on-accent); transition: background-color .25s, color .25s; }
.bel-process-steps__go:hover { background: #fff; color: var(--bel-dark); }
.bel-process-steps__go .bel-icon { width: 26px; height: 26px; stroke-width: 2.4; }

/* Active panel: taller, number fades, details appear, content aligns left. */
.bel-process-steps__item.is-active { height: 430px; background: rgba(30, 30, 30, .62); align-items: flex-start; text-align: left; }
.bel-process-steps__item.is-active .bel-process-steps__num { opacity: 0; transform: translateY(-20px); }
.bel-process-steps__item.is-active .bel-process-steps__body { align-items: flex-start; }
.bel-process-steps__item.is-active .bel-process-steps__icon { background: var(--bel-accent); color: var(--bel-on-accent); }
.bel-process-steps__item.is-active .bel-process-steps__more { max-height: 220px; margin-top: 22px; padding-top: 22px; border-color: rgba(255, 255, 255, .45); opacity: 1; }
.bel-process-steps__item:focus-visible { box-shadow: inset 0 0 0 2px var(--bel-accent); }

@media (max-width: 1024px) {
	.bel-process-steps { padding-top: 160px; }
	.bel-process-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bel-process-steps__item, .bel-process-steps__item.is-active { height: auto; min-height: 340px; }
	.bel-process-steps__item:nth-child(odd) { border-left: 0; }
	.bel-process-steps__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
}
@media (max-width: 600px) {
	.bel-process-steps { padding-top: 120px; min-height: 0; }
	.bel-process-steps--hero { padding-top: 70px; }
	.bel-process-steps__list { grid-template-columns: 1fr; }
	.bel-process-steps__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); min-height: 0; padding: 28px 24px; }
	.bel-process-steps__item, .bel-process-steps__item.is-active { min-height: 0; align-items: flex-start; text-align: left; }
	.bel-process-steps__num { height: 70px; }
	.bel-process-steps__num b { font-size: 70px; }
	.bel-process-steps__body { align-items: flex-start; }
}