/* =====================================================================
   NUZZI METAL DESIGN — Foglio di stile del sito
   Ricostruzione statica (HTML/CSS/JS) del sito nuzzimetaldesign.com

   Indice
   1.  Font Kamerik 105
   2.  Reset e impostazioni di base
   3.  Token di progetto (colori, misure)
   4.  Impianto tipografico
   5.  Contenitori e struttura di pagina
   6.  Pulsanti
   7.  Header, barra di lettura, menu mobile
   8.  Hero e riflesso metallico del titolo
   9.  Sezione "Le nostre opere" (carosello progetti)
   10. Sezione a tutto schermo con foto di sfondo
   11. Pagina Progetti (griglia + galleria)
   12. Pagina progetto singolo (mosaico)
   13. Pagina Metodo (fasi, settori, materioteca, finiture)
   14. Timeline "cinque fasi"
   15. Form (Contatti e Preventivo)
   16. Footer
   17. Lightbox
   18. Animazioni di ingresso
   19. Accessibilita' e stampa

   NOTA SULLE MISURE FLUIDE
   Il sito originale scalava i testi con unita' `vw`. Su Windows la barra
   di scorrimento occupa spazio ma resta inclusa in `100vw`: gli stessi
   valori producevano quindi testi e blocchi leggermente piu' grandi che
   su Mac, con tagli e disallineamenti. Qui le stesse scale usano `cqw`
   (1% della larghezza del contenitore #page, barra esclusa): il risultato
   e' identico su macOS e su Windows. `vw` resta solo come ripiego per i
   browser molto vecchi.
   ===================================================================== */


/* ============================================================
   1. FONT — Kamerik 105 (pesi 100 / 200 / 400 / 700 / 900)
   ============================================================ */

@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-Thin.woff2') format('woff2'),url('../fonts/Kamerik105-Thin.woff') format('woff');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-ThinOblique.woff2') format('woff2'),url('../fonts/Kamerik105-ThinOblique.woff') format('woff');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-Light.woff2') format('woff2'),url('../fonts/Kamerik105-Light.woff') format('woff');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-LightOblique.woff2') format('woff2'),url('../fonts/Kamerik105-LightOblique.woff') format('woff');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-Book.woff2') format('woff2'),url('../fonts/Kamerik105-Book.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-BookOblique.woff2') format('woff2'),url('../fonts/Kamerik105-BookOblique.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-Bold.woff2') format('woff2'),url('../fonts/Kamerik105-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-BoldOblique.woff2') format('woff2'),url('../fonts/Kamerik105-BoldOblique.woff') format('woff');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-Heavy.woff2') format('woff2'),url('../fonts/Kamerik105-Heavy.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Kamerik 105';src:url('../fonts/Kamerik105-HeavyOblique.woff2') format('woff2'),url('../fonts/Kamerik105-HeavyOblique.woff') format('woff');font-weight:900;font-style:italic;font-display:swap}


/* ============================================================
   3. TOKEN DI PROGETTO
   ============================================================ */

:root{
  /* colori */
  --nz-bg:        #151515;   /* fondo pagina           */
  --nz-bg-2:      #151517;   /* fondo sezioni e header */
  --nz-gold:      #DEC9B4;   /* Gold Blush             */
  --nz-gold-deep: #6B5745;   /* ocra profondo: su fondo chiaro */
  --nz-gold-200:  #EFE2D4;
  --nz-green:     #243D1E;
  --nz-green-700: #1B2E17;
  --nz-accent:    #EAEAE8;
  --nz-light:     #F3F3F3;
  --nz-white:     #FFFFFF;
  --nz-grey:      #8A8A88;
  --nz-grey-2:    #848484;
  --nz-metal:     #7A6F66;   /* titoli senza riflesso  */
  --nz-hair:      rgba(243,243,243,.45);  /* bordi sottili */
  --nz-hair-soft: rgba(243,243,243,.35);

  /* misure dell'header: le stesse identiche servono al menu a tutto schermo,
     cosi' logo e pulsante coincidono al pixel quando il menu si apre */
  --nz-hd-pad-y: 18px;
  --nz-hd-pad-x: 40px;
  --nz-logo-w:   212px;
  --nz-hd-h: calc(var(--nz-hd-pad-y) * 2 + var(--nz-logo-w) * 514 / 2244);

  /* un'unica misura per tutti i titoli di pagina: hero, portfolio,
     schede progetto. Cambiare qui li cambia tutti insieme. */
  --nz-h1: clamp(1.85rem, 3.3cqw, 62px);

  /* misure */
  --nz-shell: 1700px;        /* larghezza massima contenuti */
  --nz-band:  1520px;        /* fasce della pagina Metodo   */
  --nz-gutter: clamp(18px, 2.5cqw, 40px);

  /* tempi */
  --nz-ease: cubic-bezier(.2,.6,.2,1);

  color-scheme: dark;
}


/* ============================================================
   2. RESET E BASE
   ============================================================ */

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

html{
  /* la barra resta sempre presente: nessuno scatto di layout quando una
     pagina diventa piu' lunga, e larghezza utile costante fra le pagine */
  overflow-y:scroll;
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--nz-bg);
  color:var(--nz-light);
  font-family:'Kamerik 105',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  /* Kamerik non ha i pesi 300/500/600: impedisce al browser di inventarli.
     Nessuna sintesi = stesso disegno delle lettere su Mac e su Windows.   */
  font-synthesis:none;
  /* NB: qui NON si usa -webkit-font-smoothing:antialiased. Su macOS
     assottiglia il testo e lo fa apparire piu' chiaro che su Windows:
     era una delle differenze visibili fra i due sistemi.                  */
  text-rendering:optimizeLegibility;
}

/* niente scorrimento orizzontale, mai */
html,body{overflow-x:clip}

img,svg,video{display:block;max-width:100%}
img{height:auto;border:0}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}

/* i controlli form ereditano il font: Safari altrimenti usa il suo */
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer}

b,strong{font-weight:700}

:focus-visible{outline:2px solid var(--nz-gold);outline-offset:3px}

::selection{background:var(--nz-gold);color:var(--nz-bg)}

/* salto al contenuto per chi naviga da tastiera */
.nz-skip{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--nz-gold);color:var(--nz-bg);
  padding:10px 18px;border-radius:100px;font-size:14px;
  transition:top .25s ease;
}
.nz-skip:focus{top:12px}


/* ============================================================
   5. CONTENITORI E STRUTTURA
   ============================================================ */

/* Il contenitore di riferimento per tutte le misure fluide.
   Escludendo la barra di scorrimento, `cqw` vale lo stesso su ogni
   sistema operativo. L'header resta fuori: e' sticky e non deve
   dipendere da questo contenitore. */
#page{container-type:inline-size;container-name:page}

.nz-shell{
  width:100%;
  max-width:var(--nz-shell);
  margin-inline:auto;
  padding-inline:var(--nz-gutter);
}
.nz-band{
  width:100%;
  max-width:var(--nz-band);
  margin-inline:auto;
}

.nz-section{background:var(--nz-bg-2)}
.nz-section--dark{background:var(--nz-bg)}

/* intestazione di sezione: simbolo a sinistra, occhiello + titolo a destra */
.nz-sechead{
  display:flex;gap:clamp(18px,2.4cqw,40px);
  margin-bottom:clamp(28px,3cqw,48px);
  /* Il pittogramma va appoggiato alla linea di base del titolo, non al fondo
     del suo riquadro: agganciato al fondo scendeva sotto il testo di 7px.
     "last baseline" prende l'ultima riga, quindi funziona anche in home dove
     sopra il titolo c'e' l'occhiello. Chi non lo conosce resta su flex-end. */
  align-items:flex-end;
  align-items:last baseline;
}
.nz-sechead__mark{flex:0 0 auto;width:60px;height:auto}
.nz-sechead__mark--lg{width:80px}
@media (max-width:767px){
  .nz-sechead__mark{width:46px}
  .nz-sechead__mark--lg{width:56px}
}
.nz-sechead__eyebrow{font-size:16px;font-weight:400;color:var(--nz-light);margin:0 0 6px}
.nz-sechead__title{font-size:36px;font-weight:400;line-height:1.1;color:var(--nz-light);letter-spacing:0}
/* alcune intestazioni usano il peso Light: Kamerik non ha il 300, quindi
   si dichiara direttamente il 200 (Light), che e' un disegno reale del font
   e viene reso allo stesso modo da tutti i browser. */
.nz-sechead__title--light{font-weight:200}
@media (max-width:767px){
  .nz-sechead__eyebrow{font-size:12px}
  .nz-sechead__title{font-size:30px;line-height:1.3}
}
.nz-sechead__title b,.nz-sechead__title strong{font-weight:700}

/* riga "Scopri tutti i nostri progetti" + pulsante freccia */
.nz-ctarow{
  display:flex;align-items:center;justify-content:center;
  gap:24px;flex-wrap:wrap;
  padding-block:clamp(32px,3.6cqw,64px);
}
.nz-ctarow__txt{font-size:18px;font-weight:400;color:var(--nz-light);margin:0}
@media (max-width:767px){
  .nz-ctarow{flex-direction:column;gap:20px;text-align:center}
}


/* ============================================================
   6. PULSANTI
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  border:1px solid transparent;border-radius:100px;
  font-family:inherit;font-weight:400;line-height:1;letter-spacing:1px;
  text-align:center;white-space:nowrap;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.btn svg{flex:0 0 auto;transition:fill .35s ease}

/* contorno chiaro, si riempie al passaggio del mouse */
.btn--ghost{
  border-color:var(--nz-hair);color:var(--nz-light);background:transparent;
  padding:15px 32px;font-size:14px;
}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--nz-light);color:var(--nz-bg);border-color:var(--nz-light)}
.btn--ghost:hover svg,.btn--ghost:focus-visible svg{fill:var(--nz-bg)}

.btn--ghost-lg{padding:16px 34px;font-size:clamp(.95rem,.94cqw,18px)}
.btn--ghost-sm{padding:11px 20px;font-size:14px;border-color:rgba(243,243,243,.55)}
.btn--ghost-icon{padding:16px 25px 14px}

/* contorno avorio, usato nella hero */
.btn--outline{
  border-color:var(--nz-accent);color:var(--nz-accent);background:transparent;
  font-size:clamp(.875rem,.95vw,17px);
  font-size:clamp(.875rem,.95cqw,17px);
  padding:clamp(13px,1cqw,18px) clamp(24px,2.2cqw,40px);
}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--nz-accent);color:var(--nz-bg-2)}

/* pillola sfumata oro: "Hai un progetto?".
   La sfumatura cambia con un secondo livello in dissolvenza: le
   sfumature CSS non sono animabili, cosi' invece la transizione si vede. */
.btn--gold{
  position:relative;isolation:isolate;overflow:hidden;letter-spacing:.2px;
  color:var(--nz-bg-2);font-size:14px;font-weight:400;padding:10px 22px;
  background-image:linear-gradient(90deg,var(--nz-gold) 0%,var(--nz-white) 100%);
}
.btn--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background-image:linear-gradient(180deg,var(--nz-white) 0%,var(--nz-gold) 100%);
  transition:opacity .8s ease;
}
.btn--gold:hover::after,.btn--gold:focus-visible::after{opacity:1}

/* pillola metallica: la lastra si muove lentamente e ogni tanto la
   attraversa un riflesso, come una superficie lucidata sotto la luce */
