/* ==========================================================================
   Madmedia — Form di contatto
   Stile: Figma (node 2338:16582). Comportamento hover/focus: prototipo index.html.
   Tutto è scopato su .mm-form per non toccare il resto del tema.

   Collegato ai token del tema (style.css): colori --colori-pieni-*, font
   --font-body, scala --body-sm-* / --caption-*, spaziature --spacing-*,
   raggi --mm-radius-*. Ogni var() ha il valore Figma come fallback.
   Le altezze di input/chip/bottone sono CALCOLATE dalla riga del testo
   (--body-sm-line): i token cambiano per breakpoint (18px da 1820, 28px da 2560).
   ========================================================================== */

.mm-form {
	--mm-r-pill: var(--spacing-40, 40px);
	--mm-r-area: var(--mm-radius-xl, 24px);
	--mm-ease: cubic-bezier(0.23, 1, 0.32, 1);

	box-sizing: border-box;
	width: 55%;
	padding: var(--spacing-48, 48px) var(--spacing-40, 40px) var(--spacing-40, 40px);
	background: var(--colori-pieni-bianco-default);
	border-radius: var(--mm-radius-lg, 16px);
	box-shadow: 0 0 12.5px rgba(22, 38, 64, 0.05);
	font-family: var(--font-body, 'Google Sans Flex', sans-serif);
	font-variation-settings: 'GRAD' 0, 'ROND' 0, 'wdth' 100;
	font-size: var(--body-sm-size, 16px);
	line-height: var(--body-sm-line, 20px);
	color: var(--colori-pieni-blu-300);
	-webkit-font-smoothing: antialiased;
}

.mm-form *,
.mm-form *::before,
.mm-form *::after { box-sizing: border-box; }

.mm-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-32, 32px) var(--spacing-16, 16px);
}

.mm-form__full { grid-column: 1 / -1; }

