/**
 * Homepage sections (build phase 2). No GSAP motion yet — fades, digit-roll,
 * pinned services, drag-slider and marquee-adjacent scroll-triggers land in
 * build phase 5. The marquee ticker itself IS included here since it's a
 * continuous, non-scroll-triggered animation (Motion Spec: unaffected by
 * the replay rule), so pure CSS is the correct final implementation, not a
 * placeholder.
 */

/* ---- Section shell + band rhythm (build brief §6) -------------------- */

.tcc-home-section {
	position: relative;
}
.tcc-band-white {
	background: var( --surface-canvas );
	padding: var( --space-section ) 0;
}
.tcc-band-muted {
	background: var( --surface-muted );
	padding: var( --space-section ) 0;
}
.tcc-band-navy {
	background: var( --color-hero-bg );
	color: var( --text-on-dark );
}
.tcc-band-navy h1, .tcc-band-navy h2, .tcc-band-navy h3 {
	color: var( --text-on-dark );
}

.tcc-section-heading {
	margin-bottom: var( --space-lg );
}
.tcc-section-heading--center {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.tcc-section-heading h2 {
	margin: 0 0 var( --space-2xs );
}
.tcc-section-heading p {
	margin: 0;
	color: var( --text-body );
}
.tcc-section-heading__eyebrow {
	display: block;
	margin-bottom: var( --space-2xs );
	/* This eyebrow only ever sits on a white/muted band — gold fails
	   contrast there (~1.6:1); brand-deep passes at 10.8:1. */
	color: var( --color-brand-deep );
}

/* ---- Feature card (Why Choose Us) ------------------------------------ */

.tcc-feature-card {
	background: var( --surface-card );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	padding: var( --space-md );
}
.tcc-feature-card h3 {
	font-size: var( --text-h6-size );
	line-height: var( --text-h6-lh );
	font-weight: var( --weight-semibold );
	margin: var( --space-sm ) 0 var( --space-2xs );
}
.tcc-feature-card p {
	margin: 0;
	color: var( --text-body );
}
.tcc-feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var( --radius-full );
	color: var( --color-hero-bg );
}
.tcc-feature-card__icon svg,
.tcc-feature-card__icon [data-lucide] {
	width: 26px;
	height: 26px;
}
.tcc-tint-blue { background: var( --tcc-tint-blue ); }
.tcc-tint-rose { background: var( --tcc-tint-rose ); }
.tcc-tint-violet { background: var( --tcc-tint-violet ); }
.tcc-tint-mint { background: var( --tcc-tint-mint ); }

/* ---- Hero -------------------------------------------------------------*/

