/* Noleggiando.com Website — le PAGINE D'INGRESSO: homepage (§ 5.2.1
 * «Apertura del libro»), Contatti (§ 5.2.3 «Due sedi») e Richiedi
 * preventivo (§ 5.2.4 «A passi numerati») del brand book 5.8.0.
 *
 * Le tre pagine sono quelle di «Layout 1-1», che il libro scrive con gli
 * stili in linea: qui gli stessi valori diventano classi `nw-*`, perche' il
 * sito ha bisogno di una cosa che lo stile in linea non da' — la resa sul
 * telefono di cio' che non e' una griglia a interruttore (il masonry del
 * benvenuto, il carosello dei centri). Dove il libro chiede al sistema di
 * collassare (`var(--nlg-g2, …)`, `var(--nlg-g4, …)`) la richiesta resta
 * scritta uguale: la decide il layer del dispositivo (tokens/dispositivo.css).
 *
 * Regole del foglio: solo token `--nlg-*`, nessun colore letterale; le
 * classi `.nlg-*` del brand book si usano e non si ridefiniscono (dove
 * serve, si raggiungono DENTRO un blocco del sito); niente font esterni.
 * Lo carica chi lo usa, con @push('head'): home, contatti, preventivo.
 */

/* ═══════════════════════ Il passo comune ═══════════════════════ */

.nw-in-sez {
  background: var(--nlg-canvas);
  padding: calc(var(--nlg-s-9) * var(--nlg-passo-k, 1)) 0;
}
.nw-in-sez--superficie { background: var(--nlg-surface-2); }

.nw-in-contenitore {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: 0 var(--nlg-margine);
}

.nw-in-h2 {
  margin: 0 0 var(--nlg-s-5);
  max-width: 34ch;
  font: 700 var(--nlg-fs-h2)/var(--nlg-lh-h2) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h2);
  color: var(--nlg-text-1);
  text-wrap: pretty;
}

.nw-in-testo {
  margin: 0;
  max-width: 72ch;
  font: 400 var(--nlg-fs-body)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}
.nw-in-testo--piccolo { font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text); }
.nw-in-testo--prima { margin-bottom: var(--nlg-s-6); }
.nw-in-testo--dopo { margin-top: var(--nlg-s-6); }
.nw-in-testo strong, .nw-in-testo b { color: var(--nlg-text-1); }

/* L'occhiello mono delle card e dei riepiloghi (10,5 px, maiuscolo spaziato). */
.nw-in-mono {
  font-family: var(--nlg-font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nlg-text-3);
}

/* Il bottone piccolo delle card (sede, centro, casamadre): 36 px. */
.nw-in-bottone-piccolo.nlg-btn { height: 36px; padding: 0 var(--nlg-s-3); font-size: var(--nlg-fs-caption); }

/* L'indirizzo col segnaposto, che porta alla pagina della sede. */
.nw-in-indirizzo {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--nlg-fs-body-sm);
  line-height: 1.4;
  color: var(--nlg-blue-ink);
  text-decoration: none;
}
.nw-in-indirizzo svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* L'icona tonda del § 4.1 (riquadro informativo con il glifo). */
.nw-in-icona {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nlg-r-md);
  background: var(--nlg-info-bg);
  border: 1px solid var(--nlg-info-border);
  color: var(--nlg-blue-ink);
}
.nw-in-icona svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Il filo di firma del § 3.2.1 (brand book 5.15.0), sotto le aperture
   chiare e sotto la testa del preventivo, e' `partials/filo-firma`: le sue
   regole stanno in site.css, una volta per tutte le pagine. */

/* ═══════════════════════ HOMEPAGE · § 5.2.1 ═══════════════════════ */

/* ── L'apertura del libro: la composizione a barre (§ 3.1.1) col marchio al
   centro e il bottone che la rigenera; sotto, listino e programma partner al
   50%. La composizione la disegna js/home.js: senza script il campo resta
   chiaro, col solo marchio — sta in piedi da solo (scheda delle aperture). */

