/* ===========================================================================
   Pigreco FVG — Foglio di stile principale

   Impaginato editoriale su **terreno navy continuo**, con la fotografia del
   porto di Trieste come materiale: le foto sono desaturate e ricolorate in
   duotone navy/azzurro, quindi sono superficie di marca e non sfondo di
   repertorio.

   Il fondo scuro è la biforcazione dalla famiglia, e va difesa. `spareparts.css`
   nasce come copia di questo foglio: stessi token, stesse misure, stessa coppia
   Space Grotesk + Roboto. Togliendo le schede e gli occhielli da qui, sotto
   restava la base condivisa e i due siti leggevano uguali. Ora a colpo d'occhio:
   spareparts è carta con rampa calda, jora è crema con bande scure, pigreco è
   scuro dal principio alla fine — e la fotografia, che gli altri due hanno
   rinunciato a usare, è la cosa luminosa della pagina.

   Due divieti che vengono da decisioni già prese e non vanno ripescati:
   niente diagrammi a nodi e linee (leggono come schemi di collegamento, non
   come visione) e niente rampe lunghe di gradiente su tinta piatta (fanno
   banding e scorrendo le fasce si muovono). I confini fra capitoli sono
   tagli netti; le uniche sfumature stanno sopra le foto, dove la grana
   dell'immagine le dissimula.
   =========================================================================== */

:root {
  /* Colori — terreno navy, inchiostro chiaro. I ruoli sono invertiti
     rispetto alla famiglia: qui il fondo è il navy e il testo è la luce. */
  --bg:            #0a1729;   /* navy pieno: terreno di tutta la pagina */
  --surface:       #0f2138;   /* navy rialzato: bande alternate */
  --surface-2:     #14283f;   /* un gradino più su: solo la banda del know-how */
  --ink:           #eef4f9;   /* testo principale, 17,3:1 sul fondo */
  --ink-soft:      rgba(238, 244, 249, 0.72);  /* secondario, ~9:1 */
  --ink-faint:     rgba(238, 244, 249, 0.54);  /* terziario, ~5,4:1 */
  --border:        rgba(238, 244, 249, 0.16);  /* filetti degli elenchi */
  --border-soft:   rgba(238, 244, 249, 0.09);  /* divisori */

  /* Brand: sul navy lavora l'azzurro (8:1); il blu primario resta un
     riempimento, non un colore di testo. */
  --accent:        #4db8e8;   /* azzurro: accento di testo, segni, trattini */
  --accent-fill:   #1f6fb2;   /* blu pieno dei bottoni, bianco sopra a 5,2:1 */
  --accent-deep:   #155189;
  --accent-hover:  #2a7fc0;   /* hover dei bottoni pieni */
  --ink-deep:      #0a1729;   /* alias del fondo, per i testi sull'azzurro */

  /* L'unico caldo del sito. Compare solo sul ponte verso l'aftermarket:
     quando si vede, vuol dire quello. */
  --warm:          #E0A807;
  --warm-hover:    #c8950a;
  --warm-ink:      #1a1204;   /* testo scuro sul caldo: 8,4:1 (il bianco fa 2,2:1) */

  /* Testo sopra le fotografie, dove serve il bianco pieno e non l'inchiostro
     azzurrino della pagina. */
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255, 255, 255, 0.84);
  --on-dark-faint:  rgba(255, 255, 255, 0.64);
  --rule-dark:      rgba(255, 255, 255, 0.18);

  /* Duotone delle fotografie: le ombre si fermano sul navy, le luci
     sull'azzurro chiaro. Su terreno scuro le luci vanno tenute alte — la
     fotografia è l'unica cosa luminosa della pagina, e deve accendersi. */
  /* Banda chiara. Il terreno del sito è navy e resta navy: questi token
     servono all'UNICA sezione su fondo bianco (gli operatori), voluta dal
     committente. Ruoli invertiti rispetto al resto del foglio: qui il fondo è
     la luce e il testo è l'inchiostro scuro.
     --light-bg è la banda, --light-surface la scheda un gradino SOPRA (bianco
     pieno): stessa logica del know-how sul navy, dove la banda sta su
     --surface e le schede su --surface-2. */
  --light-bg:       #eef3f8;   /* banda: 14,6:1 con --light-ink */
  --light-surface:  #ffffff;   /* schede: 16,6:1 con --light-ink */
  --light-ink:      #0a1729;   /* stesso valore di --ink-deep, altro ruolo */
  --light-ink-soft: rgba(10, 23, 41, 0.68);   /* ~6,4:1 sul bianco */
  --light-border:   rgba(10, 23, 41, 0.12);

  --duo-shadow:    #0b1c31;
  --duo-light:     #dfeaf4;

  /* Layout */
  --maxw:          1080px;
  --pad-x:         3rem;
  /* --maxw è la larghezza del CONTENUTO. Le sezioni normali ci aggiungono il
     padding (box-sizing: border-box), le bande a tutta larghezza lo ottengono
     da .pg-section-inner: così ogni sezione ha lo stesso bordo sinistro. */
  --maxw-section:  calc(var(--maxw) + var(--pad-x) * 2);
  --maxw-text:     720px;     /* colonna di lettura delle introduzioni */
  --radius:        5px;
  --shadow:        0 14px 34px rgba(0, 0, 0, 0.45);

  /* Una sola curva per tutta la pagina, uscita esponenziale. */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);

  /* Tipografia: Roboto per testo/UI, Space Grotesk per titoli e numeri. */
  --font:         'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* I controlli di form non ereditano il font dal body. */