.tcc-hero {
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 96px;
	padding-bottom: 64px;
}
.tcc-hero__texture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var( --texture-opacity-hero );
	mix-blend-mode: multiply;
	pointer-events: none;
}
.tcc-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var( --space-3xl );
	align-items: center;
}
.tcc-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-md );
}
.tcc-hero__badge {
	display: flex;
	align-items: center;
	gap: var( --space-sm );
}
.tcc-hero__avatars {
	display: flex;
}
.tcc-hero__avatars img {
	width: 36px;
	height: 36px;
	border-radius: var( --radius-full );
	border: 2px solid var( --color-hero-bg );
	object-fit: cover;
	margin-right: -10px;
}
.tcc-hero__badge-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tcc-hero__rating {
	color: var( --color-primary );
	font-weight: var( --weight-medium );
}
.tcc-hero__badge-text span:last-child {
	color: var( --text-on-dark-muted );
	font-size: 14px;
}
.tcc-hero__heading {
	margin: 0;
	font-size: var( --text-h1-size );
	line-height: var( --text-h1-lh );
	max-width: 20ch;
}
.tcc-hero__subheading {
	margin: 0;
	max-width: 480px;
	color: var( --text-on-dark-muted );
	font-size: var( --text-body-lg-size );
	line-height: var( --text-body-lg-lh );
}
.tcc-hero__cta {
	display: flex;
	align-items: center;
	gap: var( --space-md );
	flex-wrap: wrap;
	position: relative;
}
.tcc-hero__reassurance {
	color: var( --text-on-dark-muted );
	font-size: 14px;
	position: relative;
	z-index: 1;
}
.tcc-hero__arrow {
	position: absolute;
	left: 440px;
	top: -34px;
	pointer-events: none;
	opacity: 0.9;
}
.tcc-hero__media {
	position: relative;
}
.tcc-hero__spark {
	position: absolute;
	left: -26px;
	top: -24px;
	z-index: 2;
	pointer-events: none;
	opacity: 0.95;
}
@media ( max-width: 1199px ) {
	.tcc-hero__arrow {
		display: none;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.tcc-hero__arrow {
		display: none;
	}
	.tcc-hero__spark {
		left: -8px;
		top: -8px;
	}
}
.tcc-hero__frame {
	background: var( --surface-canvas );
	padding: 14px;
	clip-path: polygon( 0 0, calc( 100% - 64px ) 0, 100% 64px, 100% 100%, 0 100% );
}
.tcc-hero__frame-inner {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	clip-path: polygon( 0 0, calc( 100% - 50px ) 0, 100% 50px, 100% 100%, 0 100% );
}
.tcc-hero__frame-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Hero client-logo strip. The whole band is deliberately height-capped: the
   source logos are large square PNGs with generous transparent padding, so
   each one gets a fixed box + object-fit:contain to normalise wildly
   different mark proportions into one optical line. */
.tcc-hero__logos {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: var( --space-xl );
}
.tcc-hero__logos-label {
	display: block;
	text-align: center;
	font-size: var( --text-label-size );
	font-weight: var( --weight-medium );
	letter-spacing: var( --text-label-tracking );
	text-transform: uppercase;
	color: var( --text-on-dark-faint );
	margin-bottom: var( --space-sm );
}
.tcc-logo-ticker {
	overflow: hidden;
	/* Cap the band even if a logo slips past the per-item sizing below. */
	max-height: 144px;
	-webkit-mask-image: linear-gradient( to right, transparent, #000 7%, #000 93%, transparent );
	mask-image: linear-gradient( to right, transparent, #000 7%, #000 93%, transparent );
}
.tcc-logo-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var( --space-xl );
	animation: tcc-marquee 48s linear infinite;
}
.tcc-logo-ticker__item {
	width: 264px;
	height: 112px;
	flex: 0 0 auto;
	object-fit: contain;
	object-position: center;
	opacity: 0.75;
	transition: opacity var( --transition-base );
}
.tcc-logo-ticker:hover .tcc-logo-ticker__item {
	opacity: 1;
}
@media ( max-width: 767px ) {
	.tcc-logo-ticker {
		max-height: 112px;
	}
	.tcc-logo-ticker__item {
		width: 208px;
		height: 88px;
	}
	.tcc-logo-ticker__track {
		gap: var( --space-lg );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.tcc-logo-ticker {
		max-height: none;
	}
	.tcc-logo-ticker__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
	/* The seamless-loop duplicate pass is pure decoration — with the marquee
	   stopped it would just print every logo twice. */
	.tcc-logo-ticker__item[aria-hidden="true"] {
		display: none;
	}
}

@media ( max-width: 991px ) {
	.tcc-hero__grid {
		grid-template-columns: 1fr;
	}
	.tcc-hero__media {
		order: -1;
	}
	.tcc-hero {
		min-height: 0;
		padding-top: 112px;
	}
	.tcc-hero__logos {
		margin-top: var( --space-3xl );
	}
}

/* ---- About ------------------------------------------------------------*/

.tcc-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-3xl );
	align-items: stretch;
}
.tcc-about__timeline {
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	overflow: hidden;
}
.tcc-about__item {
	display: flex;
	gap: var( --space-sm );
	padding: var( --space-sm ) var( --space-md );
	border-top: var( --elevation-hairline );
}
.tcc-about__item:first-child {
	border-top: none;
}
.tcc-about__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: var( --radius-full );
	background: var( --tcc-blue-info );
	margin-top: 8px;
}
.tcc-about__year {
	display: block;
	font-family: var( --font-display );
	font-size: var( --text-h6-size );
	font-weight: var( --weight-semibold );
	color: var( --text-strong );
	margin-bottom: 4px;
}
.tcc-about__item p {
	margin: 0;
	color: var( --text-body );
}
.tcc-about__image {
	border-radius: var( --radius-md );
	overflow: hidden;
}
.tcc-about__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( max-width: 991px ) {
	.tcc-about__grid {
		grid-template-columns: 1fr;
	}
	.tcc-about__image {
		order: -1;
		aspect-ratio: 16 / 9;
	}
}

