/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT / OUR STORY PAGE
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── Timeline ────────────────────────────────────────────────────────────── */

.about-timeline {
	padding: 5rem 1.5rem 5.5rem;
	background: var(--ci-color-off-white);
}

.about-timeline__inner {
	max-width: 960px;
	margin: 0 auto;
}

.about-timeline__header {
	text-align: center;
	margin-bottom: 4rem;
}

.about-timeline__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

.about-timeline__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: var(--ci-color-text-muted);
	line-height: 1.65;
	max-width: 580px;
	margin: 0 auto;
}

/* Track: 3-column grid — cards | node column (64px) | cards */
.about-timeline__track {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
}

/* Full-height spine, precisely centered in the 64px node column */
.about-timeline__track::before {
	content: '';
	position: absolute;
	top: 2.25rem;
	bottom: 2.5rem;
	left: 50%;
	width: 6px;
	background: #538eaa;
	transform: translateX(-50%);
	border-radius: 3px;
	z-index: 0;
}

/* Each era row: 3 equal columns — left cards | 64px node | right cards */
.tl-row {
	display: grid;
	grid-template-columns: 1fr 64px 1fr;
	padding-bottom: 2.5rem;
	align-items: start;
}

/* Node column — centers the tick on the spine */
.tl-node {
	display: flex;
	justify-content: center;
	padding-top: 2rem;
	position: relative;
	z-index: 1;
}

/* Horizontal tick mark — same colour and weight as spine */
.tl-tick {
	display: block;
	width: 38px;
	height: 6px;
	background: #538eaa;
	border-radius: 3px;
	flex-shrink: 0;
}

/* Cards: screenshot 2 style — pastel tint, soft border, no shadow or border-left accent */
.tl-card {
	background: var(--tl-bg, #f5f5f5);
	border: 1.5px solid rgba(0, 0, 0, 0.07);
	border-radius: 1rem;
	padding: 1.75rem;

	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.tl-row--left .tl-card  { transform: translateX(-24px); }
.tl-row--right .tl-card { transform: translateX(24px); }

.tl-card.is-visible {
	opacity: 1;
	transform: none;
}

/* Year badge */
.tl-year {
	display: inline-block;
	font-family: var(--ci-font-primary);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tl-color, var(--ci-color-navy));
	background: rgba(0, 0, 0, 0.07);
	border-radius: 9999px;
	padding: 0.2rem 0.8rem;
	margin-bottom: 1.1rem;
}

/* Section labels */
.tl-label {
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.tl-label--problem  { color: #646464; margin-top: 0; }
.tl-label--solution { color: var(--tl-color, var(--ci-color-navy)); margin-top: 1.25rem; }

/* Body copy */
.tl-text {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.75;
	color: var(--ci-color-text);
	margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.tl-card { opacity: 1; transform: none; transition: none; }
}

/* Mobile: collapse to [40px node] [1fr card] */
@media (max-width: 680px) {

	.about-timeline__track::before {
		left: 20px;
		top: 2rem;
		bottom: 2rem;
		z-index: 2;
	}

	.tl-row {
		grid-template-columns: 40px 1fr;
		padding-bottom: 2rem;
	}

	/* Left rows: original DOM order is card | node | spacer
	   Reorder visually to node | card */
	.tl-row--left .tl-card   { grid-column: 2 / 3; grid-row: 1; }
	.tl-row--left .tl-node   { grid-column: 1 / 2; grid-row: 1; justify-content: center; }
	.tl-row--left .tl-spacer { display: none; }

	/* Right rows: original DOM order is spacer | node | card
	   Reorder visually to node | card */
	.tl-row--right .tl-spacer { display: none; }
	.tl-row--right .tl-node   { grid-column: 1 / 2; grid-row: 1; justify-content: center; }
	.tl-row--right .tl-card   { grid-column: 2 / 3; grid-row: 1; }

	/* Reveal straight up rather than sliding in sideways. A horizontal
	   slide here briefly shifts the card left, over the spine (it's only
	   40px away), which looks like the spine gets covered mid-animation,
	   and leaves cards at inconsistent left edges while different ones
	   are mid-scroll-reveal at the same time. */
	.tl-row--left .tl-card,
	.tl-row--right .tl-card {
		transform: translateY(16px);
	}

	.tl-node { padding-top: 1.5rem; z-index: 3; }
	.tl-tick { width: 24px; height: 6px; }

}


/* ─── Logo evolution image ────────────────────────────────────────────────── */

.about-logo-section {
	padding: 4rem 1.5rem;
	background: var(--ci-color-white);
	text-align: center;
}

.about-logo-section__inner {
	max-width: 900px;
	margin: 0 auto;
}

.about-logo-section__caption {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ci-color-text-muted);
	text-transform: uppercase;
	margin: 0 0 1.75rem;
}

.about-logo-section__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
}


/* ─── Final CTA ───────────────────────────────────────────────────────────── */

.about-cta {
	background-color: #253d47;
	padding: 5rem 1.5rem;
	text-align: center;
}

.about-cta__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.about-cta__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: var(--ci-color-white);
	margin: 0;
	line-height: 1.2;
}

.about-cta__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	line-height: 1.65;
}