/* =====================================================================
   LION BRAND — il vestito delle singole pagine
   ---------------------------------------------------------------------
   `tema.css` porta il sistema condiviso: token, header, footer, card,
   cursore, grana, focus. Qui sta ciò che vive in **una** pagina sola e non
   ha ragione di pesare su tutte le altre.

   Valgono le stesse due regole di `tema.css`, che non si ripetono per caso:

     1. si aggancia solo alle classi `lb-*` messe a mano sui Container e sui
        widget, mai a quelle che genera Elementor;
     2. i valori vengono dal prototipo in `fornito/prototipo/`, non sono
        inventati. Dove diverge, c'è scritto perché.

   ---------------------------------------------------------------------
   LA REGOLA CHE GOVERNA TUTTE LE SEZIONI AGGANCIATE ALLO SCROLL

   Il prototipo dichiara i contenuti animati **invisibili** e li accende con
   il JavaScript: `.hook-l{opacity:.14}`, `.duo-content{opacity:0}`,
   `.story-ch{opacity:0}`. Se quello script non parte, la pagina esiste ma
   non si legge.

   Qui è al contrario: **lo stato predefinito è la pagina statica e
   leggibile**, e l'impaginazione agganciata allo scroll si accende solo
   quando `pagine.js` mette `lb-scroll-js` su `<html>`. Senza JavaScript, a
   movimento ridotto, o se lo script va in errore, si ottiene la stessa
   impaginazione impilata che il prototipo riserva ai telefoni: tutto
   visibile, niente da scorrere a vuoto.

   Non è una rifinitura: sulla home un pannello la cui chiusura dipendeva
   dal JavaScript ha già lasciato la pagina nera una volta. La stessa cosa
   non deve poter succedere due volte, e la contromisura è sempre la stessa
   — quello che copre o nasconde sta nel CSS, il JavaScript aggiunge.
   ===================================================================== */

/* =====================================================================
   CHI SIAMO
   ---------------------------------------------------------------------
   Prototipo: `fornito/prototipo/lion-brand-chi-siamo.html` (wrapper `#cs2`).
   Sei blocchi: hero, hook tipografico, dittico «due anime», tre
   generazioni, numeri, persone.
   ===================================================================== */

/* Il contenitore di questa pagina è più stretto degli altri: 1240px contro i
   1360 del kit. Non è una svista del prototipo — `chi-siamo`, le due schede
   progetto e `packaging` dichiarano tutte 1240, ed è la misura delle pagine
   editoriali, dove la riga di testo deve restare leggibile. Il design system
   lasciava la scelta aperta (§3); qui la chiude il criterio di finito, che è
   «identica al prototipo». */
.lb-cs.e-con-boxed > .e-con-inner { max-width: 1240px; }

/* --- La trappola tipografica, terza forma --------------------------------
   `fornito/MANIFESTO.md` la descrive nel CSS del prototipo: il default e'
   ExtraWide su tutto, ed e' il JavaScript dell'admin bar demo a rimettere il
   Regular sui testi. Qui torna dal pannello invece che dal foglio di stile:
   il kit di Elementor applica a **ogni** widget Titolo la tipografia
   «primaria» — ExtraWide, maiuscolo, interlinea 1.02, spaziatura −0,5px —
   anche quando il tag scelto è `<p>`.

   Su questa pagina i widget Titolo sono **45**, e nel prototipo solo 15 sono
   ExtraWide: senza questa regola gli altri trenta — le etichette dei numeri,
   i quindici nomi del team, i lead di sezione, gli occhielli — uscirebbero in
   ExtraWide, cioè l'opposto della scelta del cliente (decisione 14). Ed è il
   tipo di errore che non si nota, perché la pagina «funziona».

   Il valore predefinito torna quindi a essere quello del corpo; i sette ruoli
   che vogliono ExtraWide lo dichiarano, e sono segnalati uno per uno.

   Il prefisso `.elementor-widget-heading` non è ridondanza: la regola del kit
   è `.elementor-widget-heading .elementor-heading-title`, cioè due classi.
   Senza il prefisso si vince o si perde a seconda dell'ordine di caricamento
   dei fogli, che non è garantito. È la stessa convenzione che `tema.css` usa
   sui pulsanti, per la stessa ragione. */
.lb-cs .elementor-widget-heading .elementor-heading-title {
	font-family: var(--lb-regular);
	font-weight: 400;
	text-transform: none;
	line-height: 1.55;
	letter-spacing: normal;
}

/* --- Hero ---------------------------------------------------------------
   Stessa costruzione dell'hero della home — sfondo, velo, contenuto in fondo
   — con la foto degli spazi al posto del carosello dei progetti. */
.lb-cs-hero {
	position: relative;
	height: 100svh;
	min-height: 600px;
	overflow: hidden;
	padding: 0;
}
/* `inset:-6% 0`: la foto è più alta della sezione, ed è quel margine che la
   parallasse consuma scorrendo. Senza, sotto si vedrebbe il fondo nero. */
.lb-cs-hero__sfondo {
	position: absolute;
	inset: -6% 0;
	z-index: 0;
	padding: 0;
	transform: scale(1.08);
	will-change: transform;
}
.lb-cs-hero__sfondo > .e-con-inner,
.lb-cs-hero__sfondo .elementor-widget,
.lb-cs-hero__sfondo .elementor-widget-container { height: 100%; padding: 0; margin: 0; }
.lb-cs-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.lb-cs-hero__velo {
	position: absolute; inset: 0; z-index: 2; padding: 0; pointer-events: none;
	background: linear-gradient(180deg,
		rgba(10, 9, 8, .55) 0%, rgba(10, 9, 8, .2) 30%,
		rgba(10, 9, 8, .58) 60%, rgba(10, 9, 8, .96) 100%);
}
/* Il velo di leggibilità sotto questo blocco **non è qui**: sta in `tema.css`,
   in una regola sola per i tre hero fotografici del sito (cerca «Il velo di
   leggibilità»). L'occhiello di questa pagina è uno dei quattro che la revisione
   di accessibilità ha misurato fuori soglia — 1,30:1 — e la correzione è
   dichiarata dove vale per tutti, non tre volte. */
.lb-cs-hero__fold {
	position: relative; z-index: 3;
	width: 100%;
	padding-bottom: clamp(48px, 8vh, 110px);
}
.elementor-widget-heading.lb-cs-hero__ov .elementor-heading-title {
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .3em;
	color: var(--lb-tenue);
	margin: 0;
}
/* L'unico ExtraWide dichiarato dal CSS condiviso: `h1`. Tutto il resto di
   questa pagina che è ExtraWide lo è per una regola locale del prototipo,
   ed è segnalato caso per caso qui sotto. */
.elementor-widget-heading.lb-cs-hero__titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: .92;
	color: var(--lb-titolo);
	font-size: clamp(2.6rem, 9vw, 7rem);
	margin: 18px 0 0;
}
/* `display:block`: «Un solo processo.» va a capo da sola, non per un <br>.
   È il modo in cui il cliente può allungare la prima riga senza rompere
   l'impaginazione. */
.elementor-widget-heading.lb-cs-hero__titolo .elementor-heading-title em {
	color: var(--lb-arancio);
	font-style: normal;
	display: block;
}
.lb-cs-hero__sub p {
	line-height: 1.55;
	margin: 22px 0 0;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	color: var(--lb-testo);
	max-width: 36ch;
}
/* **Lo «scorri» di questa pagina non si veste più qui.** G2-33: la sua resa sta
   in `tema.css`, in una regola sola per tutti i «cue» del sito — cercala come
   «Lo «scorri» è uno solo». Le dichiarazioni che stavano qui erano proprio
   quelle che lo facevano diverso dagli altri: nessuna linea arancione e la
   scritta che ondeggiava. Riscriverle qui le farebbe vincere di nuovo, perché
   `pagine.css` è caricato dopo. */
@keyframes lb-cs-cue {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

/* --- Hook tipografico ---------------------------------------------------
   Tre righe che si accendono una dopo l'altra mentre la sezione scorre.
   Statica per impostazione predefinita: tre righe leggibili, una sotto
   l'altra. */
.lb-cs-hook { padding: clamp(60px, 12vw, 120px) 0; }
.elementor-widget-heading.lb-cs-hook__riga .elementor-heading-title {
	font-family: var(--lb-extrawide);   /* regola locale di `chi-siamo` */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: 1.02;
	color: var(--lb-titolo);
	font-size: clamp(1.9rem, 6vw, 4.6rem);
	margin: 0 0 .12em;
}
.elementor-widget-heading.lb-cs-hook__riga .elementor-heading-title em {
	color: var(--lb-arancio);
	font-style: normal;
}
.lb-scroll-js .lb-cs-hook {
	position: relative;
	height: 200vh;
	padding: 0;
}
.lb-scroll-js .lb-cs-hook__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* L'opacità di partenza la dichiara lo stato «guidato dal JavaScript», mai
   il CSS di base: è quello che tiene le tre righe leggibili se lo script
   non arriva. */
.lb-scroll-js .elementor-widget-heading.lb-cs-hook__riga .elementor-heading-title { opacity: .14; }

/* --- Dittico «due anime» ------------------------------------------------
   Due mezze schermate affiancate che si accendono a turno, e un pannello
   finale che le fonde. Impilate per impostazione predefinita. */
/* Doppia classe, non singola: la direzione di questi due Container cambia
   con lo stato (impilato / affiancato) e deve vincere sul valore predefinito
   che Elementor dà a `.e-con`, che ha la stessa specificità di una classe. */
.lb-cs-duo .lb-cs-duo__pin { display: flex; flex-direction: column; }
.lb-cs-duo .lb-cs-duo__meta {
	position: relative;
	flex: 1;
	overflow: hidden;
	min-height: 78svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
/* **`overflow: hidden` non è una precauzione: è la cornice, e senza si vede.**
   L'ingrandimento qui sotto (`scale(1.08)`, che `pagine.js` porta da 1,08 a 1,02
   scorrendo) deve avvenire **dentro** la metà, come nel prototipo:
   `#cs2 .duo-half { …; overflow: hidden }`, riga 46 di `lion-brand-chi-siamo.html`.
   Nel portare la sezione in Elementor quella riga si è persa, e la conseguenza
   non è al bordo dello schermo — è **al centro**.

   Misurato a 1440: ogni metà è larga 720, l'immagine ingrandita 778. La foto di
   sinistra arriva a **x=749**, quella di destra comincia a **x=691**: si
   **sovrappongono di 58 px**, e sotto ci finisce la cucitura arancione che il
   prototipo mette esattamente a metà (`.duo-seam`, `left: 50%`). Ai due estremi
   escono altri 29 px per parte fuori dallo schermo — quelli sono il sintomo che
   si vede in una sentinella, la sovrapposizione è il difetto che si vede a occhio.

   Col ritaglio l'effetto resta identico — l'immagine si ingrandisce nella sua
   cornice — e smette di invadere la metà accanto. */
.lb-cs-duo__foto { position: absolute; inset: 0; z-index: 0; padding: 0; overflow: hidden; }
.lb-cs-duo__foto > .e-con-inner,
.lb-cs-duo__foto .elementor-widget,
.lb-cs-duo__foto .elementor-widget-container { height: 100%; padding: 0; margin: 0; }
.lb-cs-duo__foto img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
	transform: scale(1.08);
	will-change: transform;
}
.lb-cs-duo__velo {
	position: absolute; inset: 0; z-index: 1; padding: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 9, 8, .45), rgba(10, 9, 8, .88));
}
.lb-cs-duo__testo {
	position: relative;
	z-index: 2;
	padding: clamp(30px, 4vw, 70px);
	will-change: opacity, transform;
}
.elementor-widget-heading.lb-cs-duo__etichetta .elementor-heading-title {
	display: block;
	text-transform: uppercase;
	letter-spacing: .3em;
	font-size: .66rem;
	font-weight: 700;
	color: var(--lb-arancio);
	margin: 0 0 16px;
}
.elementor-widget-heading.lb-cs-duo__grande .elementor-heading-title {
	font-family: var(--lb-extrawide);   /* regola locale di `chi-siamo` */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.02em;
	color: var(--lb-titolo);
	font-size: clamp(1.4rem, 2.6vw, 2.7rem);
	line-height: 1;
	margin: 0;
}
.lb-cs-duo__descrizione p {
	line-height: 1.55;
	color: var(--lb-testo);
	margin: 16px 0 0;
	font-size: clamp(.9rem, 1vw, 1.02rem);
	max-width: 26ch;
}
/* La cucitura arancione fra le due metà esiste solo quando sono affiancate. */
.lb-cs-duo__cucitura { display: none; }
.lb-cs-duo__fusione {
	position: relative;
	z-index: 4;
	padding: clamp(64px, 14vw, 120px) 0;
	text-align: center;
	background: rgba(10, 9, 8, .9);
}
.elementor-widget-heading.lb-cs-duo__fusione-titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);   /* regola locale di `chi-siamo` */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(2rem, 6.5vw, 5rem);
	line-height: 1.02;
	max-width: 16ch;
	margin: 0 auto;
}
.elementor-widget-heading.lb-cs-duo__fusione-titolo .elementor-heading-title em {
	color: var(--lb-arancio);
	font-style: normal;
}
/* Decisione 313: il payoff animato sopra «Due anime, una sola mano.», centrato. */
/* Tre classi: con due, la regola di Elementor sul margine dei widget vince e lo azzera
   (misurato: 0 px fra payoff e titolo, lo stesso difetto già visto nel footer). */
