@charset "UTF-8";
/* =============================================================================
   FER-GARDEN RENDENA — main.css
   Unico foglio di stile del tema. Mobile-first, nessun preprocessore,
   nessuna risorsa esterna (font self-hostati in assets/fonts/).

   INDICE
   01. Font self-hostati
   02. Design tokens
   03. Reset e base
   04. Tipografia
   05. Layout: container, section, grid, stack, cluster
   06. Utility e accessibilità
   07. Bottoni
   08. Card
   09. Header, topbar, navigazione, menu mobile
   10. Hero
   11. Servizi
   12. Marchi
   13. CTA contatti
   14. Contenuti editoriali (WYSIWYG, blocchi core)
   15. Box informativi, orari, timeline, galleria, mappa
   16. Breadcrumb, paginazione, ricerca, 404
   17. Gravity Forms
   18. Footer
   19. Print / motion / utility responsive
   ========================================================================== */

/* =============================================================================
   01. FONT SELF-HOSTATI  (SIL Open Font License 1.1 — vedi assets/fonts/README)
   Archivo variabile: titoli, usata condensata (font-stretch) e in grassetto.
   Inter variabile: testo corrente.
   ========================================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 100%;
	font-display: swap;
	src: url('../fonts/archivo-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 62% 100%;
	font-display: swap;
	src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* =============================================================================
   02. DESIGN TOKENS  (definiti dal CONTRACT §3 — non modificare i valori)
   ========================================================================== */

:root {
	/* Colori */
	--fg-orange: #EF731D;
	--fg-orange-dark: #C85D12;
	--fg-green: #45AD30;
	--fg-green-dark: #368A25;
	--fg-black: #111111;
	--fg-grey-900: #2A2A2A;
	--fg-grey-600: #6B6B6B;
	--fg-grey-200: #E4E4E4;
	--fg-grey-100: #F4F4F4;
	--fg-white: #FFFFFF;

	/* Tipografia */
	--fg-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
	--fg-font-body: 'Inter', system-ui, -apple-system, sans-serif;

	/* Scala di spaziatura — ritmo su base 8px (CONTRACT §12.2).
	   È l'unica fonte ammessa per padding e margini dei componenti. */
	--fg-s1: .5rem;    /*   8px */
	--fg-s2: 1rem;     /*  16px */
	--fg-s3: 1.5rem;   /*  24px */
	--fg-s4: 2rem;     /*  32px */
	--fg-s5: 3rem;     /*  48px */
	--fg-s6: 4rem;     /*  64px */
	--fg-s7: 6rem;     /*  96px */
	--fg-s8: 8rem;     /* 128px */

	/* Struttura */
	--fg-container: 1200px;
	--fg-gap: var(--fg-s3);
	--fg-radius: 4px;
	--fg-shadow: 0 2px 12px rgba(0, 0, 0, .08);
	--fg-transition: .2s ease;

	/* Derivati interni (non fanno parte del contratto pubblico) */
	--fg-pad-x: 1.25rem;

	/* Ritmo verticale delle sezioni: unico in tutto il sito, così le pagine
	   scorrono con una cadenza riconoscibile invece che a strappi. */
	--fg-section-y: clamp(var(--fg-s6), 9vw, var(--fg-s8));
	--fg-section-y-tight: clamp(var(--fg-s5), 5vw, var(--fg-s6));
	/* Distanza fra intestazione di sezione e contenuto. */
	--fg-head-gap: clamp(var(--fg-s4), 4vw, var(--fg-s5));

	/* Ombre più decise: il round 1 le aveva quasi invisibili. */
	--fg-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 6px 18px rgba(17, 17, 17, .09);
	--fg-shadow-lg: 0 2px 4px rgba(17, 17, 17, .08), 0 18px 40px rgba(17, 17, 17, .16);
	--fg-shadow-hard: 8px 8px 0 var(--fg-black);

	--fg-header-h: 4.25rem;
	/* Anello di focus. WCAG 2.1 SC 1.4.11 chiede 3:1 contro il colore adiacente:
	   --fg-green #45AD30 si ferma a 2.89:1 su bianco e 2.63:1 su --fg-grey-100,
	   quindi non basta. --fg-green-text #2F7A20 sale a 5.35:1 su bianco,
	   4.86:1 su --fg-grey-100 e 3.53:1 su --fg-black: regge ovunque tranne che
	   sull'arancio, dove sotto si passa al nero. */
	--fg-focus: 3px solid var(--fg-green-text);
	--fg-ease: cubic-bezier(.2, .7, .3, 1);
	--fg-transition-slow: .4s var(--fg-ease);

	/* Banda bicolore del logo, riusabile ovunque serva un separatore. */
	--fg-band: linear-gradient(90deg, var(--fg-orange) 0 55%, var(--fg-green) 55% 100%);
	/* Arancio leggibile come TESTO su fondi chiari: #C85D12 si ferma a 4.17:1
	   su bianco e 3.80:1 su --fg-grey-100, sotto la soglia AA di 4.5:1.
	   Stessa tinta, solo più scura: 5.05:1 su bianco, 4.59:1 su #F4F4F4.
	   Resta un derivato interno: i token del contratto non cambiano valore. */
	--fg-orange-text: #B35310;
	/* Stesso ragionamento sul verde: --fg-green-dark #368A25 si ferma a 4.36:1
	   su bianco, sotto AA. Questa variante è 5.35:1 su bianco e 4.86:1 su
	   --fg-grey-100, e regge il testo bianco quando fa da fondo. */
	--fg-green-text: #2F7A20;
	--fg-stretch-display: 84%;

	/* Larghezze del font variabile Archivo (wdth 62-100%): più il titolo è
	   grande, più lo si condensa. È il carattere del logo e regge bene. */
	--fg-stretch-h1: 68%;
	--fg-stretch-h2: 78%;
	--fg-stretch-h3: 88%;

	/* Scala tipografica fluida. Il salto fra un livello e l'altro deve
	   vedersi: ~68 / 48 / 28 / 21 px sul desktop grande. */
	--fg-fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem);
	--fg-fs-h2: clamp(1.85rem, 1.3rem + 2.1vw, 3rem);
	--fg-fs-h3: clamp(1.3rem, 1.12rem + .8vw, 1.75rem);
	--fg-fs-h4: clamp(1.1rem, 1.04rem + .35vw, 1.3rem);
	--fg-fs-body: clamp(1.0625rem, 1.03rem + .16vw, 1.125rem);  /* 17 → 18px */
	--fg-fs-lead: clamp(1.1875rem, 1.08rem + .5vw, 1.4375rem);
	--fg-fs-small: .9375rem;
	--fg-lh-body: 1.65;

	color-scheme: light;
}

/* =============================================================================
   03. RESET E BASE
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fg-header-h) + 1rem);
}

body {
	margin: 0;
	background-color: var(--fg-white);
	color: var(--fg-grey-900);
	font-family: var(--fg-font-body);
	font-size: var(--fg-fs-body);
	line-height: var(--fg-lh-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

/* Gli ingressi laterali di motion.css (data-fg-reveal="left|right") tengono gli
   elementi traslati di ±1.5rem finché non entrano in vista: quelli spostati a
   destra sporgono oltre il bordo e producono una barra di scorrimento
   orizzontale (misurata: 4px a 320px, 16px a 900px). `clip` la elimina senza
   creare un contenitore di scorrimento, quindi position:sticky e la testata
   fissa continuano a funzionare (overflow:hidden qui li romperebbe). */
body {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	body {
		overflow-x: hidden;
	}
}

body.fg-nav-open {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
	border: 0;
}

figure {
	margin: 0;
}

button,
input,
select,
textarea,
optgroup {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--fg-grey-200);
	margin: 2.5rem 0;
}

a {
	color: var(--fg-orange-text);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--fg-transition);
}

a:hover {
	color: var(--fg-black);
}

:focus-visible {
	outline: var(--fg-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sfondi scuri: il focus deve restare visibile anche su nero.
   --fg-orange su --fg-black = 6.42:1. */
.fg-section--dark :focus-visible,
.fg-header :focus-visible,
.fg-footer :focus-visible,
.fg-hero :focus-visible {
	outline-color: var(--fg-orange);
}

/* Il pannello del mega-menu sta dentro .fg-header ma ha fondo chiaro: la regola
   qui sopra gli imponeva l'anello arancio, che su bianco vale 2.94:1. Le voci
   chiare tornano all'anello standard; l'aside resta scuro e tiene l'arancio. */
.fg-header .fg-mega__item:focus-visible,
.fg-header .fg-mega__inner > :not(.fg-mega__aside) :focus-visible {
	outline-color: var(--fg-green-text);
}

/* Fondi arancio (fascia CTA, bottoni primari a tutta larghezza): il verde
   dell'anello standard vale 1.8:1 sull'arancio, il nero 6.42:1. */
.fg-cta--primary :focus-visible,
.fg-section--orange :focus-visible {
	outline-color: var(--fg-black);
}

::selection {
	background: var(--fg-orange);
	color: var(--fg-black);
}

/* =============================================================================
   04. TIPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.fg-title,
.fg-h1, .fg-h2, .fg-h3 {
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.005em;
	color: var(--fg-black);
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1,
.fg-h1 {
	font-size: var(--fg-fs-h1);
	font-stretch: var(--fg-stretch-h1);
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
	letter-spacing: -.015em;
}

h2,
.fg-h2,
.fg-title {
	font-size: var(--fg-fs-h2);
	font-stretch: var(--fg-stretch-h2);
	font-weight: 800;
	line-height: 1.06;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

h3,
.fg-h3 {
	font-size: var(--fg-fs-h3);
	font-stretch: var(--fg-stretch-h3);
	font-weight: 700;
	line-height: 1.18;
}

h4 {
	font-size: var(--fg-fs-h4);
	font-stretch: var(--fg-stretch-h3);
	line-height: 1.25;
}

h5,
h6 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

p {
	margin: 0 0 1.15em;
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: .875em;
}

blockquote {
	margin: var(--fg-s4) 0;
	padding: var(--fg-s1) 0 var(--fg-s1) var(--fg-s3);
	border-left: 6px solid var(--fg-orange);
	font-size: var(--fg-fs-lead);
	line-height: 1.5;
	color: var(--fg-black);
}

code,
kbd,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

/* Occhiello sopra il titolo: filetto bicolore del logo + maiuscoletto spaziato.
   È l'elemento che apre ogni sezione, quindi deve leggersi da lontano. */
.fg-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--fg-s2);
	margin: 0 0 var(--fg-s2);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--fg-orange-text);
}

.fg-eyebrow::before {
	content: "";
	flex: none;
	width: 2.5rem;
	height: 4px;
	background: var(--fg-band);
}

/* Con display:flex il text-align dei contenitori centrati non basta. */
.fg-text-center .fg-eyebrow,
.fg-section__head--center .fg-eyebrow,
.fg-eyebrow--center {
	justify-content: center;
}

.fg-section--dark .fg-eyebrow,
.fg-hero .fg-eyebrow,
.fg-cta--dark .fg-eyebrow {
	color: var(--fg-orange);
}

.fg-cta--primary .fg-eyebrow {
	color: var(--fg-black);
}

/* Variante storica: il filetto è ormai di serie, qui è solo più lungo. */
.fg-eyebrow--rule::before {
	width: 3.5rem;
}

/* Paragrafo introduttivo.
   `text-wrap: pretty` evita la riga finale con una parola sola, che alle
   larghezze intermedie (600–900px) capitava spesso su questi paragrafi
   corti; dove non è supportato non cambia nulla. */
.fg-lead {
	max-width: 58ch;
	font-size: var(--fg-fs-lead);
	line-height: 1.5;
	text-wrap: pretty;
	color: var(--fg-grey-900);
}

.fg-section--dark .fg-lead,
.fg-hero .fg-lead {
	color: rgba(255, 255, 255, .88);
}

/* Intestazione di sezione */
.fg-section__head {
	max-width: 62ch;
	margin-bottom: var(--fg-head-gap);
}

.fg-section__head--center {
	margin-inline: auto;
	text-align: center;
}

.fg-text-muted {
	color: var(--fg-grey-600);
}

.fg-section--dark .fg-text-muted {
	color: rgba(255, 255, 255, .7);
}

/* =============================================================================
   05. LAYOUT
   ========================================================================== */

.fg-container {
	width: 100%;
	max-width: var(--fg-container);
	margin-inline: auto;
	padding-inline: var(--fg-pad-x);
}

.fg-container--narrow {
	max-width: 820px;
}

.fg-container--wide {
	max-width: 1440px;
}

.fg-section {
	padding-block: var(--fg-section-y);
}

.fg-section--tight {
	padding-block: var(--fg-section-y-tight);
}

/* Sezione senza padding proprio: la usa chi impagina da sé (hero, fasce). */
.fg-section--flush {
	padding-block: 0;
}

.fg-section--flush-top { padding-top: 0; }
.fg-section--flush-bottom { padding-bottom: 0; }

/* Due sezioni consecutive con lo stesso fondo non devono raddoppiare l'aria:
   si leggono come un unico blocco, quindi lo stacco interno è più corto. */
.fg-section--alt + .fg-section--alt,
.fg-section--dark + .fg-section--dark {
	padding-top: var(--fg-section-y-tight);
}

.fg-section--alt {
	background-color: var(--fg-grey-100);
}

.fg-section--dark {
	background-color: var(--fg-black);
	color: rgba(255, 255, 255, .86);
}

.fg-section--dark h1,
.fg-section--dark h2,
.fg-section--dark h3,
.fg-section--dark h4,
.fg-section--dark h5,
.fg-section--dark h6,
.fg-section--dark .fg-title {
	color: var(--fg-white);
}

.fg-section--dark a:not(.fg-btn) {
	color: var(--fg-orange);
}

.fg-section--dark a:not(.fg-btn):hover {
	color: var(--fg-white);
}

/* Griglia responsive: 1 colonna su mobile, poi il numero dichiarato. */
.fg-grid {
	display: grid;
	gap: var(--fg-gap);
	grid-template-columns: 1fr;
}

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

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

	.fg-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- Griglie che non lasciano celle vuote --------------------------------
   I buchi bianchi del round 1 nascevano da griglie con un numero di elementi
   non multiplo delle colonne. Questi strumenti servono a ricomporle. */

