/*
 * Stone Cliff Digital — Contact
 * Page-specific layout/decoration only. Colors, type, spacing, radii, and
 * motion all come from tokens.css; surfaces/typography/eyebrow/buttons come
 * from components.css. Loaded only on page-contact.php. Intentionally
 * simpler/shorter than the four service-page stylesheets — Contact is a
 * compact conversion page, not another long marketing page.
 */

.con-main {
	overflow-x: hidden;
}

.con-section__inner {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------- */
/* Hero — compact, no large artwork                                     */
/* -------------------------------------------------------------------- */

.con-hero {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(170deg, var(--sc-ink) 0%, #14171C 55%, #171B22 100%);
	padding: var(--sc-space-500) 0 var(--sc-space-400);
}

/* Faint digital grid, concentrated toward the right where the glow sits. */
.con-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(108, 134, 255, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(108, 134, 255, 0.07) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.55) 100%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}

.con-hero__glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.con-hero__glow--a {
	right: -200px;
	top: -240px;
	width: 620px;
	height: 620px;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.22;
	mix-blend-mode: screen;
}

.con-hero__glow--b {
	left: -240px;
	bottom: -280px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, var(--sc-blue-light) 0%, transparent 70%);
	opacity: 0.09;
}

/* Small square accents echoing the grid, restrained and low-opacity. */
.con-hero__glow--c {
	right: 9%;
	bottom: -18px;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: none;
	border: 1px solid var(--sc-blue-border-emphasis);
	opacity: 0.55;
}

.con-hero__title {
	position: relative;
	z-index: 2;
	margin-top: var(--sc-space-100);
	max-width: 680px;
}

.con-hero__lede {
	position: relative;
	z-index: 2;
	margin-top: var(--sc-space-100);
	color: var(--sc-text-ondark-mute);
}

/* -------------------------------------------------------------------- */
/* Contact — two-column layout                                          */
/* -------------------------------------------------------------------- */

.con-contact {
	padding-block: var(--sc-space-500);
}

.con-contact__row {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	grid-template-areas:
		"intro form"
		"details form"
		"reassurance form";
	column-gap: var(--sc-space-500);
	row-gap: 0;
	align-items: start;
}

.con-contact__info {
	grid-area: intro;
	display: flex;
	flex-direction: column;
}

.con-contact__details {
	grid-area: details;
}

.con-contact__reassurance {
	grid-area: reassurance;
}

.con-contact__form-wrap {
	grid-area: form;
}

.con-contact__eyebrow {
	margin-bottom: var(--sc-space-100);
}

.con-contact__heading {
	margin-bottom: var(--sc-space-100);
}

.con-contact__copy {
	color: var(--sc-text-onlight-mute);
	max-width: var(--sc-measure);
}

.con-contact__details {
	margin: var(--sc-space-300) 0 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--sc-slate-200);
}

.con-contact__detail {
	display: flex;
	align-items: center;
	gap: var(--sc-space-100);
	padding: var(--sc-space-200) 0;
	border-bottom: 1px solid var(--sc-slate-200);
}

.con-contact__detail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--sc-radius-md);
	background: var(--sc-icy);
	color: var(--sc-blue);
}

.con-contact__detail-icon svg {
	width: 18px;
	height: 18px;
}

.con-contact__detail dt {
	font-family: var(--sc-font-mono);
	font-size: var(--sc-text-mono-label);
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--sc-slate-500);
	margin-bottom: 4px;
}

.con-contact__detail dd {
	margin: 0;
}

.con-contact__detail a {
	font-family: var(--sc-font-heading);
	font-size: 21px;
	font-weight: 700;
	color: var(--sc-text-onlight);
	transition: color var(--sc-transition-fast);
}

.con-contact__detail a:hover,
.con-contact__detail a:focus-visible {
	color: var(--sc-blue);
}

.con-contact__reassurance {
	position: relative;
	overflow: hidden;
	margin-top: var(--sc-space-300);
	padding: var(--sc-space-200);
	background: var(--sc-ink);
	border: 1px solid rgba(108, 134, 255, 0.25);
	border-radius: var(--sc-radius-lg);
	color: var(--sc-text-ondark-mute);
	font-size: 14.5px;
	line-height: 1.6;
}

.con-contact__reassurance::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.28;
	mix-blend-mode: screen;
	pointer-events: none;
}

.con-contact__reassurance-mark {
	position: relative;
	z-index: 1;
	display: block;
	width: 22px;
	height: 1px;
	background: var(--sc-blue-light);
	margin-bottom: var(--sc-space-100);
}

.con-contact__reassurance p {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* Form — dark premium panel                                            */
/* -------------------------------------------------------------------- */

.con-form,
.con-form__success {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--sc-ink-2) 0%, var(--sc-ink) 65%);
	border: 1px solid rgba(108, 134, 255, 0.22);
	border-radius: var(--sc-radius-xl);
	padding: var(--sc-space-300);
	box-shadow: 0 0 0 1px rgba(108, 134, 255, 0.06), 0 50px 100px -50px rgba(8, 10, 12, 0.75);
}

.con-form::before,
.con-form__success::before {
	content: '';
	position: absolute;
	top: -140px;
	right: -140px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sc-blue) 0%, transparent 70%);
	opacity: 0.16;
	mix-blend-mode: screen;
	pointer-events: none;
}

.con-form > *,
.con-form__success > * {
	position: relative;
	z-index: 1;
}

.con-form__success h3 {
	font-size: var(--sc-text-h3);
	color: var(--sc-text-ondark);
	margin-bottom: var(--sc-space-50);
}

.con-form__success p {
	color: var(--sc-text-ondark-mute);
}

.con-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sc-space-200);
}

.con-form__field {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--sc-space-200);
}

