/* Free effect 002 in place of the hero — the stylesheet as written, plus the
   few lines that put it inside the page's own first screen. */

.mwg_free_effect002 {
	height: 100dvh;
	overflow: hidden;
	position: relative;
}

.mwg_free_effect002 .content-effect {
	font-size: min(60px, 5.6vw);
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	position: absolute;
	align-items: center;
	letter-spacing: -0.03em;
}

.mwg_free_effect002 .content-effect span {
	display: block;
	width: max-content;
}

.mwg_free_effect002 .content-effect span:last-child {
	color: #999;
}

.mwg_free_effect002 img {
	width: 15vw;
	height: 15vw;
	position: absolute;
	object-fit: cover;
	border-radius: 4%;
	z-index: 5;
}

.mwg_free_effect002 .medias img {
	width: 1px;
	height: 1px;
	top: 0;
	left: 0;
	position: absolute;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 768px) {
	.mwg_free_effect002 img {
		width: 35vw;
		height: 35vw;
	}
}

/* --- putting it in the hero --- */

#home .hero .mwg_free_effect002 {
	position: absolute;
	inset: 0;
	height: 100%;
	z-index: 2;
	/* the section it sits in is declared pointer-events: none, which the effect
	   inherits — and then never sees the pointer it works from */
	pointer-events: auto;
}

/* the section's own headline and mark: the effect carries the wording now */
#home .hero .hero-title,
#home .hero .hero-icon {
	display: none !important;
}

/* the screen is black, so the first line is the page's cream and the second
   keeps the effect's grey */
#home .hero .mwg_free_effect002 .content-effect {
	color: #fff;
	font-weight: 300;
	line-height: 1.1;
	/* the words start held apart and close up to their normal setting as the
	   page scrolls — the script writes the level, 1 wide open, 0 closed */
	word-spacing: calc(var(--hero-line, 1) * 6vw);
	will-change: word-spacing;
	transition: word-spacing 0.08s linear;
}
/* the effect greys its last line, which on a single line would grey the whole
   thing */
#home .hero .mwg_free_effect002 .content-effect span:only-child {
	color: #fff;
}