/* Colonne automatiche: la griglia decide quante ce ne stanno e le riempie
   tutte. Da preferire quando il numero di elementi non è noto a priori. */
.fg-grid--fill {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.fg-grid--fill-sm {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.fg-grid--fill-lg {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Cinque elementi su tre colonne: 3 + 2, con la seconda riga in due metà
   larghe invece che due terzi e un buco. Base a 6 colonne. */
@media (min-width: 900px) {
	.fg-grid--5 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.fg-grid--5 > * {
		grid-column: span 2;
	}

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

/* Occupazione esplicita di più colonne. */
@media (min-width: 600px) {
	.fg-span-2 { grid-column: span 2; }
}

@media (min-width: 900px) {
	.fg-span-3 { grid-column: span 3; }
}

.fg-span-all { grid-column: 1 / -1; }

/* L'ultimo elemento spaiato si allarga invece di lasciare una cella vuota. */
@media (min-width: 600px) {
	.fg-grid--2.fg-grid--balance > :last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 900px) {
	.fg-grid--3.fg-grid--balance > :last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}
}

.fg-grid--tight { gap: var(--fg-s2); }
.fg-grid--loose { gap: var(--fg-s4); }

/* Due colonne asimmetriche (testo + media) */
.fg-split {
	display: grid;
	gap: clamp(var(--fg-s4), 4vw, var(--fg-s6));
	align-items: center;
}

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

	.fg-split--wide-media {
		grid-template-columns: 5fr 7fr;
	}

	.fg-split--wide-text {
		grid-template-columns: 7fr 5fr;
	}

	.fg-split--reverse > :first-child {
		order: 2;
	}
}

/* Utility flex */
.fg-stack {
	display: flex;
	flex-direction: column;
	gap: var(--fg-gap);
}

.fg-stack--xs { gap: var(--fg-s1); }
.fg-stack--sm { gap: var(--fg-s1); }
.fg-stack--md { gap: var(--fg-s2); }
.fg-stack--lg { gap: var(--fg-s4); }
.fg-stack--xl { gap: var(--fg-s5); }

.fg-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fg-s2);
}

.fg-cluster--sm { gap: var(--fg-s1); }
.fg-cluster--lg { gap: var(--fg-s3); }

.fg-cluster--between {
	justify-content: space-between;
}

.fg-cluster--center {
	justify-content: center;
}

/* =============================================================================
   06. UTILITY E ACCESSIBILITÀ
   ========================================================================== */

.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip link: visibile solo con la tastiera */
.fg-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--fg-orange);
	color: var(--fg-black);
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-120%);
	transition: transform var(--fg-transition);
}

.fg-skip-link:focus,
.fg-skip-link:focus-visible {
	transform: translateY(0);
	color: var(--fg-black);
}

.fg-text-center {
	text-align: center;
}

.fg-text-left {
	text-align: left;
}

.fg-mt-0 { margin-top: 0 !important; }
.fg-mb-0 { margin-bottom: 0 !important; }
.fg-mt-1 { margin-top: 1rem !important; }
.fg-mt-2 { margin-top: 2rem !important; }
.fg-mb-1 { margin-bottom: 1rem !important; }
.fg-mb-2 { margin-bottom: 2rem !important; }

.fg-hidden {
	display: none !important;
}

.fg-nowrap {
	white-space: nowrap;
}

/* Rapporti d'aspetto per i contenitori immagine */
.fg-ratio {
	position: relative;
	overflow: hidden;
	background: var(--fg-grey-100);
}

.fg-ratio > img,
.fg-ratio > iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fg-ratio--4x3 { aspect-ratio: 4 / 3; }
.fg-ratio--3x2 { aspect-ratio: 3 / 2; }
.fg-ratio--1x1 { aspect-ratio: 1 / 1; }
.fg-ratio--16x9 { aspect-ratio: 16 / 9; }

/* Badge / etichette */
.fg-badge {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: 2px;
	background: var(--fg-green);
	color: var(--fg-white);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.6;
}

.fg-badge--orange {
	background: var(--fg-orange);
	color: var(--fg-black);
}

.fg-badge--outline {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--fg-grey-600);
}

/* Barretta decorativa arancio/verde, richiamo del logo */
.fg-rule {
	display: block;
	width: 4.5rem;
	height: 5px;
	margin: 0 0 1.25rem;
	background: linear-gradient(90deg, var(--fg-orange) 0 60%, var(--fg-green) 60% 100%);
}

.fg-text-center > .fg-rule,
.fg-section__head--center .fg-rule {
	margin-inline: auto;
}

/* =============================================================================
   07. BOTTONI
   ========================================================================== */

.fg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 3.25rem;
	padding: var(--fg-s2) var(--fg-s4);
	border: 2px solid transparent;
	border-radius: var(--fg-radius);
	background: var(--fg-grey-100);
	color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	/* Solo transform, opacity, colori e ombra: nessuna proprietà di layout. */
	transition: background-color var(--fg-transition), color var(--fg-transition),
		border-color var(--fg-transition), box-shadow var(--fg-transition),
		transform .18s var(--fg-ease);
}

.fg-btn:hover {
	background: var(--fg-grey-200);
	color: var(--fg-black);
}

/* Il bottone si solleva all'hover e si schiaccia alla pressione. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.fg-btn:hover {
		transform: translateY(-2px);
	}
}

.fg-btn:active {
	transform: translateY(1px) scale(.985);
	box-shadow: none;
}

.fg-btn[disabled],
.fg-btn[aria-disabled="true"] {
	opacity: .55;
	pointer-events: none;
}

/* Arancio pieno: testo nero, contrasto abbondante. */
.fg-btn--primary {
	background: var(--fg-orange);
	border-color: var(--fg-orange);
	color: var(--fg-black);
}

.fg-btn--primary:hover {
	background: var(--fg-orange-dark);
	border-color: var(--fg-orange-text);
	color: var(--fg-white);
}

.fg-btn--green {
	background: var(--fg-green-dark);
	border-color: var(--fg-green-dark);
	color: var(--fg-white);
}

.fg-btn--green:hover {
	background: var(--fg-black);
	border-color: var(--fg-black);
	color: var(--fg-white);
}

.fg-btn--dark {
	background: var(--fg-black);
	border-color: var(--fg-black);
	color: var(--fg-white);
}

.fg-btn--dark:hover {
	background: var(--fg-orange);
	border-color: var(--fg-orange);
	color: var(--fg-black);
}

.fg-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: var(--fg-black);
}

.fg-btn--outline:hover {
	background: var(--fg-black);
	border-color: var(--fg-black);
	color: var(--fg-white);
}

.fg-section--dark .fg-btn--outline,
.fg-hero .fg-btn--outline,
.fg-cta--dark .fg-btn--outline,
.fg-footer .fg-btn--outline {
	color: var(--fg-white);
}

.fg-section--dark .fg-btn--outline:hover,
.fg-hero .fg-btn--outline:hover,
.fg-cta--dark .fg-btn--outline:hover,
.fg-footer .fg-btn--outline:hover {
	background: var(--fg-white);
	border-color: var(--fg-white);
	color: var(--fg-black);
}

.fg-cta--primary .fg-btn--outline {
	color: var(--fg-black);
}

.fg-cta--primary .fg-btn--outline:hover {
	background: var(--fg-black);
	color: var(--fg-white);
}

/* Solo testo + freccia */
.fg-btn--ghost {
	min-height: 0;
	padding: .35rem 0;
	background: transparent;
	border-color: transparent;
	color: var(--fg-orange-text);
	box-shadow: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.fg-btn--ghost:hover {
		transform: none;
	}
}

.fg-btn--ghost::after {
	content: "\2192";
	font-size: 1.1em;
	line-height: 1;
	transition: transform var(--fg-transition);
}

.fg-btn--ghost:hover {
	background: transparent;
	color: var(--fg-black);
}

.fg-btn--ghost:hover::after {
	transform: translateX(.25rem);
}

.fg-section--dark .fg-btn--ghost,
.fg-hero .fg-btn--ghost,
.fg-cta--dark .fg-btn--ghost {
	color: var(--fg-orange);
}

.fg-section--dark .fg-btn--ghost:hover,
.fg-hero .fg-btn--ghost:hover,
.fg-cta--dark .fg-btn--ghost:hover {
	color: var(--fg-white);
}

.fg-btn--sm {
	min-height: 2.5rem;
	padding: var(--fg-s1) var(--fg-s2);
	font-size: .9375rem;
}

.fg-btn--lg {
	min-height: 3.75rem;
	padding: var(--fg-s2) var(--fg-s5);
	font-size: 1.1875rem;
}

.fg-btn--block {
	display: flex;
	width: 100%;
}

@media (max-width: 599px) {
	.fg-btn--block-sm {
		display: flex;
		width: 100%;
	}
}

/* =============================================================================
   08. CARD
   ========================================================================== */

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

/* Filetto arancio in cima, visibile solo al passaggio: la card reagisce
   senza spostare nulla nel flusso (si anima solo transform e opacity). */
.fg-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--fg-band);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: opacity var(--fg-transition), transform .3s var(--fg-ease);
	z-index: 2;
}

.fg-card {
	position: relative;
}

.fg-card:hover::before,
.fg-card:focus-within::before {
	opacity: 1;
	transform: scaleX(1);
}

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

.fg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.fg-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--fg-s1);
	padding: var(--fg-s3);
	flex: 1 1 auto;
}

.fg-card__title {
	margin: 0;
	font-size: var(--fg-fs-h4);
	line-height: 1.2;
}

.fg-card__title a {
	color: inherit;
	text-decoration: none;
}

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

.fg-card__footer {
	margin-top: auto;
	padding-top: var(--fg-s1);
}

.fg-card:hover {
	border-color: var(--fg-orange);
	box-shadow: var(--fg-shadow-lg);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.fg-card:hover {
		transform: translateY(-6px);
	}
}

.fg-card:hover .fg-card__media img {
	transform: scale(1.04);
}

.fg-card:focus-within {
	border-color: var(--fg-orange);
}

/* Card interamente cliccabile tramite il link del titolo. */
.fg-card--link {
	position: relative;
}

.fg-card--link .fg-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fg-card--flat {
	box-shadow: none;
}

.fg-card--dark {
	background: var(--fg-grey-900);
	border-color: #3A3A3A;
	color: rgba(255, 255, 255, .84);
}

.fg-card--dark .fg-card__title {
	color: var(--fg-white);
}

.fg-card--dark .fg-card__text {
	color: rgba(255, 255, 255, .7);
}

/* Banda colorata in alto, richiamo del logo */
.fg-card--accent {
	border-top: 4px solid var(--fg-orange);
}

.fg-card--accent-green {
	border-top: 4px solid var(--fg-green);
}

/* =============================================================================
   09. HEADER, TOPBAR, NAVIGAZIONE, MENU MOBILE, FOOTER-CHROME
   Spostati in assets/css/chrome.css (CONTRACT §12.1): quel foglio è l'unico
   proprietario di testata, navigazione, mega-menu, menu mobile e breadcrumb.
   Le regole del round 1 che stavano qui sono state rimosse perché non erano
   più raggiungibili dal markup attuale (classi .fg-brand, .sub-menu,
   .fg-nav__submenu, .fg-topbar__icon non esistono più) e alcune filtravano
   comunque attraverso: `flex-wrap: wrap` sulla barra contatti la faceva
   andare a capo dentro un'altezza fissa, tagliando a metà telefono ed email
   fra 768 e 1099 px.
   ========================================================================== */

/* =============================================================================
   10. HERO
   ========================================================================== */

.fg-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 62vh, 38rem);
	padding-block: clamp(3rem, 8vw, 6rem);
	background: var(--fg-black);
	color: var(--fg-white);
	overflow: hidden;
	isolation: isolate;
}

.fg-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.fg-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay scuro: garantisce il contrasto del testo bianco. */
.fg-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(17, 17, 17, .55) 0%,
		rgba(17, 17, 17, .68) 55%,
		rgba(17, 17, 17, .88) 100%
	);
}

.fg-hero__inner {
	position: relative;
	width: 100%;
}

.fg-hero__content {
	max-width: 46rem;
}

.fg-hero__title {
	color: var(--fg-white);
	margin-bottom: .5em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.fg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Striscia arancio/verde in fondo alla hero, richiamo del logo */
.fg-hero__stripe {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--fg-orange) 0 55%, var(--fg-green) 55% 100%);
}

/* Hero interna, più bassa, per le pagine di secondo livello */
.fg-hero--page {
	min-height: clamp(15rem, 34vh, 22rem);
	align-items: center;
}

.fg-hero--compact {
	min-height: 0;
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* Hero senza foto: fondo nero pieno */
.fg-hero--plain::after {
	background: none;
}

/* Punti sintetici sotto la hero */
.fg-hero__facts {
	display: grid;
	gap: .75rem 2rem;
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: .9375rem;
	color: rgba(255, 255, 255, .85);
}

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

/* =============================================================================
   11. SERVIZI
   ========================================================================== */

.fg-service-card {
	position: relative;
}

.fg-service-card .fg-card__body {
	gap: .75rem;
}

.fg-service-card__num {
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--fg-green-dark);
}

/* Elenco puntato del tema */
.fg-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .6rem;
}

.fg-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .55rem;
	height: .55rem;
	background: var(--fg-orange);
}

.fg-list--green li::before {
	background: var(--fg-green);
}

.fg-list li:last-child {
	margin-bottom: 0;
}

.fg-list--check li::before {
	content: "";
	top: .35em;
	left: .1rem;
	width: .45rem;
	height: .8rem;
	background: none;
	border-right: 3px solid var(--fg-green-dark);
	border-bottom: 3px solid var(--fg-green-dark);
	transform: rotate(45deg);
}

.fg-section--dark .fg-list--check li::before {
	border-color: var(--fg-green);
}

/* Colonne su elenchi lunghi */
@media (min-width: 600px) {
	.fg-list--cols {
		columns: 2;
		column-gap: 2.5rem;
	}

	.fg-list--cols li {
		break-inside: avoid;
	}
}

/* =============================================================================
   12. MARCHI  (wordmark tipografici, nessun logo di terzi)
   ========================================================================== */

