/*
Theme Name: MET Technology Solutions
Theme URI: https://mettechnologysolutions.it/
Author: MET Technology Solutions
Description: Tema a blocchi su misura per MET Technology Solutions Srl, Altamura. Sito vetrina one page con sezioni gestite come pattern Gutenberg riposizionabili, tema chiaro e scuro commutabile, rete 3D animata su canvas e markup ottimizzato per SEO locale.
Version: 2.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: met-technology
Tags: one-page, block-theme, full-site-editing, business
*/

/* ---------------------------------------------------------------------------
   1. Font: subset latin-ext (il subset latin e' dichiarato in theme.json)
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 500 700;
	font-stretch: 100% 112%;
	font-display: swap;
	src: url("assets/fonts/archivo-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: "Manrope";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/manrope-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;
}

/* ---------------------------------------------------------------------------
   2. Token dei due temi
   ---------------------------------------------------------------------------
   Il tema chiaro e' il predefinito: vale anche per chi ha il sistema in scuro,
   finche' non tocca l'interruttore. La scelta resta salvata nel browser.

   I colori di marca (magenta, lime) non cambiano fra i temi: cambiano le
   superfici e le varianti di testo, perche' il magenta pieno non passa AA su
   fondo scuro e il lime pieno non passa AA su fondo chiaro.
   --------------------------------------------------------------------------- */

:root {
	color-scheme: light;

	--met-bg: #FAFAFB;
	--met-surface: #F1F1F4;
	--met-surface-2: #E9E9EE;
	--met-line: #DDDDE4;
	--met-line-strong: #C8C8D2;
	--met-text: #191A1E;          /* 16,67:1 sul fondo */
	--met-muted: #56565F;         /*  6,96:1 sul fondo */

	--met-magenta: #D80177;       /* riempimenti, in entrambi i temi */
	--met-magenta-hover: #B00160;
	--met-accent-text: #D80177;   /*  4,80:1 su chiaro */
	--met-lime: #87B01F;
	--met-lime-text: #5E7A14;     /*  4,71:1 su chiaro */
	--met-on-accent: #FFFFFF;     /*  5,01:1 sul magenta */

	--met-header-bg: rgba(250, 250, 251, 0.5);
	--met-shadow: 0 18px 40px -20px rgba(25, 26, 30, 0.22);
	--met-error: #C0341F;
	--met-error-bg: rgba(192, 52, 31, 0.08);
	--met-ok-bg: rgba(94, 122, 20, 0.10);
	--met-ok-border: rgba(94, 122, 20, 0.35);

	--met-radius: 6px;
	--met-radius-lg: 12px;
	--met-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--met-rule: 1px solid var(--met-line);
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--met-bg: #0E0E10;
	--met-surface: #17171A;
	--met-surface-2: #1F1F24;
	--met-line: #2E2E35;
	--met-line-strong: #45454F;
	--met-text: #F2F2F3;          /* 17,24:1 sul fondo */
	--met-muted: #A2A2AB;         /*  7,61:1 sul fondo */

	--met-magenta-hover: #B80166;
	--met-accent-text: #FF4FA3;   /*  6,34:1 su scuro */
	--met-lime-text: #A8D62C;     /* 11,31:1 su scuro */

	--met-header-bg: rgba(14, 14, 16, 0.5);
	--met-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.72);
	--met-error: #FF8A8A;
	--met-error-bg: rgba(255, 138, 138, 0.10);
	--met-ok-bg: rgba(135, 176, 31, 0.12);
	--met-ok-border: rgba(168, 214, 44, 0.45);
}


/* ---------------------------------------------------------------------------
   Icone come maschere CSS
   ---------------------------------------------------------------------------
   Le icone stavano nel markup dentro blocchi "HTML personalizzato", e questo
   impediva di comporre le sezioni con soli blocchi Gutenberg standard.
   Spostandole qui, ogni scheda torna a essere gruppo + titolo + paragrafo,
   modificabili normalmente dall'editor. La maschera prende `currentColor`,
   quindi l'icona segue il tema senza regole doppie.
   --------------------------------------------------------------------------- */

.met-ico::before {
	content: "";
	display: block;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.met-ico--knx::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Ccircle cx='12' cy='3.6' r='1.9'/%3E%3Ccircle cx='4.6' cy='18' r='1.9'/%3E%3Ccircle cx='19.4' cy='18' r='1.9'/%3E%3Cpath d='M12 5.5v3.9M10 13.6l-3.7 2.9M14 13.6l3.7 2.9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Ccircle cx='12' cy='3.6' r='1.9'/%3E%3Ccircle cx='4.6' cy='18' r='1.9'/%3E%3Ccircle cx='19.4' cy='18' r='1.9'/%3E%3Cpath d='M12 5.5v3.9M10 13.6l-3.7 2.9M14 13.6l3.7 2.9'/%3E%3C/svg%3E"); }
.met-ico--rete::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='6' rx='1.6'/%3E%3Crect x='2.5' y='13.5' width='19' height='6' rx='1.6'/%3E%3Cpath d='M6 7.5h.01M6 16.5h.01'/%3E%3Cpath d='M10 7.5h8M10 16.5h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='6' rx='1.6'/%3E%3Crect x='2.5' y='13.5' width='19' height='6' rx='1.6'/%3E%3Cpath d='M6 7.5h.01M6 16.5h.01'/%3E%3Cpath d='M10 7.5h8M10 16.5h8'/%3E%3C/svg%3E"); }
.met-ico--clima::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14.2V5a2 2 0 1 1 4 0v9.2a4 4 0 1 1-4 0z'/%3E%3Cpath d='M12 11.5v4.6'/%3E%3Cpath d='M17.6 4.2c1 1 1 2.2 0 3.2s-1 2.2 0 3.2M20.8 4.2c1 1 1 2.2 0 3.2s-1 2.2 0 3.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14.2V5a2 2 0 1 1 4 0v9.2a4 4 0 1 1-4 0z'/%3E%3Cpath d='M12 11.5v4.6'/%3E%3Cpath d='M17.6 4.2c1 1 1 2.2 0 3.2s-1 2.2 0 3.2M20.8 4.2c1 1 1 2.2 0 3.2s-1 2.2 0 3.2'/%3E%3C/svg%3E"); }
.met-ico--allarme::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.6 5.8v5.6c0 4.4 3 8.2 7.4 9.8 4.4-1.6 7.4-5.4 7.4-9.8V5.8z'/%3E%3Cpath d='M9 12.2l2.2 2.2L15.4 10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.6 5.8v5.6c0 4.4 3 8.2 7.4 9.8 4.4-1.6 7.4-5.4 7.4-9.8V5.8z'/%3E%3Cpath d='M9 12.2l2.2 2.2L15.4 10'/%3E%3C/svg%3E"); }
.met-ico--tv::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 19.6a11 11 0 0 1 0-15.2'/%3E%3Cpath d='M8 19.6a6.8 6.8 0 0 1 0-11.6'/%3E%3Ccircle cx='5.6' cy='18.4' r='1.6'/%3E%3Cpath d='M13.2 21.2h8M15.4 21.2v-3.4M19 21.2v-3.4'/%3E%3Crect x='12' y='9.4' width='10' height='8.4' rx='1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 19.6a11 11 0 0 1 0-15.2'/%3E%3Cpath d='M8 19.6a6.8 6.8 0 0 1 0-11.6'/%3E%3Ccircle cx='5.6' cy='18.4' r='1.6'/%3E%3Cpath d='M13.2 21.2h8M15.4 21.2v-3.4M19 21.2v-3.4'/%3E%3Crect x='12' y='9.4' width='10' height='8.4' rx='1.6'/%3E%3C/svg%3E"); }
.met-ico--citofono::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.4' y='2.6' width='11.2' height='18.8' rx='2.2'/%3E%3Ccircle cx='12' cy='7.4' r='1.8'/%3E%3Cpath d='M9.6 12.4h4.8M9.6 14.8h4.8'/%3E%3Ccircle cx='12' cy='18.4' r='1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.4' y='2.6' width='11.2' height='18.8' rx='2.2'/%3E%3Ccircle cx='12' cy='7.4' r='1.8'/%3E%3Cpath d='M9.6 12.4h4.8M9.6 14.8h4.8'/%3E%3Ccircle cx='12' cy='18.4' r='1.2'/%3E%3C/svg%3E"); }
.met-ico--video::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='12.5' height='8' rx='2'/%3E%3Cpath d='M15 10.4 21.5 7.2v9.6L15 13.6z'/%3E%3Cpath d='M8.8 15v4.2M6.2 19.2h5.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='12.5' height='8' rx='2'/%3E%3Cpath d='M15 10.4 21.5 7.2v9.6L15 13.6z'/%3E%3Cpath d='M8.8 15v4.2M6.2 19.2h5.2'/%3E%3C/svg%3E"); }
.met-ico--incendio::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8s5.2 4.3 5.2 9.2a5.2 5.2 0 0 1-10.4 0c0-2 .9-3.6 1.9-4.8.4 1.1 1 1.9 1.8 2.4-.4-2.4 1.5-4.7 1.5-6.8Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8s5.2 4.3 5.2 9.2a5.2 5.2 0 0 1-10.4 0c0-2 .9-3.6 1.9-4.8.4 1.1 1 1.9 1.8 2.4-.4-2.4 1.5-4.7 1.5-6.8Z'/%3E%3C/svg%3E"); }
.met-ico--voip::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 13.2v-1.4a7.8 7.8 0 0 1 15.6 0v1.4'/%3E%3Crect x='2.4' y='12.8' width='4' height='6.2' rx='1.6'/%3E%3Crect x='17.6' y='12.8' width='4' height='6.2' rx='1.6'/%3E%3Cpath d='M19.8 19v.4a2.8 2.8 0 0 1-2.8 2.8h-2.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 13.2v-1.4a7.8 7.8 0 0 1 15.6 0v1.4'/%3E%3Crect x='2.4' y='12.8' width='4' height='6.2' rx='1.6'/%3E%3Crect x='17.6' y='12.8' width='4' height='6.2' rx='1.6'/%3E%3Cpath d='M19.8 19v.4a2.8 2.8 0 0 1-2.8 2.8h-2.6'/%3E%3C/svg%3E"); }
.met-ico--check::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E"); }
.met-ico--luogo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10.2' r='2.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10.2' r='2.6'/%3E%3C/svg%3E"); }
.met-ico--telefono::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 3.5 9 3.9l1.3 4.2-2 1.4a12 12 0 0 0 6.2 6.2l1.4-2 4.2 1.3.4 2.7a2 2 0 0 1-2.1 2.3A16.5 16.5 0 0 1 4 5.6a2 2 0 0 1 2.3-2.1Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 3.5 9 3.9l1.3 4.2-2 1.4a12 12 0 0 0 6.2 6.2l1.4-2 4.2 1.3.4 2.7a2 2 0 0 1-2.1 2.3A16.5 16.5 0 0 1 4 5.6a2 2 0 0 1 2.3-2.1Z'/%3E%3C/svg%3E"); }
.met-ico--documento::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 2.9h7.3l5.3 5.3v12.9H6.2z'/%3E%3Cpath d='M13.3 3.1v5.3h5.3'/%3E%3Cpath d='M9.4 13.2h5.2M9.4 16.6h3.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 2.9h7.3l5.3 5.3v12.9H6.2z'/%3E%3Cpath d='M13.3 3.1v5.3h5.3'/%3E%3Cpath d='M9.4 13.2h5.2M9.4 16.6h3.4'/%3E%3C/svg%3E"); }
.met-ico--download::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v11.2'/%3E%3Cpath d='m7.6 10.4 4.4 4.4 4.4-4.4'/%3E%3Cpath d='M4.6 18.4v1.2a1.4 1.4 0 0 0 1.4 1.4h12a1.4 1.4 0 0 0 1.4-1.4v-1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v11.2'/%3E%3Cpath d='m7.6 10.4 4.4 4.4 4.4-4.4'/%3E%3Cpath d='M4.6 18.4v1.2a1.4 1.4 0 0 0 1.4 1.4h12a1.4 1.4 0 0 0 1.4-1.4v-1.2'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------------------
   3. Base e superfici del browser
   --------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/*
	 * La testata sticky non deve coprire il titolo di sezione all'ancoraggio.
	 * Il valore deve stare SOPRA l'altezza vera della barra, che cresce con lo
	 * schermo: 5,5rem fisse erano 88px contro una barra desktop di circa 110,
	 * e le ancore arrivavano ventidue pixel troppo in alto - il titolo finiva
	 * sotto la testata. Qui cresce insieme a lei.
	 */
	scroll-padding-top: clamp(5.5rem, 6vw + 3rem, 8rem);
	-webkit-text-size-adjust: 100%;
}

