@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/*
 * TR Immigration - readership band
 *
 * Deep navy strip that breaks up the run of paper-coloured sections in the
 * middle of the home page. Roughly half the height of the contact section:
 * sp-7 block padding against the contact band's sp-9, one row instead of a
 * stacked header plus form. Every value is a kit token.
 */

.tr-vc-band {
	background: var(--navy-900);
	background-image: linear-gradient(155deg, var(--navy-700) 0%, var(--navy-900) 62%);
	padding-block: var(--sp-7);
	color: var(--white);
	position: relative;
	overflow: hidden;
}

/* Thin gold hairline across the top edge, echoing the section rules elsewhere. */
.tr-vc-band::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: var(--edge);
	background: var(--white);
}

.tr-vc-wrap {
	width: 100%;
	max-width: var(--w-desktop);
	margin-inline: auto;
	padding-inline: var(--wrap-pad);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
}

/* ---- Left: label ---------------------------------------------------- */

.tr-vc-kicker {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-body);
	font-size: var(--fs-tag);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--white);
}

.tr-vc-title {
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-head);
	color: var(--white);
	max-width: 22ch;
}

/* ---- Right: the numbers --------------------------------------------- */

.tr-vc-figures {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sp-6);
	flex: 0 0 auto;
}

.tr-vc-fig {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sp-1);
}

.tr-vc-num {
	font-family: var(--font-head);
	font-size: var(--fs-figure);
	font-weight: 700;
	line-height: 1;
	color: var(--white);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.015em;
}

.tr-vc-lab {
	font-family: var(--font-body);
	font-size: var(--fs-tag);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.72);
}

.tr-vc-sep {
	width: var(--hair);
	align-self: stretch;
	background: rgba(255, 255, 255, 0.22);
}

/* With no headline, the figures carry the band on their own, so centre them. */
.tr-vc-band-bare .tr-vc-wrap {
	justify-content: center;
}

.tr-vc-band-bare .tr-vc-figures {
	gap: var(--sp-8);
}

.tr-vc-band-bare .tr-vc-fig {
	align-items: center;
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 921px) {
	.tr-vc-band { padding-block: var(--sp-6); }
	.tr-vc-wrap { padding-inline: var(--wrap-pad-t); gap: var(--sp-5); }
	.tr-vc-num  { font-size: var(--fs-figure-t); }
	.tr-vc-title { font-size: var(--fs-h4); }
}

@media (max-width: 640px) {
	.tr-vc-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-5);
		padding-inline: var(--wrap-pad-m);
	}
	.tr-vc-title { max-width: none; }
	.tr-vc-figures { width: 100%; justify-content: space-between; gap: var(--sp-4); }
	.tr-vc-fig { align-items: flex-start; }
	.tr-vc-num { font-size: var(--fs-figure-m); }

	.tr-vc-band-bare .tr-vc-wrap { align-items: center; }
	.tr-vc-band-bare .tr-vc-figures { justify-content: space-around; }
	.tr-vc-band-bare .tr-vc-fig { align-items: center; }
}


/* Counter keeps its original body font (Manrope) regardless of the site-wide font change. */
.tr-vc-band {
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}