.fg-brands {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (min-width: 900px) {
	.fg-brands {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.fg-brands--dense {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.fg-brand-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 5.25rem;
	padding: 1rem .75rem;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: 76%;
	font-size: clamp(.95rem, .85rem + .35vw, 1.2rem);
	font-weight: 800;
	letter-spacing: .02em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--fg-transition), color var(--fg-transition),
		background-color var(--fg-transition), box-shadow var(--fg-transition);
}

.fg-brand-item:hover,
.fg-brand-item:focus-visible {
	border-color: var(--fg-orange);
	color: var(--fg-orange-text);
	box-shadow: var(--fg-shadow);
}

.fg-section--dark .fg-brand-item {
	background: transparent;
	border-color: rgba(255, 255, 255, .22);
	color: var(--fg-white);
}

.fg-section--dark .fg-brand-item:hover {
	border-color: var(--fg-orange);
	color: var(--fg-orange);
}

.fg-brand-item__cat {
	display: block;
	margin-top: .3rem;
	font-family: var(--fg-font-body);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600);
}

.fg-section--dark .fg-brand-item__cat {
	color: rgba(255, 255, 255, .65);
}

/* Raggruppamento per categoria */
.fg-brands-group {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.fg-brands-group:last-child {
	margin-bottom: 0;
}

.fg-brands-group__title {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.fg-brands-group__title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--fg-grey-200);
}

/* =============================================================================
   13. CTA CONTATTI
   ========================================================================== */

.fg-cta {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.fg-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.fg-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2.5rem;
	}

	.fg-cta__text {
		max-width: 62%;
	}
}

.fg-cta__title {
	margin: 0 0 .4rem;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
	text-transform: uppercase;
}

.fg-cta__text p {
	margin: 0;
}

.fg-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	flex: none;
}

/* Variante arancio: testo nero (l'arancio non passa AA come testo su bianco). */
.fg-cta--primary {
	background: var(--fg-orange);
	color: var(--fg-black);
	border-block: 4px solid var(--fg-green);
}

.fg-cta--primary .fg-cta__title {
	color: var(--fg-black);
}

.fg-cta--primary .fg-btn--primary {
	background: var(--fg-black);
	border-color: var(--fg-black);
	color: var(--fg-white);
}

.fg-cta--primary .fg-btn--primary:hover {
	background: var(--fg-white);
	border-color: var(--fg-white);
	color: var(--fg-black);
}

.fg-cta--primary a:not(.fg-btn) {
	color: var(--fg-black);
}

/* Variante scura */
.fg-cta--dark {
	background: var(--fg-black);
	color: rgba(255, 255, 255, .86);
	border-top: 4px solid var(--fg-orange);
}

.fg-cta--dark .fg-cta__title {
	color: var(--fg-white);
}

.fg-cta--dark a:not(.fg-btn) {
	color: var(--fg-orange);
}

/* =============================================================================
   14. CONTENUTI EDITORIALI
   ========================================================================== */

/* La misura di lettura vale sul blocco autonomo; quando .fg-content è sullo
   stesso div di .fg-container la si applica ai figli, altrimenti la colonna
   si restringerebbe e scivolerebbe al centro, disallineata dal resto. */
.fg-content:not(.fg-container) {
	max-width: 72ch;
}

.fg-container.fg-content > p,
.fg-container.fg-content > ul,
.fg-container.fg-content > ol,
.fg-container.fg-content > blockquote,
.fg-container.fg-content > h2,
.fg-container.fg-content > h3,
.fg-container.fg-content > h4 {
	max-width: 72ch;
}

.fg-content > * + * {
	margin-top: 1.15em;
}

.fg-content h2 {
	margin-top: 2em;
}

.fg-content h3 {
	margin-top: 1.6em;
}

.fg-content ul,
.fg-content ol {
	padding-left: 1.3rem;
}

.fg-content li {
	margin-bottom: .4rem;
}

.fg-content img {
	border-radius: var(--fg-radius);
}

.fg-content table {
	font-size: .9375rem;
}

.fg-content th,
.fg-content td {
	padding: .7rem .9rem;
	border: 1px solid var(--fg-grey-200);
	text-align: left;
}

.fg-content th {
	background: var(--fg-grey-100);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .875rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Tabelle larghe: scorrono nel loro contenitore, non nella pagina. */
.fg-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	margin-top: .5rem;
	font-size: .8125rem;
	color: var(--fg-grey-600);
}

.wp-block-embed iframe,
.wp-block-embed video {
	max-width: 100%;
}

.alignleft,
.alignright {
	float: none;
	margin: 1rem 0;
}

@media (min-width: 600px) {
	.alignleft {
		float: left;
		margin: .35rem 1.5rem 1rem 0;
	}

	.alignright {
		float: right;
		margin: .35rem 0 1rem 1.5rem;
	}
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

/* =============================================================================
   15. BOX INFO, ORARI, TIMELINE, GALLERIA, MAPPA
   ========================================================================== */

/* --- Box informativo con icona --- */
.fg-info {
	display: flex;
	gap: 1rem;
	padding: 1.35rem;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	border-left: 4px solid var(--fg-orange);
	border-radius: var(--fg-radius);
}

.fg-info--green {
	border-left-color: var(--fg-green);
}

.fg-info__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--fg-radius);
	background: var(--fg-grey-100);
	color: var(--fg-orange-text);
}

.fg-info__icon svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

.fg-info__body {
	min-width: 0;
}

.fg-info__title {
	margin: 0 0 .25rem;
	font-size: 1.05rem;
}

.fg-info__body p {
	margin: 0;
	font-size: .9375rem;
	color: var(--fg-grey-600);
}

.fg-info__body a {
	font-weight: 600;
	color: var(--fg-orange-text);
}

.fg-section--dark .fg-info {
	background: var(--fg-grey-900);
	border-color: #3A3A3A;
	border-left-color: var(--fg-orange);
	color: rgba(255, 255, 255, .85);
}

.fg-section--dark .fg-info__icon {
	background: rgba(255, 255, 255, .08);
	color: var(--fg-orange);
}

.fg-section--dark .fg-info__body p {
	color: rgba(255, 255, 255, .72);
}

.fg-section--dark .fg-info__body a {
	color: var(--fg-orange);
}

/* --- Lista orari --- */
.fg-hours {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
}

.fg-hours li,
.fg-hours__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .35rem 1rem;
	padding: .55rem 0;
	border-bottom: 1px dashed var(--fg-grey-200);
}

.fg-hours li:last-child,
.fg-hours__row:last-child {
	border-bottom: 0;
}

.fg-hours__day {
	font-weight: 600;
	color: var(--fg-black);
}

.fg-hours__time {
	color: var(--fg-grey-600);
	font-variant-numeric: tabular-nums;
}

.fg-hours__row--closed .fg-hours__time {
	color: var(--fg-orange-text);
}

/* Orari inseriti come testo libero dal pannello opzioni */
.fg-hours--plain {
	white-space: pre-line;
}

.fg-section--dark .fg-hours li,
.fg-section--dark .fg-hours__row,
.fg-footer .fg-hours li,
.fg-footer .fg-hours__row {
	border-bottom-color: rgba(255, 255, 255, .14);
}

.fg-section--dark .fg-hours__day,
.fg-footer .fg-hours__day {
	color: var(--fg-white);
}

.fg-section--dark .fg-hours__time,
.fg-footer .fg-hours__time {
	color: rgba(255, 255, 255, .72);
}

/* --- Timeline verticale (pagina Chi siamo) --- */
.fg-timeline {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.75rem;
	list-style: none;
}

.fg-timeline::before {
	content: "";
	position: absolute;
	top: .4rem;
	bottom: .4rem;
	left: .32rem;
	width: 2px;
	background: var(--fg-grey-200);
}

.fg-timeline__item {
	position: relative;
	padding-bottom: 2.25rem;
}

.fg-timeline__item:last-child {
	padding-bottom: 0;
}

.fg-timeline__item::before {
	content: "";
	position: absolute;
	top: .4rem;
	left: -1.75rem;
	width: .85rem;
	height: .85rem;
	border-radius: 50%;
	background: var(--fg-orange);
	box-shadow: 0 0 0 4px var(--fg-white);
}

.fg-timeline__item--green::before {
	background: var(--fg-green);
}

.fg-timeline__date {
	display: block;
	margin-bottom: .2rem;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-orange-text);
}

.fg-timeline__title {
	margin: 0 0 .35rem;
	font-size: 1.2rem;
}

.fg-timeline__item p {
	margin: 0;
	color: var(--fg-grey-600);
}

.fg-section--alt .fg-timeline__item::before {
	box-shadow: 0 0 0 4px var(--fg-grey-100);
}

.fg-section--dark .fg-timeline::before {
	background: rgba(255, 255, 255, .2);
}

.fg-section--dark .fg-timeline__item::before {
	box-shadow: 0 0 0 4px var(--fg-black);
}

.fg-section--dark .fg-timeline__date {
	color: var(--fg-orange);
}

.fg-section--dark .fg-timeline__item p {
	color: rgba(255, 255, 255, .74);
}

/* --- Galleria foto --- */
.fg-gallery {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.fg-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 900px) {
	.fg-gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fg-gallery__item {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--fg-radius);
	background: var(--fg-grey-100);
	aspect-ratio: 1 / 1;
}

.fg-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.fg-gallery__item:hover img {
	transform: scale(1.05);
}

@media (min-width: 600px) {
	.fg-gallery__item--wide {
		grid-column: span 2;
		aspect-ratio: 2 / 1;
	}
}

.fg-gallery--tall .fg-gallery__item {
	aspect-ratio: 3 / 4;
}

/* --- Mappa con consenso cookie --- */
.fg-map {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	background: var(--fg-grey-100);
}

.fg-map__frame {
	aspect-ratio: 16 / 10;
}

.fg-map__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.fg-map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .85rem;
	width: 100%;
	min-height: 16rem;
	aspect-ratio: 16 / 10;
	padding: 2rem 1.5rem;
	border: 0;
	background-color: var(--fg-grey-100);
	background-image:
		linear-gradient(45deg, rgba(0, 0, 0, .035) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .035) 75%),
		linear-gradient(45deg, rgba(0, 0, 0, .035) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .035) 75%);
	background-size: 28px 28px;
	background-position: 0 0, 14px 14px;
	color: var(--fg-grey-900);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--fg-transition);
}

.fg-map__placeholder:hover {
	background-color: var(--fg-grey-200);
}

.fg-map__placeholder-title {
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fg-black);
}

.fg-map__placeholder-note {
	max-width: 34ch;
	margin: 0;
	font-size: .875rem;
	color: var(--fg-grey-600);
}

.fg-map__icon {
	width: 2.5rem;
	height: 2.5rem;
	fill: var(--fg-orange-dark);
}

/* =============================================================================
   16. BREADCRUMB, PAGINAZIONE, RICERCA, 404
   ========================================================================== */

.fg-breadcrumb {
	padding-block: .85rem;
	background: var(--fg-grey-100);
	border-bottom: 1px solid var(--fg-grey-200);
	font-size: .8125rem;
	color: var(--fg-grey-600);
}

.fg-breadcrumb ol,
.fg-breadcrumb ul,
.fg-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-breadcrumb li:not(:last-child)::after {
	content: "\203A";
	margin-left: .5rem;
	color: var(--fg-grey-600);
}

.fg-breadcrumb a {
	color: var(--fg-grey-600);
	text-decoration: none;
}

.fg-breadcrumb a:hover {
	color: var(--fg-orange-text);
	text-decoration: underline;
}

.fg-breadcrumb [aria-current="page"] {
	color: var(--fg-black);
	font-weight: 600;
}

/* --- Paginazione --- */
.fg-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.fg-pagination .nav-links,
.fg-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .4rem;
}

.fg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .7rem;
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	background: var(--fg-white);
	color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--fg-transition), border-color var(--fg-transition),
		color var(--fg-transition);
}

.fg-pagination .page-numbers:hover {
	border-color: var(--fg-orange);
	color: var(--fg-orange-text);
}

.fg-pagination .page-numbers.current {
	background: var(--fg-orange);
	border-color: var(--fg-orange);
	color: var(--fg-black);
}

.fg-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* --- Form di ricerca --- */
/* Il form del tema impagina da sé (label + .fg-search__row): tenerlo flex
   metterebbe in riga anche i campi honeypot iniettati dai plugin antispam,
   sfondando la larghezza su mobile. */
.fg-search {
	display: block;
	max-width: 32rem;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	max-width: 32rem;
}

.fg-search__field,
.search-form .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: .8rem 1rem;
	border: 2px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	background: var(--fg-white);
	color: var(--fg-black);
	font-size: 1rem;
	transition: border-color var(--fg-transition);
}

.fg-search__field::placeholder,
.search-form .search-field::placeholder {
	color: var(--fg-grey-600);
	opacity: 1;
}

.fg-search__field:focus,
.search-form .search-field:focus {
	border-color: var(--fg-orange);
	outline: none;
}

.fg-search__field:focus-visible,
.search-form .search-field:focus-visible {
	outline: var(--fg-focus);
	outline-offset: 1px;
}

.fg-search__submit {
	flex: none;
}

/* --- Risultati / archivio --- */
.fg-entry {
	padding-bottom: 1.75rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--fg-grey-200);
}

.fg-entry:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

.fg-entry__title {
	margin-bottom: .35rem;
	font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
}

.fg-entry__title a {
	color: inherit;
	text-decoration: none;
}

.fg-entry__title a:hover {
	color: var(--fg-orange-text);
}

.fg-entry__meta {
	margin-bottom: .6rem;
	font-size: .8125rem;
	color: var(--fg-grey-600);
}

/* --- 404 --- */
.fg-404 {
	padding-block: clamp(3.5rem, 9vw, 7rem);
	text-align: center;
}

.fg-404__code {
	display: block;
	margin: 0 0 .35rem;
	font-family: var(--fg-font-display);
	font-stretch: 66%;
	font-size: clamp(5rem, 3rem + 14vw, 12rem);
	font-weight: 800;
	line-height: .85;
	letter-spacing: -.02em;
	color: var(--fg-orange);
}

.fg-404__title {
	margin-bottom: .6rem;
}

.fg-404 .fg-lead {
	margin-inline: auto;
}

.fg-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .85rem;
	margin-top: 2rem;
}

.fg-404__links {
	margin-top: 2.75rem;
	text-align: left;
}