/* Vince sui global styles generati da theme.json, che arrivano prima. */
html body {
	background-color: var(--met-bg);
	color: var(--met-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/*
 * `overflow-x: hidden` crea un contenitore di scorrimento e disattiva
 * `position: sticky` sui discendenti: la testata smetterebbe di restare in
 * alto durante lo scorrimento. `clip` taglia allo stesso modo senza creare
 * quel contenitore.
 */
@supports (overflow-x: clip) {
	html body { overflow-x: clip; }
}

/* Il colore dei link cambia col tema, quindi non puo' stare in theme.json. */
:root a:where(:not(.wp-element-button):not(.met-btn)) {
	color: var(--met-accent-text);
}

/* Le superfici che non disegniamo noi arrivano comunque dal marchio. */
::selection {
	background: var(--met-magenta);
	color: #fff;
}

* {
	caret-color: var(--met-accent-text);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--met-accent-text);
	outline-offset: 3px;
	border-radius: 3px;
}

@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar { width: 11px; height: 11px; }
	::-webkit-scrollbar-track { background: var(--met-bg); }
	::-webkit-scrollbar-thumb {
		background: var(--met-line);
		border-radius: 99px;
		border: 3px solid var(--met-bg);
	}
	::-webkit-scrollbar-thumb:hover { background: var(--met-line-strong); }
}

@supports not selector(::-webkit-scrollbar) {
	html { scrollbar-color: var(--met-line) var(--met-bg); }
}

.met-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--met-magenta);
	color: var(--met-on-accent);
	font-weight: 700;
	border-radius: 0 0 var(--met-radius) 0;
}

.met-skip-link:focus { left: 0; }

.met-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   4. Testata
   --------------------------------------------------------------------------- */

/*
 * Lo sticky va sul contenitore che WordPress genera attorno alla parte di
 * template: applicarlo all'elemento interno lo aggancerebbe dentro quel
 * wrapper, che e' alto quanto la testata, e la barra scorrerebbe via.
 */
.met-header-slot {
	position: sticky;
	top: 0;
	z-index: 50;
}

.met-header {
	background: var(--met-header-bg);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: var(--met-rule);
}

@supports not (backdrop-filter: blur(1px)) {
	.met-header { background: var(--met-bg); }
}

@media (prefers-reduced-transparency: reduce) {
	.met-header {
		background: var(--met-bg);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/*
 * Il filo del bus in testata dice quanto si e' letto. E' la stessa immagine
 * del banner - energia che percorre una linea - portata su una barra che sta
 * gia' li'. Usa le animazioni guidate dallo scorrimento: nessun listener,
 * nessun lavoro a ogni fotogramma, e dove non sono supportate non compare.
 */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.met-header { position: relative; }

		.met-header::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1px;
			height: 2px;
			transform: scaleX(0);
			transform-origin: left center;
			background: var(--wp--preset--gradient--bus);
			animation: met-read-progress linear both;
			animation-timeline: scroll(root block);
		}

		@keyframes met-read-progress {
			to { transform: scaleX(1); }
		}
	}
}

/* ---------------------------------------------------------------------------
   La testata sopra il banner
   ---------------------------------------------------------------------------
   Sulla home la testata galleggia sopra il banner invece di stargli sopra: la
   sezione comincia dal bordo dello schermo, non da sotto la barra. E' quello
   che fa sembrare il banner davvero a tutto schermo.

   Tre stati, e ognuno risponde a cosa c'e' dietro:

     in cima al banner      nessun fondo, logo e testi chiari
     sopra una fascia scura  fondo scuro al 50%, logo e testi chiari
     su fondo chiaro         fondo chiaro al 50%, colori del tema

   "Fascia scura" non e' solo il banner: anche la banda delle credenziali lo
   e', e mentre le passa sopra la barra deve cambiare anche li'. Con il fondo
   chiaro al 50% sopra un fondo quasi nero il menu diventava illeggibile.

   Lo stato di mezzo esiste per una ragione precisa: il banner e' alto piu'
   schermate, e una barra bianca al 50% sopra un fondo quasi nero diventa una
   macchia grigia con il testo che non si legge. La barra prende il colore di
   cio' che le passa sotto.

   Le classi le mette site.js, guardando dove sta il bordo basso del banner.
   --------------------------------------------------------------------------- */

body.home .met-header-slot {
	/* Altezza zero: la barra non occupa spazio e il banner le passa sotto.
	   Una testata sticky copre comunque il contenuto mentre si scorre, quindi
	   l'unica differenza e' da dove comincia la pagina. */
	height: 0;
	overflow: visible;
}

/* Il layout a flusso di WordPress separa i blocchi di primo livello con un
   margine. Sotto una testata alta zero quel margine non separa piu' niente:
   diventa una striscia di pagina chiara che spunta sopra il banner. */
body.home .met-header-slot + * { margin-block-start: 0; }

/* Sopra il banner: chiaro su scuro, in tutti e due i temi. */
html.is-over-dark .met-header {
	--met-text: #F5F5F6;
	--met-muted: #D2D2DA;
	--met-line: rgba(245, 245, 246, 0.14);
	--met-line-strong: rgba(245, 245, 246, 0.42);
	--met-surface: rgba(245, 245, 246, 0.12);
	--met-accent-text: #FF4FA3;

	color: var(--met-text);
	border-bottom-color: transparent;
}

/* In cima: nessun fondo, la barra sparisce dentro la scena. */
html.is-over-dark:not(.is-scrolled) .met-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Si comincia a scorrere ma si e' ancora sul banner: fondo scuro al 50%. */
html.is-over-dark.is-scrolled .met-header {
	background: rgba(10, 10, 13, 0.5);
	border-bottom-color: rgba(245, 245, 246, 0.12);
}

/*
 * La barra occupa tutta la larghezza dello schermo: logo all'estrema sinistra,
 * menu all'estrema destra. Senza questo, la riga interna resta dentro la
 * colonna da 1240px e su uno schermo largo logo e menu si ritrovano a meta'
 * strada, con due fasce vuote ai lati.
 */
.met-header {
	/* Il margine laterale della barra lo decide questa riga, non il padding
	   globale del tema: la testata e' l'unico elemento che deve arrivare quasi
	   a toccare i bordi dello schermo. */
	padding-inline: clamp(1rem, 1.9vw, 2rem);
}

.met-header .wp-block-group.alignwide {
	max-width: none;
	padding-inline: 0;
}

/* Logo: due file, uno per tema. L'inchiostro scuro sparirebbe sul fondo scuro
   e viceversa, quindi non basta un filtro. */
.met-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
}

/*
 * IL LOGO ORA PORTA IL PAYOFF, e questo cambia due cose.
 *
 * L'altezza. Nel logo completo il monogramma occupa il 77% dell'altezza e la
 * scritta "TECHNOLOGY SOLUTIONS SRL" il resto. Tenendo i 34px di prima, la
 * scritta sarebbe alta 8 pixel: ci sarebbe senza potersi leggere, che e' il
 * peggio dei due mondi. A 50px la scritta arriva a 11-12 pixel e si legge.
 *
 * Il telefono. Anche a 50px, su uno schermo stretto il logo mangerebbe mezza
 * testata. Sotto i 600px si torna al solo monogramma - ma senza caricare un
 * secondo file: la proporzione del riquadro viene portata a quella del solo
 * marchio e l'immagine, ancorata in alto, mostra solo quella parte. Un file,
 * due forme.
 */
/*
 * IL RESPIRO DELLA TESTATA.
 *
 * Lo spazio sopra e sotto il logo sta qui e non nel blocco, per due motivi:
 * cresce con lo schermo, e si puo' stringere sul telefono senza dover
 * scavalcare uno stile in linea con !important.
 *
 * Il logo e' alto 64px: con una ventina di pixel sopra e sotto la barra
 * arriva a ~108px e il marchio smette di sembrare incastrato fra i bordi.
 * Sul telefono il valore scende da solo, perche' li' l'elemento piu' alto
 * e' il pulsante e la barra non deve mangiarsi lo schermo.
 */
/*
 * Lo spazio sopra e sotto la testata sta QUI e non nel blocco: scritto nel
 * blocco diventerebbe uno stile in linea, che batte qualunque regola CSS, e
 * per stringerlo sul telefono servirebbe un !important.
 */
.met-header .alignwide {
	padding-block: clamp(0.85rem, 2.2vw, 1.4rem);
}

.met-logo img {
	display: block;
	height: 64px;
	width: auto;
}

.met-logo .met-logo__on-dark { display: none; }
:root[data-theme="dark"] .met-logo .met-logo__on-light { display: none; }
:root[data-theme="dark"] .met-logo .met-logo__on-dark { display: block; }

/* Sopra il banner comanda il fondo, non il tema. */
html.is-over-dark .met-header .met-logo__on-light { display: none; }
html.is-over-dark .met-header .met-logo__on-dark { display: block; }

.met-footer .met-logo img { height: 78px; }

/* La navigazione resta su una sola riga da desktop. */
.met-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.008em;
}

.met-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--met-muted);
	padding-block: 0.4rem;
	transition: color 0.2s var(--met-ease);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.met-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.met-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--met-text);
}

.met-header .wp-block-navigation .wp-block-navigation-item.met-nav-current > .wp-block-navigation-item__content {
	color: var(--met-text);
	border-bottom-color: var(--met-magenta);
}

/*
 * Su schermi stretti la barra deve stare su una riga sola: logo, menu,
 * interruttore e invito a chiamare. Il contenitore non va a capo, quindi
 * senza questi limiti l'unico elemento comprimibile - il pulsante - si
 * schiaccia fino a mandare la parola a capo lettera per lettera.
 *
 * Si stringe quello che si puo' stringere, e si blocca quello che non deve:
 * un invito all'azione o si legge o non serve a niente.
 */
/*
 * LA TESTATA SOTTO I 375px.
 *
 * Logo, panino, interruttore del tema e pulsante "Chiamaci" stanno su una
 * riga sola, tutti con flex:none: la larghezza minima e' fissa. Sotto i
 * ~372px sfora, e siccome il body ha overflow-x: clip (che serve a non
 * rompere la testata sticky) l'eccedenza non produce scorrimento laterale:
 * viene tagliata in silenzio sull'ultimo elemento, cioe' sul pulsante che
 * chiama. A 360px - la larghezza Android piu' diffusa - si mangia il
 * padding; a 320px sparisce mezza parola.
 *
 * Il min-width: 0 sul gruppo di destra e' la parte che conta per il futuro:
 * senza, un'eccedenza nuova torna invisibile invece di mostrarsi.
 */
@media (max-width: 399px) {
	.met-header .alignwide { padding-inline: 0.75rem; }
	.met-header .alignwide > .wp-block-group { gap: 0.4rem; min-width: 0; }
	/* ALTEZZA, non larghezza: il marchio e' orizzontale (495x168), e
	   stringerlo in larghezza lo schiaccia invece di rimpicciolirlo. */
	.met-header .met-logo img { height: 28px; width: auto; }
}

@media (max-width: 639px) {
	/* Sotto i 600px resta il solo monogramma: il payoff non si leggerebbe.
	   Il ritaglio lo fa la proporzione, non un secondo file. */
	.met-logo img {
		height: 34px;
		aspect-ratio: 1332 / 347;
		object-fit: cover;
		object-position: top center;
	}

	.met-header .alignwide > .wp-block-group { gap: 0.55rem; }

	/*
	 * Anche lo spazio FRA logo e gruppo di destra, non solo dentro il gruppo.
	 * Con il logo ingrandito, il margine fra blocchi ereditato dal tema
	 * bastava a mandare il pulsante "Chiamaci" oltre il bordo dello schermo:
	 * la pagina scorreva di lato di sette pixel, e il pulsante era tagliato.
	 */
	.met-header .alignwide {
		gap: 0.6rem;
	}


	.met-header__cta { flex: none; }

	.met-header__cta .wp-block-button__link {
		white-space: nowrap;
		padding-inline: 0.85rem !important;
		font-size: 0.875rem !important;
	}

	/* Piu' specifici del necessario di proposito: la definizione
	   dell interruttore arriva dopo, in questo foglio. */
	.met-header .met-theme-toggle {
		width: 48px;
		height: 27px;
	}

	.met-header .met-theme-toggle__knob {
		width: 21px;
		height: 21px;
		top: 2px;
		left: 2px;
	}

	:root[data-theme="dark"] .met-header .met-theme-toggle__knob { transform: translateX(21px); }

	.met-header .met-theme-toggle__knob svg { width: 13px; height: 13px; }
}