.btn--metal{
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--nz-bg-2);letter-spacing:0;border:0;
  font-size:clamp(.82rem,.78cqw,14px);letter-spacing:.2px;
  padding:clamp(11px,.8cqw,14px) clamp(20px,1.7cqw,30px);
  background-image:linear-gradient(100deg,
    #BFA88E 0%, #DEC9B4 16%, #FFFBF5 34%, #E8D7C4 50%,
    #C7B097 66%, #F3E7D9 84%, #BFA88E 100%);
  background-size:280% 100%;
  animation:nzMetalFlow 9s ease-in-out infinite alternate;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.btn--metal::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(102deg,
    transparent 42%, rgba(255,255,255,.88) 50%, transparent 58%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:nzSheen 5.5s cubic-bezier(.45,.05,.2,1) infinite;
}
.btn--metal:hover{box-shadow:0 12px 28px rgba(0,0,0,.32)}
.btn--metal:hover::after{animation-duration:2.6s}

/* variante scura: sul fondo chiaro del menu il metallo brunito si legge meglio */
.btn--metal-dark{
  color:#F6EFE6;
  background-image:linear-gradient(100deg,
    #1E1B18 0%, #332D27 16%, #6A5B4C 34%, #453C33 50%,
    #241F1B 66%, #5A4C3F 84%, #221E1A 100%);
}
.btn--metal-dark::after{
  background-image:linear-gradient(102deg,
    transparent 42%, rgba(255,240,220,.38) 50%, transparent 58%);
}
@keyframes nzMetalFlow{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes nzSheen{
  0%,34%  {background-position:-70% 50%}
  84%,100%{background-position:170% 50%}
}
@media (prefers-reduced-motion:reduce){
  .btn--metal{animation:none;background-position:30% 50%}
  .btn--metal::after{animation:none;opacity:0}
}

/* pillola oro piena: invio dei form */
.btn--solid{
  background:var(--nz-gold);color:var(--nz-bg);
  padding:10px 26px;font-size:14px;font-weight:400;letter-spacing:.2px;
  text-transform:none;
}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--nz-gold-200)}


/* ============================================================
   7. HEADER
   ============================================================ */

.nz-header{
  position:sticky;top:0;z-index:90;
  background:var(--nz-bg-2);
  transition:background-color .35s ease,box-shadow .35s ease,padding .35s ease;
}
.nz-header__in{
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  max-width:var(--nz-shell);margin-inline:auto;
  padding:var(--nz-hd-pad-y) var(--nz-hd-pad-x);
  transition:padding .35s ease;
}
.nz-header__logo{position:relative;flex:0 0 var(--nz-logo-w);display:block}
.nz-header__logo img{width:var(--nz-logo-w);max-width:100%;transition:width .35s ease,opacity .3s ease}
/* il logo scuro sta esattamente sopra a quello chiaro: quando il menu si apre
   i due si scambiano senza che nulla si sposti */
.nz-logo--dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}
body.nz-menu-open .nz-logo--light{opacity:0}
body.nz-menu-open .nz-logo--dark{opacity:1}

.nz-nav{margin-left:auto}
.nz-nav ul{display:flex;align-items:center}
.nz-nav a{
  display:block;padding:8px 18px;font-size:15px;color:var(--nz-white);
  transition:color .3s ease;
}
.nz-nav a:hover,.nz-nav a[aria-current="page"]{color:var(--nz-gold)}

.nz-header__right{display:flex;align-items:center;gap:24px}

/* cambio lingua nella barra (sulla destra, come nel progetto originale) */
.nz-lang{display:flex;align-items:center;gap:6px;font-size:14px;letter-spacing:1px;margin:0}
.nz-lang a{color:rgba(243,243,243,.5);transition:color .3s ease}
.nz-lang a:hover{color:var(--nz-gold)}
.nz-lang [aria-current="true"]{color:var(--nz-light);font-weight:700}
.nz-lang [aria-hidden="true"]{color:rgba(243,243,243,.3)}

/* mostrato solo da schermo largo / solo da schermo stretto */
.nz-d-only{display:inline-flex}
.nz-m-only{display:none}
@media (max-width:1024px){
  .nz-d-only{display:none}
  .nz-m-only{display:inline-flex}
}

/* stato "pagina scorsa": vetro smerigliato */
.nz-header.is-stuck{
  background-color:rgba(21,21,23,.72);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  backdrop-filter:saturate(170%) blur(16px);
  box-shadow:0 1px 0 rgba(222,201,180,.18),0 14px 34px rgba(0,0,0,.30);
}
.nz-header.is-stuck .nz-header__in{padding-block:10px}
.nz-header.is-stuck .nz-header__logo img{width:calc(var(--nz-logo-w) * .78)}

/* con il menu aperto l'header resta sopra al pannello, ma trasparente:
   logo e pulsante sono gli stessi di prima, non si spostano di un pixel */
body.nz-menu-open .nz-header{
  z-index:120;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.nz-menu-open .nz-progress{opacity:0}

/* barra di avanzamento della lettura.
   Il sito originale la disegnava con `animation-timeline: scroll()`,
   che oggi funziona solo su Chrome: su Safari spariva. Qui la larghezza
   arriva dal JS, cosi' si comporta allo stesso modo ovunque. */
.nz-progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--nz-gold);
  transform:scaleX(var(--nz-read,0));transform-origin:0 50%;
  will-change:transform;
}

/* --- burger e menu mobile --- */
/* pulsante a due linee che diventa una X: e' lo stesso elemento in
   entrambi gli stati, quindi la X cade esattamente dove c'era il menu */
.nz-burger{
  display:none;flex:0 0 auto;
  width:44px;height:44px;place-items:center;
  color:var(--nz-gold);margin-right:-10px;
  transition:color .3s ease;
}
.nz-burger__box{position:relative;display:block;width:26px;height:14px}
.nz-burger__box i{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.nz-burger__box i:nth-child(1){top:0}
.nz-burger__box i:nth-child(2){bottom:0}
/* a menu aperto resta ocra, ma in una tonalita' piu' profonda: sul fondo
   Gold Blush del pannello un ocra chiaro sarebbe illeggibile */
body.nz-menu-open .nz-burger{color:var(--nz-gold-deep)}
body.nz-menu-open .nz-burger__box i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nz-menu-open .nz-burger__box i:nth-child(2){transform:translateY(-6px) rotate(-45deg)}

.nz-menu{
  position:fixed;inset:0;z-index:100;
  background:var(--nz-gold);color:var(--nz-bg-2);
  /* lo spazio in alto e' esattamente l'altezza dell'header: il pannello
     comincia dove finisce la barra, senza salti */
  padding:calc(var(--nz-hd-h) + 32px) var(--nz-hd-pad-x) 40px;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s;
}
.nz-menu.is-open{opacity:1;visibility:visible}
.nz-menu nav{margin-top:0}
.nz-menu nav a{
  display:block;padding:6px 0;font-size:30px;font-weight:700;line-height:1.25;
  color:var(--nz-bg-2);transition:color .25s ease;
}
.nz-menu nav a:hover{color:var(--nz-white)}
.nz-menu nav a[aria-current="page"]{color:var(--nz-accent)}
.nz-menu__rule{border:0;border-top:1px solid rgba(21,21,23,.45);margin:18px 0}

/* riga con la CTA e il cambio lingua */
.nz-menu__cta{margin:26px 0 6px}
.nz-menu__cta .btn{width:100%;max-width:420px}
.nz-menu__lang{
  display:flex;align-items:center;gap:6px;
  margin-top:26px;font-size:15px;letter-spacing:1px;
}
.nz-menu__lang a,.nz-menu__lang [aria-current="true"]{
  padding:6px 10px;border-radius:100px;color:rgba(21,21,23,.55);
  transition:color .3s ease;
}
.nz-menu__lang a:hover{color:var(--nz-bg-2)}
.nz-menu__lang [aria-current="true"]{color:var(--nz-bg-2);font-weight:700}
.nz-menu__lang [aria-hidden="true"]{color:rgba(21,21,23,.3);padding:0}

.nz-menu__social{
  display:flex;justify-content:center;gap:14px;margin-top:auto;padding-top:40px;
}
.nz-menu__social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  color:var(--nz-bg-2);transition:color .3s ease;
}
.nz-menu__social a:hover{color:var(--nz-white)}
.nz-menu__social svg{width:24px;height:24px;fill:currentColor}

/* blocco dello scorrimento quando il menu e' aperto */
body.nz-locked{overflow:hidden}

@media (max-width:1024px){
  /* sotto i 1025 px l'altezza della barra la detta il pulsante del menu
     (44 px di area toccabile), non piu' il logo: senza questa riga la hero
     a tutta altezza calcolerebbe uno spazio piu' alto di quello reale */
  :root{--nz-hd-pad-y:14px;--nz-hd-pad-x:24px;--nz-logo-w:164px;
        --nz-hd-h:calc(var(--nz-hd-pad-y) * 2 + 44px)}
  .nz-header__in{gap:20px}
  .nz-nav,.nz-header__right{display:none}
  .nz-burger{display:grid}
}
@media (max-width:767px){
  :root{--nz-hd-pad-y:12px;--nz-hd-pad-x:18px;--nz-logo-w:146px}
  .nz-header__in{gap:12px}
}


/* ============================================================
   8. HERO
   ============================================================ */

.nz-hero{
  background:var(--nz-bg-2);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding-block:clamp(44px,4.4cqw,80px);
}
/* la hero a tutta altezza tiene conto della barra in alto, cosi' non
   spinge fuori schermo il pulsante e lo "scorri" */
.nz-hero--full{min-height:calc(100vh - var(--nz-hd-h));min-height:calc(100svh - var(--nz-hd-h))}
/* nella hero a tutta altezza il contenuto resta centrato e lo "scorri"
   scende in fondo: niente vuoto nella meta' bassa dello schermo */
.nz-hero--full > .nz-shell{display:flex;flex-direction:column;flex:1 1 auto}
.nz-hero--full .nz-hero__row{flex:1 1 auto}
.nz-hero--full .nz-scroll{margin-top:clamp(20px,2cqw,32px)}
/* hero di sola intestazione: il titolo parte sempre alla stessa quota,
   su tutte le pagine e a tutte le larghezze */
.nz-hero--gap{
  justify-content:flex-start;min-height:0;
  padding-block:clamp(40px,3.6cqw,64px) clamp(28px,3cqw,48px);
}
/* Apertura di pagina alta quanto lo schermo: il titolo resta alla stessa
   quota delle altre pagine e lo spazio in piu' si accumula in basso, cosi'
   la sezione successiva comincia davvero dopo una schermata. */
@media (min-width:1025px){
  .nz-hero--schermo{
    min-height:calc(100vh - var(--nz-hd-h));
    min-height:calc(100svh - var(--nz-hd-h));
    justify-content:flex-start;
  }
}

.nz-hero__row{
  display:flex;align-items:center;width:100%;
  gap:clamp(32px,3.5cqw,68px);
}
.nz-hero__col{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  /* la colonna del testo ha una larghezza propria: cosi' il titolo resta
     su due righe e la colonna della foto e' sempre la stessa quota */
  flex:0 1 clamp(440px,39cqw,780px);
}
/* la fotografia sta al centro dello spazio che resta, non appiccicata al
   bordo destro: cade circa al 71% della larghezza della pagina */
.nz-hero__visual{flex:1 1 auto;display:flex;justify-content:center;align-items:center}
.nz-hero__visual img{width:clamp(200px,23vw,430px);width:clamp(200px,23cqw,430px);height:auto}

.nz-h1{
  font-size:clamp(1.9rem,5.7vw,110px);   /* ripiego per browser senza container query */
  font-size:var(--nz-h1);
  font-weight:700;line-height:1.14;letter-spacing:-.012em;
  color:var(--nz-metal);
  margin:0 0 clamp(22px,2.4cqw,34px);
}
.nz-h1--wide{margin-bottom:clamp(20px,2.6cqw,40px);width:100%}
/* quando sotto al titolo c'e' una fotografia a tutta larghezza il testo
   ha bisogno di piu' aria, altrimenti sembra una didascalia */
#page .nz-h1--stacco{margin-bottom:clamp(48px,5cqw,80px)}
/* con la fotografia larga la sezione cresce: qui si stringono i margini
   per tenerla il piu' vicino possibile a una schermata */
@media (min-width:1025px){
  #page .nz-hero--ered{padding-block:clamp(36px,3.4cqw,58px)}
  #page .nz-hero--ered .nz-h1--stacco{margin-bottom:clamp(36px,3.4cqw,56px)}
}
/* i titoli grandi vanno a capo in modo equilibrato invece di lasciare
   una parola orfana sull'ultima riga */