/* =============================================================================
   17. GRAVITY FORMS
   ========================================================================== */

.gform_wrapper {
	max-width: 46rem;
}

.gform_wrapper form {
	margin: 0;
}

.gform_wrapper .gform_heading {
	margin-bottom: 1.5rem;
}

.gform_wrapper .gform_title {
	font-size: 1.5rem;
}

.gform_wrapper .gform_required_legend {
	font-size: .8125rem;
	color: var(--fg-grey-600);
}

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.gform_wrapper .gform_fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gform_wrapper .gfield {
		grid-column: span 2;
	}

	.gform_wrapper .gfield--width-half {
		grid-column: span 1;
	}
}

.gform_wrapper .gfield {
	min-width: 0;
}

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fg-black);
}

.gform_wrapper .gfield_required {
	margin-left: .2rem;
	color: var(--fg-orange-text);
}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules {
	margin-top: .3rem;
	font-size: .8125rem;
	color: var(--fg-grey-600);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	max-width: 100%;
	padding: .75rem .9rem;
	background: var(--fg-white);
	border: 2px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	color: var(--fg-black);
	font-family: var(--fg-font-body);
	font-size: 1rem;
	line-height: 1.45;
	transition: border-color var(--fg-transition), box-shadow var(--fg-transition);
}

.gform_wrapper textarea {
	min-height: 9rem;
	resize: vertical;
}

.gform_wrapper select {
	appearance: none;
	padding-right: 2.5rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--fg-grey-900) 50%),
		linear-gradient(135deg, var(--fg-grey-900) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.gform_wrapper input:hover,
.gform_wrapper select:hover,
.gform_wrapper textarea:hover {
	border-color: #CFCFCF;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--fg-orange);
	outline: none;
	box-shadow: 0 0 0 3px rgba(239, 115, 29, .22);
}

.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
	outline: var(--fg-focus);
	outline-offset: 1px;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--fg-grey-600);
	opacity: 1;
}

/* Checkbox e radio, compresa la spunta privacy */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
}

.gform_wrapper .gchoice input[type="checkbox"],
.gform_wrapper .gchoice input[type="radio"] {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .25rem;
	accent-color: var(--fg-orange-text);
}

.gform_wrapper .gchoice label {
	font-family: var(--fg-font-body);
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-grey-900);
}

.gform_wrapper .gchoice label a {
	font-weight: 600;
}

/* Consenso privacy: riquadro dedicato, ben distinguibile */
.gform_wrapper .gfield--type-consent,
.gform_wrapper .gfield-privacy {
	padding: 1rem 1.15rem;
	background: var(--fg-grey-100);
	border-left: 4px solid var(--fg-green);
	border-radius: var(--fg-radius);
}

.gform_wrapper .gfield--type-consent .gfield_label {
	font-size: .8125rem;
}

.gform_wrapper .gfield_consent_description {
	max-height: 9rem;
	overflow-y: auto;
	margin-top: .6rem;
	padding: .6rem .75rem;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	font-size: .8125rem;
	color: var(--fg-grey-600);
}

/* Pulsante di invio */
.gform_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
	padding: 0;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .95rem 2rem;
	background: var(--fg-orange);
	border: 2px solid var(--fg-orange);
	border-radius: var(--fg-radius);
	color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--fg-transition), border-color var(--fg-transition),
		color var(--fg-transition);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover {
	background: var(--fg-orange-dark);
	border-color: var(--fg-orange-text);
	color: var(--fg-white);
}

.gform_wrapper .gform_ajax_spinner {
	margin-left: .75rem;
}

/* Errori */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
	margin-bottom: 1.5rem;
	padding: 1rem 1.15rem;
	background: #FCEDE7;
	border: 1px solid var(--fg-orange-dark);
	border-left-width: 4px;
	border-radius: var(--fg-radius);
	color: #7A2E00;
	font-size: .9375rem;
	font-weight: 500;
}

.gform_wrapper .gform_validation_errors h2 {
	margin: 0 0 .25rem;
	font-size: 1rem;
	color: #7A2E00;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: var(--fg-orange-text);
	background: #FEF8F5;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin-top: .35rem;
	padding: .4rem .6rem;
	background: #FCEDE7;
	border-left: 3px solid var(--fg-orange-dark);
	color: #7A2E00;
	font-size: .8125rem;
	font-weight: 500;
}

/* Conferma */
.gform_confirmation_wrapper,
.gform_confirmation_message {
	padding: 1.35rem 1.5rem;
	background: #EDF7EA;
	border: 1px solid var(--fg-green-dark);
	border-left-width: 4px;
	border-radius: var(--fg-radius);
	color: #1F4D16;
	font-size: 1.0625rem;
}

/* Honeypot / campi nascosti */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden {
	position: absolute !important;
	left: -9999px;
}

/* Barra di avanzamento multi-step */
.gform_wrapper .gf_progressbar {
	overflow: hidden;
	background: var(--fg-grey-200);
	border-radius: var(--fg-radius);
}

.gform_wrapper .gf_progressbar_percentage {
	padding: .3rem .6rem;
	background: var(--fg-green-dark);
	color: var(--fg-white);
	font-size: .8125rem;
}

/* Form dentro una sezione scura */
.fg-section--dark .gform_wrapper .gfield_label,
.fg-section--dark .gform_wrapper .gchoice label {
	color: var(--fg-white);
}

.fg-section--dark .gform_wrapper .gfield_description {
	color: rgba(255, 255, 255, .7);
}

.fg-section--dark .gform_wrapper .gfield--type-consent {
	background: rgba(255, 255, 255, .06);
}

/* =============================================================================
   18. FOOTER
   ========================================================================== */

.fg-footer {
	background: var(--fg-black);
	color: rgba(255, 255, 255, .78);
	font-size: .9375rem;
	border-top: 4px solid var(--fg-orange);
}

.fg-footer a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.fg-footer a:hover {
	color: var(--fg-orange);
	text-decoration: underline;
}

.fg-footer__main {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.fg-footer__cols {
	display: grid;
	gap: 2.25rem;
	grid-template-columns: 1fr;
}

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

@media (min-width: 900px) {
	.fg-footer__cols {
		grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
		gap: 2.5rem;
	}
}

.fg-footer__title {
	margin: 0 0 1rem;
	color: var(--fg-white);
	font-size: .9375rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.fg-footer__title::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 3px;
	margin-top: .55rem;
	background: var(--fg-orange);
}

.fg-footer__brand img {
	max-height: 3.25rem;
	width: auto;
	margin-bottom: 1rem;
}

.fg-footer__legalinfo {
	margin-top: 1rem;
	font-size: .8125rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .6);
}

.fg-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-footer__menu li {
	margin-bottom: .55rem;
}

.fg-footer__menu li:last-child {
	margin-bottom: 0;
}

.fg-footer__menu .current-menu-item > a {
	color: var(--fg-orange);
}

.fg-footer address {
	font-style: normal;
	line-height: 1.7;
}

/* Social */
.fg-social {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--fg-radius);
	color: var(--fg-white);
	transition: background-color var(--fg-transition), border-color var(--fg-transition),
		color var(--fg-transition);
}

.fg-social a:hover {
	background: var(--fg-orange);
	border-color: var(--fg-orange);
	color: var(--fg-black);
	text-decoration: none;
}

.fg-social svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

/* Riga legale */
.fg-footer__bar {
	padding-block: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .8125rem;
	color: rgba(255, 255, 255, .6);
}

.fg-footer__bar-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .6rem 1.5rem;
}

@media (min-width: 900px) {
	.fg-footer__bar-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.fg-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Striscia arancio/verde: chiude la pagina come nel logo */
.fg-footer__stripe {
	height: 6px;
	background: linear-gradient(90deg, var(--fg-orange) 0 55%, var(--fg-green) 55% 100%);
}

/* =============================================================================
   19. PRINT / MOTION / RESPONSIVE
   ========================================================================== */

@media (max-width: 599px) {
	.fg-hide-sm {
		display: none !important;
	}
}

@media (min-width: 900px) {
	.fg-hide-lg {
		display: none !important;
	}
}

@media (max-width: 899px) {
	.fg-only-lg {
		display: none !important;
	}
}

/* Rispetta la preferenza di sistema per il movimento ridotto. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.fg-card:hover .fg-card__media img,
	.fg-gallery__item:hover img {
		transform: none;
	}
}

/* Contrasto elevato: bordi sempre visibili */
@media (prefers-contrast: more) {
	.fg-card,
	.fg-brand-item,
	.gform_wrapper input,
	.gform_wrapper select,
	.gform_wrapper textarea {
		border-color: var(--fg-grey-900);
	}
}

@media print {
	.fg-header,
	.fg-mobile-nav,
	.fg-footer__main,
	.fg-footer__stripe,
	.fg-breadcrumb,
	.fg-cta,
	.fg-social,
	.fg-burger,
	.fg-skip-link,
	.fg-map__placeholder,
	.gform_footer,
	.fg-pagination {
		display: none !important;
	}

	body {
		background: #FFF;
		color: #000;
		font-size: 11pt;
	}

	.fg-section,
	.fg-section--alt,
	.fg-section--dark {
		padding-block: 1rem;
		background: #FFF !important;
		color: #000 !important;
	}

	.fg-section--dark h1,
	.fg-section--dark h2,
	.fg-section--dark h3,
	.fg-section--dark .fg-title {
		color: #000 !important;
	}

	.fg-hero {
		min-height: 0;
		padding-block: 1rem;
		background: #FFF;
		color: #000;
	}

	.fg-hero__media,
	.fg-hero::after,
	.fg-hero__stripe {
		display: none;
	}

	.fg-hero__title,
	.fg-hero .fg-lead {
		color: #000;
		text-shadow: none;
	}

	.fg-card {
		box-shadow: none;
		border-color: #999;
		break-inside: avoid;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.fg-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.fg-footer {
		background: #FFF;
		color: #000;
		border-top: 1px solid #000;
	}

	.fg-footer a {
		color: #000;
	}
}

/* =============================================================================
   20. INTEGRAZIONE CON IL MARKUP REALE DEI TEMPLATE
   I template usano nomi di classe in italiano (fg-hero__titolo, fg-cta__azioni,
   fg-servizio-card…) mentre le sezioni 01-19 erano state scritte con nomi in
   inglese. Questa sezione allinea il CSS al markup effettivamente prodotto e
   completa i blocchi che non avevano ancora stili.
   ========================================================================== */

/* --- 20.1 Utility di base ------------------------------------------------- */

/* Dentro uno stack i margini verticali si sommano al gap: li azzeriamo. */
.fg-stack > * {
	margin-block: 0;
}

/* Blocchi introduttivi di sezione: eyebrow + titolo + lead ravvicinati. */
.fg-servizi-home__intro,
.fg-perche__intro,
.fg-marchi-home__intro,
.fg-info-pratiche__intro,
.fg-noleggio__intro-testo {
	gap: .4rem;
	max-width: 68ch;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* --- 20.2 HERO ------------------------------------------------------------ */

.fg-hero__titolo,
.fg-page-hero__titolo {
	color: var(--fg-white);
	margin-bottom: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.fg-hero__testo,
.fg-hero__lead {
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.fg-hero__eyebrow {
	color: var(--fg-orange);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.fg-hero__content {
	gap: .55rem;
}

.fg-hero__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* Il div overlay del template è inerte: la velatura la disegna .fg-hero::after. */
.fg-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.fg-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero senza foto: fondo nero pieno, nessun gradiente. */
.fg-hero--solo-testo::after {
	background: none;
}

.fg-hero--solo-testo {
	min-height: clamp(14rem, 30vh, 20rem);
	align-items: center;
}

/* Varianti compatte usate dalle pagine interne. */
.fg-hero--compatta,
.fg-hero--compatto,
.fg-hero--servizio {
	min-height: clamp(18rem, 42vh, 26rem);
	align-items: flex-end;
}

/* Hero testuale delle pagine senza foto (es. Contatti). */
.fg-page-hero {
	position: relative;
	border-bottom: 4px solid var(--fg-orange);
}

.fg-page-hero--compact {
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.fg-page-hero .fg-lead {
	max-width: 62ch;
}

/* --- 20.3 HEADER: logo, menu, hamburger ----------------------------------- */

.fg-header__bar {
	position: relative;
}

.fg-header__brand {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
}

.fg-header__logo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.fg-header__logo-img,
.fg-header__brand img,
.fg-header .custom-logo {
	width: auto;
	max-height: 2.6rem;
	object-fit: contain;
}

.fg-header__logo-text {
	font-family: var(--fg-font-display);
	font-stretch: 76%;
	font-weight: 800;
	font-size: clamp(1.05rem, .9rem + .9vw, 1.5rem);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--fg-white);
}

@media (min-width: 900px) {
	.fg-header__logo-img,
	.fg-header__brand img,
	.fg-header .custom-logo {
		max-height: 3.4rem;
	}
}

/* Il logo si rimpicciolisce quando la pagina scorre. */
.fg-header.is-scrolled .fg-header__logo-img,
.fg-header.is-scrolled .fg-header__brand img,
.fg-header.is-scrolled .custom-logo {
	max-height: 2.4rem;
	transition: max-height var(--fg-transition);
}

/* Voci di menu: mai a capo, spaziatura più regolare. */
.fg-nav__list > li {
	display: flex;
	align-items: center;
}

.fg-nav__list > li > a {
	white-space: nowrap;
	padding-inline: .7rem;
}

@media (min-width: 900px) and (max-width: 1099px) {
	.fg-nav__list > li > a {
		padding-inline: .5rem;
		font-size: .875rem;
		letter-spacing: .03em;
	}
}

/* Bottone di apertura sottomenu: unica freccia, niente doppio indicatore. */
.fg-nav__list .menu-item-has-children > a::after {
	content: none;
}

.fg-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	margin-left: -.3rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--fg-radius);
	color: rgba(255, 255, 255, .88);
}

.fg-nav__toggle:hover {
	color: var(--fg-orange);
}

.fg-nav__toggle-icon {
	display: block;
	width: .42em;
	height: .42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform var(--fg-transition);
}

.fg-nav__toggle[aria-expanded="true"] .fg-nav__toggle-icon {
	transform: translateY(.1em) rotate(-135deg);
}

/* Hamburger (markup: bottone + un solo span icona) */
.fg-header__hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: var(--fg-radius);
	color: var(--fg-white);
	transition: border-color var(--fg-transition), color var(--fg-transition);
}

.fg-header__hamburger:hover {
	border-color: var(--fg-orange);
	color: var(--fg-orange);
}

.fg-header__hamburger-icon {
	position: relative;
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	transition: background-color var(--fg-transition);
}

.fg-header__hamburger-icon::before,
.fg-header__hamburger-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--fg-transition);
}

.fg-header__hamburger-icon::before {
	top: -6px;
}

.fg-header__hamburger-icon::after {
	top: 6px;
}

.fg-header__hamburger[aria-expanded="true"] .fg-header__hamburger-icon {
	background: transparent;
}

.fg-header__hamburger[aria-expanded="true"] .fg-header__hamburger-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.fg-header__hamburger[aria-expanded="true"] .fg-header__hamburger-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 900px) {
	.fg-header__hamburger {
		display: none;
	}
}

