.tbl-cs-index {
	position: relative;

	--tbl-cs-gutter: 48px;
	--tbl-cs-measure: 1500px;
	--tbl-cs-measure-headline: 1015px;
	--tbl-cs-hero-eyebrow-gap: 75px;
	--tbl-cs-hero-rule-gap: 82px;
	--tbl-cs-filter-gap: 21px;
	--tbl-cs-filter-first-entry-gap: 36px;   /* Pastel #9 (Chris) — was 17px */
	--tbl-cs-entry-gap: 170px;
	--tbl-cs-head-gap: 24px;
	--tbl-cs-hero-stack-gap: 16px;
	--tbl-cs-collage-min: 900px;
	--tbl-cs-slot-base: calc(var(--tbl-cs-collage-min) / 3);
}

@media (max-width: 1023.98px) {
	.tbl-cs-index {
		--tbl-cs-gutter: 24px;
	}
}

@media (max-width: 390px) {
	.tbl-cs-index {
		--tbl-cs-gutter: 12px;
	}
}

@media (max-width: 1023.98px) {
	.tbl-cs-index {
		--tbl-cs-entry-gap: 80px;
	}
}

.tbl-cs-index__list,
.tbl-cs-index__rule,
.tbl-cs-index__filters,
.tbl-cs-index__cta-rule {
	width: min( var(--tbl-cs-measure), 100% - var(--tbl-cs-gutter) * 2 );
	margin-inline: auto;
}

.tbl-cs-index__list {
	margin-top: var(--tbl-cs-filter-first-entry-gap);
}

.tbl-cs-index__hero {
	display: flex;

	align-items: flex-start;
	gap: var(--tbl-cs-hero-eyebrow-gap);
	padding-inline: var(--tbl-cs-gutter);
}

.tbl-cs-index__eyebrow {
	margin: 0;
	font-family: var(--body-font);
	font-size: var(--body-font-size-larger);
	line-height: var(--body-line-height);
	letter-spacing: 0.2px;
	color: var(--Black);
	white-space: nowrap;
}

.tbl-cs-index__count {
	font: inherit;
	color: inherit;
}

/* Wrapper added at Pastel #58 so the H1 and its optional H2 share one measure and
   one flex slot — the hero row itself still sees a single child, so the eyebrow's
   alignment is unchanged. */
.tbl-cs-index__headings {
	max-width: var(--tbl-cs-measure-headline);
}

.tbl-cs-index__subheadline {
	margin: 0;
	color: var(--Black);
}

.tbl-cs-index__headline {
	margin: 0 0 14px;
	max-width: var(--tbl-cs-measure-headline);
	font-family: var(--header-font);
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
	letter-spacing: var(--Font-H1-Letter-Spacing);
	color: var(--Black);
}

@media (max-width: 1023.98px) {
	.tbl-cs-index__hero {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--tbl-cs-hero-stack-gap);
	}

	.tbl-cs-index__headings,
	.tbl-cs-index__headline {
		max-width: none;
	}
}

.tbl-cs-index__rule {
	display: block;
	border: 0;
	height: 1px;

	margin: var(--tbl-cs-hero-rule-gap) auto var(--tbl-cs-filter-gap) !important;
	background-color: var(--Neutral-20);
}

.tbl-cs-index {
	--tbl-cs-filters-pill-gap: 21px;
	--tbl-cs-pill-gap: 6px;
	--tbl-cs-pill-padding: 6px;
	--tbl-cs-pill-radius: 5px;
	--tbl-cs-pills-scroll-pad: 16px;
}

.tbl-cs-index__filters {
	display: flex;
	align-items: center;
	gap: var(--tbl-cs-filters-pill-gap);
}

.tbl-cs-index__filters-label {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--body-font);
	font-size: var(--body-font-size-smaller);
	line-height: 24px;
	color: var(--Black);
	white-space: nowrap;
}

.tbl-cs-index__pills {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--tbl-cs-pill-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	scroll-padding-inline-start: var(--tbl-cs-pills-scroll-pad);

	min-width: 0;
	flex: 1 1 auto;

	--tbl-cs-pills-fade-left: 0px;
	--tbl-cs-pills-fade-right: 24px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, black var(--tbl-cs-pills-fade-left), black calc(100% - var(--tbl-cs-pills-fade-right)), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, black var(--tbl-cs-pills-fade-left), black calc(100% - var(--tbl-cs-pills-fade-right)), transparent 100%);
}