button, input, select, textarea { font-family: inherit; }

html {
  scroll-behavior: smooth;
  /* Superfici che nessuno disegna: qui le prende la palette. */
  caret-color: var(--accent);
  accent-color: var(--accent);
  scrollbar-color: var(--accent-fill) var(--bg);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grana: un velo di rumore su tutta la pagina. Non si vede, si sente: toglie
   il piatto dal navy senza pesare (SVG inline, nessun file). Sul fondo scuro
   il rumore emerge più che sul bianco, quindi sta più basso: 2,5% invece di
   3,5%, altrimenti sulle bande piene si legge come sporco. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le altre famiglie display se le dichiarano i componenti (.pg-fig, .pg-know-card h3,
   .pg-operator, .pg-value-out): stanno lì perché sono scelte del componente,
   non un elenco da tenere sincronizzato a mano. */
h1, h2, h3,
.pg-claim,
.pg-contact-list dt {
  font-family: var(--font-display);
}

/* Sull'azzurro il testo va scuro: bianco su #4db8e8 sta a 2,3:1. */
::selection { background: var(--accent); color: var(--ink-deep); }

/* Un anello solo per tutta la pagina: il terreno è scuro dappertutto, quindi
   l'azzurro va bene sempre e non servono più le eccezioni per sezione. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

a { text-underline-offset: 0.18em; }

/* Offset per gli anchor sotto la nav fissa */
[id] { scroll-margin-top: 90px; }

/* Accessibilità: link "salta al contenuto" */
.pg-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-deep);
  color: #fff;
  padding: 10px 18px;
  z-index: 100;
  font-size: 13px;
}
.pg-skip-link:focus { left: 0; }

/* --------------------------------------------------------------- Duotone */
/* Due livelli sopra una foto desaturata: il primo alza il nero al navy
   (lighten), il secondo abbassa il bianco all'azzurro (multiply). Il
   contenitore deve isolarsi, altrimenti il blend esce dalla sezione. */
.pg-duo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pg-duo--shadow { background: var(--duo-shadow); mix-blend-mode: lighten; }
.pg-duo--light  { background: var(--duo-light);  mix-blend-mode: multiply; }

/* --------------------------------------------------------------- Navbar */
.pg-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* La barra è sempre scura, come il resto della pagina: trasparente sopra
   l'hero, e allo scroll il navy con blur. Non diventa più bianca a metà
   pagina — su terreno scuro sarebbe l'unico oggetto chiaro del sito. */
