/* =====================================================================
   I DUE FONT, OSPITATI DA NOI
   Geist e Geist Mono (SIL Open Font License, progetto Vercel). Sono gli
   stessi che ho scelto come sostituti liberi di "Saans" e "BB Manual
   Mono" per la prova sul modello di anveril.com — quindi le due home
   parlano lo stesso alfabeto.

   I file stanno in assets/font/ invece di arrivare da Google: nessuna
   chiamata a un terzo da dichiarare nella cookie policy, prima resa piu'
   rapida, e la pagina funziona anche se fonts.googleapis.com non
   risponde. In tutto 136 KB, 12 file.
   Le licenze sono in assets/font/LICENZA-*.txt

   I file di Titillium Web e IBM Plex Mono (i font del modello del
   collega) restano nella cartella ma non sono piu' usati da nessuna
   pagina: si possono cancellare.
   ===================================================================== */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/geist-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/geist-latin-ext-400-normal.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('font/geist-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('font/geist-latin-ext-500-normal.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('font/geist-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('font/geist-latin-ext-600-normal.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: 'Geist';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('font/geist-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('font/geist-latin-ext-900-normal.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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/geist-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/geist-mono-latin-ext-400-normal.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: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('font/geist-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('font/geist-mono-latin-ext-500-normal.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;
}

body.wm {
  /* --- colore ---------------------------------------------------------
     Il modello del collega è su fondo nero. Qui è ribaltato: carta calda
     #f7f7f4 e testi in grigio, non in nero. I valori sono scelti col
     contrasto misurato su #f7f7f4:
       titoli    #4d4b45 ->  8,13:1  (grigio 70%)
       testo     #6d6b62 ->  4,98:1  (grigio 40%)
       etichette #6d6b62 ->  4,98:1
       piede     #33322e         (fondo scuro, bianco sopra a 12,8:1)
     Il #6d6b62 è il grigio piu' chiaro che tiene ancora la soglia AA
     (4,5:1) su questa carta: sopra il 42% di chiarezza il testo normale
     scende sotto, e si leggerebbe male su schermi poco contrastati.
     L'ARANCIONE È UNO SOLO: #f3a738, quello aziendale. Nessuna variante
     più scura o più chiara da nessuna parte — nemmeno per l'hover del
     pulsante, che schiarisce col filtro invece di cambiare colore.
     Da sapere: sopra le foto il velo scuro lo porta a 9,4:1, perfetto;
     su carta chiara come colore del TESTO fa 1,86:1, quindi i pochi
     testi arancioni su fondo chiaro (il contatore "01", il primo numero,
     le tre W) sono sotto la soglia di leggibilità. È una scelta
     dichiarata, non una dimenticanza.
     ------------------------------------------------------------------ */
  --wm-paper:    #f7f7f4;
  --wm-paper-2:  #efefe9;
  --wm-ink:      #4d4b45;   /* grigio 70%: e' il colore di TUTTI i titoli in bold */
  --wm-scuro:    #33322e;   /* solo il fondo del piede */
  --wm-ink-2:    #6d6b62;
  --wm-steel:    #6d6b62;
  --wm-border:   rgba(77, 75, 69, .20);
  --wm-border-2: rgba(77, 75, 69, .11);
  --wm-accent:   #f3a738;   /* arancione aziendale: l'unico della pagina */
  --wm-accent-2: var(--wm-accent);   /* era una variante scura: ora è lo stesso */
  --wm-white:    #fff;
  --wm-su-foto:  rgba(255, 255, 255, .82);   /* testo corrente sopra una foto */

  /* --- tipografia: UNA FAMIGLIA SOLA ---------------------------------
     In pagina se ne incrociavano quattro: Geist e Geist Mono da qui,
     piu' Sora e Inter che styles.css mette su intestazione, piede e
     mega-menu (e che su questa pagina non vengono nemmeno caricati,
     perche' il collegamento a Google Fonts non c'e' piu': cadevano sul
     font di sistema). Ora e' tutto Geist, header e footer compresi.

     Le etichette piccole maiuscole prima erano in Geist Mono: adesso
     sono Geist 500 con la spaziatura larga, che da' lo stesso effetto
     "tecnico" senza portarsi dietro una seconda famiglia. Le @font-face
     del mono restano dichiarate ma inutilizzate (il browser non scarica
     un font che non serve): per riaverlo basta rimettere qui
     "Geist Mono" al posto di var(--wm-display). */
  --wm-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --wm-mono:    var(--wm-display);

  /* --- misure -------------------------------------------------------- */
  --wm-gutter: clamp(20px, 4.4vw, 64px);
  --wm-maxw:   1400px;
  --wm-ease:   cubic-bezier(.22, .61, .36, 1);

  background: var(--wm-paper);
  color: var(--wm-ink);
  font-family: var(--wm-display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* styles.css usa --font-head (Sora) e --font-body (Inter) su header,
   footer e mega-menu: qui vengono ridefiniti, così tutta la pagina — le
   parti comuni incluse — resta su Geist. */
body.wm {
  --font-head: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, sans-serif;
}

body.wm main { display: block; }
body.wm image-slot { display: block; height: auto; }
body.wm h1, body.wm h2, body.wm h3, body.wm h4 { color: inherit; }

/* =====================================================================
   1. Mattoni
   ===================================================================== */

.wm-wrap {
  max-width: var(--wm-maxw);
  margin-inline: auto;
  padding-inline: var(--wm-gutter);
}

/* etichetta mono — "MANIFESTO", "SCALA INDUSTRIALE" ... */
.wm-label {
  font-family: var(--wm-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wm-steel);
  margin: 0;
}

/* contatore mono — "01", "03 / 09" */
.wm-num {
  font-family: var(--wm-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .13em;
  font-variant-numeric: tabular-nums;   /* "01 / 09" non deve ballare */
  color: var(--wm-accent-2);
  margin: 0;
}

/* titolo di sezione: peso 700, non maiuscolo (nel modello era Titillium) */
.wm-h2 {
  font-family: var(--wm-display);
  font-size: clamp(28px, 4.1vw, 58px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.14;
  margin: 0;
  color: var(--wm-ink);
  text-wrap: balance;
}

/* titolone: peso 900 maiuscolo — è la firma del modello */
.wm-display {
  font-family: var(--wm-display);
  font-size: clamp(34px, 6.8vw, 96px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--wm-ink);
}
/* Geist Black e' un po' piu' largo di Titillium alle misure medie:
   a 78px "RAW MATERIAL" andava a capo, il modello lo ha su una riga. */
.wm-display--sm { font-size: clamp(28px, 4.7vw, 68px); }

.wm-text { margin: 0; color: var(--wm-ink-2); max-width: 56ch; font-size: 17px; line-height: 1.6; }
.wm-text + .wm-text { margin-top: 1em; }

/* filetto arancione */
.wm-rule { width: 48px; height: 2px; background: var(--wm-accent); border: 0; margin: 0; }

/* --- SOPRA UNA FOTO si ribalta tutto: il velo scuro del .wm-media
   riporta il bianco a 11:1 e l'arancione pieno a 10:1. --------------- */
.wm-hero .wm-label,
.wm-set-testa .wm-label,
.wm-prog-corpo .wm-label,
.wm-eng-testa .wm-label { color: rgba(255, 255, 255, .78); }

/* L'etichetta della sezione Engineering non e' un'etichettina: ci sta
   dentro la frase "Built on Values. Powered by People.", che vale come
   titolo. Stessa misura dei titoli delle fasi (fino a 42px), senza il
   maiuscolo forzato e senza la spaziatura da etichetta, che a quella
   misura spezzerebbero la riga in tre. (28/09/2026) */
.wm-eng-testa .wm-label {
  font-family: var(--wm-display);
  font-size: clamp(22px, 2.9vw, 42px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
  text-transform: none;
  color: #fff;
}

.wm-hero .wm-display,
.wm-set-corpo .wm-display,
.wm-prog-corpo .wm-display { color: var(--wm-white); }

.wm-hero .wm-text,
.wm-set-corpo .wm-text,
.wm-prog-corpo .wm-text { color: var(--wm-su-foto); }

.wm-set-corpo .wm-num { color: var(--wm-accent); }

/* bottoni */
.wm-btn {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--wm-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  padding: 1.05em 1.9em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .25s var(--wm-ease), color .25s var(--wm-ease), border-color .25s var(--wm-ease);
}
.wm-btn--accent { background: var(--wm-accent); color: #2b2a26; font-weight: 600; }
/* l'hover schiarisce con un filtro: così non entra in pagina un secondo
   arancione diverso da quello aziendale */
.wm-btn--accent:hover { filter: brightness(1.07); color: #2b2a26; }
.wm-btn--ghost { border-color: var(--wm-border); color: var(--wm-ink-2); }
.wm-btn--ghost:hover { border-color: var(--wm-ink); color: var(--wm-ink); }
/* il pulsante "approfondisci" dei settori sta sopra la foto */
.wm-set-corpo .wm-btn--ghost { border-color: rgba(255, 255, 255, .34); color: var(--wm-white); }
.wm-set-corpo .wm-btn--ghost:hover { border-color: var(--wm-accent); color: var(--wm-accent); }

.wm-sec { padding: clamp(64px, 9vh, 130px) 0; }
/* La prima sezione dopo l'apertura parte piu' in alto: con lo spazio
   pieno il titolo arrivava troppo tardi rispetto alla foto che esce. */
.wm-worldwide { padding-top: clamp(24px, 3vh, 44px); }

/* =====================================================================
   2. Header — resta quello del sito (serve il mega-menu, la lingua e
      l'area riservata, che il modello non ha). Sopra la foto dell'hero è
      trasparente con le voci in bianco; appena si scorre diventa carta
      con le voci scure. Il mega-menu dei prodotti resta quello bianco
      del sito: nessun ritocco.
   ===================================================================== */

body.wm .site-header {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--wm-ease), border-color .35s var(--wm-ease);
}
body.wm .site-header.solid {
  background: rgba(247, 247, 244, .94);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: none;
  border-bottom-color: var(--wm-border);
}

body.wm .site-header .main-nav .nav-link {
  font-family: var(--wm-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* sopra l'hero: bianco. Il logo va invertito perché è scuro. */
body.wm .site-header:not(.solid) .main-nav .nav-link { color: rgba(255, 255, 255, .86); }
body.wm .site-header:not(.solid) .main-nav .nav-link:hover { color: #fff; }
body.wm .site-header:not(.solid) .brand img { filter: brightness(0) invert(1); }
body.wm .site-header:not(.solid) .menu-toggle span { background: #fff; }
body.wm .site-header:not(.solid) .icon-btn { color: rgba(255, 255, 255, .86); }
body.wm .site-header:not(.solid) .lang-switch { background: rgba(255, 255, 255, .18); }
body.wm .site-header:not(.solid) .lang-switch button:not(.active) { color: rgba(255, 255, 255, .86); }

/* dopo lo scorrimento: carta chiara, tutto scuro */
body.wm .site-header.solid .main-nav .nav-link { color: var(--wm-ink-2); }
body.wm .site-header.solid .main-nav .nav-link:hover { color: var(--wm-ink); }
body.wm .site-header.solid .icon-btn { color: var(--wm-ink-2); }
body.wm .site-header.solid .menu-toggle span { background: var(--wm-ink); }
body.wm .site-header .brand img { transition: filter .35s var(--wm-ease); }

/* "Contatti" è il pulsante arancione del modello, uguale nei due stati */
body.wm .site-header .main-nav a[href="contatti.html"] {
  background: var(--wm-accent);
  color: #2b2a26 !important;
  font-weight: 600;
  padding: .72em 1.35em;
  margin-left: .6rem;
}
body.wm .site-header .main-nav a[href="contatti.html"]:hover { filter: brightness(1.07); }

body.wm .site-header .lang-switch button.active { background: var(--wm-accent); color: #2b2a26; box-shadow: none; }

/* =====================================================================
   3. Struttura delle sezioni incollate
      --p (0 -> 1) lo scrive home.js su ogni .wm-pin.
   ===================================================================== */

.wm-pin { --p: 0; position: relative; }
.wm-stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}

/* Foto a tutta pagina. Il velo resta SCURO anche se la pagina è chiara:
   sopra una fotografia industriale il testo bianco su velo scuro è
   l'unica combinazione che tiene il contrasto su qualunque scatto. */
.wm-media { position: absolute; inset: 0; overflow: hidden; }
/* ATTENZIONE: dentro .wm-media ci sono DUE riempimenti sovrapposti — lo
   slot immagine (fermo immagine) e il video. Senza position:absolute il
   secondo si mette SOTTO il primo nel flusso e finisce fuori dal
   contenitore (overflow:hidden): il video c'era, era grande 1440x900, ma
   stava a quota 900 e non si vedeva. Vanno sovrapposti, con le quote
   esplicite: fermo immagine 0, video 1, velo 2. */
body.wm .wm-media > image-slot,
body.wm .wm-media > video,
body.wm .wm-media > img,
body.wm .wm-media > picture {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
body.wm .wm-media > image-slot { z-index: 0; }
body.wm .wm-media > video     { z-index: 1; }
.wm-media::after              { z-index: 2; }

body.wm .wm-fase-foto image-slot,
body.wm .wm-fase-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* in alto: protegge intestazione ed etichette dalle zone chiare */
    linear-gradient(to bottom,
      rgba(20, 20, 20, .80) 0,
      rgba(20, 20, 20, .62) 110px,
      rgba(20, 20, 20, .34) 210px,
      rgba(20, 20, 20, 0) 330px),
    /* in basso: sotto ci va il testo */
    linear-gradient(to top,
      rgba(20, 20, 20, .94) 0,
      rgba(20, 20, 20, .80) 300px,
      rgba(20, 20, 20, .30) 520px,
      rgba(20, 20, 20, .06) 700px),
    linear-gradient(rgba(20, 20, 20, .22), rgba(20, 20, 20, .22));
}

/* =====================================================================
   4. HERO
   ===================================================================== */

/* 130svh e non 190: dopo che la foto e' sfumata restava mezzo schermo di
   carta prima che arrivasse World Wide. Misurato: 0,44 schermate vuote.
   Accorciare da solo non bastava (il vuoto si spostava solo prima): la
   cosa che lo toglie e' il velo qui sotto, che non sbianca piu' del
   tutto. (23/09/2026) */
.wm-hero { height: 130svh; }
.wm-hero .wm-media {
  transform: scale(calc(1 + var(--p) * .09));
  transform-origin: 50% 55%;
}
/* Mentre la sezione resta incollata la foto sfuma nella carta. Si ferma
   al 74% e non al 96%: sbiancandola del tutto, l'apertura usciva dallo
   schermo gia' vuota e per mezzo schermo non c'era piu' niente da
   guardare. Cosi' la si vede andare via, e il globo entra dietro. */
.wm-hero-buio {
  position: absolute; inset: 0;
  background: var(--wm-paper);
  opacity: calc(var(--p) * .74);
  pointer-events: none;
}
.wm-hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--wm-maxw);
  margin-inline: auto;
  padding: calc(var(--header-h, 76px) + clamp(22px, 4svh, 46px)) var(--wm-gutter) clamp(26px, 5svh, 54px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: calc(1 - var(--p) * 1.35);
  transform: translateY(calc(var(--p) * -34px));
}
/* la fascia alta dell'hero non c'e' piu': il titolo sta in mezzo e la
   riga col luogo in basso, quindi il contenitore si limita a due blocchi */
.wm-hero-inner > :first-child { margin-top: auto; }
.wm-hero-mid { max-width: none; }
.wm-hero-mid .wm-display { max-width: none; }
.wm-hero-mid .wm-rule { margin: clamp(18px, 3svh, 30px) 0 clamp(16px, 2.6svh, 26px); }
.wm-hero-mid .wm-text { max-width: 44ch; }
.wm-hero-bot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .20);
  padding-top: clamp(14px, 2.4svh, 22px);
}
.wm-scroll { display: inline-flex; align-items: center; gap: .8em; }
.wm-scroll i {
  display: block; width: 46px; height: 1px;
  background: linear-gradient(to right, var(--wm-accent), transparent);
}

/* =====================================================================
   5. MANIFESTO — testo che si accende parola per parola + globo
   ===================================================================== */

/* --- World Wide Walter Tosto: testo a sinistra, globo a destra ------- */
.wm-ww-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
/* il titolino con le tre W in grassetto: non maiuscolo, altrimenti le W
   si perderebbero fra le altre lettere tutte grandi */
.wm-ww {
  margin: 0 0 clamp(16px, 2.6vh, 30px);
  font-family: var(--wm-display);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--wm-steel);
}
.wm-ww b { font-weight: 700; color: var(--wm-accent-2); }
.wm-frase {
  font-family: var(--wm-display);
  font-size: clamp(24px, 3.9vw, 58px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.14;
  margin: 0;
  color: var(--wm-ink);
}
/* ogni parola è uno <span>: l'opacità la muove lo scroll. Senza
   JavaScript restano tutte a 1 e il testo si legge normalmente. */
.wm-frase .w { transition: opacity .18s linear; }
/* In Geist la "0" e' larga, quindi 1ch vale ~40px a questa misura: 24ch
   sono circa 960px, tre righe piene. Con 30ch la frase arrivava a 1.200px
   e sembrava un paragrafo invece di una dichiarazione. */
.wm-manifesto .wm-frase { max-width: 24ch; }
.wm-manifesto .wm-text { margin-top: clamp(20px, 3.2vh, 38px); }

/* --- il globo ---------------------------------------------------------
   I colori li legge home.js da queste variabili, così il globo
   segue il tema della pagina senza numeri scritti nel codice. */
.wm-globo { position: relative; display: grid; place-items: center; }
.wm-globo canvas {
  --globo-terra: #4a4840;
  --globo-pin:   #f3a738;
  --globo-alone: rgba(77, 75, 69, .13);
  width: 100%; height: auto;
  max-width: 620px;
  display: block;
}
.wm-globo figcaption {
  margin-top: .4rem;
  font-family: var(--wm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wm-steel);
  display: flex; align-items: center; gap: .6em;
  text-align: left;
}
.wm-globo figcaption::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--wm-accent); flex: none;
  box-shadow: 0 0 0 4px rgba(243, 167, 56, .22);
}
.wm-globo figcaption b { font-weight: 500; color: var(--wm-ink); }

/* =====================================================================
   6. SCALA INDUSTRIALE — senza riquadro: solo i numeri
   ===================================================================== */

.wm-scala .wm-h2 { margin-top: .9rem; }

/* blocco centrato: etichetta, titolo, numeri e nota tutti in asse */
.wm-centrato { text-align: center; }
.wm-centrato .wm-h2 { margin-inline: auto; max-width: 26ch; }
.wm-centrato .wm-label { display: inline-block; }
.wm-scala-griglia {
  margin-top: clamp(40px, 6.5vh, 76px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4.6vw, 68px) clamp(24px, 4vw, 60px);
}
.wm-cella .k {
  font-family: var(--wm-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--wm-steel);
}
.wm-cella .n {
  margin: clamp(10px, 1.4vw, 16px) 0 clamp(8px, 1.2vw, 14px);
  font-family: var(--wm-display);
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--wm-ink);
}
.wm-cella:first-child .n { color: var(--wm-accent-2); }
.wm-cella .d {
  font-family: var(--wm-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wm-ink-2);
  line-height: 1.5;
}
.wm-nota {
  margin-top: clamp(34px, 5vh, 60px);
  font-family: var(--wm-mono);
  font-size: 11px; letter-spacing: .02em;
  color: var(--wm-steel);
}

/* =====================================================================
   7. ENGINEERING — cinque fasi che scorrono di lato mentre la sezione
      resta incollata
   ===================================================================== */

.wm-eng { height: 500svh; }        /* 5 fasi: 4 schermate di corsa laterale */
.wm-eng .wm-stage { background: var(--wm-paper-2); }
/* Velo sotto la fascia del titolo, su TUTTA la larghezza del palco: il
   titolo grande attraversa anche la striscia di carta fra una foto e
   l'altra, e la' il bianco su bianco spariva. Il velo della singola foto
   non basta, perche' copre la foto e non lo spazio fra due. */
.wm-eng .wm-stage::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 240px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20, 20, 20, .88) 0,
    rgba(20, 20, 20, .68) 46%,
    rgba(20, 20, 20, .26) 78%,
    rgba(20, 20, 20, 0) 100%);
}

.wm-eng-testa {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3;
  padding: calc(var(--header-h, 76px) + clamp(18px, 3svh, 34px)) var(--wm-gutter) 0;
  max-width: var(--wm-maxw);
  margin-inline: auto;
}
.wm-eng-pista {
  display: flex;
  height: 100%;
  width: max-content;
  transform: translate3d(calc(var(--p) * var(--wm-corsa, -400vw)), 0, 0);
  will-change: transform;
}
.wm-fase {
  flex: 0 0 100vw;
  height: 100%;
  display: grid;
  /* la foto prende il 65%: le orizzontali si vedono per quello che sono.
     Il testo sta nel 35% che resta, e per questo il titolo scende dai
     68px delle altre sezioni (nel 35% di 1440px non ci starebbe). */
  grid-template-columns: 65% 35%;
  align-items: center;
}
.wm-fase-foto { position: relative; height: 100%; overflow: hidden; }
.wm-fase-foto::after {
  content: ""; position: absolute; inset: 0;
  /* in alto scuro, per l'etichetta bianca della sezione. La foto finisce
     di taglio netto sul bordo del 65%: la sfumatura verso la carta che
     c'era prima e' stata tolta su richiesta (18/09 -> 22/09/2026). */
  background:
    linear-gradient(to bottom, rgba(20,20,20,.72) 0, rgba(20,20,20,.40) 130px, rgba(20,20,20,0) 280px);
}
.wm-fase-testo {
  padding: 0 var(--wm-gutter) 0 clamp(20px, 2.4vw, 40px);
}
.wm-fase-testo .wm-display { font-size: clamp(24px, 2.9vw, 42px); }
.wm-fase-testo .wm-num { margin-bottom: clamp(14px, 2vh, 22px); }
.wm-fase-testo .wm-display { margin-bottom: clamp(16px, 2.4vh, 26px); }

/* barretta di avanzamento: cinque trattini, quello attivo arancione */
.wm-eng-avanz {
  position: absolute; bottom: clamp(26px, 5svh, 54px); left: 0; right: 0;
  z-index: 3;
  display: flex; justify-content: center; gap: 12px;
}
.wm-eng-avanz span {
  width: clamp(26px, 3vw, 44px); height: 2px;
  background: var(--wm-border);
  transition: background .3s var(--wm-ease);
}
.wm-eng-avanz span.on { background: var(--wm-accent); }

/* =====================================================================
   8. SETTORI — nove pannelli che si dissolvono uno sull'altro
   ===================================================================== */

.wm-settori { height: 820svh; }    /* 9 settori: circa 80svh a testa */
.wm-settori .wm-stage { background: var(--wm-paper); }
.wm-set-testa {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 5;
  padding: calc(var(--header-h, 76px) + clamp(18px, 3svh, 34px)) var(--wm-gutter) 0;
  max-width: var(--wm-maxw);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wm-set-testa .wm-num { color: var(--wm-accent); }
/* I nove pannelli sono sovrapposti con quote crescenti: quello piu' in
   alto (Special Projects, quota 9) copriva tutti gli altri e si prendeva
   i clic, anche da invisibile. Risultato: nessuno dei nove pulsanti
   "Show more" era raggiungibile. Qui sono tutti trasparenti ai clic, e
   home.js riattiva solo quello in vista. */
.wm-set {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(.96) translateY(-30px);
  will-change: opacity, transform;
  pointer-events: none;
}
/* Il velo dei nove pannelli: quasi nulla in alto, carico in basso dove ci
   va il testo bianco (22/09/2026, su richiesta). Quello generale di
   .wm-media::after velava tutta la foto — cielo e acciaio venivano grigi.
   Hero e Progetti restano come prima: la richiesta era solo sui settori. */
.wm-set .wm-media::after {
  background:
    linear-gradient(to top,
      rgba(20, 20, 20, 1)   0,
      rgba(20, 20, 20, .88) 250px,
      rgba(20, 20, 20, .46) 460px,
      rgba(20, 20, 20, .10) 620px,
      rgba(20, 20, 20, 0)   760px);
}

.wm-set-corpo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;          /* sopra il velo della foto, che sta a 2 */
  max-width: var(--wm-maxw);
  margin-inline: auto;
  padding: 0 var(--wm-gutter) clamp(74px, 12svh, 130px);
}
.wm-set-corpo .wm-num { margin-bottom: clamp(12px, 1.8vh, 20px); }
.wm-set-corpo .wm-display { margin-bottom: clamp(12px, 1.8vh, 20px); max-width: 18ch; }
.wm-set-corpo .wm-text { max-width: 44ch; }
.wm-set-corpo .wm-btn { margin-top: clamp(18px, 2.6vh, 30px); }

/* =====================================================================
   9. PROGETTI — foto a tutta pagina che si avvicina
   ===================================================================== */

.wm-progetti { height: 180svh; }
.wm-progetti .wm-media { transform: scale(calc(1.02 + var(--p) * .12)); }
.wm-prog-corpo {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;          /* sopra il velo della foto, che sta a 2 */
  max-width: var(--wm-maxw);
  margin-inline: auto;
  padding: 0 var(--wm-gutter) clamp(54px, 10svh, 110px);
}
.wm-prog-corpo .wm-label { margin-bottom: clamp(16px, 2.4vh, 26px); }
.wm-prog-corpo .wm-display { margin-bottom: clamp(18px, 2.6vh, 28px); max-width: 24ch; }

/* =====================================================================
   10. PRESENZA GLOBALE + striscia continua delle aree
   ===================================================================== */

.wm-globale .wm-h2 { margin: .9rem 0 clamp(18px, 2.8vh, 30px); }
.wm-striscia {
  margin-top: clamp(44px, 7vh, 90px);
  border-block: 1px solid var(--wm-border);
  overflow: hidden;
  padding: clamp(16px, 2.6vh, 26px) 0;
}
.wm-striscia-pista {
  display: flex;
  width: max-content;
  animation: wm-scorri 34s linear infinite;
}
.wm-striscia-pista > span {
  display: inline-flex; align-items: center;
  font-family: var(--wm-mono);
  font-size: clamp(14px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wm-steel);
  white-space: nowrap;
}
.wm-striscia-pista > span::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wm-accent);
  margin: 0 clamp(22px, 3.4vw, 54px);
  flex: none;
}
@keyframes wm-scorri { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }
.wm-striscia:hover .wm-striscia-pista { animation-play-state: paused; }

/* =====================================================================
   11. CHIUSURA + piede
   ===================================================================== */

/* La chiusura ha la foto dietro, come le fasce dei prodotti: il testo va
   in bianco e il velo scuro sale da sotto, dove stanno titolo e pulsanti. */
.wm-cta {
  position: relative; overflow: hidden;
  min-height: clamp(420px, 66svh, 720px);
  display: flex; align-items: center;
  padding: clamp(80px, 14vh, 180px) 0;
  text-align: left;
}
.wm-cta .wm-media { position: absolute; inset: 0; z-index: 0; }
.wm-cta .wm-media::after {
  background: linear-gradient(to top,
    rgba(20, 20, 20, .93) 0,
    rgba(20, 20, 20, .78) 38%,
    rgba(20, 20, 20, .52) 72%,
    rgba(20, 20, 20, .34) 100%);
}
.wm-cta > .wm-wrap { position: relative; z-index: 3; width: 100%; }
.wm-cta .wm-display { color: var(--wm-white); }
.wm-cta .wm-label { color: rgba(255, 255, 255, .80); }
.wm-cta .wm-cta-div i { background: rgba(255, 255, 255, .30); }
.wm-cta .wm-btn--ghost { border-color: rgba(255, 255, 255, .38); color: var(--wm-white); }
.wm-cta .wm-btn--ghost:hover { border-color: var(--wm-accent); color: var(--wm-accent); }
.wm-cta-div {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px);
  margin-bottom: clamp(34px, 5.5vh, 70px);
}
.wm-cta-div i { flex: 1 1 auto; height: 1px; background: var(--wm-border); }
.wm-cta-div .wm-label { display: inline-flex; align-items: center; gap: .7em; flex: none; }
.wm-cta-div .wm-label::before,
.wm-cta-div .wm-label::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--wm-accent);
}
.wm-cta .wm-display { max-width: 24ch; }
.wm-cta-azioni { margin-top: clamp(30px, 5vh, 56px); display: flex; gap: 14px; flex-wrap: wrap; }

