/* ==========================================================================
 * Component: 07 — Proof (.imea-proof)
 * People rail with reconstructed connector curve on the left, featured
 * quote on the right, compliance badge strip below.
 * ========================================================================== */
.imea-proof {
	padding: 96px 0;
	 /* section base */
	color: var(--text-color);
	background: linear-gradient(180deg, #0F1412 0%, #060D0A 100%);
}
.imea-proof__header { margin-bottom: 48px; }
.imea-proof__eyebrow {
	margin: 0 0 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--base-color);
}
.imea-proof__title {
	margin: 0;
	font-size: 48px;
	line-height: 1.16;
	font-weight: 400;
	letter-spacing: -0.01em;
	background-image: linear-gradient(180deg, #FFFFFF 25%, #0C1711 343.26%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* --- body: rail + quote -------------------------------------------------- */
.imea-proof__body {
	margin-bottom: 56px; /* grid via Bootstrap .row / .col-lg-6 */
}
.imea-proof__rail { position: relative; padding-left: 24px; }
.imea-proof__curve {
	position: absolute;
	left: 0;
	top: -10px;
	width: 120px;
	height: calc(100% + 20px);
	color: var(--secondary-color);
	pointer-events: none;
}
.imea-proof__people {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 34px;
}
.imea-proof__person {
	gap: 16px; /* display via .d-flex .align-items-center */
}
.imea-proof__person--offset { margin-left: 56px; } /* follows the curve bend */
.imea-proof__avatar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: #10150f; /* avatar plate */
	overflow: hidden;
}
.imea-proof__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.imea-proof__avatar-fallback {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--secondary-color);
}
.imea-proof__person-info { display: flex; flex-direction: column; gap: 2px; }
.imea-proof__person-name {font-size: 12px;font-weight: 400;color: #f7f7f7;}
.imea-proof__person-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }
/* --- quote --------------------------------------------------------------------- */
.imea-proof__quote { margin: 0; position: relative; padding-left: 40px; }
.imea-proof__quote-mark {
	position: absolute;
	left: 0;
	top: -14px;
	font-size: 3.4rem;
	line-height: 1;
	font-weight: 700;
	color: var(--secondary-color);
}
.imea-proof__quote blockquote {
	margin: 0;
	font-size: 32px;
	line-height: 46px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
}
/* --- badge strip ------------------------------------------------------------------ */
.imea-proof__badges {
	gap: 10px; /* display via .d-flex .flex-wrap */
}
.imea-proof__badge {
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 8px;
	font-size: 14px;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.65);
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.imea-proof__badge:hover {
	border-color: rgba(214, 255, 65, 0.45);
	color: var(--secondary-color);
}

/* ==========================================================================
 * ADDITIVE 2 — match Section.svg design: arc alignment, active name,
 * full-width badge strip.
 * ========================================================================== */
.imea-proof__curve { width: 240px; left: -40px; }
.imea-proof__rail { padding-left: 64px; }
.imea-proof__person--offset { margin-left: 64px; }

/* active slide: larger, whiter name (avatar scale already handled) */
.imea-proof__person-name { transition: font-size 0.3s ease, color 0.3s ease; }
.imea-proof__person[aria-selected="true"] .imea-proof__person-name {
	font-size: 1.15rem;
	color: #fff;
}
.imea-proof__person[aria-selected="true"] .imea-proof__avatar { margin-right: 8px; }

/* badges: evenly spread across the container on desktop */
@media (min-width: 992px) {
	.imea-proof__badges { justify-content: space-between; }
	.imea-proof__badge { text-align: center; }
}

/* ==========================================================================
 * FINAL — deterministic arc rail. Rail has a fixed height on desktop;
 * arc = right half of a CSS ellipse filling that exact box; person rows
 * absolutely pinned at 8% / 50% / 92% with left offsets from the ellipse
 * equation. One variable (--imea-arc-w) scales line + avatars together.
 * ========================================================================== */
.imea-proof__rail {
	position: relative;
	--imea-arc-w: 225px;
	--imea-avatar: 45px;
	height: 420px;
}
.imea-proof__arc {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--imea-arc-w);
	overflow: hidden;
	pointer-events: none;
}
.imea-proof__arc::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: calc(-1 * var(--imea-arc-w));
	border: 3.5px solid #21A55E;
	border-radius: 50%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 35%, #000 65%, transparent 97%);
	mask-image: linear-gradient(to bottom, transparent 3%, #000 35%, #000 65%, transparent 97%);
}

.imea-proof__people { position: static; }
.imea-proof__person {
	position: absolute;
	transform: translateY(-50%);
	margin: 0;
}
/* ellipse x at height t: x = w·√(1−(2t−1)²); avatar center on the line */
.imea-proof__person:nth-child(1) { top: 8%;  left: calc(var(--imea-arc-w) * 0.54 - var(--imea-avatar) / 2); }
.imea-proof__person:nth-child(2) {top: 50%;left: calc(var(--imea-arc-w) * 1.00 - var(--imea-avatar) / 2);}
.imea-proof__person:nth-child(3) { top: 92%; left: calc(var(--imea-arc-w) * 0.54 - var(--imea-avatar) / 2); }