.nw-hp-apertura { background: var(--nlg-canvas); }
.nw-hp-apertura__contenitore {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: calc(var(--nlg-s-6) * var(--nlg-passo-k, 1)) var(--nlg-margine) calc(var(--nlg-s-8) * var(--nlg-passo-k, 1));
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-5);
}

.nw-hp-apertura__campo {
  position: relative;
  overflow: hidden;
  min-height: var(--nlg-eroe, 420px);
  border-radius: var(--nlg-r-xl);
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
}
.nw-hp-apertura__barre { position: absolute; inset: 0; pointer-events: none; }
.nw-hp-apertura__barre svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.nw-hp-apertura__marchio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nw-hp-apertura__titolo { max-width: 100%; margin: 0; font-size: inherit; }
/* Il lockup e' il marchio della fabbrica nella forma `payoff` (raggera,
   logotipo, «.com» e «Noleggio Professionale», tutti tracciati), alto quanto
   la raggera della pagina 1:1: 83 px. Fino alla revisione del 2026-10-01 il
   logotipo e il payoff erano testo in --nlg-font-logo, cioe' un lockup
   ricostruito con un carattere — destinazioni-uso.json, § 1.1: «mai un
   lockup ricostruito con un carattere installato: il lettering e' un
   tracciato, non un testo» —, e il sito non serve Manrope: usciva nel
   ripiego, e largo 370 px fissi si tagliava sotto i 390 px. */
.nw-hp-apertura__lockup { display: flex; align-items: center; max-width: 100%; }
.nw-hp-apertura__lockup .nw-marchio--payoff { display: block; height: 83px; max-width: 100%; }
.nw-hp-apertura__lockup .nw-marchio--payoff svg { display: block; height: 100%; width: auto; max-width: 100%; }
.nw-in-punto { color: var(--nlg-logo-dot); font-weight: 600; }

.nw-hp-apertura__rigenera {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nlg-r-md);
  border: 1px solid var(--nlg-border-strong);
  background: var(--nlg-surface-1);
  color: var(--nlg-text-1);
  cursor: pointer;
  transition: border-color var(--nlg-t-fast) var(--nlg-ease), color var(--nlg-t-fast) var(--nlg-ease);
}
.nw-hp-apertura__rigenera[hidden] { display: none; }
.nw-hp-apertura__rigenera:hover { border-color: var(--nlg-action); color: var(--nlg-blue-ink); }
.nw-hp-apertura__rigenera:focus-visible { outline: none; box-shadow: var(--nlg-focus-ring); }
.nw-hp-apertura__rigenera svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.nw-hp-apertura__coppia {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 1fr) minmax(0, 1fr));
  gap: var(--nlg-s-4);
}
.nw-hp-scheda {
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-3);
  min-width: 0;
  padding: 22px var(--nlg-s-5);
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}
.nw-hp-scheda__testa { display: flex; align-items: center; gap: var(--nlg-s-3); }
.nw-hp-scheda__titolo {
  margin: 0;
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
}
.nw-hp-scheda__azioni { display: flex; gap: var(--nlg-s-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--nlg-s-1); }
.nw-hp-scheda__azioni .nlg-btn--terziario { padding: 0 6px; }

/* Sul telefono la composizione sparisce (scheda delle aperture: «su
   telefono sparisce»), e con lei il bottone che la rigenera. Il marchio
   scende di misura per stare nella colonna. */
@media (max-width: 719px) {
  .nw-hp-apertura__barre, .nw-hp-apertura__rigenera { display: none; }
  /* 52 px di altezza sono circa 281 di larghezza: il lockup sta nel campo
     anche a 320 px (284 utili), e resta sopra i 120 px del minimo (§ 1.2). */
  .nw-hp-apertura__lockup .nw-marchio--payoff { height: 52px; }
}