/* Il piede del sito è grigio #505052: sotto la carta calda prende il
   grigio scuro della pagina. Il testo bianco che c'è già fa 12,8:1. */
body.wm .site-footer { background: var(--wm-scuro); border-top: 0; }

/* =====================================================================
   11-bis. ANCORE DEL MENU e MEDIA & DOWNLOAD

   Le tre voci in cima (Azienda, Prodotti, Attivita') e il Download del
   piede puntano ad ancore dentro la home: #about, #products, #operations,
   #media. Le sezioni hanno gia' un id che serve al JS, quindi l'ancora e'
   un elemento vuoto messo appena prima. scroll-margin-top tiene sotto
   l'header fisso (76px) piu' un respiro, altrimenti il titolo della
   sezione finisce dietro la barra.
   ===================================================================== */

.wm-ancora {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--header-h, 76px) + 12px);
}

/* I materiali scaricabili: testo a sinistra, i pulsanti in colonna a
   destra. Stessa griglia del blocco del globo, cosi' la pagina ha due
   sole larghezze di colonna e non tre. */
.wm-media-sez { border-top: 1px solid var(--wm-border-2); }
.wm-media-grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 34%);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.wm-media-grid .wm-label { display: block; margin-bottom: .8rem; }
.wm-media-grid .wm-h2 { max-width: 20ch; }
.wm-media-grid .wm-text { margin-top: clamp(14px, 2vh, 22px); max-width: 46ch; }