/*
 * IL PULSANTE "CHIAMACI" C'E' SOLO DOVE IL MENU E' CHIUSO.
 *
 * Sopra i 900px il menu e' aperto e mostra gia' "Contatti": un pulsante
 * accanto che porta allo stesso posto e' una ripetizione, e in testata le
 * ripetizioni costano attenzione. Sotto, il menu si chiude nel pulsante a
 * panino e le voci spariscono: li' un recapito diretto serve davvero, perche'
 * chi apre il sito dal telefono spesso vuole solo chiamare.
 *
 * Non e' "nascondere sul desktop": e' metterlo dove manca qualcosa.
 * La soglia e' la stessa del menu a comparsa - se si sposta quella, va
 * spostata anche questa, o si crea una fascia di larghezze in cui non c'e'
 * ne' il menu ne' il pulsante.
 */
@media (min-width: 900px) {
	/*
	 * Il selettore e' doppio per forza: WordPress scrive
	 * `body .is-layout-flex { display: flex }`, che vale (0,1,1) per via del
	 * `body`. Una classe sola perde, e il pulsante resta visibile senza che
	 * si capisca perche' - la regola c'e', e non fa niente.
	 * Due classi fanno (0,2,0) e vincono. Nessun !important: bastava contare.
	 */
	.met-header .met-header__cta { display: none; }
}

/*
 * Il menu a comparsa arriva fino al tablet.
 *
 * WordPress lo apre solo sotto i 600px, ma fra i 600 e i 900 la barra non ci
 * sta su una riga sola: le voci vanno a capo e l invito a chiamare si spezza
 * a meta parola. Sopra quella soglia la barra orizzontale respira, sotto
 * serve il pulsante.
 */
@media (max-width: 899px) {
	.met-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.met-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.met-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/* Il comando del menu a comparsa nasce grande quanto la sua icona. */
.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Menu a comparsa su mobile.
   E' un pannello pieno, quindi si riprende i colori del tema: sopra il banner
   la testata li ha ridefiniti per il fondo scuro, e senza questo il menu
   aperto sarebbe testo bianco su fondo bianco. */
.wp-block-navigation__responsive-container.is-menu-open {
	--met-text: #191A1E;
	--met-muted: #56565F;

	background-color: var(--met-bg) !important;
	color: var(--met-text) !important;
	padding-top: 5rem;
}

:root[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
	--met-text: #F2F2F3;
	--met-muted: #A2A2AB;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--met-text);
	font-size: 1.5rem;
	font-family: var(--wp--preset--font-family--display);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--met-text);
}

/* Le voci seguono la colonna della pagina, non il bordo destro dello schermo:
   aperto, il menu deve sembrare la stessa pagina, non un pannello a parte. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive {
	/* La lista nasce stretta attorno al testo e spinta a destra, perche' la
	   navigazione da desktop e allineata a destra. Aperta a tutto schermo
	   quella regola non serve piu a niente: qui torna larga e a sinistra.
	   La classe in piu nel selettore serve a vincere sulla regola di WordPress,
	   che ha la stessa specificita. */
	width: 100%;
	align-items: flex-start;
	/* Il pannello ha gia' il suo margine laterale: aggiungerne un altro qui
	   porterebbe le voci al doppio della distanza del resto della pagina. */
	padding-inline: 0;
}

/* Il comando di chiusura nasce grande quanto la sua icona. */
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Interruttore del tema --- */

.met-theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
	width: 58px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--met-line-strong);
	border-radius: 99px;
	background: var(--met-surface);
	cursor: pointer;
	transition: background 0.25s var(--met-ease), border-color 0.25s var(--met-ease);
	-webkit-tap-highlight-color: transparent;
}

.met-theme-toggle:hover { border-color: var(--met-magenta); }

/*
 * L'interruttore e' alto 32px per stare nella barra, ma un dito ha bisogno di
 * 44. L'area sensibile si allarga con uno pseudo-elemento invece che con del
 * padding: il disegno resta quello, il bersaglio diventa quello giusto.
 */
.met-theme-toggle::after {
	content: "";
	position: absolute;
	/* 27px di altezza sul telefono, 32 altrove: nove per lato portano il
	   bersaglio oltre i 44px richiesti in entrambi i casi. */
	inset: -9px -4px;
}

/* Il cursore scorre: e' l'affordance che dice "questo si sposta". */
.met-theme-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--met-magenta);
	display: grid;
	place-items: center;
	color: var(--met-on-accent);
	transition: transform 0.28s var(--met-ease);
	will-change: transform;
}

:root[data-theme="dark"] .met-theme-toggle__knob {
	transform: translateX(26px);
}

.met-theme-toggle__knob svg {
	width: 15px;
	height: 15px;
	display: block;
	/* Le due icone occupano la stessa cella: se per qualunque ragione si
	   vedessero entrambe si sovrapporrebbero, invece di impilarsi una sotto
	   l'altra e sfondare il cursore. */
	grid-area: 1 / 1;
}

/*
 * Sole visibile in chiaro, luna in scuro: una sola icona per volta.
 *
 * I selettori includono il cursore di proposito. Scritti come semplici classi
 * perdevano il confronto con la regola qui sopra, che da' display:block a ogni
 * svg del cursore: nel tema chiaro si vedevano tutte e due le icone, con la
 * luna che spuntava sotto il sole.
 */
.met-theme-toggle__knob .met-theme-toggle__moon { display: none; }
:root[data-theme="dark"] .met-theme-toggle__knob .met-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .met-theme-toggle__knob .met-theme-toggle__moon { display: block; }

@media (prefers-reduced-motion: reduce) {
	.met-theme-toggle__knob { transition: none; }
}

/* Finche' il JS non e' pronto l'interruttore non deve promettere nulla. */
.no-js .met-theme-toggle { display: none; }

/* ---------------------------------------------------------------------------
   5. Banner a schermo pieno
   ---------------------------------------------------------------------------
   La sezione e' alta piu' schermate e dentro c'e' un palco agganciato in alto,
   alto uno schermo. Mentre la pagina scorre sotto, il palco resta davanti agli
   occhi: e' questo che fa entrare i quattro blocchi uno per volta, invece di
   farli passare via tutti insieme.

   L'altezza della sezione non e' spazio vuoto: e' la durata dell'animazione.

   Il banner resta scuro anche nel tema chiaro: e' l'unico salto di tema della
   pagina ed e' voluto. Ridefinendo i token qui dentro, tutto cio' che ci sta
   dentro - testo, bordi, bottone secondario - si adegua da solo.
   --------------------------------------------------------------------------- */

.met-hero {
	--met-text: #F5F5F6;
	--met-muted: #A8A8B2;
	--met-line: #24242B;
	--met-line-strong: #3E3E48;
	--met-surface-2: #16161A;
	--met-accent-text: #FF4FA3;
	--met-lime-text: #A8D62C;

	/*
	 * La corsa: quanto si scorre prima che il banner lasci la scena.
	 *
	 * Il testo entra in quattro tempi piu' i pulsanti, e si completa entro i
	 * due terzi della corsa: quello che resta serve al pianeta per finire di
	 * girare e alla sezione per uscire. Piu' lunga di cosi' diventa attesa -
	 * e chi cerca un elettricista non e' venuto per guardare un pianeta.
	 */
	--met-hero-run: 240vh;

	position: relative;
	isolation: isolate;
	min-height: var(--met-hero-run);
	background: #06060C;
	color: var(--met-text);
	/*
	 * `clip` e non `hidden`: hidden creerebbe un contenitore di scorrimento e
	 * disattiverebbe lo sticky del palco, che e' tutto il meccanismo. E' la
	 * stessa trappola gia' incontrata sul body.
	 */
	overflow: clip;
}

/* Il palco: alto uno schermo, resta agganciato in alto per tutta la corsa. */
.met-hero__stage {
	position: sticky;
	top: 0;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	overflow: clip;
	/*
	 * Il margine del palco si misura in altezza di schermo, non in larghezza.
	 * Con i vw, su un portatile largo e basso il margine cresceva con la
	 * larghezza mentre lo spazio verticale non c'era: il palco sforava la
	 * finestra e i pulsanti finivano sotto il bordo, irraggiungibili.
	 */
	padding-block: clamp(3rem, 8vh, 6.5rem) clamp(2.5rem, 6vh, 5rem);
}

/*
 * Il banner non segue la colonna del resto della pagina: il testo si accosta
 * al bordo sinistro molto di piu'. E' l'unica sezione a tutto schermo, e la
 * colonna centrata le lasciava a sinistra una fascia di nero vuoto che non
 * diceva niente.
 */
.met-hero .met-hero__stage {
	padding-inline: clamp(1.5rem, 4vw, 4.5rem);
}

/* Il layout a flusso di WordPress separa i figli con un margine. Qui i figli
   sono la scena, che sta fuori dal flusso, e il testo: quel margine
   sposterebbe soltanto il testo verso il basso senza separare niente. */
.met-hero__stage > * { margin-block: 0; }

/* Il layout "constrained" di WordPress impone un max-width a ogni figlio non
   allineato. Scena e velo devono coprire tutto il palco. */
.met-hero__stage > .met-hero__canvas,
.met-hero__stage > .met-hero__scrim {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.met-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	display: block;
	/* Sfondo di ripiego finche' la scena non ha disegnato, o se il canvas 2D
	   non e' disponibile: il banner non e' mai un rettangolo nero. */
	background:
		radial-gradient(110rem 66rem at 86% 8%, rgba(216, 1, 119, 0.26), transparent 62%),
		radial-gradient(72rem 48rem at 4% 94%, rgba(135, 176, 31, 0.10), transparent 60%),
		radial-gradient(92rem 64rem at 24% 34%, rgba(72, 44, 150, 0.22), transparent 66%),
		radial-gradient(135rem 100rem at 52% 52%, rgba(22, 18, 42, 0.6), transparent 74%),
		#06060C;
}

/*
 * Velo sopra la scena animata. Tre strati sovrapposti, ognuno con un compito
 * preciso; l'ordine conta, il primo dichiarato sta sopra:
 *
 * 1. dissolvenza ai bordi - i nodi non vengono tranciati dal filo del
 *    banner e non vanno a sbattere contro la testata;
 * 2. vignettatura - spinge lo sguardo dove la rete e' piu' fitta;
 * 3. lastra da sinistra - tiene il contrasto del testo sopra qualunque
 *    cosa la scena stia disegnando in quel momento.
 */
.met-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6, 6, 12, 0.72) 0%, rgba(6, 6, 12, 0) 13%, rgba(6, 6, 12, 0) 78%, #06060C 100%),
		radial-gradient(132% 112% at 54% 44%, rgba(6, 6, 12, 0) 40%, rgba(6, 6, 12, 0.34) 100%),
		linear-gradient(
			100deg,
			rgba(6, 6, 12, 0.80) 0%,
			rgba(6, 6, 12, 0.56) 34%,
			rgba(6, 6, 12, 0.12) 66%,
			rgba(6, 6, 12, 0) 100%
		);
}

/* Su telefono il testo sta sopra la scena, non accanto: la lastra diventa
   verticale, ma le dissolvenze ai bordi restano.

   E la corsa si accorcia: sul telefono si scorre a spinte, e con una corsa
   lunga le quattro entrate si saltano tutte in un gesto solo. */
