/* Caratteri di riserva con le misure di Inter e Inter Tight: Arial (o la sua
   equivalente Liberation Sans) ridimensionata in larghezza. Se il carattere del
   tema non e' ancora arrivato (font-display: optional) il testo va a capo come
   con Inter: righe e posizioni uguali alla prima e alle visite successive.
   Rapporti misurati sui testi del sito nelle tre lingue. */
@font-face {
	font-family: "Inter Fallback";
	font-weight: 400;
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica"), local("Arimo");
	size-adjust: 106.6%;
}

@font-face {
	font-family: "Inter Fallback";
	font-weight: 600;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Arimo Bold");
	size-adjust: 101%;
}

@font-face {
	font-family: "Inter Tight Fallback";
	font-weight: 600;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Arimo Bold");
	size-adjust: 93.1%;
}

@font-face {
	font-family: "Inter Tight Fallback";
	font-weight: 700 900;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Arimo Bold");
	size-adjust: 95.3%;
}

:root {
	--twmp-blob: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.0002 89'%3E%3Cpath d='M100.016,7.3972C90.2452,1.22,73.3084-3.6663,64.4255,3.7126,56.9836,9.89,62.0469,18.9174,55.01,25.3032c-10.6,9.6134-28.1589-5.4423-41.8584,2.6318C.6757,35.2543-4.2791,59.1489,4.2781,73.7975c13.1369,22.524,53.13,13.8541,61.1936,12.1061,4.5007-.9931,53.4953-12.265,55.4693-42.7043C121.898,28.2528,111.1,14.4185,100.016,7.3972Z'/%3E%3C/svg%3E");
}

/*
 * Tema WordPress Multi-portale - stili del tema.
 * I colori/spaziature derivano dai token in theme.json (var(--wp--preset--*),
 * var(--wp--custom--*)): nessun valore hardcoded qui, salvo rapporti (percentuali
 * di color-mix), tempi di transizione e le poche misure di layout non esprimibili
 * via Global Styles.
 */

:root {
	/* Bordo inferiore dell'header sticky: ancora il drawer mobile sotto l'header,
	   cosi' il marchio resta sempre visibile. Stima: il valore vero lo misura
	   app.js all'apertura del menu (l'altezza cambia con larghezza e logo). */
	--twmp-header-height: 4.5rem;
	/* Testo attenuato: contrasto >= 4.5:1 su sfondo e superficie. */
	--twmp-muted: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, var(--wp--preset--color--base));
	/* Tinta leggera del primario per pillole e sfondi soft. */
	--twmp-primary-soft: color-mix(in srgb, var(--wp--preset--color--primary) 9%, var(--wp--preset--color--base));
	--twmp-primary-ring: color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent);
}

/* <picture> intorno alle immagini (copia AVIF, inc/picture.php): trasparente per
   l'impaginazione, l'immagine resta figlia diretta del suo riquadro (flex, grid,
   posizionamento assoluto). Le <source> vanno nascoste: non lo sono di natura e
   in un riquadro flex o grid diventerebbero elementi vuoti con il loro spazio.
   La scelta della variante non dipende dagli stili. */
picture {
	display: contents;
}

picture > source {
	display: none;
}

/* Immagini e elenchi del tema come blocchi del core (modificabili dall'editor):
   niente margini e stili predefiniti del blocco, valgono quelli dei componenti
   (regole con .wp-block-image.<componente> accanto a quelle storiche). */
.wp-block-image:is(.twmp-split__media, .twmp-card__cover, .twmp-unit__logo, .twmp-card__logo, .twmp-split__badge-wrap, .twmp-hero__media, .twmp-expertise__bg, .twmp-band-dark__bg) {
	margin-inline: 0;
	margin-block-end: 0;
}

.wp-block-image:is(.twmp-split__media, .twmp-card__cover, .twmp-unit__logo, .twmp-card__logo, .twmp-split__badge-wrap, .twmp-hero__media, .twmp-expertise__bg, .twmp-band-dark__bg) img {
	box-sizing: content-box;
}

.wp-block-list:is(.twmp-sector-list, .twmp-checklist, .twmp-steps) {
	padding-inline-start: 0;
}

/* Titoli a righe bilanciate e testi senza una parola sola in fondo: le righe
   restano regolari in ogni lingua (le traduzioni hanno lunghezze diverse).
   :where() non pesa: le regole dei singoli elementi restano prevalenti. */
:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li, figcaption, summary) {
	text-wrap: pretty;
}

/* =========================================================================
   Header (barra bianca sticky: logo + marchio, navigazione, CTA nel menu)
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	/* Deve stare sopra l'overlay della navigazione mobile del core. */
	z-index: 100001;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}

/* Sul desktop la barra respira come nel sito di partenza; su mobile resta
   compatta perche' l'offset del pannello del menu dipende dalla sua altezza. */
@media (min-width: 782px) {
	.site-header {
		padding-block: var(--wp--preset--spacing--60);
	}
}

/* Larghezze fisse per logo, selettore lingua, supporto e pulsante: cambiando
   lingua si adatta solo il menu, il resto della barra resta fermo. Le misure
   coprono la traduzione piu' lunga (spagnolo). */
.site-header__brand {
	flex-shrink: 0;
}

.site-header .twmp-lang__current {
	box-sizing: border-box;
	min-width: 5.5rem;
	justify-content: center;
}

@media (min-width: 1300px) {
	.site-header__support {
		min-width: 9.5rem;
	}

	.site-header__cta .twmp-cta .wp-block-button__link {
		min-width: 14rem;
		justify-content: center;
	}
}

.site-header__brand .wp-block-site-logo img {
	height: 2.75rem;
	width: auto;
	display: block;
}

/* Il menu occupa lo spazio accanto al marchio e parte sempre dallo stesso
   punto, subito dopo il logo: cambiando lingua la prima voce non si sposta. */
.site-header__nav {
	flex: 1 1 auto;
	justify-content: flex-start;
}

@media (min-width: 900px) {
	.site-header .site-header__nav {
		margin-inline-start: var(--wp--preset--spacing--50);
	}
}

.site-header__brand .wp-block-site-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--hero);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.site-header__brand .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}

.site-header .wp-block-navigation-item__content {
	font-weight: 600;
	/* Una voce non va mai a capo: se la barra non basta si passa alla tendina. */
	white-space: nowrap;
}


/* Selettore lingua: tendina con bandiere. Il pulsante mostra bandiera e sigla
   della lingua corrente, l'elenco le lingue con il loro nome. In barra da
   tablet in su, in cima al menu a tendina su smartphone. */
.twmp-lang {
	position: relative;
	flex: 0 0 auto;
}

.twmp-lang__current {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 2.5rem;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.twmp-lang__current::-webkit-details-marker {
	display: none;
}

/* Freccia della tendina, ruotata quando l'elenco e' aperto. */
.twmp-lang__current::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	margin-left: 0.15rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform 0.15s;
}

.twmp-lang__menu[open] .twmp-lang__current::after {
	transform: translateY(0.1rem) rotate(-135deg);
}

.twmp-lang__current:hover,
.twmp-lang__menu[open] .twmp-lang__current {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.twmp-lang__current:focus-visible,
.twmp-lang a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.twmp-lang__flag {
	display: block;
	width: 1.25rem;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--wp--preset--color--border);
}

.twmp-lang__list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	min-width: 10rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: var(--wp--preset--spacing--20);
	list-style: none;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--md);
	font-size: var(--wp--preset--font-size--small);
}

.twmp-lang a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 2.5rem;
	padding: 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--sm);
	color: inherit;
	text-decoration: none;
}

.twmp-lang a[aria-current],
.twmp-lang a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.twmp-lang a[aria-current] {
	font-weight: 600;
}

/* Telefoni molto stretti: il numero si rimpicciolisce per restare nella barra. */
@media (max-width: 359px) {
	.site-header .site-header__phone {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Con il menu a tendina (sotto i 900px) il selettore sta nel pannello. */
@media (max-width: 899px) {
	.site-header .site-header__lang {
		display: none;
	}
}

@media (min-width: 900px) {
	.site-header .twmp-lang--menu {
		display: none;
	}
}

/* Nel menu a tendina l'elenco si apre sotto il pulsante, sul filo delle voci. */
.site-header .twmp-lang--menu .twmp-lang__list {
	right: auto;
	left: 0;
}

/* Contatti e CTA sulla destra della barra (come nella home di partenza):
   etichetta di servizio, numero verde di supporto e pulsante per la call. */
.site-header__actions {
	flex: 0 0 auto;
}

.site-header__support {
	line-height: 1.25;
}

.site-header__support-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	color: var(--twmp-muted);
}

.site-header__phone {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--heading);
	white-space: nowrap;
}

.site-header__phone a {
	color: inherit;
}

.site-header__phone a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Pulsante della barra: stesso stile dell'invito nell'apertura (grassetto,
   doppia freccia, ombra), un poco piu' compatto in altezza. */
.site-header__cta .twmp-cta .wp-block-button__link {
	padding: 0.625rem 1.25rem;
	white-space: nowrap;
}

/* Sul fondo bianco della barra il passaggio porta al blu notte, come gli
   altri pulsanti delle parti chiare. */
.site-header__cta .twmp-cta .wp-element-button:hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary-contrast);
}

/* Sotto una certa larghezza la barra non regge tutto: resta il numero di
   telefono, che e' anche l'azione piu' utile da mobile (tocca e chiama). */
@media (max-width: 1299px) {
	/* Selettore piu' specifico: le regole di layout del core (.wp-block-buttons)
	   arrivano dopo il foglio del tema e vincerebbero a parita' di specificita'. */
	.site-header .site-header__support-label,
	.site-header .site-header__cta {
		display: none;
	}

	.site-header .wp-block-navigation {
		gap: var(--wp--preset--spacing--40);
	}
}

/* Finche' il menu resta in orizzontale lo spazio serve tutto alle voci. */
@media (min-width: 900px) and (max-width: 1299px) {
	.site-header .site-header__actions {
		display: none;
	}
}

/* Barra piena (menu lungo o lingua con parole piu' lunghe): lo script del
   tema misura la barra e toglie prima il recapito, poi il pulsante (classi
   is-tight e is-tighter sull'intestazione). Il telefono resta nel piè di
   pagina e nei contatti. */
@media (min-width: 1300px) {
	.site-header.is-tight .site-header__support,
	.site-header.is-tighter .site-header__actions {
		display: none;
	}
}

/* Con il menu a tendina il recapito torna in barra (tocca e chiama), a
   destra: vedi "Navigazione mobile". */

/* Spazi verticali proporzionati allo schermo: su smartphone i margini grandi
   delle sezioni (impostati nei blocchi con i preset) si riducono. Definiti su
   body: valgono per tutto il contenuto, qualunque sia l'ordine dei fogli. */
@media (max-width: 781px) {
	body {
		--wp--preset--spacing--60: 2.25rem;
		--wp--preset--spacing--70: 3rem;
		--wp--preset--spacing--80: 3.5rem;
	}
}

/* Collegamenti nel testo corrente (paragrafi ed elenchi del contenuto, non
   componenti): sottolineati, cosi' non si distinguono solo dal colore (WCAG 1.4.1). */
.site-main :is(p, li):where(:not([class*="twmp-"])) > a:where(:not([class])) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Sezioni fuori dallo schermo: il browser le prepara solo quando ci si
   avvicina scorrendo (la prima apertura si disegna prima e le immagini piu' in
   basso non rubano banda a quella in alto). Restano nel documento: ricerca nella
   pagina, lettori di schermo e ancore funzionano; la misura stimata viene
   sostituita da quella vera appena la sezione e' stata disegnata. Le sezioni
   senza titolo escono come div (inc/markup.php) e restano comprese. */
section.twmp-section,
div.twmp-section,
.site-footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 40rem;
}

/* Sullo smartphone il modulo contatti e' molto piu' alto della misura di
   riserva: con una riserva corta, finche' non e' disegnato, i suoi campi
   risultano sovrapposti al pie' di pagina per gli strumenti di verifica
   (falso errore di area di tocco). Riserva piu' alta del contenuto reale. */
@media (max-width: 781px) {
	section.twmp-contact {
		contain-intrinsic-size: auto 140rem;
	}
}

.site-main {
	min-height: 60vh;
	/* Testo di lettura: una sola misura e interlinea in tutte le pagine (token
	   typography.text, la misura del racconto). Titoli, etichette, numeri,
	   pulsanti e modulo hanno la loro misura. */
	font-size: var(--wp--custom--text--size);
	line-height: var(--wp--custom--text--line-height);
}

/* Pulsanti e modulo restano alla misura dei comandi, non del testo di lettura. */
.site-main .wp-element-button {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body);
}

.twmp-contact__card {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body);
}

/* Titoli di schede e sottosezioni: un gradino sopra il testo di lettura. */
.twmp-card__title,
.twmp-contact__subtitle {
	font-size: var(--wp--custom--text--title-size);
}

/*
 * Fasce a tutto schermo attaccate: il layout radice e il gruppo <main> inseriscono
 * un blockGap verticale tra header, <main>, sezioni e footer (margine superiore su
 * ogni fratello). Ogni fascia ha gia' il proprio padding verticale: azzerando il
 * margine le fasce restano a contatto. Nessun valore hardcoded: 0.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.site-main > * {
	margin-block-start: 0;
}

/* Home: le sezioni sono il contenuto della pagina (modificabile per portale) e
   restano attaccate come quando stavano direttamente nel <main>. */
