/**
 * Case detail pages — shared styles (KING RootBarrier, …).
 */

:root {
	--tf-blue: #3273EB;
}


.tf-case-hero.e-con,
.tf-case-hero {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding:  clamp(48px, 15vw, 284px) var(--tf-page-x) clamp(40px, 14vw, 264px) !important;
	background-color: var(--tf-blue) !important;
	color: #fff;
}

.tf-case-hero-widget.elementor-widget-html,
.tf-case-hero-widget {
	width: 100% !important;
	margin: 0 !important;
}

.tf-case-hero-widget .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

.tf-case-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
	column-gap: clamp(40px, 6vw, 96px);
	align-items: flex-end;
	width: 100%;
	font-family: "Garet", sans-serif;
}

.tf-case-hero__copy {
	min-width: 0;
	width: 45em;
}

.tf-case-hero__title {
	margin: 0 0 clamp(20px, 2.5vw, 32px);
	color: #fff;
	font-family: "Garet", sans-serif;
	font-size: clamp(36px, 4vw, 66px);
	font-weight: 800;
	line-height: 1.1;
}

.tf-case-hero__text {
	margin: 0;
	color: #fff;
	font-family: "Garet", sans-serif;
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 400;
	line-height: 1.65;
}

.tf-case-hero__mark {
	color: #eb6049;
}

.tf-case-hero__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-self: end;
	width: 100%;
	max-width: 15em;
}

.tf-case-hero__item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin: 0;
	color: #fff;
	font-family: "Garet", sans-serif;
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 400;
	line-height: 1.35;
}

.tf-case-hero__check {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS43NjciIGhlaWdodD0iMTUuNzY3Ij48cGF0aCBkYXRhLW5hbWU9IlBhdGggMTE2IiBkPSJNNy44ODQgMGE3Ljg4NCA3Ljg4NCAwIDEgMCA3Ljg4NCA3Ljg4NEE3Ljg4NyA3Ljg4NyAwIDAgMCA3Ljg4NCAwem0wIDE0LjE5MWE2LjMwNyA2LjMwNyAwIDEgMSA2LjMwNy02LjMwNyA2LjMxNSA2LjMxNSAwIDAgMS02LjMwNyA2LjMwN3pNMTEuNSA0LjQgNi4zIDkuNiA0LjI2NSA3LjU2IDMuMTUzIDguNjcybDMuMTUzIDMuMTUzIDYuMzA3LTYuMzA3eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) no-repeat 50% / contain;
	content: "";
	height: 1rem;
	left: 0;
	top: -.125rem;
	width: 1rem;
}

@media (max-width: 1024px) {
	.tf-case-hero.e-con,
	.tf-case-hero {
		padding: calc(var(--tf-header-h) + 40px) var(--tf-page-x) 56px !important;
	}

	.tf-case-hero__inner {
		grid-template-columns: 1fr;
		row-gap: 36px;
	}

	.tf-case-hero__list {
		justify-self: start;
		max-width: none;
	}

	.tf-case-hero__title {
		font-size: 30px;
		margin-bottom: 16px;
	}

	.tf-case-hero__text {
		font-size: 18px;
	}

	.tf-case-hero__item {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.tf-case-hero.e-con,
	.tf-case-hero {
		padding: calc(var(--tf-header-h) + 28px) var(--tf-page-x) 48px !important;
	}

	.tf-case-hero__inner {
		row-gap: 28px;
	}

	.tf-case-hero__title {
		font-size: 28px;
	}

	.tf-case-hero__text {
		font-size: 16px;
	}

	.tf-case-hero__list {
		gap: 12px;
	}
}

/* ========== Block 2 — contact + product slider ========== */
.tf-case-contact.e-con,
.tf-case-contact {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
	--tf-orange: #EB6049;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 0 clamp(72px, 9vw, 140px) !important;
	background:
	linear-gradient(
		to bottom,
		var(--tf-blue) 0,
		var(--tf-blue) clamp(100px, 15vw	, 280px),
		#f9f9fd clamp(100px, 14vw, 180px),
		#f9f9fd 100%
	) !important;
}

.tf-case-contact-widget.elementor-widget-html,
.tf-case-contact-widget {
	width: 100% !important;
	margin: 0 !important;
}

.tf-case-contact-widget .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

.tf-case-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	column-gap: clamp(16px, 2vw, 32px);
	align-items: start;
	width: 100%;
	padding: 0 0 0 var(--tf-page-x);
	box-sizing: border-box;
}