@media (max-width: 781px) {
	.met-hero { --met-hero-run: 190vh; }

	.met-hero__scrim {
		background:
			linear-gradient(180deg, rgba(8, 8, 10, 0.72) 0%, rgba(8, 8, 10, 0) 12%, rgba(8, 8, 10, 0) 84%, #08080A 100%),
			radial-gradient(120% 60% at 50% 26%, rgba(8, 8, 10, 0) 30%, rgba(8, 8, 10, 0.5) 100%),
			linear-gradient(180deg, rgba(8, 8, 10, 0.22) 0%, rgba(8, 8, 10, 0.70) 44%, rgba(8, 8, 10, 0.88) 100%);
	}
}

/*
 * Il palco e un contenitore flex, e in un contenitore flex la larghezza di
 * base di un figlio e quella del suo contenuto: senza questo il blocco di
 * testo si stringe attorno alle parole e i margini automatici di WordPress lo
 * portano al centro, fuori dalla colonna su cui e allineata tutta la pagina.
 * Con flex-grow torna a comportarsi da blocco, e il max-width di alignwide
 * riprende il comando.
 */
.met-hero .met-hero__stage > .met-hero__inner {
	flex: 1 1 auto;
	/* Via il tetto di alignwide: qui la misura la danno il titolo e i
	   paragrafi, ognuno con la propria. */
	max-width: none;
}

/* Il titolo del banner e' l'unico punto della pagina in cui il carattere
   arriva a questo corpo, e a questo corpo la spaziatura normale si sfalda:
   qui si stringe, e le righe si accostano. */
.met-hero h1 {
	/* La misura del titolo e sua, non del contenitore: sotto ci sono
	   paragrafi che vogliono una riga molto piu corta. */
	max-width: 46rem;
	text-wrap: balance;
	letter-spacing: -0.042em;
	line-height: 0.98;
	/* Alone scuro dietro le lettere. La scena e' viva e un cavo puo'
	   passare esattamente sopra una gambetta: il velo protegge la zona,
	   questo protegge il singolo glifo, e nessuno dei due spegne la rete. */
	text-shadow: 0 1px 26px rgba(8, 8, 10, 0.9);
}

/* A schermo pieno il titolo puo' crescere, ma solo dove c'e' anche l'altezza
   per reggerlo: su uno schermo basso quattro blocchi e un titolo enorme non ci
   stanno, e il banner andrebbe in overflow proprio mentre e' agganciato. */
@media (min-width: 1100px) and (min-height: 740px) {
	.met-hero h1 {
		max-width: 58rem;
		font-size: clamp(3.6rem, 6vw, 6.5rem);
	}


	.met-hero__lede {
		max-width: 40rem;
		font-size: clamp(1.2rem, 1.55vw, 1.45rem);
	}
}

/*
 * Schermo largo ma basso - il portatile tipico. Il titolo si ridimensiona
 * perche' quattro blocchi e i pulsanti ci stiano tutti senza sforare il palco.
 * Sta fuori dal blocco qui sopra di proposito: quello chiede almeno 740px di
 * altezza, e non entrerebbe mai in funzione proprio dove serve.
 */
@media (min-width: 1100px) and (max-height: 820px) {
	.met-hero h1 { font-size: clamp(3rem, 4.6vw, 4.6rem); }
}

.met-hero__lede {
	max-width: 34rem;
	color: var(--met-muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	text-shadow: 0 1px 18px rgba(8, 8, 10, 0.92);
}

/* L'ultima riga e' quella che deve restare: prende il colore pieno del testo
   e un po' di peso, cosi' chiude invece di aggiungersi. */
.met-hero__step--c {
	color: var(--met-text);
	font-weight: 600;
}

/* Il bottone secondario prende i colori dal tema: se li fissassimo nel markup
   resterebbe illeggibile in uno dei due. */
.met-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--met-text);
	border: 1px solid var(--met-line-strong);
}

.met-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.met-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--met-surface-2);
	border-color: var(--met-magenta);
	color: var(--met-text);
}

/* --- Le quattro entrate ---------------------------------------------------
 *
 * Ogni blocco entra con un gesto suo. Non sono quattro effetti diversi per
 * fare varieta': sono quattro modi di dire la stessa cosa, che e' poi quella
 * che dice tutta la pagina - la corrente arriva e accende.
 *
 *   titolo    si scopre da sotto e mette a fuoco: la corrente tocca le parole
 *   primo     arriva da sinistra, lungo il filo del bus
 *   secondo   si accende sul posto, come un nodo che entra in servizio
 *   terzo     si posa dal basso, ed e' l'ultima cosa che si legge
 *   pulsanti  salgono per ultimi, quando c'e' qualcosa da fare
 *
 * La classe `is-in` la mette site.js in base a quanto si e' scorso, e la
 * toglie tornando su: le entrate si possono rivedere, come il fronte di
 * accensione della scena si ritira. Le due cose raccontano lo stesso gesto.
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	/*
	 * IL TITOLO E' ESCLUSO, e non e' un dettaglio: e' l'elemento LCP della
	 * pagina. Finche' nasceva a opacity 0 come gli altri, la prima schermata
	 * dipendeva da site.js - ultimo script del body, dopo 101 KB di jQuery del
	 * modulo - e l'LCP misurato su mobile era 4,3 s, di cui 2,1 s di sola
	 * attesa. Adesso entra con una animazione di solo CSS che parte al primo
	 * disegno, e lo stato finale coincide con quello di .is-in: quando lo
	 * script arriva e aggiunge la classe non succede niente.
	 */
	.met-hero__step:not(.met-hero__step--title) {
		opacity: 0;
		transition:
			opacity 0.8s var(--met-ease),
			transform 1s var(--met-ease),
			filter 1s var(--met-ease),
			clip-path 1s var(--met-ease);
	}

	.met-hero__step--title {
		animation: met-title-in 0.9s var(--met-ease) both;
	}

	@keyframes met-title-in {
		from {
			opacity: 0;
			clip-path: inset(0 0 108% 0);
			transform: scale(1.1) translateY(1.75rem);
			filter: blur(18px);
		}
		to {
			opacity: 1;
			clip-path: inset(0 0 -30% 0);
			transform: none;
			filter: blur(0);
		}
	}

	.met-hero__step--a   { transform: translateX(-5.5rem); filter: blur(13px); }
	.met-hero__step--b   { transform: scale(0.74); filter: blur(15px); }
	.met-hero__step--c   { transform: translateY(4.5rem); filter: blur(11px); }
	.met-hero__step--cta { transform: translateY(2.75rem) scale(0.9); filter: blur(7px); }

	.met-hero__step.is-in {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}

	.met-hero__step--title.is-in { clip-path: inset(0 0 -30% 0); }

	/*
	 * IL FUOCO ACCENDE IL PASSO. Un elemento nascosto con la sola opacity
	 * resta nell'ordine di tabulazione: i due pulsanti del banner erano i tab
	 * stop 12 e 13 mentre stavano a opacity 0, e siccome l'anello di focus e'
	 * anch'esso trasparente chi naviga da tastiera attraversava l'invito
	 * principale del sito senza vedere niente (WCAG 2.4.7). Il palco e'
	 * sticky, quindi nemmeno lo scorrimento automatico del browser li
	 * rivelava. Specificita' 0,2,0: vince sulle varianti --a/--b/--c/--cta.
	 */
	.met-hero__step:focus-within {
		opacity: 1;
		transform: none;
		filter: none;
		clip-path: none;
		transition: none;
	}

	/*
	 * LA RETE DI SICUREZZA. Lo script inline nella testata toglie .no-js
	 * subito, ma le classi di ingresso le mette site.js, in fondo al body:
	 * nel mezzo il ripiego non c'e' piu' e le classi non ci sono ancora. Se
	 * site.js non arriva - rete che cade, errore a meta' file, blocco degli
	 * script - il visitatore resta davanti a una colonna vuota, modulo
	 * contatti compreso.
	 *
	 * met-js-pending la mette lo stesso script inline e la toglie site.js
	 * come ULTIMA istruzione. Se non succede, dopo otto secondi questa
	 * animazione riporta tutto visibile. Nel percorso normale non si vede mai.
	 */
	.met-js-pending .met-hero__step,
	.met-js-pending .met-reveal {
		animation: met-failsafe 1ms linear 8s forwards;
	}

	@keyframes met-failsafe {
		to {
			opacity: 1;
			transform: none;
			filter: none;
			clip-path: none;
		}
	}

	/* Il filo del bus si tira per primo: e' il segnale che l'impianto e' in
	   tensione, e da li' parte tutto il resto. */
	.met-hero .met-thread {
		transform-origin: left center;
		animation: met-thread-draw 0.85s var(--met-ease) both;
	}

	@keyframes met-thread-draw {
		from { transform: scaleX(0); opacity: 0; }
		to   { transform: scaleX(1); opacity: 1; }
	}
}

/*
 * Invito allo scorrimento: la parola e una freccia che scende, in basso al
 * centro del palco. E' un comando vero - porta ai servizi - non un ornamento:
 * chi non capisce che il banner si scorre ha comunque una via d'uscita, e chi
 * naviga da tastiera ci arriva in tabulazione.
 *
 * Sparisce appena si comincia a scorrere: ha gia' detto quello che doveva.
 */
.met-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(0.75rem, 2.5vh, 1.75rem);
	transform: translateX(-50%);
	margin: 0;
	z-index: 1;
	transition: opacity 0.45s var(--met-ease);
}

.met-hero__scroll a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.3rem 0.9rem;
	color: var(--met-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s var(--met-ease);
}

.met-hero__scroll a::after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.met-hero__scroll a:hover,
.met-hero__scroll a:focus-visible { color: var(--met-text); }

.met-hero.is-moving .met-hero__scroll {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	/* La freccia scende e risale. La classe la mette l'osservatore che gia'
	   governa la scena: fuori schermo non gira niente. */
	.met-hero.is-onscreen .met-hero__scroll a::after {
		animation: met-scroll-giu 1.9s cubic-bezier(0.45, 0, 0.35, 1) infinite;
	}

	@keyframes met-scroll-giu {
		0%   { transform: translateY(-5px); opacity: 0.35; }
		45%  { transform: translateY(4px); opacity: 1; }
		100% { transform: translateY(-5px); opacity: 0.35; }
	}
}

/*
 * Schermo basso: un telefono girato, una finestra schiacciata, un portatile
 * piccolo. Qui il palco agganciato e' una trappola: il contenuto e' piu' alto
 * della finestra, il palco resta inchiodato in alto, e quello che sborda sotto
 * - gli inviti all'azione - non si raggiunge piu' in nessun modo.
 *
 * Sotto questa soglia si rinuncia alla coreografia e si torna a una fascia che
 * scorre normalmente, con tutto gia' scritto. Un banner che si legge vale piu'
 * di un banner che si anima.
 */
@media (max-height: 620px) {
	.met-hero { min-height: 0; }

	.met-hero__stage {
		position: static;
		min-height: 100dvh;
		padding-block: clamp(4rem, 13vh, 5.5rem) clamp(2.5rem, 9vh, 4rem);
	}

	.met-hero__step {
		opacity: 1;
		transform: none;
		filter: none;
		clip-path: none;
	}

}

/* ---------------------------------------------------------------------------
   Bersagli tattili
   ---------------------------------------------------------------------------
   Un dito ha bisogno di piu' spazio di un puntatore. Dove il disegno chiede un
   elemento piccolo, si allarga l'area sensibile senza toccare il disegno.
   --------------------------------------------------------------------------- */

.met-header .met-logo { min-height: 44px; }

.met-about__where-link {
	min-height: 44px;
	align-items: center;
}

/* Le voci in elenco non sono link dentro una frase: vanno prese col dito. */
.met-footer ul a,
.met-footer__legal a {
	display: inline-block;
	padding-block: 5px;
}

.met-contact__item a {
	display: inline-block;
	padding-block: 3px;
}

/* La casella del consenso: l'etichetta e' gia' cliccabile per intero, ma la
   casella in se' deve restare presa-bile anche da sola. */
.met-consent {
	grid-template-columns: 24px 1fr;
}

.met-consent input {
	width: 24px;
	height: 24px;
}

/*
 * Senza movimento il banner non e' piu' un palco: diventa una schermata sola,
 * con tutto gia' scritto. La corsa in altezza sparisce, altrimenti resterebbero
 * tre schermate di nero da attraversare per niente.
 *
 * Stessa cosa senza JavaScript: nessuno metterebbe `is-in` e i quattro blocchi
 * resterebbero invisibili per sempre.
 */
@media (prefers-reduced-motion: reduce) {
	.met-hero { min-height: 0; }

	.met-hero__stage {
		position: static;
		min-height: 100dvh;
	}

	.met-hero__step {
		opacity: 1;
		transform: none;
		filter: none;
		clip-path: none;
	}
}

.no-js .met-hero { min-height: 0; }

.no-js .met-hero__stage {
	position: static;
	min-height: 100dvh;
}

.no-js .met-hero__step {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: none;
}

/* Filo lime-magenta che lega hero e sezione KNX: e' il segnale "bus".
   Reso con il blocco Separatore, quindi vanno azzerati i suoi stili nativi. */
.met-thread,
hr.wp-block-separator.met-thread {
	display: block;
	width: 68px;
	max-width: 68px;
	height: 3px;
	margin: 0;
	border: 0;
	border-radius: 99px;
	opacity: 1;
	background: var(--wp--preset--gradient--bus);
}

/* ---------------------------------------------------------------------------
   6. Contenitori a griglia: neutralizzare il blockGap di WordPress
   ---------------------------------------------------------------------------
   Ogni gruppo a blocchi riceve `.is-layout-flow > * + * { margin-block-start:
   <blockGap> }`. Dove il gruppo diventa una griglia o una riga flex, quel
   margine non separa piu' nulla: sposta le celle in basso e le disallinea.
   La spaziatura la governa `gap`, quindi il margine va azzerato.
   --------------------------------------------------------------------------- */