/* ── Il benvenuto senza titolo: i paragrafi su sette colonne e il masonry di
   sette foto dello showroom sulle dodici. */

.nw-hp-benvenuto__griglia {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto);
  gap: var(--nlg-s-3);
}
.nw-hp-benvenuto__testo {
  grid-column: 1 / span 7;
  grid-row: 1 / span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--nlg-s-4);
  max-width: 60ch;
  padding-right: var(--nlg-s-4);
}
.nw-hp-benvenuto__occhiello { color: var(--nlg-blue-ink); }
.nw-hp-benvenuto__attacco {
  margin: 0;
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  color: var(--nlg-text-1);
  text-wrap: balance;
}
.nw-in-logotipo {
  font-family: var(--nlg-font-logo);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--nlg-logotype);
}
.nw-hp-numeri {
  display: flex;
  gap: var(--nlg-s-6);
  flex-wrap: wrap;
  margin: var(--nlg-s-2) 0 0;
  padding-top: var(--nlg-s-2);
  border-top: var(--nlg-linea) solid var(--nlg-border);
}
.nw-hp-numeri__voce { display: flex; flex-direction: column; gap: 2px; }
.nw-hp-numeri__valore {
  font: 800 var(--nlg-fs-h2)/1 var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h2);
  color: var(--nlg-text-1);
}

/* La casella della foto: il ripiego (velo e immagine del brand) sta sotto,
   la foto sopra; una casella senza foto mostra il ripiego. */
.nw-hp-foto {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--nlg-r-md);
  border: 1px solid var(--nlg-border);
  background: linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)), url(../brand/immagini/nlg-trama.png) center/cover no-repeat;
  background-color: var(--nlg-immagine-fondo);
}
.nw-hp-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nw-hp-foto--1 { grid-column: 8 / span 3; grid-row: 1 / span 2; }
.nw-hp-foto--2 { grid-column: 11 / span 2; grid-row: 1 / span 3; }
.nw-hp-foto--3 { grid-column: 8 / span 3; grid-row: 3 / span 2; }
.nw-hp-foto--4 { grid-column: 11 / span 2; grid-row: 4 / span 1; }
.nw-hp-foto--5 { grid-column: 1 / span 3; grid-row: 5 / span 2; }
.nw-hp-foto--6 { grid-column: 4 / span 4; grid-row: 5 / span 2; }
.nw-hp-foto--7 { grid-column: 8 / span 5; grid-row: 5 / span 2; }

/* Sotto la banda desktop il testo prende la riga intera e le sette foto
   ricompongono il masonry su sei colonne; sul telefono su due. */
/* La riga del testo e' ESPLICITA e alta quanto il contenuto
   (`grid-template-rows: auto`); le foto stanno nelle righe implicite da 120
   e 110 px. Con la sola `grid-auto-rows` anche la riga del testo era da 120
   px, e il testo — una colonna flex centrata — traboccava sopra e sotto:
   misurato alla revisione del 2026-10-01, a 360 px il contenuto andava da
   754 a 1659 in un riquadro 1151–1261, sopra l'apertura e sotto le foto. Il
   blocco dei 719 px eredita la riga esplicita e cambia solo le implicite. */
@media (max-width: 1023px) {
  .nw-hp-benvenuto__griglia { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 120px; }
  .nw-hp-benvenuto__testo { grid-column: 1 / -1; grid-row: auto; max-width: none; padding-right: 0; }
  .nw-hp-foto--1 { grid-column: span 3; grid-row: span 2; }
  .nw-hp-foto--2 { grid-column: span 3; grid-row: span 1; }
  .nw-hp-foto--3 { grid-column: span 3; grid-row: span 1; }
  .nw-hp-foto--4 { grid-column: span 2; grid-row: span 1; }
  .nw-hp-foto--5 { grid-column: span 2; grid-row: span 1; }
  .nw-hp-foto--6 { grid-column: span 2; grid-row: span 1; }
  .nw-hp-foto--7 { grid-column: 1 / -1; grid-row: span 2; }
}
@media (max-width: 719px) {
  .nw-hp-benvenuto__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 110px; }
  .nw-hp-foto--1, .nw-hp-foto--7 { grid-column: 1 / -1; grid-row: span 2; }
  .nw-hp-foto--2, .nw-hp-foto--3, .nw-hp-foto--4, .nw-hp-foto--5, .nw-hp-foto--6 { grid-column: span 1; grid-row: span 1; }
  .nw-hp-foto--6 { grid-column: 1 / -1; }
}