/* ---- Why Choose Us ------------------------------------------------------*/

.tcc-why__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr 1fr;
	gap: var( --space-sm );
}
.tcc-why__col {
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
}
.tcc-why__image {
	border-radius: var( --radius-md );
	overflow: hidden;
}
.tcc-why__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( max-width: 991px ) {
	.tcc-why__grid {
		grid-template-columns: 1fr;
	}
	.tcc-why__image {
		order: -1;
		aspect-ratio: 16 / 9;
	}
}

/* ---- Services — desktop pinned accordion (build brief §9) -------------
 * position:sticky on a LOCAL element only (.tcc-services__sticky), never
 * the whole section — no ancestor here carries transform/filter/
 * perspective/will-change:transform/overflow:hidden, which is what kills
 * sticky with no error. Native scroll only; nothing hijacks the wheel. */

[data-services-mobile] {
	display: block;
}
[data-services-desktop] {
	display: none;
}
@media ( min-width: 992px ) {
	[data-services-desktop] {
		display: block;
	}
	/* The plain grid is desktop-hidden only when it's standing in as the
	   mobile fallback for 'sticky' mode. In 'cards' mode it's the actual
	   desktop layout (build brief: Customizer "Desktop layout" choice, see
	   inc/customizer-homepage.php) and stays visible. */
	[data-services-mobile][data-services-grid-mode="fallback"] {
		display: none;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	[data-services-desktop] {
		display: none !important;
	}
	[data-services-mobile] {
		display: block !important;
	}
}

.tcc-services__runway {
	position: relative;
}
.tcc-services__sticky {
	position: sticky;
	top: calc( var( --tcc-navbar-h ) + 24px );
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-3xl );
	align-items: start;
}
.tcc-services__image-window {
	border-radius: var( --radius-md );
	overflow: hidden;
	height: 520px;
	position: relative;
}
.tcc-services__image-strip {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transition: transform 0.5s cubic-bezier( 0.65, 0, 0.35, 1 );
}
.tcc-services__image-slide {
	height: 520px;
	margin-bottom: 32px;
	position: relative;
}
.tcc-services__image-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tcc-services__image-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 11, 31, 82, 0.75 ), rgba( 11, 31, 82, 0 ) 55% );
	pointer-events: none;
}
.tcc-services__image-badge {
	position: absolute;
	left: var( --space-sm );
	top: var( --space-sm );
	background: var( --surface-canvas );
	border-radius: var( --radius-sm );
	padding: 4px 12px;
	font-size: var( --text-body-size );
	z-index: 2;
}
.tcc-services__image-title {
	position: absolute;
	left: var( --space-sm );
	right: var( --space-sm );
	bottom: 64px;
	z-index: 2;
	margin: 0;
	font-size: var( --text-h4-size );
	color: var( --text-on-dark );
}
.tcc-services__image-link {
	position: absolute;
	left: var( --space-sm );
	bottom: var( --space-sm );
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --surface-canvas );
	color: var( --text-strong );
	border-radius: var( --radius-sm );
	padding: 8px 14px;
	font-size: 14px;
	font-weight: var( --weight-medium );
	text-decoration: none;
}
.tcc-services__image-link svg,
.tcc-services__image-link [data-lucide] {
	width: 16px;
	height: 16px;
}

