/* ======================================================================== */
/* ! Approach section > TEMPORARY CHANGES
	-	While developing this page:
		-	Images are hidden in teh expanded content
		-	As the expanded content provides limited value without the images,
			the show more link has been hidden
/* ======================================================================== */

.approach_page .row.link__accordion,
.approach_page .image_wrapper_for_expanding {
	display: none !important;
}




/* ======================================================================== */
/* ! Approach section
/* ======================================================================== */

.approach_page {

}

.approach_page .section {
	border-bottom: 1px solid rgba(226,225,229,1);
}

.approach_page .section.approach_section .section_title {
	margin-bottom: 0;
}


#copy_block__my_approach_diagram .wrapper {
	padding: 2rem 0 4rem;
}





/* ======================================================================== */
/* ! Link
/* ======================================================================== */

.expand_collapse_toggle:after {
	font-family: "InsightsIcon";
	content: "\e231";
	font-size: 1.1rem; /* icon = 9px by design */
	color: inherit;
	margin-left: 0.6rem;

	-webkit-font-smoothing: antialiased;
}


.expand_collapse_toggle.EXPANDED:after {
	content: "\e232";
}








/* ======================================================================== */
/* ! Parallax sections
		> only need to hide GAP to show/hide parrallax sections 
		> NOTE: Parallax images had duplicate issues when scrolling
				so opted for satis images
/* ======================================================================== */

.approach_page .image_wrapper_for_expanding {
	height: 40%;
	height: 500px;
	overflow: hidden;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.approach_page .image_wrapper_for_expanding.COLLAPSED_HEIGHT {
	height: 0px;

}





/* ======================================================================== */
/* ! Static images
/* ======================================================================== */

.image_wrapper_for_expanding .static_image {
	height: -webkit-fill-available;
	background: url(../images/Approach/Approach-2-Discover_1000x650_@2x.jpg) no-repeat 50% 0;
	background-color: rgb(25, 18, 12);
	opacity: 1;
}



#copy_block__understand .static_image {
	background: url(../images/Approach/Approach-1-Understand_1000x650_@2x.jpg) no-repeat 50% 0;
}

#copy_block__discover .static_image {
	background: url(../images/Approach/Approach-2-Discover_1000x650_@2x.jpg) no-repeat 50% 0;
}

#copy_block__analyse .static_image {
	background: url(../images/Approach/Approach-3-Analyse_1000x650_@2x.jpg) no-repeat 50% 0;
}

#copy_block__ideate .static_image {
	background: url(../images/Approach/Approach-4-Ideate_1000x650_@2x.jpg) no-repeat 50% 0;
}

#copy_block__experiment .static_image {
	background: url(../images/Approach/Approach-5-Experiment_1000x650_@2x.jpg) no-repeat 50% 0;
}

#copy_block__experiment .static_image {
	background: url(../images/Approach/Approach-5-Experiment_1000x650_@2x.jpg) no-repeat 50% 0;
}

#copy_block__design .static_image {
	background: url(../images/Approach/Approach-6-Design_1000x650_@2x.jpg) no-repeat 50% 0;
}

#copy_block__ship  .static_image {
	background: url(../images/Approach/Approach-7-Ship_1000x650_@2x.jpg) no-repeat 50% 0;
}








/* ======================================================================== */
/* ! Accordion
/* ======================================================================== */

.content.section .show_on_expand {
	display: none;
}

.content.section .show_on_expand {
	opacity: 0;
	/* transition breaks slideDown / slideUp animation */
/*	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;*/
}

.content.section.SHOW_MORE .show_on_expand {
	opacity: 1;
}

/* expand list margin */
.content.section.SHOW_MORE .list_margin {
	margin-bottom: 2rem;
}


.content.section.SHOW_MORE .strong_on_expand {
	font-family: 'ProximaNova-Bold';
}





/* ======================================================================== */
/* ! Approach diagram
/* ======================================================================== */

/*
	Sizing: Full diagram @ 1900px = 
	
	Steps:
	176px (fixed width) x 7 = 1232px

	Gaps (inc side margins):
	1900px - 1232px = 668
	668 / 8 (gaps) = 83.5


	Full width exc margins = 1900px - 83.5 - 83.5 = 1733
	1733 / 1900 x 100 = 91%

*/ 