/* ── Il catalogo: il listing delle anteprime Proposta a manifesto (§ 4.6.5),
   due per riga, alimentato dalle pagine correlate alla homepage. */

.nw-hp-proposte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g2, repeat(2, minmax(0, 1fr)));
  gap: var(--nlg-s-4);
  align-items: stretch;
}
.nw-hp-proposte > li { min-width: 0; }
.nw-hp-proposta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--nlg-r-lg);
  border: 1px solid var(--nlg-border);
  /* L'immagine della tipologia e' il primo strato dello sfondo, come nella
     pagina 1:1 e nel partial del libro: larga il 62%, a 40% dall'alto, sul
     ripiego (la trama sotto velo) e sul passepartout. Arriva dalla vista in
     `--nw-immagine`; se manca, o non si carica, resta il ripiego, mai il
     segno dell'immagine rotta. */
  background:
    var(--nw-immagine, none) center 40% / 62% no-repeat,
    linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)),
    url(../brand/immagini/nlg-trama.png) center/cover no-repeat;
  background-color: var(--nlg-passepartout);
  color: var(--nlg-immagine-ink);
  text-decoration: none;
}
.nw-hp-proposta__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--nlg-immagine-velo) 0%, var(--nlg-immagine-velo) 34%, transparent 70%);
}
.nw-hp-proposta__citta {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: var(--nlg-s-1) var(--nlg-s-2);
  border-radius: var(--nlg-r-mini);
  background: var(--nlg-surface-1);
  color: var(--nlg-text-1);
}
.nw-hp-proposta__corpo { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.nw-hp-proposta__titolo {
  font: 800 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
  text-wrap: balance;
}
.nw-hp-proposta__breve {
  max-width: 52ch;
  font: 400 var(--nlg-fs-body-sm)/var(--nlg-lh-body-sm) var(--nlg-font-text);
  text-wrap: pretty;
}
.nw-hp-proposta__azione {
  align-self: flex-end;
  margin-top: var(--nlg-s-1);
  font: 600 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-ui);
}
.nw-hp-proposta:focus-visible { outline: none; box-shadow: var(--nlg-focus-ring); }
/* L'inchiostro sull'immagine resta tale sotto il puntatore: `a:hover` del
   libro (typography.css, (0,1,1)) peserebbe piu' della classe e scriverebbe
   --nlg-action-hover sul velo scuro. */
.nw-hp-proposta:hover { color: var(--nlg-immagine-ink); }

/* ── Come funziona: i passi con la barra (t03 · orizzontale con indicatore). */

.nw-hp-passi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g4, repeat(auto-fit, minmax(min(var(--nlg-voce-min), 100%), 1fr)));
  gap: var(--nlg-s-5) var(--nlg-s-1);
}
.nw-hp-passi__voce { display: flex; flex-direction: column; gap: var(--nlg-s-3); min-width: 0; }
.nw-hp-passi__barra {
  display: block;
  height: var(--nlg-s-4);
  border-radius: calc(var(--nlg-s-1) * .75);
  background: var(--nlg-bar-blue);
}
.nw-hp-passi__numero {
  padding-right: var(--nlg-s-4);
  font: 500 var(--nlg-fs-body-sm)/1.3 var(--nlg-font-mono);
  color: var(--nlg-blue-ink);
}
.nw-hp-passi__titolo {
  margin: 0;
  padding-right: var(--nlg-s-4);
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  color: var(--nlg-text-1);
}
.nw-hp-passi__voce .nw-in-testo { padding-right: var(--nlg-s-4); }

