/* ==========================================================
   CONTACT / START A PROJECT PAGE
========================================================== */

/* ------------------------------
   CONTACT HERO
------------------------------ */

.contact-hero {
	position: relative;
	overflow: hidden;

	padding: 105px 0 115px;

	background:
		radial-gradient(circle at 78% 34%, rgba(24, 128, 255, 0.18), transparent 30%),
		linear-gradient(135deg, #06111f 0%, #081b32 58%, #061522 100%);

	color: white;
}

.contact-grid-bg {
	position: absolute;
	inset: 0;

	opacity: 0.11;

	background-image:
		linear-gradient(rgba(59, 135, 218, 0.25) 1px, transparent 1px),
		linear-gradient(90deg, rgba(59, 135, 218, 0.25) 1px, transparent 1px);

	background-size: 78px 78px;

	mask-image: linear-gradient(to right, transparent, black 20%, black 90%);
}

.contact-hero-layout {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 1.25fr)
		minmax(320px, 0.75fr);

	align-items: center;

	gap: 85px;
}

/* ------------------------------
   INTRO
------------------------------ */

.contact-intro {
	max-width: 720px;
}

.contact-intro h1 {
	max-width: 720px;

	font-size: clamp(3.2rem, 5.8vw, 6.2rem);

	line-height: 0.97;
	letter-spacing: -0.055em;
}

.contact-intro h1 span {
	display: block;

	background: linear-gradient(90deg, #43a9ff, var(--cyan-400));

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}

.contact-lead {
	max-width: 650px;

	margin-top: 27px;

	color: #bdcad9;

	font-size: 1.04rem;
	line-height: 1.75;
}

/* ------------------------------
   REASSURANCE ITEMS
------------------------------ */

.contact-reassurance {
	margin-top: 45px;

	display: grid;
	gap: 20px;
}

.contact-reassurance > div {
	display: grid;

	grid-template-columns: 48px 1fr;

	gap: 17px;

	align-items: flex-start;
}

.contact-number {
	width: 42px;
	height: 42px;

	display: grid;
	place-items: center;

	border: 1px solid rgba(32, 159, 255, 0.5);

	border-radius: 9px;

	background: rgba(9, 39, 71, 0.5);

	color: var(--cyan-400);

	font-size: 0.65rem;
	font-weight: 800;
}

.contact-reassurance strong {
	color: white;

	font-size: 0.92rem;
}

.contact-reassurance p {
	margin-top: 4px;

	max-width: 530px;

	color: #8298b4;

	font-size: 0.78rem;
	line-height: 1.6;
}

/* ------------------------------
   CONTACT INFO PANEL
------------------------------ */

.contact-info-panel {
	padding: 36px;

	border: 1px solid rgba(255, 255, 255, 0.09);

	border-radius: 18px;

	background: linear-gradient(145deg, rgba(14, 42, 74, 0.82), rgba(6, 22, 40, 0.9));

	box-shadow: 0 25px 55px rgba(0, 0, 0, 0.24);

	backdrop-filter: blur(12px);
}

.contact-panel-label {
	margin-bottom: 10px;

	color: var(--cyan-400);

	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.18em;
}

.contact-info-panel h2 {
	margin-bottom: 28px;

	font-size: 1.65rem;
	line-height: 1.15;
}

.contact-method {
	padding: 18px 0;

	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.contact-method > span {
	display: block;

	margin-bottom: 5px;

	color: #7187a3;

	font-size: 0.62rem;
	font-weight: 800;

	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.contact-method a,
.contact-method p {
	color: #e7f1fd;

	font-size: 0.9rem;
}

.contact-method a:hover {
	color: var(--cyan-400);
}

.contact-panel-divider {
	height: 1px;

	margin: 15px 0 20px;

	background: rgba(255, 255, 255, 0.07);
}

.contact-panel-note {
	color: #8ba0b9;

	font-size: 0.78rem;
	line-height: 1.65;
}

/* ==========================================================
   PROJECT FORM
========================================================== */

.project-form-section {
	padding: 95px 0 105px;

	background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);

	color: var(--navy-950);
}

.project-form-header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.25fr)
		minmax(300px, 0.75fr);

	gap: 60px;

	align-items: end;

	margin-bottom: 42px;
}

.project-form-header h2 {
	max-width: 690px;

	font-size: clamp(2.3rem, 3.7vw, 3.8rem);

	line-height: 1.04;

	letter-spacing: -0.04em;
}

