/* ==================================================
   CONTACT PAGE
================================================== */

.contact-page {
	background: #f8f6f1;
}


.contact-section {
	position: relative;

	overflow: hidden;

	background: #f8f6f1;

	color: #171612;
}


.contact-section::before {
	content: "";

	position: absolute;

	top: -320px;
	left: -260px;

	width: 700px;
	height: 700px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.12) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


.contact-section::after {
	content: "";

	position: absolute;

	right: -280px;
	bottom: -320px;

	width: 650px;
	height: 650px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(214, 161, 63, 0.08) 0%,
			rgba(214, 161, 63, 0) 70%
		);

	pointer-events: none;
}


/* ==================================================
   CONTAINER
================================================== */

.contact-container {
	position: relative;
	z-index: 1;

	width: calc(100% - 64px);

	max-width:
		var(
			--container-width,
			1200px
		);

	margin: 0 auto;

	padding:
		112px
		0
		120px;

	display: grid;

	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(440px, 1.1fr);

	gap:
		clamp(
			60px,
			8vw,
			110px
		);

	align-items: start;
}


/* ==================================================
   INTRO
================================================== */

.contact-intro {
	position: sticky;

	top: 120px;

	max-width: 590px;
}


/* ==================================================
   EYEBROW
================================================== */

.contact-eyebrow {
	display: flex;
	align-items: center;

	gap: 11px;

	margin-bottom: 28px;

	color: #8d6825;

	font-size: 15px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.contact-eyebrow-line {
	width: 28px;
	height: 1px;

	flex-shrink: 0;

	background: #d6a13f;
}


/* ==================================================
   TITLE
================================================== */

.contact-title {
	margin: 0;

	color: #171612;

	font-size:
		clamp(
			48px,
			5.4vw,
			72px
		);

	font-weight: 730;

	line-height: 1.02;

	letter-spacing: -0.055em;

	text-wrap: balance;
}


.contact-title span {
	display: block;

	color: #b68129;
}


/* ==================================================
   DESCRIPTION
================================================== */

.contact-description {
	max-width: 560px;

	margin:
		29px
		0
		0;

	color: #625e55;

	font-size: 16px;

	line-height: 1.8;
}


/* ==================================================
   DIRECT EMAIL
================================================== */

.contact-direct {
	margin-top: 40px;

	padding:
	26px
	0;

	border-top:
		1px solid
		rgba(23, 22, 18, 0.12);

	border-bottom:
		1px solid
		rgba(23, 22, 18, 0.12);
}


.contact-direct-label {
	display: block;

	margin-bottom: 11px;

	color: #8d6825;

	font-size: 10px;
	font-weight: 750;

	line-height: 1;

	letter-spacing: 0.12em;
}


.contact-email {
	display: inline-block;

	color: #171612;

	font-size:
		clamp(
			20px,
			2vw,
			25px
		);

	font-weight: 650;

	line-height: 1.3;

	letter-spacing: -0.025em;

	text-decoration: none;

	word-break: break-word;

	transition:
		color 180ms ease;
}


.contact-email:hover {
	color: #b68129;
}


.contact-direct p {
	max-width: 440px;

	margin:
		11px
		0
		0;

	color: #777168;

	font-size: 13px;

	line-height: 1.65;
}


/* ==================================================
   HELPFUL INFORMATION
================================================== */

.contact-help {
	margin-top: 30px;
}


.contact-help-title {
	margin:
		0
		0
		16px;

	color: #171612;

	font-size: 13px;
	font-weight: 650;
}


.contact-help ul {
	display: grid;

	gap: 12px;

	margin: 0;

	padding: 0;

	list-style: none;
}


.contact-help li {
	display: grid;

	grid-template-columns:
		30px
		minmax(0, 1fr);

	gap: 12px;

	align-items: center;

	color: #68635b;

	font-size: 13px;

	line-height: 1.55;
}


.contact-help li span {
	color: #a77524;

	font-size: 9px;
	font-weight: 750;

	letter-spacing: 0.08em;
}


/* ==================================================
   LEGAL IDENTITY
================================================== */

.contact-legal-identity {
	display: flex;
	align-items: flex-start;

	gap: 10px;

	margin-top: 34px;

	padding-top: 22px;

	border-top:
		1px solid
		rgba(23, 22, 18, 0.10);
}


.contact-legal-dot {
	width: 6px;
	height: 6px;

	flex: 0 0 6px;

	margin-top: 6px;

	border-radius: 50%;

	background: #b68129;
}


.contact-legal-identity p {
	margin: 0;

	color: #8a857c;

	font-size: 11px;

	line-height: 1.65;
}


.contact-legal-identity strong {
	color: #5d5850;

	font-weight: 650;
}


/* ==================================================
   FORM CARD
================================================== */

.contact-form-card {
	position: relative;

	padding:
		38px
		38px
		34px;

	border:
		1px solid
		rgba(214, 161, 63, 0.20);

	border-radius: 24px;

	background:
		linear-gradient(
			145deg,
			#11110f,
			#080807
		);

	color: #ffffff;

	box-shadow:
		0 30px 80px
		rgba(23, 22, 18, 0.13);
}


.contact-form-card::before {
	content: "";

	position: absolute;

	inset: 0;

	border-radius: inherit;

	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(214, 161, 63, 0.10),
			transparent 34%
		);

	pointer-events: none;
}


