@charset "UTF-8";
/* =============================================================================
   pagine.css — chi siamo, noleggio, 404, pagine generiche
   Proprietario: agente A6 (round 2). Nessun altro agente scrive in questo file.
   Dipende da main.css (design system): usa i token, non ridefinirli.

   Nota sui fallback: la scala di spaziatura --fg-s1..--fg-s8 è di proprietà di A1
   (main.css). Finché non è pubblicata, ogni var() qui porta con sé il valore della
   scala 8px del CONTRACT §12.2, così il foglio regge da solo.

   Nota sulle animazioni: qui si dichiarano solo gli stati "a riposo" (hover,
   transizioni di transform/opacity). Gli stati di ingresso legati a
   data-fg-reveal / data-fg-count sono di motion.css (A3).

   INDICE
   01. Blocchi condivisi fra le pagine (testate, rimandi)
   02. Chi siamo
   03. Noleggio
   04. 404
   05. Pagine generiche (page.php)
   ============================================================================= */

/* =============================================================================
   01. BLOCCHI CONDIVISI
   ========================================================================== */

/* Testata di sezione: ritmo unico su tutte le pagine di quest'area.
   Fra titolo e contenuto: --fg-s5 (CONTRACT §12.2). */
.fg-chisiamo__testata,
.fg-noleggio__testata,
.fg-404__sezione-testata {
	max-width: 62ch;
	margin-bottom: var(--fg-s5, 3rem);
}

.fg-chisiamo__testata > * + *,
.fg-noleggio__testata > * + *,
.fg-404__sezione-testata > * + * {
	margin-top: var(--fg-s2, 1rem);
}

/* --- Rimandi ai reparti (chi siamo + 404) --------------------------------
   Cinque voci: su tre colonne resterebbe una cella vuota. La griglia è quindi
   a sei colonne, 3 voci da 2 + 2 voci da 3: nessun buco, seconda riga più larga. */
.fg-rimandi {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s3, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-rimandi__item {
	display: flex;
}

.fg-rimandi__link {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--fg-s1, .5rem);
	width: 100%;
	padding: var(--fg-s3, 1.5rem);
	border: 1px solid var(--fg-grey-200);
	border-top: 3px solid var(--fg-orange);
	border-radius: var(--fg-radius);
	background: var(--fg-white);
	color: inherit;
	text-decoration: none;
	transition: transform var(--fg-transition), box-shadow var(--fg-transition),
		border-color var(--fg-transition);
}

.fg-rimandi__titolo {
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--fg-black);
}

.fg-rimandi__testo {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--fg-grey-600);
}

.fg-rimandi__freccia {
	font-size: 1.25rem;
	line-height: 1;
	color: var(--fg-orange-text, #B25410);
	transition: transform var(--fg-transition);
}

.fg-rimandi__link:hover,
.fg-rimandi__link:focus-visible {
	border-color: var(--fg-orange);
	box-shadow: var(--fg-shadow-lg, 0 8px 28px rgba(0, 0, 0, .14));
}

@media (prefers-reduced-motion: no-preference) {
	.fg-rimandi__link:hover,
	.fg-rimandi__link:focus-visible {
		transform: translate3d(0, -4px, 0);
	}

	.fg-rimandi__link:hover .fg-rimandi__freccia,
	.fg-rimandi__link:focus-visible .fg-rimandi__freccia {
		transform: translate3d(6px, 0, 0);
	}
}

@media (min-width: 600px) {
	.fg-rimandi {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Cinque voci su due colonne: l'ultima occupa la riga intera. */
	.fg-rimandi__item:nth-child(5) {
		grid-column: span 2;
	}
}

@media (min-width: 900px) {
	.fg-rimandi {
		grid-template-columns: repeat(6, 1fr);
	}

	.fg-rimandi__item {
		grid-column: span 2;
	}

	.fg-rimandi__item:nth-child(4),
	.fg-rimandi__item:nth-child(5) {
		grid-column: span 3;
	}

	.fg-rimandi__item:nth-child(4) .fg-rimandi__link,
	.fg-rimandi__item:nth-child(5) .fg-rimandi__link {
		grid-template-rows: auto auto auto;
		align-content: start;
	}
}

/* =============================================================================
   02. CHI SIAMO
   ========================================================================== */

/* --- Introduzione: testo + scheda dei dati certi ------------------------- */
.fg-chisiamo__intro-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s5, 3rem);
	align-items: start;
}

