/* Version 2 */
#stats {
	h3 { margin-bottom: 0; font-weight: 600; font-size:100%; }
	h3 span { display: block;  }
	.text-big { font-size: 3.25em; margin: 0; line-height:1; }
	.text-big > sup { font-size: 2rem !important; opacity:1; color: #222 !important; margin:0 !important; line-height: 1; top: 0; }
	.text-big + * { font-size: 1.25em; margin: 0; }
}
section h2 {
	font-size: 2.2em;
	font-weight: 700;
	line-height: 1.1;;
}
section h2.gradient, .header-gradient {
	background-image: linear-gradient(to bottom, #000, var(--bs-blue));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
  -webkit-text-fill-color: transparent;
}

ol.stages {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-image: unset;
	> li {
		
		border: solid 1px var(--bs-border-color);
		
		position: relative !important;
		background-color: white;
		border-radius: var(--bs-border-radius);
		padding: 1.5rem 2rem;
		box-shadow: 1px 2px 0 rgba(0,0,0,0.15);
		overflow: hidden;
		ul.list { margin-bottom: 0;}
		p.index { position: relative; line-height: 1; font-size: 120%; margin-bottom: 0.75rem; }
		p.index > span { display: inline-block; text-align: center; color: #fff; transform: translateY(-2px); position: relative; font-size: 75%; font-weight: 800; z-index: 1; width: 1.3em; line-height: 1.3em; }
		p.index:before { content: ''; position: absolute; left: 0; top: 0; width: 1em; height: 1em; outline: solid 2px var(--bs-blue); border-radius: 0.5em; background: var(--bs-blue); z-index: 0; }
	}
	> li:after {
		content: '';
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		width: 6px;
		height: 0%;
		background: linear-gradient(to bottom, var(--bs-blue) 50%, white);
		transition: height 800ms;
	}
	> li.scrolled:after {
		height: 170%
	}
}

section .dark-well {
	background-color: #333;
	color: #fff;
	height: 100%;
	min-height: 520px;
	border-radius: var(--bs-border-radius);
	position: relative;
	> .well-wrapper {
		min-height: 100%;
		padding: 1.5rem 1.25rem;
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		
		.svg-icon {
			mask-repeat: no-repeat;
			mask-size: cover; 
			margin-bottom: 0.75rem;
			width: 40px;
			height: 40px;
			background-color: white; 
		}
		h4 { font-weight: 500; font-size: 1.5em; }
		> .well-header { flex-grow: 1; max-height: 14em; }
		> .well-content { }
		> :not(.well-header) { font-weight: 300; font-size: 110%; }
	}
	.well-bg {
		position: absolute;
		z-index: 0;
		left: 0;
		top: 0;
		width: 100%; 
		height: 100%;
		mask-repeat: no-repeat;
		mask-size: 90%;
		mask-position: calc(100% + 40px) 98%;
		background-color: rgba(255,255,255,0.03);
		
	}
}

@media(min-width:992px) {
#section-services {
	h2 { min-width: 50%; }
	h2 + div {
		font-weight: var(--font-weight-heavy);
		> p {padding-left: 1.5rem; border-left: solid 4px var(--bs-border-color)}
	}
}
}

@media(min-width:1400px) {
	section .dark-well > .well-wrapper { padding: 2rem; }
}
@media(min-width:992px) {
	ol.stages > li > .d-flex > :first-child { max-width: 33%; }
}
@media(max-width:991px) {
	#stats {
		.text-big { font-size: 2.5em; font-weight: 800; margin: 0; line-height:1; }
		.text-big > sup { font-size: 2rem !important; opacity:1; color: #222 !important; margin:0 !important; line-height: 1; top: 0; }
		.text-big + * { font-size: 1.25em; margin: 0; }
	}
	section .dark-well { 
		min-height: 400px;
		.well-bg { mask-size: 66%; }
	}
}
@media(max-width:767px) {
	ol.stages > li {
		padding: 1.5rem;
		display: flex;
		column-gap: 1rem;
		> p { margin-top: 3px;}
	}
	ol.stages > li > .d-flex { display: block !important;}
	section .dark-well {
		min-height: 280px;
		.well-bg {
			mask-size: 33%;
			mask-position: 98% 98%
		}
	}
}