/* ==================================================
   FORM HEADER
================================================== */

.contact-form-header {
	position: relative;
	z-index: 1;
}


.contact-form-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;

	padding:
		0
		11px;

	border-radius: 999px;

	background: #d6a13f;

	color: #080807;

	font-size: 10px;
	font-weight: 800;

	line-height: 1;

	letter-spacing: 0.10em;
}


.contact-form-header h2 {
	margin:
		19px
		0
		0;

	color: #ffffff;

	font-size:
		clamp(
			32px,
			3.3vw,
			42px
		);

	font-weight: 680;

	line-height: 1.08;

	letter-spacing: -0.04em;
}


.contact-form-header p {
	max-width: 520px;

	margin:
		14px
		0
		0;

	color: #96928a;

	font-size: 14px;

	line-height: 1.72;
}


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

.contact-form {
	position: relative;
	z-index: 1;

	display: grid;

	gap: 24px;

	margin-top: 34px;
}


.contact-form-grid {
	display: grid;

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

	gap: 20px;
}


/* ==================================================
   FIELD
================================================== */

.contact-field {
	display: grid;

	gap: 9px;
}


.contact-field label {
	color: #d8d4cd;

	font-size: 12px;
	font-weight: 600;

	line-height: 1.4;
}


.contact-field label > span {
	color: #d6a13f;
}


.contact-field
.contact-optional {
	margin-left: 4px;

	color: #77736d;

	font-size: 10px;

	font-weight: 500;
}


/* ==================================================
   INPUTS
================================================== */

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

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

	border-radius: 9px;

	outline: none;

	background:
		rgba(255, 255, 255, 0.045);

	color: #ffffff;

	font: inherit;

	font-size: 14px;

	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		box-shadow 180ms ease;
}


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

	padding:
		0
		14px;
}


.contact-field textarea {
	min-height: 160px;

	padding:
		14px;

	line-height: 1.65;

	resize: vertical;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
	color: #66635d;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
	border-color: #d6a13f;

	background:
		rgba(255, 255, 255, 0.065);

	box-shadow:
		0 0 0 3px
		rgba(214, 161, 63, 0.08);
}


/* Select */

.contact-select-wrapper {
	position: relative;
}


.contact-field select {
	appearance: none;
	-webkit-appearance: none;

	cursor: pointer;
}


.contact-select-wrapper::after {
	content: "";

	position: absolute;

	top: 50%;
	right: 16px;

	width: 7px;
	height: 7px;

	border-right:
		1px solid
		#d6a13f;

	border-bottom:
		1px solid
		#d6a13f;

	transform:
		translateY(-70%)
		rotate(45deg);

	pointer-events: none;
}


.contact-field select option {
	background: #11110f;

	color: #ffffff;
}


/* ==================================================
   PRIVACY CONSENT
================================================== */

.contact-consent {
	display: grid;

	grid-template-columns:
		18px
		minmax(0, 1fr);

	gap: 11px;

	align-items: start;

	cursor: pointer;
}


