/* Monti Catalogo — componenti editoriali: apertura, percorsi, servizi,
   timeline, showroom, moduli. Solo dove compaiono. */



/* ------------------------------------------------ Motivo a vortice --- */

.mc-site .ml-rings {
	position: absolute;
	pointer-events: none;
	fill: none;
	stroke: var(--ml-green);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
	opacity: .25;
}


.mc-site .ml-rings use {
	transform-box: view-box;
	transform-origin: 100px 100px;
}


.mc-site .ml-rings--hero {
	right: -14vw;
	bottom: -34vw;
	width: 64vw;
	opacity: .3;
}


.mc-site .ml-rings--cta {
	top: 50%;
	right: -10vw;
	width: 48vw;
	transform: translateY(-50%);
	opacity: .28;
}


.mc-site .ml-rings--card,
.mc-site .ml-rings--gallery,
.mc-site .ml-rings--empty {
	position: relative;
	width: 55%;
	max-width: 220px;
	opacity: .5;
	stroke: var(--ml-green-dark);
}


/* ---------------------------------------------------------- CTA finale --- */

.mc-site .ml-final-cta {
	position: relative;
	padding: clamp(70px, 10vw, 150px) 0;
	overflow: hidden;
	color: #fff;
	background: var(--ml-blue-deep);
	isolation: isolate;
}


.mc-site .ml-final-cta.has-image::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(4, 23, 34, .92) 0%, rgba(4, 23, 34, .6) 55%, rgba(4, 23, 34, .3) 100%),
		var(--mc-cta-image) center / cover;
	content: '';
}


.mc-site .ml-final-cta .ml-title {
	position: relative;
	z-index: 1;
	max-width: 18ch;
	color: #fff;
}


.mc-site .ml-final-cta p {
	position: relative;
	z-index: 1;
	max-width: 56ch;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, .74);
	line-height: 1.75;
}


.mc-site .ml-final-cta .ml-button-row {
	position: relative;
	z-index: 1;
}


.mc-modal__form .wpcf7-submit {
	min-height: 50px;
	padding: 13px 24px;
	border: 1px solid var(--ml-green-dark);
	background: var(--ml-green-dark);
	color: #fff;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}


.mc-has-js .ml-scale__step,
.mc-has-js .mc-scala > .col {
	opacity: 0;
	transform: translateY(18px);
}


.mc-has-js .mc-scala.is-in > .col {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ml-ease), transform .6s var(--ml-ease);
}


.mc-has-js .mc-scala.is-in > .col:nth-child(1) { transition-delay: 0ms; }

.mc-has-js .mc-scala.is-in > .col:nth-child(2) { transition-delay: 90ms; }

.mc-has-js .mc-scala.is-in > .col:nth-child(3) { transition-delay: 180ms; }

.mc-has-js .mc-scala.is-in > .col:nth-child(4) { transition-delay: 270ms; }

.mc-has-js .mc-scala.is-in > .col:nth-child(5) { transition-delay: 360ms; }

.mc-has-js .mc-scala.is-in > .col:nth-child(6) { transition-delay: 450ms; }

.mc-has-js .mc-scala.is-in > .col:nth-child(7) { transition-delay: 540ms; }

.mc-has-js .mc-scala.is-in > .col:nth-child(8) { transition-delay: 630ms; }


.mc-has-js .ml-scale.is-in .ml-scale__step {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ml-ease), transform .6s var(--ml-ease);
	transition-delay: calc(var(--mc-i, 0) * 90ms);
}


/* La linea si disegna dopo le tappe, e solo alla fine compare "prodotto finito". */
.mc-has-js .ml-scale__line::before {
	transform: scaleX(0);
}


.mc-has-js .ml-scale.is-in .ml-scale__line::before {
	transform: scaleX(1);
	transition: transform 1.6s var(--ml-ease);
	transition-delay: calc(var(--mc-steps, 7) * 90ms + 200ms);
}


.mc-has-js .ml-scale__line::after {
	opacity: 0;
}


.mc-has-js .ml-scale.is-in .ml-scale__line::after {
	opacity: 1;
	transition: opacity .4s var(--ml-ease);
	transition-delay: calc(var(--mc-steps, 7) * 90ms + 1500ms);
}


.mc-has-js .ml-scale__to {
	opacity: 0;
	transform: translateX(-8px);
}


.mc-has-js .ml-scale.is-in .ml-scale__to {
	opacity: 1;
	transform: none;
	transition: opacity .5s var(--ml-ease), transform .5s var(--ml-ease);
	transition-delay: calc(var(--mc-steps, 7) * 90ms + 1400ms);
}


.mc-has-js .ml-rings {
	stroke-dashoffset: 100;
}


.mc-has-js .ml-rings.is-in {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2.2s var(--ml-ease);
}


/* Rotazione lentissima: il vortice respira senza distrarre. */
.mc-has-js .ml-rings--hero use,
.mc-has-js .ml-rings--cta use {
	animation: mc-vortex 140s linear infinite;
}
@media (prefers-reduced-motion: reduce) {


	.mc-has-js .ml-rings {
		stroke-dashoffset: 0;
	}


	.mc-has-js .ml-scale__step,
	.mc-has-js .ml-scale__to,
	.mc-has-js .mc-scala > .col {
		opacity: 1;
		transform: none;
	}


	.mc-has-js .ml-scale__line {
		transform: scaleX(1);
	}


	.mc-has-js .ml-rings--hero use,
	.mc-has-js .ml-rings--cta use {
		animation: none;
	}
}


/* --------------------------------------------- Scala dei pubblici --- */
/* Celle su griglia di filetti, nel linguaggio della home: nessun riquadro,
   nessun bagliore. Il colore, la lunghezza della barra e il ritardo di
   ingresso derivano dalla posizione. */

.mc-site .ml-scale {
	container-type: inline-size;
	margin: 0;
}


.mc-site .ml-scale__track {
	display: grid;
	grid-template-columns: repeat(var(--mc-steps, 7), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ml-line);
	list-style: none;
}


.mc-site .ml-scale__step {
	--mc-c: var(--ml-blue);
	--mc-pl: 22px;
	position: relative;
	padding: 34px 22px 38px var(--mc-pl);
	border-right: 1px solid var(--ml-line);
}


.mc-site .ml-scale__step:first-child { --mc-pl: 0px; }

