/* Natige — company chronology.
   Ehrmann-like vertical spine: thin oversized years, circular photos,
   first milestone centered, then left/right. Lime nodes, brand blue years. */

.company-page {
	padding-bottom: 80px;
	background: #fff;
}

.history {
	--hist-blue: #3A78BA;
	--hist-lime: #C6E260;
	--hist-ink: #5a6168;
	--hist-paper: #ffffff;
	--hist-line: rgba(58, 120, 186, 0.2);
	position: relative;
	padding: 48px 0 48px;
	background: var(--hist-paper);
}

.history__head {
	max-width: 36em;
	margin: 0 auto 48px;
	text-align: center;
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.history__head.is-on {
	opacity: 1;
	transform: none;
}

.history__eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hist-lime);
}

.history__title {
	margin: 0 0 12px;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.12;
	color: var(--hist-blue);
}

.history__lead {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--hist-ink);
}

.history__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.history__list::before,
.history__list::after {
	content: '';
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	pointer-events: none;
}

.history__list::before {
	background: var(--hist-line);
	z-index: 0;
}

.history__list::after {
	background: var(--hist-lime);
	transform: scaleY(var(--history-progress, 0));
	transform-origin: top center;
	z-index: 0;
}

.history__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
	align-items: center;
	gap: 8px 32px;
	padding: 48px 0;
}

.history__item--first {
	grid-template-rows: auto auto;
	justify-items: center;
	padding-top: 8px;
}

.history__item--first .history__media {
	grid-column: 1 / -1;
	grid-row: 1;
	z-index: 2;
}

.history__item--first .history__axis {
	grid-column: 2;
	grid-row: 1;
	align-items: flex-end;
	z-index: 3;
}

.history__item--first .history__axis span {
	position: relative;
	top: auto;
	margin: 0 0 -10px;
}

.history__item--first .history__copy {
	grid-column: 1 / -1;
	grid-row: 2;
	max-width: 36em;
	padding-top: 24px;
	text-align: center;
}

.history__item--odd .history__copy {
	grid-column: 1;
	text-align: right;
	justify-self: end;
	max-width: 28em;
}

.history__item--odd .history__axis {
	grid-column: 2;
}

.history__item--odd .history__media {
	grid-column: 3;
	justify-self: start;
}

.history__item--even .history__media {
	grid-column: 1;
	justify-self: end;
}

.history__item--even .history__axis {
	grid-column: 2;
}

.history__item--even .history__copy {
	grid-column: 3;
	text-align: left;
	justify-self: start;
	max-width: 28em;
}

.history__media {
	position: relative;
	z-index: 2;
}

.history__axis {
	position: relative;
	align-self: stretch;
	display: flex;
	justify-content: center;
	z-index: 3;
}

.history__axis span {
	position: sticky;
	top: 48%;
	display: block;
	width: 20px;
	height: 20px;
	margin-top: 8px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--hist-lime);
	box-shadow: 0 0 0 6px var(--hist-paper);
	transform: scale(0.4);
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.35s ease,
		border-color 0.35s ease;
}

.history__item.is-on .history__axis span {
	transform: scale(1);
	animation: hist-node 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s 1;
}

.history__item.is-now .history__axis span {
	background: var(--hist-lime);
	border-color: var(--hist-lime);
	transform: scale(1.12);
}

@keyframes hist-node {
	0% { box-shadow: 0 0 0 6px var(--hist-paper), 0 0 0 6px rgba(198, 226, 96, 0.5); }
	100% { box-shadow: 0 0 0 6px var(--hist-paper), 0 0 0 18px rgba(198, 226, 96, 0); }
}

.history__year {
	margin: 0 0 8px;
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--hist-blue);
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
		letter-spacing 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}

.history__item--odd .history__year {
	transform: translate(18px, 12px);
	letter-spacing: 0.08em;
}

.history__item--even .history__year {
	transform: translate(-18px, 12px);
	letter-spacing: 0.08em;
}

.history__item.is-on .history__year {
	opacity: 1;
	transform: none;
	letter-spacing: -0.03em;
}

.history__item.is-now .history__year {
	color: #00549a;
}