.met-services > *,
.met-knx > *,
.met-about > *,
.met-facts > *,
.met-contact > *,
.met-footer__grid > *,
.met-footer__legal > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
   7. Ritmo delle sezioni
   --------------------------------------------------------------------------- */

.met-section {
	padding-block: var(--wp--preset--spacing--70);
	position: relative;
}

/*
 * Il divisore fra una sezione e la precedente.
 *
 * Due agganci per la stessa cosa, e non e' un doppione:
 * - .met-section--line e' quello scritto nei pattern e nel tema;
 * - .is-style-divisore lo scrive WordPress quando il cliente sceglie la voce
 *   "Divisore sopra la sezione" dal pannello Stili del blocco.
 *
 * Il secondo e' agganciato a .met-section di proposito: la voce compare su
 * tutti i blocchi Gruppo - WordPress non sa scoparla - ma disegna la riga solo
 * dove una riga ha senso, cioe' fra due sezioni.
 */
.met-section--line,
.met-section.is-style-divisore { border-top: var(--met-rule); }

/*
 * I Lavori respirano meno delle altre sezioni, e non e' un capriccio: sopra
 * c'e' la fascia delle immagini di servizio, che col suo fondo colorato separa
 * gia' da sola, e il suo intervallo interno si somma a questo. Con il respiro
 * pieno di una sezione, fra la fascia e il titolo "Lavori" restavano 196px di
 * niente - misurati a 1280px di finestra.
 *
 * Sopra e sotto non sono uguali, e non e' una svista: sopra c'e' la fascia,
 * che separa da se', mentre sotto c'e' fondo neutro e serve un respiro vero
 * prima della sezione seguente. Un valore simmetrico lascerebbe troppo aria in
 * alto o troppo poca in basso.
 *
 * Il valore sta fuori dalla scala del tema di proposito: la scala ha 3rem e
 * poi salta a clamp(4rem, 8vw, 6.5rem), e il punto giusto era in mezzo.
 *
 * Nessun !important e nessun ID: stessa specificita' di .met-section (0,1,0),
 * vince perche' viene dopo.
 */
.met-section--lavori { padding-block: clamp(0.75rem, 2vw, 1.75rem) clamp(2rem, 4vw, 3.5rem); }

/*
 * Con il divisore, il respiro sopra torna pieno.
 *
 * Il valore ridotto qui sopra vale quando la sezione segue qualcosa che separa
 * gia' da se' - una fascia colorata, un fondo diverso. Un filo da un pixel non
 * separa: lo fa il vuoto che ha intorno, e schiacciato a 27px dal titolo
 * sembra un errore invece di una scelta.
 *
 * Cosi' lo spazio segue il divisore da solo: aggiungendo o togliendo la classe
 * met-section--line dall'editor, non c'e' nient'altro da sistemare.
 */
.met-section--lavori.met-section--line,
.met-section--lavori.is-style-divisore { padding-top: clamp(2rem, 4vw, 3.5rem); }

/*
 * LA FASCIA GRIGIA, A TUTTA LARGHEZZA.
 *
 * Stesso fondo del pie' di pagina - var(--met-surface) - cosi' la sezione si
 * stacca dal bianco delle altre. Il token ha la sua variante scura, quindi
 * funziona in entrambi i temi senza scrivere due colori.
 *
 * PERCHE' UNO PSEUDO-ELEMENTO E NON background SULLA SEZIONE. Lavori e'
 * alignwide, e deve restarlo: il suo layout e' "default", quindi la larghezza
 * della sezione E' quella delle schede. Portandola a alignfull per avere il
 * fondo pieno, le schede diventerebbero larghe quanto la finestra.
 *
 * Il rettangolo esce dal contenitore con 100vw, e sta dietro al contenuto con
 * z-index -1. I pochi pixel che sborda oltre la barra di scorrimento li taglia
 * il body con overflow-x: clip, senza produrre scorrimento laterale.
 *
 * UN SOLO PSEUDO-ELEMENTO PER DUE LAVORI: il divisore e' il bordo alto di
 * questo stesso rettangolo. Impilarne due sarebbe stato piu' fragile e non
 * avrebbe aggiunto niente.
 */
.met-section--lavori {
	position: relative;
}

.met-section--lavori::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--met-surface);
	z-index: -1;
	pointer-events: none;
}

/* Il divisore: bordo alto della fascia, non della sezione. */
.met-section--lavori.met-section--line,
.met-section--lavori.is-style-divisore { border-top: 0; }

.met-section--lavori.met-section--line::before,
.met-section--lavori.is-style-divisore::before { border-top: var(--met-rule); }

.met-section__head {
	max-width: 44rem;
	margin-bottom: var(--wp--preset--spacing--60);
}

.met-section__head p {
	color: var(--met-muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	margin-top: 1.1rem;
	max-width: 42rem;
}

/* ---------------------------------------------------------------------------
   8. Servizi: nove schede, tre per riga
   --------------------------------------------------------------------------- */

.met-services {
	display: grid;
	gap: 1px;
	background: var(--met-line);
	border: var(--met-rule);
	border-radius: var(--met-radius-lg);
	overflow: hidden;
	/*
	 * Dodici colonne: due voci di punta da 6 e quattro da 3.
	 * Il conto torna esatto a ogni breakpoint, cosi' nessuna riga resta
	 * con celle vuote in coda.
	 */
	/*
	 * TRE COLONNE, NON DODICI.
	 *
	 * Prima la griglia era a 12 colonne con due schede larghe il doppio: con
	 * sei servizi funzionava, con nove no - le schede in evidenza avrebbero
	 * spezzato le righe lasciando buchi in coda.
	 *
	 * Nove su tre colonne fanno tre righe piene. E' il motivo per cui sono
	 * nove: se il numero cambia, questa griglia va rivista, perche' una riga
	 * con una cella vuota in fondo si nota subito.
	 */
	grid-template-columns: repeat(3, 1fr);
}

/*
 * Le fughe da 1px fra le schede sono il cablaggio di questa sezione: e' il
 * fondo del contenitore che si vede passare fra una cella e l'altra. Basta
 * dipingere quel fondo con una luce che segue il puntatore perche' il
 * cablaggio si accenda sotto la mano, senza velare una sola riga di testo.
 *
 * Le coordinate arrivano da site.js come percentuali, una volta per
 * fotogramma; l'intensita' passa da una proprieta' registrata, cosi' puo'
 * essere animata invece di comparire di colpo.
 */
@property --met-glow {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@media (hover: hover) and (pointer: fine) {
	.met-services {
		--met-glow: 0;
		transition: --met-glow 0.45s var(--met-ease);
		background-image: radial-gradient(
			16rem 16rem at var(--met-mx, 50%) var(--met-my, 50%),
			color-mix(in srgb, var(--met-magenta) calc(var(--met-glow) * 100%), transparent),
			transparent 62%
		);
	}

	.met-services:hover,
	.met-services:focus-within { --met-glow: 1; }
}

/* La scheda sotto il puntatore riceve il filo del bus sul bordo alto: e'
   l'energia che arriva fin li'. */
.met-service::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--wp--preset--gradient--bus);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--met-ease);
}

.met-service:hover::after,
.met-service:focus-within::after { transform: scaleX(1); }

.met-service {
	background: var(--met-surface);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	position: relative;
	transition: background 0.3s var(--met-ease);
	grid-column: auto;
}

/* Le due voci di punta occupano piu' spazio e cambiano superficie. */
/* Classi esplicite invece di :nth-of-type: se il cliente riordina le voci
   dall'editor, la superficie resta legata alla voce giusta. */
.met-service:hover { background: var(--met-surface-2); }

.met-service.met-ico::before {
	width: 30px;
	height: 30px;
	margin-bottom: 0.45rem;
	color: var(--met-accent-text);
}


.met-service h3 {
	font-size: 1.1875rem;
	line-height: 1.25;
	letter-spacing: -0.018em;
	margin: 0;
}


.met-service p {
	color: var(--met-muted);
	font-size: 0.9688rem;
	line-height: 1.6;
	margin: 0;
	max-width: 38ch;
}

/* Tablet: due per riga, tre righe piene. */
/*
 * Nove schede su DUE colonne farebbero quattro righe piene piu' una spaiata.
 * DUE colonne fra 600 e 1023px, non una.
 *
 * Il salto da tre a una produceva schede larghe 700-830px con il paragrafo
 * tappato a 38 caratteri: meta' scheda vuota, nove volte di fila, due
 * schermate e mezza di sezione. Il timore degli "orfani" che giustificava il
 * salto e' gia' risolto altrove in questo stesso file - .met-job e .met-work
 * usano la regola qui sotto - quindi non c'era motivo di pagarlo qui.
 */