.imea-proof__avatar { width: var(--imea-avatar); height: var(--imea-avatar); }
/* design shows white logo circles — white plate when a logo img is present */
.imea-proof__avatar:has(img) { background: #fff; border-color: transparent; }

/* --- badges: full-width, equal pills, 10px gap --- */
.imea-proof__badges {
	display: flex;
	gap: 10px;
	justify-content: initial;
}
.imea-proof__badge { flex: 1 1 0; text-align: center; white-space: nowrap; }

/* --- mobile: arc off, rows back in normal flow, badges wrap --- */
@media (max-width: 767.98px) {
	.imea-proof__rail { height: auto; }
	.imea-proof__arc {display: none;}
	.imea-proof__person { position: static; transform: none; }
	.imea-proof__people { display: flex; flex-direction: column; gap: 28px; }
	.imea-proof__badges { flex-wrap: wrap; }
	.imea-proof__badge { flex: 1 1 calc(25% - 10px); }
}

/* --- responsive -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.imea-proof { padding: 64px 0; }
	.imea-proof__quote { padding-left: 34px; }
}
@media (max-width: 575.98px) {
	.imea-proof__person--offset { margin-left: 32px; }
}

@media(max-width:768px){
	.imea-proof__quote blockquote {
	    font-size: 18px;
	    line-height: normal;
	    font-weight: 300;
	    margin-bottom: 20px !important;
	}
	.imea-proof__title {
	    font-size: 28px;
	}
	
	.imea-proof__title br {
	    display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.imea-proof__badge { transition: none; }
}

/* ==========================================================================
 * ADDITIVE — testimonial carousel states (v3). Your color pass above is
 * untouched. People are <button role="tab"> slides; aria-selected drives
 * the active state; proof.js swaps the quote via inline opacity (the
 * transition lives here — safe, class exists in the DOM).
 * ========================================================================== */
.imea-proof__person {
	/* button reset — element changed from <li> to <button> for the carousel */
	border: 0;
	padding: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.25s ease;
}
.imea-proof__person:hover,
.imea-proof__person:focus-visible { opacity: 0.85; outline: none; }
.imea-proof__person[aria-selected="true"] { opacity: 1; }

.imea-proof__avatar { transition: transform 0.3s ease, border-color 0.3s ease; }
.imea-proof__person[aria-selected="true"] .imea-proof__avatar {
	transform: scale(1.5);
	border-color: rgba(214, 255, 65, 0.6);
	box-shadow: 0 0 30px -8px var(--lime-glow);
}

.imea-proof__quote blockquote { transition: opacity 0.3s ease; }
/* --- slot-driven positions: active always center (JS assigns data-slot) --- */
.imea-proof__person {
	transition: top 0.45s ease, left 0.45s ease, opacity 0.25s ease;
}
.imea-proof__person[data-slot="top"] { top: 8%;  left: calc(var(--imea-arc-w) * 0.54 - var(--imea-avatar) / 2); }
.imea-proof__person[data-slot="mid"] { top: 50%; left: calc(var(--imea-arc-w) * 1.00 - var(--imea-avatar) / 2); }
.imea-proof__person[data-slot="bot"] { top: 92%; left: calc(var(--imea-arc-w) * 0.54 - var(--imea-avatar) / 2); }
.imea-proof__person[data-slot="off"] { /* 4th+ slides wait invisibly */
	top: 50%;
	left: calc(var(--imea-arc-w) * 1.00 - var(--imea-avatar) / 2);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.imea-proof__person,
	.imea-proof__avatar,
	.imea-proof__quote blockquote { transition: none; }
}

/* ==========================================================================
 * ADDITIVE — MOBILE CAROUSEL (<768px) + DOTS NAV
 * Desktop (the arc) is untouched. On mobile the arc is already hidden; here
 * we finish the job so the block reads as a clean single-testimonial slider:
 *   • quote on top, only the ACTIVE person shown below (no gaps from the
 *     invisible "off" arc rows)
 *   • dot nav (.imea-proof__nav) visible only on mobile
 *   • active avatar/name reset to normal size (the desktop 1.5x scale looks
 *     oversized when it's the only thing on screen)
 * ========================================================================== */

/* dots: hidden on desktop, shown on mobile */
.imea-proof__nav { display: none; }
.imea-proof__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 6px;
}
.imea-proof__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.imea-proof__dot.is-active {
	background: var(--secondary-color);
	transform: scale(1.25);
}

@media (max-width: 767.98px) {
	/* quote first, then the active person, then dots */
	.imea-proof__quote-col { order: -1; }
	.imea-proof__body { margin-bottom: 32px; }

	/* show ONLY the active testimonial — kills the empty gaps from off rows */
	.imea-proof__people {
		gap: 0;
		align-items: center;
		justify-content: center;
		min-height: 64px;
	}
	.imea-proof__person {
		display: none !important;
		justify-content: center;
		opacity: 1 !important;      /* override the arc "off" opacity:0 */
		pointer-events: auto;
	}
	.imea-proof__person[aria-selected="true"] { display: flex !important; }

	/* reset the desktop active scale/name bump for a clean mobile chip */
	.imea-proof__person[aria-selected="true"] .imea-proof__avatar {
		transform: none;
		margin-right: 8px;
	}
	.imea-proof__person[aria-selected="true"] .imea-proof__person-name {
		font-size: 1rem;
	}

	.imea-proof__rail { padding-left: 0; }
	.imea-proof__rail-col { margin-top: 4px; }

	/* dots nav on */
	.imea-proof__nav { display: block; margin-top: 20px; }

	.imea-proof__quote { padding-left: 28px; }
	.imea-proof__quote-mark { top: -8px; font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.imea-proof__dot { transition: none; }
}