/*
 * Closing CTA band. Every value measured from the newsroom's copy before consolidation, so the
 * seven pages that adopt this keep the appearance they already had.
 *
 * The band paints its own dark ground. On the pages it replaces, the darkness came from an
 * ancestor section, which a component dropped into a template cannot rely on.
 *
 * Its vertical padding is deliberately not here. `ubind-section-rhythm` sets that for every
 * full-bleed band on the site, so this one keeps step with the sections above and below it.
 */

.ubind-cta {
	background: var(--ink-1000, #050807);
	color: #fff;
	text-align: center;
}

.ubind-cta__inner {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
}

.ubind-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ubind-font-body, 'Montserrat', sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--emerald-400, #39b591);
}

.ubind-cta__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--emerald-500, #1fa67a);
}

.ubind-cta__heading {
	font-family: var(--ubind-font-display, 'Soho Gothic Pro', 'Montserrat', sans-serif);
	font-weight: 400;
	/* The larger of the two variants the copies had drifted into: five of the seven pages ran 56px
	   with the btn-lg buttons below, and that is the one being standardised on. */
	font-size: clamp(30px, 4.4vw, 56px);
	line-height: 1.04;
	letter-spacing: -.02em;
	color: #fff;
	max-width: 20ch;
	margin: 18px auto 0;
}

.ubind-cta__lede {
	font-family: var(--ubind-font-body, 'Montserrat', sans-serif);
	font-size: 16.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .66);
	max-width: 656px;
	margin: 18px auto 0;
}

.ubind-cta__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 32px;
}

/* The site-wide reset zeroes padding declared from a stylesheet it outranks, and the theme styles
   bare anchors - so the button's own box is forced rather than merely specific. */
.ubind-cta .ubind-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 28px !important;
	border-radius: 999px !important;
	font-family: var(--ubind-font-body, 'Montserrat', sans-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease;
}

.ubind-cta .ubind-cta__btn--primary {
	background: var(--emerald-500, #1fa67a);
	color: #fff;
}

.ubind-cta .ubind-cta__btn--primary:hover,
.ubind-cta .ubind-cta__btn--primary:focus-visible {
	background: var(--emerald-600, #128a5f);
	color: #fff;
}

.ubind-cta .ubind-cta__btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
}

.ubind-cta .ubind-cta__btn--outline:hover,
.ubind-cta .ubind-cta__btn--outline:focus-visible {
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.ubind-cta__arrow {
	transition: transform .25s ease;
}

.ubind-cta__btn:hover .ubind-cta__arrow {
	transform: translateX(4px);
}

.ubind-cta__phone {
	font-family: var(--ubind-font-body, 'Montserrat', sans-serif);
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin: 24px 0 0;
}

.ubind-cta__phone a {
	color: var(--emerald-300, #69e0b0);
	/*
	 * Underlined because colour alone does not distinguish it. The number sits in a line of
	 * rgba(255, 255, 255, .55) prose, and emerald-300 against that measures 1.96:1 - WCAG 1.4.1
	 * wants 3:1 between a link and its surrounding text before colour may carry the distinction on
	 * its own. Shifting the green far enough to clear 3:1 against both the prose and the dark panel
	 * behind it would abandon the brand accent; an underline is the conventional remedy.
	 */
	text-decoration: underline;
	text-underline-offset: 2px;
}