/* Client Testimonial — the case study interior testimonial (Figma 11721:18249,
   visual view) on any page. tbl-cs-interior.css only loads on single
   case_study and scopes these rules under .tbl-csi__view--visual, so the
   values are ported here and scoped under the module root instead. Measured
   against /case-studies/spero-financial/ at 1896 on 2026-10-21: block
   58.4375% wide, label 10/17.78 2px caps #616161, quote 32/38 -0.32px #1d1d1d
   weight 500, label->quote 65, quote->name 70, name 18/22.4 0.18px. */

.tbl-client-testimonial .tbl-csi__section--testimonial {
	width: 58.4375%;           /* 935 / 1600 */
	margin: 0 auto;
	text-align: center;
	color: #616161;
}

/* The label is a heading-shaped <p>; reset it before typing it. */
.tbl-client-testimonial .tbl-csi__quote-label {
	font: inherit;
	margin: 0;
	font-size: 10px;
	line-height: 17.78px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #616161;
}

/* theme.css styles every blockquote:not(.tiktok-embed): a 1px rule in
   ::before, 60/30 side padding, a 30px left margin, weight 600, and a
   LAYERED `> p { line-height: inherit !important }`. Line-height therefore
   goes on the blockquote and the <p> inherits it. */
.tbl-client-testimonial .tbl-csi__quote {
	margin: 65px 0 70px;
	padding: 0;
	min-height: 0;
	font-size: 32px;
	line-height: 38px;
	font-weight: 500;
	color: #1d1d1d;
	text-align: center;
}

.tbl-client-testimonial .tbl-csi__quote::before {
	content: none;
}

.tbl-client-testimonial .tbl-csi__quote .tbl-csi__quote-text {
	margin: 0;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #1d1d1d;
	white-space: pre-line;
}

.tbl-client-testimonial .tbl-csi__attrib {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--Black, #000);
}

.tbl-client-testimonial .tbl-csi__attrib-name {
	font-size: 18px;
	line-height: 22.4px;
	letter-spacing: 0.18px;
}

.tbl-client-testimonial .tbl-csi__attrib-role {
	font-size: 10px;
	line-height: 17.78px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Below 1024 the case study gives the block 20px side margins and a fluid
   quote, 28px at 375 -> 42px at 767, written as an explicit clamp (the --h*
   tokens collapse inside clamp() in Firefox). */
@media (max-width: 1023px) {
	.tbl-client-testimonial .tbl-csi__section--testimonial {
		width: auto;
		margin-left: 20px;
		margin-right: 20px;
	}

	.tbl-client-testimonial .tbl-csi__quote .tbl-csi__quote-text {
		font-size: clamp(28px, calc(14.61px + 3.57vw), 42px);
	}

	.tbl-client-testimonial .tbl-csi__quote {
		line-height: 1.24;
		margin: 40px 0 32px;
	}
}

@media (max-width: 767px) {
	.tbl-client-testimonial .tbl-csi__quote .tbl-csi__quote-text {
		font-size: 24px;
	}

	.tbl-client-testimonial .tbl-csi__quote {
		line-height: 30px;
		margin: 32px 0 40px;
	}
}