/* --- 20.4 Pannello di navigazione mobile ---------------------------------- */

body.fg-menu-open {
	overflow: hidden;
}

@media (max-width: 899px) {
	/* Il pannello chiuso non viene spostato fuori schermo in orizzontale:
	   un elemento fixed traslato a destra allargherebbe l'area di
	   scorrimento del documento. Si apre con dissolvenza + discesa. */
	.fg-nav {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--fg-header-h) + 3px);
		bottom: 0;
		z-index: 90;
		padding: .5rem var(--fg-pad-x) 3rem;
		background: var(--fg-black);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-.75rem);
		transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
	}

	.fg-nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}

	.fg-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.fg-nav__list > li {
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	.fg-nav__list > li > a {
		flex: 1 1 auto;
		padding: .95rem 0;
		font-size: 1.15rem;
		border-bottom: 0;
	}

	.fg-nav__list > li > a:hover,
	.fg-nav__list > li > a:focus-visible {
		border-bottom-color: transparent;
	}

	.fg-nav__toggle {
		width: 3rem;
		height: 3rem;
		margin-left: 0;
		font-size: 1.35rem;
	}

	.fg-nav__list .sub-menu,
	.fg-nav__submenu {
		position: static;
		display: none;
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0 0 .75rem;
		background: transparent;
		border-top: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.fg-nav__list li.is-open > .sub-menu,
	.fg-nav__list li.is-open > .fg-nav__submenu {
		display: block;
	}

	.fg-nav__list .sub-menu a,
	.fg-nav__submenu a {
		padding: .6rem 0 .6rem 1rem;
		border-left-width: 3px;
		font-size: 1rem;
	}
}

/* --- 20.5 Card servizio (home + template-part) ---------------------------- */

.fg-servizio-card {
	position: relative;
	height: 100%;
}

/* Il link avvolge tutta la card nella home: non deve essere sottolineato. */
.fg-servizio-card > .fg-servizio-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.fg-servizio-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--fg-grey-100);
	aspect-ratio: 4 / 3;
}

.fg-servizio-card__media img,
.fg-servizio-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.fg-servizio-card:hover .fg-servizio-card__img {
	transform: scale(1.04);
}

.fg-servizio-card__corpo,
.fg-servizio-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
	padding: 1.35rem;
}

.fg-servizio-card__titolo {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--fg-black);
}

.fg-servizio-card__titolo a {
	color: inherit;
	text-decoration: none;
}

.fg-servizio-card:hover .fg-servizio-card__titolo,
.fg-servizio-card:focus-within .fg-servizio-card__titolo {
	color: var(--fg-orange-text);
}

.fg-servizio-card__sommario {
	display: block;
	margin: 0;
	color: var(--fg-grey-600);
	font-size: .9375rem;
	line-height: 1.55;
}

.fg-servizio-card__cta {
	margin-top: auto;
	padding-top: .5rem;
}

/* Card compatta: solo titolo. */
.fg-servizio-card--compatta .fg-servizio-card__corpo,
.fg-servizio-card--compatta .fg-servizio-card__body {
	padding: 1.1rem 1.25rem;
}

/* Nelle griglie le card devono avere la stessa altezza. */
.fg-servizi-home__lista > .fg-card,
.fg-servizi-griglia > .fg-card,
.fg-servizi-lista > .fg-card {
	height: 100%;
}

.fg-servizi-home__tutti,
.fg-marchi-home__tutti,
.fg-servizio__altri-link {
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}

/* --- 20.6 Info box (icona + titolo + testo) ------------------------------- */

.fg-info-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	height: 100%;
}

.fg-info-box__icona-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: .35rem;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	color: var(--fg-green-dark);
	flex: none;
}

.fg-section--alt .fg-info-box__icona-wrap {
	background: var(--fg-white);
}

.fg-section--dark .fg-info-box__icona-wrap {
	background: transparent;
	border-color: rgba(255, 255, 255, .25);
	color: var(--fg-green);
}

.fg-info-box__icona {
	width: 1.5rem;
	height: 1.5rem;
}

.fg-info-box__titolo {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
}

.fg-info-box__testo {
	margin: 0;
	color: var(--fg-grey-600);
	font-size: .9375rem;
	line-height: 1.6;
}

.fg-section--dark .fg-info-box__testo {
	color: rgba(255, 255, 255, .75);
}

.fg-info-box__link {
	margin-top: auto;
	padding-top: .35rem;
}

/* --- 20.7 Numeri ---------------------------------------------------------- */

.fg-numeri__lista,
.fg-numeri {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-numeri__voce,
.fg-numeri__item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.fg-numeri__item {
	padding: 1.35rem;
}

.fg-numeri__valore {
	display: block;
	margin: 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--fg-orange);
}

.fg-numeri__item .fg-numeri__valore {
	color: var(--fg-orange-text);
}

.fg-numeri__etichetta,
.fg-numeri__label {
	display: block;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .78);
}

.fg-numeri__item .fg-numeri__label {
	color: var(--fg-grey-600);
}

/* --- 20.8 Marchi in home -------------------------------------------------- */

/* Il contenitore ospita la griglia .fg-brands: non deve essere a sua volta
   una griglia, altrimenti l'elenco occupa una sola colonna. */
.fg-marchi-home__lista {
	display: block;
	margin: 0;
	padding: 0;
}

/* Ripiego wordmark quando un marchio non ha il logo. */
ul.fg-marchi-home__lista {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}

@media (min-width: 600px) {
	ul.fg-marchi-home__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	ul.fg-marchi-home__lista {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.fg-marchi-home__voce {
	display: flex;
}

.fg-wordmark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 4.25rem;
	padding: .85rem .6rem;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: 76%;
	font-size: clamp(.9rem, .82rem + .3vw, 1.1rem);
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
}

/* --- 20.9 Griglia marchi con loghi ufficiali ------------------------------ */
/* I 22 loghi hanno proporzioni molto diverse (da 198x42 a 400x179):
   si normalizza l'altezza ottica dando a ogni logo la stessa cassa. */

.fg-brands .fg-brand-item {
	position: relative;
	min-height: 6.25rem;
	padding: 1.15rem 1.25rem;
	gap: .35rem;
}

.fg-brands .fg-brand-item img {
	width: 100%;
	max-width: 11rem;
	height: 3rem;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

/* I marchi con marchio denominativo lungo restano leggibili. */
.fg-brands .fg-brand-item__cat {
	margin-top: .4rem;
}

.fg-brands .fg-brand-item__ext,
.fg-brands .fg-brand__ext {
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: .75rem;
	height: .75rem;
	opacity: .22;
	transition: opacity var(--fg-transition);
}

.fg-brands .fg-brand-item:hover .fg-brand-item__ext,
.fg-brands .fg-brand-item:focus-visible .fg-brand-item__ext {
	opacity: 1;
}

/* Loghi su fondo scuro: la maggior parte è nera, serve una cassa chiara. */
.fg-section--dark .fg-brands .fg-brand-item {
	background: var(--fg-white);
	border-color: var(--fg-grey-200);
}

.fg-brands__gruppo + .fg-brands__gruppo,
.fg-brands-group + .fg-brands-group {
	margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Navigazione per reparto in cima alla pagina marchi */
.fg-marchi__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- 20.10 CTA contatti --------------------------------------------------- */

.fg-cta__titolo {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
	text-transform: uppercase;
}

.fg-cta--dark .fg-cta__titolo {
	color: var(--fg-white);
}

.fg-cta--primary .fg-cta__titolo {
	color: var(--fg-black);
}

.fg-cta__descrizione {
	margin: 0;
	max-width: 62ch;
}

.fg-cta__testo {
	gap: .6rem;
}

.fg-cta__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	flex: none;
}

@media (min-width: 900px) {
	.fg-cta__testo {
		max-width: 62%;
	}
}

/* --- 20.11 Contenuti editoriali: alias di .fg-content ---------------------- */

/* La misura di lettura si limita sui blocchi di testo, non sul contenitore:
   .fg-prosa è spesso applicata allo stesso div di .fg-container e ridurne la
   larghezza lo farebbe scivolare al centro, disallineandolo dal resto. */
.fg-prose:not(.fg-container),
.fg-entry-content:not(.fg-container),
.fg-contenuto-pagina:not(.fg-container),
.fg-chisiamo__editor,
.fg-page__content {
	max-width: 72ch;
}

.fg-prosa > p,
.fg-prosa > ul,
.fg-prosa > ol,
.fg-prosa > blockquote,
.fg-prose > p,
.fg-prose > ul,
.fg-prose > ol,
.fg-entry-content > p,
.fg-contenuto-pagina > p {
	max-width: 72ch;
}


.fg-prosa > * + *,
.fg-prose > * + *,
.fg-entry-content > * + *,
.fg-contenuto-pagina > * + * {
	margin-top: 1.15em;
}

.fg-prosa h2,
.fg-prose h2,
.fg-entry-content h2,
.fg-contenuto-pagina h2 {
	margin-top: 2.25em;
}

.fg-prosa h3,
.fg-prose h3,
.fg-entry-content h3,
.fg-contenuto-pagina h3 {
	margin-top: 1.8em;
}

/* Elenco puntato del tema (alias di .fg-list) */
.fg-elenco {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-elenco > li {
	position: relative;
	margin-bottom: .6rem;
	padding-left: 1.6rem;
}

.fg-elenco > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .55rem;
	height: .55rem;
	background: var(--fg-orange);
}

.fg-elenco > li:last-child {
	margin-bottom: 0;
}

.fg-section--dark .fg-elenco > li::before {
	background: var(--fg-orange);
}

/* --- 20.12 Timeline (alias italiani) -------------------------------------- */

.fg-timeline__anno {
	margin: 0 0 .2rem;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-orange-text);
}

.fg-timeline__titolo {
	margin: 0 0 .4rem;
	font-size: 1.2rem;
}

.fg-timeline__testo {
	margin: 0;
	color: var(--fg-grey-600);
}

.fg-section--dark .fg-timeline__anno {
	color: var(--fg-orange);
}

.fg-section--dark .fg-timeline__testo {
	color: rgba(255, 255, 255, .78);
}

/* --- 20.13 Galleria ------------------------------------------------------- */

.fg-galleria {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-galleria__item {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--fg-grey-100);
	border-radius: var(--fg-radius);
	aspect-ratio: 4 / 3;
}

.fg-galleria__item img,
.fg-galleria__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.fg-galleria__item:hover img {
	transform: scale(1.04);
}

.fg-galleria__item figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .6rem .8rem;
	background: linear-gradient(180deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, .8));
	color: var(--fg-white);
	font-size: .8125rem;
	line-height: 1.4;
}

/* --- 20.14 FAQ ------------------------------------------------------------ */

.fg-faq {
	max-width: 72ch;
	border-top: 1px solid var(--fg-grey-200);
}

.fg-faq__item {
	border-bottom: 1px solid var(--fg-grey-200);
}

.fg-faq__domanda {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: 1rem 0;
	cursor: pointer;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--fg-black);
	list-style: none;
}

.fg-faq__domanda::-webkit-details-marker {
	display: none;
}

.fg-faq__domanda::before {
	content: "";
	flex: none;
	width: .5rem;
	height: .5rem;
	margin-top: .45em;
	border-right: 2px solid var(--fg-orange);
	border-bottom: 2px solid var(--fg-orange);
	transform: rotate(45deg);
	transition: transform var(--fg-transition);
}

.fg-faq__item[open] > .fg-faq__domanda::before {
	transform: rotate(-135deg);
	margin-top: .7em;
}

.fg-faq__domanda:hover {
	color: var(--fg-orange-text);
}

.fg-faq__risposta {
	padding: 0 0 1.15rem 1.25rem;
	color: var(--fg-grey-600);
}

/* --- 20.15 Noleggio ------------------------------------------------------- */

.fg-noleggio__card {
	height: 100%;
	padding: 1.4rem;
	gap: .6rem;
}

.fg-noleggio__card h3 {
	margin: 0 0 .35rem;
	font-size: 1.2rem;
}

.fg-noleggio__esempi {
	margin-top: .75rem;
	font-size: .9375rem;
}

.fg-noleggio__passi {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.fg-noleggio__passo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .3rem;
}

.fg-noleggio__passo-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: .35rem;
	background: var(--fg-orange);
	border-radius: var(--fg-radius);
	color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: 1.15rem;
	font-weight: 800;
}

.fg-noleggio__passo-titolo {
	margin: 0;
	font-size: 1.1rem;
}

.fg-noleggio__passo-testo {
	margin: 0;
	color: var(--fg-grey-600);
	font-size: .9375rem;
}

.fg-noleggio__box {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	gap: 1rem;
}

.fg-noleggio__box h2 {
	margin: 0;
}

.fg-noleggio__box-azioni {
	margin-top: .35rem;
}

/* --- 20.16 Pagina contatti ------------------------------------------------ */

.fg-contatti {
	align-items: start;
}

@media (min-width: 900px) {
	.fg-contatti {
		grid-template-columns: 1.35fr 1fr;
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

.fg-contatti__nota {
	max-width: 62ch;
	color: var(--fg-grey-600);
}

.fg-recapiti {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 1.1rem;
}

.fg-recapiti__voce {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--fg-grey-200);
}

.fg-recapiti__voce:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.fg-recapiti__label {
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-grey-600);
}

.fg-recapiti__valore {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--fg-black);
}