.lb-cs-duo__fusione .lb-cs-duo__fusione-payoff.elementor-widget { width: clamp(230px, 26vw, 380px); margin: 0 auto clamp(18px, 2.2vw, 30px); }
.lb-cs-duo__fusione-testo p {
	line-height: 1.55;
	color: var(--lb-tenue);
	max-width: 46ch;
	margin: 20px auto 0;
	font-size: 1.05rem;
}

.lb-scroll-js .lb-cs-duo { position: relative; height: 300vh; }
.lb-scroll-js .lb-cs-duo__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	flex-direction: row;
}
.lb-scroll-js .lb-cs-duo__meta { min-height: 0; }
.lb-scroll-js .lb-cs-duo__testo { opacity: 0; }
.lb-scroll-js .lb-cs-duo__cucitura {
	display: block;
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 1px;
	padding: 0;
	background: var(--lb-arancio);
	opacity: .45;
	transform: translateX(-50%);
	z-index: 3;
}
.lb-scroll-js .lb-cs-duo__fusione {
	position: absolute;
	inset: 0;
	padding: 0;
	display: flex;
	opacity: 0;
	pointer-events: none;
}

/* Nei Container «boxed» Elementor mette il contenuto dentro un secondo
   elemento, `.e-con-inner`, e le regole di allineamento vanno lette lì: dire
   `justify-content: center` al Container esterno non centra niente, perché
   quello ha un figlio solo che è l'interno.
   Si è visto a schermo prima che nei numeri: il pannello «Due anime, una sola
   mano» usciva schiacciato in cima e tagliato dall'alto, invece che al centro
   dello schermo. È il genere di differenza che leggendo il codice sembra a
   posto. */
.lb-scroll-js .lb-cs-hook__pin > .e-con-inner,
.lb-scroll-js .lb-cs-duo__fusione > .e-con-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Tre generazioni ----------------------------------------------------
   Tre capitoli in dissolvenza sopra un fondo che cambia con loro. */
.lb-cs-storia__pin {
	position: relative;
	overflow: hidden;
	padding: clamp(50px, 9vw, 110px) 0;
	/* I tre fondi sono sfumature, non fotografie: il prototipo li marca
	   «PLACEHOLDER, in attesa di una foto a tutto campo per ogni
	   generazione». Stanno qui e non in tre Container vuoti perché non sono
	   contenuto — sarebbero tre blocchi che il cliente vede nell'editor,
	   non può usare e può cancellare per sbaglio. Il giorno che arrivano le
	   foto diventano tre widget Immagine, e questa regola sparisce. */
	background-image: linear-gradient(130deg, #180d06, #4a220c 42%, #8a3a12);
	background-size: 220% 220%;
	animation: lb-cs-fondo 16s ease-in-out infinite;
}
.lb-cs-storia__pin::before,
.lb-cs-storia__pin::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
	background-size: 220% 220%;
	animation: lb-cs-fondo 16s ease-in-out infinite;
}
/* Decisione 317: le foto delle generazioni sostituiscono le sfumature dove ci sono.
   La 1 è il fondo di partenza, la 2 entra con il capitolo 2 (stessa classe che
   accendeva la sfumatura). Il capitolo 3 non ha ancora la sua foto: le foto si
   spengono e resta la sfumatura `::after`, che sta sopra di loro perché viene
   dopo nel documento. Quando arriva la terza: un widget con `--3` e una riga qui.
   Tre classi perché le regole di posizione di Elementor sui widget sono a due. */
.lb-cs-storia__pin .lb-cs-storia__foto { position: absolute; inset: 0; z-index: 0; padding: 0; pointer-events: none; }
.lb-cs-storia__pin .lb-cs-storia__foto .elementor-widget-image { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
.lb-cs-storia__pin .lb-cs-storia__foto .elementor-widget-image .elementor-widget-container { height: 100%; }
.lb-cs-storia__pin .lb-cs-storia__foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lb-cs-storia__pin .lb-cs-storia__foto .lb-cs-storia__foto--1 { opacity: 1; }
.lb-cs-storia__pin--cap2 .lb-cs-storia__foto .lb-cs-storia__foto--1,
.lb-cs-storia__pin--cap3 .lb-cs-storia__foto .lb-cs-storia__foto--1,
.lb-cs-storia__pin--cap3 .lb-cs-storia__foto .lb-cs-storia__foto--2 { opacity: 0; }
.lb-cs-storia__pin--cap2 .lb-cs-storia__foto .lb-cs-storia__foto--2,
.lb-cs-storia__pin--cap3 .lb-cs-storia__foto .lb-cs-storia__foto--3 { opacity: 1; }
/* Decisione 318: la foto non sta più sotto il testo. Da 800 px: testo a sinistra,
   foto intera in 16:9 a destra, attaccata al bordo dello schermo, con tagli netti:
   niente sfumature (Fabrizio: «troppo old site anni 90») e niente velo sopra
   (`z-index` 2, sopra il velo; il testo non la tocca). Su telefono la foto sta in
   alto, a tutta larghezza, e il testo scende in fondo. Il capitolo 3, senza foto,
   resta con la sfumatura di fondo. */
.lb-cs-storia__pin .lb-cs-storia__foto { z-index: 2; }
@media (min-width: 800px) {
	/* 44%: il titolo più lungo («Stampa digitale») arriva al 54% della larghezza a 1440:
	   così fra titolo e foto restano almeno 24 px. */
	.lb-cs-storia__pin .lb-cs-storia__foto { left: auto; right: 0; top: 50%; bottom: auto; width: 44%; aspect-ratio: 16 / 9; transform: translateY(-50%); }
}
@media (min-width: 800px) and (max-width: 1199px) {
	.lb-cs-storia__pin .lb-cs-storia__foto { width: 40%; }
}
@media (max-width: 799px) {
	.lb-cs-storia__pin .lb-cs-storia__foto { bottom: auto; height: 36vh; }
	.lb-scroll-js .lb-cs-storia .lb-cs-storia__pin { justify-content: flex-end; padding-bottom: 28px; }
}
.lb-cs-storia__pin::before { background-image: linear-gradient(130deg, #160b05, #5f2c13 40%, #a84c18); }
.lb-cs-storia__pin::after  { background-image: linear-gradient(130deg, #2a1207, #93401a 44%, #f2571f 118%); }
.lb-cs-storia__pin--cap2::before { opacity: 1; }
.lb-cs-storia__pin--cap3::after  { opacity: 1; }
@keyframes lb-cs-fondo {
	0%   { background-position: 0% 20%; }
	50%  { background-position: 100% 80%; }
	100% { background-position: 0% 20%; }
}
.lb-cs-storia__velo {
	position: absolute; inset: 0; z-index: 1; padding: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 9, 8, .4), rgba(10, 9, 8, .58));
}
.lb-cs-storia__wrap { position: relative; z-index: 2; width: 100%; }
.elementor-widget-heading.lb-cs-storia__occhiello .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: .3em;
	font-size: .64rem;
	font-weight: 700;
	color: var(--lb-arancio);
	margin: 0;
}
.lb-cs-storia__capitoli { position: relative; margin-top: 26px; }
/* 44px anche sotto l'ultimo capitolo: nel prototipo il margine è dichiarato
   su tutti e tre senza escluderlo, e quello stacco prima della nota fa parte
   di come la sezione impilata è stata vista e approvata. */
.lb-cs-storia__capitolo { margin-bottom: 44px; }
.elementor-widget-heading.lb-cs-storia__era .elementor-heading-title {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .72rem;
	font-weight: 700;
	color: var(--lb-arancio);
	margin: 0;
}
.elementor-widget-heading.lb-cs-storia__titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);   /* regola locale di `chi-siamo` */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(2.4rem, 7vw, 5.4rem);
	line-height: 1;
	margin: 14px 0 0;
}
.lb-cs-storia__testo p {
	line-height: 1.55;
	color: var(--lb-testo);
	max-width: 44ch;
	margin: 20px 0 0;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}
/* Il piede — «01 / 03» e la barra — lo compila `pagine.js`: è l'avanzamento
   della lettura, non un testo che qualcuno debba poter cambiare. Senza i
   capitoli in dissolvenza non significa niente, quindi compare solo lì. */
.lb-cs-storia__piede { display: none; }
.elementor-widget-heading.lb-cs-storia__nota .elementor-heading-title {
	color: var(--lb-tenue);
	font-size: .76rem;
	font-style: italic;
	opacity: .7;
	text-align: center;
	margin: 20px 0 0;
}

.lb-scroll-js .lb-cs-storia { position: relative; height: 340vh; }
.lb-scroll-js .lb-cs-storia__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* I capitoli si impilano nella stessa cella: il riquadro prende l'altezza del
   piu' lungo e un testo lungo non copre il piede «0n / 03» (decisione 298). */