.nz-h1,.nz-pj__title,.nz-split__title,.nz-story__title{text-wrap:balance}
/* le interruzioni di riga disegnate per il desktop sparirebbero male sul
   telefono: sotto i 1025 px il testo va a capo da solo */
@media (max-width:1024px){
  br.u-br-d{display:none}
}

.nz-lead{
  font-size:clamp(1.05rem,1.4vw,23px);
  font-size:clamp(1.05rem,1.4cqw,23px);
  line-height:1.6;color:var(--nz-accent);
  max-width:620px;margin:0 0 clamp(20px,2cqw,20px);
}
.nz-lead + .nz-lead{margin-top:20px}
.nz-lead--narrow{max-width:520px}

.nz-scroll{
  margin-top:clamp(40px,4cqw,56px);text-align:center;line-height:1;
  font-size:clamp(.8rem,.85vw,16px);
  font-size:clamp(.8rem,.85cqw,16px);
  text-transform:uppercase;letter-spacing:2px;color:#B3ABA5;
}
.nz-scroll a{
  display:inline-flex;flex-direction:column;align-items:center;gap:14px;
  padding-bottom:4px;transition:color .3s ease;
}
.nz-scroll a:hover{color:var(--nz-gold)}

/* filo verticale con una scintilla che scende: dice "vai giu'" senza parole */
.nz-scroll__rail{
  position:relative;display:block;width:1px;height:46px;
  background:rgba(179,171,165,.28);overflow:hidden;
}
.nz-scroll__rail::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:16px;
  background:linear-gradient(180deg,rgba(222,201,180,0),var(--nz-gold));
  animation:nzScrollHint 2.1s cubic-bezier(.4,0,.2,1) infinite;
}
.nz-scroll a:hover .nz-scroll__rail::after{animation-duration:1.2s}
@keyframes nzScrollHint{
  0%   {transform:translateY(-18px);opacity:0}
  25%  {opacity:1}
  75%  {opacity:1}
  100% {transform:translateY(46px);opacity:0}
}
/* la scritta accompagna la discesa con un respiro appena percettibile */
.nz-scroll__txt{display:block;animation:nzScrollTxt 2.1s ease-in-out infinite}
@keyframes nzScrollTxt{
  0%,100%{transform:translateY(0);opacity:.75}
  50%    {transform:translateY(3px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .nz-scroll__rail::after,.nz-scroll__txt{animation:none}
  .nz-scroll__rail::after{transform:translateY(15px);opacity:1}
}

@media (max-width:1024px){
  .nz-hero__row{flex-direction:column-reverse;gap:clamp(20px,4cqw,40px)}
  /* in colonna il flex-basis diventa un'altezza: qui torna automatico,
     altrimenti la hero si deforma sul telefono */
  .nz-hero__col,.nz-hero__visual{flex:0 0 auto;width:100%}
  .nz-hero__visual{align-self:center}
}
/* Telefono: la hero deve stare tutta in una schermata, "Scorri" compreso,
   anche sui formati corti (9:16). Tutto sale e si stringe un po'. */
@media (max-width:767px){
  .nz-hero{padding-block:22px 26px}
  .nz-hero--full{padding-block:2px 4px}
  /* il titolo dell'eredita' scende verso la sua fotografia: prende aria
     sopra, dove finisce la sezione scura, e si accosta all'immagine sotto */
  #page .nz-hero--ered{padding-top:46px}
  #page .nz-hero--ered .nz-h1--stacco{margin-bottom:20px}
  /* la gif sale quasi a filo dell'header e il testo la seque da vicino,
     ma con un respiro sufficiente a non attaccarcisi */
  .nz-hero--full .nz-hero__row{gap:22px}
  /* sul telefono il blocco gif+testo resta ancorato in alto: su schermi
     piu' alti del 9:16 non deve "scendere" al centro. Lo "scorri" scivola
     comunque in fondo. */
  .nz-hero--full .nz-hero__row{flex:0 0 auto}
  .nz-hero--full .nz-scroll{margin-top:auto;padding-top:38px}
  .nz-hero__visual img{width:min(50vh,220px)}
  .nz-h1{margin-bottom:14px}
  .nz-lead{margin-bottom:0}
  #page .nz-hero__cta{margin-top:22px}   /* piu' specifica: la regola base sta piu' in basso nel file */
  .nz-scroll{margin-top:14px}
  .nz-scroll__rail{height:30px}
  .nz-scroll a{gap:10px}
}

/* ---- riflesso metallico sul titolo ----
   Le regole si agganciano agli <span> dentro il titolo: se mancano gli
   span, il titolo resta color --nz-metal e tutto continua a funzionare. */
.g-base,.g-strong{color:var(--nz-metal)}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .g-base,.g-strong{
    color:transparent;
    -webkit-background-clip:text;background-clip:text;
    background-repeat:no-repeat;
    will-change:background-position,filter;
    animation:nzGlint 8s cubic-bezier(.45,.05,.2,1) infinite,
              nzBreathe 11s ease-in-out infinite alternate;
  }
  .g-base{
    background-image:
      linear-gradient(102deg,transparent 40%,
        rgba(222,201,180,.50) 46.5%,rgba(246,238,229,.95) 50%,
        rgba(222,201,180,.50) 53.5%,transparent 60%),
      linear-gradient(100deg,#7A6F66 0%,#5E5750 24%,#423E3A 44%,
        #353230 58%,#4F4943 78%,#7A6F66 100%);
    background-size:260% 100%,100% 100%;
  }
  .g-strong{
    background-image:
      linear-gradient(102deg,transparent 40%,
        rgba(255,255,255,.30) 46.5%,rgba(255,250,243,.98) 50%,
        rgba(255,255,255,.30) 53.5%,transparent 60%),
      linear-gradient(100deg,#7A6F66 0%,#877B70 45%,#6F655D 75%,#7A6F66 100%);
    background-size:260% 100%,100% 100%;
  }
  /* la luce attraversa il titolo in diagonale, non tutto insieme */
  .g-strong      {animation-delay:.38s,0s}
  br ~ .g-base   {animation-delay:.14s,-2s}
  br ~ .g-strong {animation-delay:.52s,-2s}
}
@keyframes nzGlint{
  0%,36%   {background-position:-90% 50%,0 50%}
  86%,100% {background-position:190% 50%,0 50%}
}
@keyframes nzBreathe{from{filter:brightness(.94)}to{filter:brightness(1.07)}}


/* ============================================================
   9. "LE NOSTRE OPERE" — carosello dei progetti
   ============================================================ */

.nz-opere{
  /* un solo margine per il lato destro: lo usano sia la testata sia le
     frecce, cosi' non possono piu' scollarsi fra loro */
  --nz-opere-margine:180px;
  /* le frecce sono fuori dal flusso: senza questo spazio riservato il titolo
     ci finirebbe sotto alle larghezze intermedie (160px di bottoni + respiro) */
  --nz-opere-frecce:184px;
  background:var(--nz-bg-2);
  padding:clamp(48px,5cqw,90px) 0 clamp(48px,5cqw,90px) 180px;
  overflow:hidden;
}
.nz-opere__head{
  display:flex;align-items:flex-end;
  padding-right:calc(var(--nz-opere-margine) + var(--nz-opere-frecce));
  margin-bottom:60px;
}
.nz-opere__head .nz-sechead{margin:0;flex:1 1 auto;gap:16px}

/* carrello: scorrimento con aggancio, senza librerie */
.nz-carousel{position:relative}
.nz-carousel__track{
  display:flex;gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.nz-carousel__track::-webkit-scrollbar{display:none}
.nz-carousel__track > *{
  flex:0 0 calc((100% - 40px - 80px) / 3);   /* 3 schede + spazio a destra */
  scroll-snap-align:start;
}
.nz-carousel__nav{
  position:absolute;top:-92px;right:var(--nz-opere-margine,0px);display:flex;gap:12px;
}
.nz-carousel__btn{
  width:74px;height:38px;border-radius:100px;
  border:1px solid var(--nz-hair);background:transparent;color:var(--nz-light);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.nz-carousel__btn svg{width:16px;height:16px;fill:currentColor}
.nz-carousel__btn:hover:not(:disabled){background:var(--nz-light);color:var(--nz-bg);border-color:var(--nz-light)}
.nz-carousel__btn:disabled{opacity:.35;cursor:default}

/* scheda progetto */
.nz-card{
  position:relative;display:flex;
  min-height:clamp(380px,29cqw,500px);overflow:hidden;
  background-position:center center;background-size:cover;
  transition:transform .5s var(--nz-ease),box-shadow .5s ease;
}
/* il collegamento occupa tutta la scheda: si clicca ovunque, anche sulla foto */
.nz-card__link{
  position:relative;z-index:1;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px 10px;text-decoration:none;color:inherit;
}
.nz-card__link:focus-visible{outline:2px solid var(--nz-gold);outline-offset:-4px}
/* il pulsante si accende anche passando sul resto della scheda */
.nz-card__link:hover .btn--ghost,
.nz-card__link:focus-visible .btn--ghost{
  background:var(--nz-light);color:var(--nz-bg);border-color:var(--nz-light);
}
.nz-card::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(180deg,rgba(21,21,21,0) 0%,#151515 100%);
}
.nz-card > *{position:relative;z-index:1}
.nz-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.5)}
.nz-card__row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.nz-card__title{
  font-size:clamp(1.05rem,1.15vw,22px);
  font-size:clamp(1.05rem,1.15cqw,22px);
  font-weight:700;line-height:1.15;color:var(--nz-light);margin:0;
}
.nz-card__row .btn{flex:0 0 auto}

@media (max-width:1366px){
  .nz-card{min-height:400px}
}
@media (max-width:1024px){
  .nz-opere{--nz-opere-margine:40px;padding-left:40px;padding-block:64px}
  .nz-carousel__track{gap:16px}
  .nz-carousel__track > *{flex-basis:calc((100% - 16px - 60px) / 2)}
  .nz-card{min-height:460px}
}
@media (max-width:767px){
  /* qui le frecce tornano nel flusso, sopra le schede: niente da riservare */
  .nz-opere{--nz-opere-margine:18px;--nz-opere-frecce:0px;padding:8px 0 56px 18px}
  .nz-opere__head{margin-bottom:40px}
  .nz-carousel__track{gap:12px}
  .nz-carousel__track > *{flex-basis:calc(100% - 60px)}
  /* sugli schermi stretti le frecce stanno nel flusso, sopra le schede:
     cosi' non finiscono mai sopra il titolo della sezione */
  .nz-carousel__nav{position:static;justify-content:flex-end;margin:0 18px 16px 0}
  .nz-carousel__btn{width:60px;height:34px}
  .nz-card{min-height:420px}
}


/* ============================================================
   10. SEZIONE CON FOTO A TUTTO SCHERMO
   ============================================================ */

.nz-feature{
  position:relative;isolation:isolate;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  background:url('../img/lavorazione-metallo-officina-altamura.webp') center center / cover no-repeat var(--nz-bg);
  padding-block:clamp(70px,8cqw,120px);
}
.nz-feature::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(30deg,#000 50%,rgba(0,0,0,0) 77%);
}
.nz-feature__box{width:70%}
.nz-feature__title{
  font-size:clamp(1.55rem,2.1vw,30px);
  font-size:clamp(1.55rem,2.1cqw,30px);
  font-weight:700;line-height:1.2;letter-spacing:-.012em;color:var(--nz-white);
  margin:0 0 clamp(28px,3cqw,40px);
}
.nz-feature .nz-lead{font-size:20px;line-height:1.6;max-width:520px;margin:0}
@media (max-width:767px){.nz-feature .nz-lead{font-size:18px}}
/* Sul telefono la fotografia della sedia sale subito sotto il titolo,
   prima del testo: in colonna unica il lettore vede l'immagine mentre il
   titolo e' ancora sullo schermo. Su desktop resta accanto al testo. */
@media (max-width:900px){
  /* align-items:center ereditato da .nz-split farebbe collassare la
     figura a larghezza zero in colonna: qui gli elementi si allargano */
  #page .nz-split--txt-img{display:flex;flex-direction:column;align-items:stretch}
}

@media (max-width:1024px){
  .nz-feature{min-height:0}
  .nz-feature__box{width:100%}
  /* su schermi stretti il testo copre tutta la fotografia: la velatura
     diagonale non basta piu', serve un velo uniforme dall'alto in basso */
  .nz-feature::before{
    background-image:linear-gradient(180deg,
      rgba(0,0,0,.66) 0%, rgba(0,0,0,.84) 55%, rgba(0,0,0,.93) 100%);
  }
}


/* ============================================================
   11. PAGINA PROGETTI
   ============================================================ */

.nz-pf-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:40px;
}
/* su schermo largo tre colonne: la griglia sta in una schermata 16:9 */
@media (min-width:1280px){
  #page .nz-pf-grid{grid-template-columns:repeat(3,1fr);gap:32px}
}
.nz-pf-card{display:flex;flex-direction:column}
.nz-pf-card__img{overflow:hidden;aspect-ratio:16 / 10;background:#1d1d1f}
.nz-pf-card__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--nz-ease),filter .5s ease}
.nz-pf-card:hover .nz-pf-card__img img{transform:scale(1.04);filter:brightness(1.06)}
.nz-pf-card__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 4px 4px;
}
.nz-pf-card__meta{display:flex;flex-direction:column;min-width:0}
.nz-pf-card__line{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.nz-pf-card__title{font-size:17px;font-weight:700;line-height:1.2;color:var(--nz-light);margin:0}
.nz-pf-card__city{font-size:17px;font-weight:400;line-height:1.2;color:var(--nz-grey)}
.nz-pf-card__arch{
  font-size:13px;font-style:italic;line-height:1.3;color:var(--nz-grey);margin-top:4px;
  transition:color .4s ease;
}
.nz-pf-card__arch::before{content:"Architetto: "}
.nz-pf-card:hover .nz-pf-card__arch{color:var(--nz-gold)}

@media (max-width:1024px){
  .nz-pf-card__bar{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:767px){
  .nz-pf-grid{grid-template-columns:1fr;gap:32px}
  .nz-pf-card__city,.nz-pf-card__title{font-size:15px}
  .nz-pf-card__line{flex-direction:column;gap:0;align-items:flex-start}
}

/* galleria "Altre realizzazioni": scorre in orizzontale e lascia
   intravedere la foto successiva, cosi' si capisce che si puo' scorrere */
.nz-gallery{position:relative}
.nz-gallery .nz-carousel__track{gap:20px;padding-bottom:6px}
.nz-gallery__item{
  flex:0 0 calc((100% - 40px - 90px) / 3);
  scroll-snap-align:start;margin:0;
  display:block;overflow:hidden;aspect-ratio:3 / 2;background:#1d1d1f;position:relative;
}
.nz-gallery__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--nz-ease),filter .5s ease;
}
.nz-gallery__item:hover img{transform:scale(1.05);filter:brightness(1.08)}
.nz-gallery__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:38px 16px 14px;font-size:14px;color:var(--nz-light);
  background:linear-gradient(180deg,rgba(21,21,21,0),rgba(21,21,21,.85));
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.nz-gallery__item:hover .nz-gallery__cap,
.nz-gallery__item:focus-visible .nz-gallery__cap{opacity:1;transform:none}
/* sfumatura sul bordo destro: segnala che il nastro continua */
.nz-gallery::after{
  content:"";position:absolute;right:0;top:0;bottom:6px;width:56px;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,21,21,0),var(--nz-bg));
}
@media (max-width:1024px){
  .nz-gallery__item{flex-basis:calc((100% - 20px - 70px) / 2)}
  .nz-gallery__cap{opacity:1;transform:none}
}
@media (max-width:640px){
  .nz-gallery__item{flex-basis:78%}
  .nz-gallery::after{width:34px}
}


