/*
 * cta-band.css — S11, the closing band, plus S10's quote cards.
 *
 * The band uses the same dark-surface tokens as the footer, so the page ends
 * in one continuous dark block instead of two competing ones.
 */

.cta-band {
	background: var(--ink-deep);
	color: var(--on-dark);
}

.cta-band__inner {
	display: grid;
	gap: var(--s-8);
	align-items: center;
	padding-block: clamp(var(--s-16), 8vw, var(--s-24));
}

.cta-band__title {
	margin: 0 0 var(--s-4);
	max-width: 26ch;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh-heading);
	color: var(--on-dark);
	text-wrap: balance;
}

.cta-band__text {
	margin: 0;
	max-width: 46ch;
	color: var(--on-dark-muted);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
}

/* The ghost button has to invert on the dark band. */
.cta-band__ghost {
	color: var(--on-dark);
	border-color: rgba(242, 246, 240, 0.45);
}

.cta-band__ghost:hover {
	background: var(--on-dark);
	color: var(--ink-deep);
	border-color: var(--on-dark);
}

@media (min-width: 900px) {
	.cta-band__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--s-16);
	}

	.cta-band__actions {
		justify-content: flex-end;
	}
}

/* ---- S10 quote cards (rail styles come from components/carousel.css) ---- */
.testimonials {
	background: var(--bg-alt);
}

.testimonials__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-6);
	margin-bottom: var(--s-12);
}

.testimonials__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh-heading);
}

.quote-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	height: 100%;
	margin: 0;
	padding: clamp(var(--s-6), 4vw, var(--s-8));
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.quote-card__text {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: var(--lh-heading);
	color: var(--ink);
}

/* A quiet mark, not a giant decorative glyph. */
.quote-card__text::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: var(--s-4);
	background: var(--koivu);
}

.quote-card__who {
	margin-top: auto;
	font-size: var(--fs-small);
	color: var(--muted);
}

/*
 * PLACEHOLDER MARKING — delete this block together with the placeholder quotes.
 * These styles only render while testimonials.php has $koivu_quotes_are_real
 * = false. They exist so a reviewer cannot mistake our sample text for real
 * customer feedback: the notice is stated plainly and each card is tagged.
 * Deliberately understated rather than alarming — it reads as a note to the
 * client, not as a broken page.
 */
.quote-placeholder-note {
	margin: var(--s-4) 0 0;
	max-width: 52ch;
	padding-left: var(--s-4);
	border-left: 2px solid var(--koivu);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: var(--muted);
}

.quote-placeholder-note strong {
	color: var(--ink);
}

.quote-card--placeholder {
	border-style: dashed;
}

.quote-card__tag {
	align-self: flex-start;
	margin: 0;
	padding: 2px var(--s-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}