.site-main .twmp-stack > * {
	margin-block: 0;
}

/* =========================================================================
   Accessibilita' (WCAG 2.2 AA / EN 301 549)
   ========================================================================= */

/* Utility: contenuto percepibile solo dagli screen reader (non da vista). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal;
}

/*
 * Skip-link "Vai al contenuto": nascosto finche' non riceve il focus da
 * tastiera, poi visibile in alto a sinistra. Solo :focus-visible.
 */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
	position: fixed;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 100002;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	clip: auto;
	clip-path: none;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--md);
	text-decoration: underline;
	white-space: nowrap;
}

/*
 * Focus ring visibile su tutti gli elementi interattivi durante la navigazione
 * da tastiera. Solo :focus-visible: nessun anello sul click col puntatore.
 * Mai outline:none senza un sostituto (regola VS).
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sulle fasce scure l'anello di focus deve essere chiaro per restare visibile. */
.twmp-band-dark a:focus-visible,
.twmp-band-dark button:focus-visible,
.site-footer a:focus-visible,
.twmp-cta a:focus-visible {
	outline-color: var(--wp--preset--color--hero-contrast);
}

/* Il <main> riceve il focus via skip-link ma non deve mostrare un anello
   persistente (non e' un controllo interattivo). */
#twmp-main:focus {
	outline: none;
}

/*
 * Link senza sottolineatura di base (textDecoration:none in theme.json), ma con
 * un indicatore SEMPRE percepibile oltre al colore (WCAG 1.4.1): sottolineatura
 * su :focus-visible in aggiunta all'anello di focus. Esclusi bottoni e voci di
 * navigazione (landmark gia' riconoscibile, l'anello resta l'indicatore).
 */
a:where(:not(.wp-element-button):not(.wp-block-navigation-item__content):not(.twmp-card__link):not(.twmp-pill a)):focus-visible {
	text-decoration: underline;
}

/* Contenuto testuale: i link nel corpo delle pagine si sottolineano al passaggio. */
.site-main__content .wp-block-post-content a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* =========================================================================
   Occhiello, testate di sezione, testo attenuato
   ========================================================================= */
.twmp-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.twmp-eyebrow--light {
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 78%, transparent);
}

.twmp-section__head {
	gap: var(--wp--preset--spacing--40);
}

.twmp-section__title {
	margin: 0;
	line-height: 1.06;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	max-width: 44rem;
}

.twmp-section__intro {
	margin: 0;
	max-width: 30rem;
	color: var(--twmp-muted);
}

/* =========================================================================
   Fasce scure (mission, intestazione pagina): gradiente + decorazione
   ========================================================================= */
.twmp-band-dark {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(100deg, var(--wp--preset--color--hero-start) 30%, var(--wp--preset--color--hero-end));
}

/* Lo sfondo copre tutta la fascia: il layout "constrained" del core limita la
   larghezza dei figli alla colonna di contenuto, qui va annullato. */
.twmp-band-dark > .twmp-band-dark__bg,
.twmp-band-dark .twmp-band-dark__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	width: 100%;
	overflow: hidden;
}

.twmp-band-dark__bg-img,
.twmp-band-dark .twmp-band-dark__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo dai colori della fascia: il testo bianco resta leggibile come sul pieno. */
.twmp-band-dark__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		100deg,
		color-mix(in srgb, var(--wp--preset--color--hero-start) 84%, transparent) 30%,
		color-mix(in srgb, var(--wp--preset--color--hero-end) 78%, transparent)
	);
}

.twmp-band-dark > :where(:not(.twmp-decoration):not(.twmp-band-dark__bg)) {
	position: relative;
	z-index: 1;
}

/* La decorazione la aggiunge il tema in testa al gruppo (twmp-decorated): e'
   assoluta, quindi il primo contenuto non deve prendere lo spazio fra blocchi. */
.twmp-section.twmp-decorated > .twmp-decoration + * {
	margin-block-start: 0;
}

.twmp-band-dark .twmp-decoration {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 120%;
	width: auto;
	pointer-events: none;
	color: var(--wp--preset--color--hero-contrast);
	opacity: 0.35;
	z-index: 0;
}

.twmp-band-dark__title {
	max-width: 42rem;
}

.twmp-band-dark__text {
	max-width: 42rem;
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 82%, transparent);
}

.twmp-page-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: var(--wp--custom--font-weight--hero);
	line-height: var(--wp--custom--line-height--hero);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	max-width: 46rem;
}

@media (max-width: 781px) {
	.twmp-band-dark .twmp-decoration {
		display: none;
	}
}

/* =========================================================================
   Griglie responsive del tema (card, numeri, benefit, sedi, footer).
   Layout "default" del gruppo + griglia CSS: il layout grid del core emette
   container-type, non riconosciuto dal validatore W3C.
   ========================================================================= */
.twmp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--twmp-grid-min, 18rem), 100%), 1fr));
	gap: var(--twmp-grid-gap, var(--wp--preset--spacing--40));
}

/* Il layout a flusso del core mette un margine superiore ai fratelli: in griglia non serve. */
.twmp-section .twmp-grid > * + *,
.site-footer .twmp-grid > * + * {
	margin-block-start: 0;
}

.twmp-cards {
	--twmp-grid-min: 20rem;
}

/* Business unit: colonne senza riquadro, marchio grande in testa (come l'originale). */
/* Il core aggiunge ai gruppi con fondo un riempimento proprio: senza questo
   azzeramento le colonne partono oltre il filo del contenuto. */
.twmp-unit {
	position: relative;
	padding: 0;
}

.twmp-unit__logo,
.wp-block-image.twmp-unit__logo {
	line-height: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Stessa misura del sito in produzione: quadrato da 150px per ogni marchio. */
.twmp-unit__logo img,
.wp-block-image.twmp-unit__logo img {
	height: 9.375rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Nella scheda (layout flex del core) il margine sotto il marchio e' sempre
   stato annullato dal core: la distanza dal titolo e' lo spazio della scheda. */
.wp-block-image.twmp-unit__logo {
	margin-block-end: 0;
}

.twmp-office-cards,
.twmp-ways {
	--twmp-grid-min: 16rem;
	--twmp-grid-gap: var(--wp--preset--spacing--30);
	/* auto-fit: poche celle riempiono comunque la riga, niente spazio morto a destra. */
	grid-template-columns: repeat(auto-fit, minmax(min(var(--twmp-grid-min), 100%), 1fr));
}

.site-footer__grid {
	--twmp-grid-min: 16rem;
	--twmp-grid-gap: var(--wp--preset--spacing--50);
}

/* =========================================================================
   Card (business unit, soluzioni): bordo, ombra, hover, card cliccabile
   ========================================================================= */
.twmp-card {
	position: relative;
	height: 100%;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--xs);
	transition: box-shadow 0.16s, border-color 0.16s, transform 0.16s;
}

/* Scheda servizio: striscia nel blu del sito in alto, titolo su una riga con
   l'icona piccola alla sua destra, linea sottile fra titolo e testo
   (classe twmp-card--feature; icona da twmp-icon-<nome>). */
.twmp-card--feature {
	overflow: hidden;
}

.twmp-card--feature::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 0.25rem;
	background-color: var(--wp--preset--color--primary);
}

/* Lo stesso effetto al passaggio delle schede cliccabili, su tutte. */
.twmp-card--feature:hover {
	box-shadow: var(--wp--custom--shadow--md);
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.twmp-card--feature:hover {
		transform: none;
	}
}

/* Icona piccola a destra del titolo, sulla stessa riga. */
.twmp-card__badge {
	position: absolute;
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
	line-height: 0;
	color: var(--wp--preset--color--primary);
	pointer-events: none;
}

.twmp-card__badge .twmp-icon {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: 1.75;
}

/* Griglia di schede servizio: colonne mai piu' strette di 22rem, cosi' il
   titolo su una riga resta leggibile (su tablet due per riga). */
.twmp-cards:has(> .twmp-card--feature) {
	--twmp-grid-min: 22rem;
}

/* Schede servizio tutte alte uguali, anche fra righe diverse: una scheda con
   poco testo non sembra piu' piccola delle altre. Su smartphone (una colonna)
   ognuna resta alta quanto il suo testo. */
@media (min-width: 782px) {
	.twmp-cards:has(> .twmp-card--feature) {
		grid-auto-rows: 1fr;
	}
}

/* Titolo nella stessa misura in tutte le schede: se non sta su una riga va a
   capo prima dell'icona. Niente unita' del contenitore (cqi): il CSS del tema
   e' in linea nella pagina e il validatore W3C non le riconosce. */
.twmp-card--feature .twmp-card__title {
	align-self: stretch;
	font-size: var(--wp--custom--text--size);
	padding-bottom: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.twmp-card--feature:has(> .twmp-card__badge) .twmp-card__title {
	padding-right: 2.25rem;
}

.twmp-card:not(.twmp-card--link) {
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Riquadri a puntini: tutte le schede con icona (twmp-card--feature: servizi,
   sedi, valori) hanno il fondo scuro delle fasce, una trama di puntini nel colore
   di accento del portale che parte dall'angolo in alto e sfuma verso il testo e
   l'icona in un tondo luminoso sopra il titolo. Nati in W-app; qui leggono solo i
   token, cosi' ogni portale li vede nei suoi colori. Restano chiare le schede con
   un'immagine (marchi dei partner): su fondo scuro non si leggerebbero.
   Le classi colore del core (has-*-background-color) portano !important: per
   questo qui fondo e testo lo portano anche loro. */
:root {
	--twmp-tile-mark: var(--wp--preset--color--accent);
}

.twmp-card--feature:not(:has(img)) {
	isolation: isolate;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-color: transparent;
	background-color: var(--wp--preset--color--hero-start) !important;
	background-image:
		radial-gradient(70% 60% at 70% 0%, rgb(255 255 255 / 0.12), transparent 70%),
		linear-gradient(160deg, color-mix(in srgb, var(--wp--preset--color--hero-start) 88%, white), color-mix(in srgb, var(--wp--preset--color--hero-start) 95%, white));
	color: rgb(255 255 255 / 0.78) !important;
}

.twmp-card--feature:not(:has(img))::before {
	inset: 0;
	height: auto;
	z-index: -1;
	background-color: transparent;
	background-image: radial-gradient(color-mix(in srgb, var(--twmp-tile-mark) 50%, transparent) 1.2px, transparent 1.7px);
	background-size: 16px 16px;
	-webkit-mask-image: linear-gradient(200deg, #000 0%, rgb(0 0 0 / 0.35) 45%, transparent 80%);
	mask-image: linear-gradient(200deg, #000 0%, rgb(0 0 0 / 0.35) 45%, transparent 80%);
	pointer-events: none;
}

.twmp-card--feature:not(:has(img)):is(:hover, :focus-within) {
	border-color: transparent;
}

.twmp-card--feature:not(:has(img)) > .twmp-card__badge {
	position: relative;
	inset: auto;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	background-color: var(--twmp-tile-mark);
	color: var(--wp--preset--color--accent-contrast);
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--twmp-tile-mark) 10%, transparent), 0 0 2.5rem color-mix(in srgb, var(--twmp-tile-mark) 35%, transparent);
}

.twmp-card--feature:not(:has(img)) > .twmp-card__badge .twmp-icon {
	width: 1.625rem;
	height: 1.625rem;
}

.twmp-card--feature:not(:has(img)) .twmp-card__title {
	padding: 0;
	margin: 0;
	border: 0;
	font-size: 1.375rem;
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-card--feature:not(:has(img)) .twmp-card__text {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgb(255 255 255 / 0.78);
}

.twmp-card--feature:not(:has(img)) .twmp-card__kicker {
	color: var(--twmp-tile-mark);
}

.twmp-card--feature:not(:has(img)) .twmp-card__foot {
	border-color: rgb(255 255 255 / 0.16);
}

.twmp-card--feature:not(:has(img)) :is(.twmp-card__link, .twmp-card__arrow) {
	color: var(--twmp-tile-mark);
}

/* Griglie di schede (servizi, news, ultime news, progetti e prodotti, riquadri a
   puntini, sedi): schede sempre dello stesso formato, al massimo tre per riga.
   Griglia a sei colonne, ogni scheda ne occupa due; se l'ultima riga resta
   incompleta le sue schede vanno al centro, senza allargarsi (5 = 3 + 2,
   7 = 3 + 3 + 1, anche una scheda sola). Su tablet due per riga, l'ultima al
   centro se sono dispari; su smartphone una per riga. Solo la scheda di una
   sede unica occupa tutta la riga, sopra la mappa.
   Restano fuori le varianti con una disposizione propria (tessere, persone,
   convenzioni, due per riga). */
.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) {
	grid-template-columns: minmax(0, 1fr);
}

.twmp-cards:is(.twmp-cards--bento, .twmp-office-cards) {
	gap: 1rem;
}

@media (min-width: 600px) {
	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) > * {
		grid-column: span 2;
	}

	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) > :last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}
}