@media (min-width: 600px) and (max-width: 1023px) {
	.met-services { grid-template-columns: repeat(2, 1fr); }

	/* L'ultima scheda, quando il totale e' dispari, si prende la riga intera:
	   niente cella vuota in coda, qualunque sia il numero di servizi. */
	.met-services > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Telefono: colonna singola. */
@media (max-width: 599px) {
	.met-services { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   9. KNX: la sezione differenziante
   --------------------------------------------------------------------------- */

.met-knx {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
	/* La prospettiva sta sul contenitore, non sulla tessera: e' la stanza
	   che ha profondita', l'oggetto dentro si limita a girare. */
	perspective: 1200px;
}

.met-knx__text h2 { margin-bottom: 1.25rem; }

.met-knx__text p {
	color: var(--met-muted);
	line-height: 1.65;
}

.met-knx__text p + p { margin-top: 1rem; }

.met-knx__points {
	list-style: none;
	margin: 1.9rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.met-knx__points li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0.85rem;
	align-items: start;
	color: var(--met-text);
	font-size: 0.9688rem;
	line-height: 1.55;
}

.met-knx__points li::before {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--met-lime-text);
}

/*
 * Tessera della certificazione. E' l'unico oggetto fisico della pagina - un
 * documento - quindi e' l'unico che si comporta come tale: segue il
 * puntatore di pochi gradi, come una tessera tenuta in mano sotto una luce.
 * Gli angoli arrivano da site.js; senza JavaScript resta perfettamente
 * piatta e non manca niente.
 */
.met-cert {
	background: var(--met-surface);
	border: var(--met-rule);
	border-radius: var(--met-radius-lg);
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	box-shadow: var(--met-shadow);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.met-cert {
		transform: rotateX(var(--met-rx, 0deg)) rotateY(var(--met-ry, 0deg));
		/* Al rilascio torna piana con calma; sotto il puntatore insegue
		   stretto, altrimenti sembrerebbe in ritardo sulla mano. */
		transition: transform 0.65s var(--met-ease), box-shadow 0.65s var(--met-ease);
	}

	.met-cert:hover {
		transition-duration: 0.12s;
		box-shadow:
			0 32px 60px -28px rgba(25, 26, 30, 0.34),
			0 2px 0 0 rgba(216, 1, 119, 0.12);
	}

	:root[data-theme="dark"] .met-cert:hover {
		box-shadow:
			0 32px 60px -24px rgba(0, 0, 0, 0.85),
			0 2px 0 0 rgba(255, 79, 163, 0.18);
	}
}

/* Il logo KNX ufficiale vive su bianco: gli diamo la sua targa in entrambi
   i temi, invece di ricolorarlo (sarebbe un uso scorretto del marchio). */
.met-cert__logo {
	background: #fff;
	border: 1px solid var(--met-line);
	border-radius: var(--met-radius);
	padding: 1.25rem 1.5rem;
	display: grid;
	place-items: center;
	margin-bottom: 1.5rem;
}

.met-cert__logo img {
	display: block;
	width: 100%;
	max-width: 210px;
	height: auto;
}

/*
 * Le tessere sono due e stanno una sotto l'altra nella colonna di destra.
 * Su schermo stretto la colonna si impila sotto il testo e le tessere
 * restano in fila: non serve altro.
 */
.met-certs {
	display: grid;
	gap: clamp(1.25rem, 2.4vw, 2rem);
	align-content: start;
}

/*
 * La tessera Combivox non ha un logo ufficiale nel tema: al suo posto il nome
 * composto col carattere display, spaziato. Quando arriva il file vero, questa
 * regola sparisce e torna un blocco Immagine come quello del KNX.
 */
/*
 * Il logo Combivox ha due colori suoi, un rosso e un grigio. Non si ricolora:
 * un marchio altrui si usa come lo da' chi lo possiede.
 *
 * Il grigio pero' su fondo scuro si legge appena. La soluzione non e'
 * cambiargli colore ma dargli una LASTRA CHIARA sotto - e' quello che fanno
 * tutti i marchi ospitati su fondi scuri, ed e' anche quello che le linee
 * guida dei produttori di solito prescrivono.
 */
/* La misura del logo Combivox sta qui e non nell'<img> del pattern: scritta
   li' rendeva il blocco Immagine non valido in editor, perche' width e height
   non sono attributi che quel blocco sa rileggere dall'HTML (trappola AE). */
.met-cert__logo--combivox img {
	height: 34px;
	width: auto;
	display: block;
}

:root[data-theme="dark"] .met-cert__logo--combivox {
	background: #FFFFFF;
	border-radius: var(--met-radius);
	padding: 0.7rem 0.9rem;
	width: fit-content;
}

/* Il link esce dal sito: si comporta da link, non da pulsante travestito. */
.met-cert__link {
	margin-top: 1.25rem !important;
	font-size: 0.875rem;
	line-height: 1.45;
}

.met-cert__link a {
	color: var(--met-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.met-cert__row {
	align-items: baseline;
	gap: 1rem;
	padding: 0.8rem 0;
}

.met-cert__row + .met-cert__row { border-top: var(--met-rule); }

/*
 * Su schermo stretto etichetta e valore non ci stanno affiancati: il valore
 * va a capo e si allinea a destra su due righe, che si legge male. Impilati
 * e allineati a sinistra sono una scheda, non una tabella schiacciata.
 */
@media (max-width: 479px) {
	.met-cert__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
	}

	.met-cert__val { text-align: left; }
}

.met-cert__row > * { margin-block: 0; }

.met-cert__key {
	color: var(--met-muted);
	font-size: 0.875rem;
}

.met-cert__val {
	font-weight: 700;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Il blocco Immagine porta i propri margini di figure. */
.met-cert__logo.wp-block-image { margin: 0 0 1.5rem; }

/* Il certificato e' un documento, non un link di testo: merita un bersaglio
   cliccabile pieno, con peso e formato dichiarati prima del clic. */
.met-cert .met-cert__download-legacy {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.5rem;
	padding: 0.85rem 1.1rem;
	min-height: 48px;
	border: 1px solid var(--met-line-strong);
	border-radius: var(--met-radius);
	color: var(--met-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: border-color 0.2s var(--met-ease), background 0.2s var(--met-ease);
}

.met-cert .met-cert__download:hover,
.met-cert .met-cert__download:focus-visible {
	border-color: var(--met-magenta);
	background: var(--met-surface-2);
	text-decoration: none;
}

/* Blocco File di WordPress: nome del documento a sinistra, pulsante a destra. */
.met-cert__file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1.5rem 0 0;
	padding-top: 1.4rem;
	border-top: var(--met-rule);
}

.met-cert__file > a:first-child {
	color: var(--met-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.met-cert__file > a:first-child:hover { color: var(--met-accent-text); }

.met-cert__file .wp-block-file__button {
	background: var(--met-magenta);
	color: var(--met-on-accent);
	border-radius: var(--met-radius);
	padding: 0.7rem 1.3rem;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	opacity: 1;
}

.met-cert__file .wp-block-file__button:hover { background: var(--met-magenta-hover); }

.met-cert__download span { display: grid; gap: 2px; }

.met-cert__download small {
	font-weight: 500;
	font-size: 0.8125rem;
	color: var(--met-muted);
}

@media (max-width: 899px) {
	.met-knx { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   10. Chi siamo: impaginazione editoriale
   --------------------------------------------------------------------------- */

.met-about {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.met-about__year {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(4.5rem, 11vw, 8rem);
	line-height: 0.86;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--met-line-strong);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.met-about__year-label {
	display: block;
	margin-top: 1rem;
	color: var(--met-muted);
	font-size: 0.9375rem;
	max-width: 17rem;
	line-height: 1.5;
}

.met-about__text p {
	color: var(--met-muted);
	line-height: 1.7;
	max-width: 68ch;
}

.met-about__text p + p { margin-top: 1.15rem; }

.met-about__text strong {
	color: var(--met-text);
	font-weight: 700;
}

.met-about__where {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-top: 1.75rem;
	border-top: var(--met-rule);
}

.met-about__where h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--met-muted);
	margin: 0 0 0.8rem;
}

.met-about__address {
	font-style: normal;
	color: var(--met-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.55;
}

.met-about__where-note {
	margin: 0.9rem 0 0;
	color: var(--met-muted);
	font-size: 0.9062rem;
	line-height: 1.55;
}

.met-about__where-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--met-accent-text);
	text-decoration: none;
}

.met-about__where-link.met-ico::before { width: 18px; height: 18px; }
.met-about__where-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   I lavori: cinque card a tutta larghezza
   ---------------------------------------------------------------------------
   Stanno fuori dalla colonna della pagina e attraversano lo schermo: sono
   fotografie, e una fotografia stretta dentro una colonna di testo non mostra
   niente. Sotto ognuna un titolo e una riga, perche' una foto senza didascalia
   in una pagina di servizi e' decorazione.

   Entrano scaglionate e reagiscono al passaggio del puntatore: la scheda si
   alza appena e la fotografia dentro la cornice si avvicina. Il ritardo di
   entrata si legge dall'ordine nel documento, quindi aggiungere o togliere una
   card non richiede di toccare niente.
   --------------------------------------------------------------------------- */

/*
 * La fila delle cinque foto appoggia su una fascia grigio chiara che
 * attraversa lo schermo.
 *
 * Non e' decorazione: la fascia stacca le fotografie dal testo che le precede
 * e le tiene insieme come una cosa sola, invece di lasciarle galleggiare sul
 * fondo pagina come cinque oggetti sparsi. E' la stessa superficie che usano
 * i campi del modulo e il pie' di pagina, quindi non introduce un colore
 * nuovo nel sistema.
 *
 * Nel tema scuro il token diventa una superficie scura: una fascia chiara su
 * una pagina scura sarebbe una lampada in faccia.
 */
/* ---------------------------------------------------------------------------
   Lavori: schede con foto, titolo e due righe
   ---------------------------------------------------------------------------
   La sezione non e' in pagina: sta nell'inseritore, pronta da trascinare
   quando ci saranno le fotografie. Il CSS pero' c'e' gia', altrimenti il
   giorno che la si inserisce si vedrebbe un elenco senza forma.

   Tre colonne: tre, sei o nove schede fanno righe piene. Con quattro o cinque
   l'ultima riga resta con una cella vuota, e si nota.
   --------------------------------------------------------------------------- */

/*
 * RIGHE DA DUE, CON L'ORFANA A TUTTA LARGHEZZA.
 *
 * Queste schede raccontano un lavoro fatto: la fotografia deve reggere lo
 * sguardo, non fare da miniatura. Due per riga, quindi - il doppio abbondante
 * di una delle immagini di servizio qui sotto, che sono cinque in fila proprio
 * perche' fanno un'altra cosa: elencano.
 *
 * Il problema di una griglia a due colonne e' il numero dispari: l'ultima
 * scheda resterebbe da sola in mezza riga, con un buco accanto. La regola qui
 * sotto lo risolve senza far pensare a niente chi riempie la sezione:
 *
 *   1 lavoro   -> una scheda a tutta larghezza
 *   2 lavori   -> una riga da due
 *   3 lavori   -> una riga da due, poi una a tutta larghezza
 *   4 lavori   -> due righe da due
 *
 * :last-child:nth-child(odd) si legge cosi': "l'ultima scheda, se la sua
 * posizione e' dispari" - e l'ultima e' in posizione dispari solo quando il
 * totale e' dispari. Nessun conteggio da fare a mano, nessun JavaScript.
 */
.met-jobs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 3.2vw, 3rem);
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}

.met-job:last-child:nth-child(odd) { grid-column: 1 / -1; }

/*
 * La scheda larga il doppio non puo' tenere la stessa proporzione: un 3:2 su
 * 1240px diventerebbe alto 827px, quasi uno schermo intero solo di fotografia.
 * Il 2:1 la tiene a 620px e ritaglia un decimo scarso dall'alto e dal basso -
 * il taglio non si nota, l'altezza si'.
 */
.met-job:last-child:nth-child(odd) .met-job__shot { aspect-ratio: 2 / 1; }

.met-jobs > * { margin-block: 0; }

.met-job__shot {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--met-radius);
	/* Un gradino piu' scuro della fascia della sezione: cosi' una scheda senza
	   fotografia mostra comunque che la foto manca, invece di sparire nel
	   fondo. */
	background: var(--met-surface-2);
	margin: 0 0 1.1rem;
}

.met-job__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Il titolo cresce con la scheda: su una card larga il doppio, il carattere di
   prima sembrerebbe una didascalia. */
.met-job__title {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	line-height: 1.22;
	letter-spacing: -0.018em;
	margin: 0 0 0.6rem;
}

.met-job__note {
	color: var(--met-muted);
	font-size: 0.9688rem;
	line-height: 1.6;
	margin: 0;
	/* Su una scheda larga 596px la riga piena arriva a circa 79 caratteri, un
	   filo oltre la soglia in cui l'occhio fatica a ritrovare il capo. Il
	   limite la tiene sotto, senza stringerla al punto da sembrare una
	   colonna a parte dentro la scheda. */
	max-width: 62ch;
}

@media (max-width: 599px) {
	.met-jobs { grid-template-columns: 1fr; }

	/* A colonna singola sono tutte a tutta larghezza e nessuna e' orfana:
	   l'eccezione non ha piu' senso e la proporzione torna quella delle
	   altre. Stessa specificita' della regola sopra (0,3,0), vince perche'
	   viene dopo. */
	.met-job:last-child:nth-child(odd) .met-job__shot { aspect-ratio: 3 / 2; }
}


.met-works {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(0.75rem, 1.4vw, 1.5rem);
	margin-top: clamp(3rem, 7vw, 5.5rem);
	padding-inline: clamp(1rem, 2.4vw, 2.75rem);
	/* Lo spazio sopra e sotto e' quello che fa leggere il colore come una
	   fascia e non come un bordo attaccato alle foto. */
	padding-block: clamp(2rem, 4vw, 3.25rem);
	background: var(--met-surface);
	border-block: var(--met-rule);
}

.met-works > * { margin-block: 0; }

.met-work {
	display: flex;
	flex-direction: column;
}

/*
 * Il sollevamento sta sulla cornice e non sulla scheda per una ragione
 * pratica: la scheda porta il ritardo di entrata scaglionato, e se portasse
 * anche il passaggio del mouse l'ultima card reagirebbe con un terzo di
 * secondo di ritardo. Due gesti diversi, due elementi diversi.
 */
.met-work__shot {
	margin: 0 0 1rem;
	overflow: hidden;
	border-radius: var(--met-radius-lg);
	aspect-ratio: 3 / 2;
	background: var(--met-surface-2);
	box-shadow: var(--met-shadow);
	transition: transform 0.45s var(--met-ease), box-shadow 0.45s var(--met-ease);
}

.met-work__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--met-ease);
}

.met-work__title {
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -0.018em;
	margin: 0 0 0.4rem;
}

.met-work__note {
	margin: 0;
	color: var(--met-muted);
	font-size: 0.9062rem;
	line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
	.met-work:hover .met-work__shot {
		transform: translateY(-8px);
		box-shadow: 0 28px 52px -26px rgba(25, 26, 30, 0.42);
	}

	:root[data-theme="dark"] .met-work:hover .met-work__shot {
		box-shadow: 0 28px 52px -22px rgba(0, 0, 0, 0.85);
	}

	.met-work:hover .met-work__shot img { transform: scale(1.07); }
}

/* Lo scaglionamento: ogni card parte un filo dopo la precedente, e la fila si
   compone da sinistra invece di comparire tutta insieme. */
@media (prefers-reduced-motion: no-preference) {
	/* Il ritardo va sullo stato di arrivo: una transizione legge le proprie
	   durate da dove sta andando, non da dove viene. */
	.met-works .met-work.is-visible:nth-child(2) { transition-delay: 90ms; }
	.met-works .met-work.is-visible:nth-child(3) { transition-delay: 180ms; }
	.met-works .met-work.is-visible:nth-child(4) { transition-delay: 270ms; }
	.met-works .met-work.is-visible:nth-child(5) { transition-delay: 360ms; }
}

@media (max-width: 1099px) {
	.met-works { grid-template-columns: 1fr 1fr; }

	/* Cinque in due colonne lasciano una spaiata: l'ultima prende tutta la
	   riga e si allarga, cosi' la fila chiude invece di interrompersi. */
	.met-work:nth-child(5) { grid-column: 1 / -1; }
	.met-work:nth-child(5) .met-work__shot { aspect-ratio: 21 / 9; }
}

@media (max-width: 599px) {
	.met-works { grid-template-columns: 1fr; }
	.met-work:nth-child(5) .met-work__shot { aspect-ratio: 3 / 2; }
}

@media (max-width: 899px) {
	.met-about { grid-template-columns: 1fr; }

	/*
	 * Impilate, le due colonne perdono il senso che avevano affiancate: si
	 * leggerebbero l'anno di fondazione e l'indirizzo prima ancora di sapere
	 * di che sezione si tratta. Il titolo torna davanti.
	 */
	.met-about__text { order: 1; }

	.met-about__aside {
		order: 2;
		margin-top: clamp(2.25rem, 7vw, 3.25rem);
	}
}

/* ---------------------------------------------------------------------------
   11. Credenziali: banda orizzontale, nessuna scheda
   --------------------------------------------------------------------------- */

/*
 * La sezione appoggia sulla precedente: la banda scura fa gia' da stacco.
 * Sotto, lo stacco e' piu' corto di una sezione intera - la fascia piena e'
 * gia' una cesura forte, e aggiungerci tutto lo spazio canonico allontanava
 * la certificazione senza motivo.
 */
.met-section--tight {
	padding-block: 0 clamp(3rem, 6vw, 5rem);
}

/*
 * Chi siamo chiude con una fila di fotografie a tutta larghezza: sotto non
 * serve lo stacco pieno, le immagini hanno gia' chiuso il discorso.
 */
/* La sezione ora chiude con la fascia grigia, che porta gia' il suo spazio:
   sommarci anche lo stacco di fine sezione allontanerebbe i contatti senza
   motivo. Resta il minimo che separa la fascia dal bordo della sezione. */
#chi-siamo { padding-block-end: 0; }
#contatti { padding-block-start: clamp(3rem, 6vw, 5rem); }

/*
 * Banda scura in entrambi i temi, come il banner. I token ridefiniti qui
 * dentro tengono leggibili cifre e didascalie senza regole doppie.
 */
.met-facts {
	--met-text: #F5F5F6;
	--met-muted: #A8A8B2;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: center;
	background: #101014;
	border-radius: var(--met-radius-lg);
	padding: clamp(2.25rem, 4.5vw, 3.25rem) clamp(1.75rem, 4vw, 3rem);
	min-height: 200px;
	position: relative;
	overflow: hidden;
	/*
	 * La banda attraversa lo schermo da bordo a bordo: niente angoli
	 * arrotondati, che su una fascia piena sembrerebbero un riquadro finito
	 * per sbaglio in mezzo alla pagina. Il margine interno tiene comunque le
	 * cifre sulla colonna del resto del sito.
	 */
	border-radius: 0;
	padding-inline: max(var(--wp--preset--spacing--40), calc((100% - 1240px) / 2));
}

/*
 * Le quattro credenziali stanno su una linea sola, ed e' vero anche alla
 * lettera: il filo del bus attraversa la banda mentre entra in vista. Senza
 * animazioni guidate dallo scorrimento la linea c'e' comunque, intera.
 */
.met-facts::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--wp--preset--gradient--bus);
	transform-origin: left center;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.met-facts::before {
			animation: met-bus-trace linear both;
			animation-timeline: view();
			animation-range: entry 15% cover 45%;
		}

		@keyframes met-bus-trace {
			from { transform: scaleX(0); }
			to   { transform: scaleX(1); }
		}
	}
}