.pg-nav.is-scrolled {
  background: rgba(10, 23, 41, 0.88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border-soft);
}

.pg-nav-logo { display: flex; align-items: center; text-decoration: none; }
/* Una sola versione del logo, quella con la scritta bianca: la barra non
   diventa mai chiara, quindi non c'è più niente da scambiare. */
.pg-nav-logo-img { display: block; height: 38px; width: auto; }

.pg-nav-menu { display: flex; align-items: center; gap: 2rem; }
.pg-nav-links { display: flex; gap: 2rem; font-size: 14px; font-weight: 500; }
.pg-nav-links a {
  position: relative;
  color: var(--on-dark-muted);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color 0.2s var(--ease);
}
/* Il link della sezione visibile prende una riga che si apre da sinistra:
   il cambio di colore da solo non si legge sopra la foto. */
.pg-nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.pg-nav-links a:hover { color: var(--on-dark); }
.pg-nav-links a.is-active { color: var(--on-dark); }
.pg-nav-links a.is-active::after { transform: scaleX(1); }

.pg-nav-cta {
  background: var(--accent-fill);
  color: #fff;
  border: none;
  padding: 9px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s var(--ease);
}
.pg-nav-cta:hover { background: var(--accent-hover); }

.pg-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--on-dark);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
}

/* --------------------------------------------------------------- Bottoni */
.btn-primary,
.btn-secondary,
.btn-warm {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-primary { background: var(--accent-fill); color: #fff; border: none; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
/* Testo scuro sul caldo: il bianco su #E0A807 sta a 2,2:1 e non è leggibile. */
.btn-warm { background: var(--warm); color: var(--warm-ink); border: none; font-weight: 700; }
.btn-warm:hover { background: var(--warm-hover); }
.btn-warm .ti { font-size: 18px; }

/* --------------------------------------------------------------- Hero */
.pg-hero {
  position: relative;
  isolation: isolate;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 9rem var(--pad-x) 5rem;
  color: var(--on-dark);
  overflow: hidden;
}
.pg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;   /* il duotone non deve uscire dall'hero */
  overflow: hidden;
}
.pg-hero-slides { position: absolute; inset: 0; }
.pg-hero-slide {
  position: absolute;
  inset: 0;
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.08);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.6s var(--ease);
}
/* Fallback senza JS: la prima foto resta visibile. */
.pg-hero-slide:first-child { opacity: 1; }
.pg-hero-slide.is-active { opacity: 1; }

/* Il momento autoriale della pagina, e l'unico: il porto che deriva piano
   sotto il duotone. Tutto il resto entra con un solo ingresso condiviso.
   La deriva sta su tutte le slide, non solo su quella attiva: se si fermasse
   con la classe, la foto in uscita farebbe uno scatto durante il crossfade. */
.pg-hero-slide { animation: pg-drift 34s var(--ease) infinite alternate; }
@keyframes pg-drift {
  from { transform: scale(1.05); }
  to   { transform: scale(1.16); }
}

/* Velo asimmetrico: pesante dove sta il testo, quasi assente dall'altra
   parte, così la foto si vede davvero. Sta sopra la grana della fotografia,
   che dissimula qualunque banding. */
.pg-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(10, 23, 41, 0.86) 0%,
    rgba(10, 23, 41, 0.60) 45%,
    rgba(10, 23, 41, 0.14) 100%);
}

.pg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.pg-hero h1 {
  font-size: clamp(40px, 6.4vw, 72px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 1.4rem;
}
.pg-hero h1 em { font-style: normal; color: var(--accent); }
.pg-hero > .pg-hero-inner > p {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--on-dark-muted);
  line-height: 1.65;
  max-width: 56ch;
  text-wrap: pretty;
  margin-bottom: 2.5rem;
}
.pg-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Le cifre dell'apertura. La banda separata con quattro numeri grandi e
   l'etichetta sotto è il componente che jora e spareparts hanno identico
   (`.pg-stats` / `.pg-stat-num`, stesse classi): qui non esiste più. Cifra ed
   etichetta stanno sulla STESSA riga, come una riga di registro, e il filetto
   sopra è uno dei due soli filetti che restano in pagina. */
