/* general page styling ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.single-case-study main {font-size: 17px;}
.single-case-study main h2 {font-size: clamp(54px,6vw,128px); text-transform: initial;}
.single-case-study main h3 {
	font-family: "urw-din-condensed", "ff-good-web-pro-extra-conden", sans-serif;
	font-style: italic;
	font-size: clamp(40px,3vw,54px);
	line-height: 1em;
}


/* Hero ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
section.cs-hero {padding: 80px 0;}
.cs-hero video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-position: center center;
	object-fit: cover;
}

.cs-hero-products {
	position: absolute;
	left: 50%;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 24px;
	width: 90%;
	max-width: 1280px;
	transform: translate3d(-50%,0,0);
}
.cs-hero-products img {
	position: relative;
	display: block;
	height: 100px;
	width: auto;
}

.cs-hero h1,
.cs-hero #title-flare {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125em;
	width: 90%;
	margin: 0 auto;
	font-size: clamp(20px,14vw,128px);
	font-family: "urw-din-condensed", sans-serif;
	font-style: italic;
	font-weight: 700;
	line-height: 0.85em;
	text-transform: initial;
	text-align: center;
}
.cs-hero span {
	position: relative;
	display: inline-block;
	margin-top: 0.4em;
	padding: 0.25em 0.5em;
	background: #c12030;
	font-family: "urw-din", "din-2014", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: .175em;
	line-height: 1em;
	text-transform: uppercase;
}
.cs-hero h1 {
	position: relative;
	z-index: 3;
	padding-top: 120px;
	color: rgba(255,255,255,1);
}
.cs-hero #title-flare {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 2;
	transform: translate3d(-50%,-80px,0);
	mix-blend-mode: overlay;
	color: transparent;
	-webkit-text-stroke-width: 0.0625em;
	-webkit-text-stroke-color: rgba(255,255,255,1);
}
.cs-hero #title-flare span {
	-webkit-text-stroke-width: 0em;
}

@media screen and (min-width: 600px) {
	.cs-hero h1, .cs-hero #title-flare {font-size: clamp(48px,4.5vw,128px);}
	.cs-hero span {font-size: 21px;}
}

@media screen and (min-width: 900px) {
	.cs-hero-products img {height: 160px;}
	.cs-hero h1 {padding-top: 180px;}
}


/* Intro ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.cs-details {
	position: relative;
	display: block;
	margin: 0 0 48px; 
	padding: 0;
	background: #fff;
	border: 3px solid #000700;
	box-shadow: 0.5em 0.5em 0 rgba(0,7,0,0.15);
}
.cs-details li {position: relative; display: flex; flex-direction: column;}
.cs-details li label,
.cs-details li span {
	position: relative;
	display: block;
	padding: 0.5em;
	line-height: 1.24em;
}
.cs-details li label {
	background: #f4f3ee;
	font-weight: 600;
	text-transform: uppercase;
}
.cs-details li:nth-child(1n + 2) {border-top: 3px solid #000700;}

.cs-intro {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.cs-intro .cs-intro-column {position: relative; display: block;}

@media screen and (min-width: 620px) {
	.cs-details li {flex-direction: row;}
	.cs-details li:nth-child(1n + 2) {border-top: none;}
	.cs-details li label {min-width: 264px; background: #000700; color: #fff;}
	.cs-details li:nth-child(1n + 2) label {border-top: 1px solid #fff;}
	.cs-details li span {flex-grow: 1;}
	.cs-details li:nth-child(1n + 2) span {border-top: 1px solid #000700;}
}

@media screen and (min-width: 767px) {
	.cs-intro {flex-direction: row; gap: 5%;}
	.cs-intro .cs-intro-column {width: 47.5%; flex-grow: 1;}
}


/* general section styling ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
section.cs-sections {padding: calc(2em + 8vw) 0;}
.cs-sections:nth-child(even) {background: #f4f3ee;}
.cs-section {
	position: relative; 
	display: block; 
	padding: 48px 0 0;
}
.cs-section:first-child {padding-top: 0;}


/* section headers ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.cs-section-header {position: relative; z-index: 2; display: block;}
.cs-section-header .schergain-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 8px;
	text-align: center;
}
.cs-section-header .schergain-header img {
	position: relative;
	display: block;
	height: 60px;
	width: auto;
}
.cs-section-header .schergain-header strong {
	position: relative;
	display: block;
	font-weight: 600;
	font-size: 1.2em;
	line-height: 1em;
	text-transform: uppercase;
}
.cs-section-header h2 {margin: 0;}
.cs-section-header-pan {position: relative; display: block; width: 100%; padding-top: 48px;}


/* Spec lists ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.long-text ul.cs-spec-data-list {border-top: 1px solid #ccc;}
.long-text ul.cs-spec-data-list li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	padding: 0.5em 0;
	margin: 0;
	border-bottom: 1px solid #ccc;
}
.long-text ul.cs-spec-data-list li:before {display: none;}
.long-text ul.cs-spec-data-list li label,
.long-text ul.cs-spec-data-list li span {
	position: relative; 
	display: block; 
	line-height: 1.25em;
}
.long-text ul.cs-spec-data-list li label {font-weight: 600;}

@media screen and (min-width: 480px) {
	.long-text ul.cs-spec-data-list li {flex-direction: row; gap: 5%;}
	.long-text ul.cs-spec-data-list li label {width: 35%;}
	.long-text ul.cs-spec-data-list li span {width: 60%;}
}


/* image rows ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.cs-image-row .cs-images {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex-wrap: wrap;
}
.cs-image-row .cs-image {
	flex-grow: 1;
	position: relative;
	display: block;
	width: calc(50% - 4px);
}
.cs-image-row .cs-image img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}
.cs-image-row .cs-image span {
	position: absolute;
	bottom: 8%;
	left: 0;
	display: inline-block;
	padding: 0.25em;
	background: #000700;
	color: #fff;
	font-weight: 600;
	font-style: italic;
	font-size: 0.85em;
	line-height: 1em;
}

@media screen and (min-width: 460px) {
	.cs-image-row .cs-image {width: calc(33.3333% - 5.3333px);}
}


/* image comparison ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.cs-img-comp-container {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 8px;
}
.cs-img-comp-sample {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(33.3333% - 5.3333px);
	border: 3px solid #000700;
	box-shadow: 0.5em 0.5em 0 rgba(0,7,0,0.15);
}
.cs-img-comp-header {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 0.5em 0.25em;
	background: #000700;
	color: #fff;
}
.cs-img-comp-header span {
	position: relative;
	display: block;
	font-family: "urw-din-condensed", "ff-good-web-pro-extra-conden", sans-serif;
	font-weight: 600;
	font-style: italic;
	font-size: 1.6em;
	line-height: 1em;
	text-align: center;
}
.cs-img-comp-header img {
	position: relative;
	display: block;
	height: 48px;
	width: auto;
}

.cs-img-comp-imgs {position: relative; display: block;}
.cs-img-comp-img {position: relative; display: block;}
.cs-img-comp-img img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}
.cs-img-comp-img span {
	position: absolute;
	bottom: 32px;
	left: 0;
	display: inline-block;
	padding: 0.25em;
	background: #000700;
	color: #fff;
	font-weight: 600;
	font-style: italic;
	font-size: 0.85em;
	line-height: 1em;
}

@media screen and (min-width: 640px) {
	.cs-img-comp-header {flex-direction: row; padding: 0;}
	.cs-img-comp-header span {padding: 0.75em 0;}
}


/* Tables / Charts ----------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
.cs-chart-header {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.single-case-study main .cs-chart-header h3 {
	z-index: 2;
	margin-bottom: 0; 
	text-shadow: 0 0 0.5em rgba(255,255,255);
}
.cs-chart-header h3 span {color: #c10230;}
.cs-chart-head-crop-container {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: block;
	width: 80vw;
	height: auto;
	aspect-ratio: 3/1;
}
.cs-chart-head-crop {
	position: relative;
	z-index: 1;
	display: block;
	padding-bottom: 18px;
}
.cs-chart-header .cs-chart-head-crop .cs-chart-head-crop-container img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-position: 100% 0;
	object-fit: cover;
}
.cs-chart-header .cs-chart-head-crop span {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0.325em 0.5em;
	background: #000700;
	color: #fff;
	font-weight: 600;
	line-height: 1em;
	text-transform: uppercase;
	text-align: center;
}

@media screen and (min-width: 450px) {
	.cs-chart-header {
		flex-direction: row;
		gap: 0;
		justify-content: space-between;
		align-items: flex-end;
	}
	.single-case-study main .cs-chart-header h3 {padding-bottom: 18px;}
	.cs-chart-head-crop-container {width: 55vw; max-width: 360px;}
}


/* Charts ----------------------------------------------------- */
.cs-chart {
	position: relative;
	z-index: 2;
	display: flex;
	background: #fff;
	border: 3px solid #000700;
	box-shadow: 0.5em 0.5em 0 rgba(0,7,0,0.15);
}