@media (min-width: 1024px) {
	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) > *,
	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) > :last-child:nth-child(odd) {
		grid-column: span 2;
	}

	/* Ultima riga con una scheda: al centro. Con due: la prima parte dalla seconda colonna. */
	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two) > :last-child:nth-child(3n + 1) {
		grid-column: 3 / span 2;
	}

	.twmp-cards:not(.twmp-cards--tiles, .twmp-cards--people, .twmp-cards--partners, .twmp-cards--two):has(> :last-child:nth-child(3n + 2)) > :nth-last-child(2) {
		grid-column: 2 / span 2;
	}
}

/* Stessa specificita' delle regole sopra (che vengono prima): vince questa. */
.twmp-office-cards > :only-child:last-child:nth-child(n) {
	grid-column: 1 / -1;
}

/* Sopra i riquadri e sopra l'elenco con dettaglio il titolo di sezione usa la
   larghezza del contenuto (due righe invece di tre); l'introduzione resta nella
   colonna di lettura. */
.twmp-section:has(.twmp-cards--bento, .twmp-tabs--side) > .twmp-section__head--stack {
	max-width: var(--wp--style--global--wide-size);
}

.twmp-section:has(.twmp-cards--bento, .twmp-tabs--side) > .twmp-section__head--stack .twmp-section__title {
	max-width: none;
}

.twmp-card--link:hover,
.twmp-card--link:focus-within {
	box-shadow: var(--wp--custom--shadow--md);
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.twmp-card--link:hover,
	.twmp-card--link:focus-within {
		transform: none;
	}
}

.twmp-card__kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.twmp-card__title {
	margin: 0;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.twmp-card__text {
	margin: 0;
	color: var(--twmp-muted);
	flex: 1 1 auto;
}

.twmp-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--border);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Un solo link per card, esteso a tutta la superficie (target ampio, un solo tab stop). */
.twmp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.twmp-card--link:focus-within .twmp-card__link {
	text-decoration: underline;
}

.twmp-card__arrow {
	display: inline-block;
	transition: transform 0.16s;
}

.twmp-card--link:hover .twmp-card__arrow {
	transform: translateX(4px);
}


/* =========================================================================
   Cosa facciamo: fascia chiara con etichetta, titolo e settori a pastiglia
   ========================================================================= */
.twmp-sectors {
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--contrast) 16%, var(--wp--preset--color--surface)) 0%,
		var(--wp--preset--color--surface) 100%
	);
}

/* Etichetta, titolo e settori sul filo sinistro dei contenuti, come le altre sezioni. */
.twmp-sectors__inner {
	align-items: flex-start;
}

/* Etichetta su fondo pieno (non il solo occhiello con la barra). */
.twmp-eyebrow--chip {
	align-self: flex-start;
	width: fit-content;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.4rem 0.6rem;
}

/* Sui fondi grigi l'etichetta e' bianca (grigia su grigio sparirebbe e il testo
   sembrerebbe rientrato), sulle fasce scure e' un velo chiaro. */
.has-surface-background-color .twmp-eyebrow--chip {
	background-color: var(--wp--preset--color--base);
}

.twmp-band-dark .twmp-eyebrow--chip {
	background-color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 16%, transparent);
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-sector-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
	gap: var(--twmp-head-gap);
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	width: 100%;
}

/* Al massimo tre per riga: sei settori in due righe pari. */
@media (min-width: 64rem) {
	.twmp-sector-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.twmp-sector,
.twmp-sector-list > li {
	display: flex;
	align-items: center;
	/* Foto, testo e bordo con lo stesso respiro delle testate. */
	gap: var(--twmp-head-gap);
	min-width: 0;
	box-sizing: border-box;
	padding: 0.75rem 1.5rem 0.75rem 0.75rem;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--custom--shadow--xs);
	font-weight: 600;
}

.twmp-sector-list > li img {
	width: 4.375rem;
	height: 4.375rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}


/* =========================================================================
   Numeri chiave: fascia di soli numeri, voci allineate a sinistra e separate
   da una linea sottile, come nella home di partenza
   ========================================================================= */
.twmp-stats__grid {
	/* Colonne esplicite: cinque voci in riga senza tracce vuote (auto-fill ne
	   creerebbe piu' di quante ne servono e le voci resterebbero strette). */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	--twmp-grid-gap: var(--wp--preset--spacing--30);
}

.twmp-stat {
	align-items: flex-start;
	text-align: start;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 1px solid var(--wp--preset--color--border);
}

.twmp-stat__num {
	margin: 0;
	font-size: 1.75rem;
	font-weight: var(--wp--custom--font-weight--hero);
	line-height: 1.1;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

/* Il valore resta su una riga anche quando e' lungo ("+5 mln"): a capo va
   semmai l'etichetta, che lo segue sulla stessa riga quando c'e' spazio. */
.twmp-stat__value {
	white-space: nowrap;
}

.twmp-stat__label {
	/* Misura tarata perche' valore ed etichetta restino sulla stessa riga
	   anche nella voce piu' lunga, alle larghezze in cui le colonne sono cinque. */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--heading);
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
}

.twmp-stat__text {
	margin: 0;
	color: var(--twmp-muted);
	text-wrap: pretty;
}

/* I media query non aumentano la specificita': queste regole stanno dopo la
   base, altrimenti la base vincerebbe anche sotto soglia. */
/* Il numero di colonne scende via via che lo spazio non basta piu' a tenere
   valore ed etichetta sulla stessa riga. */
@media (max-width: 1199px) {
	.twmp-stats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		--twmp-grid-gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 781px) {
	.twmp-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.twmp-stats__grid {
		grid-template-columns: minmax(0, 1fr);
		--twmp-grid-gap: var(--wp--preset--spacing--30);
	}
}

/* =========================================================================
   Sedi (card con icona)
   ========================================================================= */
.twmp-office {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--xs);
}


.twmp-office__text {
	margin: 0;
	color: var(--twmp-muted);
}

.twmp-office__text strong {
	color: var(--wp--preset--color--contrast);
}

/* =========================================================================
   Call to action
   ========================================================================= */


.twmp-cta .twmp-eyebrow--light {
	color: color-mix(in srgb, var(--wp--preset--color--primary-contrast) 80%, transparent);
}

/* =========================================================================
   Footer scuro: marchio, sedi, collegamenti, riga finale
   ========================================================================= */
.site-footer a:where(:not(.wp-element-button)) {
	color: currentColor;
}

/* Collegamenti di testo degli elenchi e della riga finale: area cliccabile di
   almeno 24 px (WCAG 2.5.8). Sono in linea: il margine interno verticale
   allarga l'area senza spostare le righe. */
.site-footer :is(.site-footer__list, .site-footer__bar) a:where(:not(.wp-element-button)) {
	padding-block: 0.25rem;
}

.site-footer .wp-block-site-logo img {
	height: 3rem;
	width: auto;
	display: block;
}

.site-footer .wp-block-site-title {
	font-weight: var(--wp--custom--font-weight--hero);
	letter-spacing: -0.02em;
}

.site-footer .wp-block-site-title a {
	text-decoration: none;
}

.site-footer__office {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 75%, transparent);
}

.site-footer__office strong {
	color: var(--wp--preset--color--hero-contrast);
}


.site-footer__heading {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--wp--custom--font-weight--heading);
}


.site-footer a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* Sulle parti scure il passaggio standard dei pulsanti (blu notte) coincide col
   fondo: il pulsante si inverte in bianco con testo blu. */
.site-footer .wp-element-button:hover,
.site-footer .wp-element-button:focus,
.twmp-band-dark .wp-element-button:hover,
.twmp-band-dark .wp-element-button:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.site-footer__bar {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--hero-contrast) 14%, transparent);
}

.site-footer__copy {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 70%, transparent);
}

/* =========================================================================
   Navigazione mobile: drawer SOTTO l'header (il marchio resta visibile),
   hamburger a sinistra, chiusura dentro il pannello, CTA dentro il menu.
   Vale fino a 899px (il core passa al menu orizzontale gia' da 600px): sotto
   quella misura il menu orizzontale non sta nella barra in tutte le lingue.
   ========================================================================= */
@media (max-width: 899px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Menu a sinistra, logo subito accanto, telefono a destra. Selettori con
	   .site-header: le regole di layout del core arrivano dopo il foglio. */
	.site-header .site-header__bar {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
	}

	.site-header .site-header__nav {
		order: -1;
		flex: 0 0 auto;
		width: auto;
		justify-content: flex-start;
	}

	.site-header .site-header__actions {
		order: 1;
		margin-left: auto;
	}

	/* Voci del menu aperto allineate a sinistra, sul filo del logo. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		align-items: flex-start;
		text-align: left;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: flex-start;
		width: 100%;
	}

	/* Sottovoci rientrate di poco sotto la voce madre, con un filo a sinistra. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding: var(--wp--preset--spacing--20) 0 0 var(--wp--preset--spacing--30) !important;
		margin-left: 0.125rem;
		border-left: 2px solid var(--wp--preset--color--border);
	}

	/* Pulsante del menu comodo da toccare (44px). */
	.site-header .wp-block-navigation__responsive-container-open {
		width: 2.75rem;
		height: 2.75rem;
		margin-left: -0.625rem;
		justify-content: center;
		align-items: center;
	}

	.site-header .wp-block-navigation__responsive-container-open svg {
		width: 1.75rem;
		height: 1.75rem;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		top: var(--twmp-header-height);
		padding-top: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--40);
		background-color: var(--wp--preset--color--base);
	}


}

/* =========================================================================
   Elenco articoli (news, archivi, ricerca): card con immagine, data, titolo
   ed estratto; paginazione e navigazione articolo.
   ========================================================================= */
/* Il riassunto occupa lo spazio libero e "Leggi l'articolo" scende sempre in
   fondo alla scheda: allineato fra le schede della stessa riga. */
.twmp-card--post .twmp-card__text {
	flex: 1 1 auto;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.twmp-card--post .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.twmp-card--post {
	display: flex;
	padding-bottom: var(--wp--preset--spacing--50);
}

.twmp-card--post .twmp-card__media {
	/* Da bordo a bordo della scheda: si allarga oltre il riempimento, senza
	   dipendere dalla larghezza del file. */
	align-self: flex-start;
	/* Larghezza esplicita: con l'allungamento automatico Chrome ignora il 16:9. */
	width: calc(100% + 2 * var(--wp--preset--spacing--50));
	/* Il 16:9 sta sul riquadro: l'immagine e' posizionata sopra e non da' altezza. */
	aspect-ratio: 16 / 9;
	max-width: none;
	margin: calc(var(--wp--preset--spacing--50) * -1) calc(var(--wp--preset--spacing--50) * -1) var(--wp--preset--spacing--20);
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0;
}

/* L'immagine riempie il riquadro 16:9 senza deciderne l'altezza: la scheda ha
   la stessa misura prima e dopo il caricamento (niente spostamenti). */
.twmp-card--post .twmp-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.twmp-card--post .twmp-card__title a {
	color: inherit;
	text-decoration: none;
}

.twmp-card--post:hover .twmp-card__title a,
.twmp-card--post .twmp-card__title a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.twmp-card--post .twmp-card__text a {
	font-weight: 600;
}

/* Paginazione delle news: numeri e "precedente/successiva" come pulsanti,
   la pagina aperta nel colore di accento. */
.twmp-pagination {
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin-top: var(--wp--preset--spacing--60);
	font-weight: 600;
}

.twmp-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.twmp-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.twmp-pagination a:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--contrast);
}

.twmp-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.twmp-pagination .page-numbers.dots {
	min-width: auto;
	padding: 0;
	border-color: transparent;
	background: none;
}

/* =========================================================================
   Articolo: colonna di lettura, immagini, citazioni, titoli interni
   ========================================================================= */
/* Il testo parte dal filo del titolo e occupa la larghezza del contenuto. */
.twmp-article .wp-block-post-content > * {
	max-width: var(--wp--style--global--wide-size);
}

.twmp-article .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.twmp-article .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

/* Articolo: immagine in evidenza intera in alto a destra nell'apertura; il
   testo resta sul filo sinistro del contenuto come nelle altre aperture. */
.twmp-page-hero__split {
	/* L'apertura e' un contenitore flex: senza larghezza piena il blocco si
	   stringe sul contenuto e il margine automatico lo centra. */
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

.twmp-band-dark.twmp-page-hero .twmp-page-hero__split > * {
	margin: 0;
	max-width: none;
}

.twmp-page-hero__cover {
	line-height: 0;
}

.twmp-page-hero__cover img,
.twmp-page-hero .wp-block-post-featured-image.twmp-page-hero__cover img {
	box-sizing: content-box;
	display: block;
	width: auto;
	max-width: min(26rem, 40vw);
	height: auto;
	max-height: 22rem;
	border: 0.375rem solid var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}

/* Su smartphone l'immagine esce dall'apertura: subito sotto, da bordo a bordo,
   prima del testo. Su desktop questa copia resta nascosta. */
.twmp-article > .twmp-article__cover-mobile {
	display: none;
}

@media (max-width: 781px) {
	.twmp-page-hero__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.twmp-page-hero__cover {
		display: none;
	}

	.twmp-article > .twmp-article__cover-mobile {
		display: block;
		width: 100vw;
		max-width: none;
		/* Attaccata all'apertura: annulla il riempimento in alto del contenuto. */
		margin: calc(var(--wp--preset--spacing--60) * -1) calc(50% - 50vw) var(--wp--preset--spacing--50);
		line-height: 0;
	}

	.twmp-article__cover-mobile img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.twmp-article {
	display: flow-root;
}

/* Immagini nel testo dell'articolo: fascia
   larga quanto il testo con la stessa immagine sfocata come sfondo, foto
   intera al centro. Lo sfondo arriva da --twmp-blur (functions.php). */
.twmp-article .twmp-image-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	height: clamp(20rem, 62vh, 36rem);
	margin: var(--wp--preset--spacing--60) 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--hero-start);
}