/* ============================================================
   12. PAGINA PROGETTO SINGOLO — mosaico + colonna testo
   ============================================================ */

.nz-pj{background:var(--nz-bg);padding-block:clamp(40px,3.6cqw,64px) clamp(48px,6cqw,100px)}
.nz-pj__head{
  display:flex;align-items:baseline;gap:8px 48px;flex-wrap:wrap;
  padding-block:0 clamp(28px,4cqw,64px);
}
.nz-pj__title{font-size:var(--nz-h1);font-weight:700;line-height:1.14;letter-spacing:-.012em;color:var(--nz-light);margin:0}
.nz-pj__sub{font-size:clamp(1.15rem,1.6cqw,30px);font-weight:400;line-height:1.2;color:var(--nz-light);margin:0}
.nz-pj__body{
  display:flex;align-items:flex-start;gap:60px clamp(40px,8.3cqw,120px);
  padding-bottom:clamp(60px,8cqw,100px);
}
.nz-pj__gallery{display:flex;flex-direction:column;gap:16px;flex:1 1 auto;min-width:0}
.nz-pj__row{display:flex;gap:16px}
.nz-pj__row > *{min-width:0}
/* proporzioni 40/60 e 60/40 prese dal progetto originale */
.nz-pj__row--40-60 > :nth-child(1){flex:0 0 calc((100% - 16px) * .4)}
.nz-pj__row--40-60 > :nth-child(2){flex:0 0 calc((100% - 16px) * .6)}
.nz-pj__row--60-40 > :nth-child(1){flex:0 0 calc((100% - 16px) * .6)}
.nz-pj__row--60-40 > :nth-child(2){flex:0 0 calc((100% - 16px) * .4)}

/* le foto mantengono le proporzioni originali: le due di ogni riga hanno
   la stessa altezza perche' hanno la stessa altezza di partenza (612 px) */
.nz-pj__img{overflow:hidden;background:#1d1d1f;margin:0}
.nz-pj__img img{width:100%;height:auto;display:block;transition:transform .7s var(--nz-ease)}
.nz-pj__img:hover img{transform:scale(1.03)}

.nz-pj__side{flex:0 0 clamp(300px,29.2cqw,476px);min-width:0}
.nz-pj__sidehead{display:flex;align-items:center;gap:20px;padding-bottom:40px}
.nz-pj__sidehead img{width:30px;flex:0 0 auto}
.nz-pj__h2{font-size:32px;font-weight:700;line-height:1.2;color:var(--nz-light);margin:0}
.nz-pj__text{font-size:18px;line-height:1.33;color:var(--nz-light);margin:0 0 41px}
.nz-pj__text b{font-weight:700}

@media (min-width:1025px){
  .nz-pj__side{position:sticky;top:120px;align-self:flex-start}
}
@media (max-width:1024px){
  .nz-pj__body{flex-direction:column;gap:50px}
  .nz-pj__side{flex:1 1 auto;width:100%}
  .nz-pj__head{flex-direction:column;gap:6px;padding-bottom:30px}
  .nz-pj__h2{font-size:25px}
}
@media (max-width:767px){
  .nz-pj__row{flex-direction:column}
  .nz-pj__row > *{flex:1 1 100% !important}
  .nz-pj__text{font-size:16px;margin-bottom:30px}
}


/* ============================================================
   13. PAGINA METODO
   ============================================================ */


/* --- settori ---
   Un indice invece delle quattro foto tonde: numero, nome in grande e
   miniatura che prende colore quando la riga si accende. Occupa molto
   meno spazio e si legge allo stesso modo da desktop e da telefono. */
.nz-settori__list{display:flex;flex-direction:column;border-top:1px solid rgba(222,201,180,.22)}
.nz-settore{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,2.2cqw,36px);
  padding:clamp(16px,1.9cqw,30px) clamp(4px,.8cqw,14px);
  border-bottom:1px solid rgba(222,201,180,.22);
  transition:background-color .4s ease;
}
.nz-settore__num{
  font-size:clamp(.75rem,.83cqw,15px);letter-spacing:2px;
  color:var(--nz-gold);font-weight:700;font-variant-numeric:tabular-nums;
}
.nz-settore__name{
  font-size:clamp(1.25rem,2.1cqw,38px);font-weight:700;line-height:1.15;
  color:var(--nz-light);letter-spacing:-.01em;margin:0;
  transition:color .35s ease,transform .45s var(--nz-ease);
}
.nz-settore__thumb{
  width:clamp(56px,5.4cqw,96px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  flex:0 0 auto;
}
.nz-settore__thumb img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.6);
  transition:filter .5s ease,transform .6s var(--nz-ease);
}
.nz-settore:hover{background-color:rgba(222,201,180,.05)}
.nz-settore:hover .nz-settore__name{color:var(--nz-gold);transform:translateX(6px)}
.nz-settore:hover .nz-settore__thumb img{filter:none;transform:scale(1.09)}
@media (hover:none){
  .nz-settore__thumb img{filter:none}
}
@media (max-width:767px){
  .nz-settore{gap:14px}
  .nz-settore__num{align-self:start;padding-top:6px}
}

/* --- materioteca --- */
.nz-materiali{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.nz-mat{display:flex;flex-direction:column;align-items:center;text-align:center}
.nz-mat__img{
  width:100%;overflow:hidden;border-radius:999px 999px 6px 6px;
  height:clamp(130px,11vw,211px);height:clamp(130px,11cqw,211px);
}
.nz-mat__img img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.09);filter:brightness(.7);
  transition:transform 1s cubic-bezier(.16,1,.3,1),filter 1s ease;
}
.nz-mat.is-in .nz-mat__img img{transform:scale(1);filter:brightness(1)}
.nz-mat:hover .nz-mat__img img{transform:scale(1.09);filter:brightness(1.08)}
.nz-mat__label{margin-top:16px;font-size:22px;font-weight:700;color:var(--nz-accent);transition:color .35s ease}
@media (max-width:767px){.nz-mat__label{font-size:17px}}
.nz-mat:hover .nz-mat__label{color:var(--nz-gold)}
@media (max-width:1024px){.nz-materiali{grid-template-columns:repeat(3,1fr);gap:24px}}
@media (max-width:640px){.nz-materiali{grid-template-columns:repeat(2,1fr)}}

/* --- finiture: timeline verticale --- */
/* --- finiture ---
   Ogni finitura ha il suo campione: una forma scontornata, senza cornice,
   accanto al testo. Su schermo largo vanno su tre colonne, cosi' tutta la
   sezione si legge in una sola schermata. */
.nz-finiture{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2cqw,34px) clamp(24px,2.6cqw,48px);
}
@media (min-width:1280px){
  #page .nz-finiture{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.nz-fin{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.4cqw,24px);align-items:start;
  border-top:1px solid rgba(222,201,180,.22);padding-top:clamp(14px,1.4cqw,22px);
}
.nz-fin__img{
  width:clamp(64px,5.6cqw,104px);aspect-ratio:1;flex:0 0 auto;overflow:visible;
}
.nz-fin__img img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .6s var(--nz-ease),filter .5s ease;
}
.nz-fin:hover .nz-fin__img img{transform:scale(1.07) rotate(-3deg);filter:brightness(1.12)}
.nz-fin__title{
  margin:0 0 6px;font-size:clamp(1.05rem,1.15cqw,22px);font-weight:400;
  line-height:1.2;color:var(--nz-light);transition:color .35s ease;
}
.nz-fin__title b{font-weight:700}
.nz-fin:hover .nz-fin__title{color:var(--nz-gold)}
.nz-fin__desc{
  font-size:clamp(.84rem,.78cqw,14px);line-height:1.5;color:var(--nz-grey);margin:0;
}

/* pulsante "mostra tutte": sul telefono le sette schede in colonna
   facevano una sezione interminabile, cosi' se ne vedono quattro */
.nz-more{display:none;width:max-content;margin-inline:auto}
@media (max-width:560px){
  .nz-finiture{grid-template-columns:1fr;gap:18px}
  .nz-fin__desc{font-size:14px}
  .nz-finiture:not(.is-open) .nz-fin:nth-child(n+5){display:none}
  .nz-more{display:flex;margin-top:38px;margin-bottom:6px}
}


/* ============================================================
   14. TIMELINE "IL NOSTRO PROCESSO IN CINQUE FASI"
   (impianto ripreso dal sito originale, misure passate a cqw)
   ============================================================ */