.contact-consent input {
	width: 16px;
	height: 16px;

	margin-top: 2px;

	accent-color: #d6a13f;

	cursor: pointer;
}


.contact-consent > span {
	color: #87837c;

	font-size: 11px;

	line-height: 1.65;
}


.contact-consent a {
	color: #d6a13f;

	text-decoration: underline;

	text-underline-offset: 3px;
}


/* ==================================================
   SUBMIT
================================================== */

.contact-submit {
	width: 100%;
	min-height: 54px;

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

	gap: 20px;

	padding:
		0
		20px;

	border:
		1px solid
		#b68129;

	border-radius: 9px;

	background: #b68129;

	color: #080807;

	font-size: 14px;
	font-weight: 750;

	cursor: pointer;

	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}


.contact-submit svg {
	flex-shrink: 0;

	transition:
		transform 180ms ease;
}


.contact-submit:hover {
	background: #d6a13f;

	border-color: #d6a13f;

	transform:
		translateY(-1px);

	box-shadow:
		0 14px 34px
		rgba(214, 161, 63, 0.16);
}


.contact-submit:hover svg {
	transform:
		translateX(4px);
}


.contact-form-note {
	margin: -8px 0 0;

	color: #66635d;

	font-size: 10px;

	line-height: 1.6;

	text-align: center;
}


/* ==================================================
   STATUS NOTICE
================================================== */

.contact-notice {
	position: relative;
	z-index: 1;

	display: grid;

	gap: 5px;

	margin-top: 26px;

	padding:
		15px
		16px;

	border-radius: 9px;

	font-size: 12px;

	line-height: 1.55;
}


.contact-notice strong {
	font-size: 13px;
}


.contact-notice-success {
	border:
		1px solid
		rgba(214, 161, 63, 0.35);

	background:
		rgba(214, 161, 63, 0.08);

	color: #d7c49e;
}


.contact-notice-success strong {
	color: #d6a13f;
}


.contact-notice-error {
	border:
		1px solid
		rgba(255, 255, 255, 0.16);

	background:
		rgba(255, 255, 255, 0.05);

	color: #aaa69e;
}


.contact-notice-error strong {
	color: #ffffff;
}


/* ==================================================
   HONEYPOT
================================================== */

.contact-honeypot {
	position: absolute;

	left: -9999px;

	width: 1px;
	height: 1px;

	overflow: hidden;
}


/* ==================================================
   ACCESSIBILITY
================================================== */

.contact-email:focus-visible,
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible,
.contact-submit:focus-visible,
.contact-consent a:focus-visible {
	outline:
		2px solid
		#d6a13f;

	outline-offset: 4px;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1000px) {

	.contact-container {
		grid-template-columns: 1fr;

		gap: 58px;
	}


	.contact-intro {
		position: static;

		max-width: 760px;
	}


	.contact-form-card {
		max-width: 760px;
	}

}


/* ==================================================
   SMALL TABLET
================================================== */

@media (max-width: 900px) {

	.contact-container {
		width:
			calc(100% - 40px);

		padding:
			88px
			0
			94px;
	}

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

	.contact-container {
		width:
			calc(100% - 32px);

		padding:
			72px
			0
			76px;

		gap: 44px;
	}


	.contact-eyebrow {
		margin-bottom: 22px;

		font-size: 13px;
	}


	.contact-title {
		font-size:
			clamp(
				39px,
				11vw,
				52px
			);

		line-height: 1.06;

		letter-spacing: -0.047em;
	}


	.contact-description {
		margin-top: 22px;

		font-size: 15px;

		line-height: 1.75;
	}


	.contact-direct {
		margin-top: 30px;
	}


	.contact-form-card {
		padding:
			24px
			18px
			22px;

		border-radius: 18px;
	}


	.contact-form-header h2 {
		font-size: 29px;
	}


	.contact-form {
		margin-top: 28px;
	}


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

		gap: 22px;
	}


	.contact-field input,
	.contact-field select {
		min-height: 52px;
	}


	.contact-field textarea {
		min-height: 150px;
	}


	.contact-submit {
		min-height: 54px;
	}

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.contact-email,
	.contact-field input,
	.contact-field select,
	.contact-field textarea,
	.contact-submit,
	.contact-submit svg {
		transition: none;
	}

}