/* =========================================
   KAJA DESIGNS - CONTACT.CSS
========================================= */

.contact-hero{
	padding:190px 0 90px;
}

.contact-hero-grid{
	display:grid;
	grid-template-columns:1.15fr .85fr;
	gap:80px;
	align-items:end;
}

.contact-hero h1{
	max-width:900px;
	font-size:clamp(4rem, 7vw, 7.5rem);
	font-weight:300;
	line-height:.9;
	letter-spacing:-.075em;
}

.contact-hero-copy{
	max-width:560px;
	padding-bottom:10px;
}

.contact-hero-copy span{
	display:block;
	margin-bottom:18px;
	color:var(--purple-light);
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.22em;
	text-transform:uppercase;
}

.contact-hero-copy p{
	color:var(--muted);
	font-size:1.12rem;
	line-height:1.85;
}

.contact-section{
	padding:0 0 150px;
}

.contact-grid{
	display:grid;
	grid-template-columns:.85fr 1.15fr;
	gap:72px;
	align-items:start;
}

.contact-info{
	position:sticky;
	top:140px;
}

.contact-info h2{
	margin-bottom:24px;
	font-size:clamp(2.5rem, 4vw, 4.5rem);
}

.contact-info > p{
	max-width:620px;
	margin-bottom:34px;
	color:var(--muted);
	font-size:1.08rem;
	line-height:1.85;
}

.contact-card-grid{
	display:grid;
	gap:18px;
}

.contact-card{
	position:relative;
	overflow:hidden;
	padding:28px;
	border:1px solid var(--line);
	border-radius:var(--card-radius);
	background:var(--card-bg);
}

.contact-card::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:1px;
	background:linear-gradient(90deg, rgba(157,92,255,.35), transparent);
}

.contact-card span{
	display:block;
	margin-bottom:14px;
	color:var(--purple-light);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.2em;
	text-transform:uppercase;
}

.contact-card h3{
	margin-bottom:10px;
	font-size:1.35rem;
	font-weight:400;
	letter-spacing:-.03em;
}

.contact-card p{
	color:var(--muted);
	line-height:1.75;
}

.contact-next{
	margin-top:28px;
	padding:30px;
	border:1px solid rgba(157,92,255,.18);
	border-radius:var(--card-radius);
	background:
		radial-gradient(circle at top right, rgba(157,92,255,.12), transparent 38%),
		linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}

.contact-next .section-label{
	margin-bottom:18px;
}

.contact-next h3{
	margin-bottom:22px;
	font-size:clamp(1.55rem, 2vw, 2.15rem);
	font-weight:300;
	line-height:1;
	letter-spacing:-.045em;
}

.contact-next-list{
	display:grid;
	gap:0;
}

.contact-next-list div{
	display:grid;
	grid-template-columns:46px 1fr;
	gap:16px;
	padding:16px 0;
	border-top:1px solid rgba(255,255,255,.075);
}

.contact-next-list span{
	color:var(--purple-light);
	font-size:.74rem;
	font-weight:700;
	letter-spacing:.18em;
}

.contact-next-list p{
	color:var(--muted);
	line-height:1.65;
}

.contact-form{
	padding:38px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:30px;
	background:
		radial-gradient(circle at top right, rgba(157,92,255,.16), transparent 38%),
		linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
	box-shadow:0 30px 90px rgba(0,0,0,.22);
}

.form-row{
	display:grid;
	gap:10px;
	margin-bottom:22px;
}

.form-split{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}

.form-required-note{
	margin-bottom:22px;
	color:rgba(255,255,255,.56);
	font-size:.82rem;
}

.form-honeypot{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}

.form-notice{
	margin-bottom:22px;
	padding:14px 16px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:14px;
	color:rgba(255,255,255,.82);
	font-size:.94rem;
	line-height:1.55;
}

.form-notice.is-success{
	border-color:rgba(98,255,176,.28);
	background:rgba(98,255,176,.08);
}

.form-notice.is-error{
	border-color:rgba(255,122,122,.32);
	background:rgba(255,122,122,.08);
}

.contact-form label{
	color:rgba(255,255,255,.7);
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.contact-form label span{
	color:var(--purple-light);
}

.contact-form input,
.contact-form select,
.contact-form textarea{
	width:100%;
	border:1px solid rgba(255,255,255,.11);
	border-radius:14px;
	background:rgba(5,5,10,.64);
	color:white;
	font:inherit;
	font-size:1rem;
	outline:none;
	transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.contact-form input,
.contact-form select{
	height:58px;
	padding:0 18px;
}

.contact-form textarea{
	resize:vertical;
	min-height:180px;
	padding:18px;
	line-height:1.7;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
	border-color:rgba(157,92,255,.62);
	background:rgba(5,5,10,.82);
	box-shadow:0 0 0 4px rgba(157,92,255,.12);
}

.contact-form select{
	appearance:none;
	background-image:
		linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
		linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
	background-position:
		calc(100% - 22px) 25px,
		calc(100% - 16px) 25px;
	background-size:6px 6px;
	background-repeat:no-repeat;
}

.recaptcha-fallback{
	margin:0 0 22px;
	padding:18px;
	border:1px solid rgba(157,92,255,.24);
	border-radius:16px;
	background:rgba(5,5,10,.44);
}

.recaptcha-fallback.is-hidden{
	display:none;
}

.recaptcha-fallback-label{
	margin-bottom:6px;
	color:var(--purple-light);
	font-size:.78rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.recaptcha-fallback p:not(.recaptcha-fallback-label){
	margin-bottom:14px;
	color:var(--muted);
	font-size:.92rem;
	line-height:1.55;
}

.recaptcha-v2-widget{
	min-height:78px;
}

.contact-submit{
	width:100%;
	margin-top:8px;
	border:1px solid rgba(157,92,255,.42);
	cursor:pointer;
}

@media (max-width:1100px){
	.contact-hero-grid,
	.contact-grid{
		grid-template-columns:1fr;
		gap:48px;
	}

	.contact-info{
		position:relative;
		top:auto;
	}
}

@media (max-width:760px){
	.contact-hero{
		padding:150px 0 70px;
	}

	.contact-section{
		padding-bottom:100px;
	}

	.contact-form{
		padding:24px;
		border-radius:24px;
	}

	.form-split{
		grid-template-columns:1fr;
		gap:0;
	}
}

@media (max-width:520px){
	.contact-hero h1{
		font-size:clamp(3.2rem, 15vw, 4.6rem);
	}

	.contact-form input,
	.contact-form select{
		height:54px;
	}

	.contact-card{
		padding:24px;
	}

	.contact-next{
		padding:24px;
	}

	.contact-next-list div{
		grid-template-columns:1fr;
		gap:8px;
	}
}