.nzTL{
  --gold:var(--nz-gold);
  --line:rgba(222,201,180,.62);
  --light:var(--nz-light);
  --muted:#848484;
  --stemSu:clamp(30px,3.2cqw,61px);
  --stemGiu:clamp(34px,3.6cqw,69px);
  --rail:clamp(26px,6cqw,46px);
  --gapV:clamp(16px,3.4cqw,34px);
  --dotY:32px;
  color:var(--light);
  max-width:1680px;margin:0 auto;
  padding:clamp(70px,6.3cqw,120px) clamp(18px,6.3cqw,120px);
  overflow:hidden;
}
.nzTL *{box-sizing:border-box}
.nzTL .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.nzTL .ln > i{display:block;font-style:inherit;will-change:transform,opacity}

.nzTL-head{display:flex;align-items:center;gap:clamp(14px,1.25cqw,24px);margin-bottom:clamp(44px,7cqw,134px)}
.nzTL-logo{width:clamp(46px,4.2cqw,80px);height:auto;flex:0 0 auto}
.nzTL-h2{margin:0;font-weight:200;line-height:1.1;font-size:36px;letter-spacing:0}
.nzTL-h2 strong{font-weight:700}

.nzTL-grid{position:relative}
.nzTL-row{display:flex;align-items:stretch}
.nzTL-cell{flex:1 1 0;min-width:0;display:flex;position:relative}
.nzTL-row--su .nzTL-cell{align-items:flex-end;min-height:clamp(150px,14.8cqw,284px)}
.nzTL-row--giu .nzTL-cell{align-items:flex-start;min-height:clamp(150px,14.8cqw,284px)}
.nzTL-txt{position:relative;width:max-content;max-width:min(400px,26cqw);min-width:100%}
.nzTL-last{justify-content:flex-end}
.nzTL-last .nzTL-txt{text-align:right}
.nzTL-row--su .nzTL-txt{padding-bottom:var(--stemSu)}
.nzTL-row--giu .nzTL-txt{padding-top:var(--stemGiu)}
.nzTL-t{
  position:relative;margin:0 0 clamp(12px,1.1cqw,21px);
  padding-top:20px;font-weight:700;line-height:1.2;font-size:20px;
  white-space:nowrap;color:var(--light);letter-spacing:0;
}
.nzTL-d{
  margin:0;padding-bottom:20px;font-weight:400;line-height:1.35;color:var(--muted);
  font-size:clamp(.8rem,.83cqw,15px);
}

.nzTL-line{position:relative;display:flex;justify-content:space-between;align-items:center;height:1px}
.nzTL-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.nzTL-mark{position:relative;width:0;height:0;display:block}
.nzTL-mark::before{
  content:"";position:absolute;top:0;left:0;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;background:var(--gold);transform:rotate(45deg);z-index:2;
}
.nzTL-mark::after{content:"";position:absolute;left:0;width:1px;background:var(--line);transform:translateX(-.5px)}
.nzTL-mark:nth-child(1)::after,.nzTL-mark:nth-child(3)::after,.nzTL-mark:nth-child(5)::after{bottom:0;height:var(--stemSu)}
.nzTL-mark:nth-child(2)::after,.nzTL-mark:nth-child(4)::after{top:0;height:var(--stemGiu)}
.nzTL-mark b{position:absolute;left:0;width:9px;height:9px;margin-left:-4.5px;background:var(--gold);transform:rotate(45deg);z-index:2}
.nzTL-mark:nth-child(1) b,.nzTL-mark:nth-child(3) b,.nzTL-mark:nth-child(5) b{top:calc(-1 * var(--stemSu) - 4.5px)}
.nzTL-mark:nth-child(2) b,.nzTL-mark:nth-child(4) b{top:calc(var(--stemGiu) - 4.5px)}

/* ingresso animato */
.nzTL.is-armed .nzTL-line::before{transform:scaleX(0);transform-origin:left}
.nzTL.is-armed .nzTL-mark::before{transform:rotate(45deg) scale(0)}
.nzTL.is-armed .nzTL-mark::after{transform:translateX(-.5px) scaleY(0)}
.nzTL.is-armed .nzTL-mark:nth-child(1)::after,
.nzTL.is-armed .nzTL-mark:nth-child(3)::after,
.nzTL.is-armed .nzTL-mark:nth-child(5)::after{transform-origin:bottom}
.nzTL.is-armed .nzTL-mark:nth-child(2)::after,
.nzTL.is-armed .nzTL-mark:nth-child(4)::after{transform-origin:top}
.nzTL.is-armed .nzTL-mark b{transform:rotate(45deg) scale(0)}
.nzTL.is-armed .ln > i{transform:translateY(115%)}