.con-form__field label {
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--sc-text-ondark);
}

.con-form__req {
	color: var(--sc-blue-light);
}

.con-form__field input,
.con-form__field select,
.con-form__field textarea {
	font-family: var(--sc-font-body);
	font-size: 15px;
	color: var(--sc-text-ondark);
	background: var(--sc-ink-3);
	border: 1px solid var(--sc-ink-4);
	border-radius: var(--sc-radius-sm);
	padding: 13px 14px;
	width: 100%;
	transition: border-color var(--sc-transition-fast), box-shadow var(--sc-transition-fast);
}

.con-form__field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239DA3A9' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	background-size: 18px 12px;
	padding-right: 50px;
}

.con-form__field input::placeholder,
.con-form__field textarea::placeholder {
	color: var(--sc-text-ondark-mute);
}

.con-form__field textarea {
	resize: vertical;
	min-height: 120px;
}

.con-form__field input:hover,
.con-form__field select:hover,
.con-form__field textarea:hover {
	border-color: var(--sc-blue-border-emphasis);
}

.con-form__field input:focus-visible,
.con-form__field select:focus-visible,
.con-form__field textarea:focus-visible {
	outline: none;
	border-color: var(--sc-blue-light);
	box-shadow: 0 0 0 3px rgba(108, 134, 255, 0.28);
}

.con-form__field input[aria-invalid="true"],
.con-form__field select[aria-invalid="true"],
.con-form__field textarea[aria-invalid="true"] {
	border-color: #E5847C;
}

.con-form__error {
	margin-top: 6px;
	font-size: 13px;
	color: #E5847C;
}

.con-form__error--general {
	margin: 0 0 var(--sc-space-200);
	padding: 12px 14px;
	background: rgba(196, 68, 59, 0.16);
	border: 1px solid rgba(229, 132, 124, 0.4);
	border-radius: var(--sc-radius-sm);
	color: var(--sc-text-ondark);
}

.con-form__submit.c-btn--primary {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--sc-space-100);
	background: var(--sc-blue);
	color: #fff;
	font-family: var(--sc-font-body);
	font-size: 15px;
	font-weight: 600;
	padding: 16px 28px;
	border: 0;
	border-radius: var(--sc-radius-sm);
	cursor: pointer;
	box-shadow: 0 8px 34px rgba(42, 76, 255, 0.38);
	transition: background var(--sc-transition-base), box-shadow var(--sc-transition-base), transform var(--sc-transition-fast);
}

.con-form__submit.c-btn--primary:hover {
	background: var(--sc-blue-dark);
	box-shadow: 0 10px 46px rgba(42, 76, 255, 0.6);
}

.con-form__submit.c-btn--primary:focus-visible {
	outline: 2px solid var(--sc-blue-light);
	outline-offset: 3px;
}

.con-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* Honeypot — visually hidden from sighted users, still present in the DOM
   for spam bots that fill every field, and excluded from tab order. */
.con-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* What happens next                                                    */
/* -------------------------------------------------------------------- */

.con-next {
	padding-block: var(--sc-space-400);
	border-top: 1px solid var(--sc-slate-200);
}

.con-next__heading {
	margin-bottom: var(--sc-space-300);
}

.con-next__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sc-space-300);
}

.con-next__item {
	position: relative;
	padding-top: var(--sc-space-200);
	border-top: 2px solid var(--sc-slate-200);
}

.con-next__item::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 34px;
	height: 2px;
	background: var(--sc-blue);
}

.con-next__num {
	display: block;
	font-family: var(--sc-font-mono);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--sc-blue);
	margin-bottom: var(--sc-space-100);
}

.con-next__item p {
	font-family: var(--sc-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--sc-text-onlight);
	line-height: 1.35;
}

/* -------------------------------------------------------------------- */
/* Responsive — tablet (<=1024px)                                       */
/* -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.con-hero {
		padding: var(--sc-space-400) 0 var(--sc-space-300);
	}

	.con-contact {
		padding-block: var(--sc-space-400);
	}

	.con-contact__row {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"reassurance"
			"form"
			"details";
		row-gap: var(--sc-space-400);
	}

	.con-contact__reassurance {
		margin-top: 0;
	}

	.con-contact__details {
		margin-top: 0;
	}

	.con-next {
		padding-block: var(--sc-space-300);
	}
}

/* -------------------------------------------------------------------- */
/* Responsive — phone (<=600px)                                         */
/* -------------------------------------------------------------------- */

@media (max-width: 600px) {
	.con-hero {
		padding: var(--sc-space-300) 0 var(--sc-space-200);
	}

	.con-hero__title {
		max-width: 100%;
	}

	.con-contact {
		padding-block: var(--sc-space-300);
	}

	.con-contact__row {
		gap: var(--sc-space-300);
	}

	.con-form,
	.con-form__success {
		padding: var(--sc-space-200);
	}

	.con-form__row {
		grid-template-columns: 1fr;
	}

	.con-next__row {
		grid-template-columns: 1fr;
		gap: var(--sc-space-200);
	}

	.con-next__item p {
		font-size: 17px;
	}

	.con-contact__detail a {
		font-size: 19px;
	}

	.con-form__submit.c-btn--primary {
		padding: 15px 24px;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive — small phone (<=480px)                                   */
/* -------------------------------------------------------------------- */

@media (max-width: 480px) {
	.con-hero {
		padding: var(--sc-space-300) 0 var(--sc-space-200);
	}

	.con-form,
	.con-form__success {
		padding: var(--sc-space-200) var(--sc-space-100);
		border-radius: var(--sc-radius-lg);
	}

	.con-contact__detail a {
		font-size: 18px;
	}

	.con-contact__detail-icon {
		width: 36px;
		height: 36px;
	}
}