/* ── JPS CTA Section Block ───────────────────────────────────────────────── */

/* ── Section: bg-primary text-white ─────────────────────────────────────── */

.cta-section {
	background: #0A4DA2; /* bg-primary */
	color:      #ffffff;
}

/* ── Inner: container-jps + py-16 md:py-24 (section-tight) ──────────────── */

.cta-inner {
	padding-top:    4rem;  /* py-16 = 64px */
	padding-bottom: 4rem;
}

@media (min-width: 768px) {
	.cta-inner {
		padding-top:    6rem;  /* md:py-24 = 96px */
		padding-bottom: 6rem;
	}
}

/* ── Grid: grid-cols-1 lg:grid-cols-12 gap-10 items-center ──────────────── */

.cta-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   2.5rem; /* gap-10 = 40px */
	align-items:           center;
}

@media (min-width: 1024px) {
	.cta-grid {
		grid-template-columns: repeat(12, 1fr);
	}
}

/* ── Left col: lg:col-span-8 ─────────────────────────────────────────────── */

.cta-col-left {
	display:        flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.cta-col-left {
		grid-column: span 8;
	}
}

/* Eyebrow spacing: mb-5 = 20px */
.cta-eyebrow {
	margin-bottom: 1.25rem;
}

/* display-xl is dark by default — override to white here */
.cta-section .display-xl {
	color: #ffffff;
}

/* ── Body: Inter 18px white/80 max-w-2xl mt-5 leading-relaxed ───────────── */

.cta-body {
	font-family: var(--font-body);
	font-size:   1rem;                    /* text-base = 16px mobile */
	line-height: 1.625;                   /* leading-relaxed */
	color:       rgba(255, 255, 255, 0.80);
	max-width:   42rem;                   /* max-w-2xl = 672px */
	margin:      1.25rem 0 0;            /* mt-5 = 20px */
}

@media (min-width: 1024px) {
	.cta-body {
		font-size: 1.125rem; /* lg:text-lg = 18px */
	}
}

/* ── Right col: lg:col-span-4 lg:justify-self-end ───────────────────────── */

.cta-col-right {
	display: flex;
}

@media (min-width: 1024px) {
	.cta-col-right {
		grid-column:  span 4;
		justify-self: end;
	}
}

/* ── Button: outline-light — transparent bg, 1px white border ───────────── */

.cta-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             0.5rem;         /* gap-2 = 8px */
	height:          3.5rem;         /* h-14 = 56px */
	padding:         0 2rem;         /* px-8 = 32px */
	font-family:     var(--font-display);
	font-weight:     600;
	font-size:       0.8125rem;      /* 13px */
	text-transform:  uppercase;
	letter-spacing:  0.16em;         /* tracking-[0.16em] */
	color:           #ffffff;
	background:      transparent;
	border:          1px solid #ffffff;
	border-radius:   0;
	text-decoration: none;
	white-space:     nowrap;
	transition:      background-color 0.2s ease, color 0.2s ease;
}

.cta-btn:hover {
	background: #ffffff;
	color:      #0B0B0F; /* near-black */
}