.lb-scroll-js .lb-cs-storia__capitoli { display: grid; padding-bottom: 32px; }
.lb-scroll-js .lb-cs-storia__capitolo {
	position: relative;
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .7s ease, transform .7s ease;
	pointer-events: none;
}
.lb-scroll-js .lb-cs-storia__capitolo--dentro {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.lb-scroll-js .lb-cs-storia__piede {
	display: flex;
	/* `row` va detto: i Container di Elementor sono in colonna per impostazione
	   predefinita, e con la colonna `align-items:center` centra in orizzontale.
	   Il contatore finiva in mezzo alla pagina invece che a sinistra sotto il
	   capitolo, e la barra spariva. */
	flex-direction: row;
	align-items: center;
	gap: 22px;
	margin-top: 40px;
}
.lb-cs-storia__conta {
	font-size: .72rem;
	letter-spacing: .16em;
	color: rgba(255, 255, 255, .7);
	font-variant-numeric: tabular-nums;
}
.lb-cs-storia__conta b { color: var(--lb-titolo); font-weight: 700; }
.lb-cs-storia__barra {
	flex: 1;
	max-width: 220px;
	height: 2px;
	background: rgba(255, 255, 255, .2);
	position: relative;
	overflow: hidden;
}
.lb-cs-storia__barra i {
	position: absolute;
	left: 0; top: 0;
	height: 100%;
	width: 0;
	background: var(--lb-arancio);
}
.lb-scroll-js .lb-cs-storia__nota {
	position: absolute;
	left: 0; right: 0; bottom: 20px;
	z-index: 2;
	width: auto;
}
.lb-scroll-js .elementor-widget-heading.lb-cs-storia__nota .elementor-heading-title { margin: 0; }

/* --- Numeri -------------------------------------------------------------
   Il padding è quello del prototipo (clamp 70/140), non il respiro standard
   delle sezioni di `tema.css` (clamp 84/160): questa pagina è più compatta. */
.lb-cs-numeri { padding-block: clamp(70px, 10vw, 140px); }
/* Giro 6: ExtraWide (decisione 276). Il prefisso `.lb-cs` serve a battere la regola
   `.lb-cs .elementor-widget-heading .elementor-heading-title` che rimette il Regular. Era
   clamp(1.5rem, 3.6vw, 2.7rem). */
.lb-cs .elementor-widget-heading.lb-cs-numeri__lead .elementor-heading-title,
.elementor-widget-heading.lb-cs-numeri__lead .elementor-heading-title {
	font-family: var(--lb-titolo-famiglia);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(1.25rem, 2.9vw, 2.2rem);
	line-height: 1.1;
	text-wrap: balance;
	max-width: 26ch;
	/* `1em` sopra, cioè 43px alla dimensione di questo testo: nel prototipo è
	   il margine predefinito che il browser dà a un `<p>` e che nessuno ha
	   tolto. Non l'ha scelto nessuno, ma è spaziatura che si vede — fra il
	   bordo della sezione e questa riga ci sono 183px, non 140 — ed è quella
	   che il cliente ha approvato guardando il prototipo. Qui va dichiarata,
	   perché il reset di Hello Elementor è stato tolto di proposito e i
	   margini predefiniti non arrivano più da soli.
	   Sotto resta 0: nel prototipo il margine inferiore collassava dentro i
	   44px della riga dei numeri, e in un Container flex i margini non
	   collassano — si sommerebbero. */
	margin: 1em 0 0;
}
/* Griglia e non flex: le colonne sono separate da un filo verticale **senza
   spazio**, e un'etichetta che va a capo su tre righe disallineerebbe i fili
   se le celle non fossero alte uguali. Con `grid` lo sono per costruzione —
   è il caso limite che il design system segnalava su questo blocco. */
.lb-cs-numeri__riga {
	display: grid;
	/* `minmax(min-content, 1fr)` e non `1fr` secco: Elementor mette
	   `min-width: 0` su ogni Container, e con quello la colonna non si allarga
	   piu' per far stare il suo contenuto. «1.500 m²» e' dichiarato
	   `white-space: nowrap` e a 1440px misura 336px: in una colonna da 246
	   sbordava oltre il filo divisorio. Nel prototipo, dove quel `min-width`
	   non c'e', la seconda colonna si allarga da sola — ed e' quello che si
	   vede a schermo. */
	grid-template-columns: repeat(4, minmax(min-content, 1fr));
	border-top: 1px solid var(--lb-filo);
	margin-top: 44px;
	gap: 0;
}
.lb-cs-numero {
	padding: 34px 18px 0;
	border-right: 1px solid var(--lb-filo);
}
.lb-cs-numero:last-child { border-right: none; }
.elementor-widget-heading.lb-cs-numero__cifra .elementor-heading-title {
	font-family: var(--lb-extrawide);   /* regola locale di `chi-siamo` */
	font-weight: 700;
	color: var(--lb-titolo);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1;
	white-space: nowrap;
	margin: 0;
}
.elementor-widget-heading.lb-cs-numero__etichetta .elementor-heading-title {
	margin: 12px 0 0;
	color: var(--lb-tenue);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	line-height: 1.4;
}

/* --- Persone ------------------------------------------------------------ */
.lb-cs-persone { padding-block: 0 clamp(70px, 10vw, 140px); }
/* Qui l'occhiello è quello del prototipo: nessun filo davanti, spaziatura
   propria. Non riuso `.lb-eyebrow` di `tema.css`, che il filo ce l'ha:
   sarebbe un elemento in più rispetto al prototipo, non una rifinitura. */
.elementor-widget-heading.lb-cs-persone__occhiello .elementor-heading-title {
	font-family: var(--lb-extrawide);   /* `.site .eyebrow` prende --font-head in site.css */
	text-transform: uppercase;
	letter-spacing: .34em;
	font-size: .64rem;
	font-weight: 700;
	color: var(--lb-arancio);
	margin: 0;
}
/* Giro 6: ExtraWide, prefisso `.lb-cs` come sopra. Era clamp(1.6rem, 4vw, 3rem). */
.lb-cs .elementor-widget-heading.lb-cs-persone__lead .elementor-heading-title,
.elementor-widget-heading.lb-cs-persone__lead .elementor-heading-title {
	font-family: var(--lb-titolo-famiglia);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(1.35rem, 3.2vw, 2.4rem);
	line-height: 1.08;
	text-wrap: balance;
	max-width: 22ch;
	margin: 16px 0 0;
}
.lb-cs-persone__griglia {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 30px);
	margin-top: 52px;
}
.lb-cs-membro { text-align: center; }
/* Il ritratto è un Container con uno sfondo, non un widget Immagine: finché
   le foto non arrivano un widget Immagine vuoto mostrerebbe il segnaposto
   grigio di Elementor. Così il cerchio è quello del prototipo, e il giorno
   che la foto c'è si carica dal pannello dello stesso Container (Stile →
   Sfondo → Immagine) senza cambiare struttura.
   Regge anche un widget Immagine messo dentro, se un domani si preferirà
   quello per avere `srcset`. */
.lb-cs-membro__ritratto {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--lb-filo);
	background: radial-gradient(circle at 50% 30%, #3a2a1f, #17120d);
	background-size: cover;
	background-position: center;
	padding: 0;
}
.lb-cs-membro__ritratto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elementor-widget-heading.lb-cs-membro__nome .elementor-heading-title {
	margin: 14px 0 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--lb-titolo);
	font-size: .95rem;
	/* Un nome lungo non deve allargare la colonna né uscire dal cerchio:
	   va a capo. Il prototipo ha quindici nomi corti e non incontra il caso. */
	overflow-wrap: anywhere;
}
/* Ruolo sotto il nome (28-10): piu' piccolo e leggero del nome, stesso font,
   colore secondario del tema (--lb-tenue, quello dei testi di supporto della
   pagina) perche' il nome resti la gerarchia. Senza maiuscolo: sono qualifiche
   come «Graphic Designer», non titoli. Il widget non c'e' per i due Marco
   (ruolo non ancora noto): le card restano allineate perche' sono in una
   griglia e il nome parte sempre dalla stessa altezza. */