.project-form-header > p {
	color: #73859d;

	font-size: 0.93rem;
	line-height: 1.7;
}

/* ------------------------------
   FORM CARD
------------------------------ */

.project-form {
	padding: 42px;

	border: 1px solid #e0e9f4;

	border-radius: 20px;

	background: white;

	box-shadow: 0 20px 55px rgba(21, 56, 99, 0.07);
}

.form-grid {
	display: grid;

	grid-template-columns: repeat(2, 1fr);

	gap: 24px;
}

.form-field {
	margin-bottom: 26px;
}

.form-field label,
.form-choice-group legend {
	display: block;

	margin-bottom: 9px;

	color: #12243d;

	font-size: 0.78rem;
	font-weight: 750;
}

.form-field label span,
.form-choice-group legend span {
	color: var(--blue-500);
}

.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;

	border: 1px solid #d8e3ef;

	border-radius: 10px;

	background: #f9fbfe;

	color: #0a1b31;

	font: inherit;
	font-size: 0.88rem;

	outline: none;

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		box-shadow 0.2s ease;
}

.form-field input,
.form-field select {
	height: 50px;

	padding: 0 14px;
}

.form-field textarea {
	resize: vertical;

	min-height: 120px;

	padding: 14px;

	line-height: 1.6;
}

.form-field textarea::placeholder {
	color: #9bacc0;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	border-color: var(--blue-500);

	background: white;

	box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
}

/* ------------------------------
   PROJECT TYPE CHOICES
------------------------------ */

.form-choice-group {
	margin-bottom: 28px;

	padding: 0;

	border: 0;
}

.choice-grid {
	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 12px;
}

.choice-card {
	position: relative;

	cursor: pointer;
}

.choice-card input {
	position: absolute;

	opacity: 0;
	pointer-events: none;
}

.choice-card span {
	min-height: 62px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 12px;

	border: 1px solid #dbe5f1;

	border-radius: 10px;

	background: #f8fbff;

	color: #50647e;

	text-align: center;

	font-size: 0.75rem;
	font-weight: 700;

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease;
}

.choice-card:hover span {
	border-color: rgba(22, 119, 255, 0.42);

	background: white;
}

.choice-card input:checked + span {
	border-color: var(--blue-500);

	background: linear-gradient(145deg, rgba(22, 119, 255, 0.09), rgba(18, 213, 243, 0.06));

	color: var(--blue-500);

	box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.06);
}

/* ------------------------------
   SUBMIT ROW
------------------------------ */

.form-submit-row {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 30px;

	padding-top: 28px;

	border-top: 1px solid #e6edf5;
}

.form-submit-row p {
	max-width: 540px;

	color: #8394a9;

	font-size: 0.75rem;
	line-height: 1.6;
}

.form-submit {
	flex-shrink: 0;
}

/* ------------------------------
   ACTIVE NAV
------------------------------ */

.primary-nav a.active-page {
	color: white;
}

.primary-nav a.active-page::after {
	width: 100%;
}

.form-message {
	display: none;
	margin-bottom: 24px;
	padding: 14px 16px;

	border-radius: 10px;

	font-size: 0.85rem;
	line-height: 1.5;
}

.form-message.success {
	display: block;

	border: 1px solid rgba(20, 170, 120, 0.3);

	background: rgba(20, 170, 120, 0.08);

	color: #0d7a57;
}

.form-message.error {
	display: block;

	border: 1px solid rgba(210, 70, 70, 0.3);

	background: rgba(210, 70, 70, 0.08);

	color: #a52a2a;
}

/* ==========================================================
   CONTACT RESPONSIVE
========================================================== */

@media (max-width: 950px) {
	.contact-hero-layout {
		grid-template-columns: 1fr;

		gap: 55px;
	}

	.contact-info-panel {
		max-width: 620px;
	}

	.project-form-header {
		grid-template-columns: 1fr;

		gap: 20px;
	}
}

@media (max-width: 700px) {
	.contact-hero {
		padding: 75px 0 80px;
	}

	.contact-intro h1 {
		font-size: clamp(2.8rem, 13vw, 4.5rem);
	}

	.project-form-section {
		padding: 70px 0 78px;
	}

	.project-form {
		padding: 26px 20px;
	}

	.form-grid {
		grid-template-columns: 1fr;

		gap: 0;
	}

	.choice-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.form-submit-row {
		flex-direction: column;

		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.choice-grid {
		grid-template-columns: 1fr;
	}

	.contact-info-panel {
		padding: 26px 22px;
	}
}