.fg-chisiamo__intro-testo > * + * {
	margin-top: var(--fg-s3, 1.5rem);
}

.fg-chisiamo__intro-testo p:not(.fg-lead) {
	max-width: 64ch;
	color: var(--fg-grey-900);
}

/* Misura di lettura anche sul paragrafo introduttivo: fino a 899 px la colonna
   è unica e senza tetto il lead correva su ~90 caratteri per riga. */
.fg-chisiamo__intro-testo .fg-lead {
	max-width: 60ch;
}

.fg-chisiamo .fg-chisiamo__scheda {
	padding: var(--fg-s4, 2rem);
	border-left: 4px solid var(--fg-orange);
	background: var(--fg-grey-100);
}

.fg-chisiamo .fg-scheda {
	margin: var(--fg-s3, 1.5rem) 0 0;
}

.fg-chisiamo .fg-scheda__riga + .fg-scheda__riga {
	margin-top: var(--fg-s2, 1rem);
	padding-top: var(--fg-s2, 1rem);
	border-top: 1px solid var(--fg-grey-200);
}

.fg-chisiamo .fg-scheda__voce {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-grey-600);
}

.fg-chisiamo .fg-scheda__dato {
	margin: .25rem 0 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fg-black);
}

@media (min-width: 900px) {
	.fg-chisiamo__intro-inner {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
		gap: var(--fg-s6, 4rem);
	}
}

/* --- La storia: timeline alternata --------------------------------------- */
.fg-storia {
	position: relative;
	display: grid;
	gap: var(--fg-s5, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Il binario. Su mobile corre a sinistra, su desktop al centro. */
.fg-storia::before {
	content: "";
	position: absolute;
	top: .75rem;
	bottom: .75rem;
	left: .6875rem;
	width: 2px;
	background: linear-gradient(180deg, var(--fg-orange) 0%, var(--fg-green) 100%);
	opacity: .55;
}

.fg-storia__tappa {
	position: relative;
	padding-left: var(--fg-s5, 3rem);
}

/* Il pallino sul binario. */
.fg-storia__tappa::before {
	content: "";
	position: absolute;
	top: .5rem;
	left: 0;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: var(--fg-orange);
	box-shadow: 0 0 0 5px rgba(239, 115, 29, .18);
}

.fg-storia__tappa:last-child::before {
	background: var(--fg-green);
	box-shadow: 0 0 0 5px rgba(69, 173, 48, .2);
}

.fg-storia__anno {
	margin: 0 0 var(--fg-s1, .5rem);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--fg-orange);
}

.fg-storia__corpo {
	padding: var(--fg-s3, 1.5rem);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--fg-radius);
	background: rgba(255, 255, 255, .04);
}

.fg-storia__nota {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-green);
}

.fg-storia__titolo {
	margin: var(--fg-s1, .5rem) 0 0;
	font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem);
	line-height: 1.2;
	color: var(--fg-white);
}