.tbl-cs-index__pills.is-scrolled-start {
	--tbl-cs-pills-fade-left: 16px;
}

.tbl-cs-index__pills.is-scrolled-end {
	--tbl-cs-pills-fade-right: 0px;
}

.tbl-cs-index__pills::-webkit-scrollbar {
	display: none;
}

.tbl-cs-index__pill {
	flex: 0 0 auto;
	white-space: nowrap;
	scroll-snap-align: start;
	cursor: pointer;
	padding: var(--tbl-cs-pill-padding);
	border-radius: var(--tbl-cs-pill-radius);
	border: 1.5px solid transparent;
	/* Pastel #10 (Chris) — was --Primary-10 (#e8ddf7). #F2EEF6 has no token:
	   it falls between --Primary-10 and --Primary-Alt-10 (#f9f4ff), so it is
	   an unbound literal, FLAGGED here rather than silently snapped to the
	   nearest token. The hover below IS a token (--Primary-Alt-50-Base is
	   exactly #AF85EC) and uses it. Active stays black, per the comment. */
	background-color: #F2EEF6;   /* FLAG: unbound */
	color: var(--Black);
	font-family: var(--body-font);
	font-size: 10px;
	line-height: 17.78px;
	font-weight: var(--header-font-weight);
	letter-spacing: 1px;
	text-transform: uppercase;

	transition: var(--button-easing);
}

.tbl-cs-index__pill:hover {
	background-color: var(--Primary-Alt-50-Base);   /* #AF85EC — exact token match */
}

.tbl-cs-index__pill:focus-visible {
	outline: 2px solid var(--Primary-Alt-50-Base);
	outline-offset: 2px;
}

.tbl-cs-index__pill.is-active {
	background-color: var(--Black);
	color: var(--White);
	border-color: var(--White);
}

.tbl-cs-index__pill.is-active:hover {
	background-color: var(--Black);
	border-color: var(--White);
	opacity: 0.85;
}

.tbl-cs-index {
	--tbl-cs-head-inset: 12px;
}

.tbl-cs-entry {
	margin-bottom: var(--tbl-cs-entry-gap);
}

.tbl-cs-entry:last-child {
	margin-bottom: 0;
}

.tbl-cs-entry__head {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	/* Pastel #30 (Burgess) — the three columns abutted with no gutter, so the
	   client/services block and the "View Case Study" link began wrapping at
	   the exact width where they first touched. 20px of column gap makes the
	   wrap happen before contact, not at it. Column-only: the head's two rows
	   (client / services) already carry their own margins. */
	column-gap: 20px;
	padding-inline: var(--tbl-cs-head-inset);
	margin-bottom: var(--tbl-cs-head-gap);

	color: var(--link-color);
}

.tbl-cs-entry__client {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	margin: 0 0 4px;
	font-family: var(--header-font);
	font-size: var(--h4-font-size);
	line-height: var(--h4-line-height);
	color: var(--Black);
}

.tbl-cs-entry__client-link {
	color: inherit;
	text-decoration: none;
}

.tbl-cs-entry__services {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	margin: 0;
	font-family: var(--body-font);
	font-size: clamp(14px, 11.54px + 0.63vw, 18px);
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--Neutral-50);
}

.tbl-cs-entry__title {
	grid-column: 2;
	grid-row: 1 / 3;
	justify-self: center;
	align-self: end;
	margin: 0;
	text-align: center;
	font-family: var(--body-font);
	font-size: clamp(14px, 11.54px + 0.63vw, 18px);
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--Black);
}

.tbl-cs-entry__title-link {
	color: inherit;
	text-decoration: none;
}

.tbl-cs-index .tbl-cs-entry__title-link {
	text-decoration-line: none !important;
}

.tbl-cs-entry__viewproject {
	grid-column: 3;
	grid-row: 1 / 3;
	justify-self: end;
	align-self: end;
	font-family: var(--body-font);
	font-size: clamp(16px, 13.54px + 0.63vw, 20px);
	line-height: var(--body-line-height);
}

@media (max-width: 1023.98px) {
	.tbl-cs-index .tbl-cs-entry__head {
		--tbl-cs-head-inset: 0px;
		margin-inline: calc((100% - var(--tbl-cs-viewport, 100%)) / 2);
		padding-inline: var(--tbl-cs-gutter);
	}
}

