/* Closing CTA band (§3) */

.cta-band {
	position: relative;
	background: var(--navy);
	overflow: hidden;
	padding-block: 100px;
}

.cta-band__ring {
	position: absolute;
	top: 50%;
	left: -220px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 90px solid rgba(255, 255, 255, 0.05);
	transform: translateY(-50%);
	pointer-events: none;
}

.cta-band__inner {
	position: relative;
}

.cta-band__headline {
	color: var(--paper);
	max-width: 16ch;
	margin-bottom: 0.5em;
}

.cta-band__subtext {
	color: rgba(255, 255, 255, 0.7);
	max-width: 42ch;
	margin-bottom: 2em;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.cta-band__emails {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}

.cta-band__email-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 8px;
}

.cta-band__email-link {
	display: inline-block;
	color: var(--cyan);
	font-weight: 600;
	font-size: 1.125rem;
	border-bottom: 1.5px solid transparent;
	transition: border-color 150ms ease-out;
}

.cta-band__email-link:hover,
.cta-band__email-link:focus-visible {
	border-color: var(--cyan);
}

@media (max-width: 640px) {
	.cta-band__ring {
		width: 320px;
		height: 320px;
		border-width: 56px;
		left: -160px;
	}
}

/* ---- Split layout with illustration (homepage) ------------------------- */
.cta-band__inner--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: 64px;
	align-items: center;
}

.cta-band__art {
	justify-self: end;
	width: 100%;
	max-width: 440px;
}

.cta-illustration svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.cta-illustration__orbit {
	fill: none;
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 1.5;
}

.cta-illustration__orbit--dashed {
	stroke: rgba(0, 159, 226, 0.5);
	stroke-dasharray: 3 9;
	stroke-linecap: round;
}

.cta-illustration__link {
	stroke: rgba(255, 255, 255, 0.3);
	stroke-width: 1.2;
	stroke-dasharray: 4 8;
}

.cta-illustration__node circle:first-child {
	fill: rgba(255, 255, 255, 0.08);
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 1.2;
}

.cta-illustration__node-core {
	fill: var(--cyan);
}

.cta-illustration__halo {
	fill: rgba(0, 159, 226, 0.16);
	stroke: rgba(0, 159, 226, 0.45);
	stroke-width: 1.2;
}

.cta-illustration__body {
	fill: var(--cyan);
}

.cta-illustration__shackle {
	fill: none;
	stroke: var(--paper);
	stroke-width: 7;
	stroke-linecap: round;
}

.cta-illustration__keyhole {
	fill: var(--navy);
}

/* Transform boxes so shapes rotate/scale about their own centre. */
.cta-illustration__orbit--dashed,
.cta-illustration__node,
.cta-illustration__halo,
.cta-illustration__shackle {
	transform-box: fill-box;
	transform-origin: center;
}

/* Idle motion — gated on prefers-reduced-motion like the rest of the site. */
@media (prefers-reduced-motion: no-preference) {
	.cta-illustration__orbit--dashed { animation: unlock-cta-spin 40s linear infinite; }
	.cta-illustration__link          { animation: unlock-cta-flow 1.6s linear infinite; }
	.cta-illustration__node          { animation: unlock-cta-node 3s ease-in-out infinite; }
	.cta-illustration__halo          { animation: unlock-cta-halo 4s ease-in-out infinite; }
	.cta-illustration__shackle {
		transform-origin: 100% 100%; /* hinge on the right leg */
		animation: unlock-cta-shackle 6s ease-in-out infinite;
	}
}

@keyframes unlock-cta-spin   { to { transform: rotate(360deg); } }
@keyframes unlock-cta-flow   { to { stroke-dashoffset: -12; } }
@keyframes unlock-cta-node {
	0%, 100% { transform: scale(1);    opacity: 0.85; }
	50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes unlock-cta-halo {
	0%, 100% { transform: scale(1);    opacity: 0.7; }
	50%      { transform: scale(1.12); opacity: 1; }
}
/* Locked → lifts and swings open → holds → closes. */
@keyframes unlock-cta-shackle {
	0%, 45%, 100% { transform: translateY(0) rotate(0); }
	55%, 80%      { transform: translateY(-9px) rotate(-22deg); }
}

@media (max-width: 900px) {
	.cta-band__inner--split {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cta-band__art {
		justify-self: center;
		max-width: 320px;
	}
}

/* Inner pages: the animation is desktop-only. At tablet/phone widths the art is
   hidden and the band goes back to a single text column (the homepage keeps its
   art at every width). */
@media (max-width: 1024px) {
	.cta-band__art--desktop-only {
		display: none;
	}

	.cta-band__inner--desktop-art {
		grid-template-columns: 1fr;
	}
}