.pg-figures {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 2rem;
  margin-top: 3.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
/* flex, non flusso inline: l'etichetta è un item suo, quindi quando va a capo
   la seconda riga si allinea alla prima invece di finire sotto la cifra. */
.pg-figures li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--on-dark-faint);
}
.pg-fig {
  /* Nessuna larghezza comune: una misura unica per tutte allontanava la cifra
     corta ("8") dalla sua etichetta di due caratteri buoni. La larghezza è
     invece quella del valore finale di ciascuna voce (regola sotto), così la
     cifra resta attaccata al testo e il conteggio non fa ballare l'etichetta
     mentre sale. */
  display: inline-block;
  font-family: var(--font-display);
  /* 38px e non di piu': la cifra e l'etichetta stanno sulla stessa riga, quindi
     ogni px in piu' sulla cifra e' un px in meno per l'etichetta. A 40 «partner
     di progetto» e «anni in ERP & logistica» vanno a capo; fino a 38 le quattro
     etichette si spezzano esattamente come prima. Misurato a 1440. */
  font-size: clamp(28px, 2.9vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  flex: none;
}
/* Larghezza del valore d'arrivo, in cifre tabulari: senza questa l'etichetta
   scivolerebbe a ogni passo del conteggio (0 → 55 → 110). Se cambia un numero
   nel markup, va rivista la ch corrispondente. */
.pg-figures li:nth-child(1) .pg-fig { min-width: 4ch; }   /* 110+ */
.pg-figures li:nth-child(2) .pg-fig { min-width: 1ch; }   /* 8    */
.pg-figures li:nth-child(3) .pg-fig { min-width: 3ch; }   /* ~50  */
.pg-figures li:nth-child(4) .pg-fig { min-width: 3ch; }   /* 30+  */

/* --------------------------------------------------------------- Sezioni */
.pg-section {
  padding: 7rem var(--pad-x);
  max-width: var(--maxw-section);
  margin: 0 auto;
}
.pg-section h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.1rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
/* A filo con tutto il resto. Prima era `margin: 0 auto`, cioè la frase stava
   centrata dentro la colonna e partiva 180px più a destra di titolo ed elenchi:
   il blocco in alto di ogni sezione leggeva sfalsato. `--maxw-text` resta come
   misura di lettura, ma non centra più niente. */
.pg-section-intro {
  max-width: var(--maxw-text);
  margin: 0;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.75;
  text-wrap: pretty;
}
/* Colonna interna delle bande a piena larghezza: stesso bordo sinistro. */
.pg-section-inner { max-width: var(--maxw); margin: 0 auto; position: relative; }

/* Banda rialzata: navy più chiaro del terreno, taglio netto sopra e sotto.
   È l'unica alternanza di superficie che resta — il resto lo fanno le foto. */
/* Banda rialzata: navy più chiaro del terreno, taglio netto sopra e sotto.
   Quando tutto è scuro la banda scura non è più un evento, quindi l'alternanza
   che regge la pagina è terreno / rialzato / terreno, con i tagli fotografici
   come punteggiatura:
   hero(foto) · numeri(rialzato) · chi siamo · competenze(rialzato) ·
   a chi ci rivolgiamo · taglio(foto) · valore(rialzato) · ponte · contatti(foto)
   Due bande rialzate non stanno mai una accanto all'altra: si leggerebbero
   come una sola. */
.pg-section--raised {
  background: var(--surface);
  max-width: none;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* Banda chiara a piena larghezza: l'UNICA del sito, ed è una scelta del
   committente. Il resto della pagina resta navy dal principio alla fine — è la
   biforcazione dai siti fratelli e non va estesa ad altre sezioni.
   Sta fra due bande rialzate navy (know-how sopra, valore aggiunto sotto),
   quindi il contrasto fa da punteggiatura al posto del taglio fotografico che
   c'era prima. */
.pg-section--light {
  background: var(--light-bg);
  max-width: none;
  padding-top: 7rem;
  padding-bottom: 7rem;
  color: var(--light-ink);
}
.pg-section--light h2 { color: var(--light-ink); }
.pg-section--light .pg-section-intro { color: var(--light-ink-soft); }
/* L'anello di focus della pagina è `--accent`, che fa 8:1 sul navy ma ~2:1 sul
   bianco. Qui oggi non c'è niente di focusabile, ma se ci finisce un link deve
   vedersi: `--accent-deep` sul bianco sta a ~7:1. */
.pg-section--light :focus-visible { outline-color: var(--accent-deep); }

/* --------------------------------------------------------------- Chi siamo */
.pg-about { padding-top: 8rem; padding-bottom: 8rem; }
.pg-about-top {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: start;
}
.pg-about-top h2 { margin-bottom: 0; }
.pg-about-top p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 56ch;
  text-wrap: pretty;
}
/* La frase che nessun concorrente può dire, tirata fuori dal paragrafo.
   Niente filetto verticale: la frase promossa con il regolo colorato sopra o
   accanto è `.sp-pull` di spareparts. A segnalarla bastano la scala e il font
   display: sporgeva di 1,75rem nel margine, ed è stato tolto perché rompeva
   l'unico bordo sinistro della pagina. Entra ancora da sinistra
   (`translateX(-14px)`), che è un movimento e non un disallineamento. */
.pg-claim {
  margin-top: 3.5rem;
  max-width: 36ch;
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.8s var(--ease) 0.2s, transform 0.8s var(--ease) 0.2s;
}
.pg-claim em { font-style: normal; color: var(--accent); }
.reveal.is-visible .pg-claim { opacity: 1; transform: none; }

/* --------------------------------------------------------------- Know-how */
/* Griglia di schede con tessera-icona, forma scelta dal committente. Sul
   terreno navy la scheda funziona da superficie rialzata: la banda sta su
   `--surface`, le schede un gradino sopra su `--surface-2`, quindi il gradino
   di luce disegna la scheda e non serve un bordo marcato.
   Classi `pg-know-*` e non `pg-comp-*`: quel componente è quello ereditato che
   spareparts riusa (reso come pila di righe), e i due vanno tenuti separati.

   Provate e scartate prima di questa: l'indice tipografico a due colonne senza
   segni (troppo spento) e una fotografia in trasparenza dietro al testo (anche
   spenta leggeva come immagine e le descrizioni ci cadevano sopra). */
.pg-know-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
}
.pg-know-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* In hover cambia il bordo, la scheda non si solleva: `translateY(-6px)` più
   ombra ampia era la firma del tema comprato da cui questo sito è partito. */