.cs-chart-row {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.cs-chart-row.cs-chart-row-header {
	background: #000700; 
	color: #fff; 
	font-weight: 600;
}

.cs-chart.cs-chart-columns {flex-direction: column;}
.cs-chart-column {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: row;
}

.cs-chart-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80px;
 	padding: 0 0.5em;
 	line-height: 1.25em;
	text-align: center;
}
.cs-chart-cell.cs-chart-head-cell {background: #000700; color: #fff; font-weight: 600;}
.cs-chart-cell.cs-chart-head-cell em {position: relative; display: block; font-weight: 400;}
.cs-chart-cell.cs-chart-main-cell img {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: auto;
	height: 80%;
	transform: translate3d(-50%,-50%,0);
}

.cs-chart-row .cs-chart-cell:nth-child(1n + 2) {border-top: 1px solid #ccc;}
.cs-chart-row .cs-chart-cell.cs-chart-main-cell:nth-child(even) {background: #f4f3ee;}

.cs-chart-column .cs-chart-cell {flex: 1;}
.cs-chart-column:nth-child(1n + 2) .cs-chart-cell {border-top: 1px solid #ccc;}

.cs-chart-cell.cs-chart-main-cell span.cs-chart-math-operator {
	position: absolute;
	left: 50%;
	top: 0;
	display: flex;
	align-items: center;
	transform: translate3d(-50%,-50%,0);
	color: #000700;
}
.cs-chart-cell.cs-chart-main-cell span.cs-chart-math-operator em {
	position: relative;
	z-index: 2;
	color: #000700;
	font-style: normal;
	font-weight: 300;
}
.cs-chart-cell.cs-chart-main-cell span.cs-chart-math-operator:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: block;
	width: 1em;
	height: 1em;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0.5em;
	transform: translate3d(-50%,-50%,0);
}

.cs-table-calc .cs-chart-cell.cs-chart-main-cell:first-child {
	font-weight: 600; 
	font-size: 1.2em; 
	line-height: 1em;
	text-transform: uppercase;
}
.cs-table-calc .cs-chart-column:last-child .cs-chart-cell.cs-chart-main-cell:nth-child(even) {font-weight: 600;}

.cs-table-loss .cs-chart-column .cs-chart-main-cell:nth-child(even) {background: #f4f3ee;}

.table-notes {font-style: italic; font-size: 0.85em; line-height: 1.5em;}
.table-notes ul {margin: 12px 0;}
.table-notes ul li {margin-left: 12px; margin-bottom: 0;}
.table-notes ul li:before {margin-left: -12px; color: #000700;}

@media screen and (min-width: 767px) {
	.cs-chart.cs-chart-rows {display: block;}
	.cs-chart-row {flex-direction: row;}
	.cs-chart-row.cs-chart-row-main {border-top: 1px solid #000700;}
	.cs-chart-row .cs-chart-cell {height: auto;}
	.cs-chart-row .cs-chart-cell:nth-child(1n + 2) {border-top: none;}
	
	.cs-chart.cs-chart-columns {flex-direction: row;}
	.cs-chart-column {display: block;}
	.cs-chart-column .cs-chart-cell {height: 92px;}
	.cs-chart-column:nth-child(1n + 2) .cs-chart-cell {border-top: none;}
	.cs-chart-column:nth-child(1n + 2) .cs-chart-cell.cs-chart-main-cell {border-left: 1px solid #ccc;}
	
	.cs-chart-cell {flex: 1;}
	.cs-chart-cell.cs-chart-head-cell {padding: 0.35em 0.5em 0.5em;}
	.cs-chart-cell.cs-chart-main-cell {padding: 1em 0.5em;}
	.cs-chart-cell.cs-chart-main-cell:first-child {padding-top: 0.25em; padding-bottom: 0.25em;}

	.cs-chart-cell.cs-chart-main-cell span.cs-chart-math-operator {left: 0;	top: 50%;}
	.cs-chart-cell.cs-chart-main-cell span.cs-chart-math-operator:before {border: none; background: #ccc;}
}