/* =============================================================================
 * Section — Hygiene differentiator (Accueil)
 * Dark sage on cream type, sits between products (cream) and founder (cream).
 * ========================================================================== */

.exspa-hygiene {
	background: var(--exspa-sage-deep, #2A3325);
	color: var(--exspa-cream, #F5F1E8);
	padding: clamp(96px, 12vw, 180px) clamp(24px, 5vw, 80px);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.exspa-hygiene__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.exspa-hygiene__header {
	max-width: 720px;
	margin: 0 auto clamp(64px, 8vw, 112px);
	text-align: center;
}

.exspa-hygiene__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin: 0 0 28px;
	color: var(--exspa-cream, #F5F1E8);
	opacity: 0.55;
}

.exspa-hygiene__heading {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 28px;
	color: var(--exspa-cream, #F5F1E8);
}

.exspa-hygiene__heading em {
	font-style: italic;
	opacity: 0.65;
}

.exspa-hygiene__lede {
	font-size: 18px;
	line-height: 1.65;
	max-width: 56ch;
	margin: 0 auto;
	color: var(--exspa-cream, #F5F1E8);
	opacity: 0.78;
}

/* -----------------------------------------------------------------------------
 * Grid of four numbered items
 * -------------------------------------------------------------------------- */
.exspa-hygiene__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 3vw, 48px);
	margin: 0;
	padding: 48px 0 0;
	border-top: 1px solid rgba(245, 241, 232, 0.18);
}

.exspa-hygiene__item {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* Number — tiny tracking dot above the title, sans-serif, low presence.
 * No counter / scramble animation — the parent block fades in cleanly. */
.exspa-hygiene__num {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.28em;
	color: var(--exspa-cream, #F5F1E8);
	opacity: 0.55;
	margin: 0;
	line-height: 1;
}

.exspa-hygiene__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

/* Title — Romance display, BIG, normal case, max contrast.
 * Replaces the old uppercase 12 px label so titles really sing
 * against the body copy. */
.exspa-hygiene__label {
	font-family: var(--exspa-font-display, 'Romance', 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-transform: none;
	color: #FFFFFF;
	opacity: 1;
	margin: 0;
}

.exspa-hygiene__copy {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: var(--exspa-cream, #F5F1E8);
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
 * Tablet + mobile
 * -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.exspa-hygiene__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
}

@media (max-width: 540px) {
	.exspa-hygiene {
		padding: 72px 20px 88px;
	}
	.exspa-hygiene__grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: 32px;
	}
	.exspa-hygiene__item {
		display: grid;
		grid-template-columns: 56px 1fr;
		gap: 18px;
		align-items: start;
	}
}