.nzTL.is-armed.is-in .nzTL-line::before{transform:scaleX(1);transition:transform 1.5s cubic-bezier(.22,.61,.36,1) .15s}
.nzTL.is-armed.is-in .nzTL-mark::before{transform:rotate(45deg) scale(1);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.nzTL.is-armed.is-in .nzTL-mark::after{transform:translateX(-.5px) scaleY(1);transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.nzTL.is-armed.is-in .nzTL-mark b{transform:rotate(45deg) scale(1)}
.nzTL.is-armed.is-in .ln > i{transform:none;transition:transform .82s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + var(--l,0s))}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(1)::before{transition-delay:.30s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(2)::before{transition-delay:.60s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(3)::before{transition-delay:.90s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(4)::before{transition-delay:1.20s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(5)::before{transition-delay:1.50s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(1)::after{transition-delay:.42s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(2)::after{transition-delay:.72s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(3)::after{transition-delay:1.02s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(4)::after{transition-delay:1.32s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(5)::after{transition-delay:1.62s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(1) b{transition:transform .4s cubic-bezier(.34,1.56,.64,1) .60s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(2) b{transition:transform .4s cubic-bezier(.34,1.56,.64,1) .90s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(3) b{transition:transform .4s cubic-bezier(.34,1.56,.64,1) 1.20s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(4) b{transition:transform .4s cubic-bezier(.34,1.56,.64,1) 1.50s}
.nzTL.is-armed.is-in .nzTL-mark:nth-child(5) b{transition:transform .4s cubic-bezier(.34,1.56,.64,1) 1.80s}
.nzTL-row .nzTL-cell:nth-child(1) .nzTL-txt{--d:.40s}
.nzTL-row .nzTL-cell:nth-child(2) .nzTL-txt{--d:.70s}
.nzTL-row .nzTL-cell:nth-child(3) .nzTL-txt{--d:1.00s}
.nzTL-row .nzTL-cell:nth-child(4) .nzTL-txt{--d:1.30s}
.nzTL-row .nzTL-cell:nth-child(5) .nzTL-txt{--d:1.60s}
.nzTL-t .ln{--l:.06s}
.nzTL-d .ln:nth-child(1){--l:.18s}
.nzTL-d .ln:nth-child(2){--l:.26s}

/* i titoli lunghi possono andare a capo quando lo spazio si stringe */
@media (max-width:1439px){
  .nzTL-t{white-space:normal}
  .nzTL-txt{max-width:min(360px,30cqw)}
}

/* tablet e telefono: timeline verticale in ordine 01 -> 05 */
@media (max-width:1024px){
  .nzTL{padding-top:0;padding-bottom:0;padding-inline:clamp(18px,5cqw,44px)}
  .nzTL-grid{display:flex;flex-direction:column;padding-left:var(--rail)}
  .nzTL-grid::before{
    content:"";position:absolute;left:0;top:var(--dotY);bottom:20px;
    width:1px;background:var(--line);transform-origin:top;
  }
  .nzTL-line{display:none}
  .nzTL-row{display:contents}
  .nzTL-cell:not(.nzTL-full){display:none}
  .nzTL-row--su .nzTL-cell:nth-child(1){order:1}
  .nzTL-row--giu .nzTL-cell:nth-child(2){order:2}
  .nzTL-row--su .nzTL-cell:nth-child(3){order:3}
  .nzTL-row--giu .nzTL-cell:nth-child(4){order:4}
  .nzTL-row--su .nzTL-cell:nth-child(5){order:5}
  .nzTL-cell{
    flex:0 0 auto;min-height:0 !important;
    align-items:flex-start !important;justify-content:flex-start !important;
    padding-bottom:var(--gapV);
  }
  .nzTL-cell.nzTL-last{padding-bottom:0}
  .nzTL-txt{width:100%;max-width:none;padding:0 !important;text-align:left !important}
  .nzTL-t{white-space:normal}
  .nzTL-t::before{
    content:"";position:absolute;left:calc(-1 * var(--rail) - 4px);
    top:var(--dotY);margin-top:-4.5px;width:9px;height:9px;
    background:var(--gold);transform:rotate(45deg);z-index:2;
  }
  .nzTL.is-armed .nzTL-grid::before{transform:scaleY(0)}
  .nzTL.is-armed.is-in .nzTL-grid::before{transform:scaleY(1);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .nzTL.is-armed .nzTL-full .ln > i{transform:translateY(115%)}
  .nzTL.is-armed .nzTL-full .nzTL-t::before{transform:rotate(45deg) scale(0)}
  .nzTL.is-armed .nzTL-full.is-vis .ln > i{transform:none;transition:transform .75s cubic-bezier(.16,1,.3,1) var(--l,0s)}
  .nzTL.is-armed .nzTL-full.is-vis .nzTL-t::before{transform:rotate(45deg) scale(1);transition:transform .42s cubic-bezier(.34,1.56,.64,1) .05s}
  .nzTL-full .nzTL-txt{--d:0s}
}
@media (max-width:767px){
  .nzTL-head{flex-direction:column;align-items:flex-start;gap:14px}
  .nzTL-t{font-size:clamp(1.15rem,5.4cqw,1.6rem)}
  .nzTL-d{font-size:clamp(.88rem,3.7cqw,1rem)}
  .nzTL-h2{font-size:clamp(1.3rem,5.8cqw,1.8rem)}
}
@media (max-width:640px){
  .nzTL{--rail:clamp(24px,7cqw,34px)}
  .nzTL-d .ln{display:inline;overflow:visible;padding:0;margin:0}
  .nzTL-d .ln > i{display:inline}
  .nzTL-d .ln + .ln::before{content:" "}
  .nzTL.is-armed .nzTL-d .ln > i,
  .nzTL.is-armed .nzTL-full.is-vis .nzTL-d .ln > i{transform:none;transition:none}
  .nzTL.is-armed .nzTL-full .nzTL-d{opacity:0;transform:translateY(12px)}
  .nzTL.is-armed .nzTL-full.is-vis .nzTL-d{
    opacity:1;transform:none;
    transition:opacity .55s ease .16s,transform .7s cubic-bezier(.16,1,.3,1) .16s;
  }
}


/* ============================================================
   15. FORM
   ============================================================ */

.nz-form{
  display:block;
  /* quanto rientra la colonna dei campi: etichetta + spazio. Serve al
     consenso privacy per partire in linea con i riquadri, non con le etichette */
  --nz-form-rientro:224px;
}
.nz-field{
  display:grid;grid-template-columns:200px 1fr;align-items:center;gap:24px;
  margin-bottom:34px;min-width:0;
}
.nz-field > label,.nz-field > span{color:var(--nz-grey);font-size:15px;line-height:1.3}
.nz-field--top{align-items:start}

.nz-form input[type=text],
.nz-form input[type=email],
.nz-form input[type=tel],
.nz-form select,
.nz-form textarea{
  -webkit-appearance:none;appearance:none;   /* Safari altrimenti disegna i suoi controlli */
  background:transparent;border:0;border-radius:0;
  color:var(--nz-light);width:100%;max-width:100%;
  font-family:inherit;font-size:15px;line-height:1.4;
}
.nz-form input[type=text],
.nz-form input[type=email],
.nz-form input[type=tel],
.nz-form select{
  border-bottom:1px solid var(--nz-hair-soft);padding:8px 0;
  transition:border-color .3s ease;
}
.nz-form textarea{
  border:1px solid var(--nz-hair-soft);padding:14px 16px;min-height:104px;resize:vertical;
  transition:border-color .3s ease;
}
.nz-form input::placeholder,.nz-form textarea::placeholder{color:var(--nz-grey);opacity:1}
.nz-form input:focus,.nz-form select:focus{border-bottom-color:var(--nz-gold);outline:none}
.nz-form textarea:focus{border-color:var(--nz-gold);outline:none}

/* la freccia della tendina la disegniamo noi: stessa resa su ogni sistema */
.nz-form select{
  cursor:pointer;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23DEC9B4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}
.nz-form select option{background:var(--nz-bg);color:var(--nz-light)}

/* Si / No come pillole */
.nz-choice{display:flex;gap:10px;flex-wrap:wrap}
.nz-choice input{position:absolute;opacity:0;width:0;height:0;margin:0}
.nz-choice label{
  border:1px solid var(--nz-hair-soft);border-radius:100px;padding:7px 18px;
  color:var(--nz-light);cursor:pointer;font-size:13.5px;line-height:1.2;
  display:inline-flex;align-items:center;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.nz-choice label:hover{border-color:var(--nz-gold);color:var(--nz-gold)}
.nz-choice input:checked + label{background:var(--nz-gold);border-color:var(--nz-gold);color:var(--nz-bg)}
.nz-choice input:focus-visible + label{outline:2px solid var(--nz-gold);outline-offset:3px}

/* allegato: input nascosto + etichetta a pillola (identica ovunque) */
.nz-file{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nz-file input[type=file]{position:absolute;opacity:0;width:0;height:0}
.nz-file label{
  border:1px solid var(--nz-hair);border-radius:100px;background:transparent;
  color:var(--nz-light);padding:9px 24px;font-size:13.5px;cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.nz-file label:hover{background:var(--nz-light);color:var(--nz-bg);border-color:var(--nz-light)}
.nz-file__name{font-size:14px;color:var(--nz-grey)}

.nz-form__submit{display:flex;justify-content:flex-end;margin-top:10px}
.nz-form__msg{margin-top:14px;font-size:14px;text-align:right;min-height:1.4em}
.nz-form__msg.is-ok{color:var(--nz-gold)}
.nz-form__msg.is-err{color:#E3907A}

@media (max-width:900px){
  .nz-form{--nz-form-rientro:0px}
  .nz-field{grid-template-columns:1fr;gap:8px;margin-bottom:26px}
}

/* il modulo preventivo ha dieci campi: da desktop vanno a coppie, cosi'
   tutta la richiesta si compila senza uscire dalla schermata */
@media (min-width:1024px){
  .nz-form--due{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,2.4cqw,44px)}
  .nz-form--due{--nz-form-rientro:166px}
  .nz-form--due .nz-field{grid-template-columns:150px minmax(0,1fr);gap:16px;margin-bottom:22px}
  .nz-form--due .nz-field--top,
  .nz-form--due .nz-form__submit,
  .nz-form--due .nz-form__msg,
  .nz-form--due input[type=hidden]{grid-column:1 / -1}
}

/* ============================================================
   APERTURA DI PAGINA A DUE COLONNE (Chi siamo)
   Titolo, sottotitolo e testo a sinistra, la fotografia grande a destra
   con un movimento di parallasse leggero. Sotto i 1025 px torna tutto
   in colonna, con la fotografia sopra al testo.
   ============================================================ */

.nz-intro{
  /* La colonna della fotografia e' larga quanto la distanza fra il bordo
     destro e la voce "Chi siamo" della barra in alto (~670 px, misura fissa
     perche' il menu non scala): cosi' ogni fotografia parte esattamente
     sotto quella voce. Sotto i 1400 px circa si restringe da sola. */
  display:grid;grid-template-columns:minmax(0,1fr) min(668px,48cqw);
  grid-template-areas:"titolo foto" "testo foto";
  column-gap:clamp(28px,4.5cqw,80px);row-gap:clamp(18px,2.4cqw,34px);
  align-items:stretch;
}
/* Tutte le fotografie di apertura hanno la stessa proporzione, quella di
   Chi siamo: larghezza fissa (la colonna) e 7:6, cosi' le tre pagine si
   assomigliano invece di seguire ciascuna la lunghezza del proprio testo. */
.nz-intro__foto{align-self:start;aspect-ratio:7 / 6;overflow:hidden}
.nz-intro__foto picture{display:block;height:100%}
.nz-intro__foto{height:auto}
.nz-intro__foto > img,
.nz-intro__foto > video,
.nz-intro__foto picture img{width:100%;height:100%;object-fit:cover;display:block}
.nz-intro__h1{grid-area:titolo;margin-bottom:0}
/* Il Metodo usa la stessa impaginazione di Chi siamo: la fotografia occupa
   la colonna destra per intero, dal filo del titolo fino in fondo al testo. */
.nz-intro--metodo{grid-template-areas:"titolo foto" "testo foto";align-items:stretch}
/* "Hai un progetto?": titolo e fotografia a sinistra, il testo a destra
   parte dal filo del titolo e scende lungo tutta la colonna. */
.nz-intro__foto{grid-area:foto}
.nz-intro__testo{grid-area:testo}
.nz-intro__title{
  font-size:clamp(1.5rem,2.4cqw,35px);font-weight:700;line-height:1.2;
  color:var(--nz-light);margin:0 0 clamp(14px,1.4cqw,20px);
}
/* Il testo riempie l'altezza della fotografia: quando e' un po' piu' corto
   i paragrafi si distribuiscono invece di lasciare un vuoto in fondo. */
.nz-intro__testo{display:flex;flex-direction:column}
.nz-intro__corpo{display:flex;flex-direction:column;gap:clamp(14px,1.2cqw,18px)}
@media (min-width:1025px){
  .nz-intro__corpo{flex:1 1 auto;justify-content:space-between}
}
.nz-intro__corpo .nz-lead{font-size:clamp(1rem,1.1cqw,18px);line-height:1.7;max-width:none;margin:0}
.nz-intro__foto{margin:0;overflow:hidden;border-radius:2px;position:relative}
.nz-intro__foto img{
  /* riempie il telaio 7:6: l'altezza non va lasciata all'immagine,
     altrimenti il rapporto lo detta il file e non il layout */
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Parallasse a due livelli: il fondo dello studio e i tre soggetti
   scontornati stanno uno sopra l'altro e scorrono a velocita' diverse,
   cosi' le persone sembrano staccarsi dal fondo. A riposo i due livelli
   combaciano ed e' identica alla fotografia originale. Il fondo e' una
   sfumatura senza dettagli, quindi la leggera scala in piu' non si nota
   e serve a non scoprire i bordi quando trasla. */
.nz-intro__foto{--nz-par:0px;--nz-par-sog:0px}

/* Il telaio e' posizionato in assoluto dentro la cella della griglia: cosi'
   la sua altezza e' definita e i due livelli in percentuale la seguono.
   Con height:100% direttamente nella cella allungata i livelli restavano
   piu' corti della cornice e sotto si vedeva una riga chiara. */
.nz-strati{position:absolute;inset:0;overflow:hidden;background:var(--nz-bg-2)}
/* Niente will-change: metterebbe i livelli su un piano di composizione a
   parte, che non viene ridisegnato quando l'immagine finisce di decodificare.
   Risultato: la fotografia restava invisibile fino al primo scroll. */
.nz-strati > img{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.nz-strati > .nz-strati__fondo{transform:scale(1.09)}
.nz-strati > .nz-strati__sog{transform:translate3d(0,var(--nz-par-sog),0) scale(1.09)}
/* Le fotografie a un solo livello restano ferme: senza un secondo piano da
   cui staccarsi, muoverle darebbe solo l'impressione che scivolino dentro la
   cornice. Il 7:6 del file coincide con quello della cornice, quindi si
   vedono per intero, senza ritaglio. */
@media (prefers-reduced-motion:reduce){
  .nz-strati__fondo,.nz-strati__sog{transform:none}
}
@media (max-width:1024px){
  /* in colonna unica l'ordine e' titolo, fotografia, testo: il titolo
     resta il primo elemento della pagina */
  .nz-intro{grid-template-columns:1fr;
            grid-template-areas:"titolo" "foto" "testo";
            row-gap:clamp(20px,4cqw,32px);align-items:start}
  /* piu' specifiche delle regole a fascia di Metodo e "Hai un progetto?",
     che altrimenti taglierebbero le fotografie a 220 px di altezza */
  #page .nz-intro__foto,
  #page .nz-intro__foto picture,
  #page .nz-intro__foto > img,
  #page .nz-intro__foto > video,
  #page .nz-intro__foto picture img{height:auto;aspect-ratio:auto}
  #page .nz-strati > img{height:100%;aspect-ratio:auto}
  .nz-strati{position:relative;inset:auto;aspect-ratio:4 / 3}
  /* il parallasse resta attivo anche in colonna singola: la cornice taglia
     l'ingrandimento, quindi lo spostamento non scopre mai i bordi */
  .nz-intro__foto{overflow:hidden}
  .nz-intro__foto{margin-top:0}
  .nz-strati__fondo,.nz-strati__sog{transform:none}
}

/* --- pagina contatti ---
   La lampada sale sopra il titolo: la parte alta della foto e' trasparente,
   quindi sul titolo resta solo il braccio con la lampadina accesa. */
.nz-contatti{
  display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);
  gap:clamp(28px,4cqw,72px);align-items:center;
}
.nz-contatti__img{order:2}
.nz-ct-hero{position:relative;z-index:1;padding-bottom:0}
/* La sovrapposizione e' calcolata sulla larghezza della foto, cosi' la
   lampada resta sempre sotto la barra in alto a qualunque risoluzione. */
.nz-contatti__img{
  --nz-foto:clamp(300px,30cqw,440px);
  position:relative;z-index:3;pointer-events:none;
  width:var(--nz-foto);margin:0 auto;align-self:start;
  /* la lampada sale verso il titolo invece di partire dal filo
     del blocco di testo, dove restava troppo in basso */
  margin-top:calc(var(--nz-foto) * -.28);
}
.nz-contatti__img img{width:100%;height:auto;display:block}
/* Su schermo largo la pagina Contatti deve stare tutta in una schermata,
   modulo compreso: qui si stringe quel tanto che basta. */
/* Sotto i 950 px di altezza il modulo non ci starebbe: li' si stringe tutto.
   Sugli schermi normali il titolo parte alla stessa quota delle altre pagine. */
@media (min-width:1024px) and (max-height:950px){
  .nz-ct-hero{padding-block:clamp(16px,1.4cqw,26px) 0}
  .nz-ct-hero .nz-h1{margin-bottom:clamp(14px,1.5cqw,22px)}
  .nz-ct-info{margin-bottom:clamp(16px,1.6cqw,24px)}
  .nz-contatti .nz-ct-title{margin-bottom:10px}
  .nz-contatti .nz-form--due .nz-field{margin-bottom:14px}
  .nz-contatti .nz-form textarea{min-height:74px}
  .nz-contatti .nz-privacy{margin:0 0 12px}
}
/* schermi molto bassi (1280x800, 1024x768): si stringe ancora */
@media (min-width:1024px) and (max-height:830px){
  .nz-ct-hero{padding-block:10px 0}
  .nz-ct-hero .nz-h1{margin-bottom:10px}
  .nz-ct-info{margin-bottom:12px}
  .nz-contatti .nz-ct-title{margin-bottom:10px}
  .nz-contatti .nz-form--due .nz-field{margin-bottom:10px}
  /* l'attributo rows del textarea vince sul min-height: qui si fissa
     l'altezza, altrimenti il modulo non ci sta nello schermo basso */
  .nz-contatti .nz-form textarea{min-height:0;height:68px}
  .nz-contatti .nz-form__msg{min-height:0;margin-top:8px}
  .nz-contatti .nz-privacy{margin-bottom:10px}
  /* schermo basso: la foto si stringe, cosi' il modulo resta intero */
  .nz-contatti__img{--nz-foto:clamp(260px,26cqw,400px)}
}
@media (max-width:900px){
  /* in colonna unica la fotografia si centra sopra il modulo */
  .nz-contatti{grid-template-columns:1fr;justify-content:stretch}
  /* sul telefono la lampada e' l'elemento forte della pagina: grande e
     con la lampadina che entra nell'ultima riga del titolo */
  .nz-contatti__img{order:0;--nz-foto:min(88%,420px);margin-inline:auto;
                    margin-top:calc(var(--nz-foto) * -.30)}
}
@media (max-width:640px){
  .nz-contatti__img{--nz-foto:min(92%,330px);margin-top:calc(var(--nz-foto) * -.30)}
}
.nz-ct-title{font-size:30px;font-weight:400;line-height:1.25;color:var(--nz-light);margin:0 0 20px}
@media (max-width:767px){.nz-ct-title{font-size:24px}}
.nz-ct-title b{font-weight:700}
.nz-ct-info{font-size:17px;line-height:1.5;color:var(--nz-accent);margin-bottom:clamp(24px,2.4cqw,38px)}
.nz-ct-info a:hover{color:var(--nz-gold)}
@media (max-width:900px){.nz-contatti{grid-template-columns:1fr}}

/* --- pagina preventivo --- */
.nz-qf{
  display:grid;grid-template-columns:minmax(0,500fr) minmax(0,760fr);
  gap:clamp(32px,10cqw,150px);align-items:start;
}
.nz-qf__img img{width:100%;height:auto;border-radius:250px 250px 0 0;object-fit:cover}
.nz-qf__title{
  font-size:clamp(1.3rem,1.56vw,30px);font-size:clamp(1.3rem,1.56cqw,30px);
  font-weight:400;line-height:1.3;color:var(--nz-light);margin:0 0 20px;
}
.nz-qf__title strong{font-weight:700}
.nz-qf__intro{font-size:15px;line-height:1.55;color:var(--nz-accent);margin:0 0 32px}
@media (max-width:900px){.nz-qf{grid-template-columns:1fr}}


/* ============================================================
   16. FOOTER
   ============================================================ */

.nz-footer{
  position:relative;overflow:hidden;background:var(--nz-bg);
  padding-block:clamp(48px,5cqw,88px) clamp(24px,2.4cqw,36px);
}
/* il logotipo grande alla base, in trasparenza: chiude la pagina come
   una filigrana invece di una riga di testo */
.nz-footer__mark{
  position:absolute;left:50%;bottom:clamp(10px,1.4cqw,26px);transform:translateX(-50%);
  width:min(92%,1240px);max-width:none;height:auto;
  opacity:.085;pointer-events:none;user-select:none;z-index:0;
}
.nz-footer__in{position:relative;z-index:1}
/* filo metallico in cima: chiude la pagina invece di interromperla */
.nz-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    rgba(222,201,180,0) 0%, rgba(222,201,180,.55) 22%,
    rgba(255,251,245,.9) 50%, rgba(222,201,180,.55) 78%, rgba(222,201,180,0) 100%);
}
.nz-footer__in{
  max-width:var(--nz-shell);margin-inline:auto;
  padding-inline:var(--nz-gutter);
}

/* fascia alta: il claim e l'invito a scrivere */
.nz-footer__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4cqw,60px);flex-wrap:wrap;
  padding-bottom:clamp(32px,3.4cqw,56px);
}
.nz-footer__claim{
  font-size:clamp(1.3rem,2.1cqw,38px);font-weight:200;line-height:1.2;
  color:var(--nz-light);letter-spacing:-.01em;margin:0;
  /* 16ch tagliava le due righe volute in quattro: qui ci stanno intere */
  max-width:22ch;text-wrap:balance;
}
.nz-footer__claim b{font-weight:700}

/* tre colonne: marchio, navigazione, contatti */
.nz-footer__cols{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(28px,3.4cqw,60px);
  padding-block:clamp(28px,3cqw,48px);
  border-top:1px solid rgba(222,201,180,.16);
}
.nz-footer__logo{width:clamp(150px,12cqw,192px);margin-bottom:18px}
.nz-footer__text{font-size:clamp(.9rem,.94cqw,17px);line-height:1.9;color:var(--nz-accent);margin:0}
.nz-footer__text a{transition:color .3s ease}
.nz-footer__text a:hover{color:var(--nz-gold)}
.nz-footer__ttl{
  font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--nz-gold);margin:0 0 16px;
}
.nz-footer__list{display:flex;flex-direction:column;gap:10px}
.nz-footer__list a{
  display:inline-flex;align-items:center;width:max-content;
  font-size:clamp(.95rem,1cqw,18px);color:var(--nz-accent);
  transition:color .3s ease;
}
.nz-footer__list a::before{
  content:"";width:0;height:1px;margin-right:0;background:var(--nz-gold);
  transition:width .35s var(--nz-ease),margin-right .35s var(--nz-ease);
}
.nz-footer__list a:hover{color:var(--nz-gold)}
.nz-footer__list a:hover::before{width:18px;margin-right:10px}

/* riga finale */
.nz-footer__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-top:clamp(18px,2cqw,30px);
  border-top:1px solid rgba(222,201,180,.16);
}
.nz-footer__legal{font-size:12px;color:var(--nz-grey);margin:0}
.nz-footer__legal a:hover{color:var(--nz-gold)}
.nz-social{display:flex;gap:14px}
.nz-social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(243,243,243,.18);color:var(--nz-light);
  transition:color .3s ease,border-color .3s ease,background-color .3s ease;
}
.nz-social a:hover{color:var(--nz-bg);background:var(--nz-gold);border-color:var(--nz-gold)}
.nz-social svg{width:17px;height:17px;fill:currentColor}
.nz-footer__badge{width:clamp(150px,11cqw,190px);opacity:.85;transition:opacity .3s ease}
.nz-footer__badge:hover{opacity:1}

@media (max-width:900px){
  .nz-footer__cols{grid-template-columns:1fr 1fr;row-gap:32px}
  .nz-footer__cols > :first-child{grid-column:1 / -1}
}
/* Sul telefono il footer si compatta al minimo: il marchio grande in
   filigrana alla base fa da chiusura, quindi il logotipo piccolo non
   serve piu' e i contatti stanno su due colonne strette. */
@media (max-width:600px){
  .nz-footer{padding-block:30px 96px}
  .nz-footer__mark{width:96%;bottom:16px;opacity:.09}
  .nz-footer__top{flex-direction:column;align-items:flex-start;gap:clamp(28px,6cqw,36px);padding-bottom:26px}
  .nz-footer__claim{max-width:none;font-size:1.25rem;line-height:1.25}
  .nz-footer__top .btn{width:auto}
  .nz-footer__cols{grid-template-columns:1fr 1fr;row-gap:18px;column-gap:16px;padding-block:18px}
  .nz-footer__cols > :first-child{grid-column:1 / -1}
  .nz-footer__logo{display:none}
  .nz-footer__text{font-size:13px;line-height:1.6}
  .nz-footer__ttl{font-size:10.5px;letter-spacing:1.4px;margin-bottom:8px}
  .nz-footer__list{gap:6px}
  .nz-footer__list a{font-size:14px}
  .nz-footer__bar{flex-direction:row;align-items:center;gap:12px;padding-top:14px}
  .nz-footer__legal{font-size:11px;order:3;width:100%;margin:0}
  /* piu' specifica della regola base, che nel file sta piu' in basso */
  #page .nz-footer__mini{order:4;width:100%;margin:2px 0 0;font-size:11px;gap:3px 14px}
  #page .nz-footer__mini a,#page .nz-footer__mini button{font-size:11px}
  .nz-social{gap:9px}
  .nz-social a{width:32px;height:32px}
  .nz-social svg{width:14px;height:14px}
  .nz-footer__badge{width:126px;margin-left:auto}
}

/* ============================================================
   17. LIGHTBOX (galleria "Altre realizzazioni")
   ============================================================ */

.nz-lb{
  position:fixed;inset:0;z-index:120;
  background:rgba(10,10,10,.94);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.nz-lb.is-open{opacity:1;visibility:visible}
.nz-lb img{max-width:min(1200px,92vw);max-height:86vh;object-fit:contain}
.nz-lb__close,.nz-lb__prev,.nz-lb__next{
  position:absolute;width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--nz-hair);border-radius:50%;color:var(--nz-light);
  background:rgba(21,21,21,.4);
  transition:background-color .3s ease,color .3s ease;
}
.nz-lb__close:hover,.nz-lb__prev:hover,.nz-lb__next:hover{background:var(--nz-light);color:var(--nz-bg)}
.nz-lb__close{top:20px;right:20px}
.nz-lb__prev{left:20px;top:50%;transform:translateY(-50%)}
.nz-lb__next{right:20px;top:50%;transform:translateY(-50%)}
.nz-lb svg{width:20px;height:20px;fill:currentColor}


/* ============================================================
   18. ANIMAZIONI DI INGRESSO
   ============================================================ */

.nz-reveal{opacity:0;transform:translateY(26px)}
.nz-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.nz-reveal--d1.is-in{transition-delay:.10s}
.nz-reveal--d2.is-in{transition-delay:.20s}
.nz-reveal--d3.is-in{transition-delay:.30s}


/* ============================================================
   19. ACCESSIBILITA' E STAMPA
   ============================================================ */

.nz-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .g-base,.g-strong{animation:none}
  .nz-reveal,.nz-mat .nz-mat__img img{opacity:1;transform:none;filter:none}
  .nzTL.is-armed .nzTL-line::before,
  .nzTL.is-armed .nzTL-grid::before,
  .nzTL.is-armed .nzTL-mark::after,
  .nzTL.is-armed .nzTL-d,
  .nzTL.is-armed .ln > i{transform:none !important;opacity:1 !important}
  .nzTL.is-armed .nzTL-mark::before,
  .nzTL.is-armed .nzTL-mark b,
  .nzTL.is-armed .nzTL-t::before{transform:rotate(45deg) !important}
}

@media print{
  .nz-header,.nz-menu,.nz-lb,.nz-carousel__nav,.nz-skip{display:none !important}
  body{background:#fff;color:#000}
}


/* ============================================================
   20. BLOCCHI DI PAGINA — impaginazioni ricorrenti
   ============================================================ */

/* una fascia stretta dentro il guscio largo */
.nz-shell.nz-band{max-width:var(--nz-band)}

/* spaziatura verticale delle sezioni scure */
.nz-section--dark > .nz-shell{padding-block:clamp(44px,5cqw,80px)}
.nz-section--dark + .nz-section--dark > .nz-shell{padding-top:0}
/* Le fasce del Metodo (processo, settori, materioteca, finiture) erano
   troppo vicine fra loro. Serve piu' specificita' della regola qui sopra,
   altrimenti il padding-top verrebbe azzerato. */
#page .nz-settori > .nz-shell{padding-block:clamp(46px,5cqw,84px)}
#page .nz-settori + .nz-settori > .nz-shell{padding-top:clamp(38px,4.4cqw,72px)}
.nzTL{padding-block:clamp(52px,5cqw,96px)}
/* subito dopo l'intestazione di pagina la fascia non ha bisogno di altra
   aria: il titolo ha gia' il suo margine inferiore */
.nz-hero + .nz-section--dark > .nz-shell{padding-top:clamp(8px,1.1cqw,20px)}
.nz-hero + .nz-opere{padding-top:clamp(16px,2cqw,36px)}
/* dopo un'apertura a tutta schermata la sezione seguente ha bisogno
   di un respiro vero, altrimenti sembra incollata */
.nz-hero--schermo + .nz-opere{padding-top:clamp(48px,6cqw,110px)}
.nz-hero--schermo + .nz-section--dark > .nz-shell{padding-top:clamp(48px,6cqw,110px)}

/* pulsanti della hero uno accanto all'altro */
.nz-hero__cta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(12px,1.4cqw,22px);   /* un po' d'aria fra testo e pulsante */
}

/* titolo a sinistra, testo a destra */
.nz-story{
  display:grid;grid-template-columns:minmax(0,442fr) minmax(0,838fr);
  gap:clamp(24px,8.3cqw,120px);align-items:center;
  margin-top:clamp(12px,2cqw,32px);
}
.nz-story__title{font-size:35px;font-weight:700;line-height:1.2;color:var(--nz-light);margin:0}
@media (max-width:767px){.nz-story__title{font-size:25px;line-height:1.4}}
.nz-story__text{display:flex;flex-direction:column;gap:clamp(18px,2cqw,28px)}
.nz-story__text .nz-lead{font-size:18px;line-height:1.6;max-width:none;margin:0}
@media (max-width:767px){.nz-story__text .nz-lead{font-size:17px}}
.nz-story--r .nz-story__title{text-align:right}
@media (max-width:900px){
  .nz-story{grid-template-columns:1fr;gap:24px}
  .nz-story--r .nz-story__title{text-align:left}
}

/* fotografie della home: stesso taglio 3:2 e stessa misura per tutte,
   centrate nella colonna. Il tetto di larghezza serve a far stare
   l'intera sezione dentro uno schermo 16:9. */
.nz-shotwide{margin:clamp(20px,2.4cqw,40px) 0 0}
.nz-shotwide img{
  width:100%;max-width:clamp(360px,41cqw,780px);
  height:auto;display:block;margin-inline:auto;
  aspect-ratio:3 / 2;object-fit:cover;
}
/* variante scontornata: la figura esce dal riquadro della fotografia,
   quindi niente taglio forzato, si tiene la proporzione originale */
.nz-shotwide--cut img{aspect-ratio:auto;object-fit:contain;max-width:clamp(300px,55cqw,980px)}
/* ritratto in apertura di pagina: sotto ha il testo, non un altro blocco,
   quindi resta piu' contenuto e la sezione sta in uno schermo 16:9 */
.nz-shotwide--top{margin-bottom:clamp(34px,4cqw,64px)}
.nz-shotwide--top img{max-width:clamp(320px,34cqw,620px)}
/* sul telefono la fotografia prende tutta la colonna */
@media (max-width:767px){
  .nz-shotwide img{max-width:100%}
  .nz-shotwide--cut img{max-width:min(100%,360px)}
}

/* fotografie del carosello "Nel cuore della produzione" */
.nz-shot{margin:0;overflow:hidden;background:#1d1d1f}
.nz-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3 / 2}
.nz-carousel__track--due > *{flex-basis:calc((100% - 20px - 80px) / 2)}
@media (max-width:767px){
  .nz-carousel__track--due > *{flex-basis:calc(100% - 60px)}
}

/* intestazioni di sezione allineate a destra (pagina Progetti, Metodo) */
.nz-sechead--right{justify-content:flex-end;text-align:left}
.nz-sechead--sp{margin-top:clamp(32px,4cqw,64px)}
@media (max-width:767px){
  .nz-sechead--right{justify-content:flex-start}
  .nz-sechead{flex-direction:column;align-items:flex-start;gap:16px}
}


/* due colonne: testo e immagine (pagine Metodo e "Hai un progetto?") */
.nz-split{
  display:grid;gap:clamp(24px,3cqw,42px);align-items:center;
  margin-top:clamp(24px,3cqw,48px);
}
.nz-split--txt-img{grid-template-columns:minmax(0,448fr) minmax(0,800fr)}

/* "Hai un progetto?": la fotografia e' quadrata, quindi la colonna si
   restringe per non farla diventare un blocco enorme, e il titolo sopra
   le sta vicino invece di galleggiare a meta' pagina. */
.nz-split--img-txt{grid-template-columns:minmax(0,640fr) minmax(0,600fr)}
#page .nz-split--img-txt{margin-top:clamp(8px,1cqw,16px)}
.nz-hero--stretta{padding-bottom:0}
.nz-hero--stretta .nz-h1--wide{margin-bottom:0}
.nz-split__title{font-size:32px;font-weight:700;line-height:1.15;color:var(--nz-light);margin:0 0 24px}
.nz-split__text .nz-lead{font-size:16px;line-height:1.8;max-width:none;margin:0 0 24px}
.nz-split__text .nz-lead:last-child{margin-bottom:0}
.nz-split img{width:100%;height:auto}
@media (max-width:900px){
  .nz-split{grid-template-columns:1fr;gap:28px}
  .nz-split__title{font-size:25px}
  .nz-split__text .nz-lead{font-size:16px;line-height:1.7}
}


/* ============================================================
   21. COOKIE — banner e pannello delle preferenze
   ------------------------------------------------------------
   Impianto conforme alle linee guida del Garante privacy:
   - "Rifiuta" e "Accetta tutti" hanno lo stesso peso visivo e
     stanno nello stesso livello (un clic per entrambi);
   - nessuna X che equivalga a un consenso implicito;
   - niente cookie wall: il sito resta leggibile e navigabile;
   - la scelta si puo' cambiare in qualsiasi momento dal footer.
   ============================================================ */

.nz-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:rgba(18,18,20,.94);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  border-top:1px solid rgba(222,201,180,.28);
  box-shadow:0 -18px 44px rgba(0,0,0,.45);
  transform:translateY(100%);
  transition:transform .45s var(--nz-ease);
}
.nz-cookie.is-in{transform:none}
.nz-cookie__in{
  max-width:var(--nz-shell);margin-inline:auto;
  padding:clamp(20px,2.2cqw,30px) var(--nz-gutter);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,2.4cqw,44px);align-items:center;
}
.nz-cookie__t{
  font-size:clamp(1rem,1.05cqw,20px);font-weight:700;line-height:1.25;
  color:var(--nz-light);margin:0 0 6px;letter-spacing:0;
}
.nz-cookie__p{
  font-size:clamp(.84rem,.83cqw,15px);line-height:1.6;color:var(--nz-grey);margin:0;
  max-width:78ch;
}
.nz-cookie__p a{color:var(--nz-gold);text-decoration:underline;text-underline-offset:3px}
.nz-cookie__p a:hover{color:var(--nz-gold-200)}

.nz-cookie__azioni{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* stessa forma e stessa misura per rifiuta e accetta: nessuna scorciatoia
   visiva verso il consenso */
.nz-cookie__azioni .btn{padding:13px 26px;font-size:14px;min-width:140px;justify-content:center}
.nz-cookie__link{
  background:none;border:0;padding:6px 2px;font-size:14px;letter-spacing:1px;
  color:var(--nz-grey);text-decoration:underline;text-underline-offset:4px;cursor:pointer;
  transition:color .3s ease;
}
.nz-cookie__link:hover{color:var(--nz-light)}

/* --- pannello di dettaglio --- */
.nz-cookie__panel{
  border-top:1px solid rgba(243,243,243,.12);
  max-width:var(--nz-shell);margin-inline:auto;
  padding:clamp(18px,2cqw,26px) var(--nz-gutter) clamp(20px,2.2cqw,30px);
  max-height:min(52vh,420px);overflow-y:auto;
}
.nz-cookie__gruppi{display:grid;gap:14px;border:0;margin:0 0 20px;padding:0}
.nz-cookie__gruppo{
  display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:start;
  padding:14px 0;border-bottom:1px solid rgba(243,243,243,.08);
}
.nz-cookie__gruppo h3{
  font-size:clamp(.95rem,.94cqw,17px);font-weight:700;color:var(--nz-light);margin:0 0 4px;
}
.nz-cookie__gruppo p{
  font-size:clamp(.82rem,.78cqw,14px);line-height:1.5;color:var(--nz-grey);margin:0;max-width:80ch;
}
/* interruttore disegnato a mano: stesso aspetto su ogni sistema */
.nz-switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.nz-switch input{position:absolute;opacity:0;width:46px;height:26px;margin:0;cursor:pointer}
.nz-switch span{
  width:46px;height:26px;border-radius:100px;background:rgba(243,243,243,.16);
  border:1px solid rgba(243,243,243,.28);position:relative;
  transition:background-color .3s ease,border-color .3s ease;
}
.nz-switch span::after{
  content:"";position:absolute;top:50%;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--nz-light);transform:translateY(-50%);
  transition:transform .3s var(--nz-ease),background-color .3s ease;
}
.nz-switch input:checked + span{background:var(--nz-gold);border-color:var(--nz-gold)}
.nz-switch input:checked + span::after{transform:translate(20px,-50%);background:var(--nz-bg)}
.nz-switch input:focus-visible + span{outline:2px solid var(--nz-gold);outline-offset:3px}
.nz-switch input:disabled + span{opacity:.5;cursor:default}
.nz-switch input:disabled{cursor:default}

@media (max-width:900px){
  .nz-cookie__in{grid-template-columns:1fr;gap:14px;padding-block:18px}
  .nz-cookie__azioni{width:100%}
  .nz-cookie__azioni .btn{flex:1 1 calc(50% - 6px);min-width:0}
  .nz-cookie__link{width:100%;text-align:left}
}
/* sul telefono il banner deve restare una striscia, non mezza schermata */
@media (max-width:560px){
  .nz-cookie__in{padding-block:16px;gap:12px}
  .nz-cookie__t{font-size:15px;margin-bottom:4px}
  .nz-cookie__p{font-size:13px;line-height:1.45}
  .nz-cookie__azioni{gap:8px}
  .nz-cookie__azioni .btn{padding:11px 14px;font-size:13px}
  .nz-cookie__panel{max-height:58vh}
  .nz-cookie__gruppo{padding:12px 0}
}
@media (prefers-reduced-motion:reduce){
  .nz-cookie{transition:none}
}

/* riga di servizio nel footer */
.nz-footer__mini{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;
  font-size:12px;color:var(--nz-grey);margin:8px 0 0;
}
.nz-footer__mini a,.nz-footer__mini button{
  font:inherit;color:var(--nz-grey);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:none;transition:color .3s ease;
}
.nz-footer__mini a:hover,.nz-footer__mini button:hover{
  color:var(--nz-gold);text-decoration:underline;text-underline-offset:3px;
}

/* consenso privacy nei moduli */
.nz-privacy{
  display:flex;align-items:flex-start;gap:12px;margin:4px 0 18px;
  padding-left:var(--nz-form-rientro,0px);
  font-size:clamp(.82rem,.78cqw,14px);line-height:1.5;color:var(--nz-grey);
}
.nz-form--due .nz-privacy{grid-column:1 / -1}
.nz-privacy input{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;
  width:18px;height:18px;margin-top:2px;border-radius:3px;
  border:1px solid var(--nz-hair);background:transparent;cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease;
}
.nz-privacy input:checked{
  background:var(--nz-gold) no-repeat center/11px 8px;
  border-color:var(--nz-gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M1 4l3 3 6-6' stroke='%23151515' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.nz-privacy input:focus-visible{outline:2px solid var(--nz-gold);outline-offset:3px}
.nz-privacy label{cursor:pointer;text-wrap:pretty}   /* niente parole sole a fine riga */
.nz-privacy a{color:var(--nz-gold);text-decoration:underline;text-underline-offset:3px}

/* pagina informativa */
.nz-legal{max-width:78ch}
.nz-legal h2{
  font-size:clamp(1.15rem,1.35cqw,26px);font-weight:700;color:var(--nz-light);
  margin:clamp(28px,3cqw,44px) 0 12px;letter-spacing:0;
}
.nz-legal h2:first-child{margin-top:0}
.nz-legal h3{font-size:clamp(1rem,1cqw,18px);font-weight:700;color:var(--nz-gold);margin:22px 0 8px}
.nz-legal p,.nz-legal li{font-size:clamp(.92rem,.89cqw,17px);line-height:1.7;color:var(--nz-accent)}
.nz-legal ul{list-style:disc;padding-left:1.2em;margin:0 0 1em}
.nz-legal li{margin-bottom:.4em}
.nz-legal a{color:var(--nz-gold);text-decoration:underline;text-underline-offset:3px}
.nz-legal table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:clamp(.85rem,.83cqw,15px)}
.nz-legal th,.nz-legal td{
  text-align:left;padding:12px 14px;border-bottom:1px solid rgba(222,201,180,.18);
  color:var(--nz-accent);vertical-align:top;
}
.nz-legal th{color:var(--nz-gold);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.nz-legal__tab{overflow-x:auto}
.nz-legal__data{font-size:14px;color:var(--nz-grey);margin-top:36px}