.twmp-article .twmp-image-band::before {
	content: "";
	position: absolute;
	inset: -3rem;
	z-index: -1;
	background: var(--twmp-blur) center / cover no-repeat;
	filter: blur(28px) brightness(0.65);
}

.twmp-article > .twmp-image-band:first-child {
	margin-top: 0;
}

.twmp-article .twmp-image-band img {
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--md);
}

@media (max-width: 781px) {
	.twmp-article .twmp-image-band {
		height: clamp(16rem, 70vh, 30rem);
		padding: var(--wp--preset--spacing--30);
	}
}

/* Il primo paragrafo apre il racconto: un gradino piu' grande. */
.twmp-article .wp-block-post-content > p:first-of-type {
	font-size: var(--wp--custom--text--title-size);
	line-height: 1.45;
}

.twmp-article .wp-block-post-content :where(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--60);
	font-size: var(--wp--custom--text--title-size);
	line-height: 1.25;
}

.twmp-article .wp-block-post-content figcaption {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--twmp-muted);
	text-align: center;
}

/* Citazione: filetto nel blu del sito, testo piu' grande. Accanto alla
   copertina si restringe invece di passarle sotto. */
.twmp-article .wp-block-quote {
	display: flow-root;
	margin-inline: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--custom--text--title-size);
	font-style: italic;
	line-height: 1.45;
}

.twmp-article .wp-block-quote p {
	margin: 0;
}

.twmp-article .wp-block-post-content a:where(:not(.wp-element-button)) {
	/* Indirizzi lunghi nel testo: vanno a capo invece di sbordare. */
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Data e tempo di lettura nell'apertura. */
.twmp-article__meta {
	font-size: var(--wp--preset--font-size--medium);
}

/* "Altre news": testata con il rimando a destra. */
.twmp-related__all {
	margin: 0;
	font-weight: 600;
}

.twmp-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--custom--button--padding-block) var(--wp--custom--button--padding-inline);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	min-width: 0;
}

.twmp-page-hero .twmp-search {
	max-width: 32rem;
	margin-top: var(--wp--preset--spacing--40);
}

/* =========================================================================
   Immagini dentro il contenuto importato: mai ingrandite oltre la dimensione
   reale del file (i loghi restano loghi) e mai piu' alte di mezza finestra,
   cosi' una foto verticale non occupa l'intera schermata.
   ========================================================================= */
.site-main__content .wp-block-image:not([class*="twmp-"]) img,
.site-main__content .wp-block-post-content figure img {
	width: auto;
	max-width: 100%;
	max-height: min(60vh, 34rem);
	height: auto;
	margin-inline: auto;
}

.site-main__content .wp-block-image:not([class*="twmp-"]) {
	text-align: center;
}

.site-main__content .wp-block-post-content > .wp-block-image:not(.alignleft):not(.alignright) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* =========================================================================
   Eccellenza verticale: fascia con immagine di sfondo velata e schede con
   copertina. L'immagine sta sotto il testo con un velo dai colori della
   fascia scura: il contrasto del testo bianco resta quello della fascia.
   ========================================================================= */
.twmp-expertise > .twmp-expertise__bg,
.twmp-expertise .twmp-expertise__bg,
.twmp-expertise > .wp-block-image.twmp-expertise__bg,
.twmp-expertise .wp-block-image.twmp-expertise__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
	width: 100%;
	overflow: hidden;
}

.twmp-expertise__bg-img,
.wp-block-image.twmp-expertise__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo: il testo resta leggibile come sulla fascia scura piena. */
.twmp-expertise__bg::after,
.wp-block-image.twmp-expertise__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		100deg,
		color-mix(in srgb, var(--wp--preset--color--hero-start) 86%, transparent) 30%,
		color-mix(in srgb, var(--wp--preset--color--hero-end) 80%, transparent)
	);
}

.twmp-expertise__title {
	max-width: 46rem;
	margin-inline: auto;
}

/* Schede con copertina (eccellenza verticale): immagine a filo, angoli vivi e
   nessun effetto sulla scheda; al passaggio si ingrandisce solo l'immagine. */
.twmp-card--media {
	padding: 0;
	overflow: hidden;
	border-radius: 0;
}

.twmp-card--media.twmp-card--link:hover,
.twmp-card--media.twmp-card--link:focus-within {
	box-shadow: var(--wp--custom--shadow--xs);
	border-color: var(--wp--preset--color--border);
	transform: none;
}

/* Il rimando in fondo reagisce al passaggio, nel blu del sito. */
.twmp-card--media.twmp-card--link:hover .twmp-card__link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	.twmp-card--link:hover .twmp-card__arrow {
		transform: none;
	}
}

/* Da tastiera l'anello sta attorno alla scheda, chiaro sulla fascia scura:
   quello del link sarebbe bianco su fondo bianco. */
.twmp-card--media:has(.twmp-card__link:focus-visible) {
	outline: var(--twmp-focus-width, 3px) solid var(--wp--preset--color--hero-contrast);
	outline-offset: 3px;
}

.twmp-card--media .twmp-card__link:focus-visible {
	outline: none;
}

.twmp-card__cover,
.wp-block-image.twmp-card__cover {
	line-height: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* Larghezza piena da subito: nel layout verticale del core la copertina prenderebbe
   la larghezza dell'immagine, che finche' non arriva vale zero (salto della scheda). */
.twmp-card--media > .wp-block-image.twmp-card__cover {
	align-self: stretch;
	width: 100%;
}

.twmp-card__cover-img,
.wp-block-image.twmp-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.twmp-card--media:hover .twmp-card__cover-img,
.twmp-card--media:focus-within .twmp-card__cover-img,
.twmp-card--media:hover .wp-block-image.twmp-card__cover img,
.twmp-card--media:focus-within .wp-block-image.twmp-card__cover img {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.twmp-card--media:hover .twmp-card__cover-img,
	.twmp-card--media:focus-within .twmp-card__cover-img,
	.twmp-card--media:hover .wp-block-image.twmp-card__cover img,
	.twmp-card--media:focus-within .wp-block-image.twmp-card__cover img {
		transform: none;
	}
}

.twmp-card__body {
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
	/* Il riempimento si somma alla larghezza distesa dal layout flex del core:
	   senza questi due limiti il corpo esce dalla scheda e il testo viene tagliato. */
	box-sizing: border-box;
	max-width: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* Il layout flex verticale del core allinea i figli a flex-start: senza questo
   allineamento il testo lungo esce dal riquadro invece di andare a capo. */
.twmp-card__body > * {
	align-self: stretch;
}

.twmp-card--media .twmp-card__text {
	flex: 0 0 auto;
}

.twmp-card__icon {
	margin: 0;
	line-height: 0;
	color: var(--wp--preset--color--accent);
}

.twmp-icon {
	width: 3.25rem;
	height: 3.25rem;
	fill: none;
}

.twmp-card--media .twmp-card__foot {
	/* Larghezza dal layout, non 100%: con i margini laterali sborderebbe e la
	   freccia finirebbe fuori dalla scheda. */
	width: auto;
	align-self: stretch;
	box-sizing: border-box;
	margin: auto var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--30) 0;
}

/* Banda carriere: un solo rimando, grande, al centro. */
.twmp-careers-band__text {
	margin: 0;
	font-weight: 700;
}

.twmp-careers-band__text a {
	color: inherit;
}

/* Su una riga come l'originale: oltre la colonna di testo, fino al contenuto largo. */
.twmp-careers-band .twmp-careers-band__text {
	max-width: var(--wp--style--global--wide-size);
}

/* Velo piu' leggero delle altre fasce: l'onda di dati resta visibile come
   sull'originale; il testo grande bianco tiene comunque il contrasto. */
.twmp-careers-band .twmp-band-dark__bg::after {
	background-image: linear-gradient(
		100deg,
		color-mix(in srgb, var(--wp--preset--color--hero-start) 72%, transparent) 25%,
		color-mix(in srgb, var(--wp--preset--color--hero-end) 40%, transparent)
	);
}

/* =========================================================================
   Contattaci: invito e passi accanto al modulo
   ========================================================================= */
/* Le due parti (pannello scuro e scheda del modulo) formano un unico riquadro. */
.twmp-contact__panels {
	gap: 0;
	align-items: stretch;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--md);
}

/* Pannello scuro: invito, benefici e passi distribuiti su tutta l'altezza della
   scheda del modulo, cosi' non resta un vuoto in fondo. Il layout e' "nowrap":
   con l'a capo in colonna Chrome sbaglia l'altezza dell'elenco dei benefici.
   Le classi non riusano i nomi del modulo (twmp-contact__intro e __form sono
   del plugin). */
.twmp-contact__aside {
	flex: 1 1 24rem;
	min-width: 0;
	box-sizing: border-box;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}


/* Benefici e passi aprono un blocco nuovo: separatore e respiro sopra. */
.twmp-contact__block {
	box-sizing: border-box;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--hero-contrast) 18%, transparent);
}

.twmp-contact__aside .twmp-checklist,
.twmp-contact__aside .twmp-steps {
	gap: var(--wp--preset--spacing--30);
}

.twmp-contact__phone {
	font-size: var(--wp--preset--font-size--large);
}

/* Scheda del modulo: stesso riempimento del pannello, titoli allineati. */
.twmp-contact__card {
	flex: 1 1 26rem;
	min-width: 0;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--base);
}

.twmp-contact__card .twmp-contact__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* La scheda riempie l'altezza del pannello accanto: il campo messaggio si
   allunga e il pulsante scende in fondo, senza vuoto sotto il modulo. */
.twmp-contact__card,
.twmp-contact__card > .twmp-contact,
.twmp-contact__card .twmp-contact__form {
	display: flex;
	flex-direction: column;
}

.twmp-contact__card > .twmp-contact,
.twmp-contact__card .twmp-contact__form,
.twmp-contact__card .twmp-contact__field:has(textarea),
.twmp-contact__card textarea.twmp-contact__input {
	flex: 1 1 auto;
}

/* Un po' piu' d'aria fra i campi. */
.twmp-contact__card .twmp-contact__field {
	margin-bottom: var(--wp--preset--spacing--40);
}

.twmp-contact__card .twmp-contact__grid {
	column-gap: var(--wp--preset--spacing--40);
}

.twmp-contact__lead {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 82%, transparent);
}

.twmp-contact__phone a,
.twmp-contact__aside .twmp-checklist > li,
.twmp-contact__aside .twmp-steps > li {
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-contact__aside .twmp-checklist > li::before {
	background-color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 18%, transparent);
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-contact__aside .twmp-steps > li::before {
	background-color: var(--wp--preset--color--hero-contrast);
	color: var(--wp--preset--color--hero-start);
}

.twmp-contact__phone {
	margin: 0;
	font-weight: 600;
}

.twmp-contact__subtitle {
	margin: 0;
}

.twmp-checklist,
.twmp-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.twmp-checklist {
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.twmp-checklist > li,
.twmp-steps > li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.twmp-checklist > li::before {
	content: "\2713";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.1rem;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1;
}

.twmp-steps {
	counter-reset: twmp-step;
}

.twmp-steps > li {
	counter-increment: twmp-step;
	align-items: center;
}

.twmp-steps > li::before {
	content: counter(twmp-step);
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

/* =========================================================================
   Apertura della home: fondo sfumato chiaro, testo a sinistra, immagine
   ritagliata in forma organica a destra (maschera SVG inline, zero richieste)
   ========================================================================= */
.twmp-hero {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 30%, var(--wp--preset--color--base)) 0%,
		var(--wp--preset--color--base) 100%
	);
}

/* Testo e immagine centrati fra loro in verticale (vedi .twmp-page-hero). */
.twmp-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	min-height: 26rem;
}

.twmp-hero__text {
	flex: 1 1 26rem;
	min-width: 0;
	align-items: flex-start;
}

/* Misura scelta perche' il titolo vada sempre su due righe in tutte le lingue
   del sito (italiano, inglese, spagnolo), a ogni larghezza: cambiando lingua
   l'apertura resta identica. */