/* ---------- Campo (input / textarea) ---------- */
.mm-field {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	--c: var(--colori-pieni-blu-default);
	--c-line: var(--colori-pieni-blu-300);
	--c-border: var(--colori-pieni-blu-100, #ABB1BA); /* bordo a riposo del campo */
}

.mm-field.is-error {
	--c: var(--colori-pieni-rosso-default);
	--c-line: var(--colori-pieni-rosso-default);
	--c-border: var(--colori-pieni-rosso-default);
}

/* etichetta che compare sopra: vive nel gap tra le righe, non sposta il layout */
.mm-field__label {
	position: absolute;
	left: var(--spacing-24, 24px);
	bottom: calc(100% + var(--spacing-4, 4px));
	font-size: var(--caption-size, 12px);
	line-height: var(--caption-line, 16px);
	font-weight: var(--weight-medium, 500);
	color: var(--c);
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
    font-family: var(--font-body);
	transition: opacity 0.2s ease, transform 0.2s ease, color var(--mm-duration, 300ms) ease;
}



.mm-field.is-active .mm-field__label {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

.mm-field__wrap {
	position: relative;
	flex: 1;
	border-radius: var(--mm-r-pill);
	--x: 0px;
	--y: 0px;
	--r: 0px;
}

.mm-field--area .mm-field__wrap { border-radius: var(--mm-r-area); }
.mm-field__wrap.is-hovered { --r: 100px; }

.mm-field__control {
	display: block;
	width: 100%;
	margin: 0;
	padding: 16px var(--spacing-24, 24px);
	border: var(--spacing-1, 1px) solid var(--c-border);
	border-radius: var(--mm-r-pill);
	background: var(--colori-pieni-bianco-default);
	font: inherit;
	color: var(--c);
	outline: none;
	transition: border-color var(--mm-duration, 300ms) ease, color var(--mm-duration, 300ms) ease;
}

.mm-field__control:focus { border-color: var(--c); }

/* campo compilato (a riposo): il bordo resta dello stesso blu del testo */
.mm-field:not(.is-empty):not(.is-error) .mm-field__control { border-color: var(--colori-pieni-blu-default); }

/* Figma Input, Colore=Rosso, Stato=Hover: testo del valore rosso-400
   (bordo e label restano rosso-default via --c / --c-line). */
.mm-field.is-error:not(:focus-within) .mm-field__wrap.is-hovered .mm-field__control {
	color: var(--colori-pieni-rosso-400, #D96777);
}

/* textarea = due righe di campo + il gap (Figma: 54+32+54 = 140) */
.mm-field--area .mm-field__control {
	height: 100%;
	padding: var(--spacing-16, 16px) var(--spacing-24, 24px);
	border-radius: var(--mm-r-area);
	resize: vertical;
}

/* "placeholder" reale (esempio) che compare quando il campo è attivo */
.mm-field__control::placeholder {
	color: var(--colori-pieni-blu-300);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.mm-field.is-active .mm-field__control::placeholder {
	opacity: 0.6;
	transition-delay: 0.2s;
}

/* testo "placeholder" di Figma, che sparisce quando l'etichetta sale */
.mm-field__ph {
	position: absolute;
	left: calc(var(--spacing-24, 24px) + 1px);
	right: calc(var(--spacing-24, 24px) + 1px);
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	color: var(--colori-pieni-blu-300);
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: opacity 0.2s ease;
	transition-delay: 0.2s;
}

.mm-field--area .mm-field__ph { top: calc(var(--spacing-16, 16px) + 1px); transform: none; }

.mm-field.is-active .mm-field__ph {
	opacity: 0;
	transition-delay: 0s;
}

.mm-field.is-error .mm-field__ph { color: var(--colori-pieni-rosso-300, #E08491); } /* Figma: Default/Rosso */

/* placeholder reale in errore: rosso solo quando il campo è attivo (hover/focus) */
.mm-field.is-error.is-active .mm-field__control::placeholder {
	color: var(--colori-pieni-rosso-300, #E08491);
}

/* alone che segue il mouse sul bordo */
.mm-field__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: var(--spacing-1, 1px);
	border-radius: inherit;
	pointer-events: none;
	/* l'ultimo stop è lo stesso rosso a opacità 0 (mai "transparent": gotcha #3) */
	background: radial-gradient(
		var(--r) circle at var(--x) var(--y),
		var(--colori-pieni-blu-default),
		var(--colori-pieni-rosso-default) 50%,
		rgba(210, 74, 93, 0) 80%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.mm-field__error {
	position: absolute;
	bottom: calc(100% + var(--spacing-4, 4px));
	left: var(--spacing-24, 24px);
	right: var(--spacing-24, 24px);
	margin: 0;
	font-size: var(--caption-size, 12px);
	line-height: var(--caption-line, 16px);
	color: var(--colori-pieni-rosso-default);
}

.mm-field__error:empty { display: none; }

/* con errore il messaggio prende il posto della label sopra l'input */
.mm-field.is-error .mm-field__label { opacity: 0; transition-delay: 0s; }

/* ---------- Gruppo scelte (JellyRadio) ---------- */
.mm-choice__label {
	display: block;
	margin: 0 0 var(--spacing-8, 8px);
	padding-left: var(--spacing-24, 24px); /* stessa indentazione delle label dei campi */
	font-family: var(--font-body);
	font-size: var(--caption-size, 12px);
	line-height: var(--caption-line, 16px);
	font-weight: var(--weight-medium, 500); /* stesso peso delle label dei campi */
	color: var(--colori-pieni-blu-default);
}

.mm-jelly {
	/* altezza chip = riga testo + padding 8+8 + bordo 1+1  (Figma: 20+18 = 38) */
	--jr-h: calc(var(--body-sm-line, 20px) + var(--spacing-16, 16px) + 2px);
	--jr-font: var(--body-sm-size, 16px);
	--jr-px: var(--spacing-12, 12px);
	--jr-gap: var(--spacing-8, 8px);
	--jr-radius: var(--mm-radius-full, 999px);
	--jr-pad-x: 16px;
	--jr-pad-y: 4px;
	--jr-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jr-gap);
	/* margini negativi: lo spazio per l'espansione non sposta il layout di Figma */
	margin-top: calc(-1 * var(--jr-pad-y));
	margin-bottom: calc(-1 * var(--jr-pad-y));
	padding: var(--jr-pad-y) var(--jr-pad-x) var(--jr-pad-y) 0;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.mm-jelly[data-disabled] { opacity: 0.5; pointer-events: none; }

.mm-jelly__chip {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	outline: none;
	transform-origin: 50% 50%;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.mm-jelly__skin {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--jr-h);
	padding: 0 var(--jr-px);
	border: var(--spacing-1, 1px) solid var(--colori-pieni-blu-100);
	border-radius: var(--jr-radius);
	background: transparent;
	color: var(--colori-pieni-blu-300);
	font-size: var(--jr-font);
	line-height: var(--body-sm-line, 20px);
	white-space: nowrap;
	transition: transform 160ms var(--jr-ease-out), background-color 200ms ease,
		border-color 200ms ease, color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.mm-jelly__chip[data-on='false']:hover .mm-jelly__skin {
		border-color: var(--colori-pieni-blu-default);
		color: var(--colori-pieni-blu-default);
	}
}

.mm-jelly__chip:active .mm-jelly__skin { transform: scale(0.97); }

.mm-jelly__chip[data-on='true'] .mm-jelly__skin {
	background: linear-gradient(135deg, var(--colori-pieni-blu-default), var(--colori-pieni-rosso-default));
	background-origin: border-box;
	border-color: transparent;
	color: var(--colori-pieni-bianco-default);
}

.mm-jelly__chip:focus-visible .mm-jelly__skin {
	box-shadow: 0 0 0 2px var(--colori-pieni-bianco-default), 0 0 0 4px var(--colori-pieni-blu-default);
}

/* ---------- Checkbox ---------- */
.mm-checks {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8, 8px);
}

.mm-check { position: relative; }

.mm-check__row {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-4, 4px);
	cursor: pointer;
	font-size: var(--caption-size, 12px);
	line-height: calc(var(--caption-size, 12px) + 2px);
	color: var(--colori-pieni-blu-300);
}

.mm-check__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mm-check__box {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-16, 16px);
	height: var(--spacing-16, 16px);
	margin-top: -1px;
	border: var(--spacing-1, 1px) solid var(--colori-pieni-blu-300);
	border-radius: var(--mm-radius-sm, 4px);
	color: var(--colori-pieni-bianco-default);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mm-check__box svg {
	width: var(--spacing-8, 8px);
	height: var(--spacing-8, 8px);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.2s ease, transform 0.25s var(--mm-ease);
}

@media (hover: hover) and (pointer: fine) {
	.mm-check__row:hover .mm-check__box { border-color: var(--colori-pieni-blu-default); }
}

.mm-check__input:checked + .mm-check__box {
	background: linear-gradient(135deg, var(--colori-pieni-blu-default), var(--colori-pieni-rosso-default));
	border-color: transparent;
}

.mm-check__input:checked + .mm-check__box svg { opacity: 1; transform: scale(1); }

.mm-check__input:focus-visible + .mm-check__box {
	box-shadow: 0 0 0 2px var(--colori-pieni-bianco-default), 0 0 0 4px var(--colori-pieni-blu-default);
}

.mm-check.is-error .mm-check__box { border-color: var(--colori-pieni-rosso-default); }

/* errore: prende il posto del titolo "Cosa possiamo fare per te?" */
.mm-choice .mm-field__error { position: static; margin: 0 0 var(--spacing-8, 8px); padding-left: var(--spacing-24, 24px); line-height: var(--caption-line, 16px); }
.mm-choice.is-error .mm-choice__label { display: none; }
.mm-check .mm-field__error { position: static; margin: var(--spacing-4, 4px) 0 0 var(--spacing-20, 20px); }

.mm-check__row a { color: inherit; text-decoration: underline; }

/* ---------- Pulsante ---------- */
.mm-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: var(--spacing-12, 12px) var(--spacing-32, 32px);
	border: 0;
	border-radius: var(--mm-r-pill);
	/* angolo da Figma (22.53°): diverso da --gradient-brand (111°), quindi non lo riuso */
	background-image: linear-gradient(22.53deg, var(--colori-pieni-blu-default) 25%, var(--colori-pieni-rosso-default) 100%);
	color: var(--colori-pieni-bianco-default);
	font: inherit;
	cursor: pointer;
	overflow: hidden;
	transition: opacity 0.2s ease, transform 160ms var(--mm-ease);
}

.mm-btn:active { transform: scale(0.985); }

.mm-btn:focus-visible { outline: 2px solid var(--colori-pieni-blu-default); outline-offset: 3px; }

.mm-btn[disabled] { opacity: 0.6; cursor: default; pointer-events: none; }

/* due copie del testo sovrapposte (come in Figma): all'hover la prima scorre via */
.mm-btn__text {
	display: block;
	height: var(--body-sm-line, 20px);
	overflow: hidden;
	text-transform: uppercase;
	white-space: nowrap;
}

.mm-btn__text > span {
	display: block;
	height: var(--body-sm-line, 20px);
	line-height: var(--body-sm-line, 20px);
	transition: transform 0.45s var(--mm-ease);
}

@media (hover: hover) and (pointer: fine) {
	.mm-btn:hover .mm-btn__text > span { transform: translateY(-100%); }
}

.mm-btn:focus-visible .mm-btn__text > span { transform: translateY(-100%); }

/* ---------- Esito invio ---------- */
.mm-form__status {
	margin: 0;
	font-size: var(--body-sm-size, 16px);
	line-height: var(--body-sm-line, 20px);
	color: var(--colori-pieni-blu-default);
}

.mm-form__status:empty { display: none; }
.mm-form__status.is-error { color: var(--colori-pieni-rosso-default); }

/* honeypot: fuori schermo, non display:none */
.mm-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Mobile (stesso breakpoint dei token: < 768px) ---------- */
@media (max-width: 767px) {
	.mm-form { padding: var(--spacing-32, 32px) var(--mm-container-pad, 20px) var(--spacing-24, 24px); }
	.mm-form__grid { grid-template-columns: 1fr; gap: var(--spacing-28, 28px); }
	.mm-form__full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-form *,
	.mm-form *::before,
	.mm-form *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
	.mm-btn:active,
	.mm-jelly__chip:active .mm-jelly__skin { transform: none; }
}

.mm-contatti {
	padding: 160px 0px;
}

/* Breadcrumb "Home · Contatti": in flusso dentro .mm-contatti__inner,
   come .mm-post__breadcrumb negli articoli (single-post.css), cosi'
   rispetta i padding del contenitore. */
.mm-contatti__breadcrumb {
	display:     flex;
	align-items: center;
	flex-wrap:   nowrap;
	width: 55%;
	gap:         var(--spacing-8, 8px);
	color:       var(--colori-pieni-blu-300, #616B7D);
	font-family: var(--font-body);
	font-size:   var(--body-sm-size);
	line-height: var(--body-sm-line);
	margin-bottom: var(--spacing-80);
}

.mm-contatti__breadcrumb a {
	flex-shrink:     0;
	color:           inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	transition: background-size 0.6s var(--mm-ease), color 0.2s ease;
}

.mm-contatti__breadcrumb a:hover {
	color:           var(--colori-pieni-blu-default);
	background-size: 100% 1.5px;
}

.mm-contatti__breadcrumb > span[aria-hidden] {
	flex-shrink: 0;
}

/* Titolo "Contattaci": stile H3 (Lota Grotesque) */
.mm-contatti__title {
	width: 55%; /* come breadcrumb e form */
	margin: 0;
	padding-bottom: var(--spacing-40, 40px);
	color: var(--colori-pieni-blu-default, #162640);
	font-family: var(--font-heading);
	font-size: var(--h3-size);
	font-style: normal;
	font-weight: var(--weight-regular, 400);
	line-height: var(--h3-line);
}

.mm-contatti__subtitle{
	margin: 0;
	padding-bottom: var(--spacing-40, 40px);
	color: var(--colori-pieni-blu-default, #162640);
	font-family: var(--font-heading);
	font-size: var(--h4-size);
	font-style: normal;
	font-weight: var(--weight-regular, 400);
	line-height: var(--h4-line);
}

/* Spazio immagine sotto il form, nella stessa colonna */
.mm-contatti__image {
	width: 55%;
	margin-top: var(--spacing-40, 40px);
	aspect-ratio: 16 / 10;
	background: var(--colori-pieni-grigio-200, #E2DED9);
	border-radius: var(--spacing-12, 12px);
	overflow: hidden;
}

.mm-contatti__image iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Contatti rapidi: sotto l'immagine, stessa colonna */
.mm-contatti__rapidi {
	width: 55%;
	padding-top: var(--spacing-40, 40px);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40, 40px);
}

.mm-contatti__rapidi-title {
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
	font-family: var(--font-heading);
	font-weight: var(--weight-regular, 400);
	font-size: var(--h4-size);
	line-height: var(--h4-line);
}

.mm-contatti__rapidi-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24, 24px);
}

.mm-contatti__rapidi-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-16, 16px);
	padding-bottom: var(--spacing-8, 8px);
	border-bottom: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
}

.mm-contatti__rapidi-row dt {
	width: 120px;
	flex-shrink: 0;
	color: var(--colori-pieni-blu-300, #616B7D);
	font-family: var(--font-body);
	font-size: var(--caption-size);
	line-height: var(--caption-line);
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.mm-contatti__rapidi-row dd {
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	text-align: right;
}

.mm-contatti__rapidi-row dd a {
	color: inherit;
	text-decoration: none;
}

/* Video "Se arrivi da": 3 card, hover = play (desktop), click = popup (tablet/mobile) */
.mm-contatti__video-section {
	width: 55%;
	padding-top: var(--spacing-40, 40px);
	display: flex;
	gap: var(--spacing-8, 8px);
}

.mm-contatti__video {
	position: relative;
	flex: 1 1 0;
	min-width: 1px;
	aspect-ratio: 9 / 16;
	padding: var(--spacing-16, 16px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	overflow: hidden;
	border: 0;
	border-radius: var(--spacing-12, 12px);
	background: var(--colori-pieni-grigio-200, #E2DED9) var(--mm-poster, none) center / cover no-repeat;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-body);
}

.mm-contatti__video-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mm-contatti__video.is-playing .mm-contatti__video-el { opacity: 1; }

.mm-contatti__video-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: opacity 0.3s ease;
}

/* Il testo sparisce quando passi sulla CARD (non sul testo stesso) e parte il
   video: solo in modalita' hover (desktop), come in contatti-video.js. */
@media (min-width: 1081px) and (hover: hover) {
	.mm-contatti__video:hover .mm-contatti__video-text,
	.mm-contatti__video.is-playing .mm-contatti__video-text {
		opacity: 0;
	}
}

.mm-contatti__video-label {
	width: 120px;
	color: var(--colori-pieni-blu-300, #616B7D);
	font-size: var(--caption-size);
	line-height: var(--caption-line);
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.mm-contatti__video-name {
	color: var(--colori-pieni-blu-default, #162640);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
}

/* popup video (tablet e mobile) */
.mm-video-modal {
	/* si adatta al video (niente bande ai lati), senza uscire dallo schermo */
	width: fit-content;
	max-width: 92vw;
	/* il reset globale azzera i margin: senza "auto" il dialog finisce in alto a sinistra */
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--spacing-12, 12px);
	background: var(--colori-pieni-blu-default, #162640);
	overflow: hidden;
}

.mm-video-modal::backdrop { background: rgba(22, 38, 64, 0.7); }

.mm-video-modal__video {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 85vh;
	max-height: 85dvh;
}

.mm-video-modal__close {
	position: absolute;
	top: var(--spacing-8, 8px);
	right: var(--spacing-8, 8px);
	z-index: 1;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--colori-pieni-bianco-default);
	color: var(--colori-pieni-blu-default, #162640);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 767px) {
	.mm-contatti__video-section { flex-direction: column; }
	.mm-contatti__video { flex: none; width: 100%; }
}

/* Gallery: 2 immagini sopra, 1 grande sotto */
.mm-contatti__gallery {
	width: 55%;
	padding-top: var(--spacing-40, 40px);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16, 16px);
}

.mm-contatti__gallery-row {
	display: flex;
	gap: var(--spacing-16, 16px);
}

.mm-contatti__gallery-img {
	flex: 1 1 0;
	min-width: 1px;
	aspect-ratio: 708 / 640; /* proporzioni della galleria di Agenzia (1432px: 708x640) */
	overflow: hidden;
	border-radius: var(--spacing-16, 16px);
	background: var(--colori-pieni-grigio-200, #E2DED9);
}

.mm-contatti__gallery-img--wide { flex: none; width: 100%; aspect-ratio: 1432 / 800; }

.mm-contatti__gallery-img { position: relative; }

.mm-contatti__gallery-img img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* stesse proporzioni responsive della galleria di Agenzia (page-agenzia.css) */
@media (max-width: 1080px) {
	.mm-contatti__gallery-img { width: 100%; aspect-ratio: 336 / 320; }
	.mm-contatti__gallery-img--wide { aspect-ratio: 688 / 480; }
}

@media (max-width: 767px) {
	.mm-contatti__gallery,
	.mm-contatti__gallery-row { gap: var(--spacing-8, 8px); }
	.mm-contatti__gallery-img { aspect-ratio: 163 / 160; }
	.mm-contatti__gallery-img--wide { aspect-ratio: 335 / 240; }
}

.mm-contatti__inner {
	margin-inline: auto;
	display: flex;
    flex-direction: column;
    align-items: center;
}
/* Larghezza colonna pagina Contatti: tablet 70%, mobile 100% */
@media (min-width: 768px) and (max-width: 1080px) {
	.mm-contatti__breadcrumb,
	.mm-contatti__title,
	.mm-form,
	.mm-contatti__image,
	.mm-contatti__rapidi,
	.mm-contatti__video-section,
	.mm-contatti__gallery { width: 70%; }
	.mm-prefooter__desc{
		text-align: center;
	}
	.mm-prefooter__title{
		text-align: center;
	}
}


/* Pagina "Richiedi demo": colonna unica con titolo, form e contatti rapidi */
.mm-contatti__col {
	width: 55%;
	display: flex;
	flex-direction: column;
}

.mm-contatti__col > .mm-contatti__breadcrumb,
.mm-contatti__col > .mm-contatti__title,
.mm-contatti__col > .mm-form,
.mm-contatti__col > .mm-contatti__rapidi,
.mm-contatti__col > .mm-contatti__video-section,
.mm-contatti__col > .mm-contatti__gallery { width: 100%; }

@media (min-width: 768px) and (max-width: 1080px) { .mm-contatti__col { width: 70%; } }
@media (max-width: 767px) { .mm-contatti__col { width: 100%; } }

/* ---------- Prefooter (componente riutilizzabile) ---------- */
.mm-prefooter {
	display: grid;
	grid-template-columns: 1fr 1fr; /* stessa griglia di .mm-footer__top */
	align-items: center;
	gap: var(--spacing-40, 40px);
	padding: var(--spacing-80, 80px) var(--spacing-40, 40px);
	background: var(--colori-pieni-bianco-600, #EAE7E3);
}

.mm-prefooter__text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16, 16px);
}

.mm-prefooter__title {
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
	font-family: var(--font-heading);
	font-weight: var(--weight-regular, 400);
	font-size: var(--h5-size);
	line-height: var(--h5-line);
}

.mm-prefooter__desc {
	margin: 0;
	color: var(--colori-pieni-blu-400, #3B495F);
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
}

.mm-prefooter .mm-form {
	width: 100%;
	min-width: 0;
}

@media (max-width: 1080px) {
	.mm-prefooter { grid-template-columns: 1fr; align-items: stretch; }
}


@media (max-width: 767px) {
	.mm-contatti__breadcrumb,
	.mm-contatti__title,
	.mm-form,
	.mm-contatti__image,
	.mm-contatti__rapidi,
	.mm-contatti__video-section,
	.mm-contatti__gallery { width: 100%; }
	.mm-prefooter{
		padding-left: 20px;
		padding-right: 20px;
	}
	.mm-contatti{
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 80px;
	}
}

/* ---------- Select (menu a tendina) ---------- */
select.mm-field__control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: calc(var(--spacing-24, 24px) + 24px);
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5 11 1.5' stroke='%23616B7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--spacing-24, 24px) center;
	text-overflow: ellipsis;
}

/* Menu a tendina: il primo <option> e' vuoto. L'esempio (.mm-field__ex) fa da
   placeholder e compare solo con hover/focus a campo vuoto, come negli altri campi. */
.mm-field__ex {
	position: absolute;
	left: calc(var(--spacing-24, 24px) + 1px);
	right: calc(var(--spacing-24, 24px) + 24px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	overflow: hidden;
	color: var(--colori-pieni-blu-300, #616B7D);
	font: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.mm-field.is-active.is-empty .mm-field__ex { opacity: 0.6; transition-delay: 0.2s; }
/* stesso effetto senza dipendere dalle classi JS (hover/focus + nessuna scelta) */
.mm-field__wrap:hover select:has(option[value=""]:checked) ~ .mm-field__ex,
.mm-field__wrap:focus-within select:has(option[value=""]:checked) ~ .mm-field__ex { opacity: 0.6; transition-delay: 0.2s; }
.mm-field.is-error .mm-field__ex { color: var(--colori-pieni-rosso-300, #E08491); }
select.mm-field__control option { color: var(--colori-pieni-blu-default, #162640); }

/* ---------- Upload file (curriculum / portfolio) ---------- */
.mm-form__half { grid-column: span 1; }

.mm-file { position: relative; }

.mm-file__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mm-file__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16, 16px);
	padding: var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-24, 24px);
	border: var(--spacing-1, 1px) solid var(--colori-pieni-blu-100, #ABB1BA);
	border-radius: var(--mm-r-pill);
	background: var(--colori-pieni-bianco-default);
	color: var(--colori-pieni-blu-300, #616B7D);
	font: inherit;
	cursor: pointer;
	transition: border-color var(--mm-duration, 300ms) ease, color var(--mm-duration, 300ms) ease;
}

.mm-file__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* pulsante "Allega" (Figma Input CTA): stesso gradiente e stesso scorrimento testo di .mm-btn */
.mm-file__cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-12, 12px) var(--spacing-32, 32px);
	border-radius: var(--mm-r-pill);
	background-image: linear-gradient(68.39deg, var(--colori-pieni-blu-default) 25%, var(--colori-pieni-rosso-default) 100%);
	color: var(--colori-pieni-bianco-default);
	overflow: hidden;
}

.mm-file__cta-text {
	display: block;
	height: var(--body-sm-line, 20px);
	overflow: hidden;
	text-transform: none; /* solo "Allega": prima lettera maiuscola, resto minuscolo */
	white-space: nowrap;
}

.mm-file__cta-text > span {
	display: block;
	height: var(--body-sm-line, 20px);
	line-height: var(--body-sm-line, 20px);
	transition: transform 0.45s var(--mm-ease);
}

@media (hover: hover) and (pointer: fine) {
	.mm-file__btn:hover .mm-file__cta-text > span { transform: translateY(-100%); }
}

.mm-file__input:focus-visible + .mm-file__btn .mm-file__cta-text > span { transform: translateY(-100%); }

.mm-file__btn:hover,
.mm-file__input:focus-visible + .mm-file__btn { border-color: var(--colori-pieni-blu-400, #3B495F); color: var(--colori-pieni-blu-400, #3B495F); }
.mm-file.has-file .mm-file__btn { border-color: var(--colori-pieni-blu-default, #162640); color: var(--colori-pieni-blu-default, #162640); }
.mm-file.is-error .mm-file__btn { border-color: var(--colori-pieni-rosso-default); color: var(--colori-pieni-rosso-default); }

@media (max-width: 767px) {
	.mm-form__half { grid-column: auto; }
	.mm-prefooter__title{
		text-align: center;
	}
	.mm-prefooter__desc{
		text-align: center;
	}
}


@media (min-width: 2560px) {
	.mm-contatti__gallery-img { aspect-ratio: 1232 / 960; }
	.mm-contatti__gallery-img--wide { aspect-ratio: 2480 / 1200; }
	.mm-prefooter{
		padding: 80px 80px;
	}
	.mm-field__control{
		padding-top:24px ;
		padding-bottom: 24px;
	}
	.mm-file__btn{
		padding-top:12px ;
		padding-bottom: 12px;
	}
}

/* ============================================================
   Posizioni aperte (single-job_position.php) — Figma 2593:9710
   ============================================================ */
.mm-job__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40, 40px);
	width: 100%;
}
.mm-job__section { margin: 0; }
.mm-job__title {
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
	font-family: var(--font-heading);
	font-weight: var(--weight-regular, 400);
	font-style: normal;
}
.mm-job__text,
.mm-job__list {
	color: var(--colori-pieni-blu-300, #616B7D);
}
.mm-job__text p { margin: 0; }
.mm-job__list {
	margin: 0;
	padding-left: 1.5em;
	list-style: disc outside;
}
.mm-job__list li {
	display: list-item;
	list-style: disc outside;
}
.mm-job__list li::marker { color: currentColor; }
.mm-job__cta {
	width: 100%;
	margin: var(--spacing-40, 40px) 0;
}
.mm-job__cta .mm-job__btn {
	width: 100%;
	justify-content: center;
}
.mm-job__where { scroll-margin-top: 100px; margin-top: var(--spacing-40, 40px); }
.mm-job__where > .mm-contatti__image { margin-top: 0; }

/* Il blocco "dove siamo" deve avere la stessa larghezza del resto della colonna */
.mm-job__where {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.mm-job__where > .mm-contatti__image,
.mm-job__where > .mm-contatti__rapidi,
.mm-job__where > .mm-contatti__video-section,
.mm-job__where > .mm-contatti__gallery { width: 100%; }

/* Titolo sopra il form candidatura */
.mm-job__form-title { margin: 0 0 var(--spacing-40, 40px); }

/* ============================================================
   Box posizioni aperte in "Lavora con noi" — Figma 2589:9200
   Sfondo = gradiente standard del sito (--sfondo-piccolo) + grana;
   posizioni = pulsante .btn--bianco standard (hover incluso), con
   misure personalizzate solo qui.
   ============================================================ */
.mm-positions-box {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40, 40px);
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 var(--spacing-40, 40px);
	padding: var(--spacing-40, 40px);
	border-radius: var(--spacing-16, 16px);
	background-image: var(--sfondo-piccolo);
}
/* Grana: stessa texture dei bottoni/tag gradiente */
.mm-positions-box::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0.1;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
	background-repeat: repeat;
	background-size: 120px 120px;
}
.mm-positions-box__title {
	margin: 0;
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	font-family: var(--font-heading);
	font-weight: var(--weight-regular, 400);
	font-style: normal;
}
.mm-positions {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8, 8px);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-positions__item { margin: 0; padding: 0; list-style: none; }

/* Pulsante bianco standard, solo misure/testo diversi in questa pagina */
.btn.mm-positions__btn {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-16, 16px);
	width: 100%;
	box-sizing: border-box;
	padding: var(--spacing-24, 24px) var(--spacing-32, 32px) var(--spacing-24, 24px) var(--spacing-24, 24px);
	border-radius: var(--spacing-16, 16px);
	text-align: left;
}
.mm-positions__btn .btn__label {
	justify-content: flex-start;
	height: var(--h6-line);
}
.mm-positions__btn .btn__label-inner { align-items: flex-start; }
.mm-positions__btn .btn__label-text {
	height: var(--h6-line);
	font-family: var(--font-heading);
	font-size: var(--h6-size);
	line-height: var(--h6-line);
	white-space: nowrap;
	text-align: left;
}
.mm-positions__arrow { position: relative; z-index: 1; flex: 0 0 auto; color: var(--colori-pieni-blu-default, #162640); }

/* Anche quando mm-animations.js aggiunge .mm-btn--wrap (testo centrato): qui resta a sinistra */
.btn.mm-btn--wrap.mm-positions__btn .btn__label { justify-content: flex-start; width: auto; }
.btn.mm-btn--wrap.mm-positions__btn .btn__label-inner { align-items: flex-start; width: auto; }
.btn.mm-btn--wrap.mm-positions__btn .btn__label-text { text-align: left; width: auto; }

@media (max-width: 767px) {
	.mm-positions-box { padding: var(--spacing-24, 24px); gap: var(--spacing-24, 24px); }
	.mm-positions__btn .btn__label { height: auto; }
	.mm-positions__btn .btn__label-text { height: auto; white-space: normal; text-align: left; }
}

/* Posizioni aperte: testo in maiuscolo/minuscolo come scritto, non tutto maiuscolo */
.mm-positions__btn,
.mm-positions__btn .btn__label,
.mm-positions__btn .btn__label-text { text-transform: none; }

/* ============================================================
   Menu a tendina personalizzato — Figma Design System 1583:176
   (solo <select data-mm-select>, vedi assets/js/mm-select.js)
   ============================================================ */
/* il popup di sistema non deve aprirsi: il clic lo gestisce il wrapper */
select.mm-select-enhanced { pointer-events: none; }

.mm-select__panel {
	position: absolute;
	top: calc(100% + var(--spacing-8, 8px));
	left: 0;
	right: 0;
	z-index: 30;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4, 4px);
	max-height: min(320px, 50vh);
	overflow-y: auto;
	scrollbar-width: none; /* scorribile ma senza barra */
	-ms-overflow-style: none;
	padding: var(--spacing-12, 12px);
	background: var(--colori-pieni-bianco-default, #F0EEEA);
	border: var(--spacing-1, 1px) solid var(--colori-pieni-blu-100, #ABB1BA);
	border-radius: var(--spacing-16, 16px);
	box-shadow: 0 0 12.5px rgba(22, 38, 64, 0.05);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.mm-select__panel[hidden] { display: none; }
.mm-select__panel.is-visible { opacity: 1; transform: none; }
.mm-select__panel.is-up { top: auto; bottom: calc(100% + var(--spacing-8, 8px)); transform: translateY(4px); }
.mm-select__panel.is-up.is-visible { transform: none; }

.mm-select__option {
	padding: var(--spacing-8, 8px);
	border-radius: var(--spacing-8, 8px);
	color: var(--colori-pieni-blu-300, #616B7D);
	font-family: var(--font-body);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mm-select__option.is-active {
	background: var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
	color: var(--colori-pieni-blu-default, #162640);
}
.mm-select__option[aria-selected="true"] { color: var(--colori-pieni-blu-default, #162640); }

@media (prefers-reduced-motion: reduce) {
	.mm-select__panel, .mm-select__option { transition: none; }
}

/* Freccia del menu personalizzato (stessa icona ">" dei pulsanti): punta in giu', in su quando e' aperto */
select.mm-select-enhanced { background-image: none; }
.mm-select__arrow {
	position: absolute;
	top: 50%;
	right: var(--spacing-24, 24px);
	z-index: 2;
	display: flex;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	color: var(--colori-pieni-blu-300, #616B7D);
	pointer-events: none;
	transform: rotate(90deg);
	transition: transform 0.25s ease, color var(--mm-duration, 300ms) ease;
}
.mm-field__wrap.is-open .mm-select__arrow { transform: rotate(-90deg); }
.mm-field.is-error .mm-select__arrow { color: var(--colori-pieni-rosso-default, #D24A5D); }
@media (prefers-reduced-motion: reduce) {
	.mm-select__arrow { transition: none; }
}

.mm-select__panel::-webkit-scrollbar { display: none; }

/* Sfumatura in fondo al pannello quando c'e' altro da scorrere */
.mm-select__fade {
	display: none;
	position: sticky;
	bottom: 0;
	flex: 0 0 auto;
	height: 44px;
	margin-top: -44px;
	background: linear-gradient(to bottom, rgba(240, 238, 234, 0), rgba(240, 238, 234, 0.85));
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.mm-select__panel.has-more .mm-select__fade { display: block; }
.mm-select__panel.has-more.is-end .mm-select__fade { opacity: 0; }

/* La sfumatura deve toccare il bordo inferiore del pannello (nessuno spazio sotto):
   con altro da scorrere il padding in basso diventa margine dell'ultima voce. */
.mm-select__panel.has-more { padding-bottom: 0; }
.mm-select__panel.has-more .mm-select__option:nth-last-child(2) { margin-bottom: var(--spacing-12, 12px); }

/* Mappa: il plugin cookie (classi cmplz-…) imposta height:inherit sull'iframe, ma il riquadro
   ha l'altezza data da aspect-ratio e non da height, quindi la mappa restava alta ~150px
   con il resto grigio. Qui l'iframe e il suo eventuale contenitore riempiono sempre il riquadro. */
.mm-contatti__image iframe,
.cmplz-placeholder-parent{
	width: 100% !important;
	height: 100% !important;
}

/* Lavora con noi: la mappa occupa tutta la larghezza della colonna (come il form), non il 55% */
.mm-contatti--lavora .mm-contatti__col > .mm-contatti__image { width: 100%; }

/* Posizione aperta: su tablet e mobile il breadcrumb resta su una riga e si scorre in orizzontale
   (come negli articoli), invece di andare a capo. Solo single-job_position (main.mm-job). */
@media (max-width: 1080px) {
	.mm-job .mm-contatti__breadcrumb {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mm-job .mm-contatti__breadcrumb::-webkit-scrollbar { display: none; }
	.mm-job .mm-contatti__breadcrumb > * {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* Breadcrumb della posizione: sfumatura sul lato dove c'e' altro da scorrere */
@media (max-width: 1080px) {
	.mm-job .mm-contatti__breadcrumb.has-more-right {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	}
	.mm-job .mm-contatti__breadcrumb.has-more-left {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 56px);
		mask-image: linear-gradient(to right, transparent, #000 56px);
	}
	.mm-job .mm-contatti__breadcrumb.has-more-left.has-more-right {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
	}
}

/* Pagina Richiedi demo: sezioni MadReport / MadCheck dentro la colonna
   (stessa larghezza di breadcrumb, titolo e form). Stesso aspetto della
   pagina MadSuite (.mm-madsuite-product) ma impilato in colonna. */
.mm-contatti__col > .mm-demo-product { width: 100%; }
.mm-demo-product {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24, 24px);
	padding-top: var(--spacing-80, 80px);
	padding-bottom: 40px;
}
.mm-demo-product__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-24, 24px);
}
.mm-demo-product__rating { width: auto; }
.mm-demo-product__title {
	margin: 0;
	width: 100%;
	color: var(--colori-pieni-blu-default, #162640);
}
.mm-demo-product__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--spacing-16, 16px);
	background-color: var(--colori-pieni-grigio-100, #EDEAE6);
	border: 1px solid var(--colori-pieni-grigio-200, #E2DED9);
	overflow: hidden;
}
.mm-demo-product__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-demo-product__desc {
	margin: 0;
	color: var(--colori-pieni-blu-300, #616B7D);
	letter-spacing: 0.05em;
}
@media (max-width: 767px) {
	.mm-demo-product { padding-top: var(--spacing-40, 40px);
	align-items: flex-start; display: flex;}
	.mm-demo-product__head { align-items: left; }
	.mm-demo-product__title,
	.mm-demo-product__desc { text-align: left; }
}