.met-fact {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.met-fact > * { margin-block: 0; }

.met-fact__value {
	/* Cifre tabulari: durante il conteggio la larghezza non oscilla. */
	font-variant-numeric: tabular-nums;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2rem, 4.2vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--met-text);
	display: block;
}

.met-fact__label {
	display: block;
	margin-top: 0.7rem !important;
	color: var(--met-muted);
	font-size: 0.9062rem;
	line-height: 1.45;
}

@media (max-width: 899px) {
	.met-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
	.met-facts { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   12. Contatti e modulo
   --------------------------------------------------------------------------- */

.met-contact {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	align-items: start;
}

.met-form { display: grid; gap: 1.15rem; }

.met-field { display: grid; gap: 0.45rem; }

.met-field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--met-text);
}

.met-field .met-req {
	color: var(--met-accent-text);
	margin-left: 2px;
}

/* Le caselle di spunta non sono campi di testo: senza questa esclusione si
   prendono bordo, riempimento e i 48px di altezza minima, e diventano
   quadrati grandi il doppio con il segno di spunta perso dentro. */
.met-field input:not([type="checkbox"]),
.met-field textarea {
	width: 100%;
	/* I controlli di modulo nascono content-box: senza questo, width:100%
	   piu' padding e bordi sfonda il contenitore sugli schermi stretti. */
	box-sizing: border-box;
	background: var(--met-surface);
	border: 1px solid var(--met-line-strong);
	border-radius: var(--met-radius);
	color: var(--met-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.8rem 0.95rem;
	transition: border-color 0.2s var(--met-ease), background 0.2s var(--met-ease);
	min-height: 48px;
}

.met-field textarea {
	min-height: 140px;
	resize: vertical;
}

.met-field ::placeholder {
	color: var(--met-muted);
	opacity: 1;
}

.met-field input:not([type="checkbox"]):hover,
.met-field textarea:hover { border-color: var(--met-muted); }

/* L'anello di focus NON si toglie: si veste.
   outline:none piu' il solo alone magenta al 18% dava 1,37:1 contro il bordo
   del campo, cioe' niente. L'outline vero resta sotto l'alone e sopravvive
   alla modalita' a contrasto elevato, dove le ombre non si vedono. */
.met-field input:not([type="checkbox"]):focus,
.met-field textarea:focus {
	border-color: var(--met-magenta);
	background: var(--met-bg);
	outline: 2px solid var(--met-magenta);
	outline-offset: 1px;
	box-shadow: 0 0 0 3px rgba(216, 1, 119, 0.18);
}

.met-field__help {
	font-size: 0.8125rem;
	color: var(--met-muted);
}

.met-field__error {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--met-error);
}

.met-field--invalid input:not([type="checkbox"]),
.met-field--invalid textarea { border-color: var(--met-error); }

/* Trappola anti-spam: nascosta alle persone, visibile ai bot. */
.met-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.met-consent {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: 0.8438rem;
	color: var(--met-muted);
	line-height: 1.5;
}

.met-consent input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--met-magenta);
}

/*
 * La casella e' alta 24px, una riga di testo poco piu' di 19: senza questo
 * scarto il testo resta appeso in alto e non sembra appartenere alla casella.
 * Si allinea la prima riga, non l'intero blocco, che su due righe scenderebbe.
 */
.met-consent > span { padding-top: 2px; }

.met-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	white-space: nowrap;
	background: var(--met-magenta);
	color: var(--met-on-accent);
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.004em;
	border: 0;
	border-radius: var(--met-radius);
	padding: 0.95rem 1.7rem;
	min-height: 48px;
	cursor: pointer;
	transition: background 0.2s var(--met-ease), transform 0.12s var(--met-ease);
}

.met-btn:hover { background: var(--met-magenta-hover); }
.met-btn:active { transform: translateY(1px); }

.met-btn[disabled],
.met-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.met-notice {
	border-radius: var(--met-radius);
	padding: 1rem 1.15rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	border: 1px solid;
	margin-bottom: 1.5rem;
}

.met-notice--ok {
	background: var(--met-ok-bg);
	border-color: var(--met-ok-border);
	color: var(--met-lime-text);
}

.met-notice--error {
	background: var(--met-error-bg);
	border-color: var(--met-error);
	color: var(--met-error);
}

.met-notice a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Il modulo di Fluent Forms
   ---------------------------------------------------------------------------
   Il plugin arriva con il proprio vestito, che non c'entra niente con il sito.
   Qui i campi tornano sui token del tema: stesse superfici, stessi bordi,
   stesso anello di focus, stesso pulsante del resto della pagina. Nessuna
   regola qui sotto introduce un colore che non esista gia'.

   Tutto e' agganciato a `.met-contact__form-col`: cosi' vale solo dove il
   modulo sta davvero, e non riscrive l'aspetto dei moduli che il cliente
   potrebbe aggiungere altrove.
   --------------------------------------------------------------------------- */

/*
 * IL RITMO DEL MODULO STA SUL FIELDSET, NON SUL FORM.
 *
 * Fluent Forms avvolge tutti i campi in un <fieldset>: il <form> ha un figlio
 * solo, quindi un `gap` messo li' non separa proprio niente. Con i margini del
 * plugin azzerati qui sotto, il risultato era un modulo senza respiro - e la
 * casella del consenso appiccicata all'area di testo sopra.
 */
.met-contact__form-col .frm-fluent-form > fieldset {
	display: grid;
	gap: 1.15rem;
	border: 0;
	margin: 0;
	padding: 0;
	/*
	 * Un fieldset ha una larghezza minima intrinseca, che il grid non sa
	 * ignorare: senza questa riga un campo lungo lo fa sbordare dalla colonna.
	 */
	min-inline-size: 0;
}

.met-contact__form-col .ff-el-group { margin: 0; }

/*
 * Il consenso non e' un altro campo: e' una dichiarazione che si spunta. Gli
 * serve piu' aria di quanta ne separi due campi fra loro, altrimenti si legge
 * come una riga dell'area di testo che sta sopra.
 */
.met-contact__form-col .ff-el-group:has( .ff-el-form-check ) {
	margin-top: 0.55rem;
}

.met-contact__form-col .ff-el-input--label {
	margin: 0 0 0.45rem;
}

.met-contact__form-col .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--met-text);
	margin: 0;
	padding: 0;
}

.met-contact__form-col .ff-el-is-required label::after {
	color: var(--met-accent-text);
	margin-left: 2px;
}

.met-contact__form-col .ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	background: var(--met-surface);
	border: 1px solid var(--met-line-strong);
	border-radius: var(--met-radius);
	color: var(--met-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.8rem 0.95rem;
	min-height: 48px;
	box-shadow: none;
	transition: border-color 0.2s var(--met-ease), background 0.2s var(--met-ease);
}

.met-contact__form-col textarea.ff-el-form-control {
	min-height: 140px;
	resize: vertical;
}

.met-contact__form-col .ff-el-form-control:hover { border-color: var(--met-muted); }

.met-contact__form-col .ff-el-form-control:focus {
	border-color: var(--met-magenta);
	background: var(--met-bg);
	outline: 2px solid var(--met-magenta);
	outline-offset: 1px;
	box-shadow: 0 0 0 3px rgba(216, 1, 119, 0.18);
}

.met-contact__form-col .ff-el-form-control::placeholder {
	color: var(--met-muted);
	opacity: 1;
}

.met-contact__form-col .ff-el-help-message {
	font-size: 0.8125rem;
	color: var(--met-muted);
	margin: 0.4rem 0 0;
	padding: 0;
}

/* Il consenso: casella e testo affiancati, con la prima riga centrata sulla
   casella - la stessa misura del modulo precedente. */
.met-contact__form-col .ff-el-form-check {
	margin: 0;
	padding: 0;
}

.met-contact__form-col .ff-el-form-check-label {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: 0.8438rem;
	color: var(--met-muted);
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

.met-contact__form-col .ff-el-form-check-input {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--met-magenta);
}

.met-contact__form-col .ff-el-form-check-label > span { padding-top: 2px; }

.met-contact__form-col .ff-el-form-check-label a { color: var(--met-accent-text); }

/* Gli errori del plugin parlano la lingua degli errori del sito. */
.met-contact__form-col .ff-el-is-error .ff-el-form-control { border-color: var(--met-error); }

.met-contact__form-col .error,
.met-contact__form-col .text-danger,
.met-contact__form-col .ff-el-is-error .error {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--met-error);
	margin: 0.35rem 0 0;
}