.approach__diagram_wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}

.approach_step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	width: 17.6rem;
}

.approach_step .icon_wrapper {
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 6rem;
	flex-shrink: 0;
}

.approach_step .icon_wrapper:before {
	font-family: "InsightsIcon";
	-webkit-font-smoothing: antialiased;
	content: "\e801";
	color: #ffffff;
}

.approach_step h4 {
	font-family: ProximaNova-Regular, Helvetica, Arial, sans-serif;
}


/* step backgrounds */
.approach_step.step__understand .icon_wrapper 		{		background-color: #DC6B9A;	}	
.approach_step.step__discover .icon_wrapper			{		background-color: #B672A3;	}
.approach_step.step__analyse .icon_wrapper 			{		background-color: #8C78A5;	}
.approach_step.step__ideate .icon_wrapper 			{		background-color: #29A8C9;	}
.approach_step.step__experiment .icon_wrapper 		{		background-color: #00CDD2;	}
.approach_step.step__design .icon_wrapper 			{		background-color: #49C8B3;	}
.approach_step.step__ship .icon_wrapper 			{		background-color: #F8BC5E;	}

/* icons - 60px */
.approach__diagram_wrapper.LOGICAL_view .approach_step.step__understand .icon_wrapper:before 	{	content: "\e801";	}
.approach__diagram_wrapper.LOGICAL_view .approach_step.step__discover .icon_wrapper:before 		{	content: "\e802";	}
.approach__diagram_wrapper.LOGICAL_view .approach_step.step__analyse .icon_wrapper:before 		{	content: "\e803";	}
.approach__diagram_wrapper.LOGICAL_view .approach_step.step__ideate .icon_wrapper:before 		{	content: "\e804";	}
.approach__diagram_wrapper.LOGICAL_view .approach_step.step__experiment .icon_wrapper:before 	{	content: "\e805";	}
.approach__diagram_wrapper.LOGICAL_view .approach_step.step__design .icon_wrapper:before 		{	content: "\e806";	}
.approach__diagram_wrapper.LOGICAL_view .approach_step.step__ship .icon_wrapper:before 			{	content: "\e807";	}



/* small icons */
.approach__diagram_wrapper.messy__real_example .icon_wrapper {
	width: 4rem;
	height: 4rem;
	font-size: 3rem;
	font-size: 2.6rem;
	xfont-weight: bold;
}
/* icons - 40px*/
.approach__diagram_wrapper.REALITY_view .approach_step.step__understand .icon_wrapper:before,
.approach_step.step__understand .icon_wrapper:before 											{	content: "\e811";	}
.approach__diagram_wrapper.REALITY_view .approach_step.step__discover .icon_wrapper:before,
.approach_step.step__discover .icon_wrapper:before										 		{	content: "\e812";	}
.approach__diagram_wrapper.REALITY_view .approach_step.step__analyse .icon_wrapper:before,
.approach_step.step__analyse .icon_wrapper:before										 		{	content: "\e813";	}
.approach__diagram_wrapper.REALITY_view .approach_step.step__ideate .icon_wrapper:before,
.approach_step.step__ideate .icon_wrapper:before										 		{	content: "\e814";	}
.approach__diagram_wrapper.REALITY_view .approach_step.step__experiment .icon_wrapper:before,
.approach_step.step__experiment .icon_wrapper:before										 	{	content: "\e815";	}
.approach__diagram_wrapper.REALITY_view .approach_step.step__design .icon_wrapper:before,
.approach_step.step__design .icon_wrapper:before 										 		{	content: "\e816";	}
.approach__diagram_wrapper.REALITY_view .approach_step.step__ship .icon_wrapper:before,
.approach_step.step__ship .icon_wrapper:before										 			{	content: "\e817";	}




/* icons for copy blocks */
.copy_block .approach_step {
	width: fit-content;
}

.copy_block .approach_step .icon_wrapper {
	width: 4rem;
    height: 4rem;

    width: 6rem;
    height: 6rem;
    font-size: 3.6rem;
}

.row.section_icon {
	margin-bottom: 1.6rem;
}



/* scrollable messy diagram */

.approach__diagram_wrapper.REALITY_view {
	min-height: 255px;
	overflow-y: scroll;
}

.approach__diagram_wrapper.REALITY_view .mobile_view__scrollable {
	height: 275px;
	width: 100%;
	opacity: 0;
}

.approach__diagram_wrapper.REALITY_view .mobile_view__scrollable .diagram_container {
	background: url('../images/Approach/Approach_diagram__1281x245__aspect_9x2.svg') no-repeat 50% 0;
	background-size: 100% auto;
	width: 1281px;
	height: 245px;
}





/* ======================================================================== */
/* ! Approach diagram > messy diagram positions

/* NOTE:
	add class on the html (icon_wrapper) to indentify step type (eg, ideation)


1280px diagram calculated at:
40px per step icon

1280 / 40 = 3.2% each circle (20px/50% gap = 1.6%)

1440px width screen = diagram at 90% (1280)


/* ======================================================================== */


.approach__diagram_wrapper.messy__real_example {
	display: block;
	width: 90%;
	margin: 0 auto;
	height: 280px;
	position: relative;

	/*
	background: url(../images/Approach/Approach_diagram_connecting_lines.svg) no-repeat 0 0;
	background-size: 100% 100%;
	background-position: 0% 0%;
	*/
}

.messy_diagram_lines {

	position: absolute;

	width: 100%;
	height: 100%;

	/*
	background: url(../images/Approach/Approach_diagram_connecting_lines.svg) no-repeat 0 0;
	*/

	background: url(../images/Approach/Approach_diagram_connecting_lines.png) no-repeat 0 0;
	background-size: 100% 240px;
	background-position: 0% 0%;

}


.messy_diagram_lines img {
	height: 280px; /* fixed height */
	width: 100%; /* variable width */
	display: block; /* removes the bottom space */
}

.messy_diagram_lines svg {
	height: 280px; /* fixed height */
	width: 100%; /* variable width */
	display: block; /* removes the bottom space */
}


.approach__diagram_wrapper.messy__real_example .approach_step {
	position: absolute;
	width: 4rem;
	height: 4rem;
}


#step_1__understand.approach_step 			{		top:	5rem;	left:	0%;		}


/* concierge flow */
#step_2__concierge__1.approach_step 		{		top:	0%;		left:	calc((3.2% *1) + (1.6% *0));	}
#step_2__concierge__2.approach_step 		{		top:	0%;		left:	calc((3.2% *2) + (1.6% *0));	}
#step_2__concierge__3.approach_step 		{		top:	3rem;	left:	calc((3.2% *3) + (1.6% *0));	}
#step_2__concierge__4.approach_step 		{		top:	0%;		left:	calc((3.2% *4) + (1.6% *0));	}
#step_2__concierge__5.approach_step 		{		top:	0%;		left:	calc((3.2% *5) + (1.6% *0));	}
#step_2__concierge__6.approach_step 		{		top:	3rem;	left:	calc((3.2% *6) + (1.6% *0));	}
#step_2__concierge__7.approach_step 		{		top:	0%;		left:	calc((3.2% *7) + (1.6% *0));	}
#step_2__concierge__8.approach_step 		{		top:	0%;		left:	calc((3.2% *8) + (1.6% *0));	}
#step_2__concierge__9.approach_step 		{		top:	3rem;	left:	calc((3.2% *9) + (1.6% *0));	}
#step_2__concierge__10.approach_step 		{		top:	0%;		left:	calc((3.2% *10) + (1.6% *0));	}
#step_2__concierge__11.approach_step 		{		top:	0%;		left:	calc((3.2% *11) + (1.6% *0));	}
#step_2__concierge__12.approach_step 		{		top:	3rem;	left:	calc((3.2% *12) + (1.6% *0));	}
#step_2__concierge__13.approach_step 		{		top:	0%;		left:	calc((3.2% *13) + (1.6% *0));	}
#step_2__concierge__14.approach_step 		{		top:	0%;		left:	calc((3.2% *14) + (1.6% *0));	}
#step_2__concierge__15.approach_step 		{		top:	3rem;	left:	calc((3.2% *15) + (1.6% *0));	}


/* external discovery */
#step_3__external_discovery__1.approach_step 	{		top:	10rem;		left:	calc((3.2% *1) + (1.6% *0));	}
#step_3__external_discovery__2.approach_step 	{		top:	14rem;		left:	calc((3.2% *2) + (1.6% *0));	}
#step_3__external_discovery__3.approach_step 	{		top:	10rem;		left:	calc((3.2% *3) + (1.6% *0));	}
#step_3__external_discovery__4.approach_step 	{		top:	14rem;		left:	calc((3.2% *4) + (1.6% *0));	}
#step_3__external_discovery__5.approach_step 	{		top:	10rem;		left:	calc((3.2% *5) + (1.6% *0));	}
#step_3__external_discovery__6.approach_step 	{		top:	14rem;		left:	calc((3.2% *6) + (1.6% *0));	}
#step_3__external_discovery__7.approach_step 	{		top:	10rem;		left:	calc((3.2% *7) + (1.6% *0));	}
#step_3__external_discovery__8.approach_step 	{		top:	15rem;		left:	calc((3.2% *8) + (1.6% *0));	}
#step_3__external_discovery__9.approach_step 	{		top:	10rem;		left:	calc((3.2% *9) + (1.6% *0));	}


/* client discovery */
#step_4__client_discovery__1.approach_step 	{		top:	20rem;		left:	calc((3.2% *7) + (1.6% *0));	}
#step_4__client_discovery__2.approach_step 	{		top:	20rem;		left:	calc((3.2% *9) + (1.6% *0));	}
#step_4__client_discovery__3.approach_step 	{		top:	15rem;		left:	calc((3.2% *10) + (1.6% *0));	}
#step_4__client_discovery__4.approach_step 	{		top:	20rem;		left:	calc((3.2% *11) + (1.6% *0));	}
#step_4__client_discovery__5.approach_step 	{		top:	15rem;		left:	calc((3.2% *12) + (1.6% *0));	}
#step_4__client_discovery__6.approach_step 	{		top:	10rem;		left:	calc((3.2% *13) + (1.6% *0));	}
#step_4__client_discovery__7.approach_step 	{		top:	20rem;		left:	calc((3.2% *13) + (1.6% *0));	}
#step_4__client_discovery__8.approach_step 	{		top:	15rem;		left:	calc((3.2% *14) + (1.6% *0));	}
#step_4__client_discovery__9.approach_step 	{		top:	10rem;		left:	calc((3.2% *15) + (1.6% *0));	}


/* client discovery */
#step_5__beta_version__1.approach_step 		{		top:	5rem;		left:	calc((3.2% *16) + (1.6% *0));		}
#step_5__beta_version__2.approach_step 		{		top:	10rem;		left:	calc((3.2% *16.75) + (1.6% *0));	}
#step_5__beta_version__3.approach_step 		{		top:	15rem;		left:	calc((3.2% *17.5) + (1.6% *0));		}
#step_5__beta_version__4.approach_step 		{		top:	10rem;		left:	calc((3.2% *18.25) + (1.6% *0));	}
#step_5__beta_version__5.approach_step 		{		top:	15rem;		left:	calc((3.2% *19) + (1.6% *0));		}
#step_5__beta_version__6.approach_step 		{		top:	10rem;		left:	calc((3.2% *19.75) + (1.6% *0));	}
#step_5__beta_version__7.approach_step 		{		top:	15rem;		left:	calc((3.2% *20.5) + (1.6% *0));		}
#step_5__beta_version__8.approach_step 		{		top:	10rem;		left:	calc((3.2% *21.25) + (1.6% *0));	}
#step_5__beta_version__9.approach_step 		{		top:	15rem;		left:	calc((3.2% *22) + (1.6% *0));		}
#step_5__beta_version__10.approach_step 	{		top:	10rem;		left:	calc((3.2% *22.75) + (1.6% *0));	}
#step_5__beta_version__11.approach_step 	{		top:	15rem;		left:	calc((3.2% *23.5) + (1.6% *0));		}
#step_5__beta_version__12.approach_step 	{		top:	10rem;		left:	calc((3.2% *24.25) + (1.6% *0));	}
#step_5__beta_version__13.approach_step 	{		top:	15rem;		left:	calc((3.2% *25) + (1.6% *0));		}
#step_5__beta_version__14.approach_step 	{		top:	10rem;		left:	calc((3.2% *25.75) + (1.6% *0));	}
#step_5__beta_version__15.approach_step 	{		top:	15rem;		left:	calc((3.2% *26.5) + (1.6% *0));		}
#step_5__beta_version__16.approach_step 	{		top:	10rem;		left:	calc((3.2% *27.25) + (1.6% *0));	}
#step_5__beta_version__17.approach_step 	{		top:	15rem;		left:	calc((3.2% *28) + (1.6% *0));		}
#step_5__beta_version__18.approach_step 	{		top:	10rem;		left:	calc((3.2% *28.75) + (1.6% *0));	}
#step_5__beta_version__19.approach_step 	{		top:	15rem;		left:	calc((3.2% *29.5) + (1.6% *0));		}
#step_5__beta_version__20.approach_step 	{		top:	10rem;		left:	calc((3.2% *30.25) + (1.6% *0));	}
#step_5__beta_version__21.approach_step 	{		top:	15rem;		left:	calc((3.2% *31) + (1.6% *0));		}


/* releases */
#step_6__releases__1.approach_step 			{		top:	5rem;		left:	calc((3.2% *16) + (1.6% *0));	}
#step_6__releases__2.approach_step 			{		top:	5rem;		left:	calc((3.2% *19) + (1.6% *0));	}
#step_6__releases__3.approach_step 			{		top:	5rem;		left:	calc((3.2% *22) + (1.6% *0));	}
#step_6__releases__4.approach_step 			{		top:	5rem;		left:	calc((3.2% *25) + (1.6% *0));	}
#step_6__releases__5.approach_step 			{		top:	5rem;		left:	calc((3.2% *28) + (1.6% *0));	}
#step_6__releases__6.approach_step 			{		top:	5rem;		left:	calc((3.2% *31) + (1.6% *0));	}


/* experiments */
#step_7__experiments__1.approach_step 		{		top:	20rem;		left:	calc((3.2% *18.25) + (1.6% *0));	}
#step_7__experiments__2.approach_step 		{		top:	20rem;		left:	calc((3.2% *24.25) + (1.6% *0));	}
#step_7__experiments__3.approach_step 		{		top:	20rem;		left:	calc((3.2% *30.25) + (1.6% *0));	}




/* ======================================================================== */
/* ! Approach diagram > toggle which view to show
/* ======================================================================== */

#copy_block__my_approach_diagram .wrapper.SHOW__LOGICAL_VIEW_DIAGRAM .approach__diagram_wrapper.LOGICAL_view {
	display: flex;
	xheight: 186px;
}
#copy_block__my_approach_diagram .wrapper.SHOW__LOGICAL_VIEW_DIAGRAM .approach__diagram_wrapper.REALITY_view {
	display: none;
	xheight: 0px !important;
}


#copy_block__my_approach_diagram .wrapper.SHOW__REALITY_VIEW_DIAGRAM .approach__diagram_wrapper.LOGICAL_view {
	display: none;
	xheight: 0px !important;
}
#copy_block__my_approach_diagram .wrapper.SHOW__REALITY_VIEW_DIAGRAM .approach__diagram_wrapper.REALITY_view {
	display: flex;
	xheight: 280px;
	
}


#copy_block__my_approach_diagram .approach__diagram_wrapper {
/*	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-ms-transition: 0.25s;
	transition: 0.25s;*/

	overflow: hidden;
}


.approach__diagram_wrapper.REALITY_view {
	xbackground: url('../images/Approach/Approach_diagram__1260x280__aspect_9x2.svg') no-repeat 50% 0;
	xbackground: url('../images/Approach/Approach_diagram__1281x245__aspect_9x2.svg') no-repeat 50% 0;
	background-size: 100% auto;
	aspect-ratio: 9 / 2 !important;
	height: auto;
}



/* ======================================================================== */
/* ! Approach dcopy blocks - title divider line colour
/* ======================================================================== */

#copy_block__understand .section_title .line:after 		{	background: rgb(220, 107, 154) 	}
#copy_block__discover .section_title .line:after 		{	background: rgb(182, 114, 163) 	}
#copy_block__analyse .section_title .line:after 		{	background: rgb(140, 120, 165) 	}
#copy_block__ideate .section_title .line:after 			{	background: rgb(41, 168, 201) 	}
#copy_block__experiment .section_title .line:after 		{	background: rgb(0, 205, 210) 	}
#copy_block__design .section_title .line:after 			{	background: rgb(73. 220, 179) 	}
#copy_block__ship .section_title .line:after 			{	background: rgb(248, 188, 94) 	}