.mc-site .ml-scale__step:last-child { padding-right: 0; border-right: 0; }
@supports (color: color-mix(in oklab, red, blue)) {

	.mc-site .ml-scale__step {
		--mc-c: color-mix(in oklab, var(--ml-green) calc(var(--mc-p, 0) * 1%), var(--ml-blue));
	}
}


.mc-site .ml-scale__face {
	display: block;
	color: inherit;
	text-decoration: none;
}


.mc-site .ml-scale__icon {
	display: block;
	margin-bottom: 26px;
	color: var(--mc-c);
	transition: transform .5s var(--ml-ease);
}


.mc-site .ml-scale__icon svg {
	width: 38px;
	height: 38px;
	stroke-width: 1.05;
}


.mc-site .ml-scale__label {
	display: block;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
}


.mc-site .ml-scale__num {
	display: block;
	margin-top: 4px;
	color: var(--ml-muted);
	font-size: .72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}


.mc-site .ml-scale__bar {
	position: absolute;
	right: 22px;
	bottom: 0;
	left: var(--mc-pl);
	height: 2px;
	background: var(--mc-c);
	transform: scaleX(calc(.28 + var(--mc-p, 0) * .0072));
	transform-origin: left center;
	transition: transform .55s var(--ml-ease);
}


.mc-site .ml-scale__step:last-child .ml-scale__bar { right: 0; }


.mc-site .ml-scale__step:hover .ml-scale__icon,
.mc-site .ml-scale__face:focus-visible .ml-scale__icon { transform: translateY(-4px); }


.mc-site .ml-scale__step:hover .ml-scale__bar,
.mc-site .ml-scale__face:focus-visible .ml-scale__bar { transform: scaleX(1); }


.mc-site .ml-scale__step.is-active .ml-scale__label { color: var(--mc-c); }


/* Asse: la barra si riempie verso destra, la scritta di arrivo compare dopo. */

.mc-site .ml-scale__axis,
.mc-site .mc-axis {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 26px);
	margin: 34px 0 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
}


.mc-site .ml-scale__from { color: var(--ml-muted); }


.mc-site .ml-scale__line {
	position: relative;
	height: 1px;
	flex: 1;
	background: var(--ml-line);
}


.mc-site .ml-scale__line::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: linear-gradient(90deg, var(--ml-blue), var(--ml-green));
	content: '';
	transform-origin: left center;
}


.mc-site .ml-scale__line::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--ml-green);
	border-right: 1px solid var(--ml-green);
	content: '';
	transform: translate(50%, -50%) rotate(45deg);
}


.mc-site .ml-scale__to { color: var(--ml-green-dark); }
@container (max-width: 1100px) {

	.mc-site .ml-scale__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.mc-site .ml-scale__step { --mc-pl: 18px; }

	.mc-site .ml-scale__step:nth-child(4n+1) { --mc-pl: 0px; }

	.mc-site .ml-scale__step:nth-child(4n) { padding-right: 0; border-right: 0; }

	.mc-site .ml-scale__step:nth-child(4n) .ml-scale__bar { right: 0; }

	.mc-site .ml-scale__step:nth-child(-n+4) { border-bottom: 1px solid var(--ml-line); }
}
@container (max-width: 620px) {

	.mc-site .ml-scale__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mc-site .ml-scale__step { --mc-pl: 18px; border-bottom: 1px solid var(--ml-line); }

	.mc-site .ml-scale__step:nth-child(2n+1) { --mc-pl: 0px; }

	.mc-site .ml-scale__step:nth-child(2n) { padding-right: 0; border-right: 0; }

	.mc-site .ml-scale__step:nth-child(2n) .ml-scale__bar { right: 0; }

	.mc-site .ml-scale__step:last-child { border-bottom: 0; }


	.mc-site .ml-scale__axis {
		flex-wrap: wrap;
		gap: 14px 0;
		justify-content: space-between;
	}


	.mc-site .ml-scale__line { order: 3; flex: 0 0 100%; }

	.mc-site .ml-scale__to { text-align: right; }
}


/* ------------------------------ Scala sulle colonne native Flatsome --- */
/* Uso: classe mc-scala sulla Row. Niente da mettere sulle colonne: numero,
   colore e lunghezza della barra derivano dalla posizione con nth-child. */

.mc-site .mc-scala {
	counter-reset: mc-step;
}


.mc-site .mc-scala > .col {
	--mc-c: var(--ml-blue);
	padding-bottom: 14px;
}


