/**
 * Home — atelier intro (copy + skill bars).
 */

.na-atelier {
	padding: 100px 0;
	background: #fff;
	color: var(--na-ink, #1c1a18);
}

.na-atelier__inner {
	box-sizing: border-box;
	width: min(var(--ml-container-max, 1300px), calc(100% - 2rem));
	max-width: var(--ml-container-max, 1300px);
	margin-inline: auto;
}

body.ml-layout-full .na-atelier__inner.ml-container {
	width: min(var(--ml-container-max, 1300px), calc(100% - 2rem));
	max-width: var(--ml-container-max, 1300px);
	margin-inline: auto;
	padding-inline: 0;
}

.na-atelier__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.na-atelier__title {
	margin: 0 0 0.85rem;
	font-family: var(--ml-font-body);
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: #3d3a45;
}

.na-atelier__subtitle {
	margin: 0 0 1.15rem;
	font-family: var(--ml-font-heading);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.05rem, 1.8vw, 1.28rem);
	line-height: 1.45;
	color: #6a6670;
}

.na-atelier__text {
	margin: 0;
	max-width: 34rem;
	font-family: var(--ml-font-body);
	font-size: 0.92rem;
	line-height: 1.75;
	color: #7a7680;
}

.na-atelier__bars {
	display: grid;
	gap: 1.35rem;
}

.na-atelier__bar-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.45rem;
}

.na-atelier__bar-label,
.na-atelier__bar-value {
	font-family: var(--ml-font-body);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #5c5862;
}

.na-atelier__bar-track {
	height: 8px;
	background: #ece8e3;
	overflow: hidden;
}

.na-atelier__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: #9a8fa3;
	transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.na-atelier.is-inview .na-atelier__bar-fill,
.na-atelier__bars.is-animated .na-atelier__bar-fill {
	width: var(--na-bar, 0%);
}

@media (max-width: 900px) {
	.na-atelier {
		padding: 72px 0;
	}

	.na-atelier__grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.na-atelier__bar-fill {
		transition: none;
		width: var(--na-bar, 0%);
	}
}