.wm-scarica { display: flex; flex-direction: column; gap: 12px; }
.wm-scarica .wm-btn {
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: 14px 18px;
}
.wm-scarica .wm-btn small {
  display: block;
  font-family: var(--wm-display);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.4;
  margin-top: 2px;
  color: var(--wm-steel);
}
.wm-scarica .wm-btn[hidden] { display: none; }

@media (max-width: 860px) {
  .wm-media-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   12. Comparse allo scorrimento (riusa .reveal di app.js)
   ===================================================================== */

body.wm .reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--wm-ease), transform .75s var(--wm-ease); }
body.wm .reveal.in { opacity: 1; transform: none; }
body.wm .reveal[data-d="1"] { transition-delay: .08s; }
body.wm .reveal[data-d="2"] { transition-delay: .16s; }
body.wm .reveal[data-d="3"] { transition-delay: .24s; }

/* =====================================================================
   13. Tablet e telefono
   ===================================================================== */

@media (max-width: 1080px) {
  .wm-ww-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vh, 54px); }
  .wm-globo { order: -1; }
  .wm-globo canvas { max-width: 420px; }
  .wm-scala-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-fase { grid-template-columns: minmax(0, 1fr); align-items: end; }
  .wm-fase-testo { padding-inline: var(--wm-gutter); }
  .wm-fase-testo .wm-display { font-size: clamp(30px, 6vw, 62px); }
  .wm-fase-foto { position: absolute; inset: 0; }
  .wm-fase-foto::after {
    background:
      linear-gradient(to bottom, rgba(20,20,20,.72) 0, rgba(20,20,20,.40) 130px, rgba(20,20,20,0) 280px),
      linear-gradient(to top, rgba(239,239,233,1) 0, rgba(239,239,233,.94) 300px, rgba(239,239,233,.42) 520px, rgba(239,239,233,0) 700px);
  }
  .wm-fase-testo { position: relative; z-index: 2; padding: 0 var(--wm-gutter) clamp(84px, 14svh, 150px); }
}