.mc-site .mc-scala > .col:nth-child(1) { --mc-c: #267fba; --mc-p: 0; }

.mc-site .mc-scala > .col:nth-child(2) { --mc-c: #2f89a7; --mc-p: 17; }

.mc-site .mc-scala > .col:nth-child(3) { --mc-c: #389393; --mc-p: 33; }

.mc-site .mc-scala > .col:nth-child(4) { --mc-c: #419d80; --mc-p: 50; }

.mc-site .mc-scala > .col:nth-child(5) { --mc-c: #4aa66c; --mc-p: 67; }

.mc-site .mc-scala > .col:nth-child(6) { --mc-c: #53b059; --mc-p: 83; }

.mc-site .mc-scala > .col:nth-child(7) { --mc-c: #5cba45; --mc-p: 100; }

.mc-site .mc-scala > .col:nth-child(8) { --mc-c: #5cba45; --mc-p: 100; }


.mc-site .mc-scala > .col > .col-inner {
	position: relative;
	height: 100%;
	padding: 22px 18px 58px;
	border: 1px solid color-mix(in srgb, var(--mc-c) 55%, transparent);
	background: linear-gradient(180deg, color-mix(in srgb, var(--mc-c) 7%, transparent), transparent 62%);
	transition:
		transform .45s var(--ml-ease),
		border-color .35s var(--ml-ease),
		background .35s var(--ml-ease),
		box-shadow .45s var(--ml-ease),
		opacity .35s var(--ml-ease);
}


/* Numero progressivo generato dal CSS: non va scritto nelle colonne. */
.mc-site .mc-scala > .col > .col-inner::before {
	position: absolute;
	top: 18px;
	left: 18px;
	color: color-mix(in srgb, currentColor 45%, transparent);
	counter-increment: mc-step;
	content: counter(mc-step, decimal-leading-zero);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	transition: color .35s var(--ml-ease);
}


/* Barra che si allunga procedendo verso destra. */
.mc-site .mc-scala > .col > .col-inner::after {
	position: absolute;
	bottom: 22px;
	left: 18px;
	width: calc(22% + var(--mc-p, 0) * .5%);
	height: 2px;
	border-radius: 2px;
	background: var(--mc-c);
	content: '';
	transition: width .5s var(--ml-ease);
}


/* Icona: funziona con l'Icon Box di Flatsome o con una semplice immagine. */
.mc-site .mc-scala .icon-box-img,
.mc-site .mc-scala .col-inner > img,
.mc-site .mc-scala .img-inner {
	display: grid;
	width: 62px !important;
	height: 62px;
	margin: 14px auto 18px;
	place-items: center;
	border: 1px solid var(--mc-c);
	border-radius: 50%;
	color: var(--mc-c);
	transition: transform .5s var(--ml-ease), background .35s var(--ml-ease);
}


.mc-site .mc-scala .icon-box-img svg,
.mc-site .mc-scala .icon-box-img img {
	width: 26px;
	height: 26px;
}


.mc-site .mc-scala h1,
.mc-site .mc-scala h2,
.mc-site .mc-scala h3,
.mc-site .mc-scala h4,
.mc-site .mc-scala h5 {
	margin: 0;
	font-family: var(--ml-sans);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}


.mc-site .mc-scala .col-inner:hover,
.mc-site .mc-scala .col-inner:focus-within {
	border-color: var(--mc-c);
	background: linear-gradient(180deg, color-mix(in srgb, var(--mc-c) 22%, transparent), transparent 72%);
	box-shadow: 0 18px 44px color-mix(in srgb, var(--mc-c) 20%, transparent);
	transform: translateY(-6px);
}


.mc-site .mc-scala .col-inner:hover::after,
.mc-site .mc-scala .col-inner:focus-within::after {
	width: calc(100% - 36px);
}


.mc-site .mc-scala .col-inner:hover::before,
.mc-site .mc-scala .col-inner:focus-within::before {
	color: var(--mc-c);
}


.mc-site .mc-scala .col-inner:hover .icon-box-img,
.mc-site .mc-scala .col-inner:hover .img-inner {
	background: color-mix(in srgb, var(--mc-c) 18%, transparent);
	transform: scale(1.08);
}


/* Isola la colonna puntata: le altre arretrano. */
.mc-site .mc-scala:hover > .col:not(:hover) > .col-inner {
	opacity: .55;
}


/* Tappa evidenziata di partenza: aggiungi is-active alla colonna. */
.mc-site .mc-scala > .col.is-active > .col-inner {
	border-color: var(--mc-c);
	background: linear-gradient(180deg, color-mix(in srgb, var(--mc-c) 16%, transparent), transparent 70%);
}


.mc-site .mc-hero .mc-note::after,
.mc-site .mc-film .mc-note::after { color: rgba(255, 255, 255, .18); }


.mc-site .mc-lead {
	max-width: 46ch;
	margin: 0 0 30px;
	padding-top: 26px;
	border-top: 1px solid var(--ml-line);
	color: var(--ml-muted);
}


.mc-site .mc-copy { max-width: 62ch; color: var(--ml-muted); }


.mc-site .mc-eyebrow {
	margin: 0 0 18px;
	color: var(--ml-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}


.mc-site .mc-indent { padding-left: 16.6667%; }


/* Pieno verde: parte verde e si riempie di blu. */
.mc-site .mc-btn--solid,
.mc-site a.button.mc-btn--solid,
.mc-site .mc-hero a.button.mc-btn--solid,
.mc-site .mc-cta a.button.mc-btn--solid {
	--mc-fill: var(--ml-blue-black);
	border-color: var(--ml-green-dark);
	background-color: var(--ml-green-dark);
	color: #fff;
	backdrop-filter: none;
}


/* Chiara su fotografia: parte velata e si riempie di bianco. */
.mc-site .mc-btn--light,
.mc-site a.button.mc-btn--light,
.mc-site .mc-hero a.button.mc-btn--light,
.mc-site .mc-cta a.button.mc-btn--light {
	--mc-fill: #fff;
	border-color: rgba(255, 255, 255, .7);
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
	backdrop-filter: blur(3px);
}


.mc-site .mc-btn--light:hover,
.mc-site .mc-btn--light:focus-visible,
.mc-site a.button.mc-btn--light:hover,
.mc-site .mc-hero a.button.mc-btn--light:hover,
.mc-site .mc-cta a.button.mc-btn--light:hover {
	border-color: #fff;
	color: var(--ml-blue-black);
}


/* Rete di sicurezza: dentro apertura e chiusura qualunque pulsante del tema
   prende comunque una resa leggibile sulla fotografia. */
.mc-site .mc-hero .button,
.mc-site .mc-cta .button {
	min-height: 54px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	text-transform: none;
}


/* --- apertura con immagine di sfondo ----------------------------------- */

.mc-site .mc-hero {
	position: relative;
	overflow: hidden;
	background: center / cover no-repeat
		url('/wp-content/uploads/2026/09/01-hero-home-monti-legnami.webp');
}


.mc-site .mc-hero::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg,
		rgba(7, 31, 45, .82) 0%,
		rgba(7, 31, 45, .58) 36%,
		rgba(7, 31, 45, .22) 70%,
		rgba(7, 31, 45, .34) 100%);
	content: '';
	pointer-events: none;
}


.mc-site .mc-hero .section-content {
	position: relative;
	z-index: 2;
}


/* Lo sfondo di Flatsome deve restare assoluto: non toccarlo. */
.mc-site .mc-hero .section-bg,
.mc-site .mc-vortice .section-bg { z-index: 0; }


.mc-site .mc-hero { color: #fff; }

.mc-site .mc-hero .mc-h1,
.mc-site .mc-hero h1 { color: var(--ml-titolo-chiaro); }


.mc-site .mc-hero .mc-note { color: rgba(255, 255, 255, .6); }

.mc-site .mc-hero .mc-note strong { color: #fff; }

.mc-site .mc-hero .mc-note::before,
.mc-site .mc-film .mc-note::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, .7), var(--ml-green));
}


.mc-site .mc-hero .mc-lead {
	border-color: rgba(255, 255, 255, .28);
	color: rgba(255, 255, 255, .78);
}


.mc-site .mc-hero .mc-h1 { max-width: 16ch; }


/* riga di chiusura dell'apertura */
.mc-site .mc-hero-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	margin-top: clamp(50px, 7vw, 110px);
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .25);
	color: rgba(255, 255, 255, .7);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}


/* --- fascia dei fatti -------------------------------------------------- */

.mc-site .mc-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--ml-line);
}


.mc-site .mc-fact {
	--mc-pl: 26px;
	padding: 30px 26px 30px var(--mc-pl);
	border-right: 1px solid var(--ml-line);
}


.mc-site .mc-fact:first-child { --mc-pl: 0px; }

.mc-site .mc-fact:last-child { padding-right: 0; border-right: 0; }


.mc-site .mc-fact strong {
	display: block;
	font-family: var(--ml-serif);
	font-size: clamp(1.5rem, 2vw, 2.1rem);
	font-weight: 400;
	line-height: 1.1;
}


.mc-site .mc-fact span {
	display: block;
	margin-top: 10px;
	color: var(--ml-muted);
	font-size: .92rem;
	line-height: 1.5;
}


/* --- i due percorsi ---------------------------------------------------- */

.mc-site .mc-path {
	--mc-c: var(--ml-blue);
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ml-line);
	background: #fdfdfb;
	transition: border-color .4s var(--ml-ease), transform .5s var(--ml-ease);
}


.mc-site .mc-path--lavorato { --mc-c: var(--ml-green-dark); }


.mc-site .mc-path:hover {
	border-color: var(--mc-c);
	transform: translateY(-4px);
}


.mc-site .mc-path__img {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}


.mc-site .mc-path__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ml-ease);
}