.fg-storia__testo {
	margin: var(--fg-s2, 1rem) 0 0;
	max-width: 52ch;
	font-size: .9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

/* Sotto i 400 px il binario si prendeva 48 px su 320: la colonna di testo
   scendeva a 232 px e i paragrafi diventavano righe da quattro parole.
   Binario e pallino si stringono, il testo recupera 16 px. */
@media (max-width: 399.98px) {
	.fg-storia::before {
		left: .5625rem;
	}

	.fg-storia__tappa {
		padding-left: var(--fg-s4, 2rem);
	}

	.fg-storia__tappa::before {
		width: 1.125rem;
		height: 1.125rem;
	}

	.fg-storia__corpo {
		padding: var(--fg-s2, 1rem);
	}
}

/* La timeline alternata parte dal tablet verticale (768 e 820 px): a 900 px
   l'iPad restava con la versione mobile e i riquadri, larghi tutta la pagina
   ma con il testo fermo a 52ch, lasciavano metà riga vuota.
   A 760 px ogni colonna misura ~336 px: il testo resta su ~38 caratteri. */
@media (min-width: 760px) {
	.fg-storia {
		gap: var(--fg-s5, 3rem);
	}

	.fg-storia::before {
		left: 50%;
		transform: translateX(-50%);
	}

	.fg-storia__tappa {
		width: calc(50% - var(--fg-s5, 3rem));
		padding-left: 0;
	}

	/* Tappe dispari a sinistra, allineate a destra verso il binario. */
	.fg-storia__tappa:nth-child(odd) {
		margin-right: auto;
		text-align: right;
	}

	.fg-storia__tappa:nth-child(odd)::before {
		left: auto;
		right: calc(-1 * var(--fg-s5, 3rem) - .6875rem);
	}

	.fg-storia__tappa:nth-child(odd) .fg-storia__corpo {
		border-right: 3px solid var(--fg-orange);
	}

	.fg-storia__tappa:nth-child(odd) .fg-storia__testo {
		margin-left: auto;
	}

	/* Tappe pari a destra. */
	.fg-storia__tappa:nth-child(even) {
		margin-left: auto;
	}

	.fg-storia__tappa:nth-child(even)::before {
		left: calc(-1 * var(--fg-s5, 3rem) - .6875rem);
	}

	.fg-storia__tappa:nth-child(even) .fg-storia__corpo {
		border-left: 3px solid var(--fg-orange);
	}

	.fg-storia__tappa:last-child .fg-storia__corpo {
		border-color: var(--fg-green);
	}
}

@media (min-width: 900px) {
	.fg-storia {
		gap: var(--fg-s6, 4rem);
	}
}

/* Nella fascia stretta della timeline alternata (760-899 px) la colonna misura
   ~336 px: l'anno con il clamp pieno arrivava a sfiorare il binario. */
@media (min-width: 760px) and (max-width: 899.98px) {
	.fg-storia__tappa {
		width: calc(50% - var(--fg-s4, 2rem));
	}

	.fg-storia__tappa:nth-child(odd)::before {
		right: calc(-1 * var(--fg-s4, 2rem) - .6875rem);
	}

	.fg-storia__tappa:nth-child(even)::before {
		left: calc(-1 * var(--fg-s4, 2rem) - .6875rem);
	}

	.fg-storia__anno {
		font-size: 2.25rem;
	}
}

/* --- Numeri del punto vendita -------------------------------------------- */
.fg-chisiamo .fg-numeri {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s3, 1.5rem);
	margin: 0 0 var(--fg-s6, 4rem);
	padding: 0;
	list-style: none;
}

.fg-chisiamo .fg-numeri__item {
	padding: var(--fg-s4, 2rem);
	border: 0;
	border-top: 4px solid var(--fg-orange);
	border-radius: 0;
	background: var(--fg-grey-100);
	box-shadow: none;
}

.fg-chisiamo .fg-numeri__valore {
	display: flex;
	align-items: baseline;
	gap: .25rem;
	margin: 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-weight: 800;
	line-height: .95;
	color: var(--fg-black);
}

.fg-chisiamo .fg-numeri__cifra {
	font-size: clamp(3rem, 2rem + 5vw, 4.75rem);
	font-variant-numeric: tabular-nums;
	color: var(--fg-black);
}

.fg-chisiamo .fg-numeri__unita {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	color: var(--fg-orange-text, #B25410);
}

.fg-chisiamo .fg-numeri__label {
	margin: var(--fg-s2, 1rem) 0 0;
	max-width: 26ch;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--fg-grey-600);
}

