/* CTA — flat navy panel with the booking form and the team cut-out. */

.cta__panel {
	position: relative;
	background: var(--color-primary);
	max-width: var(--container);
	margin: 0 auto;
	padding: 30px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/*
 * Figma 257:2130 — the panel is a flat navy field (no photo wash) with the team
 * cut-out standing in its bottom-left corner, fading into the panel colour.
 * The cut-out is decorative and is dropped below 1024px, where it has no room.
 */
.cta__photo { display: none; }

.cta__content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.cta__left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	max-width: 568px;
}

.cta__text {
	display: flex;
	flex-direction: column;
	gap: 29px;
}

.cta__subtitle {
	max-width: 452px;
	color: var(--color-hero-muted);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

.cta__contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 43px;
}

.cta__contact {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--color-neutral-7);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--btn-ls);
}

/* The envelope glyph is 14x10.314 — forcing it square fattens it. */
.cta__contact img {
	width: 14px;
	height: auto;
}

/* Figma 180:405 / 180:409 — the phone sits tighter to its label than the envelope. */
.cta__contact--phone { gap: 4px; }

/* Form panel */

.cta__form-panel {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 35px 30px;
	border-radius: 11px;
	background: var(--color-neutral-7);
}

.cta__form-title {
	max-width: 433px;
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: var(--h4-size);
	font-weight: var(--h4-weight);
	line-height: var(--h4-lh);
}

@media (min-width: 1024px) {
	.cta__panel { padding: 50px; }
	.cta__photo {
		display: block;
		position: absolute;
		left: var(--gutter);
		bottom: 0;
		width: 620px;
		height: 405px;
		overflow: hidden;
		pointer-events: none;
	}
	.cta__photo img {
		position: absolute;
		left: -17.8%;
		top: -3.5%;
		width: 125.44%;
		height: 107.5%;
		max-width: none;
		object-fit: cover;
	}
	.cta__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(26, 41, 74, 0) 52.03%, var(--color-primary) 100%);
	}
	.cta__content {
		flex-direction: row;
		align-items: stretch;
		gap: 90px;
	}
	/*
	 * Figma 180:416 puts 382px between the headline block and the contact row,
	 * i.e. the headline tops out with the form and the contacts sit on its floor.
	 * Stretching and spacing apart keeps that at any form height.
	 */
	.cta__left { flex: 0 0 578px; }
	.cta__form-panel { flex: 0 0 572px; gap: 78px; }
}