.tcc-services__list {
	display: flex;
	flex-direction: column;
	position: relative;
	justify-content: center;
}
.tcc-services__rail-track {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var( --border-hairline );
}
.tcc-services__rail {
	position: absolute;
	left: 0;
	top: 0;
	height: 0;
	width: 2px;
	background: var( --color-primary );
	transition: top 0.35s ease-in-out, height 0.35s ease-in-out;
}
.tcc-services__row {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 9px 0 9px 12px;
	border-top: 1px solid var( --border-hairline );
	color: var( --color-hero-bg );
}
.tcc-services__row:first-child {
	border-top: none;
}
.tcc-services__row-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: inherit;
	transition: color var( --transition-base );
}
.tcc-services__row.is-active .tcc-services__row-icon {
	/* Row sits on white — gold fails even the 3:1 non-text minimum here;
	   brand-deep passes comfortably. */
	color: var( --color-brand-deep );
}
.tcc-services__row-icon svg,
.tcc-services__row-icon [data-lucide] {
	width: 20px;
	height: 20px;
}
.tcc-services__row-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.tcc-services__row-title {
	font-family: var( --font-display );
	font-size: 15px;
	font-weight: var( --weight-semibold );
	color: var( --text-strong );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tcc-services__row-desc {
	color: var( --text-body );
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tcc-services__spacer {
	pointer-events: none;
}

/* ---- Services grid (mobile / reduced-motion fallback) ------------------*/

.tcc-services__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-lg );
}
.tcc-service-card {
	display: flex;
	flex-direction: column;
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	overflow: hidden;
	text-decoration: none;
	transition: border-color var( --transition-base );
}
.tcc-service-card:hover {
	border-color: var( --color-primary );
}
.tcc-service-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
}
.tcc-service-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tcc-service-card__badge {
	position: absolute;
	left: var( --space-sm );
	top: var( --space-sm );
	background: var( --surface-canvas );
	border-radius: var( --radius-sm );
	padding: 4px 12px;
	font-size: var( --text-body-size );
	z-index: 2;
}
/* New hover-reveal card treatment (Customizer "Desktop layout" → Card
   grid): title overlays the photo; the reveal panel is always visible in
   normal flow by default (so mobile, which has no hover state, still
   shows the description), and only becomes a hidden-until-hover overlay
   when the grid opts in via .tcc-services__grid--hover on a hover-capable
   ≥992px viewport. */
.tcc-services__grid .tcc-service-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 11, 31, 82, 0.75 ), rgba( 11, 31, 82, 0 ) 55% );
	pointer-events: none;
}
.tcc-services__grid .tcc-service-card__title {
	position: absolute;
	left: var( --space-sm );
	right: var( --space-sm );
	bottom: var( --space-sm );
	z-index: 2;
	margin: 0;
	font-size: var( --text-h6-size );
	color: var( --text-on-dark );
}
.tcc-services__grid .tcc-service-card__reveal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-2xs );
	padding: var( --space-md );
}
.tcc-services__grid .tcc-service-card__reveal p {
	margin: 0;
	color: var( --text-body );
	font-size: var( --text-body-size );
}
.tcc-services__grid .tcc-service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --color-brand-deep );
	font-weight: var( --weight-medium );
	font-size: var( --text-body-size );
}
.tcc-services__grid .tcc-service-card__cta svg,
.tcc-services__grid .tcc-service-card__cta [data-lucide] {
	width: 16px;
	height: 16px;
}