@media (min-width: 600px) {
	.fg-chisiamo .fg-numeri {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Galleria del punto vendita + fascia aerea ---------------------------
   La galleria "Il punto vendita" (reparto interno-generale) e la fascia a
   tutta larghezza sotto la timeline (riprese aeree con drone) usano il
   componente slider (assets/css/slider.css). Qui solo l'innesto nella pagina:
   il carosello e la variante 'sfondo' si disegnano da soli. */

/* Il carosello dell'interno segue i numeri: lo stacco lo dà già il
   margin-bottom dei numeri, quindi qui niente margine aggiuntivo in cima. */
.fg-chisiamo__slider {
	margin-top: 0;
}

/* Fascia aerea: il componente ('sfondo') la porta a tutta larghezza con
   .fg-bleed. Il filo arancio sopra e sotto segna lo stacco fra la timeline
   scura che la precede e la sezione chiara che la segue. */
.fg-chisiamo__aerea.fg-slider--sfondo {
	border-top: 4px solid var(--fg-orange);
	border-bottom: 4px solid var(--fg-orange);
}

/* --- Come lavoriamo ------------------------------------------------------- */
.fg-metodo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s3, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-metodo__item {
	position: relative;
	padding: var(--fg-s4, 2rem);
	border-top: 3px solid var(--fg-black);
	background: var(--fg-white);
}

.fg-metodo__num {
	display: block;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--fg-grey-200);
}

.fg-metodo__titolo {
	margin: var(--fg-s2, 1rem) 0 0;
	font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
	line-height: 1.2;
}

.fg-metodo__testo {
	margin: var(--fg-s2, 1rem) 0 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--fg-grey-600);
}

@media (min-width: 900px) {
	.fg-metodo {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fg-chisiamo__azioni {
	margin-top: var(--fg-s5, 3rem);
}

/* =============================================================================
   03. NOLEGGIO
   ========================================================================== */

/* --- Introduzione: testo + motivi ---------------------------------------- */
.fg-noleggio__intro-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s5, 3rem);
	align-items: start;
}

.fg-noleggio .fg-noleggio__intro-testo > * + * {
	margin-top: var(--fg-s2, 1rem);
}

.fg-noleggio .fg-noleggio__intro-testo p:not(.fg-eyebrow) {
	max-width: 60ch;
	color: var(--fg-grey-900);
}

.fg-noleggio .fg-noleggio__intro-testo .fg-title {
	margin-bottom: var(--fg-s2, 1rem);
}

.fg-noleggio__motivi {
	margin: 0;
	padding: var(--fg-s4, 2rem);
	list-style: none;
	background: var(--fg-grey-100);
	border-left: 4px solid var(--fg-green);
}

.fg-noleggio__motivo + .fg-noleggio__motivo {
	margin-top: var(--fg-s3, 1.5rem);
	padding-top: var(--fg-s3, 1.5rem);
	border-top: 1px solid var(--fg-grey-200);
}

.fg-noleggio__motivo-titolo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
}

.fg-noleggio__motivo-testo {
	margin: .35rem 0 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--fg-grey-600);
}

@media (min-width: 900px) {
	.fg-noleggio__intro-inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--fg-s6, 4rem);
	}
}

/* --- Categorie a noleggio ------------------------------------------------- */
.fg-noleggio__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s3, 1.5rem);
}

.fg-noleggio .fg-noleggio__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	background: var(--fg-white);
	box-shadow: var(--fg-shadow);
	transition: transform var(--fg-transition), box-shadow var(--fg-transition);
}

.fg-noleggio__card-media {
	position: relative;
	overflow: hidden;
	background: var(--fg-grey-100);
	aspect-ratio: 4 / 3;
}

.fg-noleggio__card-media img,
.fg-noleggio__card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

/* Filetto arancio sotto la foto: lega la card al resto del sito. */
.fg-noleggio__card-media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background: var(--fg-orange);
}

.fg-noleggio__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--fg-s3, 1.5rem);
}

.fg-noleggio__card-titolo {
	margin: 0;
	font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
	line-height: 1.2;
}

.fg-noleggio__card-testo {
	margin: var(--fg-s2, 1rem) 0 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--fg-grey-600);
}

.fg-noleggio__card-label {
	margin: var(--fg-s3, 1.5rem) 0 var(--fg-s1, .5rem);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600);
}

.fg-noleggio__esempi {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fg-grey-200);
}

.fg-noleggio__esempi li {
	position: relative;
	padding: .5rem 0 .5rem 1.25rem;
	border-bottom: 1px solid var(--fg-grey-200);
	font-size: .9375rem;
	line-height: 1.4;
}

.fg-noleggio__esempi li:last-child {
	border-bottom: 0;
}

