/* Services Spotlight (Figma 11663:12009). BB owns the band: the row paints the
   #f8f9fa background and the 104 / 165 paddings; the module only stacks its
   lines. Each line's scroll reveal is the theme's standalone `blur-in`. */

.tbl-services-spotlight {
	display: block;
	text-align: center;
	color: var(--Neutral-100);
}

/* Category-Small eyebrow, same declaration as tbl-client-roster__label. */
.tbl-services-spotlight__eyebrow {
	margin: 0 0 24px;
	font-family: var(--body-font);
	font-size: 10px;
	line-height: 1.778;
	font-weight: 405;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--Neutral-100);
}

/* The lines' font size is capped by the column so the longest line still fits at
   390 without nowrap: 11cqw of the container. */
.tbl-services-spotlight__lines {
	container-type: inline-size;
}

.tbl-services-spotlight .tbl-services-spotlight__line {
	margin: 0;
	padding: 0;
	font-family: var(--header-font);
	font-size: min(var(--h0-font-size), 11cqw);
	line-height: var(--h0-line-height);
	letter-spacing: -0.5px;
	color: var(--Neutral-100);
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.tbl-services-spotlight .tbl-services-spotlight__line {
		letter-spacing: -1.5px;
	}
}

.tbl-services-spotlight__text {
	display: inline;
}

/* 0.85em ≈ 76px at 90px. The negative block margins keep the tile's margin box
   out of the line-box calculation so the 88px pitch holds; the tile itself
   still paints at 0.85em, vertically centred on the text. */
.tbl-services-spotlight .tbl-services-spotlight__tile {
	display: inline-block;
	width: auto;
	height: 0.85em;
	max-width: none;
	aspect-ratio: 1 / 1;
	margin: -0.3em 0.1em -0.3em 0.12em;
	vertical-align: middle;
	object-fit: cover;
	/* The setting at 1600; scales with the tile below so a 33px tile at 390 is
	   still a rounded square, not a circle (15 / 76.5 = 0.2em). */
	border-radius: min(var(--tbl-ss-tile-radius, 15px), 0.2em);
	position: relative;
	top: -0.06em;
}

/* Start a Project under the list (Pastel #225), centred like the lines. */
.tbl-services-spotlight__cta {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

/* Pastel #241: the button blurs in after the last line has landed. */
.tbl-services-spotlight .tbl-services-spotlight__cta.blur-in {
	--start-tween: calc(clamp(80px, 20vh, 200px) + 20vh);
	--tween-length: 15vh;
}