.pg-know-card:hover {
  background: #17304b;
  border-color: rgba(77, 184, 232, 0.45);
}
.pg-know-icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent-fill) 0%, var(--accent) 100%);
  box-shadow: 0 6px 16px rgba(31, 111, 178, 0.32);
  color: #fff;
  font-size: 22px;
}
.pg-know-card h3 {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.pg-know-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- A chi ci rivolgiamo */
/* Otto schede, una per operatore, su banda chiara. È una scelta del
   committente, e ribalta due principi che il resto del foglio difende: il
   terreno navy continuo e "niente griglie di schede uguali". Vale per questa
   sezione soltanto — le altre non tornano a schede e non tornano su bianco.

   Le schede sono deliberatamente DIVERSE da quelle del know-how, che stanno
   due sezioni sopra: là c'è la tessera-icona da 46px, il titolo e una frase, e
   la scheda è alta; qui c'è solo il nome e la scheda è bassa. Se prendessero
   anche l'icona, le due griglie leggerebbero come lo stesso componente ripetuto.

   Nessun hover: la scheda non è cliccabile e non deve promettere un click.
   È l'errore per cui le otto "pillole" con bordo e hover erano state buttate
   nel primo giro di lavoro.

   Forme provate e scartate prima di questa: l'enunciato in linea con i nomi
   separati da un punto azzurro (leggeva come un muro, e il punto non regge la
   scala del nome che separa); l'elenco su due colonne senza segni; un nome per
   riga; il blocco giustificato (la giustificazione allarga anche gli spazi
   DENTRO i nomi). E da prima ancora, l'elenco rigato con il pallino nel
   margine, che è `.jo-cases` di jora. */
.pg-operators {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Tutte le righe alte uguale: «Autorità di Sistema Portuale» va su due righe
     di testo e senza questo la prima fila di schede era più alta della seconda. */
  grid-auto-rows: 1fr;
  gap: 1.25rem;
  margin-top: 3.5rem;
}
.pg-operator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: var(--radius);
}
/* Un'illustrazione disegnata per operatore, non un'icona del set Tabler: la
   tessera-icona con gradiente è del know-how, e riusarla qui farebbe leggere le
   due griglie come lo stesso componente.
   Il sistema è nel markup (viewBox 64x64, tratto 2, estremi tondi); qui stanno
   solo i colori, così restano legati ai token e non ai valori scritti a mano
   dentro ogni <svg>. `.a` è l'unico elemento in accento di ogni disegno. */