.fg-noleggio__esempi li::before {
	content: "";
	position: absolute;
	top: 1.0625rem;
	left: 0;
	width: .5rem;
	height: .125rem;
	background: var(--fg-green);
}

.fg-noleggio .fg-noleggio__card:hover {
	box-shadow: var(--fg-shadow-lg, 0 8px 28px rgba(0, 0, 0, .14));
}

@media (prefers-reduced-motion: no-preference) {
	.fg-noleggio .fg-noleggio__card:hover {
		transform: translate3d(0, -4px, 0);
	}

	.fg-noleggio .fg-noleggio__card:hover .fg-noleggio__card-img {
		transform: scale(1.06);
	}
}

@media (min-width: 600px) {
	.fg-noleggio__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.fg-noleggio__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Come funziona: quattro passi ---------------------------------------- */
.fg-passi {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s4, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-passi__item {
	position: relative;
	padding-left: var(--fg-s6, 4rem);
}

.fg-passi__num {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid var(--fg-orange);
	border-radius: 50%;
	background: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--fg-orange);
}

.fg-passi__titolo {
	margin: 0;
	padding-top: .35rem;
	font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
	line-height: 1.25;
	color: var(--fg-white);
}

.fg-passi__testo {
	margin: var(--fg-s2, 1rem) 0 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}

/* Sotto i 480 px il pallino numerato mangiava 64 px dei 280 disponibili e il
   passo si leggeva su righe da quattro parole. Il numero esce dal flusso
   assoluto e si mette sopra il titolo: il testo recupera tutta la colonna. */
@media (max-width: 479.98px) {
	.fg-passi__item {
		padding-left: 0;
	}

	.fg-passi__num {
		position: static;
		width: 2.5rem;
		height: 2.5rem;
		margin-bottom: var(--fg-s2, 1rem);
		font-size: 1.125rem;
	}

	.fg-passi__titolo {
		padding-top: 0;
	}
}

@media (min-width: 900px) {
	.fg-passi {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--fg-s3, 1.5rem);
	}

	.fg-passi__item {
		padding-left: 0;
		padding-top: var(--fg-s5, 3rem);
	}

	/* Filo che collega i passi: decorativo, si ferma sull'ultimo. */
	.fg-passi__item::before {
		content: "";
		position: absolute;
		top: 1.375rem;
		left: 2.75rem;
		right: calc(-1 * var(--fg-s3, 1.5rem));
		height: 2px;
		background: rgba(239, 115, 29, .3);
	}

	.fg-passi__item:last-child::before {
		display: none;
	}
}

/* --- Box "chiedici" ------------------------------------------------------- */
.fg-richiesta {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s4, 2rem);
	align-items: center;
	padding: clamp(var(--fg-s4, 2rem), 5vw, var(--fg-s6, 4rem));
	border-left: 6px solid var(--fg-orange);
	background: var(--fg-grey-100);
}

.fg-richiesta__titolo {
	margin: var(--fg-s2, 1rem) 0 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--fg-black);
}

.fg-richiesta__descrizione {
	margin: var(--fg-s3, 1.5rem) 0 0;
	max-width: 62ch;
	line-height: 1.65;
	color: var(--fg-grey-900);
}

.fg-richiesta__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s2, 1rem);
}

@media (min-width: 900px) {
	.fg-richiesta {
		grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
		gap: var(--fg-s6, 4rem);
	}

	.fg-richiesta__azioni {
		flex-direction: column;
		align-items: stretch;
	}

	.fg-richiesta__azioni .fg-btn {
		justify-content: center;
		text-align: center;
	}
}

/* =============================================================================
   04. 404
   ========================================================================== */

/* main.css centra il blocco 404: qui la testata torna allineata a sinistra,
   perché titolo, testo e scorciatoie formano una colonna sola. */
.fg-404 .fg-404__testata-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fg-s3, 1.5rem);
	align-items: center;
	text-align: left;
}

.fg-404 .fg-404__intro .fg-lead {
	max-width: 54ch;
}

.fg-404 .fg-404__code {
	margin: 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: clamp(5rem, 3rem + 16vw, 12rem);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.03em;
	color: transparent;
	-webkit-text-stroke: 3px var(--fg-orange);
}