/* ── I due banner del § 5.8 (brand book 5.15.0; § 5.9 fino alla 5.14.1):
   «Noleggiare con Noleggiando» (5.8.4, con animazione — il cerchio si
   ferma se l'utente chiede meno movimento, ed e' il componente
   `.nlg-cerchio` a farlo) e Servizi Extra (5.8.2, Sezione). */

.nw-hp-banner { display: flex; flex-direction: column; gap: 34px; align-items: center; color: var(--nlg-text-1); }
.nw-hp-banner__testa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nlg-s-3);
  max-width: 720px;
  text-align: center;
}
.nw-hp-banner__testa .nw-marchio--raggera { height: 30px; }
.nw-hp-banner__titolo {
  margin: 0;
  font: 800 var(--nlg-fs-h2)/var(--nlg-lh-h2) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h2);
  text-wrap: balance;
}
.nw-hp-banner__sotto { margin: 0; font-size: var(--nlg-fs-body-lg); color: var(--nlg-text-2); }
.nw-hp-cerchiato {
  position: relative;
  display: inline-block;
  padding: 0 .12em;
  font-family: var(--nlg-font-logo);
  letter-spacing: -.03em;
  color: var(--nlg-logotype);
}
.nw-hp-cerchiato svg {
  position: absolute;
  left: -.3em;
  top: -.28em;
  width: calc(100% + .6em);
  height: calc(100% + .5em);
  overflow: visible;
  pointer-events: none;
}
/* Il tratto del libro in questo banner e' sottile: il componente lo porta
   a 9 per i cerchi grandi, qui il disegno lo vuole a 2,6. */
.nw-hp-cerchiato .nlg-cerchio { stroke-width: 2.6; }

.nw-hp-promesse {
  width: 100%;
  display: grid;
  grid-template-columns: var(--nlg-g4, repeat(4, 1fr));
  gap: 20px;
}
.nw-hp-promessa { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 var(--nlg-s-1); text-align: center; }
.nw-hp-promessa .nw-in-icona { width: 52px; height: 52px; }
.nw-hp-promessa .nw-in-icona svg { width: 27px; height: 27px; }
.nw-hp-promessa__titolo { font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui); }
.nw-hp-promessa__testo { font-size: var(--nlg-fs-body-sm); line-height: 1.5; color: var(--nlg-text-2); text-wrap: pretty; }
.nw-hp-promessa__testo b { color: var(--nlg-text-1); }

.nw-hp-servizi { display: flex; flex-direction: column; gap: 36px; color: var(--nlg-text-1); }
.nw-hp-servizi__testa { display: flex; flex-direction: column; gap: var(--nlg-s-2); align-items: center; text-align: center; }
/* Senza la scorciatoia `font`, che riporterebbe l'interlinea a `normal`: il
   sottotitolo eredita quella del testo, come nella pagina 1:1. */
.nw-hp-servizi__sotto { font-family: var(--nlg-font-ui); font-weight: 600; font-size: var(--nlg-fs-body-lg); color: var(--nlg-blue-ink); }
.nw-hp-servizi__testa .nw-in-testo { margin-top: 6px; line-height: 1.6; }
/* Le due colonne sono comprimibili (`minmax(0, 1fr)`): con `1fr 1fr` il
   minimo era il contenuto, e fra 720 e 800 px la griglia spingeva la pagina
   a 803 px (revisione del 2026-10-01). */