.twmp-hero__title {
	margin: 0;
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: var(--wp--custom--font-weight--hero);
	line-height: 1.04;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

.twmp-hero__text-lead {
	margin: 0;
	max-width: 32rem;
	color: var(--twmp-muted);
}

/* Titolo e testo allo stesso ritmo delle altre aperture: lo spazio del gruppo
   (spacing-30) si completa fino a 16 px, i pulsanti restano dove sono. */
.twmp-hero__title + .twmp-hero__text-lead {
	margin-top: max(0px, calc(var(--twmp-head-gap) - var(--wp--preset--spacing--30)));
}

.twmp-hero__media,
.wp-block-image.twmp-hero__media {
	flex: 1 1 22rem;
	min-width: 0;
	line-height: 0;
}

.wp-block-image.twmp-hero__media img {
	width: 100%;
	height: clamp(15rem, 32vw, 25rem);
	object-fit: cover;
	-webkit-mask-image: var(--twmp-blob);
	mask-image: var(--twmp-blob);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: bottom right;
	mask-position: bottom right;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

@media (max-width: 781px) {
	.twmp-hero__inner {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	/* In colonna la base flessibile diventerebbe un'altezza fissa (vuoto sotto
	   il testo): testo e immagine prendono solo l'altezza che serve. */
	.twmp-hero__text,
	.twmp-hero__media,
	.wp-block-image.twmp-hero__media {
		flex: 0 0 auto;
	}

	.wp-block-image.twmp-hero__media img {
		height: 14rem;
		-webkit-mask-position: bottom center;
		mask-position: bottom center;
	}

	/* In colonna il titolo occupa tutta la larghezza: misura proporzionale allo
	   schermo, cosi' le righe restano due su ogni telefono e in ogni lingua. */
	.twmp-hero__title {
		font-size: clamp(1.5rem, 8vw, 3.5rem);
	}
}


/* Apertura delle pagine interne: una sola impaginazione per tutto il sito.
   Testo a sinistra su colonna leggibile, immagine velata sullo sfondo. */
/* Stessa altezza per tutte le aperture (pagine, articoli, news, ricerca,
   archivi, 404), proporzionata allo schermo: il contenuto, pulsante compreso,
   sta al centro della fascia (scelta dell'utente, 2026-10-09). */
.twmp-page-hero {
	min-height: clamp(24rem, 45vh, 29rem);
	display: flex;
	align-items: center;
}

/* Su smartphone l'apertura segue il contenuto: niente altezza minima, margini
   interni ridotti (quelli del blocco sono in linea: serve !important). */
@media (max-width: 781px) {
	.twmp-page-hero {
		min-height: 0;
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
}

/* Invito dell'apertura ("Fissa una call »"): piu' stacco dal sottotitolo,
   pulsante pieno con la doppia freccia dopo il testo; al passaggio si inverte
   in bianco con testo blu (regola delle parti scure). */
.twmp-page-hero .twmp-page-hero__actions {
	margin-top: var(--wp--preset--spacing--50);
}

.twmp-cta .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1.5rem;
	font-weight: 600;
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	transition: background-color 0.18s, color 0.18s, transform 0.18s;
}

.twmp-cta .wp-element-button:hover {
	transform: translateY(-1px);
}

/* Doppia freccia dopo il testo: scorre un poco al passaggio. */
.twmp-cta__arrow {
	font-size: 1.25em;
	line-height: 1;
	transition: transform 0.18s;
}

.twmp-cta .wp-element-button:hover .twmp-cta__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.twmp-cta .wp-element-button:hover,
	.twmp-cta .wp-element-button:hover .twmp-cta__arrow {
		transform: none;
	}
}

/* Il flusso del core aggiunge un margine sopra il contenuto (dopo lo sfondo):
   lo sposterebbe sotto il centro. */
.twmp-band-dark.twmp-page-hero > .twmp-page-hero__inner {
	margin-block: 0;
}

/* Il contenuto parte dal filo sinistro del contenuto largo, come tutte le
   sezioni sotto: titolo e sottotitolo hanno la loro misura di lettura. */
.twmp-page-hero__inner {
	align-items: flex-start;
	/* L'apertura e' un contenitore flex: senza larghezza piena il blocco si
	   stringe sul testo e il margine automatico lo centra. */
	width: 100%;
}

.twmp-page-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: var(--wp--custom--font-weight--hero);
	line-height: var(--wp--custom--line-height--hero);
	letter-spacing: -0.015em;
}

/* Su smartphone il titolo d'apertura va a capo su due o tre righe: con
   interlinea 1 gli accenti toccano la riga sopra. Vale per tutte le aperture
   (pagine, slider della home, apertura del gruppo). */
@media (max-width: 781px) {
	:root {
		--wp--custom--line-height--hero: 1.12;
	}

	.twmp-hero__title {
		line-height: var(--wp--custom--line-height--hero);
	}
}

.twmp-page-hero__lead {
	margin: 0;
	max-width: 40rem;
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 84%, transparent);
}

/* Il sottotitolo e' il riassunto: nell'apertura niente collegamento "Leggi
   tutto" (nell'editor il blocco ne mostrerebbe il campo vuoto). */
.twmp-page-hero__lead .wp-block-post-excerpt__more-link {
	display: none;
}


/* =========================================================================
   Pagine interne: racconto a blocchi alternati, focus, competenze, claim
   ========================================================================= */
/* Racconto (patterns/narrative.php): sfumatura chiara dei token dall'alto al
   basso, una colonna di lettura al centro, testo grande e primo paragrafo in
   evidenza. Riferimento: "Un po' di storia" del sito originale. */
.twmp-narrative {
	background-image: linear-gradient(180deg, var(--wp--preset--color--tint-start), var(--wp--preset--color--tint-end));
}

.twmp-narrative__lead {
	font-weight: 700;
}

/* Sulla sfumatura il blu dei link non tiene il contrasto: colore del testo,
   sottolineato. */
.twmp-narrative a {
	/* Nomi di file lunghi senza spazi: vanno a capo invece di sbordare. */
	overflow-wrap: anywhere;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Seconda apertura (patterns/intro.php): titolo, testo e pulsante centrati
   su colonna di lettura, poi immagine larga quanto il contenuto. */
.twmp-section .twmp-intro__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--twmp-head-gap);
	text-align: center;
}

.twmp-section .twmp-intro__body > * {
	margin-block: 0;
}

.twmp-intro__body > p {
	max-width: 42rem;
	color: var(--twmp-muted);
}

.twmp-intro__body h3 {
	font-size: var(--wp--custom--text--title-size);
}

/* Immagine a tutta larghezza, da bordo a bordo, attaccata alla sezione dopo:
   solo il margine sopra, quelli laterali li gestisce l'allineamento "full". */
.twmp-section.twmp-intro:has(> .twmp-intro__media) {
	padding-bottom: 0 !important;
}

.twmp-section .twmp-intro__media {
	margin-top: var(--twmp-content-gap);
	margin-bottom: 0;
	line-height: 0;
}

.twmp-intro__img {
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	/* Sullo smartphone la fascia sarebbe sottilissima: ritaglio piu' alto. */
	.twmp-intro__img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}

/* Sezione divisa (patterns/split.php): immagine a tutta altezza su meta'
   sezione, testo sull'altra meta' allineato al filo del contenuto. Le sezioni
   consecutive alternano colore di fondo e lato dell'immagine. */
.twmp-section.twmp-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Il core da' ai gruppi con fondo un riempimento proprio: qui l'immagine
	   deve toccare i bordi della sezione. */
	padding: 0;
}

/* Le regole del flusso del core arrivano dopo: margini azzerati con la
   classe di sezione. */
.twmp-section.twmp-split > * {
	margin: 0;
}

.twmp-split__media,
.wp-block-image.twmp-split__media {
	position: relative;
	min-height: 24rem;
}

.twmp-split__img,
.wp-block-image.twmp-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Il lato esterno arriva al filo del contenuto largo: il riempimento e' la
   differenza fra la meta' di sezione e la meta' del contenuto largo. */
.twmp-split__content {
	align-self: center;
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--80);
	padding-inline: clamp(2rem, 5vw, 5rem) max(var(--wp--style--root--padding-right), calc(100% - 0.5 * var(--wp--style--global--wide-size)));
}

.twmp-split--reverse .twmp-split__media,
.twmp-split--reverse .wp-block-image.twmp-split__media {
	order: 2;
}

.twmp-split--reverse .twmp-split__content {
	padding-inline: max(var(--wp--style--root--padding-left), calc(100% - 0.5 * var(--wp--style--global--wide-size))) clamp(2rem, 5vw, 5rem);
}

.twmp-split .twmp-section__title {
	max-width: none;
	font-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.25rem);
	line-height: 1.15;
}

.twmp-split__content p {
	color: var(--twmp-muted);
}

/* Sezione scura: testo e collegamenti chiari, anello di focus chiaro. */
.twmp-split.has-hero-contrast-color .twmp-split__content p {
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 84%, transparent);
}

.twmp-split.has-hero-contrast-color a {
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-split.has-hero-contrast-color a:hover {
	text-decoration: underline;
}

.twmp-split.has-hero-contrast-color a:focus-visible {
	outline-color: var(--wp--preset--color--hero-contrast);
}

/* Sottotitoli dentro la sezione (es. due approfondimenti dopo il testo). */
.twmp-split__content h3 {
	font-size: var(--wp--custom--text--title-size);
}

.twmp-section .twmp-split__content > h3,
.twmp-section .twmp-split__content > .twmp-checklist {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Attestato dentro la sezione: su una tessera chiara, leggibile anche sul
   fondo scuro (il marchio ha linee blu notte su trasparente). */
.twmp-split__badge-wrap,
.wp-block-image.twmp-split__badge-wrap {
	display: inline-block;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	line-height: 0;
}

.twmp-split__badge,
.wp-block-image.twmp-split__badge-wrap img {
	width: 8rem;
	height: auto;
}

/* Su fondo scuro la targa bianca (il badge AWS non si ricolora) e' incorniciata
   da un alone chiaro e trasparente che la lega alla fascia; lo spazio sopra
   tiene l'alone lontano dal testo. */
.has-hero-start-background-color .twmp-split__badge-wrap,
.has-hero-start-background-color .wp-block-image.twmp-split__badge-wrap {
	margin-top: var(--wp--preset--spacing--40);
	margin-left: 0.5rem;
	padding: var(--wp--preset--spacing--30);
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--wp--preset--color--hero-contrast) 12%, transparent);
}

/* Marchio in testa a una scheda (partner, convenzioni). */
.twmp-card__logo,
.wp-block-image.twmp-card__logo {
	margin: 0;
	line-height: 0;
}

.twmp-card__logo img,
.wp-block-image.twmp-card__logo img {
	width: auto;
	max-width: 100%;
	height: 3.5rem;
	object-fit: contain;
}

/* Welfare: il testo sotto il titolo occupa tutta la larghezza del contenuto. */
.twmp-welfare .twmp-section__head--stack {
	max-width: var(--wp--style--global--wide-size);
}

/* Selettore piu' specifico della misura di lettura delle testate impilate. */
.twmp-welfare .twmp-section__head--stack .twmp-section__intro {
	max-width: none;
}

/* Due schede affiancate di pari larghezza (convenzioni del welfare). */
.twmp-cards--partners {
	grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* Quattro schede in due righe da due (mai tre piu' una orfana). */
.twmp-cards--two {
	grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
}

/* Tessere di sola etichetta (categorie): quattro per riga come l'originale,
   tre se il numero e' multiplo di tre e non di quattro: righe sempre piene
   (prima, con le colonne automatiche, 8 tessere a 1024px facevano 3 + 3 + 2). */
.twmp-cards--tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 782px) {
	.twmp-cards--tiles:has(> :last-child:nth-child(3n)):not(:has(> :last-child:nth-child(4n))) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Su smartphone due tessere per riga, piu' basse. */
@media (max-width: 781px) {
	.twmp-cards.twmp-cards--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--twmp-grid-gap: var(--wp--preset--spacing--30);
	}

	.twmp-cards--tiles .twmp-card {
		min-height: 4.5rem;
		padding: var(--wp--preset--spacing--30);
	}
}

/* Tessere di sola etichetta (categorie): titolo al centro, altezza uniforme. */
.twmp-cards--tiles .twmp-card {
	justify-content: center;
	padding: var(--wp--preset--spacing--50);
	min-height: 6rem;
}

.twmp-split.has-hero-contrast-color .twmp-checklist > li::before {
	background-color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 18%, transparent);
	color: var(--wp--preset--color--hero-contrast);
}

@media (max-width: 781px) {
	.twmp-section.twmp-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.twmp-split__media,
	.twmp-split--reverse .twmp-split__media,
	.wp-block-image.twmp-split__media,
	.twmp-split--reverse .wp-block-image.twmp-split__media {
		order: 0;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.twmp-split__content,
	.twmp-split--reverse .twmp-split__content {
		padding: var(--wp--preset--spacing--70) var(--wp--style--root--padding-right) var(--wp--preset--spacing--70) var(--wp--style--root--padding-left);
	}
}


.twmp-story {
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}


.twmp-story .wp-block-media-text__media img {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--md);
	/* Proporzione fissa: i blocchi hanno tutti lo stesso passo, l'immagine non
	   detta l'altezza e le foto verticali non sbilanciano la pagina. */
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.twmp-story .wp-block-media-text__content {
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	/* Colonna di lettura: righe di lunghezza confortevole. */
	max-width: 36rem;
}

.twmp-story .wp-block-media-text__content p {
	color: var(--twmp-muted);
}

.twmp-story .twmp-section__title {
	max-width: none;
	/* Gerarchia: sotto al titolo della pagina, sopra ai titoli delle schede. */
	font-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.25rem);
	line-height: 1.15;
	font-weight: var(--wp--custom--font-weight--heading);
}

/* Testo e immagine allineati al centro: nessun vuoto sotto la colonna corta. */
.twmp-story.wp-block-media-text {
	align-items: center;
}