@media (min-width: 600px) and (max-width: 1023.98px) {
	.tbl-cs-entry__head {
		grid-template-columns: 1fr auto;
		column-gap: 24px;
		row-gap: 8px;
	}

	.tbl-cs-entry__client {
		grid-column: 1;
		grid-row: 1;
	}

	.tbl-cs-entry__services {
		grid-column: 1;
		grid-row: 2;
	}

	.tbl-cs-entry__title {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		text-align: left;
	}

	.tbl-cs-entry__viewproject {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: start;
	}
}

@media (max-width: 599.98px) {
	.tbl-cs-entry__head {
		grid-template-columns: 1fr;
		row-gap: 8px;
	}

	.tbl-cs-entry__client,
	.tbl-cs-entry__services,
	.tbl-cs-entry__title,
	.tbl-cs-entry__viewproject {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		align-self: start;
		text-align: left;
	}

	/* Pastel #59 — the "View Case Study" link is redundant on mobile: the
	   client name, the project title and the collage all already go to the
	   same permalink, and it was the fourth text row in a stack Chris wanted
	   thinned out. Two keyboard-reachable anchors per entry survive, so the
	   D-15 anchor contract still holds. */
	.tbl-cs-index .tbl-cs-entry__viewproject {
		display: none;
	}
}

.tbl-cs-index__cta-rule {
	display: block;
	border: 0;
	height: 1px;

	margin: 210px auto 0 !important;
	background-color: var(--Neutral-30);
}

.tbl-cs-entry {
	transition: opacity 150ms linear;
}

.tbl-cs-entry.is-fading {
	opacity: 0;
}

.tbl-cs-entry.is-filtered-out {
	display: none;
}

.tbl-cs-index__empty {
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	font-family: var(--body-font);
	font-size: 15px;
	line-height: 25px;
	color: var(--Neutral-100);
}

.tbl-cs-index__empty[hidden] {
	display: none;
}

.tbl-cs-index__list.is-entering .tbl-cs-entry__head {
	opacity: 0;
}

.tbl-cs-index__list.is-entering .tbl-cs-entry__slot {
	opacity: 0;
	transform: translateY(40px);
}

.tbl-cs-index__list.is-entering .tbl-cs-entry.has-entered .tbl-cs-entry__head {
	opacity: 1;
	transition: opacity .7s cubic-bezier(.25,.46,.45,.94);
}

.tbl-cs-index__list.is-entering .tbl-cs-entry.has-entered .tbl-cs-entry__slot {
	opacity: 1;
	transform: none;
	transition: opacity .7s cubic-bezier(.25,.46,.45,.94) var(--slot-reveal-delay, 0s),
	            transform .7s cubic-bezier(.25,.46,.45,.94) var(--slot-reveal-delay, 0s);
}

.tbl-cs-index__list.is-entering .tbl-cs-entry__slot:nth-child(1) {
	--slot-reveal-delay: .28s;
}

.tbl-cs-index__list.is-entering .tbl-cs-entry__slot:nth-child(2) {
	--slot-reveal-delay: .40s;
}

.tbl-cs-index__list.is-entering .tbl-cs-entry__slot:nth-child(3) {
	--slot-reveal-delay: .52s;
}