.nw-hp-servizi__griglia {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 1fr) minmax(0, 1fr));
  gap: 28px 40px;
  align-items: center;
}
.nw-hp-servizio { display: flex; align-items: center; gap: 22px; padding: 10px; }
.nw-hp-servizio > :not(.nw-hp-servizio__immagine) { min-width: 0; }
.nw-hp-servizio__immagine {
  position: relative;
  flex: none;
  width: 160px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--nlg-r-lg);
  border: 1px solid var(--nlg-border);
  /* La foto del servizio e' il primo strato dello sfondo (`--nw-immagine`,
     dalla vista), contenuta, sul ripiego del libro (nlg-pausa sotto velo):
     se la foto non arriva resta il ripiego pulito, come nella pagina 1:1. */
  background:
    var(--nw-immagine, none) center / contain no-repeat,
    linear-gradient(var(--nlg-velo-ripiego), var(--nlg-velo-ripiego)),
    url(../brand/immagini/nlg-pausa.png) center/cover no-repeat;
  background-color: var(--nlg-passepartout);
}
.nw-hp-servizio__titolo {
  margin: 0 0 6px;
  font: 700 var(--nlg-fs-h4)/var(--nlg-lh-h4) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h4);
  color: var(--nlg-blue-ink);
  /* Sulla tavoletta «Personalizzazione» non sta nella colonna: si sillaba
     dove il browser sa l'italiano (la pagina e' lang="it"), altrimenti va a
     capo dentro la parola invece di spingere la griglia. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Sulla tavoletta l'immagine scende gia' a 96 px: a 160 lasciava al testo
   meno di 140 px per colonna. */
@media (max-width: 1023px) {
  .nw-hp-servizio__immagine { width: 96px; }
}
@media (max-width: 719px) {
  .nw-hp-servizio { align-items: flex-start; gap: var(--nlg-s-4); padding: 0; }
}

/* ── I centri di noleggio: testo e casella della provincia a sinistra, il
   carosello dei centri a destra, a pagine di due anteprime. Senza script le
   anteprime stanno tutte in griglia; lo script (js/home.js) mette la classe
   `is-carosello` e da li' la pista scorre di pagina in pagina. */

.nw-hp-centri {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 1fr) minmax(0, 1fr));
  gap: var(--nlg-s-6) var(--nlg-gutter);
  align-items: start;
}
.nw-hp-centri__testo { display: flex; flex-direction: column; gap: var(--nlg-s-5); min-width: 0; }
.nw-hp-centri__testo .nw-in-h2 { margin: 0; }
.nw-hp-centri__paragrafi { display: flex; flex-direction: column; gap: var(--nlg-s-4); max-width: 60ch; }
.nw-hp-centri__casella { display: flex; flex-direction: column; gap: var(--nlg-s-2); max-width: 420px; }
/* L'etichetta tiene il margine della libreria (0 0 s-2), che la pagina 1:1
   somma al passo della colonna: 16 px fino alla casella. */
.nw-hp-centri__casella .nlg-etichetta {
  font: 600 var(--nlg-fs-body)/1.3 var(--nlg-font-ui);
  text-transform: none;
  letter-spacing: 0;
  color: var(--nlg-text-1);
}

.nw-hp-carosello { display: flex; flex-direction: column; gap: var(--nlg-s-3); min-width: 0; }
.nw-hp-carosello__finestra { min-width: 0; }
.nw-hp-carosello__pista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nlg-g2, repeat(2, minmax(0, 1fr)));
  gap: var(--nlg-s-3);
}
.nw-hp-carosello.is-carosello .nw-hp-carosello__finestra { overflow: hidden; }
.nw-hp-carosello.is-carosello .nw-hp-carosello__pista {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px) / 2);
  transition: transform .4s var(--nlg-ease);
}
@media (max-width: 719px) {
  .nw-hp-carosello.is-carosello .nw-hp-carosello__pista { grid-auto-columns: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nw-hp-carosello.is-carosello .nw-hp-carosello__pista { transition: none; }
}
.nw-hp-centro[hidden] { display: none; }

.nw-hp-centro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}
.nw-hp-centro__nome { font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui); }
.nw-hp-centro__azioni { display: flex; gap: var(--nlg-s-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--nlg-s-1); }

