/* ===========================
   Phone CTA Banner
=========================== */

/* ---------------------------------------------------------------
   Brand purple ramp
   Theme --tertiary (#958db4) is the brand purple, but it only reaches
   3.11:1 against white text, so it cannot carry a white-text surface.
   These three steps hold the same hue (~253deg) and are darkened until
   the contrast passes:
     --pcta-purple       white text on it        5.81:1
     --pcta-purple-deep  white text 10.2:1, as ink on gold 4.72:1
     --pcta-purple-ink   as text on white 9.39:1, on light sand 7.35:1
--------------------------------------------------------------- */
.phonectabanner-block {
	--pcta-purple: #6b5b9e;
	--pcta-purple-deep: #453a68;
	--pcta-purple-ink: #4a3f70;
}

.phonectabanner-stage {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-top: 110px;
	padding-bottom: 110px;
}

.phonectabanner-block--short .phonectabanner-stage {
	padding-top: 80px;
	padding-bottom: 80px;
}

.phonectabanner-block--tall .phonectabanner-stage {
	padding-top: 150px;
	padding-bottom: 150px;
}

.phonectabanner-stage > .container {
	position: relative;
	z-index: 2;
}

.phonectabanner-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.phonectabanner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(180deg, rgba(69, 58, 104, .92) 0%, rgba(107, 91, 158, .86) 100%);
}

.phonectabanner-content {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

.phonectabanner-eyebrow {
	display: block;
	font-family: var(--font2);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}

.phonectabanner-heading {
	margin: 0 0 18px;
	color: #fff;
}

.phonectabanner-copy {
	margin: 0 auto 36px;
	max-width: 620px;
	color: rgba(255, 255, 255, .88);
}

/* Focal click-to-call */
.phonectabanner-phone {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	transition: color .3s ease;
}

.phonectabanner-phone:hover {
	color: var(--secondary);
}

.phonectabanner-phone-label {
	display: block;
	font-family: var(--font2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	margin-bottom: 10px;
}

.phonectabanner-phone-number {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	font-family: var(--font1);
	font-size: 3rem;
	line-height: 1.1;
	white-space: nowrap;
}

.phonectabanner-phone-number i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--secondary);
	color: #fff;
	font-size: 22px;
	transition: transform .3s ease;
}

.phonectabanner-phone:hover .phonectabanner-phone-number i {
	transform: scale(1.06);
}

/* Secondary link — flex + auto margins so it drops onto its own row under the number */
.phonectabanner-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 34px auto 0;
	padding: 16px 42px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 9999px;
	font-family: var(--font2);
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.phonectabanner-link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--pcta-purple);
}

.phonectabanner-trust {
	margin: 26px 0 0;
	font-size: 13px;
	letter-spacing: .5px;
	color: rgba(255, 255, 255, .95);
}

@media (max-width: 1199px) {
	.phonectabanner-stage, .phonectabanner-block--tall .phonectabanner-stage {
		padding-top: 90px;
		padding-bottom: 90px;
	}
	
	.phonectabanner-phone-number {
		font-size: 2.4rem;
	}
}

@media (max-width: 767px) {
	.phonectabanner-stage, .phonectabanner-block--short .phonectabanner-stage, .phonectabanner-block--tall .phonectabanner-stage {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	
	.phonectabanner-phone-number {
		font-size: 1.7rem;
		gap: 12px;
		white-space: normal;
	}
	
	.phonectabanner-phone-number i {
		width: 46px;
		height: 46px;
		font-size: 17px;
	}
	
	.phonectabanner-link {
		width: 100%;
	}
}