.mc-site .mc-path:hover .mc-path__img img { transform: scale(1.04); }


.mc-site .mc-path__stamp {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 9px 14px;
	background: var(--mc-c);
	color: #fff;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}


.mc-site .mc-path__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(24px, 2.6vw, 42px);
}


.mc-site .mc-path__body h3 {
	max-width: 14ch;
	margin: 0;
	font-family: var(--ml-serif);
	font-size: clamp(1.9rem, 2.6vw, 2.8rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-transform: none;
}


.mc-site .mc-path__body h4 {
	margin: 14px 0 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}


.mc-site .mc-path__body p {
	max-width: 52ch;
	margin: 16px 0 0;
	color: var(--ml-muted);
	font-size: .96rem;
}


.mc-site .mc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}


.mc-site .mc-tags li { margin: 0; }


.mc-site .mc-tags a {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--ml-line);
	color: inherit;
	font-size: .76rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .25s var(--ml-ease), color .25s var(--ml-ease);
}


.mc-site .mc-tags a:hover { border-color: var(--mc-c); color: var(--mc-c); }


.mc-site .mc-go {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--ml-line);
	color: var(--mc-c);
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
}


.mc-site .mc-go::after {
	content: '→';
	transition: transform .35s var(--ml-ease);
}


.mc-site .mc-path:hover .mc-go::after { transform: translateX(6px); }


/* --- servizi ----------------------------------------------------------- */

.mc-site .mc-services {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ml-line);
	counter-reset: mc-serv;
	list-style: none;
}


.mc-site .mc-serv {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(16px, 3vw, 54px);
	align-items: baseline;
	margin: 0;
	padding: 28px 0;
	border-bottom: 1px solid var(--ml-line);
	counter-increment: mc-serv;
	transition: transform .4s var(--ml-ease), border-color .4s var(--ml-ease);
}


.mc-site .mc-serv::before {
	color: var(--ml-muted);
	content: counter(mc-serv, decimal-leading-zero);
	font-size: .78rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}


.mc-site .mc-serv:hover {
	border-color: rgba(18, 33, 41, .3);
	transform: translateX(14px);
}


.mc-site .mc-serv strong {
	font-family: var(--ml-serif);
	font-size: clamp(1.3rem, 1.8vw, 1.85rem);
	font-weight: 400;
	line-height: 1.15;
}


.mc-site .mc-serv span { color: var(--ml-muted); font-size: .95rem; }


/* --- progetto e targa --------------------------------------------------- */

.mc-site .mc-project { position: relative; margin: 0; }


.mc-site .mc-project img { width: 100%; }


.mc-site .mc-plate {
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: 420px;
	margin: 0;
	padding: 26px 30px;
	background: var(--ml-paper);
}


.mc-site .mc-plate strong {
	display: block;
	font-family: var(--ml-serif);
	font-size: 1.6rem;
	font-weight: 400;
}


.mc-site .mc-plate span {
	display: block;
	margin-top: 6px;
	color: var(--ml-muted);
	font-size: .84rem;
}


/* --- film --------------------------------------------------------------- */

.mc-site .mc-film { background: var(--ml-blue-black); color: #fff; }


.mc-site .mc-film .mc-note,
.mc-site .mc-film .mc-eyebrow { color: rgba(255, 255, 255, .55); }

.mc-site .mc-film .mc-note strong { color: #fff; }

.mc-site .mc-film .mc-note::before { background: rgba(255, 255, 255, .3); }

.mc-site .mc-film p,
.mc-site .mc-film .mc-copy { color: rgba(255, 255, 255, .68); }

.mc-site .mc-film h1,
.mc-site .mc-film h2,
.mc-site .mc-film h3,
.mc-site .mc-film .mc-h2 { color: var(--ml-titolo-chiaro); }


.mc-site .mc-video {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}


.mc-site .mc-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.85) brightness(.82);
	transition: transform 1.2s var(--ml-ease), filter .5s var(--ml-ease);
}


.mc-site .mc-video:hover img { filter: saturate(1) brightness(.9); transform: scale(1.03); }


.mc-site .mc-video::after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	width: 92px;
	height: 92px;
	box-sizing: border-box;
	padding-left: 6px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	color: #fff;
	content: '';
	border-left: 14px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	box-sizing: content-box;
	font-size: 0;
	transform: translate(-50%, -50%);
	transition: background .35s var(--ml-ease), transform .45s var(--ml-ease);
}


.mc-site .mc-video:hover::after {
	background: rgba(255, 255, 255, .18);
	transform: translate(-50%, -50%) scale(1.07);
}


/* --- chiusura con fotografia -------------------------------------------- */

.mc-site .mc-cta {
	position: relative;
	overflow: hidden;
	background: center / cover no-repeat
		url('/wp-content/uploads/2026/09/07-cta-memoria-del-legno.webp');
	color: #fff;
}