/* L'esito dell'invio: stessa fascia dei messaggi del resto del sito. */
.met-contact__form-col .ff-message-success {
	background: var(--met-ok-bg);
	border: 1px solid var(--met-ok-border);
	color: var(--met-lime-text);
	border-radius: var(--met-radius);
	padding: 1rem 1.15rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.met-contact__form-col .ff-errors-in-stack,
.met-contact__form-col .ff-error-message {
	background: var(--met-error-bg);
	border: 1px solid var(--met-error);
	color: var(--met-error);
	border-radius: var(--met-radius);
	padding: 1rem 1.15rem;
	font-size: 0.9375rem;
}

/* Il pulsante e' quello del sito, non quello del plugin. */
.met-contact__form-col .ff_submit_btn_wrapper { margin: 0.35rem 0 0; }

.met-contact__form-col .ff-btn-submit,
.met-contact__form-col .ff-btn-submit.ff_btn_style {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	white-space: nowrap;
	background: var(--met-magenta);
	color: var(--met-on-accent);
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.004em;
	border: 0;
	border-radius: var(--met-radius);
	padding: 0.95rem 1.7rem;
	min-height: 48px;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.2s var(--met-ease), transform 0.12s var(--met-ease);
}

.met-contact__form-col .ff-btn-submit:hover { background: var(--met-magenta-hover); }
.met-contact__form-col .ff-btn-submit:active { transform: translateY(1px); }

/* Recapiti */
.met-contact__info {
	display: grid;
	gap: 0;
	background: var(--met-surface);
	border: var(--met-rule);
	border-radius: var(--met-radius-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
}

.met-contact__item {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0 0.9rem;
	padding: 1.05rem 0;
	align-items: start;
}

/* L'icona occupa la prima colonna su entrambe le righe; titolo e testo
   stanno nella seconda, come blocchi separati e quindi modificabili. */
.met-contact__item.met-ico::before { grid-row: 1 / span 2; }
.met-contact__item > h3,
.met-contact__item > p { grid-column: 2; margin-block: 0; }

.met-contact__item + .met-contact__item { border-top: var(--met-rule); }

.met-contact__item.met-ico::before {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--met-accent-text);
}

.met-contact__item h3 {
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0;
	color: var(--met-muted);
	margin: 0 0 0.25rem;
}

.met-contact__item p,
.met-contact__item a,
.met-contact__item address {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--met-text);
	/* <address> arriva in corsivo dal foglio di stile del browser. */
	font-style: normal;
}

/* I recapiti restano testo; solo il rimando alla mappa si comporta da link. */
.met-contact__item address a { color: var(--met-accent-text); }

.met-contact__item a:hover {
	color: var(--met-accent-text);
	text-decoration: underline;
}

@media (max-width: 899px) {
	.met-contact { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Il popup di ingrandimento
   ---------------------------------------------------------------------------
   E' il lightbox nativo di WordPress, non un plugin: cliccando una foto dei
   lavori si apre ingrandita, con le frecce per passare alla successiva ed Esc
   per chiudere. Il velo dietro usa gia' il colore di fondo del tema, quindi
   segue da solo il chiaro e lo scuro.

   Qui si aggiunge una cosa sola, ma conta: il tetto all'ingrandimento.

   Il lightbox porta l'immagine a riempire lo schermo. Le nostre foto sono
   1400px sul lato lungo: su un monitor grande verrebbero tirate oltre la loro
   risoluzione vera, e si vedrebbe - una foto sgranata a tutto schermo e'
   peggio di una foto piu' piccola e nitida. Il tetto la ferma alla dimensione
   che ha davvero.

   Dalla card, che sul desktop e' larga circa 350px, sono comunque quattro
   volte tanto.
   --------------------------------------------------------------------------- */

/*
 * GLI STILI DELLA CARD NON DEVONO SEGUIRE LA FOTO DENTRO IL POPUP.
 *
 * Il lightbox ricopia le classi del blocco Immagine sulla figura ingrandita:
 * `met-work__shot` finisce li' dentro, e con essa il taglio 3:2, l'`object-fit:
 * cover` e il sollevamento al passaggio del puntatore. Risultato: la foto
 * aperta a schermo veniva ritagliata come nella card, cioe' si ingrandiva
 * senza mostrare niente di piu'. Qui quelle regole vengono disinnescate.
 */
/*
 * Il selettore e' volutamente lungo: deve BATTERE per specificita' le regole
 * della card, che valgono (0,3,0) - `.met-work:nth-child(5) .met-work__shot`
 * per il taglio panoramico della quinta, `.met-work:hover .met-work__shot`
 * per il sollevamento. Con due sole classi perdeva, e la quinta foto si
 * apriva nel popup ritagliata 21:9 come nella card: ingrandita, ma senza
 * mostrare un pixel in piu' di quello che si vedeva gia'.
 *
 * Aggiungere `.wp-block-image` porta a (0,3,0) e, stando piu' in basso nel
 * foglio, vince. Nessun !important: bastava contare.
 */
.wp-lightbox-overlay .wp-block-image.met-work__shot {
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

.wp-lightbox-overlay .wp-block-image.met-work__shot img {
	object-fit: contain;
	transform: none;
}

/*
 * Tetto all'ingrandimento: le foto sono 1400px sul lato lungo, e tirarle oltre
 * la loro risoluzione vera si vede. Meglio un'immagine un po' piu' piccola e
 * nitida che una a tutto schermo e molle. Dalla card, larga circa 260px, sono
 * comunque piu' di quattro volte tanto.
 */
.wp-lightbox-overlay .lightbox-image-container {
	max-width: 1400px;
	max-height: 933px;
}

/* Il puntatore dice che si puo' ingrandire, e che si puo' chiudere. */
.met-work__shot img { cursor: zoom-in; }

/* ---------------------------------------------------------------------------
   13. Piè di pagina
   --------------------------------------------------------------------------- */

.met-footer {
	/* Come la testata: il piede attraversa lo schermo, e il margine laterale
	   lo decide questa riga invece del padding globale del tema. */
	padding-inline: clamp(1rem, 1.9vw, 2rem);
	border-top: var(--met-rule);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	/* Stessa superficie dei campi del modulo: il footer si stacca dal corpo
	   pagina senza introdurre un colore nuovo nel sistema. */
	background: var(--met-surface);
}

.met-footer .wp-block-group.alignfull {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/*
 * Quattro colonne, non tre.
 *
 * Il piede attraversa lo schermo perche' il suo logo deve stare sulla stessa
 * verticale di quello della testata - riportarlo alla colonna del testo li
 * disallineerebbe. Ma tre colonne di poche righe, aperte su 1800px, si
 * leggevano come un piede vuoto piu' che come un piede largo. La quarta
 * colonna gli da' qualcosa da dire.
 */
.met-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.25rem);
}

/*
 * La misura del paragrafo del marchio, non la larghezza della sua colonna.
 * Su uno schermo largo quella colonna arriva a 700px: righe da centoventi
 * caratteri, che l'occhio perde tornando a capo. Sotto i 50 si legge.
 */
.met-footer__brand p { max-width: 46ch; }

/*
 * Il blocco del marchio prende un rientro da sinistra.
 *
 * Senza, logo e descrizione partono dal bordo esatto dello schermo: tecnicamente
 * allineati alla testata, ma in fondo alla pagina l'effetto e' di un testo che
 * scappa fuori dal foglio. La testata puo' permetterselo perche' e' una barra
 * alta cento pixel; il pie' e' una superficie larga, e li' il bordo si sente.
 *
 * Il rientro vale per il marchio e per la riga legale sotto, che gli sta in
 * colonna: spostarne uno solo li disallineerebbe.
 */
.met-footer__brand {
	padding-left: clamp(0.75rem, 2vw, 2.25rem);
}

/*
 * La riga legale ha bisogno di tre classi per vincere: poco sopra,
 * `.met-footer .wp-block-group.alignfull` azzera il margine interno delle
 * fasce a tutta larghezza, e vale (0,3,0). Con due classi il rientro non si
 * vedeva, e la riga restava disallineata dal marchio che le sta sopra.
 *
 * Il rientro qui e' su entrambi i lati: la riga ha un testo a sinistra e uno
 * a destra, e spostarne uno solo la sbilancerebbe.
 */
.met-footer .wp-block-group.met-footer__legal {
	padding-inline: clamp(0.75rem, 2vw, 2.25rem);
}

.met-footer__brand .met-logo { margin-bottom: 1.1rem; }

.met-footer p,
.met-footer li,
.met-footer address {
	color: var(--met-muted);
	font-size: 0.9062rem;
	line-height: 1.6;
	font-style: normal;
}

.met-footer h2 {
	font-size: 0.8125rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--met-text);
	margin: 0 0 0.9rem;
}

.met-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.met-footer a { color: var(--met-muted); text-decoration: none; }
.met-footer a:hover { color: var(--met-accent-text); }

/* La certificazione sotto i recapiti: e' il dato che distingue MET, e nel
   piede vale piu' di un link in piu'. */
.met-footer__cert {
	margin-top: 0.85rem !important;
	font-size: 0.8125rem;
}

.met-footer__legal {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.5rem;
	border-top: var(--met-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	font-size: 0.8438rem;
	color: var(--met-muted);
}

/*
 * Quattro celle su due colonne fanno due righe piene. Far spanare il marchio
 * su tutta la riga, come prima, lascerebbe le altre tre spaiate: una riga con
 * un buco in coda si nota subito.
 */
@media (max-width: 899px) {
	.met-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 479px) {
	.met-footer__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   15. Movimento
   ---------------------------------------------------------------------------
   Un'idea sola, ripetuta a scale diverse: la luce percorre una linea.

   - il banner: l'energia attraversa i cavi e accende i nodi (assets/js/hero-3d.js);
   - la testata: il filo si riempie con la lettura;
   - i servizi: la luce segue la mano nelle fughe della griglia;
   - le credenziali: il filo attraversa la banda mentre entra;
   - la tessera KNX: l'unico oggetto fisico, e si comporta da oggetto.

   Il momento coreografato e' uno solo, il banner. Tutto il resto entra con
   un gesto quieto, da uno stato gia' leggibile: se il JavaScript non parte,
   la pagina resta intera.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.met-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.55s var(--met-ease), transform 0.65s var(--met-ease);
	}

	.met-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Il ritardo e' calcolato dall'indice, non da una cascata di classi. */
	.met-reveal[style*="--i"] { transition-delay: calc(var(--i) * 70ms); }

	/*
	 * I titoli di sezione non entrano come il testo che li segue: si
	 * scoprono da sotto, come una riga di stampa che esce dal rullo. E' la
	 * differenza fra una pagina che ha un ritmo e una in cui ogni cosa fa
	 * la stessa identica mossa.
	 *
	 * Il gruppo che li contiene rinuncia allo spostamento: due gesti
	 * sovrapposti sullo stesso elemento diventano fango.
	 */
	.met-section__head.met-reveal { transform: none; }

	.met-section__head h2 {
		clip-path: inset(0 0 105% 0);
		transition: clip-path 0.85s var(--met-ease);
	}

	.met-section__head.met-reveal.is-visible h2 {
		clip-path: inset(0 0 -20% 0);
	}
}

/*
 * Senza JavaScript nessuno aggiunge `is-visible`: quello che entra in scena
 * con un'animazione resterebbe invisibile per sempre. Qui la pagina torna
 * intera e ferma. Vale anche se uno script va in errore prima di partire.
 */
.no-js .met-reveal {
	opacity: 1;
	transform: none;
	filter: none;
}

.no-js .met-section__head h2 { clip-path: none; }

/*
 * Meno movimento non vuol dire nessun movimento: restano i cambi di colore
 * e di stato, che sono informazione. Spariscono gli spostamenti, le
 * sfocature e i cicli continui.
 */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.met-reveal {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.met-section__head h2 { clip-path: none; }

	/* Animazioni guidate dallo scorrimento: azzerarne la durata le
	   porterebbe di colpo a fine corsa. Vanno tolte, non accelerate. */
	.met-header::after { display: none; }

	.met-facts::before { animation: none; transform: none; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
   16. Stampa
   --------------------------------------------------------------------------- */

@media print {
	.met-header, .met-hero__canvas, .met-hero__scrim, .met-form { display: none; }
	html body { background: #fff; color: #000; }
	.met-logo__on-dark { display: none !important; }
	.met-logo__on-light { display: block !important; }

	/*
	 * Il banner e' alto 240vh per far scorrere la scena: in stampa diventano
	 * due o tre pagine quasi bianche prima del primo contenuto. E i testi che
	 * il JavaScript rivela scorrendo restano a opacity 0, quindi si stampava
	 * un foglio vuoto. In stampa non si scorre: l'altezza torna a quella del
	 * contenuto e tutto e' visibile.
	 */
	.met-hero { min-height: 0 !important; height: auto !important; }
	.met-hero__stage { position: static !important; }
	.met-hero__step,
	.met-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		animation: none !important;
	}

	/* La fascia grigia di Lavori e' decorazione, e su carta costa inchiostro:
	   resta solo il filo del divisore, che invece serve a separare. Si toglie
	   il fondo e non l'intero pseudo-elemento, perche' il filo e' il suo
	   bordo alto. */
	.met-section--lavori::before { background: none; }

	/* Un indirizzo stampato senza il suo collegamento e' un vicolo cieco:
	   accanto ai link esterni compare dove portano. */
	.met-main a[href^="http"]::after { content: " (" attr( href ) ")"; font-size: 0.85em; word-break: break-all; }
}