/* ===========================================================
   TextCRM — Contact / Get in Touch
   Centered head (chat-icon eyebrow chip + two-line headline +
   paragraph) above a two-column body: a narrower left "contact
   info" card (icon/title/description rows split by hairline
   rules) and a wider right "Send us a message" form card.
   Palette / type / radii / shadows / hover mirror the Value Props,
   Inner Hero and Roles widgets (#0b1326 surface, #00f5a0 accent,
   glass cards, white-tinted borders, Inter type).
   =========================================================== */

.textcrm-contact {
	--tcrm-contact-accent:       #00f5a0;
	--tcrm-contact-accent-hover: #5effc4;

	position: relative;
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #f3f4f6;
	background-color: #0b1326;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	overflow: hidden;
}
.textcrm-contact *, .textcrm-contact *::before, .textcrm-contact *::after { box-sizing: border-box; }

/* Heading glow — the same signature teal halo the Inner Hero uses
   (rgba(68,226,205,.19) blurred 130px), so the Contact heading carries the
   same glow as the other inner pages. Drawn as a pseudo-element behind the
   z-index:1 container. */
.textcrm-contact::before {
	content: "";
	position: absolute;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
	width: min(920px, 100%);
	height: 560px;
	background: rgba(68, 226, 205, 0.19);
	filter: blur(130px);
	border-radius: 9999px;
	pointer-events: none;
	z-index: 0;
}

/* ===========================================================
   Layout
   =========================================================== */
.textcrm-contact__wrap {
	max-width: 1200px;
	margin: 0 auto;
	/* Top padding = 128px clears the fixed site header at the same distance as
	   the Inner Hero (pt-32), so the navbar → eyebrow gap matches other pages. */
	padding: 128px clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5.5rem);
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Heading block
   =========================================================== */
.textcrm-contact__head {
	margin: 0 auto 56px;
	max-width: 680px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Eyebrow chip — mirrors the Inner Hero badge pill. */
.textcrm-contact .textcrm-contact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px 6px 14px;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tcrm-contact-accent);
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1;
}

.textcrm-contact__eyebrowIcon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	color: var(--tcrm-contact-accent);
	flex-shrink: 0;
	line-height: 0;
}
.textcrm-contact__eyebrowIcon svg { width: 16px; height: 16px; display: block; }

.textcrm-contact .textcrm-contact__eyebrowText {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
	line-height: 1;
}

.textcrm-contact .textcrm-contact__title {
	font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);   /* 36 → 56px */
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.1;
	margin: 0;
	color: #ffffff;
	text-wrap: balance;
}
.textcrm-contact__titleLead,
.textcrm-contact__titleAccent { display: block; }

.textcrm-contact .textcrm-contact__titleAccent {
	color: var(--tcrm-contact-accent);
	font-weight: 700;
	font-style: normal;
}

.textcrm-contact .textcrm-contact__subtitle {
	margin: 20px 0 0;
	color: #9ca3af;
	font-size: 18px;                  /* body-lg — matches hero / pricing / integrations */
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-weight: 400;
	max-width: 520px;
	text-wrap: balance;
}

/* ===========================================================
   Two-column body
   =========================================================== */
.textcrm-contact__body {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2rem);
	align-items: stretch;
}

/* ----- Shared glass card surface ----- */
.textcrm-contact__card {
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -16px rgba(0, 0, 0, 0.5);
}

/* ===========================================================
   Left — contact info card
   =========================================================== */
.textcrm-contact__card--info {
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.875rem);
}

.textcrm-contact__infoList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.textcrm-contact__infoItem {
	display: flex;
	align-items: flex-start;
	gap: clamp(.875rem, 1.4vw, 1.125rem);
	padding: clamp(1.125rem, 1.8vw, 1.5rem) 0;
}
.textcrm-contact__infoItem + .textcrm-contact__infoItem {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.textcrm-contact__infoItem:first-child { padding-top: 0; }
.textcrm-contact__infoItem:last-child  { padding-bottom: 0; }

.textcrm-contact__infoIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background-color: rgba(0, 245, 160, 0.1);
	color: var(--tcrm-contact-accent);
	flex-shrink: 0;
	transition: transform 0.25s cubic-bezier(.16, 1, .3, 1);
}
.textcrm-contact__infoIcon svg { width: 24px; height: 24px; display: block; }
.textcrm-contact__infoItem:hover .textcrm-contact__infoIcon {
	transform: scale(1.05) rotate(-3deg);
}

.textcrm-contact__infoBody {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 2px;
}

.textcrm-contact .textcrm-contact__infoTitle {
	font-size: 1.0625rem;             /* 17px */
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	margin: 0;
	color: #ffffff;
}

.textcrm-contact .textcrm-contact__infoDesc {
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	color: #9ca3af;
	font-weight: 400;
}

