/* Call to action band: the closing statement, dark and oversized, with a
   strand of the accent along its top edge. */

/* No top padding (the block before it supplies the beat), but a full section
   of space below plus the footer sheet's overlap, so the footer's rounded top
   lands on white rather than over the panel's foot. This has to live here,
   not in style.css: block sheets load after the base sheet and win ties. */
.blk-cta {
	padding-top: 0;
	padding-bottom: calc(var(--section-y) + var(--sheet));
}

.cta-panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(56px, 7vw, 104px) clamp(28px, 5vw, 72px);
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}

.cta-panel--image {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

/* Strand along the top edge. */
.cta-panel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 5px;
	border-radius: 0 3px 3px 0;
	background: var(--amber);
	pointer-events: none;
}

.cta-panel__body {
	position: relative;
	max-width: 820px;
}

.cta-panel__title {
	font-size: clamp(2.25rem, 1.25rem + 3.4vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	color: #fff;
}

.cta-panel__text {
	margin-top: 22px;
	max-width: 600px;
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
	line-height: 1.6;
	color: var(--on-dark-muted);
}

.cta-panel .btn-row {
	margin-top: 36px;
}

.cta-panel .btn--dark {
	background: var(--btn);
	border-color: var(--btn);
	color: var(--on-btn);
}

.cta-panel .btn--dark:hover {
	background: var(--btn-hover);
	border-color: var(--btn-hover);
	color: var(--on-btn);
}

.cta-panel__phone.btn--outline {
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.cta-panel__phone.btn--outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.cta-panel :focus-visible {
	outline-color: var(--amber);
}

.cta-panel__media {
	position: relative;
	min-height: 260px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.cta-panel__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 860px) {
	.cta-panel--image { grid-template-columns: minmax(0, 1fr); }
	.cta-panel__media { order: -1; min-height: 200px; }
}

/* Line art along the right of the band. */
.cta-panel__lines {
	position: absolute;
	top: 50%;
	right: -4%;
	width: 52%;
	transform: translateY(-50%);
	pointer-events: none;
}

.cta-panel__lines svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.cta-panel__lines .hero-dot-marker {
	display: none;
}

/* The hero's draw-in, dot pop and station fade, replayed here when the band
   scrolls into view (motion.js adds .lines-in; .lines-wait is the held state). Own
   class names on purpose: the generic .rv / .in reveal rules would override the
   art's centring transform. Same keyframes, same timings as the hero. */
@media (prefers-reduced-motion: no-preference) {
	/* The collapsed clip stays on the held class even once .lines-in lands: it is
	   the animation's start value. Dropping it on .lines-in left the lines with no
	   clip to animate from, so they appeared fully drawn while only the dots and
	   pills moved. */
	.cta-panel__lines.lines-wait .hero-line {
		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	}

	.cta-panel__lines.lines-wait .hero-dot {
		transform-box: fill-box;
		transform-origin: center;
		transform: scale(0);
	}

	.cta-panel__lines.lines-wait .hero-station__pill,
	.cta-panel__lines.lines-wait .hero-station__label {
		opacity: 0;
	}

	.cta-panel__lines.lines-in .hero-line {
		animation: oms-draw 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.cta-panel__lines.lines-in .hero-line-orange { animation-delay: .1s; }
	.cta-panel__lines.lines-in .hero-line-blue   { animation-delay: .2s; }
	.cta-panel__lines.lines-in .hero-line-green  { animation-delay: .3s; }
	.cta-panel__lines.lines-in .hero-line-purple { animation-delay: .4s; }

	.cta-panel__lines.lines-in .hero-dot {
		animation: oms-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1s forwards;
	}

	.cta-panel__lines.lines-in .hero-station-orange .hero-dot { animation-delay: 1.1s; }
	.cta-panel__lines.lines-in .hero-station-blue .hero-dot   { animation-delay: 1.2s; }
	.cta-panel__lines.lines-in .hero-station-green .hero-dot  { animation-delay: 1.3s; }
	.cta-panel__lines.lines-in .hero-station-purple .hero-dot { animation-delay: 1.4s; }

	.cta-panel__lines.lines-in .hero-station__pill,
	.cta-panel__lines.lines-in .hero-station__label {
		animation: oms-fade .45s ease-out 1.35s forwards;
	}

	.cta-panel__lines.lines-in .hero-station-orange :is(.hero-station__pill, .hero-station__label) { animation-delay: 1.45s; }
	.cta-panel__lines.lines-in .hero-station-blue   :is(.hero-station__pill, .hero-station__label) { animation-delay: 1.55s; }
	.cta-panel__lines.lines-in .hero-station-green  :is(.hero-station__pill, .hero-station__label) { animation-delay: 1.65s; }
	.cta-panel__lines.lines-in .hero-station-purple :is(.hero-station__pill, .hero-station__label) { animation-delay: 1.75s; }
}

@media (max-width: 860px) {
	.cta-panel__lines {
		top: auto;
		bottom: -10%;
		width: 90%;
		opacity: .5;
		transform: none;
	}
}