.elementor-widget-heading.lb-cs-membro__ruolo .elementor-heading-title {
	margin: 4px 0 0;
	font-weight: 300;
	letter-spacing: .02em;
	color: var(--lb-tenue);
	font-size: .8rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.lb-cs-persone__chiusura p {
	line-height: 1.55;
	color: var(--lb-tenue);
	font-size: 1.02rem;
	max-width: 56ch;
	/* Stessa ragione del lead dei numeri: `1em` sotto è il margine che il
	   browser dà al paragrafo nel prototipo, ed è l'ultima riga della pagina
	   prima del footer. */
	margin: 32px 0 1em;
}
.lb-cs-persone__chiusura b { color: var(--lb-titolo); font-weight: 600; }

/* --- Punti di rottura ---------------------------------------------------
   Sono quelli del prototipo — 800 e 560 — e stanno qui, mai nel pannello
   dei breakpoint di Elementor: attivarne uno gli fa generare una copia su
   misura del proprio CSS che in questo ambiente non viene servita, e la
   pagina esce senza gli stili dei widget. Vedi CLAUDE.md del progetto. */
@media (max-width: 800px) {
	.elementor-widget-heading.lb-cs-hero__titolo .elementor-heading-title { font-size: clamp(1.9rem, 7.5vw, 3.2rem); }
	/* **G4-03: su telefono il copy dell'hero copriva lo «scorri».** Fabrizio:
	   «in hero, lo "scorri" viene coperto dal copy. alza leggermente titolo e
	   copy».

	   Misurato prima di toccare, e **contro il riquadro intero del gruppo, non
	   contro il suo testo** — perché il gruppo è più alto: è
	   `absolute; bottom: 24px` con sotto la linea arancione da 30px, quindi
	   occupa 53px e non 14.

	       iPhone 15       copy 532→606   gruppo 582→635   sovrapposizione 25
	       iPhone 12 Mini  copy 505→579   gruppo 552→605   sovrapposizione 27

	   Il `fold` è ancorato in basso, quindi **la sua spaziatura inferiore è la
	   leva che alza titolo e copy insieme**, che è esattamente ciò che Fabrizio
	   ha chiesto. Da `clamp(48px, 8vh, 110px)` a `clamp(93px, 14vh, 152px)`: su
	   entrambi i profili la finestra è sotto i 665px, quindi `14vh` cade sotto
	   il minimo e vale **93** — copy a 566 contro 582, e a 536 contro 552:
	   **16px liberi**, contro il gruppo.

	   ✅ **Il velo l'ho escluso misurandolo, non deducendolo.** Lo `::before` del
	   giro 3 è ancorato al `fold` con `top: -200px` e ci resta: alzando il
	   contenuto *dentro* il fold il riquadro del fold non cambia, quindi il velo
	   continua a coprire tutto. **È il motivo per cui questa riga non riapre
	   G3-02.**

	   Sta qui e non in `tema.css` perché `pagine.css` è caricato dopo: una regola
	   di pari specificità nell'altro foglio perderebbe, e salire di specificità
	   significherebbe dichiarare la stessa spaziatura in due file — ciò che il
	   commento allo «scorri», più su in questo foglio, dice di non rifare. */
	.lb-cs-hero__fold { padding-bottom: clamp(93px, 14vh, 152px); }
	/* Il dittico torna impilato anche quando il JavaScript sta guidando:
	   due mezze schermate affiancate su un telefono sono due strisce. */
	.lb-scroll-js .lb-cs-duo { height: auto; }
	.lb-scroll-js .lb-cs-duo__pin { position: static; height: auto; flex-direction: column; overflow: visible; }
	.lb-scroll-js .lb-cs-duo__meta { min-height: 78svh; }
	.lb-scroll-js .lb-cs-duo__testo { opacity: 1 !important; transform: none !important; }
	.lb-scroll-js .lb-cs-duo__cucitura { display: none; }
	.lb-scroll-js .lb-cs-duo__fusione {
		position: relative; inset: auto; opacity: 1 !important;
		padding: clamp(64px, 14vw, 120px) 0;
	}
	.lb-cs-storia__testo p { font-size: 1.05rem; }
	.lb-cs-numeri__riga { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
	.lb-cs-numero:nth-child(2) { border-right: none; }
	.lb-cs-persone__griglia { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.lb-cs-numeri__riga { grid-template-columns: 1fr; }
	.lb-cs-numero { border-right: none; }
	.lb-cs-persone__griglia { grid-template-columns: repeat(2, 1fr); }
}

/* A movimento ridotto `pagine.js` non mette `lb-scroll-js`, quindi tutta
   l'impaginazione agganciata allo scroll non si accende: resta da fermare
   solo ciò che si muove da sé. */
@media (prefers-reduced-motion: reduce) {
	.lb-cs-hero__sfondo { transform: scale(1.04); }
	.lb-cs-duo .lb-cs-duo__meta { min-height: 70svh; }
	.lb-cs-duo__foto img { transform: scale(1.04); }
	/* Le tre sfumature spariscono, come nel prototipo: sono un fondo che si
	   muove da solo, e a movimento ridotto un fondo che si muove da solo è
	   proprio quello che è stato chiesto di non avere. Resta il velo sul
	   fondo pagina. */
	.lb-cs-storia__pin { background-image: none; animation: none; }
	.lb-cs-storia__pin::before,
	.lb-cs-storia__pin::after { display: none; }
}

/* =====================================================================
   SERVIZI
   ---------------------------------------------------------------------
   Prototipo: `fornito/prototipo/lion-brand-servizi.html` (wrapper `#pg`).
   Quattro blocchi: hero testuale, riga d'apertura, i sette servizi, il
   processo a sei fasi.

   **Attenzione a cosa NON c'è.** Il blocco `<style>` di questa pagina del
   prototipo dichiara sei componenti che nel markup non compaiono mai:
   `.nums`, `.bleed`, `.team-grid`/`.member`, `.certs`, `.cta`, e la variante
   `.hero.img`. È CSS orfano, rimasto da una versione più ricca della pagina,
   ed è la stessa famiglia del pattern topografico e delle testimonianze:
   roba che il diario o il foglio di stile promettono e il prototipo non ha.
   Non si costruisce — decisione 32.
   ===================================================================== */

/* Questa pagina è larga 1300px: è il valore predefinito di `site.css`, che
   `servizi` e `lavori` ereditano senza ridichiararlo. Sono tre larghezze
   diverse su tre tipi di pagina — 1360 la home, 1300 le pagine a elenco,
   1240 le editoriali — ed è intenzionale, non un disallineamento. */
.lb-sv.e-con-boxed > .e-con-inner { max-width: 1300px; }

/* Stessa ragione scritta in testa a Chi siamo: il kit di Elementor veste ogni
   widget Titolo con la tipografia «primaria» — ExtraWide, maiuscolo, interlinea
   1,02 — anche col tag `<p>`. Qui i widget Titolo sono 24 e solo due sono
   ExtraWide nel prototipo. */
.lb-sv .elementor-widget-heading .elementor-heading-title {
	font-family: var(--lb-regular);
	font-weight: 400;
	text-transform: none;
	line-height: 1.55;
	letter-spacing: normal;
}

/* --- Hero testuale ------------------------------------------------------
   Non è l'hero a schermo intero delle altre pagine: qui il titolo sta sopra il
   contenuto, senza fotografia. `.hero.txt` nel prototipo. */
/* LA RISERVA IN CIMA, CHE È LA DIFFERENZA FRA QUESTA PAGINA E LA HOME.

   Nel prototipo l'intestazione è `position: sticky`: **occupa 79px di flusso**
   e spinge sotto quello che segue. In WordPress il template dell'intestazione
   è uno solo ed è `fixed`, perché la home, Chi siamo e le due schede progetto
   hanno un hero a tutto schermo e la foto deve arrivare al bordo — decisione
   già presa e giusta lì.

   Qui l'hero è **testuale**: senza riservare quello spazio l'occhiello
   «Servizi» finisce a 84px dal bordo, cioè 11px sotto un'intestazione alta 73,
   dentro la sfumatura di velatura che l'intestazione si porta dietro
   (`.lb-top::before`, alta il 190%). Non è una deriva di misura, si vede: la
   pagina parte schiacciata contro il menu.

   **La misura è `--lb-alt-top`, non un numero.** Il token sta in `tema.css`
   con 73px di ripiego e `comportamenti.js` lo riscrive misurando
   l'intestazione vera, anche al ridimensionamento. Qui c'erano i 79 e i 66
   del prototipo, ed è stato giusto tenerli finché il token non esisteva — ma
   è meglio così per due ragioni, e la seconda pesa più della prima:

     1. l'altezza dell'intestazione dipende dalla **lunghezza del testo dei
        suoi pulsanti**, cioè da una cosa che il cliente cambia dalla bacheca.
        Un numero scritto qui invecchia il giorno che «Contattaci» diventa
        «Richiedi un preventivo»;
     2. riservare 79 sotto un'intestazione che ne occupa 73 vuol dire
        **nascondere dentro il padding di questa pagina uno scostamento che è
        del tema**. Quei 6px vanno visti dove nascono, non compensati qui.

   Senza JavaScript vale il ripiego di 73px, che oggi è anche il valore vero:
   verificato con lo script disabilitato. La riserva quindi non dipende dal
   JavaScript, che la corregge ma non la crea — la stessa regola che governa
   tutto questo foglio.

   `tema.css` usa lo stesso token sull'hero di Lavori, che ha la stessa
   struttura. */
.lb-sv-hero { padding-block: calc(var(--lb-alt-top) + clamp(46px, 6vw, 84px)) clamp(6px, 1.5vw, 16px); }
.elementor-widget-heading.lb-sv-hero__ov .elementor-heading-title {
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .28em;
	color: var(--lb-tenue);
	/* Stessa ragione del numero di servizio, più sotto: nel prototipo
	   l'occhiello è uno `<span>` in linea e occupa una riga della pagina, non
	   una riga alta quanto sé. Sono gli 8,4px che su Chi siamo erano rimasti
	   dichiarati come scostamento accettato. */
	line-height: calc(1.55 * 1rem);
	margin: 0;
}
.elementor-widget-heading.lb-sv-hero__titolo .elementor-heading-title {
	/* ExtraWide per la regola condivisa di `site.css`: `.site h1` usa
	   `--font-head`. È uno dei due soli ExtraWide di questa pagina. */
	font-family: var(--lb-extrawide);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(1.9rem, 4.4vw, 3.4rem);
	line-height: 1;
	margin: 14px 0 0;
}
.lb-sv-hero__sub p {
	margin: 18px 0 0;
	color: var(--lb-tenue);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	max-width: 44ch;
	/* `1em` sotto: è il margine predefinito del paragrafo, che il prototipo
	   non toglie. Stessa nota di Chi siamo. */
	margin-bottom: 1em;
}

/* --- Riga d'apertura ---------------------------------------------------- */
.lb-sv-intro { padding-block: clamp(30px, 4vw, 52px) clamp(64px, 8vw, 120px); }
.lb-sv-intro__testo p {
	color: var(--lb-tenue);
	font-size: 1.04rem;
	line-height: 1.55;
	/* 60ch e non i 56 di `.kick`: il prototipo lo allarga con uno stile in linea
	   proprio su questa riga. E `1em` sotto è il margine predefinito del
	   paragrafo, che il prototipo non toglie — vedi la stessa nota su Chi siamo. */
	max-width: 60ch;
	margin: 20px 0 1em;
}
.lb-sv-intro__testo b { color: var(--lb-titolo); font-weight: 600; }

/* --- I sette servizi ----------------------------------------------------
   COSTRUITE PER DIVENTARE UN LISTING SENZA RISCRIVERE QUESTO FOGLIO.

   Due regole qui sotto esistono solo per quello, e vanno lasciate come sono
   anche se a mano sembrerebbero più semplici scritte in un altro modo:

     · il numero 01…07 lo fa `counter-increment`, non un widget in pagina;
     · l'alternanza destra/sinistra la fa `:nth-child(even)`, non una classe
       `.rev` su una riga sì e una no, come nel prototipo.

   In un Listing tutte le voci hanno le **stesse** classi: un numero scritto a
   mano e una classe alternata sono esattamente le due cose che costringerebbero
   a rifare la resa invece di cambiare la sorgente dei dati. */
.lb-sv-elenco { padding-block: 0 clamp(64px, 8vw, 120px); }
.lb-sv-elenco__lista { counter-reset: lb-servizio; }
/* Lo stacco fra le righe stava sul contenitore; adesso le righe sono figlie
   della griglia di JetEngine, e lo stacco va lì. Il `max-width` che JetEngine
   calcola sulle colonne va tolto: un massimo non si vince con una larghezza. */
.lb-sv-elenco__griglia .jet-listing-grid__items {
	display: flex; flex-direction: column;
	row-gap: clamp(64px, 8vw, 120px); margin: 0;
}
.lb-sv-elenco__griglia .jet-listing-grid__items > .jet-listing-grid__item {
	max-width: none; flex: none; margin: 0; padding: 0; width: auto;
}
.lb-servizio-riga {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
/* `position: static` non è pignoleria: **Elementor usa già `::before` sui
   Container**, è il pseudo-elemento con cui disegna l'overlay di sfondo, e lo
   dichiara `position:absolute; inset:0`. Il contenuto e il contatore qui sotto
   vincono, la posizione no: senza questa riga il numero esce dal flusso, non
   occupa altezza e non si vede. Misurato — i passi del processo venivano 84px
   invece di 133.
   Conseguenza da sapere: su questi due Container l'overlay di sfondo del
   pannello di Elementor è occupato. Sono contenitori di struttura e nessuno ci
   metterà uno sfondo, ma è il genere di collisione che va scritta. */
.lb-servizio-riga__testo::before {
	position: static;
	counter-increment: lb-servizio;
	content: counter(lb-servizio, decimal-leading-zero);
	color: var(--lb-arancio);
	font-weight: 700;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	/* `calc(1.55 * 1rem)` e non `1.55`, ed è la differenza fra 20px e 24,8px.
	   Nel prototipo il numero è uno `<span>` **in linea** dentro la colonna di
	   testo: la riga che occupa non è alta quanto lui, è alta quanto una riga
	   della colonna — 16px per 1,55. Qui è un blocco, e un blocco alto quanto
	   il proprio testo starebbe 5px più basso per ciascuna delle sette righe.
	   Scritto così la regola dice cosa vuole dire: «occupa una riga di testo
	   della colonna», non un numero magico. */
	line-height: calc(1.55 * 1rem);
}
/* L'alternanza. Su una colonna sola non si applica: due blocchi impilati che si
   scambiano di posto non alternano niente, invertono l'ordine di lettura.

   **Il `:nth-child` ha cambiato bersaglio il 2026-08-25**, quando le sette righe
   scritte a mano sono diventate un Listing sul CPT `servizio`. In un Listing
   ogni riga è figlia unica del proprio involucro — `.jet-listing-grid__item >
   .elementor > .lb-servizio-riga` — quindi `:nth-child(even)` sulla riga non
   sarebbe mai vero e l'alternanza sparirebbe **senza dare nessun errore**: sette
   righe tutte uguali, e nessuno che se ne accorge leggendo il CSS.
   A contare le righe adesso è l'elemento del Listing. */
.jet-listing-grid__item:nth-child(even) .lb-servizio-riga__testo { order: 2; }
/* **Il nome del servizio ha cambiato widget, e il selettore lo inseguiva.**
   Era un widget Titolo — `.elementor-heading-title` dentro
   `.elementor-widget-heading` — ed è diventato un campo dinamico, che rende un
   `<h2>` dentro `.jet-listing-dynamic-field__content`. Il selettore vecchio non
   ha smesso di essere valido: ha smesso di trovare qualcosa. Nessun errore, e i
   sette nomi sono usciti a **24px invece di 43,2, minuscoli e del colore del
   corpo** — cioè la tipografia predefinita, che a occhio sembra una scelta.
   L'ha trovato il confronto integrale, non il conteggio dei punti: il verdetto
   della pagina non era cambiato.

   Vale per entrambe le forme, perché il widget Titolo vive ancora altrove. */
/* Giro 6: ExtraWide (decisione 276), prefisso `.lb-sv` per battere la regola che rimette il
   Regular su tutti i Titoli della pagina. Era clamp(1.6rem, 3.4vw, 2.7rem), interlinea 1,02. */
.lb-sv .elementor-widget-heading.lb-servizio-riga__nome .elementor-heading-title,
.elementor-widget-heading.lb-servizio-riga__nome .elementor-heading-title,
.lb-servizio-riga__nome .jet-listing-dynamic-field__content,
.lb-servizio-riga__nome h2 {
	font-family: var(--lb-titolo-famiglia);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(1.3rem, 2.7vw, 2.15rem);
	line-height: 1.05;
	margin: 12px 0 0;
}
.lb-servizio-riga__teaser p {
	color: var(--lb-tenue);
	line-height: 1.55;
	/* Margine inferiore **zero**, e qui il prototipo non si copia alla lettera.
	   Là il paragrafo tiene il suo `1em` e le pillole dichiarano `margin-top:18px`:
	   sono due blocchi in flusso normale, i margini collassano e la distanza
	   reale è 18px, la maggiore delle due. In un Container di Elementor sono
	   due elementi flex e i margini **si sommano**: 16 + 18 = 34, cioè 16px di
	   troppo su ognuna delle sette righe. La distanza la dichiara il blocco che
	   segue, mai entrambi — è la regola scritta in `build/LEGGIMI.md`. */
	margin: 16px 0 0;
	max-width: 44ch;
}
/* LE PILLOLE VANNO IN RIGA, E SI OTTIENE DALLA VARIABILE, NON DALLA PROPRIETÀ.

   Scritto `flex-direction: row` non funzionava, e la pagina sembrava a posto
   lo stesso: sul desktop la riga di servizio è alta quanto la fotografia
   (700px), quindi tre pillole impilate invece che in linea non cambiano di un
   pixel l'altezza della sezione. **Il confronto per sezione non poteva
   vederlo** — si è visto guardando le pillole, ed è il caso per cui la
   verifica ha una parte che misura i componenti e non solo i riquadri.

   Elementor non applica mai `flex-direction` direttamente: dichiara
   `.e-con.e-flex { --flex-direction: column }` e poi
   `.e-con-full.e-flex { flex-direction: var(--flex-direction) }`. **Sono due
   classi tutte e due**, quindi una regola di classe sola perde su entrambi i
   fronti: non basta scrivere la proprietà, e non basta nemmeno scrivere la
   variabile. Serve arrivare a due classi, e `.e-con` è quella giusta perché
   dice a chi legge *contro chi* si sta vincendo.

   È la stessa famiglia della trappola tipografica del kit: il proprio CSS è
   giusto, il valore predefinito di Elementor vince, e lo si scopre solo
   guardando il calcolato. */
.e-con.lb-servizio-riga__pillole {
	--flex-direction: row;
	--flex-wrap: wrap;
	gap: 7px;
	margin-top: 18px;
}
/* Le pillole erano sette widget Titolo, una per voce; adesso sono le voci di un
   ripetitore, che il cliente allunga e accorcia da solo. La resa è la stessa e
   la regola qui sotto resta valida per entrambe le forme: si aggiunge il
   bersaglio nuovo invece di sostituirlo, perché la vecchia forma vive ancora
   nella scheda tecnica dei progetti. */
.lb-servizio-riga__tags .jet-listing-dynamic-repeater__items {
	display: flex; flex-wrap: wrap; gap: 7px;
}
.lb-servizio-riga__tags .jet-listing-dynamic-repeater__item > div,
.lb-servizio-riga__tags .jet-listing-dynamic-repeater__item {
	font-size: .58rem; text-transform: uppercase; letter-spacing: .12em;
	color: var(--lb-tenue); line-height: 1.55; white-space: nowrap;
}
.lb-servizio-riga__tags .jet-listing-dynamic-repeater__item {
	border: 1px solid var(--lb-filo); padding: 5px 11px; border-radius: 0;
}
/* Il link «Scopri il servizio». Non c'era finché nessun servizio esisteva; ora
   il Listing interroga solo i pubblicati, quindi il link c'è per costruzione su
   ogni riga che la lista mostra (decisione 42). */
.lb-servizio-riga__vai .jet-listing-dynamic-link__link {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
	font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
	color: var(--lb-titolo); border-bottom: 1px solid var(--lb-arancio);
	padding-bottom: 6px;
}
.lb-servizio-riga__vai .jet-listing-dynamic-link__link::after { content: "\2192"; color: var(--lb-arancio); }
.elementor-widget-heading.lb-servizio-riga__tag { width: auto; }
.elementor-widget-heading.lb-servizio-riga__tag .elementor-heading-title {
	font-size: .58rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--lb-tenue);
	border: 1px solid var(--lb-filo);
	padding: 5px 11px;
	border-radius: 0;
	margin: 0;
	line-height: 1.55;
	white-space: nowrap;
}
.lb-servizio-riga__foto {
	border-radius: 0;
	overflow: hidden;
	border: 1px solid var(--lb-filo);
	aspect-ratio: 4 / 5;
	padding: 0;
}
.lb-servizio-riga__foto > .e-con-inner,
.lb-servizio-riga__foto .elementor-widget,
.lb-servizio-riga__foto .elementor-widget-container { height: 100%; padding: 0; margin: 0; }
.lb-servizio-riga__immagine img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s ease;
}
.lb-servizio-riga__foto:hover .lb-servizio-riga__immagine img { transform: scale(1.05); }

/* --- Il processo a sei fasi --------------------------------------------
   IL BLOCCO È CONDIVISO, LA SUA RESA NO — e questa è la cosa da sapere prima
   di toccarlo.

   Decisione 40: i sei titoli sono il processo dell'azienda e si modificano una
   volta sola per otto posizionamenti. Ma nelle due pagine del prototipo quel
   contenuto è **impaginato in due modi completamente diversi**:

     · pagina Servizi — schede su tre colonne, filo arancione da 2px sopra
       ciascuna, numero piccolo (1,4rem), titolo piccolo (1,05rem);
     · scheda servizio — righe piene a tutta larghezza, numero gigante in
       ExtraWide (fino a 4,6rem) in una colonna sua, filo grigio fra le righe.

   Un template solo non può portarsi dentro due impaginazioni. La resa la
   sceglie quindi **il contenitore che lo ospita**, con un modificatore, e il
   template resta uno: `--schede` qui, `--righe` nella scheda servizio.

   A chi costruirà la scheda servizio: metti `lb-processo-innesto
   lb-processo-innesto--righe` sul Container che ospita il widget Template, e
   la resa è già scritta qui sotto. */
.lb-sv-processo { padding-block: clamp(64px, 8vw, 120px); }
.elementor-widget-heading.lb-sv-processo__occhiello .elementor-heading-title {
	/* L'unico altro ExtraWide della pagina: `site.css` mette `.site .eyebrow`
	   fra gli elementi che prendono `--font-head`. */
	font-family: var(--lb-extrawide);
	text-transform: uppercase;
	letter-spacing: .32em;
	font-size: .62rem;
	font-weight: 700;
	color: var(--lb-arancio);
	margin: 0;
}
/* Giro 6: ExtraWide, prefisso `.lb-sv`. Era clamp(1.6rem, 4vw, 3rem). */
.lb-sv .elementor-widget-heading.lb-sv-processo__lead .elementor-heading-title,
.elementor-widget-heading.lb-sv-processo__lead .elementor-heading-title {
	font-family: var(--lb-titolo-famiglia);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(1.35rem, 3.2vw, 2.4rem);
	line-height: 1.08;
	text-wrap: balance;
	max-width: 22ch;
	margin: 16px 0 0;
}
.lb-processo { counter-reset: lb-fase; }
.lb-processo__passo::before {
	position: static;   /* vedi la nota sul contatore dei servizi, sopra */
	counter-increment: lb-fase;
	content: counter(lb-fase, decimal-leading-zero);
	color: var(--lb-arancio);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.elementor-widget-heading.lb-processo__titolo .elementor-heading-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	margin: 8px 0 0;
}
/* Giro 6 (piano §7-A2): nella pagina Servizi i titoli del processo erano Regular mentre sulla
   scheda servizio sono ExtraWide. Si allineano alla scheda; il corpo resta quello di oggi. */
.lb-sv .elementor-widget-heading.lb-processo__titolo .elementor-heading-title {
	font-family: var(--lb-titolo-famiglia);
	line-height: 1.1;
}
.lb-processo__testo p { color: var(--lb-tenue); line-height: 1.55; margin: 8px 0 1em; }

/* La resa «schede», usata dalla pagina Servizi. */
.lb-processo-innesto--schede .lb-processo {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
	margin-top: 52px;
}
/* **`display` esplicito, ed è la correzione del difetto 2 della revisione di
   resa** (decisione 133). Il passo è un Container di Elementor: senza una
   dichiarazione propria eredita `display:flex` dai valori di fabbrica di
   `.e-con.e-flex`, e con essi `flex-wrap: var(--flex-wrap)`, che sotto i 768 px
   Elementor porta a `wrap` per **ogni** contenitore del sito
   (`.e-con{--flex-wrap-mobile:wrap}` su selettore nudo, più
   `@media (max-width:767px){.e-con.e-flex{--flex-wrap:var(--flex-wrap-mobile)}}`).
   A quel punto il `::before` del numero — largo tutta la riga, 346 px a 390 —
   è il primo elemento flex e spinge titolo e testo in una **seconda colonna**,
   fuori dallo schermo: misurato `x=368`, `right=714`, in un viewport di 390.

   La riga qui sotto non copre il sintomo, **finisce di definire il componente**.
   `--righe` non si è mai rotto pur avendo lo stesso `wrap` e lo stesso `::before`
   proprio perché dichiara il suo `display` (riga più sotto): in una griglia il
   numero non è un elemento flex e non c'è niente da mandare a capo. Da qui in
   poi il contenitore si può toccare in bacheca senza romperlo — e regge se il
   cliente aggiunge un settimo passaggio.

   `align-content: start`: in flex `--justify-content: flex-start` teneva le tre
   parti in cima; in una griglia dentro una cella stirata, senza questa riga le
   righe si distribuirebbero sull'altezza della scheda più alta. */
.lb-processo-innesto--schede .lb-processo__passo {
	display: grid;
	align-content: start;
	border-top: 2px solid var(--lb-arancio);
	padding-top: 18px;
}
.lb-processo-innesto--schede .lb-processo__passo::before { font-size: 1.4rem; line-height: 1.55; }
.lb-processo-innesto--schede .elementor-widget-heading.lb-processo__titolo .elementor-heading-title {
	font-size: 1.05rem;
	line-height: 1.55;
}
.lb-processo-innesto--schede .lb-processo__testo p { font-size: .9rem; }

/* La resa «righe», pronta per la scheda servizio: non è ancora usata da
   nessuno, ed è dichiarata qui perché il blocco è uno e le sue due facce
   stanno insieme. I valori vengono da `lion-brand-servizio-packaging.html`. */
.lb-processo-innesto--righe .lb-processo { margin-top: 40px; }
.lb-processo-innesto--righe .lb-processo__passo {
	display: grid;
	grid-template-columns: clamp(74px, 10vw, 150px) 1fr;
	gap: clamp(16px, 3vw, 50px);
	align-items: baseline;
	padding-block: clamp(26px, 3.4vw, 46px);
	border-top: 1px solid var(--lb-filo);
}
.lb-processo-innesto--righe .lb-processo__passo::before {
	font-family: var(--lb-extrawide);
	font-size: clamp(2.2rem, 6vw, 4.6rem);
	line-height: .85;
}
.lb-processo-innesto--righe .elementor-widget-heading.lb-processo__titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-size: clamp(1.2rem, 2.4vw, 1.9rem);
	line-height: 1.02;
	margin: 0;
}
/* Qui il margine inferiore è 0: `packaging` lo dichiara per intero
   (`margin:12px 0 0`) invece di lasciarlo al browser come fa `servizi`. */
.lb-processo-innesto--righe .lb-processo__testo p { margin: 12px 0 0; max-width: 52ch; }

/* --- Pagina Metodo (giro 7, seconda versione) -----------------------------
   Costruita da `costruisci-metodo.php` sugli appunti della riunione del 17/09.
   Ogni Titolo porta una classe propria e dichiara qui la sua tipografia: un
   ripristino di pagina come quello di Chi siamo romperebbe `lb-eyebrow` e
   `lb-titolo-sezione`, che pesano quanto lui e vengono prima nel foglio.
   I selettori dei titoli sono a quattro classi per battere il kit senza
   dipendere dall'ordine dei fogli. */
.lb-mt.e-con-boxed > .e-con-inner { max-width: 1300px; }
.lb-mt .elementor-widget-heading[class*="lb-mt-"] .elementor-heading-title {
	font-family: var(--lb-regular);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0;
}

/* Hero. Testo a sinistra, una sola fotografia a tutta altezza a destra, che
   esce fino al bordo della finestra. Il testo si allinea al contenitore delle
   altre sezioni (1300 più il margine), la foto no: è il modo di avere una
   foto grande senza un hero fotografico a tutto schermo come home e Chi siamo. */
.lb-mt-hero {
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	min-height: 100svh;
	padding: 0;
	overflow: hidden;
}
.lb-mt-hero__testo {
	justify-content: center;
	gap: 0;
	padding: calc(var(--lb-alt-top, 79px) + clamp(32px, 6vh, 80px)) clamp(32px, 5vw, 80px) clamp(48px, 8vh, 96px) calc(max(0px, (100vw - 1300px) / 2) + var(--lb-margine)) !important;
}
.lb-mt .elementor-widget-heading.lb-mt-hero__ov .elementor-heading-title {
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .3em;
	color: var(--lb-tenue);
}
.lb-mt .elementor-widget-heading.lb-mt-hero__titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: .98;
	color: var(--lb-titolo);
	font-size: clamp(2rem, 3.9vw, 3.6rem);
	text-wrap: balance;
	margin: 22px 0 0;
}
.lb-mt .elementor-widget-heading.lb-mt-hero__titolo .elementor-heading-title em {
	display: block;
	font-style: normal;
	color: var(--lb-arancio);
	margin-top: .12em;
}
.lb-mt-hero__sub p {
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	line-height: 1.6;
	color: var(--lb-testo);
	max-width: 44ch;
	margin: 28px 0 0;
}
.lb-mt-hero__testo .lb-cta { margin-top: 34px; }
.lb-mt-hero__foto { position: relative; padding: 0; overflow: hidden; min-height: 100%; }
.lb-mt-hero__foto .elementor-widget-image,
.lb-mt-hero__foto .elementor-widget-container { position: absolute; inset: 0; height: 100%; }
.lb-mt-hero__foto img {
	width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; display: block;
	animation: lb-mt-avvicina 2.4s cubic-bezier(.2, .7, .2, 1) backwards;
}
/* La foto sfuma nel nero dal lato del testo, così il taglio non è una riga. */
.lb-mt-hero__foto::after {
	content: "";
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, var(--lb-fondo) 0%, rgba(10, 9, 8, 0) 28%);
}
@keyframes lb-mt-avvicina { from { transform: scale(1.12); opacity: 0; } }