a.fg-recapiti__valore {
	color: var(--fg-orange-text);
	text-decoration: none;
}

a.fg-recapiti__valore:hover {
	color: var(--fg-black);
	text-decoration: underline;
}

.fg-recapiti__orari {
	font-weight: 400;
	line-height: 1.6;
}

.fg-contatti__social {
	margin-top: 1.5rem;
}

.fg-contatti__negozio {
	margin-top: 1.5rem;
	padding: 1.35rem;
	gap: .5rem;
}

.fg-dati-fiscali__lista {
	display: grid;
	gap: .35rem 1.5rem;
	margin: 0;
	max-width: 46rem;
}

@media (min-width: 600px) {
	.fg-dati-fiscali__lista {
		grid-template-columns: minmax(10rem, 14rem) 1fr;
	}
}

.fg-dati-fiscali__lista dt {
	margin: 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-grey-600);
	align-self: center;
}

.fg-dati-fiscali__lista dd {
	margin: 0 0 .6rem;
	align-self: center;
}

@media (min-width: 600px) {
	.fg-dati-fiscali__lista dd {
		margin-bottom: 0;
	}
}

/* Modulo Gravity Forms: il tema "orbital" impone le proprie variabili con
   specificità di id, quindi vanno forzate. */
.fg-form .gform-theme,
.fg-form .gform_wrapper {
	--gf-color-primary: #EF731D !important;
	--gf-color-primary-rgb: 239, 115, 29 !important;
	--gf-color-primary-contrast: #111111 !important;
	--gf-color-primary-contrast-rgb: 17, 17, 17 !important;
	--gf-color-primary-darker: #C85D12 !important;
	--gf-color-primary-lighter: #F58C42 !important;
	--gf-ctrl-btn-bg-color-primary: #EF731D !important;
	--gf-ctrl-btn-color-primary: #111111 !important;
	--gf-ctrl-btn-border-color-primary: #EF731D !important;
	--gf-ctrl-btn-bg-color-hover-primary: #C85D12 !important;
	--gf-ctrl-btn-color-hover-primary: #FFFFFF !important;
	--gf-ctrl-btn-border-color-hover-primary: #C85D12 !important;
	--gf-local-radius: var(--fg-radius) !important;
}

.fg-form input[type="submit"].fg-btn,
.fg-form button.fg-btn {
	background-color: var(--fg-orange) !important;
	border-color: var(--fg-orange) !important;
	color: var(--fg-black) !important;
}

.fg-form input[type="submit"].fg-btn:hover,
.fg-form button.fg-btn:hover {
	background-color: var(--fg-orange-dark) !important;
	border-color: var(--fg-orange-dark) !important;
	color: var(--fg-white) !important;
}

.fg-form-fallback {
	padding: 1.35rem 1.5rem;
	background: var(--fg-grey-100);
	border-left: 4px solid var(--fg-orange);
	border-radius: var(--fg-radius);
}

/* --- 20.17 Mappa ---------------------------------------------------------- */

.fg-mappa,
.fg-mappa__box {
	position: relative;
	overflow: hidden;
	border-radius: var(--fg-radius);
}

.fg-mappa__box {
	background: var(--fg-grey-100);
	border: 1px solid var(--fg-grey-200);
	aspect-ratio: 16 / 9;
}

.fg-mappa__box iframe,
.fg-mappa__box .fg-map__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

.fg-mappa__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	width: 100%;
	height: 100%;
	padding: 2rem 1.25rem;
	text-align: center;
}

.fg-mappa__indirizzo {
	font-weight: 600;
}

.fg-mappa__nota,
.fg-mappa__avviso {
	margin: 0;
	color: var(--fg-grey-600);
	font-size: .875rem;
}

.fg-mappa-titolo {
	margin-bottom: 1rem;
}

/* --- 20.18 Breadcrumb ----------------------------------------------------- */

/* Il separatore lo disegna già .fg-breadcrumb li:not(:last-child)::after:
   quello stampato dal template va nascosto per non averne due. */
.fg-breadcrumb__sep {
	display: none;
}

.fg-breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

/* --- 20.19 Blocchi due colonne testo/foto --------------------------------- */

.fg-chi-siamo-home__inner,
.fg-vantaggi,
.fg-marchi__evidenza {
	align-items: center;
}

.fg-chi-siamo-home__media,
.fg-vantaggi__media,
.fg-marchi__evidenza-media,
.fg-contatti__foto,
.fg-marchi__foto {
	overflow: hidden;
	border-radius: var(--fg-radius);
}

.fg-chi-siamo-home__media img,
.fg-vantaggi__media img,
.fg-marchi__evidenza-media img,
.fg-contatti__foto img,
.fg-marchi__foto img {
	width: 100%;
	height: 100%;
	max-height: 26rem;
	object-fit: cover;
}

.fg-chi-siamo-home__testo,
.fg-vantaggi__testo {
	gap: .9rem;
}

/* --- 20.20 Footer --------------------------------------------------------- */

.fg-footer > .fg-container {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) 0;
}

/* Flex e non grid: le colonne facoltative (orari, contatti) compaiono solo
   quando il cliente fornisce i dati, quindi il numero varia da 2 a 4. */
.fg-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2.25rem;
}

.fg-footer__col {
	flex: 1 1 13rem;
	min-width: 0;
}

.fg-footer__col--brand {
	flex: 1.6 1 18rem;
}

@media (min-width: 900px) {
	.fg-footer__grid {
		gap: 2.5rem 3rem;
	}
}

.fg-footer__logo {
	display: inline-flex;
	margin-bottom: 1rem;
}

.fg-footer__logo-img {
	width: auto;
	max-height: 3.25rem;
	object-fit: contain;
}

.fg-footer__logo-text {
	margin: 0 0 1rem;
	font-family: var(--fg-font-display);
	font-stretch: 76%;
	font-size: 1.35rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--fg-white);
}

.fg-footer__desc {
	margin: 0;
	max-width: 42ch;
	line-height: 1.65;
}

.fg-footer__social {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	gap: .6rem;
}

.fg-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .45rem .9rem;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--fg-radius);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-white);
}

.fg-footer__social-link:hover {
	border-color: var(--fg-orange);
	color: var(--fg-orange);
	text-decoration: none;
}

.fg-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-footer__item {
	margin-bottom: .55rem;
}

.fg-footer__item:last-child {
	margin-bottom: 0;
}

.fg-footer__address {
	font-style: normal;
	line-height: 1.6;
}

.fg-footer__orari {
	margin: 0;
	line-height: 1.7;
}

.fg-footer__legal {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .8125rem;
	color: rgba(255, 255, 255, .62);
}

.fg-footer__legal-dati {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	margin: 0 0 .6rem;
}

.fg-footer__legal-item {
	display: inline-block;
}

.fg-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
	margin: 0 0 .6rem;
	padding: 0;
	list-style: none;
}

.fg-footer__credit {
	margin: 0;
}

.fg-footer__credit-sep {
	margin-inline: .35rem;
	opacity: .6;
}

/* --- 20.21 Pagina generica, archivio, ricerca, 404 ------------------------ */

.fg-page__header,
.fg-archive__header {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.fg-page__title,
.fg-archive__title {
	margin: 0;
}

.fg-page__inner {
	max-width: 72ch;
}

.fg-archive__list {
	display: grid;
	gap: var(--fg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.fg-archive__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fg-archive__thumb img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.fg-archive__body {
	padding: 1.25rem;
}

.fg-archive__meta {
	color: var(--fg-grey-600);
	font-size: .8125rem;
}

.fg-404__subtitle {
	max-width: 52ch;
}

.fg-404__list {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.fg-404__list li {
	margin-bottom: .5rem;
}

.fg-404__search {
	max-width: 32rem;
	margin-top: 1.5rem;
}

.fg-404__aiuto {
	margin-top: 2rem;
	color: var(--fg-grey-600);
}

.fg-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.fg-search__label {
	display: block;
	margin-bottom: .35rem;
	font-size: .875rem;
	font-weight: 600;
}

.fg-search__input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: .8rem 1rem;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	color: var(--fg-black);
}

.fg-search__input:focus {
	border-color: var(--fg-orange);
	outline: none;
}

/* --- 20.22 Pagina servizio ------------------------------------------------ */

.fg-servizio__blocco + .fg-servizio__blocco {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.fg-servizio__blocco > p,
.fg-servizio__blocco > ul,
.fg-servizio__blocco > ol {
	max-width: 72ch;
}

.fg-servizio__blocco-titolo {
	font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem);
}

.fg-servizio__intro .fg-lead {
	max-width: 68ch;
}

/* --- 20.23 Riduzione del movimento e stampa ------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fg-nav,
	.fg-servizio-card__img,
	.fg-galleria__item img {
		transition: none;
		transform: none;
	}
}

@media print {
	.fg-hero__titolo,
	.fg-hero__testo,
	.fg-page-hero__titolo {
		color: #000;
		text-shadow: none;
	}

	.fg-header__hamburger,
	.fg-nav {
		display: none;
	}
}

/* --- 20.24 Card senza __body (markup minimale h3 + p) --------------------- */

.fg-card > h2,
.fg-card > h3,
.fg-card > h4,
.fg-card > p,
.fg-card > ul,
.fg-card > ol {
	margin: 0;
	padding-inline: 1.35rem;
}

.fg-card > h2:first-child,
.fg-card > h3:first-child,
.fg-card > h4:first-child,
.fg-card > p:first-child {
	padding-top: 1.35rem;
}

.fg-card > h2:last-child,
.fg-card > h3:last-child,
.fg-card > h4:last-child,
.fg-card > p:last-child,
.fg-card > ul:last-child,
.fg-card > ol:last-child {
	padding-bottom: 1.35rem;
}

.fg-card > h3 + p,
.fg-card > h2 + p {
	margin-top: .55rem;
}

.fg-card > h2,
.fg-card > h3,
.fg-card > h4 {
	font-size: 1.2rem;
	line-height: 1.25;
}

.fg-card > p {
	color: var(--fg-grey-600);
	font-size: .9375rem;
	line-height: 1.6;
}

.fg-card > h3 > a,
.fg-card > h2 > a {
	color: inherit;
	text-decoration: none;
}

.fg-card:hover > h3 > a,
.fg-card > h3 > a:hover,
.fg-card > h3 > a:focus-visible {
	color: var(--fg-orange-text);
	text-decoration: underline;
}

/* Elenchi di card: niente pallini di lista. */
ul.fg-servizi-lista,
ul.fg-servizi-griglia,
ul.fg-noleggio__grid,
ul.fg-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.fg-servizi-lista > li,
ul.fg-servizi-griglia > li {
	margin: 0;
}

/* --- 20.25 Campi honeypot dei plugin antispam ----------------------------- */
/* CleanTalk inietta campi esca nei form: vanno sottratti alla vista (restano
   nel DOM e nel submit, quindi la protezione continua a funzionare). */
.apbct_special_field,
input[name^="apbct_"],
input[name^="apbct__"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- 20.26 Rifiniture di respiro e casi limite ---------------------------- */

/* Più aria ai lati quando il contenitore non è ancora al massimo (700-1200px):
   con soli 20px il contenuto risultava incollato ai bordi su laptop e tablet. */
@media (min-width: 700px) {
	:root {
		--fg-pad-x: 2rem;
	}
}

@media (min-width: 1100px) {
	:root {
		--fg-pad-x: 2.5rem;
	}
}

/* Galleria con una sola foto: non deve restare una miniatura in una griglia
   pensata per tre o quattro immagini. */
.fg-gallery__item:only-child,
.fg-galleria__item:only-child {
	grid-column: 1 / -1;
	max-width: 42rem;
	aspect-ratio: 3 / 2;
}

.fg-gallery:has(> :only-child),
.fg-galleria:has(> :only-child) {
	grid-template-columns: minmax(0, 1fr);
}

/* =============================================================================
   21. DESIGN SYSTEM 2.0 — ROUND 2
   Rifinitura del linguaggio visivo a struttura invariata. Tre obiettivi:
   ritmo verticale unico (scala 8px del CONTRACT §12.2), gerarchia tipografica
   che si veda, contrasto verificato a mano.
   Questa sezione chiude il foglio: quello che dichiara qui vince sulle
   sezioni 01-20 a parità di specificità. I fogli d'area (home.css,
   servizi.css, …) caricano dopo e possono specializzare senza !important.
   ========================================================================== */

/* --- 21.1 Separatori riusabili -------------------------------------------- */

/* Banda bicolore arancio/verde: richiamo diretto del logo. Si usa come
   elemento a sé (<span class="fg-band"></span>) o come bordo di sezione. */
.fg-band {
	display: block;
	width: 100%;
	height: 6px;
	background: var(--fg-band);
}

.fg-band--thin { height: 3px; }
.fg-band--thick { height: 10px; }

/* Filetto corto sotto un titolo. */
.fg-rule {
	width: 5rem;
	height: 6px;
	margin: 0 0 var(--fg-s3);
	background: var(--fg-band);
}

/* Bordo bicolore su una sezione, senza markup aggiuntivo. */
.fg-section--band-top {
	position: relative;
	border-top: 6px solid transparent;
	border-image: var(--fg-band) 1;
	border-bottom-width: 0;
	border-left-width: 0;
	border-right-width: 0;
}

/* Taglio diagonale: la sezione risale sopra la precedente e ne scopre un
   angolo. Solo su schermi larghi, dove lo spazio verticale abbonda. */
@media (min-width: 700px) {
	.fg-section--slant-top {
		position: relative;
		margin-top: -3vw;
		padding-top: calc(var(--fg-section-y) + 3vw);
		clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
	}

	.fg-section--slant-bottom {
		margin-bottom: -3vw;
		padding-bottom: calc(var(--fg-section-y) + 3vw);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%);
	}

	.fg-section--slant-top.fg-section--slant-bottom {
		clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
	}
}

/* --- 21.2 Intestazioni di sezione ----------------------------------------- */

/* Tutti i blocchi introduttivi del tema condividono lo stesso ritmo:
   occhiello, titolo e lead ravvicinati, poi un vero stacco sul contenuto. */
.fg-section__head,
.fg-servizi-home__intro,
.fg-perche__intro,
.fg-marchi-home__intro,
.fg-info-pratiche__intro,
.fg-noleggio__intro-testo {
	gap: var(--fg-s1);
	max-width: 62ch;
	margin-bottom: var(--fg-head-gap);
}

.fg-section__head > :last-child,
.fg-servizi-home__intro > :last-child,
.fg-perche__intro > :last-child,
.fg-marchi-home__intro > :last-child,
.fg-info-pratiche__intro > :last-child,
.fg-servizi-intro > :last-child {
	margin-bottom: 0;
}

/* Dentro un blocco introduttivo la distanza la fa il gap del contenitore:
   il margine del titolo si somma e va tolto. Fuori resta quello di default. */
.fg-section__head > h1,
.fg-section__head > h2,
.fg-section__head > .fg-title,
.fg-stack > h1,
.fg-stack > h2,
.fg-stack > h3,
.fg-stack > .fg-title {
	margin-bottom: 0;
}

/* Titolo di sezione seguito subito da una griglia o da un elenco: serve lo
   stacco pieno, non il mezzo em del margine tipografico. */
h2 + .fg-grid,
h2 + .fg-brands,
h2 + .fg-gallery,
h2 + .fg-galleria,
h2 + .fg-timeline,
h2 + .fg-faq,
h2 + .fg-split,
.fg-title + .fg-grid,
.fg-title + .fg-brands,
.fg-title + .fg-split {
	margin-top: var(--fg-head-gap);
}

/* Coda di sezione (link "tutti i servizi", "tutti i marchi"…). */
.fg-servizi-home__tutti,
.fg-marchi-home__tutti,
.fg-servizio__altri-link {
	margin: var(--fg-s5) 0 0;
}

/* --- 21.3 Card: geometria sulla scala 8px --------------------------------- */

.fg-servizio-card__corpo,
.fg-servizio-card__body {
	gap: var(--fg-s1);
	padding: var(--fg-s3);
}

.fg-servizio-card--compatta .fg-servizio-card__corpo,
.fg-servizio-card--compatta .fg-servizio-card__body {
	padding: var(--fg-s2) var(--fg-s3);
}

.fg-servizio-card__titolo {
	font-size: var(--fg-fs-h4);
	font-stretch: var(--fg-stretch-h3);
}

.fg-servizio-card__sommario {
	font-size: 1rem;
	line-height: 1.6;
}

.fg-servizio-card__cta {
	padding-top: var(--fg-s1);
}

/* Card scritte senza __body (h3 + p diretti). */
.fg-card > h2,
.fg-card > h3,
.fg-card > h4,
.fg-card > p,
.fg-card > ul,
.fg-card > ol {
	padding-inline: var(--fg-s3);
}

.fg-card > h2:first-child,
.fg-card > h3:first-child,
.fg-card > h4:first-child,
.fg-card > p:first-child {
	padding-top: var(--fg-s3);
}

.fg-card > h2:last-child,
.fg-card > h3:last-child,
.fg-card > h4:last-child,
.fg-card > p:last-child,
.fg-card > ul:last-child,
.fg-card > ol:last-child {
	padding-bottom: var(--fg-s3);
}

.fg-card > h2,
.fg-card > h3,
.fg-card > h4 {
	font-size: var(--fg-fs-h4);
	font-stretch: var(--fg-stretch-h3);
}

.fg-card > p {
	font-size: 1rem;
	line-height: 1.6;
}

/* Variante piena, senza foto: la card si regge sul colore e sul bordo spesso.
   Serve dove una griglia di sole scritte risulterebbe smilza. */
.fg-card--solid {
	background: var(--fg-white);
	border: 2px solid var(--fg-black);
	box-shadow: none;
}

.fg-card--solid:hover {
	border-color: var(--fg-black);
	box-shadow: var(--fg-shadow-hard);
}

/* --- 21.4 Box informativi e numeri ---------------------------------------- */

.fg-info {
	gap: var(--fg-s2);
	padding: var(--fg-s3);
	border-left-width: 6px;
}

.fg-info__body p {
	font-size: 1rem;
}

.fg-info-box {
	gap: var(--fg-s1);
}

.fg-info-box__icona-wrap {
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--fg-s1);
	border-width: 2px;
}

.fg-info-box__icona {
	width: 1.75rem;
	height: 1.75rem;
}

.fg-info-box__titolo {
	font-size: var(--fg-fs-h4);
	font-stretch: var(--fg-stretch-h3);
}

.fg-info-box__testo {
	font-size: 1rem;
	line-height: 1.6;
}

.fg-numeri__item {
	padding: var(--fg-s3);
}

.fg-numeri__valore {
	font-stretch: var(--fg-stretch-h2);
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	letter-spacing: -.02em;
}

.fg-numeri__etichetta,
.fg-numeri__label {
	font-size: var(--fg-fs-small);
	letter-spacing: .04em;
}

/* --- 21.5 Elenchi --------------------------------------------------------- */

.fg-list li,
.fg-elenco > li {
	padding-left: var(--fg-s4);
	margin-bottom: var(--fg-s1);
}

.fg-list li::before,
.fg-elenco > li::before {
	top: .58em;
	width: .625rem;
	height: .625rem;
}

@media (min-width: 600px) {
	.fg-list--cols {
		column-gap: var(--fg-s6);
	}
}

/* --- 21.6 Contenuti da editor --------------------------------------------- */

.fg-content:not(.fg-container),
.fg-prose:not(.fg-container),
.fg-entry-content:not(.fg-container),
.fg-contenuto-pagina:not(.fg-container),
.fg-chisiamo__editor,
.fg-page__content,
.fg-page__inner {
	max-width: 68ch;
}

.fg-container.fg-content > p,
.fg-container.fg-content > ul,
.fg-container.fg-content > ol,
.fg-container.fg-content > blockquote,
.fg-container.fg-content > h2,
.fg-container.fg-content > h3,
.fg-container.fg-content > h4,
.fg-prosa > p,
.fg-prosa > ul,
.fg-prosa > ol,
.fg-prose > p,
.fg-prose > ul,
.fg-prose > ol,
.fg-entry-content > p,
.fg-contenuto-pagina > p,
.fg-servizio__blocco > p,
.fg-servizio__blocco > ul,
.fg-servizio__blocco > ol {
	max-width: 68ch;
}

.fg-content h2,
.fg-prosa h2,
.fg-prose h2,
.fg-entry-content h2,
.fg-contenuto-pagina h2 {
	margin-top: 1.6em;
}

.fg-content h3,
.fg-prosa h3,
.fg-prose h3,
.fg-entry-content h3,
.fg-contenuto-pagina h3 {
	margin-top: 1.5em;
}

.fg-servizio__blocco + .fg-servizio__blocco {
	margin-top: var(--fg-s6);
}

.fg-servizio__blocco-titolo {
	font-size: var(--fg-fs-h3);
}

/* --- 21.7 Tabelle --------------------------------------------------------- */

.fg-content th,
.fg-content td,
.fg-table th,
.fg-table td {
	padding: var(--fg-s2) var(--fg-s3);
	border: 1px solid var(--fg-grey-200);
	text-align: left;
	vertical-align: top;
}

.fg-content table,
.fg-table {
	font-size: 1rem;
}

.fg-content th,
.fg-table th {
	background: var(--fg-grey-100);
	border-bottom-width: 2px;
	border-bottom-color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display);
	font-size: .875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fg-black);
}