.mc-site .mc-cta::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(95deg,
		rgba(7, 31, 45, .9) 0%,
		rgba(7, 31, 45, .74) 40%,
		rgba(7, 31, 45, .3) 72%,
		rgba(7, 31, 45, .08) 100%);
	content: '';
	pointer-events: none;
}


.mc-site .mc-cta .section-content { position: relative; z-index: 2; }

.mc-site .mc-cta .section-bg { z-index: 0; }


.mc-site .mc-cta .mc-h2,
.mc-site .mc-cta h2 { color: var(--ml-titolo-chiaro); }


.mc-site .mc-cta .mc-copy,
.mc-site .mc-cta p { color: rgba(255, 255, 255, .78); }


.mc-site .mc-cta .mc-eyebrow,
.mc-site .mc-cta .mc-note { color: rgba(255, 255, 255, .6); }

.mc-site .mc-cta .mc-note strong { color: #fff; }

.mc-site .mc-cta .mc-note::after { color: rgba(255, 255, 255, .18); }


.mc-site .mc-cta .mc-note::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, .7), var(--ml-green));
}


/* --- inserto fotografico nei blocchi di testo ---------------------------- */

.mc-site .mc-inset {
	margin: 0;
	overflow: hidden;
}


.mc-site .mc-inset img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}


/* --- fatti su due colonne, quando affiancati a un'immagine --------------- */

.mc-site .mc-facts--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }


.mc-site .mc-facts--duo .mc-fact {
	--mc-pl: 26px;
	border-bottom: 1px solid var(--ml-line);
}


.mc-site .mc-facts--duo .mc-fact:nth-child(2n+1) { --mc-pl: 0px; }

.mc-site .mc-facts--duo .mc-fact:nth-child(2n) { padding-right: 0; border-right: 0; }

.mc-site .mc-facts--duo .mc-fact:nth-last-child(-n+2) { border-bottom: 0; }


/* --- vortice di chiusura ------------------------------------------------ */

.mc-site .mc-vortice { position: relative; overflow: hidden; }


.mc-site .mc-vortice::before {
	position: absolute;
	top: 50%;
	right: -6vw;
	width: min(46vw, 620px);
	aspect-ratio: 1;
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23327833' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M114 100a14 14 0 1 1-14-14 28 28 0 1 1-28 28 42 42 0 1 1 42-42 56 56 0 1 1-56 56 70 70 0 1 1 70-70 84 84 0 1 1-84 84'/%3E%3C/svg%3E");
	content: '';
	opacity: .13;
	pointer-events: none;
	transform: translateY(-50%);
}


.mc-site .mc-vortice .section-content { position: relative; z-index: 2; }


/* Inserti, targhe e figure entrano come i testi. */
.mc-has-js .mc-inset,
.mc-has-js .mc-project,
.mc-has-js .mc-video,
.mc-has-js .mc-plate {
	opacity: 0;
	transform: translateY(18px);
}


.mc-has-js .mc-inset.is-in,
.mc-has-js .mc-project.is-in,
.mc-has-js .mc-video.is-in,
.mc-has-js .mc-plate.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .8s var(--ml-ease), transform .9s var(--ml-ease);
}


/* La targa arriva dopo l'immagine che la ospita. */
.mc-has-js .mc-project.is-in .mc-plate {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ml-ease) .5s, transform .7s var(--ml-ease) .5s;
}


/* Le schede dei percorsi e i fatti entrano con lo stesso passo. */
.mc-has-js .mc-facts > .mc-fact,
.mc-has-js .mc-services > .mc-serv {
	opacity: 0;
	transform: translateY(16px);
}


.mc-has-js .mc-facts.is-in > .mc-fact,
.mc-has-js .mc-services.is-in > .mc-serv {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--ml-ease), transform .8s var(--ml-ease);
}


.mc-has-js .mc-facts.is-in > .mc-fact:nth-child(2),
.mc-has-js .mc-services.is-in > .mc-serv:nth-child(2) { transition-delay: 90ms; }

.mc-has-js .mc-facts.is-in > .mc-fact:nth-child(3),
.mc-has-js .mc-services.is-in > .mc-serv:nth-child(3) { transition-delay: 180ms; }

.mc-has-js .mc-facts.is-in > .mc-fact:nth-child(4),
.mc-has-js .mc-services.is-in > .mc-serv:nth-child(4) { transition-delay: 270ms; }


.mc-has-js .mc-path {
	opacity: 0;
	transform: translateY(24px);
}


.mc-has-js .mc-path.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .8s var(--ml-ease), transform .9s var(--ml-ease), border-color .4s var(--ml-ease);
}
@media (max-width: 1100px) {

	.mc-site .mc-serv { grid-template-columns: 44px minmax(0, 1fr); }

	.mc-site .mc-serv span { grid-column: 2; }
}
@media (max-width: 849px) {

	.mc-site .mc-indent { padding-left: 0; }
}
@media (max-width: 720px) {

	.mc-site .mc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mc-site .mc-fact { --mc-pl: 22px; border-bottom: 1px solid var(--ml-line); }

	.mc-site .mc-fact:nth-child(2n+1) { --mc-pl: 0px; }

	.mc-site .mc-fact:nth-child(2n) { padding-right: 0; border-right: 0; }

	.mc-site .mc-fact:nth-last-child(-n+2) { border-bottom: 0; }

	.mc-site .mc-plate { position: static; max-width: none; padding: 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) {

	.mc-has-js .mc-rise,
	.mc-has-js .mc-rise > *,
	.mc-has-js .mc-fact,
	.mc-has-js .mc-serv,
	.mc-has-js .mc-path,
	.mc-has-js .mc-inset,
	.mc-has-js .mc-project,
	.mc-has-js .mc-video,
	.mc-has-js .mc-plate,
	.mc-has-js .mc-wipe img {
		opacity: 1;
		clip-path: none;
		transform: none;
		transition: none;
	}
}


/* --- immagine che insegue il puntatore nell'elenco servizi -------------- */
/* Decorativa: aria-hidden nel markup, nessun ruolo informativo, e non compare
   dove il puntatore non esiste. */

.mc-site .mc-follow,
.mc-follow {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	width: clamp(200px, 17vw, 300px);
	margin: -1px 0 0 -1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translate3d(-100vw, -100vh, 0);
	transition: opacity .35s var(--ml-ease), scale .5s var(--ml-ease);
	scale: .9;
	will-change: transform;
}


.mc-follow::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(7, 31, 45, .28));
	content: '';
}