/* Testata della sezione delle fasi: titolo a sinistra, lead a destra. */
.lb-mt-testata {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: end;
}
.lb-mt-testata__lead p {
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	line-height: 1.65;
	color: var(--lb-testo);
	max-width: 48ch;
	margin: 0;
}

/* Le sei fasi: numero grande a sinistra, racconto a destra, un filo fra l'una
   e l'altra. La terza è il preventivo visivo e porta l'arancione. */
.lb-mt-fasi__elenco { margin-top: clamp(48px, 7vw, 96px); gap: 0; }
.lb-mt-fase {
	display: grid !important;
	grid-template-columns: minmax(90px, .5fr) minmax(0, 1.5fr);
	gap: clamp(20px, 4vw, 64px);
	padding-block: clamp(30px, 4vw, 52px);
	border-top: 1px solid var(--lb-filo);
	scroll-margin-top: calc(var(--lb-alt-top, 79px) + 24px);
}
.lb-mt-fase:last-child { border-bottom: 1px solid var(--lb-filo); }
.lb-mt .elementor-widget-heading.lb-mt-fase__numero .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	line-height: 1;
	color: var(--lb-tenue);
	transition: color .3s;
}
.lb-mt-fase:hover .lb-mt-fase__numero .elementor-heading-title,
.lb-mt-fase--forte .lb-mt-fase__numero .elementor-heading-title { color: var(--lb-arancio); }
.lb-mt-fase__corpo { gap: 0; }
.lb-mt .elementor-widget-heading.lb-mt-fase__etichetta .elementor-heading-title {
	display: inline-block;
	font-size: .62rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--lb-su-arancio);
	background: var(--lb-arancio);
	padding: 5px 10px;
	margin-bottom: 16px;
}
.lb-mt .elementor-widget-heading.lb-mt-fase__titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.05rem, 1.9vw, 1.6rem);
	line-height: 1.15;
	color: var(--lb-titolo);
}
.lb-mt-fase__testo p {
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.65;
	color: var(--lb-testo);
	max-width: 58ch;
	margin: 16px 0 0;
}