.fg-404 .fg-404__title {
	margin: var(--fg-s2, 1rem) 0 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--fg-black);
}

.fg-404 .fg-404__intro .fg-lead {
	margin-top: var(--fg-s3, 1.5rem);
}

.fg-404 .fg-404__links {
	margin-top: var(--fg-s4, 2rem);
}

.fg-404 .fg-404__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s1, .5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le card dei reparti restano allineate a sinistra anche dentro la 404 centrata. */
.fg-404 .fg-rimandi__link {
	text-align: left;
}

.fg-404 .fg-404__sezione-testata {
	margin-inline: auto;
	text-align: center;
}

.fg-404__pill {
	display: inline-flex;
	align-items: center;
	/* 44 px pieni: con il solo padding la pillola si fermava a 43 px, sotto la
	   soglia d'uso col dito. Il gap fra pillole adiacenti resta --fg-s1. */
	min-height: 2.75rem;
	padding: .55rem 1rem;
	border: 1px solid var(--fg-grey-200);
	border-radius: 999px;
	background: var(--fg-white);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fg-black);
	transition: background-color var(--fg-transition), border-color var(--fg-transition),
		color var(--fg-transition), transform var(--fg-transition);
}

.fg-404__pill:hover,
.fg-404__pill:focus-visible {
	border-color: var(--fg-orange);
	background: var(--fg-orange);
	color: var(--fg-black);
}

@media (prefers-reduced-motion: no-preference) {
	.fg-404__pill:hover,
	.fg-404__pill:focus-visible {
		transform: translate3d(0, -2px, 0);
	}
}

.fg-404__cerca-box {
	max-width: 44rem;
	margin-inline: auto;
	padding: clamp(var(--fg-s4, 2rem), 5vw, var(--fg-s5, 3rem));
	border: 1px solid var(--fg-grey-200);
	border-top: 4px solid var(--fg-green);
	background: var(--fg-white);
	text-align: center;
}

.fg-404 .fg-404__subtitle {
	margin: 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: clamp(1.25rem, 1.1rem + .8vw, 1.65rem);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--fg-black);
}

.fg-404__cerca-testo {
	margin: var(--fg-s1, .5rem) 0 var(--fg-s3, 1.5rem);
	font-size: .9375rem;
	color: var(--fg-grey-600);
}

.fg-404 .fg-404__cerca-box .fg-search {
	max-width: 32rem;
	margin-inline: auto;
	text-align: left;
}

/* Qui l'etichetta ripeterebbe parola per parola il titolo del riquadro
   ("Oppure cerca nel sito"): resta per gli screen reader, sparisce alla vista. */
.fg-404 .fg-404__cerca-box .fg-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fg-404 .fg-404__aiuto {
	margin: var(--fg-s3, 1.5rem) 0 0;
	font-size: .9375rem;
	color: var(--fg-grey-600);
}

/* Il numero di telefono (o il rimando ai contatti) è un link dentro una riga di
   testo: alto 19 px non è un bersaglio. Diventa un blocco da 44 px senza
   spostare il paragrafo, perché il flusso della riga resta quello del testo. */
.fg-404 .fg-404__aiuto a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: .25rem;
}

/* Il selettore ripete .fg-404 perché la regola mobile qui sopra è
   `.fg-404 .fg-404__testata-inner`: con una sola classe questa non vincerebbe
   e il blocco resterebbe impilato anche su desktop. */
@media (min-width: 900px) {
	.fg-404 .fg-404__testata-inner {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		gap: var(--fg-s6, 4rem);
		align-items: start;
	}
}

/* =============================================================================
   05. PAGINE GENERICHE (page.php)
   ========================================================================== */

.fg-page .fg-page__header {
	padding-block: clamp(var(--fg-s5, 3rem), 7vw, var(--fg-s7, 6rem));
	border-bottom: 4px solid var(--fg-orange);
	background: var(--fg-black);
	color: var(--fg-white);
}

/* Stessa colonna del testo sotto: titolo e contenuto devono partire dallo
   stesso asse verticale, altrimenti la testata "balla". */
