/* Early Capture Popup. Desktop geometry follows the approved mockup:
 * the content is a full-height right-anchored column that slides in;
 * the semi-circle is pure background drawn with ::after, so content
 * can never be clipped by the curve. All inner geometry derives from
 * the circle (vh units) — the circle is 100vh, so the layout scales
 * with height on any aspect ratio. Mobile sheet follows the brief
 * (no mobile mockup supplied). */
.vx-capture {
	position: fixed;
	inset: 0;
	z-index: 500000;
	pointer-events: none;
	visibility: hidden;
}
.vx-capture.is-open {
	visibility: visible;
}
.vx-capture.is-open .vx-capture__shape {
	pointer-events: auto;
}
.vx-capture__shape {
	position: absolute;
	color: #2c3428;
	overflow: visible;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 600ms;
}

/* Desktop + landscape tablet: content column slides from the right,
 * sage circle sits behind it as ::after background. */
@media (min-width: 1024px) and (orientation: landscape) {
	.vx-capture__shape {
		top: 0;
		right: 0;
		height: 100vh;
		min-height: 480px;
		width: 36vw;
		transform: translateX(100%);
		padding: clamp(20px, 6vh, 64px) 4vh clamp(20px, 6vh, 64px) 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.vx-capture.is-open .vx-capture__shape {
		transform: translateX(0);
	}
	/* Sage circle: 100vh diameter centred on the right edge middle,
   * but never smaller than 900px — on short viewports the circle
   * outgrows the screen instead of shrinking the design with it.
   * Content widths below are fitted inside its arc at every height. */
	.vx-capture__shape::after {
		content: '';
		position: absolute;
		width: 110vh;
		height: 100vh;
		min-width: 900px;
		min-height: 900px;
		left: 100%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #9fa18b;
		border-radius: 50%;
		z-index: -1;
		pointer-events: none;
	}
	.vx-capture__shape .vx-capture__close {
		top: clamp(16px, 3vh, 32px);
		right: clamp(16px, 3vh, 32px);
	}
	/* Content widths in vh, fitted inside the 100vh-circle arc with
   * margin at every height: heading 26vh, copy 36vh, form 26vh.
   * min() with 100% guards tall portrait viewports (1024x1366 etc.)
   * where 40vh would exceed the 36vw column and overflow the shape. */
	.vx-capture__heading {
		width: min(40vh, 100%);
	}
	.vx-capture__copy {
		width: min(40vh, 100%);
	}
	.vx-capture__form {
		width: min(40vh, 100%);
	}
}
/* Bottom sheet with an elliptical top edge (per brief), sliding from the bottom.
 * Narrow viewports and ALL portrait orientations land here, so this query
 * complements the desktop one with no gaps (e.g. 1024x1366 iPad portrait). */
@media (max-width: 1023.98px), (orientation: portrait) {
	.vx-capture__shape {
		left: 0;
		right: 0;
		bottom: 0;
		min-height: 70dvh;
		max-height: 100%;
		height: auto;
		background: #9fa18b;
		border-radius: 50% 50% 0 0 / 20% 20% 0 0;
		transform: translateY(100%);
		padding: clamp(20px, 5vh, 48px) clamp(20px, 6vw, 64px) clamp(64px, 10vh, 96px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow-y: auto;
	}
	.vx-capture.is-open .vx-capture__shape {
		transform: translateY(0);
	}
	/* Close lives in flow at the top of the sheet. */
	.vx-capture__shape .vx-capture__close {
		top: 70px;
	}
	/* Mobile alignment: centred heading, full-width copy and form. */
	.vx-capture__shape .vx-capture__heading {
		width: 100%;
		text-align: center;
	}
	.vx-capture__copy {
		width: 100%;
	}
	.vx-capture__form {
		width: 100%;
		margin-left: 0;
	}
	/* Mobile type: fixed pixels, no viewport scaling. Specificity is
	 * bumped with .vx-capture so these beat the later base rules. */
	.vx-capture__shape .vx-capture__heading {
		font-size: 30px;
		line-height: 1.15;
		margin-bottom: 16px;
	}
	.vx-capture__shape .vx-capture__copy {
		font-size: 15px;
		line-height: 1.5;
	}
	.vx-capture .vx-capture__shape .vx-capture__form .form-group {
		margin-bottom: 18px;
	}
	.vx-capture .vx-capture__shape .vx-capture__form .form-group .form-label {
		font-size: 13px;
		line-height: 18px;
	}
	.vx-capture__shape .vx-capture__form .vx-capture__submit {
		font-size: 16px;
		line-height: 1.3;
		padding: 15px 20px;
	}
}
/* Mobile landscape: compact sheet, internal scroll if required. */
@media (max-height: 500px) and (orientation: landscape) {
	.vx-capture__shape {
		height: 92%;
		padding: 16px 24px 70px;
	}
}
/* NOTE: no prefers-reduced-motion kill-switch by owner decision —
 * the slide animation always plays on every device. */
.vx-capture__heading {
	font-family: 'GT Sectra Display', serif;
	color: #e4e2dc;
	text-align: right;
	font-size: clamp(26px, 5.5vh, 52px);
	line-height: 1.12;
	margin: 0 0 3vh auto;
}
.vx-capture__copy {
	font-family: 'Sofia Pro', sans-serif;
	color: #2c3428;
	font-size: clamp(13px, 2vh, 16px);
	line-height: 1.5;
	margin: 0 0 3vh auto;
}
.vx-capture__copy ul {
	list-style: disc;
	padding-left: 1.2em;
	margin: 0.6em 0 0;
}
.vx-capture__copy li {
	margin-bottom: 0.35em;
}
.vx-capture__copy li::marker {
	font-size: 0.8em;
}
.vx-capture__form {
	margin-left: auto;
}
/* Structural wrapper around heading+copy+form. display:contents keeps
 * the accepted layout pixel-identical; JS hides the whole block on submit. */
.vx-capture__content {
	display: contents;
}
/* Static labels above the underlines (per mockup), overriding the
 * floating-label rules from the contact form. Higher specificity wins. */
.vx-capture__shape .vx-capture__form .form-group {
}
.vx-capture__shape .vx-capture__form .form-group .form-label {
	color: #e4e2dc;
	z-index: 1;
}

.vx-capture__shape .vx-capture__form .form-group .form-input {
	border-bottom-color: #e4e2dc;
	color: #e4e2dc;
}
/* Chrome autofill paints its own pale background that ignores
 * background-color — suppress it so the sage shows through. */
.vx-capture__shape .vx-capture__form .form-group .form-input:-webkit-autofill,
.vx-capture__shape .vx-capture__form .form-group .form-input:-webkit-autofill:hover,
.vx-capture__shape .vx-capture__form .form-group .form-input:-webkit-autofill:focus,
.vx-capture__shape .vx-capture__form .form-group .form-input:-webkit-autofill:active {
	-webkit-text-fill-color: #e4e2dc;
	caret-color: #e4e2dc;
	-webkit-box-shadow: 0 0 0 1000px transparent inset;
	box-shadow: 0 0 0 1000px transparent inset;
	transition: background-color 600000s ease-in-out 0s;
}
.vx-capture__form .vx-capture__submit {
	background: #e4e2dc;
	color: #2c3428;
	font-family: 'Sofia Pro', sans-serif;
	line-height: 1.3;
	cursor: pointer;
	display: block;
	width: 100%;
	padding: 19px 20px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid #9fa18b;
	border-radius: 4px;
	-webkit-transition: 0.3s linear;
	transition: 0.3s linear;
}
.vx-capture__form .vx-capture__submit:hover {
	background: #e4e2dc;
	color: #2c3428;
}
.vx-capture__form .vx-capture__submit:disabled {
	opacity: 0.7;
	cursor: default;
}
/* Invalid fields (theme uses #8C2F39 for these). */
.vx-capture__shape .vx-capture__form .form-group .form-input.is-invalid {
	border-bottom-color: #8c2f39;
}
/* Sending state: spinner at the right edge of the button. */
.vx-capture__form .vx-capture__submit.is-loading {
	position: relative;
	pointer-events: none;
}
.vx-capture__form .vx-capture__submit.is-loading::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid rgba(44, 52, 40, 0.3);
	border-top-color: #2c3428;
	border-radius: 50%;
	animation: vx-spin 0.7s linear infinite;
}
@keyframes vx-spin {
	to {
		transform: rotate(360deg);
	}
}
.vx-capture__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #e4e2dc;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}