/* La linea del tempo. Lo stato senza script è la pagina statica: fasi tutte
   accese, nessuna linea. Con `lb-mt-js` (lo mette `pagine.js`, non a movimento
   ridotto) una linea verticale si riempie mentre si scorre, fino al 60% della
   finestra, e ogni fase si accende quando la linea la raggiunge. */
.lb-mt-js .lb-mt-fasi__elenco { position: relative; padding-left: clamp(28px, 4vw, 56px); }
.lb-mt-js .lb-mt-fasi__elenco::before,
.lb-mt-js .lb-mt-fasi__elenco::after {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 1px;
	background: var(--lb-filo);
}
.lb-mt-js .lb-mt-fasi__elenco::after {
	width: 2px; left: -.5px;
	background: var(--lb-arancio);
	transform-origin: top;
	transform: scaleY(var(--lb-mt-avanza, 0));
}
.lb-mt-js .lb-mt-fase .lb-mt-fase__corpo,
.lb-mt-js .lb-mt-fase .lb-mt-fase__numero { opacity: .28; transition: opacity .5s; }
.lb-mt-js .lb-mt-fase--raggiunta .lb-mt-fase__corpo,
.lb-mt-js .lb-mt-fase--raggiunta .lb-mt-fase__numero { opacity: 1; }
.lb-mt-js .lb-mt-fase--raggiunta .lb-mt-fase__numero .elementor-heading-title { color: var(--lb-arancio); }

/* Il preventivo visivo: la sezione più importante dopo le fasi, su superficie
   più chiara del fondo per staccarsi. */
.lb-mt-preventivo { background: var(--lb-superficie); }
.lb-mt-preventivo__griglia {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}
.lb-mt-preventivo__corpo p {
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	line-height: 1.65;
	color: var(--lb-testo);
	max-width: 50ch;
	margin: 24px 0 0;
}
.lb-mt-preventivo__foto { padding: 0; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; }
.lb-mt-preventivo__foto .elementor-widget-image,
.lb-mt-preventivo__foto .elementor-widget-container { height: 100%; }
.lb-mt-preventivo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-mt-certezze {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: clamp(48px, 7vw, 96px);
	border-top: 1px solid var(--lb-filo);
}
.lb-mt-certezza { padding: 30px 28px 0 0; gap: 0; }
.lb-mt-certezza + .lb-mt-certezza { padding-left: 28px; border-left: 1px solid var(--lb-filo); }
.lb-mt .elementor-widget-heading.lb-mt-certezza__titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1rem, 1.7vw, 1.4rem);
	color: var(--lb-arancio);
	line-height: 1.15;
}
.lb-mt-certezza__testo p { font-size: .98rem; line-height: 1.6; color: var(--lb-testo); margin: 12px 0 0; max-width: 34ch; }
.lb-mt-confronto {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2px;
	margin-top: clamp(48px, 7vw, 96px);
}
.lb-mt-confronto__lato { padding: clamp(24px, 3vw, 40px); gap: 0; background: var(--lb-fondo); }
.lb-mt-confronto__lato--noi { background: var(--lb-arancio); }
.lb-mt .elementor-widget-heading.lb-mt-confronto__etichetta .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	font-size: .66rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--lb-tenue);
}
.lb-mt-confronto__testo p { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--lb-testo); margin: 14px 0 0; max-width: 46ch; }
/* Cinque classi: la regola dell'etichetta qui sopra ne ha quattro, e con tre
   l'etichetta «Con noi» restava grigia sull'arancione, illeggibile. */
.lb-mt .lb-mt-confronto__lato--noi .elementor-widget-heading.lb-mt-confronto__etichetta .elementor-heading-title,
.lb-mt-confronto__lato--noi .lb-mt-confronto__testo p { color: var(--lb-su-arancio); }

/* I servizi: le righe della home, senza link. In home la descrizione sparisce
   sotto i 767 perché la riga è un link e il nome basta; qui la descrizione è il
   contenuto, e resta. Niente scatto di padding né freccia: non si apre niente. */
.lb-mt-servizi__lead p {
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	line-height: 1.65;
	color: var(--lb-testo);
	max-width: 60ch;
	margin: 24px 0 clamp(32px, 5vw, 56px);
}
.lb-mt-servizi .lb-servizio:hover { padding-left: 6px; background: transparent; }
.lb-mt-servizi .lb-servizio::after { content: none; }
.lb-mt-servizi .lb-servizio__descrizione { flex-basis: 46ch; }

/* Segnalazione di Fabrizio, 13-10 (revisione/giro-mobile-1310/metodo-08, -09):
   «è tutta disallineata… si sovrappongono». Sotto i 768 la riga restava a tre
   colonne (`nowrap` di tema.css, scritto per la home dove la descrizione e'
   nascosta): descrizione stretta a destra, titoli ExtraWide lunghi sopra di lei.
   Qui la descrizione e' contenuto, quindi la riga va a capo: numero e titolo in
   alto, descrizione sotto a tutta larghezza.
   Allineata a sinistra e rientrata di 58 (numero 44 + spazio 14), cioe' alla stessa
   x del titolo: sulla colonna del titolo l'occhio scende senza spostarsi, e il
   numero resta in una sua colonna. Le variabili del contenitore si DEFINISCONO
   (Elementor legge --flex-wrap/--row-gap/--column-gap/--align-items, trappola 4);
   cinque classi per battere le quattro di tema.css. */
@media (max-width: 767px) {
	.lb-mt-servizi .lb-servizi__elenco .e-con.elementor-element.lb-servizio {
		--gap: 8px 14px;
		--row-gap: 8px;
		--column-gap: 14px;
		--flex-wrap: wrap;
		--align-items: flex-start;
	}
	.lb-mt-servizi .lb-servizio__nome { flex: 1 1 calc(100% - 58px); min-width: 0; }
	.lb-mt-servizi .lb-servizio__numero { padding-top: .35em; }
	.lb-mt-servizi .lb-servizio__descrizione { flex: 0 0 100%; padding-left: 58px; box-sizing: border-box; }
	.lb-mt-servizi .elementor-widget-text-editor.lb-servizio__descrizione p,
	.lb-mt-servizi .lb-servizio__descrizione p { text-align: left; max-width: none; }
}