.nw-hp-carosello__comandi { display: flex; justify-content: space-between; align-items: center; gap: var(--nlg-s-3); }
.nw-hp-carosello__navigazione { display: flex; align-items: center; gap: 10px; }
.nw-hp-carosello__navigazione[hidden] { display: none; }
.nw-hp-carosello__punti { display: flex; gap: 6px; }
.nw-hp-carosello__punto { width: 8px; height: 8px; border-radius: 4px; background: var(--nlg-border-strong); }
.nw-hp-carosello__punto.is-corrente { width: 20px; background: var(--nlg-action); }
.nw-hp-carosello__freccia.nlg-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* ═══════════════════════ CONTATTI · § 5.2.3 ═══════════════════════ */

/* L'apertura chiara col filo di firma (nlg-a-chiara-filo). */
.nw-in-apertura { background: var(--nlg-canvas); }
.nw-in-apertura__contenitore {
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: calc(var(--nlg-s-8) * var(--nlg-passo-k, 1)) var(--nlg-margine) calc(var(--nlg-s-6) * var(--nlg-passo-k, 1));
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-4);
}
.nw-in-apertura .nlg-occhiello { margin: 0; color: var(--nlg-text-3); }
.nw-in-apertura__titolo {
  margin: 0;
  max-width: 24ch;
  font: 800 var(--nlg-fs-h1)/var(--nlg-lh-h1) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h1);
  color: var(--nlg-text-1);
  text-wrap: balance;
}
.nw-in-apertura__sotto {
  margin: 0;
  max-width: 60ch;
  font: 400 var(--nlg-fs-body-lg)/var(--nlg-lh-body) var(--nlg-font-text);
  color: var(--nlg-text-2);
  text-wrap: pretty;
}
.nw-in-apertura__filo { padding-top: var(--nlg-s-4); }

.nw-ct-sedi { display: grid; grid-template-columns: var(--nlg-g2, 1fr 1fr); gap: var(--nlg-s-4); }
.nw-ct-sede {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--nlg-s-5);
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}
.nw-ct-sede__nome {
  margin: 0;
  font: 700 var(--nlg-fs-h2)/var(--nlg-lh-h2) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
}
.nw-ct-sede__recapiti { display: flex; gap: var(--nlg-s-2); flex-wrap: wrap; margin-top: var(--nlg-s-1); }
.nw-ct-sede__coda { margin-top: 6px; }

.nw-ct-casamadre {
  margin-top: var(--nlg-s-4);
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 5fr) minmax(0, 7fr));
  gap: var(--nlg-s-4) var(--nlg-gutter);
  align-items: start;
  padding: 22px;
  background: var(--nlg-surface-1);
  border: 1px solid var(--nlg-border);
  border-radius: var(--nlg-r-xl);
}
.nw-ct-casamadre__colonna { display: flex; flex-direction: column; gap: var(--nlg-s-2); }
.nw-ct-casamadre__colonna + .nw-ct-casamadre__colonna { gap: 10px; }
.nw-ct-casamadre__nome {
  font: 700 var(--nlg-fs-h3)/var(--nlg-lh-h3) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h3);
}
.nw-ct-casamadre__indirizzo { font-style: normal; }

/* Consegna, ritiro, orari: l'elenco a righe del t02, titolo a 4 e testo a 8. */
.nw-ct-righe { list-style: none; margin: 0; padding: 0; border-top: var(--nlg-linea) solid var(--nlg-border); }
.nw-ct-righe > li { border-bottom: var(--nlg-linea) solid var(--nlg-border); }
.nw-ct-riga {
  display: grid;
  grid-template-columns: var(--nlg-g2, minmax(0, 4fr) minmax(0, 8fr));
  gap: var(--nlg-s-2) var(--nlg-gutter);
  padding: var(--nlg-s-4) 0;
  align-items: baseline;
}
.nw-ct-riga__titolo { margin: 0; font: 600 var(--nlg-fs-body)/1.4 var(--nlg-font-ui); color: var(--nlg-text-1); }

