.cl-editorial-people { display: none; }

.cl-character-stage {
	isolation: isolate;
	overflow: visible !important;
	position: relative;
	z-index: 6;
}

.cl-character-section {
	isolation: isolate;
	overflow: visible !important;
	position: relative;
	z-index: 5;
}

.cl-editorial-person {
	margin: 0;
	pointer-events: none;
	position: absolute;
	user-select: none;
	z-index: 4;
}

.cl-editorial-person img {
	display: block;
	filter: drop-shadow(0 20px 24px rgba(63, 35, 19, 0.13));
	height: auto;
	max-width: none;
	width: 100%;
}

/* The presenter stands just beyond the hero copy and points back into the
 * primary component. This is intentionally still, apart from its entrance. */
.cl-editorial-person--hero-attached {
	animation: cl-person-arrive 700ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
	bottom: -24px;
	right: clamp(0px, 2vw, 34px);
	width: clamp(190px, 16vw, 260px);
}

/* The seated learner sits on the upper border of a conversion card. */
.cl-editorial-person--seated-attached {
	right: clamp(26px, 5vw, 76px);
	top: 0;
	transform: translateY(-54%);
	width: clamp(175px, 15vw, 235px);
}

/* This is the only continuously floating person: slow and small enough not to
 * compete with reading or calls to action. */
.cl-editorial-person--floating-attached {
	animation: cl-person-float 8.5s ease-in-out infinite;
	right: clamp(2px, 1.5vw, 28px);
	top: clamp(60px, 8vw, 130px);
	width: clamp(145px, 12vw, 195px);
}

/* A still team vignette becomes part of the section flow instead of hovering
 * over copy. Its negative lower margin makes the table meet the next surface. */
.cl-editorial-person--team-attached {
	margin: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 6vw, 6rem) clamp(-4.5rem, -5vw, -2.5rem) auto;
	position: relative;
	width: clamp(300px, 31vw, 470px);
}

/* The analyst lives at the outer edge of a later content grid and points back
 * toward the cards or posts without covering them. */
.cl-editorial-person--analyst-attached {
	bottom: clamp(-54px, -4vw, -26px);
	right: clamp(4px, 2vw, 30px);
	width: clamp(240px, 21vw, 330px);
}

.cl-final-cta.cl-character-stage,
.cl-mock-final.cl-character-stage,
.cl-final.cl-character-stage {
	margin-top: clamp(5rem, 9vw, 8.5rem);
}

.cl-page-hero.cl-character-stage,
.cl-mock-page-hero.cl-character-stage,
.cl-hero.cl-character-stage,
.cl-hero-inner.cl-character-stage {
	overflow: visible;
}

@keyframes cl-person-arrive {
	from { opacity: 0; transform: translate3d(18px, 16px, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cl-person-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
	50% { transform: translate3d(-7px, -16px, 0) rotate(1.2deg); }
}

@media (max-width: 1370px) {
	.cl-editorial-person--hero-attached { opacity: 0.86; right: 4px; width: 190px; }
	.cl-editorial-person--floating-attached { opacity: 0.76; right: 4px; width: 145px; }
}

@media (max-width: 1179px) {
	.cl-editorial-person,
	.cl-editorial-people { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-editorial-person { animation: none !important; }
}

@media print {
	.cl-editorial-person,
	.cl-editorial-people { display: none !important; }
}