@media (max-width: 767px) {
	.lb-mt-testata,
	.lb-mt-preventivo__griglia,
	.lb-mt-confronto { grid-template-columns: minmax(0, 1fr); }
	.lb-mt-fase { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.lb-mt-certezze { grid-template-columns: minmax(0, 1fr); }
	.lb-mt-certezza,
	.lb-mt-certezza + .lb-mt-certezza { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--lb-filo); }
	.lb-mt-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.lb-mt-hero__testo { padding: calc(var(--lb-alt-top, 79px) + 32px) var(--lb-margine) 40px !important; }
	.lb-mt-hero__foto { aspect-ratio: 4 / 5; max-width: 100%; min-height: 0; }
	.lb-mt-hero__foto::after { background: linear-gradient(180deg, var(--lb-fondo) 0%, rgba(10, 9, 8, 0) 22%); }
	.lb-mt-servizi .lb-servizio__descrizione { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.lb-mt-hero__foto img { animation: none; }
}

/* --- Punti di rottura di questa pagina ---------------------------------- */
@media (max-width: 900px) {
	.lb-servizio-riga { grid-template-columns: 1fr; }
	/* **G4-04: su telefono l'ordine dei blocchi si alternava, e il rimedio
	   esisteva già — era morto.** Fabrizio: «in mobile, vorrei che la
	   visualizzazione di ogni singolo servizio sia sempre la stessa, ovvero:
	   titolo, copy, pillole, cta, foto. Al momento sono alternate».

	   Trovata da `dev-wp-g4`, che **non è il DOM**: le sette righe sono un
	   Listing, un modello ripetuto sette volte con la stessa sequenza di figli.

	   ⚠️ **Il 2026-08-25 la regola dell'alternanza è stata ribersagliata su
	   `.jet-listing-grid__item` — e il reset per il telefono è rimasto qui, sul
	   bersaglio vecchio.** `.lb-servizio-riga:nth-child(even)` non corrisponde a
	   niente: in un Listing ogni riga è figlia unica del proprio involucro. C'è
	   perfino il commento che lo spiega, duecentocinquanta righe più su, accanto
	   alla regola che è stata spostata: **la spiegazione è stata scritta dove si
	   correggeva, non dove si sarebbe rotto.**

	   **Una regola che punta un selettore inesistente è silenziosa esattamente
	   come una sentinella che non asserisce:** passa, e non dice che non sta
	   facendo niente. Righe 2, 4 e 6 — Progettazione grafica, Gadget, Packaging —
	   restavano a `order: 2` e rendevano **FOTO → TESTO**.

	   Il prefisso `.lb-sv-elenco__griglia` non è decorativo: senza sarebbe
	   `(0,3,0)` contro il `(0,3,0)` della regola che deve battere, e vincerebbe
	   **per ordine nel file** — l'abitudine che la trappola 2 dice di non
	   prendere. Con il prefisso è `(0,4,0)` e vince per specificità. */
	.lb-sv-elenco__griglia .jet-listing-grid__item:nth-child(even) .lb-servizio-riga__testo { order: 0; }
	.lb-processo-innesto--schede .lb-processo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lb-processo-innesto--righe .lb-processo__passo { grid-template-columns: 1fr; gap: 8px; }
	.lb-processo-innesto--righe .lb-processo__passo::before { font-size: 2.4rem; }
}
@media (max-width: 560px) {
	.lb-processo-innesto--schede .lb-processo { grid-template-columns: 1fr; }
}

/* =====================================================================
   GRAZIE — `grazie.html`
   ---------------------------------------------------------------------
   Portato a mano il 2026-08-24, ed e' l'unica pagina in questa condizione.
   Le altre hanno il CSS qui perche' e' nato con loro; **il prototipo di
   Grazie tiene i suoi stili in un `<style>` dentro `grazie.html`**, quindi
   non erano mai arrivati nel tema. La pagina esisteva e non era vestita:
   sezione alta 213px invece di 900, titolo 33px invece di 80.

   Da qui una cosa da sapere per le pagine che restano: **un prototipo con
   lo stile inline non lascia niente nel foglio condiviso.** Costruire la
   struttura non basta, e la geometria delle sezioni lo dice subito.
   ===================================================================== */

/* La sezione riempie la finestra e centra tutto.
   `100svh` e non `100vh`: su mobile `vh` include la barra degli indirizzi
   che poi si ritira, e la prima schermata esce piu' alta della finestra —
   e' la stessa unita' che usa il prototipo. */
.lb-gz-hero {
	min-height: 100svh;
	text-align: center;
	padding-block: 16vh 12vh;
}

/* Il segno di spunta: un disco arancione da 74px.
   Lo stile sta sul `<p>` dentro il widget, non sul widget: il contenitore
   di Elementor e' largo quanto la colonna, e un `border-radius: 50%` li'
   sopra darebbe un'ellisse larga quanto la pagina invece di un cerchio.

   **Il selettore NON passa da `.elementor-widget-container`**, e la prima
   versione di questa regola lo faceva: in Elementor 4 quel `div` non c'e'
   piu' e il `<p>` e' figlio diretto del widget. La regola non agganciava
   niente e il disco restava alto 57px invece di 74, senza nessun errore. */
.lb-gz__segno > p {
	width: 74px;
	height: 74px;
	margin: 0 auto 30px;
	border-radius: 50%;
	background: var(--lb-arancio);
	color: var(--lb-su-arancio);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 14px 40px rgba(242, 87, 31, .28);
}

/* Il titolo. Il prefisso `.elementor-widget-heading` non e' ridondanza:
   la regola del kit e' `.elementor-widget-heading .elementor-heading-title`,
   due classi, e senza prefisso si vince o si perde a seconda dell'ordine di
   caricamento dei fogli. Stessa convenzione di `.lb-cs` e `.lb-sv`. */
.lb-gz-hero .elementor-widget-heading.lb-gz__titolo .elementor-heading-title {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--lb-titolo);
	font-size: clamp(2.4rem, 7vw, 5rem);
	line-height: 1;
	text-wrap: balance;
}
/* **Lo stacco sopra il titolo lo dichiara il titolo, e vale 0.**
   Nel prototipo l'h1 ha `margin: 16px 0 0` e quel margine **collassa** dentro
   quello dell'occhiello sopra. In Elementor i widget sono elementi flex e i
   margini **si sommano**: la stessa riga qui rendeva il blocco del titolo alto
   96px invece di 80. L'elemento del testo era gia' identico al prototipo —
   font 80px, interlinea 80px — ed era il contenitore a crescere.
   E' la trappola gia' scritta nel LEGGIMI: la distanza la dichiara un blocco
   solo, mai entrambi. */

/* Il paragrafo: largo al massimo 48 caratteri, che e' la misura del
   prototipo e non un numero tondo — una riga piu' lunga si rilegge male
   quando e' centrata. */
.lb-gz__lead > p {
	max-width: 48ch;
	margin: 24px auto 0;
	color: var(--lb-tenue);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	/* **L'interlinea va ridichiarata, e non e' pignoleria.** Quella del kit e'
	   scritta in `em`, quindi sul widget e' gia' diventata una misura in pixel
	   — 16 x 1,55 = 24,8px — e i figli la ereditano cosi' com'e', **come
	   lunghezza e non come numero**. Questo paragrafo e' piu' grande del corpo
	   (18,4px) e si ritrovava le righe del corpo: 24,8 invece di 28,52, cioe'
	   7px persi su due righe. E' la trappola gia' scritta nel LEGGIMI: ogni
	   testo di misura diversa dal corpo se la porta dietro. */
	line-height: 1.55;
}
.lb-gz__lead b {
	color: var(--lb-titolo);
	font-weight: 600;
}

.lb-gz__azioni { margin-top: 40px; }

/* La variante «fantasma» del pulsante: non esisteva nel tema perche'
   nessuna delle quattro pagine precedenti ne aveva bisogno. Qui servono due
   azioni di peso diverso — tornare alla home e' l'uscita normale, guardare i
   lavori e' l'invito — e due pulsanti pieni affiancati non li distinguono. */
.lb-cta--fantasma .elementor-button {
	background: transparent;
	color: var(--lb-titolo);
	border: 1px solid rgba(255, 255, 255, .28);
}
.lb-cta--fantasma .elementor-button:hover {
	border-color: var(--lb-arancio);
	filter: none;
}

/* =====================================================================
   PAGINA CONTATTI — aggiunta a `pagine.css` (classi `lb-ct-*`)  ·  v3
   ---------------------------------------------------------------------
   Va accodata in fondo a `pagine.css` dal lead, dopo aver confrontato l'md5
   del file. Non lo modifica nessun altro: questo e' l'unico blocco della
   pagina. La testata (`lb-lv-hero*`) e' quella di Clienti/Lavori, gia' in
   `tema.css`: qui non si ridichiara.

   v3 (decisione 327): la mappa torna fuori dalla colonna dei recapiti, in un
   container proprio a tutta larghezza fra la sezione e il footer, e sul piede
   di questa pagina sparisce il blocco CTA (payoff compreso).

   PERCHE' TRE CLASSI QUASI OVUNQUE. Elementor scrive padding, gap,
   direzione e altezza dei propri elementi a (0,3,0), come variabili
   (`--gap`, `--padding-*`, `--flex-direction`) o come proprieta' dirette
   dal CSS generato della pagina. Una regola `.lb-ct__x` da sola (0,1,0)
   perderebbe, o vincerebbe solo per ordine di caricamento. Ogni regola
   che deve battere Elementor porta quindi `.e-con.elementor-element` (o
   `.elementor-widget`) davanti, e per le variabili si DEFINISCE la
   variabile invece di alzare la specificita' (TRAPPOLE-E-PROTOCOLLI §4).

   NIENTE PANNELLO BREAKPOINT. Il responsive e' qui, in media query del
   tema figlio, a 767px come la testata (CLAUDE.md di progetto).
   ===================================================================== */

/* --- La sezione: meno aria sopra (la testata ha gia' il suo respiro). Sotto
       un respiro pieno, perche' ora segue la mappa a bordo a bordo e non il
       footer. --- */
.e-con.elementor-element.lb-ct {
	padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 96px);
}
/* Stessa larghezza della testata (1300px), o il modulo non si allinea al titolo. */
.lb-ct.e-con-boxed > .e-con-inner { max-width: 1300px; }

/* --- Le due colonne: modulo piu' largo dei recapiti ----------------------
   `flex-start`, non piu' `stretch`: la colonna dei recapiti e' corta e deve
   restare allineata in alto, non stirarsi all'altezza del modulo. */
.lb-ct .e-con.elementor-element.lb-ct__griglia {
	--gap: clamp(36px, 6vw, 96px) clamp(36px, 6vw, 96px);
	--row-gap: clamp(36px, 6vw, 96px);
	--column-gap: clamp(36px, 6vw, 96px);
	/* `align-items` si legge da `--align-items`: va definita (trappola 4). */
	--align-items: flex-start;
	align-items: flex-start;
}
.lb-ct .e-con.elementor-element.lb-ct__modulo    { flex: 1.35 1 0; min-width: 0; }
.lb-ct .e-con.elementor-element.lb-ct__recapiti  { flex: 1 1 0; min-width: 0; }

/* --- Etichette di colonna (occhiello arancione) -------------------------
   Sotto, il margine che Elementor mette fra i widget (`:not(:last-child)`,
   (0,2,0)) e' battuto da tre classi. */
.elementor-widget.elementor-widget-heading.lb-ct-etichetta {
	margin-bottom: clamp(18px, 2.4vw, 30px);
}

/* --- I recapiti (telefono e indirizzo, stesso corpo) --------------------- */
.elementor-widget.elementor-widget-icon-list.lb-ct-elenco .elementor-icon-list-items { margin: 0; padding: 0; }
.elementor-widget.elementor-widget-icon-list.lb-ct-elenco .elementor-icon-list-item { margin: 0 0 16px; padding: 0; }
.elementor-widget.elementor-widget-icon-list.lb-ct-elenco .elementor-icon-list-text {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.7vw, 1.4rem);
	line-height: 1.25;
	letter-spacing: -.005em;
	color: var(--lb-titolo);
	/* L'indirizzo, se va a capo, lo fa in due righe pari e non lascia «Roma» sola. */
	text-wrap: balance;
}
.elementor-widget.elementor-widget-icon-list.lb-ct-elenco a { text-decoration: none; }
.elementor-widget.elementor-widget-icon-list.lb-ct-elenco a:hover .elementor-icon-list-text { color: var(--lb-arancio); }

/* --- La mappa: container a tutta larghezza, da bordo a bordo --------------
   `.lb-ct-mappa-sez` e' un Container `full` di primo livello, fuori dalla
   sezione boxed: nessun padding laterale, nessun margine, nessun bordo. Altezza
   ~480px a 1440 e ~360px da telefono, decisa qui (clamp) e non nel pannello. Il
   widget (sia il `google_maps` nativo sia lo shortcode `[lb_mappa]`) riempie il
   container: il nativo stampa l'altezza scelta nel pannello con un selettore
   (0,3,1), qui ne servono cinque classi e un elemento (0,5,1). */