.twmp-story .wp-block-media-text__content > * {
	margin-block: 0;
}

.twmp-story-link {
	font-weight: 700;
}


.twmp-claim__title {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

/* Etichetta sopra il titolo centrato della fascia. */
.twmp-claim > .twmp-eyebrow--chip,
.twmp-expertise > .twmp-eyebrow--chip {
	margin-inline: auto;
}


/* Pagina contatti: i modi per contattarci (telefono, email, consulenza). */


.twmp-ways {
	--twmp-grid-min: 15rem;
	text-align: center;
}

.twmp-way {
	align-items: center;
}

.twmp-way__title {
	margin: 0;
	color: var(--twmp-muted);
	font-weight: 600;
}

.twmp-way__value {
	margin: 0;
	font-weight: 700;
}


/* Elenco con spunta a piena larghezza nelle pagine soluzione. */
.twmp-checklist--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	font-weight: 600;
}

/* Elenco largo in coda alla testata di sezione: stacco come le griglie. */
.twmp-section > .twmp-checklist--wide {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* =========================================================================
   Pagina "Il gruppo": blocchi Mission, Vision, Inclusione e rimando alla vision
   ========================================================================= */


/* Rimando alla vision: testo e freccia, sottolineato al passaggio. */
.twmp-story-link a {
	text-decoration: none;
}

.twmp-story-link a:hover {
	text-decoration: underline;
}

/* =========================================================================
   Ritmo delle pagine interne: stesse misure per tutte le sezioni
   ========================================================================= */
.twmp-section__head--stack {
	align-items: flex-start;
	max-width: 42rem;
}

/* Paragrafo sotto il titolo: colonna di lettura, non la misura stretta
   dell'intro accanto al titolo. */
.twmp-section__head--stack .twmp-section__intro {
	max-width: 42rem;
}

.twmp-services > .twmp-section__intro {
	max-width: 42rem;
}

/* Titolo di sezione e intro: distanza costante. */
.twmp-section__intro {
	margin-top: var(--wp--preset--spacing--20);
}

/* Riempimento del contenuto: serve alle pagine di solo testo, non quando il
   contenuto inizia (o finisce) con una fascia a tutta larghezza, che deve
   attaccarsi all'apertura e al blocco dei contatti senza strisce intermedie. */
.site-main__content {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.site-main__content:has(> .twmp-section:first-child) {
	padding-top: 0;
}

.site-main__content:has(> .twmp-section:last-child) {
	padding-bottom: 0;
}

/* Le sezioni a tutta larghezza si toccano: lo spazio fra blocchi del flusso
   lascerebbe una striscia bianca fra due fondi colorati. */
.site-main__content > .twmp-section {
	margin-block: 0;
}

/* =========================================================================
   Pie di pagina: marchio e invito, colonne, barra con note legali
   ========================================================================= */
.site-footer__top {
	gap: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--hero-contrast) 16%, transparent);
}

.site-footer__brand {
	align-items: flex-start;
	max-width: 22rem;
}

.site-footer__cta {
	align-items: flex-start;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
}

.site-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 70%, transparent);
}

.site-footer__heading--spaced {
	margin-top: var(--wp--preset--spacing--40);
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__list--inline {
	grid-auto-flow: column;
	justify-content: start;
	gap: var(--wp--preset--spacing--30);
}

.site-footer__office {
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 78%, transparent);
	line-height: 1.45;
}

.site-footer__office strong {
	color: var(--wp--preset--color--hero-contrast);
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--hero-contrast) 16%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

/* Badge di conformita': pillole sottili sul fondo scuro, ognuna porta alla
   sua prova (inc/badges.php). Area cliccabile di 32 px. */
.site-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
}

.site-footer__badges + .site-footer__bar {
	margin-top: var(--wp--preset--spacing--40);
}

.site-footer .twmp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--hero-contrast) 28%, transparent);
	border-radius: var(--wp--custom--radius--pill);
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 88%, transparent);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.site-footer .twmp-badge:hover {
	border-color: var(--wp--preset--color--hero-contrast);
	background-color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 10%, transparent);
	color: var(--wp--preset--color--hero-contrast);
	text-decoration: none;
}

.twmp-badge__icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__copy {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 70%, transparent);
}

/* Marchio nel pie' di pagina in versione bianca: il file in libreria è a colori,
   qui viene reso monocromatico (le parti trasparenti restano tali). */
.site-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* Sito del gruppo nella barra in fondo, dopo le note legali: freccia di link esterno. */
.site-footer__group-arrow {
	margin-left: 0.25em;
}


/* =========================================================================
   Striscia di marchi (certificazioni, partner e tecnologie): scorre da
   sinistra a destra nella larghezza del contenuto (parte dal filo del titolo),
   marchi in grigio che si colorano al passaggio del mouse. Markup in
   inc/marquee.php.
   ========================================================================= */
/* Le regole di layout del core arrivano dopo: serve la classe di sezione. */
.twmp-section .twmp-marquee {
	position: relative;
	margin-top: var(--wp--preset--spacing--50);
}

.twmp-section .twmp-marquee + .twmp-section__head {
	margin-top: var(--wp--preset--spacing--70);
}

.twmp-marquee__viewport {
	overflow: hidden;
	/* Dissolvenza ai bordi: il valore e' l'opacita' della maschera, non un colore. */
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.twmp-marquee__track {
	display: flex;
	width: max-content;
	animation: twmp-marquee calc(var(--twmp-marquee-items, 14) * 3.5s) linear infinite;
}

/* La traccia contiene due sequenze identiche: mezza traccia = un giro. */
@keyframes twmp-marquee {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

.twmp-marquee:hover .twmp-marquee__track,
.twmp-marquee:focus-within .twmp-marquee__track,
.twmp-marquee__pause:checked ~ .twmp-marquee__viewport .twmp-marquee__track {
	animation-play-state: paused;
}

.twmp-marquee__list {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	/* Lo stesso spazio in coda: il giro si chiude senza scatto. */
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20) 0;
	list-style: none;
}

/* Tessere tutte uguali: il marchio si adatta dentro, senza deformarsi. */
.twmp-tile {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Tessera ampia: i marchi quadrati (attestati AWS) restano leggibili. */
	width: 13rem;
	height: 8rem;
	padding: 0.75rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	transition: transform 0.18s, box-shadow 0.18s, background-color 0.18s;
}

.has-surface-background-color .twmp-tile {
	background-color: var(--wp--preset--color--base);
}

.twmp-tile__img {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	/* I marchi in JPG hanno il fondo bianco: cosi' prende il colore della tessera. */
	mix-blend-mode: multiply;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.18s, opacity 0.18s;
}

.twmp-tile:hover {
	transform: translateY(-3px);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--md);
}

.twmp-tile:hover .twmp-tile__img,
.twmp-tile:focus-within .twmp-tile__img {
	filter: none;
	opacity: 1;
}

/* Tessera con didascalia: marchio sopra, nome sotto; tessera piu' alta perche'
   il marchio resti grande quanto nelle altre. */
.twmp-tile--captioned {
	height: 10rem;
}

.twmp-tile--captioned,
.twmp-tile--captioned .twmp-tile__link {
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.twmp-tile--captioned .twmp-tile__img {
	flex: 1 1 0;
	min-height: 0;
	height: auto;
}

.twmp-tile__caption {
	flex: 0 0 auto;
	/* Sempre una riga: i nomi brevi ci stanno, i marchi restano tutti uguali. */
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	color: var(--twmp-muted);
	transition: color 0.18s;
}

.twmp-tile:hover .twmp-tile__caption,
.twmp-tile:focus-within .twmp-tile__caption {
	color: var(--wp--preset--color--contrast);
}

/* Marchio cliccabile: il collegamento occupa tutta la tessera. */
.twmp-tile__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.twmp-tile__link:focus-visible {
	outline-offset: -3px;
}

/* Nessun pulsante a vista: un clic sulla striscia la ferma o la riavvia
   (assets/js/app.js); da tastiera la casella nascosta contorna la striscia. */
.twmp-marquee__viewport {
	cursor: pointer;
}

.twmp-marquee:has(> .twmp-marquee__pause:focus-visible) {
	outline: var(--twmp-focus-width, 3px) solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--md);
}

@media (max-width: 781px) {
	.twmp-tile {
		width: 10rem;
		height: 6.25rem;
		padding: var(--wp--preset--spacing--20);
	}

	/* Piu' larga: anche la didascalia piu' lunga sta in una riga. */
	.twmp-tile--captioned {
		width: 12rem;
		height: 8.5rem;
	}

	.twmp-tile__caption {
		font-size: 0.8125rem;
	}
}

/* Pochi marchi: riga ferma e centrata, a capo se serve (stessa resa del
   movimento ridotto qui sotto). */
.twmp-marquee--static .twmp-marquee__track {
	display: block;
	width: auto;
	animation: none;
}

.twmp-marquee--static .twmp-marquee__viewport {
	mask-image: none;
	cursor: auto;
}

.twmp-marquee--static .twmp-marquee__list {
	flex-wrap: wrap;
	justify-content: center;
	padding-right: 0;
}

/* Movimento ridotto: striscia ferma, ogni marchio una volta, a capo se serve. */
@media (prefers-reduced-motion: reduce) {
	.twmp-marquee__track {
		display: block;
		animation: none;
		width: auto;
	}

	.twmp-marquee__viewport {
		mask-image: none;
		cursor: auto;
	}

	.twmp-marquee__list {
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
	}

	.twmp-marquee [aria-hidden="true"],
	.twmp-marquee__pause,
	.twmp-marquee__pause + label {
		display: none;
	}

	.twmp-tile:hover {
		transform: none;
	}
}

/* =========================================================================
   Ritmo unico delle testate di sezione, uguale in tutte le pagine:
   etichetta -> titolo -> testo a distanza --twmp-head-gap, testata ->
   contenuto (schede, strisce, immagini, colonne) a --twmp-content-gap.
   Le regole di layout del core arrivano dopo: selettori con la classe di
   sezione.
   ========================================================================= */
:root {
	/* Preset del core: spacing-40 = 1rem; tre volte per il distacco dal contenuto. */
	--twmp-head-gap: var(--wp--preset--spacing--40);
	--twmp-content-gap: calc(var(--wp--preset--spacing--40) * 3);
}

/* Contenitori della testata: la distanza la da' solo lo spazio fra i figli. */
.twmp-section .twmp-section__head--stack,
.twmp-section .twmp-section__head > .wp-block-group,
.twmp-section .twmp-sectors__inner,
.twmp-band-dark > .alignwide.is-vertical,
.twmp-page-hero .twmp-page-hero__inner,
.twmp-contact__aside .twmp-contact__invite {
	row-gap: var(--twmp-head-gap);
}

.twmp-section .twmp-section__head .twmp-eyebrow,
.twmp-section .twmp-section__head .twmp-section__title,
.twmp-section .twmp-section__head .twmp-section__intro,
.twmp-section .twmp-sectors__inner > .twmp-eyebrow,
.twmp-section .twmp-sectors__inner > .twmp-section__title {
	margin-block: 0;
}

/* Etichetta e titolo direttamente nella sezione (fasce con titolo centrato). */
.twmp-section > .twmp-eyebrow--chip {
	margin-block: 0;
}

.twmp-section > .twmp-eyebrow--chip + .twmp-section__title {
	margin-block-start: var(--twmp-head-gap);
}

/* Testata -> contenuto. */
.twmp-section > .twmp-section__head + *,
.twmp-section > .twmp-section__title + .alignwide,
.twmp-section .twmp-sectors__inner > .twmp-sector-list {
	margin-block-start: var(--twmp-content-gap);
}

/* Nel gruppo dei settori la distanza dal titolo si somma allo spazio fra i figli. */
.twmp-section .twmp-sectors__inner > .twmp-sector-list {
	margin-block-start: calc(var(--twmp-content-gap) - var(--twmp-head-gap));
}

/* =========================================================================
   Freccia a puntini dietro la testata di sezione (classe twmp-arrow sulla
   sezione), come sul sito di riferimento; colore dal blu del sito. Sta sul
   lato destro della sezione, sul filo del contenuto largo.
   ========================================================================= */
.twmp-arrow .twmp-section__head {
	position: relative;
	isolation: isolate;
}

.twmp-arrow .twmp-section__head::after {
	content: "";
	position: absolute;
	top: -1.5rem;
	right: 0;
	z-index: -1;
	width: 15rem;
	aspect-ratio: 294 / 291;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.35;
	-webkit-mask: var(--twmp-arrow-dots) center / contain no-repeat;
	mask: var(--twmp-arrow-dots) center / contain no-repeat;
	pointer-events: none;
}

@media (max-width: 781px) {
	.twmp-arrow .twmp-section__head::after {
		top: -2rem;
		width: 9rem;
	}
}

/* =========================================================================
   Copertina dell'articolo a tutto schermo (inc/lightbox.php): la copertina e'
   un pulsante, la finestra mostra l'immagine intera su un velo scuro.
   ========================================================================= */
.twmp-zoom {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: zoom-in;
}

.twmp-zoom:focus-visible {
	outline: 3px solid var(--wp--preset--color--hero-contrast);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--lg);
}

/* Il pulsante prenderebbe la larghezza dell'immagine (i pulsanti non si allargano
   da soli): la copertina su smartphone resterebbe staccata dal bordo destro. */