@media (max-width: 720px) {
  .wm-hero { height: 120svh; }
  .wm-hero-bot { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .wm-globo canvas { max-width: 330px; }
  .wm-scala-griglia { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 5vh, 40px); }
  .wm-set-corpo { padding-bottom: clamp(66px, 11svh, 96px); }
  .wm-cta-div i:last-of-type { display: none; }
  body.wm .site-header .main-nav a[href="contatti.html"] { margin-left: 0; }
}

/* =====================================================================
   14. Chi ha chiesto meno animazioni, e chi ha il JavaScript spento:
       niente si muove, tutto resta leggibile. Le sezioni incollate
       diventano sezioni normali, i nove settori un elenco.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.wm .reveal { opacity: 1; transform: none; transition: none; }
  .wm-striscia-pista { animation: none; }
  .wm-frase .w { opacity: 1 !important; transition: none; }
  .wm-hero .wm-media, .wm-progetti .wm-media { transform: none; }
  .wm-hero-buio { opacity: 0; }
  .wm-hero-inner { opacity: 1; transform: none; }
}

html:not(.wm-js) .wm-frase .w,
html.wm-statico .wm-frase .w { opacity: 1; }

html:not(.wm-js) .wm-pin,
html.wm-statico .wm-pin { height: auto !important; }
html:not(.wm-js) .wm-stage,
html.wm-statico .wm-stage { position: relative; height: auto; min-height: 100svh; }
html:not(.wm-js) .wm-hero-buio,
html.wm-statico .wm-hero-buio { display: none; }
html:not(.wm-js) .wm-eng-pista,
html.wm-statico .wm-eng-pista { flex-direction: column; width: 100%; transform: none; }
html:not(.wm-js) .wm-fase,
html.wm-statico .wm-fase { flex: none; min-height: 100svh; }
html:not(.wm-js) .wm-eng-avanz,
html.wm-statico .wm-eng-avanz { display: none; }
html:not(.wm-js) .wm-set,
html.wm-statico .wm-set { position: relative; inset: auto; opacity: 1 !important; transform: none !important; min-height: 100svh; }
html:not(.wm-js) .wm-set-corpo,
html.wm-statico .wm-set-corpo { position: relative; padding-top: 40svh; }
html:not(.wm-js) .wm-set-testa,
html.wm-statico .wm-set-testa { display: none; }
/* in colonna sono tutti in vista, quindi tutti cliccabili */
html:not(.wm-js) .wm-set,
html.wm-statico .wm-set { pointer-events: auto !important; }