.pg-operator-ill {
  width: 62px;
  height: 62px;
  flex: none;
  margin-bottom: 1.1rem;
  stroke: var(--light-ink);
}
.pg-operator-ill .a { fill: var(--accent); }

/* --- Le illustrazioni si disegnano ---------------------------------------
   Otto disegni a tratto: il tratto ha un'animazione sua, che non è un effetto
   applicato dall'esterno. È l'unico movimento del sito oltre alla deriva
   dell'hero, e sta qui perché questa è l'unica cosa in pagina fatta di linee.

   Ogni forma porta `pathLength="1"` nel markup: la lunghezza è normalizzata, e
   `stroke-dasharray: 1` vale "tutta la forma" per un path lungo come per un
   cerchio piccolo. Senza, ogni forma si disegnerebbe a una velocità diversa e
   servirebbe misurarle una per una con getTotalLength() in JavaScript.

   Lo stato di partenza è DISEGNATO. È `illustrations.js` ad aggiungere
   `.is-armed` per nasconderle, e solo dopo `.is-drawn` per tracciarle: così
   senza JavaScript, o con prefers-reduced-motion, i disegni ci sono e basta.
   Non invertire i due stati. */
.pg-operators.is-armed .pg-operator-ill > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.pg-operators.is-armed .pg-operator-ill .a { fill-opacity: 0; }

.pg-operators.is-armed.is-drawn .pg-operator-ill > * {
  animation: pg-draw 0.9s var(--ease) var(--pg-draw-delay, 0ms) forwards;
}
/* Il pieno arriva quando il contorno è quasi chiuso, non insieme. */
.pg-operators.is-armed.is-drawn .pg-operator-ill .a {
  animation:
    pg-draw 0.9s var(--ease) var(--pg-draw-delay, 0ms) forwards,
    pg-fill 0.45s var(--ease) calc(var(--pg-draw-delay, 0ms) + 0.6s) forwards;
}

@keyframes pg-draw { to { stroke-dashoffset: 0; } }
@keyframes pg-fill { to { fill-opacity: 1; } }

/* Sfalsamento per scheda: 70ms l'una, così la griglia si scrive da sinistra a
   destra invece di apparire tutta insieme. */
.pg-operator:nth-child(1) { --pg-draw-delay: 0ms; }
.pg-operator:nth-child(2) { --pg-draw-delay: 70ms; }
.pg-operator:nth-child(3) { --pg-draw-delay: 140ms; }
.pg-operator:nth-child(4) { --pg-draw-delay: 210ms; }
.pg-operator:nth-child(5) { --pg-draw-delay: 280ms; }
.pg-operator:nth-child(6) { --pg-draw-delay: 350ms; }
.pg-operator:nth-child(7) { --pg-draw-delay: 420ms; }
.pg-operator:nth-child(8) { --pg-draw-delay: 490ms; }
.pg-operator-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--light-ink);
  text-wrap: balance;
}

