/* ==========================================================================
   Homepage Journey Section CSS
   Implements the approved "gold spine + bridge plaque" concept: a continuous
   vertical thread through each chapter, with a floating connective line at
   every seam that overlaps both chapters via negative margin.
   This is exactly the piece flagged in the implementation plan as requiring
   hand-written CSS in a custom Elementor section, rather than being
   achievable through standard Elementor widgets alone.

   USAGE IN ELEMENTOR:
   - Build each "chapter" as its own Elementor Section
   - Add the CSS class "institute-chapter" to each chapter section (Advanced tab -> CSS Classes)
   - Add "institute-bridge" to a small Text Editor widget placed between two
     chapter sections (as its own thin section) for the connective line
   - Set each chapter section's background color directly in Elementor per
     the approved chapter sequence (dark / warm-white / dark alternating)
   ========================================================================== */

.institute-chapter {
	border-inline-start: 2px solid var(--color-accent-gold);
	margin-inline-start: 34px;
	padding: 30px 28px;
}

.institute-chapter .chapter-number {
	font-size: 11px;
	letter-spacing: 2px;
	margin-block-end: 10px;
	/* color set per-chapter in Elementor: gold on dark backgrounds, amber-gold on light */
}

.institute-bridge {
	position: relative;
	z-index: 2;
	background: var(--color-surface-page);
	border-block: 1px solid var(--color-accent-gold);
	margin-block: -16px;
	margin-inline-start: 34px;
	padding: 10px 26px;
	font-size: 12.5px;
	font-style: italic;
	color: var(--color-neutral-600);
}

/* The floating credential/stat card that overlaps a chapter boundary
   (used once in the "Trust" chapter per the approved concept - a signature
   device, not to be repeated more than 2-3 times per page or it loses impact) */
.institute-floating-card {
	transition: transform var(--motion-duration) var(--motion-ease);
	display: inline-block;
}
.institute-floating-card:hover {
	transform: translateY(-3px);
}

/* The opening "threshold" panel - deliberately no CTA, no nav clutter,
   just a single statement, full-bleed dark background */
.institute-threshold {
	text-align: center;
	padding-block: var(--space-8) var(--space-6);
}
.institute-threshold .eyebrow {
	font-size: 11px;
	letter-spacing: 3px;
	margin-block-end: 20px;
}
.institute-threshold .statement {
	font-size: 22px;
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	max-width: 420px;
	margin-inline: auto;
}

@media (max-width: 767px) {
	.institute-chapter {
		margin-inline-start: 18px;
		padding: 22px 18px;
	}
	.institute-bridge {
		margin-inline-start: 18px;
		padding: 10px 18px;
		font-size: 11.5px;
	}
	.institute-threshold .statement {
		font-size: 18px;
	}
}

/* Scroll-reveal, paired with assets/js/interactions.js. Skipped entirely for
   prefers-reduced-motion (JS never adds .institute-reveal-pending in that
   case, so content just stays visible with no transition). */
.institute-reveal-pending {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.institute-reveal-pending.is-revealed {
	opacity: 1;
	transform: translateY(0);
}