.textcrm-contact .textcrm-contact__infoLink {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tcrm-contact-accent);
	text-decoration: none;
	width: fit-content;
	transition: color 0.2s ease;
}
a.textcrm-contact__infoLink:hover {
	color: var(--tcrm-contact-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===========================================================
   Right — message form card
   =========================================================== */
.textcrm-contact__card--form {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
}

.textcrm-contact .textcrm-contact__formTitle {
	font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0;
	color: #ffffff;
}

.textcrm-contact .textcrm-contact__formSubtitle {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #9ca3af;
	font-weight: 400;
}

.textcrm-contact__form {
	margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: clamp(.75rem, 1.4vw, 1rem);
}

.textcrm-contact__field { display: block; }

.textcrm-contact__field--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(.75rem, 1.4vw, 1rem);
}

/* Inputs — dark glass fill, hairline border sharpening to brand green on focus. */
.textcrm-contact .textcrm-contact__input {
	width: 100%;
	display: block;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #f3f4f6;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 13px 15px;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.textcrm-contact .textcrm-contact__input::placeholder {
	color: #6b7280;
	opacity: 1;
}

.textcrm-contact .textcrm-contact__input:focus,
.textcrm-contact .textcrm-contact__input:focus-visible {
	outline: none;
	border-color: var(--tcrm-contact-accent);
	box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.15);
	background-color: rgba(255, 255, 255, 0.05);
}

.textcrm-contact .textcrm-contact__input--textarea {
	resize: vertical;
	min-height: 132px;
}

/* Invalid state — only after a submit attempt (see contact-widget.js). */
.textcrm-contact__form.is-validated .textcrm-contact__input:invalid {
	border-color: #f87171;
}

/* ----- Submit button — TextCRM primary ----- */
.textcrm-contact .textcrm-contact__submit {
	margin-top: clamp(.25rem, 1vw, .5rem);
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 22px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	color: #000000;
	background-color: var(--tcrm-contact-accent);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		opacity 0.2s ease;
}
.textcrm-contact .textcrm-contact__submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 20px rgba(0, 245, 160, 0.4);
}
.textcrm-contact .textcrm-contact__submit:active { transform: translateY(0); }
.textcrm-contact .textcrm-contact__submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 245, 160, 0.35);
}
.textcrm-contact__submitIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.textcrm-contact__submitIcon svg { width: 18px; height: 18px; display: block; }

/* ----- Honeypot — visible to bots only ----- */
.textcrm-contact__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ----- Consent checkbox ----- */
.textcrm-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #9ca3af;
	cursor: pointer;
}
.textcrm-contact__consentInput {
	margin: 3px 0 0;
	width: 16px;
	height: 16px;
	accent-color: var(--tcrm-contact-accent);
	flex: 0 0 auto;
}
.textcrm-contact__consentText a { color: var(--tcrm-contact-accent); }
.textcrm-contact__form.is-validated .textcrm-contact__consentInput:invalid + .textcrm-contact__consentText {
	color: #f87171;
}

/* ----- Inline field-level error ----- */
.textcrm-contact__fieldError {
	margin: 6px 2px 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: #f87171;
}
.textcrm-contact__field--error .textcrm-contact__input { border-color: #f87171; }

/* ----- Submit button — loading state ----- */
.textcrm-contact__submitSpinner {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: textcrmContactSpin .7s linear infinite;
}
.textcrm-contact__form.is-sending .textcrm-contact__submit { opacity: .8; cursor: progress; }
.textcrm-contact__form.is-sending .textcrm-contact__submitIcon { display: none; }
.textcrm-contact__form.is-sending .textcrm-contact__submitSpinner { display: inline-block; }
@keyframes textcrmContactSpin {
	to { transform: rotate(360deg); }
}

/* ----- Inline status note (success + error) ----- */
.textcrm-contact__formNote {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 600;
	text-align: center;
	display: none;
}
.textcrm-contact__formNote--success { color: var(--tcrm-contact-accent); }
.textcrm-contact__formNote--error   { color: #f87171; }
.textcrm-contact__form.is-sent  .textcrm-contact__formNote--success { display: block; }
.textcrm-contact__form.is-error .textcrm-contact__formNote--error   { display: block; }

/* ===========================================================
   Responsive
   =========================================================== */

/* Tablet — stack the two cards. */
@media (max-width: 860px) {
	.textcrm-contact__body {
		grid-template-columns: 1fr;
		max-width: 600px;
	}
}

/* Phone — tighten paddings and the heading. */
@media (max-width: 600px) {
	.textcrm-contact__wrap {
		padding: 112px clamp(1rem, 5vw, 1.5rem) clamp(2.5rem, 8vw, 4rem);
	}
	.textcrm-contact__head { margin-bottom: 40px; }

	.textcrm-contact .textcrm-contact__title {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}

	.textcrm-contact .textcrm-contact__subtitle { font-size: 16px; }

	.textcrm-contact__field--split {
		grid-template-columns: 1fr;
	}

	.textcrm-contact__infoIcon {
		width: 46px;
		height: 46px;
	}
	.textcrm-contact__infoIcon svg { width: 22px; height: 22px; }
}

/* Reduced-motion — drop hover transforms. */
@media (prefers-reduced-motion: reduce) {
	.textcrm-contact__infoItem:hover .textcrm-contact__infoIcon { transform: none; }
	.textcrm-contact .textcrm-contact__submit:hover { transform: none; }
	.textcrm-contact__infoIcon,
	.textcrm-contact .textcrm-contact__submit,
	.textcrm-contact .textcrm-contact__input { transition: none; }
}