.tf-case-contact__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	margin: 151px 0 0 240px;
}

.tf-case-contact__portrait {
	margin: 0 0 clamp(20px, 2.5vw, 25px) !important;
	width: 100%;
	max-width: 479px;
	line-height: 0;
	overflow: hidden;
	height: 264px;
}

.tf-case-contact__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.tf-case-contact__mail-title {
	margin: 0 0 8px;
	color: #1a1a1a;
	font-family: "Garet", sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
}

/*.tf-case-contact__mail-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tf-blue);
	font-family: "Garet", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.2;
	transition: color 0.2s ease;
}

.tf-case-contact__mail-link:hover,
.tf-case-contact__mail-link:focus-visible {
	color: var(--tf-orange);
}
*/

.tf-case-contact__mail-link{
	position:relative; display:inline-block;
	padding:0 .78125rem 0 0;
	background:transparent!important; border:0!important; border-radius:0!important;
	color: #3273eb !important;
	font-size:.8125rem; font-weight:500; letter-spacing:.15em; line-height:1; text-transform:uppercase;
	transition:all .5s cubic-bezier(.22,.61,.36,1);
}

.tf-case-contact__mail-arrow{
	display: none !important;
}

.tf-case-contact__mail-link::after,
.tf-case-contact__mail-link::before{
	content:""; position:absolute; top:50%;
	width:.75rem; height:1.0625rem; transform:translateY(-50%);
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS41MjQiIGhlaWdodD0iOS41NTMiPjxwYXRoIGRhdGEtbmFtZT0iUGF0aCAxOTMiIGQ9Im0xMC43NDcgMC0uODQyLjg0MiAzLjMzMiAzLjMzOEgwdjEuMTk0aDEzLjIzN0w5Ljg5OSA4LjcwNmwuODQ4Ljg0OCA0Ljc3Ny00Ljc3N3oiIGZpbGw9IiMzMjczZWIiLz48L3N2Zz4=") no-repeat 50% / contain;
	transition:all .5s cubic-bezier(.22,.61,.36,1); pointer-events:none;
}
.tf-case-contact__mail-link::after{ left:100%; opacity:1; }
.tf-case-contact__mail-link::before{ left:-10%; opacity:0; }
.tf-case-contact__mail-link:hover{ padding-left:1.5625rem; }
.tf-case-contact__mail-link:hover::after{ left:110%; opacity:0; }
.tf-case-contact__mail-link:hover::before{ left:0; opacity:1; }


/*.tf-case-contact__mail-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.tf-case-contact__mail-link:hover .tf-case-contact__mail-arrow,
.tf-case-contact__mail-link:focus-visible .tf-case-contact__mail-arrow {
	transform: translateX(3px);
}*/

.tf-case-contact__media.tf-how {
	position: relative;
	display: block;
	width: 100%;
	min-height: clamp(420px, 48vw, 640px);
	background: #111;
	overflow: hidden;
}

.tf-case-contact__media .tf-how__slides {
	position: absolute;
	inset: 0;
}

.tf-case-contact__media .tf-how__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.tf-case-contact__media .tf-how__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.tf-case-contact__media .tf-how__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.tf-case-contact__media .tf-how__nav {
	position: absolute;
	left: clamp(16px, 2.5vw, 40px);
	right: auto;
	bottom: clamp(16px, 2.5vw, 40px);
	z-index: 5;
	display: flex;
	gap: 12px;
	transform: none;
}

.tf-case-contact__media .tf-how__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, color 0.25s ease;
}