@media ( hover: hover ) and ( min-width: 992px ) {
	.tcc-services__grid--hover .tcc-service-card__image {
		aspect-ratio: unset;
		height: 100%;
	}
	.tcc-services__grid--hover .tcc-service-card {
		position: relative;
		height: 360px;
	}
	.tcc-services__grid--hover .tcc-service-card__reveal {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		background: var( --surface-canvas );
		transform: translateY( 100% );
		opacity: 0;
		transition: transform var( --transition-base ), opacity var( --transition-base );
	}
	.tcc-services__grid--hover .tcc-service-card:hover .tcc-service-card__reveal,
	.tcc-services__grid--hover .tcc-service-card:focus-within .tcc-service-card__reveal {
		transform: translateY( 0 );
		opacity: 1;
	}
}

.tcc-service-card__body {
	display: flex;
	gap: var( --space-sm );
	padding: var( --space-md );
}
.tcc-service-card__icon {
	flex: 0 0 auto;
	color: var( --color-hero-bg );
}
.tcc-service-card__icon svg,
.tcc-service-card__icon [data-lucide] {
	width: 24px;
	height: 24px;
}
.tcc-service-card h3 {
	margin: 0 0 4px;
	font-size: var( --text-h6-size );
	line-height: var( --text-h6-lh );
	font-weight: var( --weight-semibold );
}
.tcc-service-card p {
	margin: 0;
	color: var( --text-body );
	font-size: var( --text-body-size );
}

@media ( max-width: 991px ) {
	.tcc-services__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media ( max-width: 640px ) {
	.tcc-services__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Stat band ----------------------------------------------------------*/

.tcc-statband {
	padding-top: var( --space-lg );
	padding-bottom: 0;
}
.tcc-statband__heading {
	text-align: center;
	margin: 0 0 var( --space-lg );
}
/* The photo below is pulled up 60px so its fade tucks under this card, which
   means the stat labels sit inside the photo's box and depend entirely on
   stacking order. Putting z-index on the grid alone is not enough: its parent
   carries [data-fade], GSAP leaves a transform on it, and a transformed
   element becomes a stacking context — which traps the grid's z-index inside
   the container and lets the later, positioned photo wrap paint over the
   labels. The z-index has to live on the container that actually forms the
   stacking context. */
.tcc-statband > .tcc-container {
	position: relative;
	z-index: 2;
}
.tcc-statband__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	background: var( --surface-canvas );
	position: relative;
	z-index: 2;
}
.tcc-statband__item {
	padding: var( --space-md );
	text-align: center;
	border-left: var( --elevation-hairline );
}
.tcc-statband__item:first-child {
	border-left: none;
}
.tcc-statband__value {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-family: var( --font-display );
	font-size: var( --text-display-size );
	font-weight: var( --weight-bold );
	color: var( --text-strong );
}
.tcc-digit {
	display: block;
	position: relative;
	overflow: hidden;
	height: 1em;
	width: 0.62em;
	flex: 0 0 auto;
	align-self: center;
}
.tcc-digit__reel {
	display: flex;
	flex-direction: column;
	will-change: transform;
}
.tcc-digit__cell {
	height: 1em;
	line-height: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.tcc-digit__symbol {
	display: inline-block;
}
.tcc-statband__label {
	display: block;
	margin-top: 8px;
	color: var( --text-body );
}
.tcc-statband__photo-wrap {
	position: relative;
	z-index: 1; /* explicitly below the stat card above it */
	margin-top: -60px;
	height: 92vh;
	min-height: 560px;
	max-height: 980px;
}
.tcc-statband__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}
.tcc-statband__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, var( --surface-canvas ) 0%, rgba( 255, 255, 255, 0.92 ) 14%, rgba( 255, 255, 255, 0.55 ) 30%, rgba( 255, 255, 255, 0 ) 52% );
}

@media ( max-width: 767px ) {
	.tcc-statband__grid {
		grid-template-columns: 1fr 1fr;
	}
	.tcc-statband__item:nth-child(2) {
		border-left: var( --elevation-hairline );
	}
	.tcc-statband__item:nth-child(odd) {
		border-left: none;
	}
	.tcc-statband__photo-wrap {
		height: 60vh;
		min-height: 380px;
		max-height: none;
	}
}

