.clickt-reviews {
	padding: var(--clickt-pad-y-l) var(--clickt-pad-x);
	background: var(--clickt-navy-600);
	color: var(--clickt-cream-100);
	font-family: var(--clickt-font-body);
}
.clickt-reviews__inner { max-width: var(--clickt-maxw-reviews); margin: 0 auto; }
.clickt-reviews__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 72px;
	gap: 24px;
}
.clickt-reviews__eyebrow {
	color: var(--clickt-gold-500);
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps-eyebrow);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.clickt-reviews__heading {
	font-family: var(--clickt-font-display);
	font-weight: 400;
	font-size: var(--clickt-fs-h2);
	margin: 0;
	letter-spacing: var(--clickt-ls-display-softer);
}
.clickt-reviews__stars-lg { color: var(--clickt-gold-500); display: inline-flex; gap: 4px; }
.clickt-reviews__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}
.clickt-reviews__card {
	margin: 0;
	padding: 40px;
	background: rgba(251,247,239,0.06);
	border: 1px solid rgba(251,247,239,0.12);
}
.clickt-reviews__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--clickt-gold-500);
}
/* Cap the visible height of a quote.
 *
 * Reviews are stored and rendered verbatim, and some run to several hundred
 * words — one seed review alone made this section 1278px tall. The clamp is
 * purely visual: the full text stays in the DOM, so search engines and
 * assistants still read every word, which is the entire point of rendering
 * reviews server-side. Nothing is truncated in the markup.
 *
 * The selector is deliberately specific. The premium re-skin styles this
 * element at `.elementor-1523 .clickt-reviews__quote` from an inline block in
 * the body, which beats a single class on source order, so this needs three
 * classes to win without resorting to !important.
 *
 * The full text is one click away on /reviews/, where it is not clamped.
 */
.clickt-reviews__inner .clickt-reviews__card .clickt-reviews__quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
	/* Belt and braces. Chrome now applies line-clamp without display:-webkit-box,
	 * and blockifies it to flow-root on a flex item, so the declaration above is
	 * not guaranteed to survive everywhere. 1em per line times the line-height
	 * bounds the height even where line-clamp is ignored entirely. */
	max-height: calc(6 * var(--clickt-lh-blockquote, 1.4) * 1em);
}

.clickt-reviews__quote {
	margin: 20px 0 0;
	font-size: var(--clickt-fs-blockquote);
	line-height: var(--clickt-lh-blockquote);
	font-family: var(--clickt-font-display);
	font-style: italic;
	font-weight: 400;
}
.clickt-reviews__caption {
	margin-top: 28px;
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps);
	text-transform: uppercase;
	color: var(--clickt-gold-500);
}
@media (max-width: 767px) {
	.clickt-reviews__head { flex-direction: column; align-items: flex-start; }
	.clickt-reviews__grid { grid-template-columns: 1fr; gap: 20px; }
	.clickt-reviews__card { padding: 28px; }
}
.clickt-reviews__caption {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.clickt-reviews__source::before {
	content: "·";
	margin-right: 6px;
}