/* --------------------------------------------------------------- Valore aggiunto */
/* Gerarchia invertita rispetto a `.jo-why` di jora: là il nome è il titolo e
   l'esito una riga maiuscola sotto il corpo. Qui l'ESITO è il titolo, il nome
   scende a chiave nel margine sinistro, il corpo chiude. Nessun trattino nel
   margine, nessun filetto: separa il vuoto. */
/* Griglia 2x2 e non quattro righe in pila: in pila il contenuto si fermava a
   865px su una colonna da 1080 e il 40% destro restava morto. La chiave resta
   nel MARGINE, non sopra l'esito: sopra diventerebbe un occhiello, che il sito
   non usa da nessuna parte. */
.pg-value {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.5rem 4.5rem;
}
.pg-value-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 1.35rem;
  align-items: baseline;
}
.pg-value-key {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
  padding-top: 0.3rem;
}
.pg-value-out {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.pg-value-body > p:last-child {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- Ponte aftermarket */
/* Sta sul terreno nudo, non su banda rialzata: sopra c'è il valore aggiunto
   che è rialzato, e due bande rialzate di fila si leggerebbero come una. Il
   confine lo fa il filetto caldo, che è anche l'unica volta che il caldo esce. */
.pg-am {
  background: var(--bg);
  border-top: 2px solid var(--warm);
  padding: 5.5rem var(--pad-x);
}
.pg-am-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 3rem;
  align-items: center;
}
.pg-am h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}
.pg-am h2 em { font-style: normal; color: var(--warm); }
.pg-am-text p {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 58ch;
}
/* Senza il bottone (site.spareparts-visible=false) la seconda traccia resta
   dichiarata e si porta dietro i 3rem di gap: la colonna del testo passa da
   742px a 1080px. Il paragrafo non se ne accorge, è tappato a 58ch; il TITOLO
   sì, perché non ha misura massima — con questo testo sta su una riga in
   entrambi i casi, ma se si allungasse si spanderebbe su tutta la colonna. */
.pg-am-inner:not(:has(.pg-am-cta)) { grid-template-columns: 1fr; }
.pg-am-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pg-am-note { font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.03em; }

/* --------------------------------------------------------------- Contatti */
.pg-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 7rem var(--pad-x);
  color: var(--on-dark);
}
.pg-contact-bg { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.pg-contact-img {
  position: absolute;
  inset: 0;
  background: url('/img/hero-terminal.jpg') center 55% / cover no-repeat;
  filter: grayscale(1) contrast(1.08);
}
.pg-contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(10, 23, 41, 0.88) 0%,
    rgba(10, 23, 41, 0.68) 55%,
    rgba(10, 23, 41, 0.32) 100%);
}
.pg-contact-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.pg-contact h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.9rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.pg-contact-inner > div > p {
  font-size: 16px;
  color: var(--on-dark-muted);
  line-height: 1.75;
  max-width: 44ch;
}
.pg-contact-list { border-bottom: 1px solid var(--rule-dark); }
.pg-contact-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule-dark);
}
.pg-contact-list dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--on-dark-faint);
}
.pg-contact-list dd { font-size: 15px; color: #fff; }
.pg-contact-list a { color: var(--accent); text-decoration: none; }
.pg-contact-list a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Footer */
.pg-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 2rem var(--pad-x);
}
.pg-footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--maxw); margin: 0 auto; gap: 1rem; flex-wrap: wrap;
}
.pg-footer p { font-size: 12.5px; color: var(--ink-faint); }
/* "Impostazioni cookie" è un <button> perché apre un pannello, non naviga. */
.pg-footer-legal button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration: underline;
  cursor: pointer;
}
.pg-footer-legal button:hover { color: var(--accent); }