/* ---- Before / After -------------------------------------------------- */

.tcc-beforeafter__frame {
	border: 12px solid var( --surface-canvas );
	border-radius: var( --radius-md );
	overflow: hidden;
	outline: var( --elevation-hairline );
}
.tcc-beforeafter__slider {
	position: relative;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	cursor: ew-resize;
	user-select: none;
	touch-action: pan-y;
}
.tcc-beforeafter__pane {
	position: absolute;
	inset: 0;
}
.tcc-beforeafter__pane--after {
	clip-path: inset( 0 0 0 var( --reveal ) );
}
.tcc-beforeafter__pane img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.tcc-beforeafter__badge {
	position: absolute;
	top: var( --space-sm );
	background: var( --surface-canvas );
	border: 1px solid var( --surface-canvas );
	border-radius: var( --radius-sm );
	padding: 2px 12px;
	font-family: var( --font-body );
	font-size: var( --text-label-size );
	font-weight: var( --weight-medium );
	letter-spacing: var( --text-label-tracking );
	text-transform: uppercase;
}
.tcc-beforeafter__badge--left { left: var( --space-sm ); }
.tcc-beforeafter__badge--right { right: var( --space-sm ); }
.tcc-beforeafter__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var( --reveal );
	width: 3px;
	margin-left: -1.5px;
	background: var( --surface-canvas );
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcc-beforeafter__handle-grip {
	width: 44px;
	height: 44px;
	border-radius: var( --radius-full );
	background: var( --surface-canvas );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --text-strong );
}
.tcc-beforeafter__handle-grip svg,
.tcc-beforeafter__handle-grip [data-lucide] {
	width: 20px;
	height: 20px;
}

@media ( max-width: 480px ) {
	.tcc-beforeafter__slider {
		aspect-ratio: 4 / 5;
	}
}

/* ---- Testimonials --------------------------------------------------- */

.tcc-testimonials {
	background-color: var( --surface-muted );
	overflow: hidden;
}
.tcc-testimonials__texture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.tcc-testimonials__inner {
	position: relative;
	z-index: 1;
}
.tcc-testimonials__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 44%;
	gap: var( --space-3xl );
	align-items: center;
}
.tcc-testimonials__copy {
	padding-left: var( --space-lg );
	display: flex;
	flex-direction: column;
}
.tcc-testimonials__stack {
	position: relative;
	min-height: 320px;
}
.tcc-testimonials__slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.tcc-testimonials__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.tcc-testimonials__quote-mark {
	display: block;
	font-family: var( --font-display );
	font-size: 96px;
	line-height: 0.62;
	font-weight: var( --weight-bold );
	color: var( --color-brand-deep );
	margin-bottom: var( --space-sm );
}
.tcc-testimonials__quote {
	margin: 0 0 var( --space-lg );
	max-width: 26ch;
	color: var( --text-strong );
	font-size: var( --text-h5-size );
	font-weight: var( --weight-medium );
	line-height: 1.5;
}
.tcc-testimonials__name {
	display: block;
	font-family: var( --font-display );
	font-size: var( --text-h5-size );
	font-weight: var( --weight-bold );
	color: var( --text-strong );
}
.tcc-testimonials__role {
	display: block;
	margin-top: 4px;
	color: var( --text-body );
}
.tcc-testimonials__dots {
	display: flex;
	align-items: center;
	gap: var( --space-sm );
	margin-top: var( --space-lg );
}
/* 44px tap target (build brief §11) around a 12px visual dot — the
   button itself is the hit area; ::after draws the small dot so the
   design's visual scale doesn't change. */
