/* =============================================================================
 * csc-cta-band — the closing band
 *
 * Measured from prototype 26f20fb8 v10, section 12, at 1440:
 *
 *   ground   #0E1A2A full-bleed, band 1200, padding 56 top and bottom
 *   layout   flex, gap 48 — text 767, actions 385 (767 + 48 + 385 = 1200)
 *   heading  36/700 white, with one phrase in the slab face
 *   proof    a 1px #2E3F55 panel, padding 12, gap 20: a 300x150 photograph
 *            and three lines of checkable fact
 *   buttons  50 tall, radius 2: green fill, then an outline in #5C6B7E
 *
 * The heading is the ONE display heading in this design at weight 700. Every
 * other H1 and H2 is 300. It is last on the page and it is allowed to be the
 * loudest thing on it exactly once.
 *
 * Padding, gaps and the panel are not Elementor controls — CLAUDE.md §2.10.
 * ========================================================================== */

.csc-cta-band__ground {
	background: var(--csc-ink);
}

/* Gutter outside the band — HP-048 #2. */
.csc-cta-band__pad {
	padding-inline: var(--csc-gutter);
}

.csc-cta-band__band {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--csc-space-12);
	max-width: var(--csc-band);
	margin-inline: auto;
	padding-block: var(--csc-section-y);
}

.csc-cta-band__text {
	display: flex;
	flex-direction: column;
	gap: var(--csc-space-4);
	min-width: 0;
	flex: 1 1 767px;
}

/* 700, not 300. See the file header: this is the exception, and it is the only
 * one in the design. */
.csc-cta-band__heading {
	margin: 0;
	font-size: var(--csc-fs-h2-dark);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--csc-ls-display);
	color: #FFFFFF;
	text-wrap: balance;
}

.csc-cta-band__slab {
	font-family: var(--csc-font-slab);
	font-weight: 400;
}

.csc-cta-band__intro {
	margin: 0;
	max-width: 52ch;
	font-size: var(--csc-fs-body);
	line-height: var(--csc-lh-body);
	color: var(--csc-on-dark);
	text-wrap: pretty;
}

/* --- The proof panel ------------------------------------------------------ */

/* #2E3F55 is --csc-ink-2, used here as a rule rather than as text. On the ink
 * ground it measures 1.9:1, which would fail for text and is fine for a
 * boundary: the 3:1 minimum applies to controls and meaningful graphics, not to
 * a divider whose job is done if you can just see it. --csc-rule-on-dark would
 * be the louder choice and the panel is not asking for attention. */
.csc-cta-band__proof {
	display: flex;
	align-items: flex-start;
	gap: var(--csc-space-5);
	margin-top: var(--csc-space-2);
	padding: var(--csc-space-3);
	border: 1px solid var(--csc-ink-2);
	border-radius: var(--csc-radius);
}

.csc-cta-band__figure {
	flex: none;
	margin: 0;
	width: 300px;
	border-radius: var(--csc-radius);
	overflow: hidden;
}

.csc-cta-band__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	max-width: 100%;
}

.csc-cta-band__proof-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.csc-cta-band__caption {
	margin: 0;
	font-size: var(--csc-fs-card);
	line-height: 1.4;
	color: #FFFFFF;
	text-wrap: pretty;
}

/* Mono with tabular figures, because a phone number is a number. */
.csc-cta-band__contact {
	font-size: var(--csc-fs-copy);
	line-height: var(--csc-lh-spec);
	color: var(--csc-on-dark);
	overflow-wrap: anywhere;
}

.csc-cta-band__note {
	font-size: var(--csc-fs-spec);
	line-height: var(--csc-lh-spec);
	color: var(--csc-tag-on-dark);
	text-wrap: pretty;
}

/* --- Buttons -------------------------------------------------------------- */

.csc-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--csc-space-3);
	flex: none;
}

.csc-cta-band__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--csc-control-lg);
	padding-inline: var(--csc-space-6);
	border-radius: var(--csc-radius-btn);
	font-size: var(--csc-fs-card);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* The green goes on the phone call here, not on the form — the band's argument
 * is that there are people on the other end, and a green "Request a quote"
 * would contradict the paragraph above it. Label is --csc-on-green, CSC's
 * decision of 21 Sep; see the note beside the green tokens in csc-shared.css. */
.csc-cta-band__primary {
	background: var(--csc-green-btn);
	border: 1px solid var(--csc-green-btn);
	color: var(--csc-on-green);
}

.csc-cta-band__primary:hover {
	background: var(--csc-green-hover);
	border-color: var(--csc-green-hover);
	color: var(--csc-on-green);
}

.csc-cta-band__primary:active {
	background: var(--csc-green-press);
	border-color: var(--csc-green-press);
}

/* The outline's border measures 3.22:1 on the ink ground, clearing the 3:1
 * minimum for a control boundary. Its label is white at 17.4:1. */
.csc-cta-band__secondary {
	background: transparent;
	border: 1px solid var(--csc-ink-3);
	color: #FFFFFF;
}

.csc-cta-band__secondary:hover {
	border-color: #FFFFFF;
	color: #FFFFFF;
}

.csc-cta-band__secondary:active {
	background: rgba(255, 255, 255, 0.06);
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.csc-cta-band__band {
		flex-direction: column;
		align-items: stretch;
		gap: var(--csc-space-8);
	}

	.csc-cta-band__text { flex: 1 1 auto; }
}

@media (max-width: 767px) {
	.csc-cta-band__proof {
		flex-direction: column;
		gap: var(--csc-space-4);
	}

	.csc-cta-band__figure { width: 100%; }

	.csc-cta-band__actions { flex-direction: column; align-items: stretch; }
	.csc-cta-band__btn     { width: 100%; }
}