.fg-content tbody tr:nth-child(even),
.fg-table tbody tr:nth-child(even) {
	background: rgba(244, 244, 244, .6);
}

/* --- 21.8 Campi modulo ---------------------------------------------------- */

.fg-field,
.fg-input,
.fg-textarea,
.fg-select,
.fg-search__input,
.fg-search__field,
.search-form .search-field,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	padding: var(--fg-s2);
	border: 2px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	font-size: 1.0625rem;
}

.gform_wrapper .gform_fields {
	gap: var(--fg-s3);
}

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	margin-bottom: var(--fg-s1);
	font-size: .9375rem;
	letter-spacing: .06em;
}

.gform_wrapper .gform_footer {
	margin-top: var(--fg-s4);
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
	min-height: 3.25rem;
	padding: var(--fg-s2) var(--fg-s4);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .06em;
}

/* --- 21.9 CTA contatti: contrasto e prossimità ---------------------------- */
/* Due difetti del round 1, entrambi risolti qui alla radice:
   1. testo grigio su arancio (#2A2A2A su #EF731D = 4.88:1, al limite):
      sulla fascia arancio il testo va NERO #111 -> 6.4:1;
   2. il bottone finiva a fondo pagina lontanissimo dal testo perché
      l'allineamento era space-between: ora segue il testo a --fg-s5. */

.fg-cta {
	padding-block: clamp(var(--fg-s5), 6vw, var(--fg-s7));
}

.fg-cta__inner {
	gap: var(--fg-s4);
}

@media (min-width: 900px) {
	.fg-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: var(--fg-s5);
	}

	.fg-cta__text,
	.fg-cta__testo {
		flex: 0 1 auto;
		max-width: 52ch;
	}

	.fg-cta__actions,
	.fg-cta__azioni {
		flex: none;
	}
}

.fg-cta__titolo,
.fg-cta__title {
	font-size: var(--fg-fs-h2);
	font-stretch: var(--fg-stretch-h2);
	margin-bottom: 0;
}

.fg-cta__descrizione {
	max-width: 52ch;
	font-size: var(--fg-fs-lead);
	line-height: 1.5;
}

/* Fascia arancio: tutto in nero pieno, nessun grigio. */
.fg-cta--primary,
.fg-cta--primary .fg-cta__titolo,
.fg-cta--primary .fg-cta__title,
.fg-cta--primary .fg-cta__descrizione,
.fg-cta--primary .fg-lead,
.fg-cta--primary p,
.fg-cta--primary .fg-text-muted {
	color: var(--fg-black);
}

.fg-cta--primary {
	border-top: 8px solid var(--fg-green);
	border-bottom: 8px solid var(--fg-black);
}

.fg-cta--primary .fg-eyebrow::before {
	background: var(--fg-black);
}

/* --- 21.10 Hero: respiro e gerarchia -------------------------------------- */

.fg-hero__content,
.fg-hero__inner .fg-stack {
	gap: var(--fg-s2);
}

.fg-hero__titolo,
.fg-hero__title,
.fg-page-hero__titolo {
	max-width: 20ch;
}

.fg-hero .fg-lead,
.fg-hero__testo,
.fg-hero__lead {
	max-width: 52ch;
	font-size: var(--fg-fs-lead);
}

.fg-hero__azioni,
.fg-hero__actions {
	gap: var(--fg-s2);
	margin-top: var(--fg-s4);
}

.fg-hero__facts {
	gap: var(--fg-s2) var(--fg-s5);
	margin-top: var(--fg-s5);
	padding-top: var(--fg-s3);
	font-size: 1rem;
}

/* --- 21.11 Marchi, galleria, timeline ------------------------------------- */

.fg-brands,
ul.fg-marchi-home__lista {
	gap: var(--fg-s2);
}

.fg-brands .fg-brand-item {
	min-height: 7rem;
	padding: var(--fg-s3);
}

.fg-wordmark {
	min-height: 5rem;
	padding: var(--fg-s2);
}

.fg-gallery,
.fg-galleria {
	gap: var(--fg-s2);
}

.fg-timeline {
	padding-left: var(--fg-s4);
}

.fg-timeline::before {
	left: .38rem;
	width: 3px;
}

.fg-timeline__item {
	padding-bottom: var(--fg-s5);
}

.fg-timeline__item::before {
	left: calc(var(--fg-s4) * -1);
	width: 1rem;
	height: 1rem;
	border-radius: 0;
	transform: rotate(45deg);
}

.fg-timeline__titolo,
.fg-timeline__title {
	font-size: var(--fg-fs-h3);
}

/* --- 21.12 Breadcrumb e coda pagina --------------------------------------- */

.fg-breadcrumb {
	padding-block: var(--fg-s2);
	font-size: .875rem;
}

.fg-404 {
	padding-block: clamp(var(--fg-s6), 9vw, var(--fg-s8));
}

.fg-404__actions {
	gap: var(--fg-s2);
	margin-top: var(--fg-s4);
}

/* --- 21.13 Micro-interazioni condivise ------------------------------------ */
/* Solo transform e opacity, e solo se l'utente non ha chiesto meno movimento.
   Nessuna di queste regole nasconde contenuto: sono tutte reazioni al
   passaggio del mouse, quindi il sito resta identico senza JS. */