.mc-follow.is-on {
	opacity: 1;
	scale: 1;
}


.mc-follow img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: opacity .13s linear;
}


.mc-follow.is-swapping img { opacity: 0; }


/* Il margine negativo centra il riquadro sulla punta del cursore. */
.mc-follow {
	margin-top: calc(clamp(200px, 17vw, 300px) / 3 * -2);
	margin-left: calc(clamp(200px, 17vw, 300px) / -2);
}


/* La riga puntata si distingue anche senza l'immagine. */
.mc-site .mc-serv[data-mc-img]:hover strong { color: var(--ml-blue-deep); }
@media (prefers-reduced-motion: reduce) {

	.mc-follow { display: none; }
}


/* Un filetto che si disegna: buono sotto un titolo o come separatore. */
.mc-site .mc-line {
	height: 1px;
	margin: 26px 0;
	background: var(--ml-line);
	transform: scaleX(0);
	transform-origin: left center;
}


.mc-has-js .mc-line.is-in {
	transform: scaleX(1);
	transition: transform 1.2s var(--ml-ease);
}


.mc-site .mc-line--verde {
	height: 2px;
	background: linear-gradient(90deg, var(--ml-blue), var(--ml-green));
}
@media (prefers-reduced-motion: reduce) {

	.mc-has-js .mc-in,
	.mc-has-js .mc-stagger > *,
	.mc-has-js .mc-line {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ============================================================= TIMELINE ===
   Anno in serif, filetto verticale che si disegna tappa dopo tappa, pallino
   che si accende quando il punto entra nello schermo. */

.mc-site .mc-tl {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mc-tl;
}


.mc-site .mc-tl__item {
	position: relative;
	display: grid;
	grid-template-columns: clamp(110px, 11vw, 190px) 34px minmax(0, 1fr);
	gap: 0 clamp(16px, 2.4vw, 40px);
	padding: 0 0 clamp(44px, 5vw, 76px);
}


.mc-site .mc-tl__item:last-child { padding-bottom: 0; }


/* Il filetto verticale, un segmento per tappa. */
.mc-site .mc-tl__item::before {
	position: absolute;
	top: 14px;
	bottom: 0;
	left: calc(clamp(110px, 11vw, 190px) + clamp(16px, 2.4vw, 40px) + 16px);
	width: 1px;
	background: var(--ml-line);
	content: '';
	transform: scaleY(0);
	transform-origin: top center;
}


.mc-site .mc-tl__item:last-child::before { bottom: auto; height: 0; }


.mc-has-js .mc-tl__item.is-in::before {
	transform: scaleY(1);
	transition: transform 1.1s var(--ml-ease) .15s;
}


.mc-site .mc-tl__year {
	grid-column: 1;
	margin: 0;
	color: var(--ml-blue-deep);
	font-family: var(--ml-serif);
	font-size: clamp(1.7rem, 2.4vw, 2.6rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}


/* Il pallino sulla linea. */
.mc-site .mc-tl__dot {
	position: relative;
	grid-column: 2;
	justify-self: center;
	width: 13px;
	height: 13px;
	margin-top: 8px;
	border: 1px solid var(--ml-green-dark);
	border-radius: 50%;
	background: var(--ml-paper);
	transform: scale(0);
}


.mc-has-js .mc-tl__item.is-in .mc-tl__dot {
	transform: scale(1);
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}


.mc-site .mc-tl__dot::after {
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--ml-green-dark);
	content: '';
	opacity: 0;
}


.mc-has-js .mc-tl__item.is-in .mc-tl__dot::after {
	opacity: 1;
	transition: opacity .4s var(--ml-ease) .3s;
}


.mc-site .mc-tl__body {
	grid-column: 3;
	max-width: 62ch;
}


.mc-has-js .mc-tl__body {
	opacity: 0;
	transform: translateY(16px);
}


.mc-has-js .mc-tl__item.is-in .mc-tl__body {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--ml-ease) .18s, transform .8s var(--ml-ease) .18s;
}


.mc-site .mc-tl__body h3 {
	margin: 0 0 12px;
	font-family: var(--ml-serif);
	font-size: clamp(1.3rem, 1.8vw, 1.85rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}


.mc-site .mc-tl__body p {
	margin: 0;
	color: var(--ml-muted);
	font-size: 1rem;
}


.mc-site .mc-tl__tag {
	display: inline-block;
	margin-top: 16px;
	padding: 6px 12px;
	border: 1px solid var(--ml-line);
	color: var(--ml-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
@media (max-width: 860px) {

	.mc-site .mc-tl__item {
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 0 18px;
		padding-bottom: 40px;
	}


	.mc-site .mc-tl__item::before { left: 16px; }

	.mc-site .mc-tl__year { grid-column: 2; margin-bottom: 10px; }

	.mc-site .mc-tl__dot { grid-column: 1; grid-row: 1; margin-top: 6px; }

	.mc-site .mc-tl__body { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {

	.mc-site .mc-tl__item::before,
	.mc-site .mc-tl__dot { transform: none; }

	.mc-site .mc-tl__dot::after,
	.mc-has-js .mc-tl__body { opacity: 1; transform: none; }
}


/* ============================================================= SHOWROOM ===
   Fotografia grande con punti sensibili. Su desktop la scheda compare al
   passaggio e si ribalta da sola per restare dentro l'immagine; sotto gli
   860px i punti spariscono e le stesse schede diventano un elenco leggibile
   senza interazione. */

.mc-site .mc-showroom {
	position: relative;
	margin: 0;
}


.mc-site .mc-showroom__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--ml-blue-black);
}


.mc-site .mc-showroom__stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.mc-site .mc-showroom__stage::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 31, 45, .25) 0%, transparent 30%, rgba(7, 31, 45, .3) 100%);
	content: '';
	pointer-events: none;
}


/* --- il punto sensibile ------------------------------------------------- */

.mc-site .mc-spot {
	position: absolute;
	top: var(--y, 50%);
	left: var(--x, 50%);
	z-index: 2;
}


.mc-site .mc-spot.is-open { z-index: 5; }


.mc-site .mc-spot__pin {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 8px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 100px;
	background: rgba(7, 31, 45, .42);
	color: #fff;
	cursor: pointer;
	font-family: var(--ml-sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
	transition: background .35s var(--ml-ease), border-color .35s var(--ml-ease);
	backdrop-filter: blur(4px);
}


.mc-site .mc-spot__pin::before {
	display: grid;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	place-items: center;
	border: 1px solid currentColor;
	border-radius: 50%;
	content: '+';
	font-size: .9rem;
	font-weight: 400;
	line-height: 1;
	transition: transform .4s var(--ml-ease), background .35s var(--ml-ease), box-shadow .4s var(--ml-ease);
}


.mc-site .mc-spot__pin:hover,
.mc-site .mc-spot__pin:focus-visible,
.mc-site .mc-spot.is-open .mc-spot__pin {
	border-color: #fff;
	background: var(--ml-green-dark);
}


.mc-site .mc-spot.is-open .mc-spot__pin::before {
	background: rgba(255, 255, 255, .18);
	transform: rotate(45deg);
}


/* Pulsazione discreta: nasce dal cerchio stesso, quindi resta centrata
   qualunque siano spaziature e lunghezza dell'etichetta. */
.mc-has-js .mc-spot__pin::before {
	animation: mc-pulse-spot 2.8s var(--ml-ease) infinite;
}


.mc-site .mc-spot.is-open .mc-spot__pin::before { animation: none; }


/* --- la scheda ---------------------------------------------------------- */

.mc-site .mc-spot__card {
	position: absolute;
	top: 18px;
	left: 18px;
	width: clamp(260px, 22vw, 330px);
	overflow: hidden;
	border: 1px solid var(--ml-line);
	background: var(--ml-paper);
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px) scale(.98);
	transition: opacity .35s var(--ml-ease), transform .45s var(--ml-ease);
}


.mc-site .mc-spot.is-flip-x .mc-spot__card { right: 18px; left: auto; }

.mc-site .mc-spot.is-flip-y .mc-spot__card { top: auto; bottom: 18px; }


.mc-site .mc-spot.is-open .mc-spot__card {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}


.mc-site .mc-spot__card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}