.fg-page .fg-page__header-inner {
	max-width: 820px;
	text-align: left;
}

.fg-page .fg-page__title {
	margin: 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3.25rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--fg-white);
}

.fg-page .fg-page__sommario {
	margin: var(--fg-s3, 1.5rem) 0 0;
	color: rgba(255, 255, 255, .86);
}

.fg-page .fg-page__inner {
	max-width: 820px;
}

.fg-page .fg-page__content {
	max-width: 72ch;
}

/* --- Documenti legali generati da Complianz -------------------------------
   Il plugin stampa privacy e cookie policy dentro #cmplz-document con un
   foglio di stile proprio: corpo a 14px, max-width 800px e titoli con il font
   di sistema. Sono pagine del sito come le altre, quindi il documento rientra
   nella tipografia del tema. Si parte da .fg-page per non toccare il banner
   dei cookie né la finestra di gestione del consenso, che usano lo stesso CSS. */
.fg-page #cmplz-document {
	max-width: none;
	font-family: var(--fg-font-body);
	color: var(--fg-grey-900);
}

.fg-page #cmplz-document p,
.fg-page #cmplz-document li,
.fg-page #cmplz-document td,
.fg-page #cmplz-document th {
	font-size: 1rem;
	line-height: 1.7;
}

.fg-page #cmplz-document h2,
.fg-page #cmplz-document h3,
.fg-page #cmplz-document h4 {
	margin-top: var(--fg-s5, 3rem);
	margin-bottom: var(--fg-s2, 1rem);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 85%);
	font-weight: 800;
	line-height: 1.2;
	color: var(--fg-black);
}

.fg-page #cmplz-document h2,
.fg-page #cmplz-document h3 {
	font-size: clamp(1.25rem, 1.1rem + .8vw, 1.65rem);
}

.fg-page #cmplz-document h4 {
	margin-top: var(--fg-s4, 2rem);
	font-size: 1.125rem;
}

.fg-page #cmplz-document ul,
.fg-page #cmplz-document ol {
	margin: var(--fg-s2, 1rem) 0;
	padding-left: 1.25rem;
}

.fg-page #cmplz-document li + li {
	margin-top: var(--fg-s1, .5rem);
}

.fg-page .fg-page__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fg-s1, .5rem);
	margin-top: var(--fg-s5, 3rem);
	padding-top: var(--fg-s3, 1.5rem);
	border-top: 1px solid var(--fg-grey-200);
	font-size: .9375rem;
}

/* =============================================================================
   06. TELEFONO IN ORIZZONTALE
   Con lo schermo alto 390 px la hero (min-height 24rem in main.css) occupava
   quasi due schermate prima del primo contenuto. Regola scopata alle pagine di
   quest'area: `.fg-hero` è un componente di main.css (A1), a cui la
   generalizzazione è segnalata nel report.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
	.page-template-tpl-chi-siamo .fg-hero,
	.page-template-tpl-noleggio .fg-hero,
	.fg-page .fg-hero {
		min-height: 0;
		padding-block: var(--fg-s5, 3rem) var(--fg-s4, 2rem);
	}

	.page-template-tpl-chi-siamo .fg-hero__title,
	.page-template-tpl-noleggio .fg-hero__title {
		font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.125rem);
		margin-bottom: .35em;
	}

	.page-template-tpl-chi-siamo .fg-hero__testo,
	.page-template-tpl-noleggio .fg-hero__testo {
		font-size: .9375rem;
	}

	/* La testata nera di page.php (privacy, cookie) fa lo stesso lavoro della
	   hero: in orizzontale basta la metà del suo padding. */
	.fg-page .fg-page__header {
		padding-block: var(--fg-s4, 2rem);
	}
}

/* ---- Chi siamo: sezione team (foto di gruppo) --------------------------- */
.fg-chisiamo__team-testata { max-width: 60ch; margin-bottom: var(--fg-s5, 3rem); }
.fg-chisiamo__team-foto { margin: 0; }
.fg-chisiamo__team-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fg-radius, 4px);
	box-shadow: var(--fg-shadow, 0 2px 12px rgba(0,0,0,.08));
}