.tf-case-contact__media .tf-how__btn svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.tf-case-contact__media .tf-how__btn--prev {
	background: #fff;
	color: rgb(185, 185, 185);
	border-color: rgb(185, 185, 185);
}

.tf-case-contact__media .tf-how__btn--next {
	border: 1.5px solid var(--tf-orange);
	background: transparent;
	color: var(--tf-orange);
}


.tf-case-contact__media .tf-how__btn:focus-visible {
	outline: 2px solid var(--tf-orange);
	outline-offset: 3px;
}

.tf-case-contact__media .tf-how__btn--prev:hover {
	border: 1.5px solid var(--tf-orange);
	background:var(--tf-orange);
	color: #fff;
}

.tf-case-contact__media .tf-how__btn--next:hover {
	background:var(--tf-orange);
	color: #fff;
}


@media (max-width: 1850px) {
	.tf-case-hero__copy {
		min-width: 0;
		width: 40em;
	}
	.tf-case-hero__list {
		max-width: 300px;
	}
}

@media (max-width: 1750px) {
	.tf-case-contact__aside {
		margin: 121px 0 0 140px;
	}
}

@media (max-width: 1450px) {
	.tf-case-hero__copy {
		min-width: 0;
		width: 30em;
	}
}



@media (max-width: 1024px) {

	.tf-case-hero__copy {
		min-width: 0;
		width: 100%
	}

	.tf-case-contact.e-con,
	.tf-case-contact {
		padding-bottom: 64px !important;
		background:
		linear-gradient(
			to bottom,
			var(--tf-blue) 0,
			var(--tf-blue) 250px,
			#f9f9fd 72px,
			#f9f9fd 100%
		) !important;
	}

/*	.tf-case-contact__inner {
		grid-template-columns: 1fr;
		row-gap: 36px;
		padding-left: 0;
	}*/

	.tf-case-contact__aside {
		margin: 150px 0 0 40px;
	}

	.tf-case-contact__portrait {
		height: 130px;
	}

	.tf-case-contact__aside {
		order: 1;
		padding: 0 var(--tf-page-x);
	}

	.tf-case-contact__media.tf-how {
		order: 2;
		min-height: 0;
		aspect-ratio: 4 / 3;
		width: 100%;
	}

	.tf-case-contact__portrait {
		max-width: none;
	}

	.tf-case-contact__media .tf-how__btn{
		width: 2.5rem;
		height: 2.5rem;
	}
	.tf-case-contact__media .tf-how__btn svg{
		width: 1rem;
		height: 1rem;
	}

}

@media (max-width: 767px) {
	.tf-case-contact.e-con,
	.tf-case-contact {
		padding-bottom: 56px !important;
		background:
		linear-gradient(
			to bottom,
			var(--tf-blue) 0,
			var(--tf-blue) 370px,
			#f9f9fd 48px,
			#f9f9fd 100%
		) !important;
	}

	.tf-case-contact__aside {
		margin: 0 15px 0 60px;
	}

	.tf-case-contact__inner {
		grid-template-columns:  1fr;
	}

	.tf-case-contact__aside{
		order: 2;
	}
	.tf-case-contact__media.tf-how{
		order: 1;
	}

	.tf-case-contact__inner {
		row-gap: 28px;
	}

	.tf-case-contact__media .tf-how__btn {
		width: 48px;
		height: 48px;
	}

	.tf-case-contact__media .tf-how__nav {
		left: 16px;
		bottom: 16px;
		gap: 10px;
	}
}

/* ========== Block 3 — testimonial quotes ========== */
.tf-case-quote.e-con,
.tf-case-quote {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: clamp(48px, 6vw, 96px) var(--tf-page-x) clamp(80px, 9vw, 40px) !important;
	background: #F9F9FD !important;
	gap: 0 !important;
}

.tf-case-quote > .elementor-element,
.tf-case-quote-eyebrow,
.tf-case-quote-text {
	width: 70% !important;
	max-width: 70% !important;
	align-self: center !important;
}