.tcc-testimonials__dot {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var( --radius-full );
	border: none;
	cursor: pointer;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcc-testimonials__dot::after {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: var( --radius-full );
	background: var( --border-hairline );
	transition: background-color var( --transition-base );
}
.tcc-testimonials__dot.is-active::after {
	background: var( --color-primary );
}
.tcc-testimonials__pause {
	width: 44px;
	height: 44px;
	padding: 0;
	margin-left: var( --space-2xs );
	border-radius: var( --radius-full );
	border: var( --elevation-hairline );
	background: var( --surface-canvas );
	color: var( --text-body );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tcc-testimonials__pause svg,
.tcc-testimonials__pause [data-lucide] {
	width: 16px;
	height: 16px;
}
.tcc-testimonials__pause:hover {
	/* Muted band is near-white — gold fails the 3:1 non-text minimum. */
	color: var( --color-brand-deep );
	border-color: var( --color-brand-deep );
}
.tcc-testimonials__portraits {
	position: relative;
	aspect-ratio: 1 / 1;
}
.tcc-testimonials__portrait {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 66%, 6% 60%, 6% 40%, 0% 34% );
}
.tcc-testimonials__portrait.is-active {
	opacity: 1;
}
.tcc-testimonials__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

@media ( max-width: 991px ) {
	.tcc-testimonials__grid {
		grid-template-columns: 1fr;
		gap: var( --space-lg );
	}
	.tcc-testimonials__copy {
		padding-left: 0;
		order: 2;
	}
	.tcc-testimonials__portraits {
		order: 1;
	}
	.tcc-testimonials__portrait {
		clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 62%, 2% 57%, 2% 43%, 0% 38% );
	}
}

/* ---- Blog feed -------------------------------------------------------- */

.tcc-blogfeed__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-lg );
}
.tcc-blog-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
.tcc-blog-card__image {
	border-radius: var( --radius-md );
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var( --surface-muted );
}
.tcc-blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tcc-blog-card__date {
	display: block;
	margin-top: var( --space-sm );
	/* DESIGN.md specs the date label as gold, but gold text is ~1.6:1 on
	   the white card background it always sits on here — fails WCAG AA.
	   brand-deep keeps it a brand color and passes at 10.8:1. */
	color: var( --color-brand-deep );
}
.tcc-blog-card__title {
	margin: 4px 0 0;
	font-size: var( --text-h6-size );
	line-height: var( --text-h6-lh );
	font-weight: var( --weight-semibold );
	color: var( --text-strong );
}
.tcc-blog-card:hover .tcc-blog-card__title {
	color: var( --color-brand-deep );
}
.tcc-blogfeed__empty {
	text-align: center;
	color: var( --text-body );
}