@media (prefers-reduced-motion: no-preference) {
	.fg-card__media img,
	.fg-servizio-card__img,
	.fg-galleria__img,
	.fg-gallery__item img {
		transition: transform var(--fg-transition-slow);
	}

	.fg-brand-item {
		transition: border-color var(--fg-transition), color var(--fg-transition),
			box-shadow var(--fg-transition), transform .2s var(--fg-ease);
	}

	.fg-brand-item:hover,
	.fg-brand-item:focus-visible {
		transform: translateY(-3px);
	}

	.fg-social a,
	.fg-footer__social-link {
		transition: background-color var(--fg-transition), border-color var(--fg-transition),
			color var(--fg-transition), transform .2s var(--fg-ease);
	}

	.fg-social a:hover,
	.fg-footer__social-link:hover {
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fg-btn:hover,
	.fg-card:hover,
	.fg-brand-item:hover,
	.fg-social a:hover,
	.fg-footer__social-link:hover {
		transform: none;
	}

	.fg-card::before {
		transition: none;
	}
}

/* --- 21.14 Utility di spaziatura sulla scala ------------------------------ */
/* Da usare al posto dei valori arbitrari nei fogli d'area. */

.fg-mt-s1 { margin-top: var(--fg-s1); }
.fg-mt-s2 { margin-top: var(--fg-s2); }
.fg-mt-s3 { margin-top: var(--fg-s3); }
.fg-mt-s4 { margin-top: var(--fg-s4); }
.fg-mt-s5 { margin-top: var(--fg-s5); }
.fg-mt-s6 { margin-top: var(--fg-s6); }

.fg-mb-s1 { margin-bottom: var(--fg-s1); }
.fg-mb-s2 { margin-bottom: var(--fg-s2); }
.fg-mb-s3 { margin-bottom: var(--fg-s3); }
.fg-mb-s4 { margin-bottom: var(--fg-s4); }
.fg-mb-s5 { margin-bottom: var(--fg-s5); }
.fg-mb-s6 { margin-bottom: var(--fg-s6); }

.fg-pad-s3 { padding: var(--fg-s3); }
.fg-pad-s4 { padding: var(--fg-s4); }
.fg-pad-s5 { padding: clamp(var(--fg-s4), 4vw, var(--fg-s5)); }

.fg-measure { max-width: 68ch; }
.fg-measure--short { max-width: 52ch; }

/* Contenitore che non deve mai far scorrere la pagina in orizzontale. */
.fg-clip-x {
	overflow-x: clip;
}

/* --- 21.15 Griglia marchi a colonne fisse --------------------------------- */
/* I raggruppamenti per reparto hanno da 1 a 4 marchi: con colonne rigide i
   gruppi corti lasciano metà riga vuota. Con auto-fill le caselle mantengono
   la stessa larghezza in tutti i gruppi e la riga corta semplicemente finisce
   prima, senza che il singolo logo si dilati a tutta pagina. */
.fg-brands--fill {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

@media (min-width: 600px) {
	.fg-brands--fill {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	}
}

/* --- 21.16 Contrasto AA: correzioni verificate a mano ---------------------- */
/* Rapporti calcolati sui valori reali, non stimati a occhio:
     #EF731D testo su bianco .............. 2.86:1  MAI come testo
     #C85D12 testo su bianco .............. 4.17:1  ancora sotto AA
     #B35310 testo su bianco .............. 5.05:1  ok  (--fg-orange-text)
     #B35310 testo su #F4F4F4 ............. 4.59:1  ok
     #111111 testo su #EF731D ............. 6.42:1  ok  -> fascia CTA
     #2A2A2A testo su #EF731D ............. 4.88:1  al limite, evitato
     #368A25 testo su bianco .............. 4.36:1  sotto AA
     #2F7A20 testo su bianco .............. 5.35:1  ok  (--fg-green-text)
   L'arancio pieno resta ammesso solo come FONDO, con testo nero sopra. */

.fg-btn--green {
	background: var(--fg-green-text);
	border-color: var(--fg-green-text);
	color: var(--fg-white);
}

.fg-service-card__num,
.fg-servizio-card__num,
.fg-badge--green-text {
	color: var(--fg-green-text);
}

.fg-info-box__icona-wrap {
	color: var(--fg-green-text);
}

.gform_wrapper .gf_progressbar_percentage {
	background: var(--fg-green-text);
}

/* Il verde pieno --fg-green regge solo testo NERO (6.54:1), mai bianco. */
.fg-badge {
	background: var(--fg-green-text);
	color: var(--fg-white);
	font-size: .8125rem;
	padding: .25rem .65rem;
}

.fg-badge--orange {
	background: var(--fg-orange);
	color: var(--fg-black);
}

/* --- 21.17 Icone SVG in linea --------------------------------------------- */
/* I template stampano <svg class="fg-icon"> senza attributi width/height: un
   SVG con solo il viewBox si dilata a tutta la larghezza del contenitore.
   La classe va quindi dimensionata qui, nel foglio base, perché la usano
   header, footer, box informativi e schede. */

.fg-icon {
	flex: none;
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	vertical-align: -.2em;
}

.fg-icon--xs { width: 1em; height: 1em; }
.fg-icon--sm { width: 1.125em; height: 1.125em; }
.fg-icon--md { width: 1.5rem; height: 1.5rem; }
.fg-icon--lg { width: 2rem; height: 2rem; }
.fg-icon--xl { width: 2.5rem; height: 2.5rem; }

/* Icone disegnate con il tratto invece che con il riempimento. */
.fg-icon[stroke],
.fg-icon[fill="none"],
.fg-info__glyph {
	fill: none;
	stroke: currentColor;
}

.fg-info__glyph {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

/* Rete di sicurezza: qualunque SVG in linea senza dimensioni proprie non
   deve mai occupare tutta la colonna. */
svg[viewBox]:not([width]):not([height]):not([class*="fg-"]):not(.svg-inline--fa) {
	width: 1.25em;
	height: 1.25em;
}

/* =============================================================================
   22. FONDAMENTA RESPONSIVE — aree di tocco, tipografia fluida, schermi estremi
   Chiude il foglio: quello che si dichiara qui vince sulle sezioni 01-21 a
   parità di specificità, e i fogli d'area (chrome, home, servizi, pagine,
   marchi, contatti) caricano dopo e possono ancora specializzare.
   Misure di partenza (sweep su 7 pagine × 16 viewport):
     scorrimento orizzontale 0 px ovunque, nessun testo troncato;
     bersagli sotto 24×24 px: 7 su mobile, 25 su desktop;
     bersagli sotto 44 px di altezza: 12 su mobile, 30 su desktop.
   ========================================================================== */

/* --- 22.1 Token del tocco -------------------------------------------------
   WCAG 2.2 SC 2.5.8 (AA) chiede 24×24 px per qualunque bersaglio; per il dito
   la soglia pratica è 44×44 (SC 2.5.5, AAA). Qui si distinguono i due casi:
   24 px sempre, 44 px dove si tocca davvero.
   `--fg-tap-pad` vale 0 su mouse e diventa 12 px per lato dove il puntatore è
   grossolano: si applica come padding verticale COMPENSATO da un margine
   negativo pari, quindi l'area cliccabile cresce e il layout non si muove.
   Disponibile a tutti gli agenti: basta la classe `.fg-tap`.
   -------------------------------------------------------------------------- */

:root {
	--fg-tap: 2.75rem;      /* 44px — bersaglio comodo per il dito           */
	--fg-tap-min: 1.5rem;   /* 24px — minimo WCAG 2.5.8 per ogni puntatore   */
	--fg-tap-pad: 0rem;     /* estensione verticale, attiva solo sul tocco   */
	--fg-tap-gap: var(--fg-s1); /* distanza minima fra bersagli adiacenti    */
}

@media (max-width: 899px), (pointer: coarse) {
	:root {
		--fg-tap-pad: .8125rem; /* 13px per lato: un titolo di card da 18px
		                           arriva a 44 px esatti di area cliccabile */
	}
}

/* Link di elenco/titolo: l'area cresce in verticale, il flusso resta identico. */
.fg-tap {
	display: inline-block;
	padding-block: var(--fg-tap-pad);
	margin-block: calc(var(--fg-tap-pad) * -1);
}

/* Link dentro una frase: il padding verticale di un elemento in linea non
   entra nel calcolo della riga, quindi allarga il bersaglio a costo zero. */
.fg-tap--inline {
	padding-block: .3rem;
}

/* Bersaglio pieno (icone, pulsanti quadrati, chip). */
.fg-tap--box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fg-tap);
	min-height: var(--fg-tap);
}

/* --- 22.2 Bottoni: nessuna variante sotto soglia --------------------------
   `.fg-btn` base è già 52 px. Erano fuori regola `--ghost` (36 px) e `--sm`
   (40 px): sul tocco entrambe salgono a 44, sul mouse restano come sono
   (36 e 40 px superano comunque i 24 px richiesti da SC 2.5.8).
   -------------------------------------------------------------------------- */

@media (max-width: 899px), (pointer: coarse) {
	.fg-btn--ghost {
		min-height: var(--fg-tap);
		padding-block: var(--fg-s1);
	}

	.fg-btn--sm {
		min-height: var(--fg-tap);
	}
}

/* Bottoni affiancati: mai a contatto, nemmeno quando la riga va a capo.
   (Le varianti .fg-cluster--sm/--lg restano libere: qui si toccano solo le
   righe di azione, dove i bersagli sono grandi e vanno distanziati.) */
.fg-hero__azioni,
.fg-hero__actions,
.fg-cta__azioni,
.fg-cta__actions,
.fg-404__actions {
	gap: max(var(--fg-tap-gap), var(--fg-s2));
}

/* --- 22.3 Link di navigazione e di elenco ---------------------------------
   Titoli di card, voci di elenco e link di coda erano alti 19-24 px. Con la
   compensazione di 22.1 arrivano a 44+ px sul tocco senza spostare nulla.
   -------------------------------------------------------------------------- */

@media (max-width: 899px), (pointer: coarse) {
	.fg-card__title a,
	.fg-card > h2 > a,
	.fg-card > h3 > a,
	.fg-card > h4 > a,
	.fg-elenco > li > a,
	.fg-list li > a,
	.fg-entry__title a,
	.fg-servizio__altri-link a,
	.fg-vedi-anche__elenco a {
		display: inline-block;
		padding-block: var(--fg-tap-pad);
		margin-block: calc(var(--fg-tap-pad) * -1);
	}
}

/* Link dentro il testo corrente: niente ingrassamento visivo, solo l'area
   minima di 24 px. Vale su tutti i puntatori. Restano esclusi i link che
   portano una classe propria, cioè i componenti degli altri fogli. */
:where(p, li, dd, dt, td, th, figcaption, address, blockquote, label, small) > a:not([class]) {
	padding-block: .3rem;
}

/* --- 22.4 Campi modulo ---------------------------------------------------- */
/* Le caselle di spunta erano 18 px: sotto il minimo, e difficili da centrare
   col dito. 24 px è il minimo di SC 2.5.8; l'etichetta accanto resta il
   bersaglio grande. */
/* Il tema "framework" di Gravity Forms dimensiona le caselle con la propria
   variabile e la proprietà logica `block-size`: la via pulita è alzare la
   variabile, non rincorrere la specificità. */
/* Gravity Forms scrive questa variabile in uno <style> per singolo modulo,
   con selettore a ID: nessuna classe può batterlo, quindi qui l'eccezione a
   `!important` è l'unica strada (vale solo per la variabile, non per il
   layout del modulo). */
.gform_wrapper,
.gform-theme--framework,
.gform-theme--foundation {
	--gf-ctrl-choice-size: var(--fg-tap-min) !important;
}

.gform_wrapper .gchoice input[type="checkbox"],
.gform_wrapper .gchoice input[type="radio"],
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
	/* Vale anche se il modulo non usa il tema "framework" di GF. */
	min-width: var(--fg-tap-min);
	min-height: var(--fg-tap-min);
	margin-top: .0625rem;
}

.gform_wrapper .gchoice label,
.gform_wrapper .gfield_consent_description + label,
.gform_wrapper .gfield--type-consent label {
	display: inline-block;
	min-height: var(--fg-tap-min);
	padding-block: .125rem;
}

/* --- 22.5 Banner cookie (Complianz, markup di terze parti) ----------------
   Non è nostro, ma è la prima cosa che l'utente tocca: il pulsante di
   chiusura era 20×20 px e i due link legali alti 17 px.
   -------------------------------------------------------------------------- */
.cmplz-cookiebanner .cmplz-close {
	min-width: var(--fg-tap-min);
	min-height: var(--fg-tap-min);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner a.cmplz-link {
	padding-block: .3rem;
}

/* --- 22.6 Tipografia fluida: estremi verificati ---------------------------
   Misurato a 320 px: l'H1 di /servizi/officina-macchine-boschive/ (7 parole)
   occupava 4 righe da poche parole a 38,4 px. Abbassando il minimo a 33 px
   la stessa intestazione sta in 3 righe piene; il massimo resta 68 px, quindi
   sui monitor grandi non cambia niente. Stesso ritocco, più leggero, su H2.
   -------------------------------------------------------------------------- */

:root {
	--fg-fs-h1: clamp(2.05rem, 1.35rem + 3.4vw, 4.25rem);
	--fg-fs-h2: clamp(1.65rem, 1.2rem + 2vw, 3rem);
}

/* Sotto i 400 px la sillabazione evita che una parola lunga
   ("radiocomandi", "elettroutensili") tenga da sola una riga. */
@media (max-width: 400px) {
	h1, .fg-h1,
	h2, .fg-h2, .fg-title {
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* Lunghezza di riga: l'ottimo di lettura sta fra 60 e 75 caratteri. I blocchi
   di prosa del tema sono già limitati a 68ch; questa è la rete per i paragrafi
   senza classe, che l'editor può inserire ovunque. */
p:not([class]) {
	max-width: 75ch;
}

.fg-text-center p:not([class]),
.fg-section__head--center p:not([class]) {
	max-width: none;
}

p {
	text-wrap: pretty;
}

/* --- 22.7 Schermi molto larghi -------------------------------------------
   Oltre i 1800 px il contenuto in 1200 px si perdeva in due fasce bianche da
   680 px per lato. Il contenitore cresce di poco (1200 -> 1320) e il respiro
   laterale con lui: le fasce piene (hero, sezioni scure, bande foto) sono già
   a tutta larghezza e reggono il confronto.
   -------------------------------------------------------------------------- */

@media (min-width: 1800px) {
	:root {
		--fg-container: 1320px;
		--fg-pad-x: 3rem;
	}
}

/* Uscita dal contenitore per le fasce che devono toccare i bordi: utile agli
   altri fogli, evita di ricalcolare i margini negativi ogni volta. */
.fg-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- 22.8 Larghezze intermedie -------------------------------------------
   Fra 900 e 1200 px la griglia a 4 colonne dava celle da ~200 px: titolo su
   tre righe e foto minuscole. Il passaggio 2 -> 3 -> 4 colonne rende il
   tablet orizzontale (1024 e 1180) un formato a sé, non un desktop compresso.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (max-width: 1199px) {
	.fg-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Con 4 elementi su 3 colonne l'ultimo resterebbe solo: si allarga. */
	.fg-grid--4.fg-grid--balance > :last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}
}

/* --- 22.9 Telefono in orizzontale e zoom al 200% -------------------------
   Con 390 px di altezza (o con lo zoom al 200% su un portatile) un hero da
   24rem si mangiava tutto lo schermo prima del primo contenuto.
   Si riduce l'altezza minima, non il contenuto: nessun testo sparisce.
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
	.fg-hero {
		min-height: clamp(15rem, 88vh, 24rem);
		padding-block: clamp(var(--fg-s4), 6vh, var(--fg-s6));
	}

	.fg-section {
		padding-block: clamp(var(--fg-s5), 7vw, var(--fg-s6));
	}
}

/* Allo zoom 200% la finestra equivale a 640-760 px CSS: verificato che le due
   colonne reggono (≈290 px l'una) e che non compare scorrimento orizzontale.
   Non serve un breakpoint dedicato: il layout a 600 px basta. */