.tf-case-quote-eyebrow {
	margin: 0 0 16px !important;
}

.tf-case-quote-eyebrow .elementor-heading-title {
	margin: 0 !important;
	color: var(--tf-blue, #3273EB) !important;
	font-family: "Garet", sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .15em;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
}

.tf-case-quote-text {
	margin: 0 0 clamp(24px, 2.5vw, 36px) !important;
}

.tf-case-quote-text:last-child {
	margin-bottom: 0 !important;
}

.tf-case-quote-text .elementor-widget-container,
.tf-case-quote-text p {
	margin: 0 !important;
	color: #1a1a1a !important;
	font-family: "Garet", sans-serif !important;
	font-size: clamp(18px, 1.35vw, 24px) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
}

.tf-case-quote-text em {
	font-style: italic;
}

@media (max-width: 1024px) {
	.tf-case-quote.e-con,
	.tf-case-quote {
		padding: 40px var(--tf-page-x) 64px !important;
	}

	.tf-case-quote > .elementor-element,
	.tf-case-quote-eyebrow,
	.tf-case-quote-text {
		width: 100% !important;
		max-width: 100% !important;
	}

	.tf-case-quote-text {
		margin-bottom: 28px !important;
	}

	.tf-case-quote-text .elementor-widget-container,
	.tf-case-quote-text p {
		font-size: 18px !important;
	}
}

@media (max-width: 767px) {
	.tf-case-quote.e-con,
	.tf-case-quote {
		padding: 32px var(--tf-page-x) 56px !important;
	}

	.tf-case-quote-eyebrow {
		margin-bottom: 12px !important;
	}

	.tf-case-quote-text {
		margin-bottom: 24px !important;
	}

	.tf-case-quote-text .elementor-widget-container,
	.tf-case-quote-text p {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}
}

/* ========== Block 4 — back + product summary ========== */
.tf-case-outro.e-con,
.tf-case-outro {
	--padding-top: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-right: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: clamp(64px, 7vw, 110px) var(--tf-page-x) !important;
	background: #F9F9FD !important;
}

.tf-case-outro-widget.elementor-widget-html,
.tf-case-outro-widget {
	width: 70% !important;
	max-width: 70% !important;
	margin: 0 auto !important;
	align-self: center !important;
}

.tf-case-outro-widget .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

.tf-case-outro__inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	column-gap: clamp(32px, 5vw, 80px);
	width: 100%;
}




.tf-case-outro__back {
	position: relative;
	display: inline-block; 
	margin-left: .78125rem;
	margin-right: 0;
	padding-left: .78125rem;
	padding-right: 0;          
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #3273eb !important;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .15em;
	line-height: 1;
	text-transform: uppercase;
	transition: all .5s cubic-bezier(.22, .61, .36, 1);
}

.tf-case-outro__back-arrow {
	display: none !important;
}

.tf-case-outro__back::after,
.tf-case-outro__back::before {
	content: "";
	position: absolute;
	top: 50%;
	width: .75rem;
	height: 1.0625rem;
	transform: translateY(-50%) scaleX(-1);
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS41MjQiIGhlaWdodD0iOS41NTMiPjxwYXRoIGRhdGEtbmFtZT0iUGF0aCAxOTMiIGQ9Im0xMC43NDcgMC0uODQyLjg0MiAzLjMzMiAzLjMzOEgwdjEuMTk0aDEzLjIzN0w5Ljg5OSA4LjcwNmwuODQ4Ljg0OCA0Ljc3Ny00Ljc3N3oiIGZpbGw9IiMzMjczZWIiLz48L3N2Zz4=") no-repeat 50% / contain;
	transition: all .5s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}


.tf-case-outro__back:hover {
	margin-left: 0;
	padding-left: 0;
	padding-right: 1.5625rem;
}