.mc-site .mc-spot__body { padding: 20px 22px 24px; }


.mc-site .mc-spot__body h3 {
	margin: 0 0 8px;
	font-family: var(--ml-serif);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
}


.mc-site .mc-spot__body p {
	margin: 0 0 18px;
	color: var(--ml-muted);
	font-size: .9rem;
	line-height: 1.6;
}


.mc-site .mc-spot__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ml-green-dark);
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
}


.mc-site .mc-spot__go::after {
	content: '→';
	transition: transform .3s var(--ml-ease);
}


.mc-site .mc-spot__go:hover::after { transform: translateX(5px); }
@media (max-width: 860px) {

	.mc-site .mc-showroom__stage { aspect-ratio: 4 / 3; }


	.mc-site .mc-spot {
		position: static;
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
		padding: 18px 0;
		border-bottom: 1px solid var(--ml-line);
	}


	.mc-site .mc-showroom__spots {
		display: block;
		margin-top: 10px;
	}


	.mc-site .mc-spot__pin {
		grid-column: 1 / -1;
		width: auto;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ml-ink);
		font-family: var(--ml-serif);
		font-size: 1.3rem;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		transform: none;
		backdrop-filter: none;
	}


	.mc-site .mc-spot__pin::before { display: none; }


	.mc-site .mc-spot__card {
		position: static;
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
		width: auto;
		border: 0;
		background: none;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}


	.mc-site .mc-spot__card img { aspect-ratio: 1; }

	.mc-site .mc-spot__body { padding: 0; }

	.mc-site .mc-spot__body h3 { display: none; }

	.mc-site .mc-spot__body p { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {

	.mc-has-js .mc-spot__pin::before { animation: none; box-shadow: none; }
}


/* ======================================= BARRA TITOLO DEL PROGETTO ===
   Schermo intero, fotografia, numero in filigrana e invito a scorrere. */

.mc-site .mc-projbar {
	position: relative;
	display: flex;
	min-height: min(86vh, 900px);
	align-items: stretch;
	overflow: hidden;
	background-color: var(--ml-blue-black);
	background-image: var(--mc-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}


.mc-site .mc-projbar::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(7, 31, 45, .5) 0%, transparent 26%),
		linear-gradient(100deg, rgba(7, 31, 45, .82) 0%, rgba(7, 31, 45, .5) 44%, rgba(7, 31, 45, .12) 78%, rgba(7, 31, 45, .28) 100%);
	content: '';
	pointer-events: none;
}


.mc-site .mc-projbar__inner {
	position: relative;
	z-index: 2;
	display: grid;
	width: var(--ml-container);
	grid-template-rows: auto 1fr auto;
	padding: clamp(40px, 5vw, 80px) 0;
}


.mc-site .mc-projbar__back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: start;
	justify-self: start;
	color: rgba(255, 255, 255, .78);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: gap .3s var(--ml-ease), color .3s var(--ml-ease);
}


.mc-site .mc-projbar__back:hover { gap: 18px; color: #fff; }


.mc-site .mc-projbar__head { align-self: center; }


.mc-site .mc-projbar__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	color: var(--ml-green-light);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}


.mc-site .mc-projbar__kicker::before {
	width: 32px;
	height: 1px;
	background: currentColor;
	content: '';
}


.mc-site .mc-projbar__title {
	max-width: 11ch;
	margin: 0;
	color: var(--ml-titolo-chiaro);
	font-family: var(--ml-serif);
	font-size: clamp(3rem, 7vw, 7.5rem);
	font-weight: 400;
	line-height: .96;
	letter-spacing: -.03em;
	text-transform: none;
}


/* Il numero in filigrana, grande, appoggiato in basso a destra. */
.mc-site .mc-projbar__num {
	position: absolute;
	right: 4%;
	bottom: 6%;
	z-index: 1;
	color: rgba(255, 255, 255, .1);
	font-family: var(--ml-serif);
	font-size: clamp(9rem, 22vw, 26rem);
	line-height: .8;
	pointer-events: none;
	user-select: none;
}


.mc-site .mc-projbar__scroll {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	align-self: end;
	justify-self: end;
	color: rgba(255, 255, 255, .8);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
}


.mc-site .mc-projbar__arrow {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	font-size: 1rem;
	transition: background .35s var(--ml-ease), border-color .35s var(--ml-ease);
	animation: mc-bob 2.6s var(--ml-ease) infinite;
}