.e-con.elementor-element.lb-ct-mappa-sez {
	--padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
	--margin-top: 0px; --margin-bottom: 0px;
	--gap: 0px 0px; --row-gap: 0px; --column-gap: 0px;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	height: clamp(360px, 34vw, 480px);
	min-height: 0;
	position: relative;
	overflow: hidden;
}
.lb-ct-mappa-sez .elementor-widget.lb-ct-mappa {
	width: 100%;
	height: 100%;
	margin: 0;
}
/* `.elementor-widget-container` esiste nel widget google_maps nativo; il widget
   Shortcode di Elementor 4 NON lo ha (dentro c'e' direttamente `div.elementor-shortcode`),
   quindi per lo shortcode `[lb_mappa]` l'altezza passa dalla seconda regola. */
.lb-ct-mappa-sez .elementor-widget.lb-ct-mappa > .elementor-widget-container { height: 100%; }
/* Shortcode (Elementor 4): senza questa il wrapper ha altezza 0 e `.lb-mappa`
   (height:100%) collassa a 0 con tutta la mappa. (0,4,0) */
.lb-ct-mappa-sez .elementor-widget.lb-ct-mappa > .elementor-shortcode { height: 100%; }
.lb-ct-mappa-sez .elementor-widget.elementor-widget-google_maps.lb-ct-mappa .elementor-custom-embed {
	height: 100%;
	position: relative;
}
.lb-ct-mappa-sez .elementor-widget.elementor-widget-google_maps.lb-ct-mappa .elementor-custom-embed iframe {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Mappa stilizzata `[lb_mappa]` (decisione 328; inc/mappa.php + assets/mappa.js) --
   Il riquadro riempie il widget; la mappa vera e' un div assoluto, l'iframe di
   riserva (chiave assente o rifiutata) prende lo stesso posto. Il link «Apri in
   Google Maps» e' un'etichetta piccola in basso a sinistra, fuori dal cammino
   dei comandi di Google (che stanno a destra). */
.lb-mappa { position: relative; width: 100%; height: 100%; background: var(--lb-superficie); }
.lb-mappa__mappa,
.lb-mappa__riserva { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lb-mappa__link {
	position: absolute;
	left: clamp(16px, 3vw, 40px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 2;
	padding: 11px 18px;
	background: var(--lb-fondo);
	border: 1px solid var(--lb-filo);
	color: var(--lb-titolo);
	font-family: var(--lb-extrawide);
	font-weight: 700;
	font-size: .66rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}
.lb-mappa__link:hover,
.lb-mappa__link:focus-visible { color: var(--lb-arancio); border-color: var(--lb-arancio); }

/* --- Il piede di questa pagina ---------------------------------------------
   Su Contatti la mappa tocca il footer e il blocco CTA «Iniziamo / Hai un
   progetto» (payoff compreso) non serve: la pagina e' gia' la CTA. Il footer e'
   il template #58 del Theme Builder, uguale per tutte le pagine e NON si
   modifica: si interviene da qui, e solo qui.

   AGGANCIO. `body:has(.lb-ct)`: il body si riconosce dalla sezione di questa
   pagina, senza ID di pagina o di template (che cambiano se si duplica la pagina
   o si ricrea il template) e senza toccare `functions.php`. Se un giorno il tema
   aggiunge una classe al body, questo e' l'unico punto da cambiare. `:has()` e'
   supportato da tutti i browser attuali; dove manca, il piede resta quello
   standard (degrada bene: nessuna pagina rotta).

   COSA AZZERA, e da dove vengono i 120px: `.lb-foot` ha `margin-top:
   clamp(60px, 9vw, 120px)` in tema.css; a 1440 sono esattamente 120. */
body:has(.lb-ct) .e-con.elementor-element.lb-foot { margin-top: 0; }
body:has(.lb-ct) .e-con.elementor-element.lb-foot .lb-foot__cta { display: none; }
/* Senza il blocco CTA, il primo blocco visibile e' la griglia dei link: tema.css
   dava il respiro in alto (72px) al primo figlio del footer, che ora e' nascosto.
   Lo riceve la griglia, senza il margine da 80px e senza il filo (la CTA non c'e'
   piu' da separare). */
body:has(.lb-ct) .e-con.elementor-element.lb-foot .lb-foot__griglia {
	margin-top: 0;
	border-top: 0;
	padding-top: clamp(46px, 6vw, 72px);
}

/* --- Telefono: una colonna ----------------------------------------------- */
@media (max-width: 767px) {
	.lb-ct .e-con.elementor-element.lb-ct__griglia {
		--flex-direction: column;
		flex-direction: column;
		--align-items: stretch;
		align-items: stretch;
	}
	.lb-ct .e-con.elementor-element.lb-ct__modulo,
	.lb-ct .e-con.elementor-element.lb-ct__recapiti { flex: 0 0 auto; width: 100%; }
}


/* =====================================================================
   PAGINE LEGALI E LINK LEGALI  (Privacy policy, Cookie policy, piede, modulo)
   ---------------------------------------------------------------------
   Blocco accodato in fondo a `pagine.css`; il blocco Contatti sopra non si
   tocca. Quattro cose, tutte misurate dal vivo dal lead:

   1. LINK DELLA CODA DEL PIEDE. Il text-editor a destra del copyright ora
      contiene tre link (Privacy, Cookie, Gestione preferenze). Senza una
      regola escono nel blu di default del browser. Prendono il colore del
      testo della coda (`--lb-tenue`, lo stesso del copyright accanto), niente
      sottolineatura, arancio all'hover come gli altri link del piede.
      Il prefisso `.elementor-widget-text-editor` serve perche' Elementor
      stampa il colore dei link del kit sul widget dopo di noi, con la stessa
      specificita' di una regola di classe. Ogni link e' `nowrap`: da telefono
      va a capo fra un link e l'altro, mai a meta' di una voce.

   2. ALLINEAMENTO DELLE PAGINE LEGALI. La testata (`lb-lv-hero`) ha il
      contenitore interno a 1300px, la sezione `lb-legale` ereditava i 1360
      del kit: testo a x=94, titolo a x=124 a 1440. Stessa correzione di
      `.lb-ct`: 1300px. Il respiro sopra si riduce come su Contatti (la
      testata ha gia' il suo), con tre classi perche' Elementor scrive il
      padding dei Container a (0,3,0) e `.lb-sezione` da sola perderebbe.

   3. TIPOGRAFIA DEL TESTO LEGALE. Colonna di ~70ch allineata a sinistra,
      corpo come i paragrafi del sito (`--lb-tenue`, ~1rem, interlinea 1.7).
      Titoli h2/h3 in ExtraWide come il resto del sito, sobri; elenchi con
      pallino arancio. Tutte le regole portano `.elementor-widget-text-editor`
      davanti per battere la tipografia del kit.

   4. LINK «PRIVACY POLICY» NELLA CASELLA DEL MODULO. Nessuna regola del tema
      lo copriva, quindi blu di default. Qui e' dentro una frase: prende il
      colore dell'etichetta (`inherit`), resta sottolineato, arancio all'hover.

   Responsive solo qui, a 767px come il resto del tema (nessun pannello
   breakpoint di Elementor).
   ===================================================================== */

/* --- 1. Link della coda del piede ---
   Classi reali misurate dal vivo: `lb-foot__coda` sta sul CONTENITORE
   (`.e-con`), non sul widget `lbfbr`: serve un discendente. */
.e-con.lb-foot__coda .elementor-widget-text-editor a {
	color: var(--lb-tenue);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
.e-con.lb-foot__coda .elementor-widget-text-editor a:hover,
.e-con.lb-foot__coda .elementor-widget-text-editor a:focus-visible {
	color: var(--lb-arancio);
}

/* --- 2. La sezione: stessa larghezza della testata, meno aria sopra --- */
.e-con.elementor-element.lb-sezione.lb-legale {
	padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 96px);
}
.lb-legale.e-con-boxed > .e-con-inner { max-width: 1300px; }

/* --- 3. Tipografia del testo legale --- */
.elementor-widget-text-editor.lb-legale__testo,
.lb-legale .elementor-widget-text-editor { max-width: 70ch; }

.lb-legale .elementor-widget-text-editor p,
.lb-legale .elementor-widget-text-editor li {
	color: var(--lb-tenue);
	font-size: 1rem;
	line-height: 1.7;
}
.lb-legale .elementor-widget-text-editor p { margin: 0 0 1.1em; }

.lb-legale .elementor-widget-text-editor h2 {
	font-family: var(--lb-extrawide);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -.005em;
	color: var(--lb-titolo);
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	line-height: 1.15;
	margin: 2.4em 0 .8em;
}
.lb-legale .elementor-widget-text-editor h3 {
	font-family: var(--lb-regular);
	font-weight: 600;
	color: var(--lb-titolo);
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	line-height: 1.3;
	margin: 1.8em 0 .5em;
}
/* Il primo titolo non spinge: sopra c'e' gia' il respiro della sezione. */
.lb-legale .elementor-widget-text-editor > :first-child { margin-top: 0; }
.lb-legale .elementor-widget-text-editor > :last-child { margin-bottom: 0; }

.lb-legale .elementor-widget-text-editor ul,
.lb-legale .elementor-widget-text-editor ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
}
.lb-legale .elementor-widget-text-editor ul { list-style: none; padding-left: 1.2em; }
.lb-legale .elementor-widget-text-editor ul li { position: relative; }
.lb-legale .elementor-widget-text-editor ul li::before {
	content: "";
	position: absolute;
	left: -1.2em;
	top: .72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--lb-arancio);
}
.lb-legale .elementor-widget-text-editor ol li::marker { color: var(--lb-arancio); }
.lb-legale .elementor-widget-text-editor li { margin: 0 0 .5em; }

.lb-legale .elementor-widget-text-editor strong,
.lb-legale .elementor-widget-text-editor b { color: var(--lb-testo); font-weight: 600; }
.lb-legale .elementor-widget-text-editor a {
	color: var(--lb-testo);
	text-decoration: underline;
	text-decoration-color: var(--lb-filo);
	text-underline-offset: .2em;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.lb-legale .elementor-widget-text-editor a:hover,
.lb-legale .elementor-widget-text-editor a:focus-visible {
	color: var(--lb-arancio);
	text-decoration-color: var(--lb-arancio);
}

/* --- 4. Link «privacy policy» nella casella del modulo --- */
.lb-modulo .elementor-field-type-acceptance label a,
.elementor-form .elementor-field-type-acceptance label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	transition: color .2s ease;
}
.lb-modulo .elementor-field-type-acceptance label a:hover,
.lb-modulo .elementor-field-type-acceptance label a:focus-visible,
.elementor-form .elementor-field-type-acceptance label a:hover,
.elementor-form .elementor-field-type-acceptance label a:focus-visible {
	color: var(--lb-arancio);
}

@media (max-width: 767px) {
	.e-con.lb-foot__coda .elementor-widget-text-editor a { display: inline-block; }
	.e-con.elementor-element.lb-sezione.lb-legale { padding-block: 28px 56px; }
	.lb-legale .elementor-widget-text-editor,
	.elementor-widget-text-editor.lb-legale__testo { max-width: none; }
	.lb-legale .elementor-widget-text-editor h2 { margin-top: 2em; }
}

/* --- 5. Testo iubenda dentro le pagine legali ([lb_iubenda], inc/iubenda.php) ---
   Il blocco porta la classe `elementor-widget-text-editor`, quindi eredita gia' colonna,
   paragrafi, h2, h3, elenchi e link del punto 3. Mancano solo i titoli di quarto livello
   (la policy ne ha) e l'a-capo dei link lunghi (indirizzi di cookie e fornitori), che su
   fondo scuro altrimenti escono dalla colonna da telefono. Le intestazioni interne alla
   policy (data di ultima modifica) restano nel tono tenue del testo. */
.lb-legale .elementor-widget-text-editor.lb-iubenda h4 {
	font-family: var(--lb-regular);
	font-weight: 600;
	color: var(--lb-titolo);
	font-size: 1rem;
	line-height: 1.35;
	margin: 1.5em 0 .4em;
}
.lb-legale .elementor-widget-text-editor.lb-iubenda a { overflow-wrap: anywhere; }
.lb-legale .elementor-widget-text-editor.lb-iubenda .main-header__meta { font-size: .9rem; }