.twmp-article__cover-mobile .twmp-zoom {
	width: 100%;
}

.twmp-article__cover-mobile .twmp-zoom:focus-visible {
	outline-color: var(--wp--preset--color--primary);
	outline-offset: -3px;
}

.twmp-lightbox {
	max-width: 92vw;
	max-height: 92vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

/* La finestra sta dentro l'apertura, che azzera margini e larghezze dei suoi
   elementi: il centramento del <dialog> (margin auto) va ripristinato. */
.twmp-page-hero .twmp-page-hero__split > .twmp-lightbox {
	margin: auto;
	max-width: 92vw;
}

.twmp-lightbox::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--hero-start) 88%, transparent);
}

.twmp-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 86vh;
	border-radius: var(--wp--custom--radius--md);
	object-fit: contain;
}

.twmp-lightbox__bar {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(35%, -35%);
	margin: 0;
}

.twmp-lightbox__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--wp--custom--shadow--md);
}

.twmp-lightbox__close:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}

.twmp-lightbox__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--hero-contrast);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.twmp-lightbox__bar {
		transform: none;
		top: 0.5rem;
		right: 0.5rem;
	}
}


/* =========================================================================
   Domande frequenti (patterns/faq.php): una riga per domanda, risposta che
   si apre sotto. Le domande diventano dati strutturati FAQPage.
   ========================================================================= */
.twmp-faq__list,
.twmp-accordion {
	margin-top: var(--twmp-content-gap);
	border-top: 1px solid var(--wp--preset--color--border);
}

.twmp-section :is(.twmp-faq__list, .twmp-accordion) > * + * {
	margin-block-start: 0;
}

:is(.twmp-faq, .twmp-accordion) .wp-block-details {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

:is(.twmp-faq, .twmp-accordion) .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	font-size: var(--wp--custom--text--title-size);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

:is(.twmp-faq, .twmp-accordion) .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Freccia a destra: in giu' da chiusa, in su da aperta. */
:is(.twmp-faq, .twmp-accordion) .wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	margin-inline-start: auto;
	width: 0.6rem;
	height: 0.6rem;
	margin-inline-end: 0.25rem;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

:is(.twmp-faq, .twmp-accordion) .wp-block-details[open] > summary::after {
	transform: translateY(25%) rotate(-135deg);
}

:is(.twmp-faq, .twmp-accordion) .wp-block-details summary:hover {
	color: var(--wp--preset--color--primary);
}

:is(.twmp-faq, .twmp-accordion) .wp-block-details > :not(summary) {
	margin-block: 0 var(--wp--preset--spacing--40);
}

@media (prefers-reduced-motion: reduce) {
	:is(.twmp-faq, .twmp-accordion) .wp-block-details summary::after {
		transition: none;
	}
}

/* =========================================================================
   Persone (pagina team): foto su fondo chiaro e, sopra la parte bassa, un
   pannello inclinato nel colore del marchio con nome e ruolo; i responsabili
   (twmp-card--lead) nel colore di accento. Righe incomplete centrate.
   ========================================================================= */
.twmp-section .twmp-cards--people {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.twmp-section .twmp-cards--people > .twmp-card {
	flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--40)) / 4);
	min-width: 0;
}

.twmp-card--person {
	position: relative;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.twmp-card--person .wp-block-image.twmp-card__cover {
	aspect-ratio: 8 / 9;
}

.twmp-card--person .wp-block-image.twmp-card__cover img,
.twmp-card--person:hover .wp-block-image.twmp-card__cover img {
	object-position: 50% 0;
	transform: none;
}

.twmp-card--person .twmp-card__body {
	position: absolute;
	inset: auto 0 0;
	gap: 0.25rem;
	padding: 3rem var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	text-align: center;
	clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
}

.twmp-card--person .twmp-card__body > * {
	margin: 0;
	color: inherit;
}

.twmp-card--person .twmp-card__title {
	font-size: var(--wp--custom--text--title-size);
}

.twmp-card--person .twmp-card__text {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.twmp-card--lead .twmp-card__body {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

@media (max-width: 1023px) {
	.twmp-section .twmp-cards--people > .twmp-card {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--40)) / 3);
	}
}

@media (max-width: 781px) {
	.twmp-section .twmp-cards--people {
		gap: var(--wp--preset--spacing--30);
	}

	.twmp-section .twmp-cards--people > .twmp-card {
		flex-basis: calc(50% - 0.5 * var(--wp--preset--spacing--30));
	}

	.twmp-card--person .twmp-card__body {
		padding: 2rem var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		clip-path: polygon(0 1.5rem, 100% 0, 100% 100%, 0 100%);
	}

	.twmp-card--person .twmp-card__title {
		font-size: var(--wp--custom--text--size);
	}

	.twmp-card--person .twmp-card__text {
		font-size: var(--wp--preset--font-size--x-small);
	}
}

/* =========================================================================
   Riquadri con immagine (twmp-card--tile, es. progetti): immagine piena,
   titolo e testo bianchi in basso su una sfumatura scura che garantisce il
   contrasto; tutta la scheda e' cliccabile tramite il link del titolo.
   ========================================================================= */
.twmp-section .twmp-card--tile {
	position: relative;
	display: grid;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--wp--preset--color--hero-start);
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-section .twmp-card--tile > * {
	grid-area: 1 / 1;
	margin: 0;
}

.twmp-card--tile > .wp-block-image.twmp-card__cover {
	aspect-ratio: 4 / 5;
	width: 100%;
}

.twmp-card--tile .twmp-card__body {
	align-self: end;
	z-index: 1;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	background: linear-gradient(to top,
		color-mix(in srgb, var(--wp--preset--color--hero-start) 92%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--hero-start) 72%, transparent) 60%,
		transparent);
}

.twmp-card--tile .twmp-card__body > * {
	margin: 0;
}

.twmp-card--tile .twmp-card__title {
	font-size: var(--wp--custom--text--title-size);
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-card--tile .twmp-card__link {
	color: inherit;
	text-decoration: none;
}

/* Link esteso a tutta la scheda. */
.twmp-card--tile .twmp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.twmp-card--tile .twmp-card__text {
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 88%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

.twmp-card--tile .wp-block-image.twmp-card__cover img {
	transition: transform 0.5s ease;
}

.twmp-card--tile:hover .wp-block-image.twmp-card__cover img,
.twmp-card--tile:focus-within .wp-block-image.twmp-card__cover img {
	transform: scale(1.06);
}

.twmp-card--tile:hover .twmp-card__title,
.twmp-card--tile:focus-within .twmp-card__title {
	color: var(--wp--preset--color--accent);
}

.twmp-card--tile:has(.twmp-card__link:focus-visible) {
	outline: var(--twmp-focus-width, 3px) solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.twmp-card--tile .twmp-card__link:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.twmp-card--tile .wp-block-image.twmp-card__cover img {
		transition: none;
	}

	.twmp-card--tile:hover .wp-block-image.twmp-card__cover img,
	.twmp-card--tile:focus-within .wp-block-image.twmp-card__cover img {
		transform: none;
	}
}

/* Sullo smartphone una per riga: riquadro meno alto. */
@media (max-width: 781px) {
	.twmp-card--tile > .wp-block-image.twmp-card__cover {
		aspect-ratio: 4 / 3;
	}
}

/* =========================================================================
   Galleria di un progetto: immagini una sotto l'altra, larghe quanto il
   contenuto e mai oltre la loro misura reale.
   ========================================================================= */
.twmp-gallery__items {
	display: grid;
	justify-items: center;
	gap: var(--twmp-content-gap);
	margin-top: var(--twmp-content-gap);
}

.twmp-section .twmp-gallery__items > * {
	margin: 0;
}

.twmp-gallery__items img {
	width: auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

/* =========================================================================
   Scheda progetto: elementi per raccontare un caso (dati in breve, flusso a
   passi, fisarmonica con icone).
   ========================================================================= */

/* Icone in linea (immagini nel testo): stessa misura ovunque. */
:is(.twmp-flow, .twmp-accordion) img {
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
	vertical-align: middle;
	border-radius: var(--wp--custom--radius--sm);
}

/* Dati in breve come scheda d'identita' del progetto: riquadri di misure
   diverse sulla stessa colonna larga delle altre griglie. Il riquadro scuro
   del cliente occupa due colonne e due righe; ogni altro riquadro ha l'icona
   del tema in un quadrato lime accanto all'etichetta, poi il valore (testo,
   badge, pillole, linea del tempo, dispositivi). */
.twmp-section .twmp-factsheet {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--twmp-case-gap, var(--wp--preset--spacing--50));
	margin-top: var(--twmp-content-gap);
}

.twmp-section .twmp-factsheet > *,
.twmp-section .twmp-fact > *,
.twmp-section .twmp-fact__pair > * {
	margin: 0;
}

.twmp-fact {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	align-items: center;
	gap: var(--wp--preset--spacing--30) 0.75rem;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
}

.twmp-fact > * {
	grid-column: 1 / -1;
}

.twmp-fact > .twmp-card__badge {
	grid-column: 1;
	position: static;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.twmp-fact > .twmp-card__badge .twmp-icon {
	width: 1.375rem;
	height: 1.375rem;
	stroke-width: 1.75;
}

.twmp-fact > .twmp-card__badge + .twmp-fact__label {
	grid-column: 2;
}

.twmp-fact__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	line-height: 1.3;
	text-transform: uppercase;
}

.twmp-fact__value {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.25;
}

.twmp-fact__note {
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, currentColor 78%, transparent);
}

.twmp-section .twmp-fact > .twmp-fact__note {
	margin-top: calc(var(--wp--preset--spacing--30) * -0.75);
}

.twmp-fact--wide {
	grid-column: span 2;
}

/* Riquadro su tutta la riga: icona, etichetta e contenuto sulla stessa linea. */
.twmp-fact.twmp-fact--full {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) 0.75rem;
}

.twmp-fact--full > .twmp-fact__label {
	margin-right: var(--wp--preset--spacing--30);
}

/* Riquadro del cliente: fondo scuro con puntinato e alone lime, marchio su
   una targa chiara (qualunque marchio resta leggibile), nome in grande. */
.twmp-fact.twmp-fact--client {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
	overflow: hidden;
	isolation: isolate;
	padding: var(--wp--preset--spacing--50);
	background:
		radial-gradient(circle at 100% 0, color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent), transparent 55%),
		linear-gradient(135deg, var(--wp--preset--color--hero-start), var(--wp--preset--color--hero-end));
	color: var(--wp--preset--color--hero-contrast);
}

.twmp-fact--client::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(color-mix(in srgb, var(--wp--preset--color--hero-contrast) 18%, transparent) 1px, transparent 1.5px);
	background-size: 1rem 1rem;
	-webkit-mask-image: linear-gradient(200deg, #000, transparent 65%);
	mask-image: linear-gradient(200deg, #000, transparent 65%);
}

.twmp-fact .wp-block-image.twmp-fact__logo {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--md);
	line-height: 0;
}

.twmp-fact .wp-block-image.twmp-fact__logo img {
	width: auto;
	max-width: 14rem;
	height: 3.5rem;
	object-fit: contain;
}

.twmp-fact__pairs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

.twmp-fact__pair {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.twmp-fact--client .twmp-fact__label {
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 75%, transparent);
}

.twmp-fact__name {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* Badge: etichette lime con spunta (cosa abbiamo fatto, settore). */
.twmp-section ul.twmp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.twmp-badges > li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.twmp-badges > li::before {
	content: "\2713";
	font-size: 0.75em;
}

/* Linea del tempo: anno di inizio e di fine uniti da una linea con due punti. */
.twmp-section ul.twmp-timeline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
}

.twmp-timeline > li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.twmp-timeline > li:not(:last-child) {
	flex: 1 1 auto;
}

.twmp-timeline > li:not(:last-child)::after {
	content: "";
	flex: 1 1 auto;
	min-width: 2rem;
	height: 0.875rem;
	background:
		radial-gradient(circle, var(--wp--preset--color--accent) 0 34%, var(--wp--preset--color--primary) 38% 62%, transparent 66%) left center / 0.875rem 0.875rem no-repeat,
		radial-gradient(circle, var(--wp--preset--color--accent) 0 34%, var(--wp--preset--color--primary) 38% 62%, transparent 66%) right center / 0.875rem 0.875rem no-repeat,
		linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) center / 100% 2px no-repeat;
}

/* Dispositivi: un'icona su targa chiara per ognuno, con il nome sotto. */
.twmp-devices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.twmp-section .twmp-device {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
}

.twmp-device > .twmp-card__badge {
	position: static;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--xs);
}

.twmp-device > .twmp-card__badge .twmp-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.twmp-section .twmp-device > p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

