/**
 * Lead-capture popup.
 *
 * Two panels: a dark pitch panel carrying the proof, and a light form panel.
 * The split is the point — the left side earns the right to ask, the right side
 * asks. Everything is drawn from tokens.css so the popup reads as part of the
 * site rather than as an overlay bolted on top of it.
 */

/* Scroll lock. Padding compensation stops the page jumping as the bar goes. */
html.aipx-lead-lock {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Shell
 * ------------------------------------------------------------------------ */

.aipx-lead {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: var(--aipx-space-6, 24px);
	font-family: var(--aipx-font-body, 'Roboto', system-ui, sans-serif);
}

.aipx-lead[hidden] {
	display: none;
}

.aipx-lead__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 6, 6, .72);
	backdrop-filter: blur(6px) saturate(120%);
	-webkit-backdrop-filter: blur(6px) saturate(120%);
	opacity: 0;
	transition: opacity .24s ease;
}

.aipx-lead.is-open .aipx-lead__backdrop {
	opacity: 1;
}

.aipx-lead__modal {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	/*
	 * An explicit row track. Without it the row is sized to the taller child's
	 * content and both panels overflow the modal's max-height, which clipped
	 * the logo strip off the bottom of the dark panel.
	 */
	grid-template-rows: minmax(0, 1fr);
	width: min(1060px, 100%);
	max-height: min(88vh, 780px);
	border-radius: 20px;
	overflow: hidden;
	background: var(--aipx-surface, #fff);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .06) inset,
		0 40px 90px -30px rgba(0, 0, 0, .65),
		0 8px 24px -12px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translateY(18px) scale(.985);
	transition: opacity .3s ease, transform .38s cubic-bezier(.2, .7, .2, 1);
}

.aipx-lead.is-open .aipx-lead__modal {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------------------
 * Close
 *
 * Sits over the light panel, so it is dark-on-light and never fights the
 * artwork on the left.
 * ------------------------------------------------------------------------ */

.aipx-lead__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--aipx-border-subtle, #E8E8E8);
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--aipx-text-body, #3A3A3A);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.aipx-lead__close svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.aipx-lead__close:hover,
.aipx-lead__close:focus-visible {
	background: var(--aipx-brand-500, #D52122);
	border-color: var(--aipx-brand-500, #D52122);
	color: #fff;
	transform: rotate(90deg);
}

.aipx-lead__close:focus-visible {
	outline: 2px solid var(--aipx-brand-500, #D52122);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Left: the pitch
 * ------------------------------------------------------------------------ */

.aipx-lead__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--aipx-space-8, 32px);
	padding: 36px 34px 30px;
	background: var(--aipx-dark-bg, #0D0A0A);
	color: var(--aipx-dark-text-body, #B9B2AF);
	/* Grid children default to min-height:auto, which lets tall content push
	   past the modal's max-height instead of being contained by it. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.aipx-lead__aside::-webkit-scrollbar {
	width: 0;
}

/*
 * A single soft brand glow rather than a gradient across the whole panel: it
 * gives the corner some depth without tinting the text behind it.
 */
.aipx-lead__glow {
	position: absolute;
	top: -30%;
	left: -20%;
	width: 90%;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(213, 33, 34, .30) 0%, rgba(213, 33, 34, 0) 68%);
	pointer-events: none;
}

.aipx-lead__pitch {
	position: relative;
}

.aipx-lead__eyebrow {
	display: block;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aipx-brand-glow, #E8312F);
}

.aipx-lead__eyebrow--dark {
	color: var(--aipx-brand-500, #D52122);
}

.aipx-lead__title {
	margin: 0 0 12px;
	font-family: var(--aipx-font-heading, 'Lato', sans-serif);
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -.6px;
	color: var(--aipx-dark-text-heading, #FBF9F8);
	text-wrap: balance;
}

/* The second line carries the emphasis rather than the whole heading. */
.aipx-lead__title em {
	display: block;
	font-style: normal;
	color: var(--aipx-brand-glow, #E8312F);
}

.aipx-lead__sub {
	margin: 0;
	max-width: 34ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--aipx-dark-text-muted, #A39C98);
}

/* --- Rotating reviews ---------------------------------------------------- */

.aipx-lead__quotes {
	position: relative;
	flex: 1 1 auto;
	display: grid;
	/* One cell: the quotes stack so a cross-fade has no layout shift. */
	grid-template-rows: 1fr auto;
	min-height: 0;
	overflow: hidden;
}

.aipx-lead__mark {
	width: 26px;
	height: 20px;
	margin-bottom: 14px;
	fill: rgba(232, 49, 47, .38);
	grid-row: 1;
	grid-column: 1;
	align-self: start;
}

.aipx-lead__quote {
	grid-row: 1;
	grid-column: 1;
	margin: 34px 0 0;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .45s ease, transform .45s ease;
	pointer-events: none;
}

.aipx-lead__quote.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.aipx-lead__quote blockquote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-family: var(--aipx-font-heading, 'Lato', sans-serif);
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--aipx-dark-text-heading, #FBF9F8);
}

.aipx-lead__quote figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aipx-lead__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--aipx-brand-500, #D52122);
	color: #fff;
	font-family: var(--aipx-font-heading, 'Lato', sans-serif);
	font-weight: 700;
	font-size: 16px;
	flex: 0 0 auto;
}

.aipx-lead__who {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.aipx-lead__who b {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--aipx-dark-text-heading, #FBF9F8);
}

.aipx-lead__who em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--aipx-dark-text-muted, #A39C98);
}

.aipx-lead__dots {
	grid-row: 2;
	grid-column: 1;
	display: flex;
	gap: 7px;
	margin-top: 20px;
}

.aipx-lead__dot {
	width: 22px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .18);
	cursor: pointer;
	transition: background .2s ease, width .2s ease;
}

.aipx-lead__dot.is-active {
	width: 34px;
	background: var(--aipx-brand-glow, #E8312F);
}

.aipx-lead__dot:focus-visible {
	outline: 2px solid var(--aipx-brand-glow, #E8312F);
	outline-offset: 3px;
}

/* --- Logos --------------------------------------------------------------- */

.aipx-lead__logos {
	position: relative;
	padding-top: 22px;
	border-top: 1px solid var(--aipx-dark-border, rgba(255, 255, 255, .09));
}

.aipx-lead__logos-label {
	display: block;
	margin-bottom: 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aipx-dark-eyebrow, #6E6764);
}

.aipx-lead__logos-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
}

.aipx-lead__logos-row img {
	height: 20px;
	width: auto;
	max-width: 104px;
	object-fit: contain;
	filter: grayscale(1) brightness(2.4);
	opacity: .5;
	transition: opacity .2s ease;
}

.aipx-lead__logos-row:hover img {
	opacity: .8;
}

/* ---------------------------------------------------------------------------
 * Right: the form
 * ------------------------------------------------------------------------ */

.aipx-lead__panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 40px 40px 36px;
	background: var(--aipx-surface, #fff);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.aipx-lead__head {
	margin-bottom: 22px;
}

.aipx-lead__head h3 {
	margin: 0 0 8px;
	font-family: var(--aipx-font-heading, 'Lato', sans-serif);
	font-size: clamp(22px, 2vw, 27px);
	line-height: 1.24;
	font-weight: 700;
	letter-spacing: -.4px;
	color: var(--aipx-text-heading, #1D1D1D);
}

.aipx-lead__head p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--aipx-text-muted, #5C5854);
}

/* --- Kadence form, restyled ---------------------------------------------
 *
 * Scoped to .aipx-lead__form so the contact page keeps its own styling. The
 * plugin prints per-field inline CSS after this file, so the declarations that
 * must win carry !important; the rest are left to lose gracefully.
 * ------------------------------------------------------------------------ */

/*
 * Six tracks, the same geometry the contact column uses, so the form's own
 * aipx-f-half / -dial / -phone classes lay out here without being redefined.
 * Kadence renders the form as a flex column by default, which is why every
 * field was full width and the panel three fields too tall.
 */
.aipx-lead__form .kb-advanced-form {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 12px;
	row-gap: 14px;
	align-items: end;
}

.aipx-lead__form .kb-adv-form-field {
	margin-bottom: 0 !important;
	min-width: 0;
}

/* Anything without a span class runs the full width. */
.aipx-lead__form .kb-adv-form-field,
.aipx-lead__form .kb-submit-field {
	grid-column: 1 / -1;
}

.aipx-lead__form .aipx-f-half {
	grid-column: span 3;
}

.aipx-lead__form .aipx-f-dial {
	grid-column: span 2;
}

.aipx-lead__form .aipx-f-phone {
	grid-column: span 4;
}

.aipx-lead__form label,
.aipx-lead__form .kb-adv-form-label {
	display: block;
	margin-bottom: 6px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
	color: var(--aipx-text-heading, #1D1D1D) !important;
}

.aipx-lead__form input[type="text"],
.aipx-lead__form input[type="email"],
.aipx-lead__form input[type="tel"],
.aipx-lead__form input[type="url"],
.aipx-lead__form input[type="number"],
.aipx-lead__form select,
.aipx-lead__form textarea {
	width: 100%;
	padding: 11px 13px !important;
	border: 1px solid var(--aipx-border, #D1D1D1) !important;
	border-radius: 9px !important;
	background: var(--aipx-neutral-50, #F5F5F5) !important;
	font-family: var(--aipx-font-body, 'Roboto', sans-serif) !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	color: var(--aipx-text-body, #3A3A3A) !important;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.aipx-lead__form input::placeholder,
.aipx-lead__form textarea::placeholder {
	color: var(--aipx-neutral-400, #9A9A9A);
}

.aipx-lead__form input:focus,
.aipx-lead__form select:focus,
.aipx-lead__form textarea:focus {
	outline: 0;
	background: var(--aipx-surface, #fff) !important;
	border-color: var(--aipx-brand-500, #D52122) !important;
	box-shadow: 0 0 0 3px rgba(213, 33, 34, .14) !important;
}

.aipx-lead__form textarea {
	min-height: 104px !important;
	resize: vertical;
}

/* The file row reads as a control rather than as a browser default. */
.aipx-lead__form input[type="file"] {
	width: 100%;
	padding: 9px 11px !important;
	border: 1px dashed var(--aipx-border, #D1D1D1) !important;
	border-radius: 9px !important;
	background: var(--aipx-neutral-50, #F5F5F5) !important;
	font-size: 13px !important;
	color: var(--aipx-text-muted, #5C5854) !important;
	cursor: pointer;
}

.aipx-lead__form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 12px;
	border: 1px solid var(--aipx-border, #D1D1D1);
	border-radius: 6px;
	background: var(--aipx-surface, #fff);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aipx-text-heading, #1D1D1D);
	cursor: pointer;
}

/*
 * The accept row.
 *
 * Kadence puts the sentence in a <legend> and leaves the <label> empty, so by
 * default the text sits on one line and an unexplained checkbox sits under it —
 * which is how it renders on production. A legend cannot reliably be a flex or
 * grid item across browsers, so the box is positioned into the gutter instead
 * and the empty label is stretched over the whole row to make the text
 * clickable.
 */
.aipx-lead__form .wp-block-kadence-advanced-form-accept {
	/*
	 * The positioning context is this outer div, not the fieldset: a <legend>
	 * renders against the fieldset's top border rather than inside its content
	 * box, so anything positioned against the fieldset lands a line too low.
	 */
	position: relative;
	padding-left: 27px;
}

.aipx-lead__form .wp-block-kadence-advanced-form-accept .kb-radio-check-item-wrap {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.aipx-lead__form .wp-block-kadence-advanced-form-accept legend.kb-adv-form-label {
	display: block;
	float: none;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--aipx-text-muted, #5C5854) !important;
}

.aipx-lead__form .wp-block-kadence-advanced-form-accept input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 1px;
	margin: 0 !important;
}

/* Stretched over the row so the sentence toggles the box. */
.aipx-lead__form .wp-block-kadence-advanced-form-accept .kb-radio-check-item label {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	cursor: pointer;
}

.aipx-lead__form input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 1px 0 0 !important;
	flex: 0 0 auto;
	accent-color: var(--aipx-brand-500, #D52122);
	cursor: pointer;
}

.aipx-lead__form .kb-adv-form-submit,
.aipx-lead__form button[type="submit"],
.aipx-lead__form .kb-forms-submit {
	width: 100%;
	margin-top: 6px;
	padding: 13px 22px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--aipx-brand-500, #D52122) !important;
	font-family: var(--aipx-font-heading, 'Lato', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	color: #fff !important;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.aipx-lead__form .kb-adv-form-submit:hover,
.aipx-lead__form button[type="submit"]:hover,
.aipx-lead__form .kb-forms-submit:hover {
	background: var(--aipx-brand-600, #B81B1C) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(213, 33, 34, .6);
}

.aipx-lead__form .kb-adv-form-submit:focus-visible,
.aipx-lead__form button[type="submit"]:focus-visible {
	outline: 2px solid var(--aipx-brand-700, #961617);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Below the breakpoint the pitch panel becomes a short header rather than
 * disappearing: the review is the reason the form gets filled in.
 * ------------------------------------------------------------------------ */

@media (max-width: 880px) {
	.aipx-lead {
		padding: 0;
		place-items: end center;
	}

	.aipx-lead__modal {
		grid-template-columns: minmax(0, 1fr);
		/*
		 * Two rows once the panels stack. The single-track rule that caps the
		 * desktop row would otherwise drop both panels into the same cell and
		 * lay the form over the pitch.
		 */
		grid-template-rows: auto minmax(0, 1fr);
		width: 100%;
		max-height: 94vh;
		border-radius: 18px 18px 0 0;
		transform: translateY(28px);
	}

	.aipx-lead__aside {
		gap: 20px;
		padding: 30px 24px 24px;
	}

	.aipx-lead__quotes {
		display: none;
	}

	.aipx-lead__panel {
		padding: 26px 24px 30px;
	}

	.aipx-lead__logos-row img {
		height: 17px;
	}
}

@media (max-width: 520px) {
	.aipx-lead__logos {
		display: none;
	}

	.aipx-lead__sub {
		display: none;
	}

	.aipx-lead__form .aipx-f-half,
	.aipx-lead__form .aipx-f-dial,
	.aipx-lead__form .aipx-f-phone {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------------
 * Motion preference
 * ------------------------------------------------------------------------ */

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

	.aipx-lead__backdrop,
	.aipx-lead__modal,
	.aipx-lead__quote,
	.aipx-lead__close,
	.aipx-lead__dot {
		transition: none !important;
	}

	.aipx-lead__modal {
		transform: none !important;
	}

	.aipx-lead__close:hover {
		transform: none !important;
	}
}