.mc-site .mc-projbar__scroll:hover .mc-projbar__arrow {
	border-color: #fff;
	background: rgba(255, 255, 255, .16);
}


.mc-site .mc-projbar__anchor {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 1px;
	height: 1px;
}
@media (max-width: 860px) {

	.mc-site .mc-projbar { min-height: 78vh; }

	.mc-site .mc-projbar__title { max-width: none; }

	.mc-site .mc-projbar__num { right: 2%; bottom: 14%; }

	.mc-site .mc-projbar__scroll { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {

	.mc-site .mc-projbar__arrow { animation: none; }
}


/* ================================================= MODULO DI CONTATTO ===
   Campi a filetto singolo, etichette in maiuscoletto, pannello su carta.
   Vale per Contact Form 7 ovunque compaia il contenitore mc-form. */

.mc-site .mc-form {
	padding: clamp(28px, 4vw, 64px);
	background: var(--ml-paper);
}


.mc-site .mc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 44px);
}


.mc-site .mc-form input[type="text"],
.mc-site .mc-form input[type="email"],
.mc-site .mc-form input[type="tel"],
.mc-site .mc-form textarea,
.mc-site .mc-form select {
	width: 100%;
	height: auto;
	padding: 10px 2px;
	border: 0;
	border-bottom: 1px solid var(--ml-line-strong, rgba(18, 33, 41, .28));
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ml-ink);
	font-family: var(--ml-sans);
	font-size: 1rem;
	line-height: 1.6;
	transition: border-color .3s var(--ml-ease);
}


.mc-site .mc-form input:focus,
.mc-site .mc-form textarea:focus,
.mc-site .mc-form select:focus {
	border-bottom-color: var(--ml-green-dark);
	box-shadow: none;
	outline: 0;
}


.mc-site .mc-form textarea {
	min-height: 150px;
	resize: vertical;
}


.mc-site .mc-form ::placeholder {
	color: var(--ml-muted);
	opacity: .75;
}


/* L'elenco nativo non si accorda con il resto: qui prende la stessa linea. */
.mc-site .mc-form select {
	padding-right: 30px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230d3048' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-position: right 4px center;
	background-repeat: no-repeat;
	background-size: 12px;
	cursor: pointer;
}


.mc-site .mc-form .wpcf7-form-control-wrap { display: block; }


/* Consenso */

.mc-site .mc-consent {
	margin: clamp(26px, 3vw, 40px) 0 0;
	color: var(--ml-muted);
	font-size: .92rem;
	line-height: 1.6;
}


.mc-site .mc-consent .wpcf7-list-item { margin: 0; }


.mc-site .mc-consent label {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	cursor: pointer;
}


.mc-site .mc-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 2px 0 0;
	border: 1px solid var(--ml-line-strong, rgba(18, 33, 41, .35));
	border-radius: 0;
	appearance: none;
	background: transparent;
	cursor: pointer;
	transition: background .25s var(--ml-ease), border-color .25s var(--ml-ease);
}


.mc-site .mc-consent input[type="checkbox"]:checked {
	border-color: var(--ml-green-dark);
	background: var(--ml-green-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M1 6.5 5 10.5 13 1.5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 10px;
}


.mc-site .mc-consent a { color: var(--ml-green-dark); }


.mc-site .mc-form__send { margin-top: clamp(26px, 3vw, 40px); }


/* Il pulsante di invio è un input: la freccia del pulsante non si può
   generare con ::after, quindi la disegno nel contenitore. */
.mc-site .mc-form__send {
	position: relative;
	display: inline-block;
}


.mc-site .mc-form input[type="submit"] {
	min-height: 54px;
	padding: 15px 56px 15px 28px;
	border: 1px solid var(--ml-green-dark);
	border-radius: 0;
	background: var(--ml-green-dark);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-family: var(--ml-sans);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background .35s var(--ml-ease), border-color .35s var(--ml-ease);
}


.mc-site .mc-form input[type="submit"]:hover {
	border-color: var(--ml-blue-black);
	background: var(--ml-blue-black);
}


.mc-site .mc-form__send::after {
	position: absolute;
	top: 50%;
	right: 26px;
	color: #fff;
	content: '→';
	pointer-events: none;
	transform: translateY(-50%);
	transition: transform .35s var(--ml-ease);
}


.mc-site .mc-form__send:hover::after { transform: translate(5px, -50%); }


/* Messaggi di Contact Form 7 */

.mc-site .mc-form .wpcf7-not-valid-tip {
	margin-top: 8px;
	color: #b32d2e;
	font-size: .82rem;
}


.mc-site .mc-form .wpcf7-not-valid {
	border-bottom-color: #b32d2e;
}


.mc-site .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 16px 20px !important;
	border: 1px solid var(--ml-line) !important;
	border-left: 3px solid var(--ml-green-dark) !important;
	border-radius: 0;
	background: #fff;
	font-size: .92rem;
}


.mc-site .wpcf7-form.invalid .wpcf7-response-output,
.mc-site .wpcf7-form.failed .wpcf7-response-output {
	border-left-color: #b32d2e !important;
}


.mc-site .wpcf7-spinner { margin-left: 14px; }
@media (max-width: 720px) {

	.mc-site .mc-form__grid { grid-template-columns: minmax(0, 1fr); }

	.mc-site .mc-form__send,
	.mc-site .mc-form input[type="submit"] { width: 100%; }
}


.mc-site .mc-project a.mc-plate { text-decoration: none; }

.mc-site .mc-project a.mc-plate:hover strong { color: var(--ml-green-dark); }


/* --- voci dei servizi cliccabili ---------------------------------------- */
/* Il collegamento sta sul titolo, che è il testo giusto da annunciare, ma si
   allarga a tutta la riga: il bersaglio è grande e la semantica resta pulita. */

.mc-site .mc-serv strong a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--ml-ease);
}


.mc-site .mc-serv strong a::after {
	position: absolute;
	inset: 0;
	content: '';
}


.mc-site .mc-serv:hover strong a { color: var(--ml-green-dark); }


.mc-site .mc-serv:has(a):hover::before { color: var(--ml-green-dark); }


.mc-site .mc-serv strong a:focus-visible {
	outline: 2px solid var(--ml-blue);
	outline-offset: 4px;
}


/* Icone della scala dei pubblici, misura più generosa. */
.mc-site .ml-scale__icon svg {
	width: 60px;
	height: 60px;
	stroke-width: 1.05;
}