.tf-case-outro__back::after{ right:100%; opacity:1; }
.tf-case-outro__back::before{ right:-10%; opacity:0; }
.tf-case-outro__back:hover{ padding-right:1.5625rem; }
.tf-case-outro__back:hover::after{ right:110%; opacity:0; }
.tf-case-outro__back:hover::before{ right:0; opacity:1; }


/*.tf-case-outro__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	color: var(--tf-blue, #3273EB);
	font-family: "Garet", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.2;
	transition: color 0.2s ease;
}

.tf-case-outro__back:hover,
.tf-case-outro__back:focus-visible {
	color: var(--tf-orange, #EB6049);
}

.tf-case-outro__back-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.tf-case-outro__back:hover .tf-case-outro__back-arrow,
.tf-case-outro__back:focus-visible .tf-case-outro__back-arrow {
	transform: translateX(-3px);
}*/

.tf-case-outro__product {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 1 33%;
	max-width: 28em;
	margin-left: auto;
}

.tf-case-outro__icon {
	margin: 0 105px 0 !important;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	line-height: 0;
}

.tf-case-outro__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tf-case-outro__label {
	margin: 0 0 12px;
	color: var(--tf-blue, #3273EB);
	font-family: "Garet", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.3;
	width: 100%;
}

.tf-case-outro__text {
	margin: 0;
	color: #1a1a1a;
	font-family: "Garet", sans-serif;
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 400;
	line-height: 1.8888888889;
}




@media (max-width: 1024px) {
	.tf-case-outro.e-con,
	.tf-case-outro {
		padding: 48px var(--tf-page-x) 56px !important;
	}

	.tf-case-outro-widget.elementor-widget-html,
	.tf-case-outro-widget {
		width: 100% !important;
		max-width: 100% !important;
	}

	.tf-case-outro__product {
		flex: 0 1 54%;
	}

}



@media (max-width: 767px) {
	.tf-case-outro.e-con,
	.tf-case-outro {
		padding: 40px var(--tf-page-x) 48px !important;
	}

	.tf-case-outro__inner {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 36px;
	}

	.tf-case-outro__back {
		order: 2;
	}

	.tf-case-outro__product {
		order: 1;
		flex: none;
		max-width: none;
		width: 100%;
		margin-left: 0;
	}

	.tf-case-outro__inner {
		row-gap: 28px;
	}

	.tf-case-outro__icon {
		width: 64px;
		height: 64px;
		margin-bottom: 16px;
	}

	.tf-case-outro__text {
		font-size: 16px;
	}
}

/* Block 5 — magnetic CTA size (50px @1440 → 66px @1920) */
.tf-case-cta.tf-magnetic-band .tf-magnetic-cta {
	font-size: clamp(50px, calc(50px + (100vw - 1440px) * 16 / 480), 66px);
}

@media (max-width: 1024px) {
	.tf-case-cta.tf-magnetic-band .tf-magnetic-cta {
		font-size: clamp(28px, 5.5vw, 40px);
	}
}

@media (max-width: 600px) {
	.tf-case-cta.tf-magnetic-band .tf-magnetic-cta {
		font-size: 28px;
	}


	.tf-case-outro__product{
		display: flex;
		flex-direction: row;
		column-gap: 2rem;
		align-items: flex-start;
	}

	.tf-case-outro__icon {
		margin: 0 !important;
		flex-shrink: 0;
	}

}

@media (max-width: 400px) {
	.tf-case-hero__title {
		font-size: 26px !important;
		overflow-wrap: anywhere;
	}

	.tf-case-hero__text,
	.tf-case-hero__text p {
		font-size: 15px !important;
	}

	.tf-case-contact__mail-title {
		font-size: 18px !important;
		overflow-wrap: anywhere;
	}

	.tf-case-contact__mail-link {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.tf-case-quote__text,
	.tf-case-quote__text p {
		font-size: 15px !important;
	}

	.tf-case-outro__icon {
		width: 75px;
		height: 75px;
	}

	.tf-case-outro__text {
		font-size: 15px;
	}

	.tf-case-cta.tf-magnetic-band .tf-magnetic-cta {
		font-size: 22px !important;
	}
}