@media ( max-width: 991px ) {
	.tcc-blogfeed__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- FAQ (chat-bubble accordion) -------------------------------------- */

.tcc-faq__list {
	display: flex;
	flex-direction: column;
	gap: var( --space-md );
}
.tcc-faq__question-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var( --space-2xs );
}
.tcc-faq__dot {
	width: 44px;
	height: 44px;
	border-radius: var( --radius-full );
	background: var( --surface-card );
	color: var( --text-strong );
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var( --transition-base ), color var( --transition-base );
}
.tcc-faq__bubble--question {
	cursor: pointer;
	max-width: 70%;
	background: var( --surface-card );
	color: var( --text-strong );
	border: none;
	font-family: var( --font-body );
	font-size: var( --text-body-size );
	text-align: left;
	border-radius: var( --radius-md );
	padding: 14px 20px;
	transition: background-color var( --transition-base ), color var( --transition-base );
}
.tcc-faq__row.is-open .tcc-faq__dot,
.tcc-faq__row.is-typing .tcc-faq__dot {
	background: var( --tcc-ink-900 );
	color: var( --text-on-dark );
}
.tcc-faq__row.is-open .tcc-faq__bubble--question,
.tcc-faq__row.is-typing .tcc-faq__bubble--question {
	background: var( --tcc-ink-900 );
	color: var( --text-on-dark );
}
.tcc-faq__typing {
	display: none;
	align-items: center;
	gap: var( --space-2xs );
	margin-top: var( --space-sm );
}
.tcc-faq__row.is-typing .tcc-faq__typing {
	display: flex;
}
.tcc-faq__avatar {
	width: 36px;
	height: 36px;
	border-radius: var( --radius-full );
	background: var( --color-primary );
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --color-primary-contrast );
}
.tcc-faq__typing-dots {
	display: inline-flex;
	gap: 4px;
	background: var( --surface-card );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	padding: 14px 18px;
}
.tcc-faq__typing-dots span {
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: var( --text-body );
	animation: tcc-typing 1s infinite;
}
.tcc-faq__typing-dots span:nth-child(2) { animation-delay: .15s; }
.tcc-faq__typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes tcc-typing {
	0%, 60%, 100% { opacity: .25; }
	30% { opacity: 1; }
}
.tcc-faq__answer {
	display: flex;
	align-items: flex-start;
	gap: var( --space-2xs );
	margin-top: 0;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .35s ease-in-out, opacity .35s ease-in-out, margin-top .35s ease-in-out;
}
.tcc-faq__row.is-open .tcc-faq__answer {
	max-height: 400px;
	opacity: 1;
	margin-top: var( --space-sm );
}
.tcc-faq__bubble--answer {
	background: var( --surface-card );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	padding: 16px 20px;
	max-width: 75%;
	color: var( --text-body );
}
.tcc-faq__ask-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-md );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	padding: var( --space-sm ) var( --space-md );
	background: var( --surface-card );
}
/* Near-white row background — gold-on-white contrast fix (see theme.css's
   navbar rule for the full reasoning). */
.tcc-faq__ask-row .tcc-btn--primary:hover {
	color: var( --color-brand-deep );
	border-color: var( --color-brand-deep );
}

@media ( max-width: 767px ) {
	.tcc-faq__ask-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var( --space-sm );
	}
}

/* ---- Final CTA + ticker ------------------------------------------------ */

.tcc-finalcta {
	padding-bottom: var( --space-lg );
}
.tcc-finalcta__block {
	position: relative;
	overflow: hidden;
	border-radius: var( --radius-md );
	background: var( --color-brand-deep );
	min-height: 480px;
	display: flex;
	align-items: center;
}
.tcc-finalcta__texture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.18;
	mix-blend-mode: multiply;
}
.tcc-finalcta__cutout {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 112%;
	width: auto;
	max-width: 56%;
	object-fit: contain;
	object-position: right bottom;
	pointer-events: none;
	display: none;
}
.tcc-finalcta__copy {
	position: relative;
	z-index: 2;
	max-width: 620px;
	padding: var( --space-3xl ) var( --space-lg );
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-md );
}
.tcc-finalcta__copy h2 {
	margin: 0;
	font-size: var( --text-h1-size );
	line-height: var( --text-h1-lh );
	color: var( --text-on-dark );
}
.tcc-finalcta__copy p {
	margin: 0;
	max-width: 440px;
	color: var( --text-on-dark-muted );
	font-size: var( --text-body-lg-size );
	line-height: var( --text-body-lg-lh );
}

@media ( min-width: 768px ) {
	.tcc-finalcta__cutout {
		display: block;
	}
}

.tcc-ticker {
	overflow: hidden;
	border-top: var( --elevation-hairline );
	border-bottom: var( --elevation-hairline );
	padding: 24px 0;
	margin-top: var( --space-lg );
}
.tcc-ticker__track {
	display: flex;
	width: max-content;
	gap: var( --space-ticker );
	animation: tcc-marquee 26s linear infinite;
}
.tcc-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: var( --space-ticker );
	font-family: var( --font-body );
	font-size: var( --text-label-size );
	font-weight: var( --weight-medium );
	letter-spacing: var( --text-label-tracking );
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --text-strong );
}
.tcc-ticker__item [data-lucide] {
	width: 16px;
	height: 16px;
	color: var( --color-primary );
}
@keyframes tcc-marquee {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.tcc-ticker__track {
		animation: none;
	}
}