.pg-footer-credits {
  max-width: var(--maxw);
  margin: 1rem auto 0;
  font-size: 11px;
  color: var(--ink-faint);
  opacity: 0.75;
  line-height: 1.5;
}
.pg-footer-credits a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------- Ingresso */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1000px) {
  .pg-about-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .pg-am-inner { grid-template-columns: 1fr; }
  .pg-am-cta { align-items: flex-start; }
  .pg-contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .pg-figures { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
  /* Il valore aggiunto torna a una colonna di voci, e dentro la voce la chiave
     sale sopra l'esito. */
  .pg-value { grid-template-columns: 1fr; gap: 2.75rem; }
  .pg-value-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .pg-value-key { padding-top: 0; }

  /* Quattro schede operatore su una colonna da ~900px diventano strette e
     alte: sotto questa soglia passano a due, come il know-how. */
  .pg-operators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --pad-x: 1.5rem; }

  .pg-nav { padding: 1rem var(--pad-x); }
  .pg-nav-toggle { display: block; }

  .pg-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 23, 41, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0.5rem var(--pad-x) 1.5rem;
    /* Il pannello è in overlay, non spinge la pagina: non serve animargli
       l'altezza. Prima transitavano max-height e padding (layout thrash, più
       un tetto di 440px che avrebbe tagliato il menu se cresceva). Ora si
       muovono solo opacity e transform, e visibility lo toglie anche dal
       giro dei tab quando è chiuso. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s var(--ease), transform 0.28s var(--ease), visibility 0s linear 0.28s;
  }
  .pg-nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.22s var(--ease), transform 0.28s var(--ease), visibility 0s;
  }
  /* La tendina è navy come la barra: i link restano chiari. */
  .pg-nav-links { flex-direction: column; gap: 0; font-size: 16px; }
  .pg-nav-links a { color: var(--ink-soft); padding: 0.9rem 0; border-bottom: 1px solid var(--border-soft); }
  .pg-nav-links a::after { display: none; }
  .pg-nav-cta { margin-top: 1rem; width: 100%; padding: 13px; }

  .pg-hero { min-height: 84svh; padding: 7.5rem var(--pad-x) 4rem; }
  .pg-figures { margin-top: 2.5rem; }

  .pg-section { padding: 4.5rem var(--pad-x); }
  .pg-section--raised { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .pg-about { padding-top: 5rem; padding-bottom: 5rem; }
  .pg-contact { padding: 4.5rem var(--pad-x); }
  .pg-am { padding: 3.5rem var(--pad-x); }

  .pg-know-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pg-section--light { padding-top: 4.5rem; padding-bottom: 4.5rem; }

  .pg-contact-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (max-width: 480px) {
  .pg-figures { grid-template-columns: 1fr; gap: 1rem; }
  .pg-know-grid { grid-template-columns: 1fr; }
  .pg-operators { grid-template-columns: 1fr; }
}

/* Rispetta le preferenze di chi disabilita le animazioni */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pg-hero-slide { transition: none; animation: none; transform: scale(1.05); }
  .pg-claim { opacity: 1; transform: none; transition: none; }
  /* Doppia guardia: illustrations.js non arma nemmeno, ma se le classi
     arrivassero comunque i disegni devono restare interi.
     I selettori ripetono ESATTAMENTE quelli armati, `.is-drawn` compreso: una
     media query non aggiunge specificità, quindi `.pg-operators .pg-operator-ill > *`
     (0,2,0) perderebbe contro `.pg-operators.is-armed.is-drawn ...` (0,4,0) e la
     guardia non servirebbe a niente. A parità di specificità vince chi viene
     dopo, e questo blocco è in fondo al foglio. */
  .pg-operators.is-armed .pg-operator-ill > *,
  .pg-operators.is-armed.is-drawn .pg-operator-ill > * {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
  .pg-operators.is-armed .pg-operator-ill .a,
  .pg-operators.is-armed.is-drawn .pg-operator-ill .a { fill-opacity: 1; }
  .pg-nav-links a::after { transition: none; }
  .pg-nav-menu { transform: none; transition: none; }
  .pg-nav-menu.is-open { transition: none; }
}