@media (prefers-reduced-motion: reduce) {
	.tbl-cs-index__pill {
		transition: none;
	}

	.tbl-cs-index__list.is-entering .tbl-cs-entry__head,
	.tbl-cs-index__list.is-entering .tbl-cs-entry__slot {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tbl-cs-entry {
		transition: none;
	}

	.tbl-cs-entry__viewproject {
		transition: none;
	}

	.tbl-cs-entry__collage {
		scroll-behavior: auto;
	}

	.tbl-cs-entry__glass {
		transition: none;
	}
}

@media (scripting: none) {
	.tbl-cs-index__list.is-entering .tbl-cs-entry__head,
	.tbl-cs-index__list.is-entering .tbl-cs-entry__slot {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.fl-builder-edit .tbl-cs-index__list.is-entering .tbl-cs-entry__head,
.fl-builder-edit .tbl-cs-index__list.is-entering .tbl-cs-entry__slot {
	opacity: 1;
	transform: none;
	transition: none;
}

.tbl-cs-entry__collage {
	position: relative;

	margin-block-start: var(--tbl-cs-head-gap);
}

.tbl-cs-entry__collage-track {
	display: flex;
	gap: 12px;

	align-items: flex-start;
	width: 100%;
}

.tbl-cs-entry__slot {
	flex: var(--slot-weight, 1) 1 0;
	border-radius: 8px;
	overflow: hidden;
	min-width: 0;
	position: relative;
	max-height: 80vh;
}

.tbl-cs-entry__slot {
	aspect-ratio: var(--slot-aspect, 16 / 9);
}

.tbl-cs-entry__slot--placeholder {
	background-color: var(--Primary-50-Base);
}

.tbl-cs-entry__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

@media (max-width: 1023.98px) {
	.tbl-cs-index .tbl-cs-entry__collage {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-padding-inline: var(--tbl-cs-gutter);
		margin-inline: calc((100% - var(--tbl-cs-viewport, 100%)) / 2);
	}

	.tbl-cs-index .tbl-cs-entry__collage::-webkit-scrollbar {
		display: none;
	}

	.tbl-cs-index .tbl-cs-entry__collage-track {
		width: max-content;
		min-width: 100%;
		padding-inline: var(--tbl-cs-gutter);
	}

	.tbl-cs-index .tbl-cs-entry__slot {
		flex: 0 0 auto;
		width: calc(var(--tbl-cs-slot-base) * var(--slot-strip-scale, 1));
		scroll-snap-align: start;
	}
}

/* Pastel #73 + #59 — #73 capped the slot width at 375 so a second slide
   peeks (the strip has to read as swipeable, not as a static crop). #59
   then closed the question #73 left open: Chris asked for a uniform ratio
   below 600 because the authored per-slot ratios ran 135px to 404px tall
   in one strip, and the short ones read as broken. So <600 drops BOTH the
   strip scale and the measured aspect: every slide is the same capped
   width and a 1:1 square. Square keeps the "larger images" read Chris
   liked while making the strip regular; object-fit: cover on the media
   absorbs the ratio difference. The authored weights and ratios still
   drive 600+ untouched. */
@media (max-width: 599.98px) {
	.tbl-cs-index .tbl-cs-entry__slot {
		width: calc(100vw - var(--tbl-cs-gutter) * 2 - 44px);
		max-width: calc(100vw - var(--tbl-cs-gutter) * 2 - 44px);
		aspect-ratio: 1 / 1;
	}
}

.tbl-cs-entry__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

.tbl-cs-entry__collage {
	color: var(--White);
}

.tbl-cs-entry__glass {
	position: absolute;
	left: var(--glass-x, 50%);
	top: var(--glass-y, 50%);
	transform: translate(-50%, -50%);
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.tbl-cs-index .tbl-cs-entry__glass {
		display: inline-flex;
		align-items: center;
		gap: 13px;
		height: 58px;
		padding-inline: 28px;
		border-radius: var(--button-border-radius);
		/* Pastel #32 — was White 18%, i.e. white ink on a near-transparent
		   white pill: invisible the moment the cursor crossed onto the white
		   page background between collages. Ben offered "dark text over white"
		   or "a filled background"; filled wins because the pill tracks the
		   cursor across art AND page, so there is no single backdrop to key a
		   text colour off. 72% keeps the frosted read while guaranteeing the
		   label's contrast wherever it lands. */
		color: var(--White);
		background: color-mix(in srgb, var(--Neutral-100) 72%, transparent);
		border: 1px solid color-mix(in srgb, var(--White) 24%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		box-shadow:
			0 1px 2px rgb(0 0 0 / 0.06),
   			0 0px 24px rgb(0 0 0 / 0.1);
		font-family: var(--body-font);
		font-size: 16px;
		line-height: 28px;
		font-weight: var(--body-font-weight);
		letter-spacing: 0;
		white-space: nowrap;
	}

	.tbl-cs-index .tbl-cs-entry__glass.is-visible {
		opacity: 1;
	}

	.tbl-cs-index .tbl-cs-entry__glass {
		transition: opacity 150ms linear;
	}

	.tbl-cs-index .tbl-cs-entry__collage.is-glass-active,
	.tbl-cs-index .tbl-cs-entry__collage.is-glass-active * {
		cursor: none;
	}
}

.tbl-cs-entry__glass-arrow {
	width: 12px;
	height: 10px;
	flex: 0 0 auto;
	fill: var(--White);
}