/* ===================================
   Our approach: the numbered steps, joined by lines that draw in. Script: script.js.
=================================== */

.section_our_approach .section_description {
	margin-bottom: 0;
}
.section_our_approach .container {
	max-width: 1267px;
}

.our_approach_inner {
	display: flex;
	gap: 40px;
}

.our_approach_inner .approach_intro {
	max-width: 310px;
}
.our_approach_inner .approach {
	flex: 1;
	margin-top: 60px;
	display: flex;
	flex-direction: column;
	gap: 44px;
	position: relative;
	padding-left: 350px;
}

.our_approach_inner .approach .approach_item .approach_title {
	letter-spacing: -0.42px;
	margin-bottom: 4px;
	text-transform: uppercase;
}
.our_approach_inner .approach .approach_item .approach_sub_title {
	margin-bottom: 10px;
}
.our_approach_inner .approach .approach_item .approach_number {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	letter-spacing: 3px;
}

.our_approach_inner .approach .approach_item {
	animation-delay: 1s;
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-play-state: paused;
	opacity: 0;
	visibility: hidden;
}
.our_approach_inner .approach .approach_item.itemnumber-1 {
	animation-delay: 1.2s;
}
.our_approach_inner .approach .approach_item.itemnumber-2 {
	animation-delay: 1.4s;
}
.our_approach_inner .approach .approach_item.itemnumber-3 {
	animation-delay: 1.6s;
}
.our_approach_inner .approach .approach_item.itemnumber-4 {
	animation-delay: 1.8s;
}
.our_approach_inner .approach .approach_item.itemnumber-5 {
	animation-delay: 2s;
}
.our_approach_inner .approach.o-anim-ready:not(.hidden-animated) .approach_item {
	animation-name: fadeUP;
	animation-play-state: running;
	visibility: visible;
	opacity: 1;
}
.our_approach_inner .approach .lines_svg {
	position: absolute;
	left: 0;
	top: 0;
}
.our_approach_inner .approach .lines_svg svg {
	width: 100%;
	height: 100%;
}

.our_approach_inner .approach .lines_svg svg path {
	animation-delay: 3s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-play-state: paused;
	opacity: 0;
	visibility: hidden;
}

.our_approach_inner .approach.o-anim-ready:not(.hidden-animated) .lines_svg svg path {
	/* Lines draw in once the block is revealed. Each path has pathLength="1", so the dash maths is
	   exact. Every line is two paths: a top half (drawn from the top) and a bottom half (whose path
	   starts at the bottom). Each line draws as one continuous stroke from top to bottom: the top half
	   accelerates in, then the bottom half continues at the same speed from the middle down, with no
	   seam. Lines start 18ms apart (wider gaps read as a sweep from right to left), so the bundle reads
	   as one stroke travelling down the list. Each step appears as the stroke reaches it
	   (blocks/our-approach/script.js). */
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	visibility: visible;
	opacity: 1;
	animation-play-state: running;
}
/* top halves (odd children): reveal from the path start (top) */
.our_approach_inner .approach.o-anim-ready:not(.hidden-animated) .lines_svg svg path:nth-child(odd) {
	animation: exc-draw-from-start 1.2s cubic-bezier(0.5, 0, 1, 1) both; /* paired with the curve below: script.js times the steps on it */
	animation-delay: calc(300ms + var(--n, 0) * 18ms);
}
/* bottom halves (even children): reveal from the path end (the middle) down to the bottom */
.our_approach_inner .approach.o-anim-ready:not(.hidden-animated) .lines_svg svg path:nth-child(even) {
	animation: exc-draw-from-end 1.2s cubic-bezier(0, 0, 0.5, 1) both;
	animation-delay: calc(1500ms + var(--n, 0) * 18ms);
}
.our_approach_inner .approach .lines_svg svg path:nth-child(3),
.our_approach_inner .approach .lines_svg svg path:nth-child(4) {
	--n: 1;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(5),
.our_approach_inner .approach .lines_svg svg path:nth-child(6) {
	--n: 2;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(7),
.our_approach_inner .approach .lines_svg svg path:nth-child(8) {
	--n: 3;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(9),
.our_approach_inner .approach .lines_svg svg path:nth-child(10) {
	--n: 4;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(11),
.our_approach_inner .approach .lines_svg svg path:nth-child(12) {
	--n: 5;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(13),
.our_approach_inner .approach .lines_svg svg path:nth-child(14) {
	--n: 6;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(15),
.our_approach_inner .approach .lines_svg svg path:nth-child(16) {
	--n: 7;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(17),
.our_approach_inner .approach .lines_svg svg path:nth-child(18) {
	--n: 8;
}
.our_approach_inner .approach .lines_svg svg path:nth-child(19),
.our_approach_inner .approach .lines_svg svg path:nth-child(20) {
	--n: 9;
}
@keyframes exc-draw-from-start {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes exc-draw-from-end {
	from {
		stroke-dashoffset: -1;
	}
	to {
		stroke-dashoffset: 0;
	}
}
@media only screen and (max-width: 1200px) {
	.our_approach_inner {
		flex-direction: column;
	}
	.our_approach_inner .approach {
		margin-top: 0;
	}
}
@media only screen and (max-width: 768px) {
	.our_approach_inner .approach .lines_svg {
		max-width: 200px;
	}
	.our_approach_inner .approach {
		gap: 25px;
		padding-left: 223px;
	}
}
@media only screen and (max-width: 600px) {
	.our_approach_inner .approach .lines_svg {
		display: none;
	}
	.our_approach_inner .approach {
		padding-left: 0;
	}
}
@keyframes fadeUP {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes drawLineTD {
	0% {
		stroke-dashoffset: 1200;
	}
	100% {
		stroke-dashoffset: 0;
	}
}