@media (max-width: 1023px) {
	.twmp-section .twmp-factsheet {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.twmp-fact.twmp-fact--client {
		grid-row: auto;
	}
}

@media (max-width: 599px) {
	.twmp-section .twmp-factsheet {
		grid-template-columns: minmax(0, 1fr);
	}

	.twmp-fact.twmp-fact--client,
	.twmp-fact--wide {
		grid-column: auto;
	}
}

/* Mappa delle sedi: terre a puntini nel colore del portale (l'immagine e' solo
   la forma, usata come maschera: --twmp-map-image con indirizzo assoluto),
   segnaposto ed etichette scritti nella pagina con le posizioni in percentuale.
   Etichetta a destra del punto; --left a sinistra, --above sopra; --sm-left e
   --sm-above valgono solo su smartphone, dove i punti vicini si avvicinano. */
.twmp-map {
	margin: var(--twmp-content-gap) 0 0;
}

.twmp-map__canvas {
	position: relative;
}

.twmp-map__canvas::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--twmp-map-dot, color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--hero-start)));
	opacity: 0.55;
	-webkit-mask: var(--twmp-map-image) center / 100% 100% no-repeat;
	mask: var(--twmp-map-image) center / 100% 100% no-repeat;
}

.twmp-map__pin {
	position: absolute;
	width: 0;
	height: 0;
}

.twmp-map__dot {
	position: absolute;
	left: -0.55rem;
	top: -0.55rem;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--base), 0 4px 12px color-mix(in srgb, var(--wp--preset--color--hero-start) 35%, transparent);
}

.twmp-map__dot::after {
	content: "";
	position: absolute;
	inset: -7px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	opacity: 0;
	animation: twmp-map-ping 2.6s ease-out infinite;
}

@keyframes twmp-map-ping {
	0% { transform: scale(0.5); opacity: 0.7; }
	100% { transform: scale(2.1); opacity: 0; }
}

.twmp-map__label {
	position: absolute;
	top: 0;
	left: 1.1rem;
	transform: translateY(-50%);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--hero-start) 16%, transparent);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.twmp-map__pin--left .twmp-map__label {
	left: auto;
	right: 1.1rem;
}

.twmp-map__pin--above .twmp-map__label {
	top: -1.6rem;
	left: 0;
	right: auto;
	transform: translateX(-50%);
}

.twmp-map__credit {
	margin-top: 0.35rem;
	text-align: right;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--twmp-muted);
}

.twmp-map__credit a {
	color: inherit;
}

@media (max-width: 781px) {
	.twmp-map__label {
		padding: 0.2rem 0.5rem;
		font-size: var(--wp--preset--font-size--x-small);
	}

	.twmp-map__dot {
		transform: scale(0.8);
	}

	.twmp-map__pin--sm-left .twmp-map__label {
		top: 0;
		left: auto;
		right: 1rem;
		transform: translateY(-50%);
	}

	.twmp-map__pin--sm-above .twmp-map__label {
		top: -1.5rem;
		left: 0;
		right: auto;
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.twmp-map__dot::after {
		animation: none;
	}
}

/* Grafico polare: spicchi uguali attorno al nome del portale, ognuno con la sua
   icona, e accanto l'elenco delle voci con la stessa icona nel colore dello
   spicchio. Gli spicchi sono uguali perche' le voci hanno lo stesso peso: e' un
   diagramma, non un grafico di dati. Passando su una voce il suo spicchio si
   allarga e gli altri si attenuano. Colori dai token del portale, fino a sei voci. */
.twmp-polar {
	--twmp-polar-1: var(--wp--preset--color--hero-start);
	--twmp-polar-2: var(--wp--preset--color--hero-end);
	--twmp-polar-3: var(--wp--preset--color--primary);
	--twmp-polar-4: color-mix(in srgb, var(--wp--preset--color--primary) 50%, var(--wp--preset--color--accent));
	--twmp-polar-5: var(--wp--preset--color--accent);
	--twmp-polar-6: var(--wp--preset--color--tint-end);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--70);
	align-items: center;
	margin-top: var(--twmp-content-gap);
}

.twmp-polar__chart {
	width: 100%;
	max-width: 30rem;
	justify-self: center;
}

.twmp-polar__chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.twmp-polar__grid circle {
	fill: none;
	stroke: var(--wp--preset--color--border);
	stroke-dasharray: 3 5;
}

.twmp-polar__grid line {
	stroke: var(--wp--preset--color--border);
}

:is(.twmp-polar__seg, .twmp-polar__list > li):nth-child(1) { --twmp-polar-c: var(--twmp-polar-1); }
:is(.twmp-polar__seg, .twmp-polar__list > li):nth-child(2) { --twmp-polar-c: var(--twmp-polar-2); }
:is(.twmp-polar__seg, .twmp-polar__list > li):nth-child(3) { --twmp-polar-c: var(--twmp-polar-3); }
:is(.twmp-polar__seg, .twmp-polar__list > li):nth-child(4) { --twmp-polar-c: var(--twmp-polar-4); }
:is(.twmp-polar__seg, .twmp-polar__list > li):nth-child(5) { --twmp-polar-c: var(--twmp-polar-5); }
:is(.twmp-polar__seg, .twmp-polar__list > li):nth-child(6) { --twmp-polar-c: var(--twmp-polar-6); }

/* Icona chiara sugli spicchi scuri, scura su quelli chiari (dal quinto). */
.twmp-polar__seg,
.twmp-polar__icon {
	color: var(--wp--preset--color--base);
}

.twmp-polar__seg:nth-child(n+5),
.twmp-polar__list > li:nth-child(n+5) .twmp-polar__icon {
	color: var(--wp--preset--color--accent-contrast);
}

.twmp-polar__seg {
	transform-box: view-box;
	transform-origin: 50% 50%;
	transition: transform 0.35s, opacity 0.35s;
}

.twmp-polar__seg path {
	fill: var(--twmp-polar-c);
	stroke: var(--wp--preset--color--base);
	stroke-width: 3;
}

.twmp-polar__core circle {
	fill: var(--wp--preset--color--base);
	stroke: var(--wp--preset--color--border);
}

.twmp-polar__core text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.5px;
	fill: var(--wp--preset--color--hero-start);
	text-anchor: middle;
	dominant-baseline: central;
}

.twmp-section .twmp-polar__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--border);
}

.twmp-polar__list > li {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0.3rem 1.1rem;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	transition: background-color 0.25s;
}

.twmp-polar__list > li:hover {
	background-color: var(--wp--preset--color--tint-start);
}

.twmp-polar__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--twmp-polar-c);
}

.twmp-polar__icon .twmp-icon {
	width: 1.3rem;
	height: 1.3rem;
}

.twmp-polar__list h3 {
	margin: 0;
	font-size: var(--wp--custom--text--title-size);
	line-height: 1.25;
}

.twmp-polar__list p {
	margin: 0;
	color: var(--twmp-muted);
}

.twmp-polar:has(.twmp-polar__list > li:hover) .twmp-polar__seg {
	opacity: 0.28;
}

.twmp-polar:has(.twmp-polar__list > li:nth-child(1):hover) .twmp-polar__seg:nth-child(1),
.twmp-polar:has(.twmp-polar__list > li:nth-child(2):hover) .twmp-polar__seg:nth-child(2),
.twmp-polar:has(.twmp-polar__list > li:nth-child(3):hover) .twmp-polar__seg:nth-child(3),
.twmp-polar:has(.twmp-polar__list > li:nth-child(4):hover) .twmp-polar__seg:nth-child(4),
.twmp-polar:has(.twmp-polar__list > li:nth-child(5):hover) .twmp-polar__seg:nth-child(5),
.twmp-polar:has(.twmp-polar__list > li:nth-child(6):hover) .twmp-polar__seg:nth-child(6) {
	opacity: 1;
	transform: scale(1.06);
}

@media (max-width: 1024px) {
	.twmp-polar {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.twmp-polar__chart {
		max-width: 22rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.twmp-polar__seg,
	.twmp-polar__list > li {
		transition: none;
	}
}

/* Flusso a passi: riquadri numerati collegati da frecce, in riga sul
   computer e in colonna sullo smartphone (sempre leggibile per intero). */
.twmp-section ol.twmp-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: var(--twmp-content-gap) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: twmp-flow;
}

.twmp-flow > li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	counter-increment: twmp-flow;
}

.twmp-flow > li::before {
	content: counter(twmp-flow);
	position: absolute;
	/* Centrato sull'icona (2,25rem) della stessa riga. */
	top: calc(var(--wp--preset--spacing--40) + 0.25rem);
	right: var(--wp--preset--spacing--40);
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small);
}

.twmp-flow > li:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	top: 50%;
	right: calc(var(--wp--preset--spacing--50) * -1);
	width: var(--wp--preset--spacing--50);
	transform: translateY(-50%);
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.twmp-flow > li strong {
	font-size: var(--wp--custom--text--title-size);
	line-height: 1.25;
}

.twmp-flow > li img {
	margin-bottom: var(--wp--preset--spacing--20);
}

@media (max-width: 781px) {
	.twmp-section ol.twmp-flow {
		grid-template-columns: 1fr;
	}

	.twmp-flow > li:not(:last-child)::after {
		content: "\2193";
		top: 100%;
		right: auto;
		left: 50%;
		width: auto;
		height: var(--wp--preset--spacing--50);
		transform: translateX(-50%);
		display: grid;
		place-items: center;
	}
}

/* Fisarmonica: icona accanto al nome nella riga della domanda. */
.twmp-accordion .wp-block-details summary img {
	flex: 0 0 auto;
}

/* Elenco con spunte dentro una scheda a tab: due colonne fisse, righe allineate,
   da 1024px in su (sotto le colonne sarebbero troppo strette e le voci
   andrebbero a capo); una colonna sola su tablet e smartphone. */
.twmp-tabs__panel .twmp-checklist {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--twmp-content-gap);
}

@media (max-width: 1023px) {
	.twmp-tabs__panel .twmp-checklist {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}
}

/* Scheda a tab come riquadro: contenuto su fondo chiaro, staccato dalla sezione. */
.twmp-tabs__panel {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
}

@media (max-width: 599px) {
	.twmp-tabs__panel {
		padding: var(--wp--preset--spacing--40);
	}
}

/* Etichette a pillola (tecnologie, servizi). */
.twmp-section ul.twmp-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.twmp-pills > li {
	margin: 0;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

/* Schermata in una finestra del browser: barra con tre puntini sopra l'immagine. */
.wp-block-image.twmp-figure-browser {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--md);
	line-height: 0;
}

.wp-block-image.twmp-figure-browser::before {
	content: "";
	display: block;
	height: 2rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background:
		radial-gradient(circle at 1rem 50%, var(--wp--preset--color--border) 0.3rem, transparent 0.32rem),
		radial-gradient(circle at 1.75rem 50%, var(--wp--preset--color--border) 0.3rem, transparent 0.32rem),
		radial-gradient(circle at 2.5rem 50%, var(--wp--preset--color--border) 0.3rem, transparent 0.32rem);
}

.wp-block-image.twmp-figure-browser img {
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
}

/* Testo introduttivo su fascia scura: chiaro, leggibile sul fondo. */
.twmp-band-dark .twmp-section__intro {
	color: color-mix(in srgb, var(--wp--preset--color--hero-contrast) 75%, transparent);
}

/* Risultati su fascia scura: spunte chiare in colonne. */
.twmp-band-dark .twmp-checklist > li::before {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.twmp-results .twmp-checklist {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--twmp-content-gap);
	font-size: var(--wp--custom--text--title-size);
	font-weight: 600;
}

/* Numeri in riga: con quattro voci quattro colonne piene (niente traccia vuota a destra). */
.twmp-stats__grid:has(> .twmp-stat:nth-child(4):last-child) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.twmp-stats__grid:has(> .twmp-stat:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.twmp-stats__grid:has(> .twmp-stat:nth-child(4):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   Scheda progetto (sezioni twmp-case): un solo passo per tutte le griglie,
   bordi allineati alla colonna larga, apertura a due colonne di pari altezza.
   ========================================================================= */
.twmp-case {
	--twmp-case-gap: var(--wp--preset--spacing--50);
}

.twmp-case .twmp-grid {
	--twmp-grid-gap: var(--twmp-case-gap);
}

.twmp-section.twmp-case.twmp-results .twmp-checklist {
	gap: var(--wp--preset--spacing--40) var(--twmp-case-gap);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.twmp-section.twmp-case.twmp-results .twmp-checklist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.twmp-section.twmp-case.twmp-results .twmp-checklist {
		grid-template-columns: minmax(0, 1fr);
	}
}

.twmp-section.twmp-case .twmp-grid,
.twmp-section.twmp-case ol.twmp-flow {
	gap: var(--twmp-case-gap);
}

.twmp-section.twmp-case ol.twmp-flow > li:not(:last-child)::after {
	right: calc(var(--twmp-case-gap) * -1);
	width: var(--twmp-case-gap);
}

/* Testo su due colonne: stessa distanza delle griglie, cosi' la seconda
   colonna parte dove parte la terza voce delle griglie a quattro. */
.twmp-section .wp-block-columns.twmp-text-columns {
	gap: var(--twmp-case-gap, var(--wp--preset--spacing--50));
}

.twmp-text-columns .wp-block-column > :first-child {
	margin-top: 0;
}

.twmp-text-columns .wp-block-column > :last-child {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.twmp-section .wp-block-columns.twmp-text-columns {
		gap: var(--wp--preset--spacing--30);
	}
}

/* Schermata in cornice: sempre larga quanto il contenuto, anche prima che
   l'immagine arrivi (altrimenti il riquadro nascerebbe largo zero). */
.twmp-gallery__items > .wp-block-image.twmp-figure-browser {
	justify-self: stretch;
	width: 100%;
}