.history__year time {
	font: inherit;
	color: inherit;
}

.history__name {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #1c2430;
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.16s,
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}

.history__item.is-on .history__name {
	opacity: 1;
	transform: none;
}

.history__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--hist-ink);
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}

.history__item.is-on .history__text {
	opacity: 1;
	transform: none;
}

.history__media figure {
	position: relative;
	z-index: 1;
	margin: 0;
	width: 242px;
	height: 242px;
	overflow: hidden;
	border-radius: 50%;
	background: #d9e3ea;
	box-shadow: 0 12px 32px rgba(58, 120, 186, 0.08);
	opacity: 0;
	transform: scale(0.86);
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.history__item--odd .history__media figure {
	transform: translateX(36px) scale(0.9);
}

.history__item--even .history__media figure {
	transform: translateX(-36px) scale(0.9);
}

.history__item--first .history__media figure {
	transform: scale(0.82);
	box-shadow:
		0 0 0 12px var(--hist-paper),
		0 12px 32px rgba(58, 120, 186, 0.08);
}

.history__item.is-on .history__media figure {
	opacity: 1;
	transform: none;
}

.history__item.is-on.is-now .history__media figure {
	transform: scale(1.04);
	transition-duration: 1.1s;
}

.history__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12);
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	filter: saturate(0.92);
}

.history__item.is-on .history__media img {
	transform: scale(1);
}

.history__item.is-on.is-now .history__media img {
	transform: scale(1.08);
	transition-duration: 8s;
	transition-timing-function: linear;
}

.company-news {
	padding: 64px 0 0;
}

.company-news__title {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 700;
	color: #3A78BA;
}

.company-news__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.company-news__card {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid rgba(58, 120, 186, 0.12);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease;
}

.company-news__card:hover,
.company-news__card:focus-visible {
	transform: translateY(-4px);
	text-decoration: none;
	color: inherit;
}

.company-news__card:active {
	transform: translateY(-1px);
}

.company-news__card:focus-visible {
	outline: 2px solid #FCB43C;
	outline-offset: 3px;
}

.company-news__photo {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #d9e3ea;
}

.company-news__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.company-news__caption {
	display: block;
	padding: 16px 18px 18px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #3A78BA;
}

.company-article {
	max-width: 48em;
	padding-bottom: 48px;
	font-size: 17px;
	line-height: 1.6;
	color: #343a40;
}

.company-article img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

@media (max-width: 991.98px) {
	.history {
		padding: 32px 0 56px;
	}
	.history__title {
		font-size: 28px;
	}
	.history__list::before,
	.history__list::after {
		left: 16px;
		margin-left: 0;
	}
	.history__item,
	.history__item--first,
	.history__item--odd,
	.history__item--even {
		grid-template-columns: 32px minmax(0, 1fr);
		grid-template-rows: none;
		justify-items: stretch;
		padding: 32px 0;
	}
	.history__item--first .history__axis,
	.history__item--odd .history__axis,
	.history__item--even .history__axis {
		grid-column: 1;
		grid-row: 1 / 3;
	}
	.history__item--first .history__copy,
	.history__item--odd .history__copy,
	.history__item--even .history__copy,
	.history__item--first .history__media,
	.history__item--odd .history__media,
	.history__item--even .history__media {
		grid-column: 2;
		grid-row: auto;
		text-align: left;
		justify-self: start;
		max-width: none;
	}
	.history__item--first .history__media figure,
	.history__item--odd .history__media figure,
	.history__item--even .history__media figure,
	.history__item--odd .history__year,
	.history__item--even .history__year {
		transform: translateY(18px);
	}
	.history__media figure {
		width: min(200px, 100%);
		height: auto;
		aspect-ratio: 1;
	}
	.company-news__list {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.history__head,
	.history__item,
	.history__year,
	.history__name,
	.history__text,
	.history__axis span,
	.history__media figure,
	.history__media img,
	.history__item.is-on.is-now .history__media figure,
	.history__item.is-on.is-now .history__media img,
	.company-news__card {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
		letter-spacing: -0.03em;
		filter: none;
	}
	.history__list::after {
		transform: scaleY(1);
	}
}