.nw-ct-settore { display: flex; flex-direction: column; gap: var(--nlg-s-4); max-width: 72ch; }

/* ═══════════════════════ RICHIEDI PREVENTIVO · § 5.2.4 ═══════════════════════ */

/* «Due metà» (brand book 5.16.1): la guida su fondo blu a sinistra, il filo
   di firma e il modulo a destra; sul telefono prima la meta' blu. Dalla
   5.18.0 le due meta' stanno dentro il contenitore del sito, allineate a
   header e footer: la pagina 1:1 le mette in un riquadro largo
   --nlg-container (padding clamp 24–48 / margine, colonne da 420 px al
   minimo, stacco clamp 24–48), la guida in un blocco r-xl col padding clamp
   28–56 / 20–48, il modulo senza padding proprio. */
.nw-rp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  max-width: var(--nlg-container);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--nlg-margine);
}
.nw-rp__guida {
  background: var(--nlg-action);
  color: var(--nlg-text-onaction);
  border-radius: var(--nlg-r-xl);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-6);
}
.nw-rp__testa { display: flex; flex-direction: column; gap: var(--nlg-s-4); max-width: 30rem; }
.nw-rp__occhiello { font: 500 12px var(--nlg-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.nw-rp__titolo {
  margin: 0;
  font: 800 var(--nlg-fs-h1)/var(--nlg-lh-h1) var(--nlg-font-ui);
  letter-spacing: var(--nlg-ls-h1);
  text-wrap: balance;
}
.nw-rp__frase { margin: 0; font: 400 var(--nlg-fs-body-lg)/1.5 var(--nlg-font-text); text-wrap: pretty; }
.nw-rp__passi { list-style: none; margin: 0; padding: 0; max-width: 30rem; }
.nw-rp__passo {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--nlg-text-onaction) 28%, transparent);
}
.nw-rp__numero { font: 500 15px/1.6 var(--nlg-font-mono); }
.nw-rp__voce { display: flex; flex-direction: column; gap: 4px; }
.nw-rp__nome { font: 700 var(--nlg-fs-body-lg)/1.3 var(--nlg-font-ui); }
.nw-rp__spiega { font: 400 var(--nlg-fs-body-sm)/1.5 var(--nlg-font-text); }
.nw-rp__voce-a-voce {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--nlg-s-5);
  border-top: 1px solid color-mix(in srgb, var(--nlg-text-onaction) 28%, transparent);
  max-width: 30rem;
}
.nw-rp__domanda { font: 700 var(--nlg-fs-body)/1.3 var(--nlg-font-ui); }
.nw-rp__recapiti { display: flex; flex-wrap: wrap; gap: 10px; }
.nw-rp__contatti:is(:link, :visited) { align-self: center; color: var(--nlg-text-onaction); font: 600 14px var(--nlg-font-ui); }
.nw-rp__modulo {
  background: var(--nlg-canvas);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nlg-s-5);
  min-width: 0;
}
/* «Passo N di M · nome» e la barra a segmenti (§ 3.2.2) sopra il modulo.
   La riga del passo e' una sola; sul telefono dice solo «Passo 2 di 3». */
.nw-rp__avanzamento { display: flex; flex-direction: column; gap: 10px; }
.nw-rp-testa__sotto { margin: 0; font-size: var(--nlg-fs-body-lg); line-height: 1.5; color: var(--nlg-text-2); }
.nw-rp-testa__sotto[data-avanzamento-di] { white-space: nowrap; }
@media (max-width: 719px) {
  .nw-rp-testa__nome-passo { display: none; }
}
.nw-rp-modulo { max-width: 720px; display: flex; flex-direction: column; gap: 18px; }