/* ==========================================================
   PICIEMME — preview.html
   Fedele all'export Figma (1512). left/width = % di 1512,
   top/height = % dell'altezza sezione.
   Componenti letti: 245:1363 (Servizi 1-4), 245:1347 + 245:1358
   (Orizzonti stati 1 e 2), 133:960 (Footer).
   ========================================================== */

:root{
  --white:#FAF8F2;
  --black:#040301;
  --burgundy-500:#8B272B;   /* solo su fondo nero (hover dei recapiti nel footer): lì il 600 si spegne */
  --burgundy-600:#641C1F;
  --n200:#DBD9D6;
  --n300:#CAC8C4;
  --n400:#ABA7A0;
  --n600:#6C6860;
  --n700:#514E48; --n800:#363430;
  --white-15:rgba(250,248,242,0.15);
  --white-65:rgba(250,248,242,0.65);
  --black-25:rgba(4,3,1,0.25);

  --display:"Aboreto",serif;
  --body:"Cormorant Garamond",serif;

  --fs-hero:clamp(42px, 15.776vw, 62px);      /* 62/393 */
  --fs-xl:clamp(56px, 12.169vw, 184px);
  --fs-news:clamp(36px, 4.233vw, 64px);
  --fs-h1:clamp(32px, 4.762vw, 72px);
  --fs-h2:clamp(34px, 4.762vw, 72px);      /* tetto 72: non supera l'H1 */
  --fs-num:clamp(62px, 7.937vw, 120px);
  --fs-eyebrow:clamp(18px, 1.852vw, 28px);
  --fs-eyebrow-i:18px;
  --fs-body:clamp(16px, 1.587vw, 24px);
  --fs-label:clamp(16px, 1.455vw, 22px);
  --fs-body-m:clamp(16px, 1.455vw, 22px);
  /* Titolo principale di pagina (Contatti, Brand, …): stessa misura ovunque */
  --fs-title:clamp(36px, 6.349vw, 96px);
  --lh-title:calc(110/108);
  /* Testata di pagina: quota del breadcrumb sotto l'header e stacco fino al
     titolo. Calibrati sulla pagina Contatti e usati da tutte le altre. */
  --crumb-top:101px;   /* 37px sotto l'header, alto 64: quota della pagina Contatti */
  --crumb-gap:4px;
  --fs-ui:clamp(14px, 1.323vw, 20px);
  --fs-sm:clamp(14px, 1.190vw, 18px);
  --fs-xs:clamp(14px, 1.058vw, 16px);
  /* CTA, filtri e pulsanti: 16 su mobile, 18 su desktop */
  --fs-azione:clamp(16px, 1.190vw, 18px);
  /* Testo dentro i campi dei moduli: mai sotto i 16 (zoom iOS al focus) */
  --fs-campo:clamp(16px, 1.323vw, 20px);

  --gut:16px;
  --edge:16px;
  --header-h:64px;

  /* Interazione hover, unica per tutto il sito */
  --hover-fx:.18s ease-out;
  /* Il passaggio a colori delle foto non e un hover da pulsante: 18
     centesimi su un'immagine intera si leggono come uno scatto, e qui serve
     una dissolvenza. La curva non e quella del carosello (.22,1,.36,1), che
     parte di slancio: su un movimento va bene, su una dissolvenza il colore
     arriverebbe quasi tutto nei primi centesimi. Questa entra ed esce piano,
     cosi la foto cambia senza un punto in cui scatta. */
  --colore-fx:.45s cubic-bezier(.4,0,.2,1);
  /* Le schede degli eventi si scaldano piu piano di tutto il resto: sono
     piccole e tante, e il colore che arriva lento le fa sembrare meno un
     comando che risponde e piu una fotografia che prende luce.
     La curva e simmetrica, non quella delle altre: qui conta soprattutto
     la partenza: con un attacco rapido il colore "scatta" nel primo decimo
     e il resto del tempo non lo vede nessuno. Cosi invece entra ed esce
     piano da tutte e due le parti. */
  --colore-fx-card:.6s cubic-bezier(.4,0,.4,1);
  --hover-scuro:var(--white-65);   /* su fondo scuro: attenua, non schiarisce */
  /* Le frecce che si raddrizzano hanno bisogno di più corsa del semplice
     cambio di tinta: 38° in 180ms si leggono come uno scatto secco. Stessa
     curva, tempo poco più lungo, così il colore e la rotazione finiscono
     insieme all'occhio senza sembrare due animazioni diverse. */
  --gira-fx:.28s cubic-bezier(.22,1,.36,1);

  /* Errore nei form: sul chiaro il burgundy 500 (era in palette e inutilizzato),
     sul fondo nero serve più luminanza o il rosso scuro non si stacca. */
  --errore:#8B272B;
  --errore-chiaro:#E3868A;
}
@media (min-width:1024px){
  :root{
    --gut:5.291vw; --edge:1.984vw;
    --fs-hero:clamp(62px, min(8.201vw, 12vh), 124px);   /* 124/1512 */
    --fs-eyebrow-i:clamp(22px, min(2.116vw, 3.2vh), 32px);
  }
}

/* =========================================================
   Transizione fra pagine: dissolvenza breve in entrata e in uscita.
   Stessa durata e stesso andamento della dissolvenza del menu, per
   non introdurre un secondo linguaggio di movimento.
   ========================================================= */
:root{ --fade-pagina:.42s; }
body{ opacity:1; transition:opacity var(--fade-pagina) cubic-bezier(.33,1,.68,1); }
body.pagina-entra{ opacity:0; }
/* La regola body.pagina-esce{ opacity:0 } e stata TOLTA.
   Era la meta CSS della transizione di uscita, rimossa da site.js. Finche
   restava qui, un site.js vecchio rimasto nella cache di un browser (o di
   un plugin di caching) poteva ancora mettere quella classe e lasciare la
   pagina invisibile: si era navigato davvero, ma non si vedeva niente.
   Senza la regola, la classe non fa piu nulla anche se qualcuno la mette:
   il guasto diventa impossibile invece che improbabile. */
/* Senza JS la pagina resta visibile: la classe di partenza la mette lo script */
@media (prefers-reduced-motion:reduce){
  body,body.pagina-entra,body.pagina-esce{ opacity:1; transition:none; }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--white); color:var(--black);
  font-family:var(--body); font-size:var(--fs-body); font-weight:400; line-height:1.4;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,p{margin:0; font-weight:400;}
/* Il corpo va a 1.4 per i paragrafi: i titoli restano stretti fra 1 e 1.1,
   e chi dichiara la propria interlinea (le misure d'export) resta com'e. */
h1,h2,h3,h4{ line-height:1.1; }
.sec{ position:relative; overflow:hidden; }

/* A capo condizionali: il Figma ha interruzioni diverse fra i due frame */
br.br-d{ display:none; }
br.br-m{ display:inline; }
@media (min-width:1024px){
  br.br-d{ display:inline; }
  br.br-m{ display:none; }
}

.u-eyebrow{ font-size:var(--fs-eyebrow); font-weight:700; }
.u-h1{ font-size:var(--fs-h1); font-weight:700; line-height:calc(75/72); }
.u-h2{ font-size:var(--fs-h2); font-weight:700; line-height:calc(90/80); }
.u-body{ font-size:var(--fs-body); font-weight:400; color:var(--n700); }
/* CTA: 20px (era 22) */
.u-link{
  font-size:var(--fs-azione); font-weight:700; text-transform:uppercase;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .18s ease-out;
}
.u-link:hover,.ev-link:hover,.btn-pill:hover{ color:var(--burgundy-600); }

/* --- Freccia unica del sito (da design-reference/arrow-icon.jpg) --- */
.ico{
  width:1.1em; height:1.1em; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.ico-lg{ width:1.6em; height:1.6em; stroke-width:1; }

/* =========================================================
   HEADER — scritte bianche su scuro, nere su chiaro
   Il blur sta su un layer separato dietro, così non entra
   in conflitto con il blend (backdrop-filter + mix-blend
   sullo stesso elemento danno risultati inconsistenti).
   ========================================================= */
/* Nascosto di default: compare quando il mouse si avvicina al bordo alto */
.hdr-bg{
  position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:98;
  background:rgba(4,3,1,0.05);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  pointer-events:none;
  transform:translateY(-10px); opacity:0; pointer-events:none;
  transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .65s ease;
}
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h); display:flex; align-items:center;
  padding:0 var(--gut);
  /* Sulle sezioni scure le scritte sono semplicemente bianche: l'esclusione
     invertiva i colori a seconda di quel che passava sotto, e su immagini
     chiare le voci diventavano illeggibili. */
  color:var(--white);
  transform:translateY(-10px); opacity:0; pointer-events:none;
  transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .65s ease;
}
body.hdr-on .hdr, body.hdr-on .hdr-bg{ transform:translateY(0); opacity:1; }
body.hdr-on .hdr{ pointer-events:auto; }
/* Zona invisibile che intercetta il mouse vicino al top */
.hdr-trigger{ position:fixed; top:0; left:0; right:0; height:100px; z-index:97; pointer-events:none; }

/* ---------------------------------------------------------
   Barra di amministrazione di WordPress
   ---------------------------------------------------------
   Da collegati, WordPress mette in cima una barra fissa alta 32px con
   z-index 99999. Normalmente non da fastidio perche spinge giu la pagina
   con html{margin-top:32px}. Ma il nostro header e position:fixed a
   top:0: il margine sull'html non lo tocca, e ci finisce sotto.

   Le voci del menu stanno fra y=16 e y=48. La barra copre da 0 a 32,
   cioe ESATTAMENTE LA META' ALTA DI OGNI VOCE. Il risultato e sconcertante
   quanto preciso: il puntatore sulla meta alta incontra la barra di
   WordPress e non il link, quindi niente URL nella barra di stato e il
   clic non fa nulla; sui 16px bassi invece il link risponde. Da qui il
   "ogni tanto uno funziona".

   Riguarda SOLO chi e collegato al pannello: per un visitatore normale
   la barra non esiste e il problema non si presenta. Il che spiega
   perche il sito sembrava rotto solo a te.

   Sotto i 783px la barra e alta 46; sotto i 601 non e piu fissa, scorre
   via con la pagina, e l'header torna a filo.
   --------------------------------------------------------- */
body.admin-bar .hdr,
body.admin-bar .hdr-bg,
body.admin-bar .hdr-trigger,
body.admin-bar .menu{ top:32px; }

@media screen and (max-width:782px){
  body.admin-bar .hdr,
  body.admin-bar .hdr-bg,
  body.admin-bar .hdr-trigger,
  body.admin-bar .menu{ top:46px; }
}
@media screen and (max-width:600px){
  body.admin-bar .hdr,
  body.admin-bar .hdr-bg,
  body.admin-bar .hdr-trigger,
  body.admin-bar .menu{ top:0; }
}
/* Su touch (niente mouse) l'header resta sempre visibile.
   pointer-events va rimesso esplicitamente: .hdr nasce con
   pointer-events:none e a riaccenderlo e la sola regola body.hdr-on.
   Qui l'header torna visibile senza quella classe, quindi senza questa
   riga resterebbe in vista ma non cliccabile — il caso peggiore, perche
   sembra funzionante. */
@media (hover:none){
  .hdr,.hdr-bg{ transform:none; opacity:1; }
  .hdr{ pointer-events:auto; }
}
/* ---- Pagine interne su fondo chiaro ----
   L'header non è una fascia a sé: stesso identico --white della pagina,
   niente miscelazione, niente sfocatura, niente velo traslucido. Restano
   invariati altezza, logo, voci, spaziature e allineamenti — cambia solo
   il colore. La riga inferiore da 1px compare quando si è scorso, in
   dissolvenza: non ha altezza propria (è un ::after posato sul bordo),
   quindi non sposta di un pixel né l'header né la pagina.
   In homepage lo stesso trattamento vale a tratti: la classe .hdr-chiaro la
   mette site.js quando sotto l'header passa una sezione chiara, e la toglie
   sopra hero, servizi, contatti e footer, dove resta l'impostazione di prima. */
body.pagina-chiara .hdr,
body.hdr-chiaro .hdr{
  color:var(--black); background:var(--white);
  box-shadow:none; border:0;
}
body.pagina-chiara .hdr-bg,
body.hdr-chiaro .hdr-bg{ display:none; }
body.pagina-chiara .hdr .logo img,
body.hdr-chiaro .hdr .logo img{ filter:brightness(0); }
body.pagina-chiara .hdr::after,
body.hdr-chiaro .hdr::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--n200); opacity:0;
  transition:opacity .18s ease-out;
  pointer-events:none;
}
body.pagina-chiara.hdr-scorso .hdr::after,
body.hdr-chiaro .hdr::after{ opacity:1; }

.hdr-in{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hdr .logo{ width:142.17px; max-width:40vw; flex:0 0 auto; display:flex; justify-content:center; }
.hdr .logo img{ width:136.287px; height:20px; max-width:100%; filter:brightness(0) invert(1); }
.nav{ display:none; align-items:center; gap:24px; }
.nav ul{ display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.nav a{
  display:block; padding:4px 6px; font-size:var(--fs-sm); font-weight:500; text-transform:uppercase;
  position:relative;
}
.nav a::after{
  content:""; position:absolute; left:6px; right:6px; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease-out;
}
.nav a:hover::after{ transform:scaleX(1); }

/* Voci del menu overlay: 25% nero → nero pieno all'hover.
   Regola pronta, il menu verrà implementato col frame aggiornato. */
.menu-link{ color:rgba(4,3,1,0.25); transition:color .45s ease-in-out; }
.menu-link:hover{ color:var(--black); }
/* ---- Tendina della lingua ----
   Il pannello è ancorato al pulsante che lo apre e si apre sotto di esso,
   allineato al suo bordo destro. Voci alte 44px con rientro generoso,
   stati di passaggio, fuoco e scelta ben distinti. Apertura e chiusura in
   dissolvenza con una risalita breve. */
.nav .lang{
  position:relative; display:flex; align-items:center;
  /* Alto quanto la barra: così il `top:100%` del pannello parte dal fondo
     dell'header e non dal fondo del pulsante, che sta dentro la barra e
     faceva aprire la tendina addosso all'header. Il pulsante resta centrato
     perché qui dentro c'è comunque un flex centrato. */
  height:var(--header-h);
}
.lang-btn{
  display:flex; align-items:center; gap:6px;
  min-height:44px; padding:4px 6px;
  background:none; border:0; cursor:pointer; color:inherit;
  font-family:var(--body); font-size:var(--fs-sm); font-weight:500; text-transform:uppercase;
}
.lang-btn svg{
  width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transform:rotate(90deg); transition:transform var(--hover-fx);
}
.lang-btn[aria-expanded="true"] svg{ transform:rotate(-90deg); }

.lang-menu{
  position:absolute; z-index:120; top:calc(100% + 6px); right:0;
  min-width:max(160px, 100%); max-width:calc(100vw - var(--gut) * 2);
  margin:0; padding:6px; list-style:none;
  background:var(--white); color:var(--black);
  border:1px solid var(--n200);
  box-shadow:0 12px 32px rgba(4,3,1,.10);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
  visibility:hidden;
}
.lang.is-aperta .lang-menu{
  opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .18s ease-out, transform .18s ease-out, visibility 0s linear 0s;
}
/* Nell'header il pannello resta staccato di 8px sotto la barra: si legge come
   un secondo piano appoggiato all'header, non come una sua appendice. */
.nav .lang-menu{ top:calc(100% + 8px); }
.lang-menu li{ margin:0; }
.lang-menu button{
  width:100%; min-height:44px; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--body); font-size:var(--fs-ui); font-weight:500; color:var(--n700);
  transition:background var(--hover-fx), color var(--hover-fx);
}
.lang-menu button:hover{ background:rgba(4,3,1,.05); color:var(--black); }
.lang-menu button:focus-visible{ outline:2px solid var(--black); outline-offset:-2px; }
/* Scelta corrente: peso pieno e spunta a destra */
/* Scelta corrente: nero pieno e un pallino bordeaux, lo stesso segno che il
   sito usa altrove per dire "sei qui" (il punto di About, Eventi e della
   pagina di manutenzione). Il trattino di prima si confondeva col testo. */
.lang-menu button.is-scelta{ color:var(--black); font-weight:700; }
.lang-menu button.is-scelta::after{
  content:""; flex:0 0 auto; width:8px; height:8px;
  border-radius:999px; background:var(--burgundy-600);
}
.lang-menu button[disabled]{ color:var(--n400); cursor:default; }
.lang-menu button[disabled]:hover{ background:none; color:var(--n400); }
/* Dentro il menu a schermo intero il controllo è lo stesso, ma il pannello
   si apre sotto e a sinistra, e su telefono occupa la larghezza disponibile
   restando dentro i margini della pagina. */
.menu-lang .lang-menu{ right:auto; left:0; }
@media (max-width:1023.98px){
  .menu-lang .lang-menu{
    min-width:0; width:calc(100vw - var(--gut) * 2);
    max-width:calc(100vw - var(--gut) * 2);
  }
}
@media (prefers-reduced-motion:reduce){
  .lang-menu{ transition:none; }
}
/* Movimento ridotto: la freccia del Back non scatta. Le frecce delle pagine
   hanno la stessa guardia nei rispettivi file: i CSS di pagina si caricano
   dopo questo, e a pari specificità vincerebbero loro. */
@media (prefers-reduced-motion:reduce){
  .menu-back:hover .lbl .ico{ animation:none; }
}
.burger{ width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; flex:0 0 auto; color:inherit; }
.burger svg{ width:24px; height:24px; overflow:visible; }
.burger line{
  stroke:currentColor; stroke-width:2; stroke-linecap:round;
  transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .4s ease-in-out; transform-origin:16px 16px;
}
body.menu-open .burger line:nth-child(1){ transform:translateY(8.67px) rotate(45deg); }
body.menu-open .burger line:nth-child(2){ opacity:0; }
body.menu-open .burger line:nth-child(3){ transform:translateY(-8.67px) rotate(-45deg); }
@media (min-width:1024px){ .nav{ display:flex; } }

/* =========================================================
   MENU OVERLAY — node 121:573 "Hamburger Menu Aperto"
   Pannello a tutta pagina, fondo crema, immagine a destra.
   ========================================================= */
/* Apertura e chiusura hanno due tempi diversi. In apertura c'è la cascata;
   in chiusura no: tutto svanisce insieme in mezzo secondo, e le trasformate
   tornano al valore di partenza solo a dissolvenza finita (transform 0s
   ritardata), così in uscita non si vede nessuno spostamento. Prima le
   stesse regole valevano nei due versi, e chiudendo il menu gli elementi
   se ne andavano uno alla volta con 0,35-1s di attesa. */
/* Chiusura lunga e con curva simmetrica: parte piano e si spegne piano.
   Il pannello resta indietro rispetto ai contenuti, così la pagina sotto
   riaffiora per gradi invece di ricomparire di colpo. */
:root{ --menu-chiusura:.85s; --menu-chiusura-testi:.6s; --menu-curva-chiusura:cubic-bezier(.4,0,.2,1); }
.menu{
  position:fixed; inset:0; z-index:150; visibility:hidden;
  transition:visibility 0s linear var(--menu-chiusura);
}
body.menu-open .menu{ visibility:visible; transition-delay:0s; }
/* Full page: non entra di lato, si apre in dissolvenza sull'intera pagina */
.menu-panel{
  position:absolute; inset:0; overflow:hidden; background:var(--white);
  opacity:0; transform:scale(1.008);
  transition:opacity var(--menu-chiusura) var(--menu-curva-chiusura),
             transform 0s linear var(--menu-chiusura);
}
body.menu-open .menu-panel{
  opacity:1; transform:scale(1);
  transition:opacity .8s cubic-bezier(.33,1,.68,1),
             transform .9s cubic-bezier(.22,1,.36,1);
}

/* immagine: leggero scale-down in entrata */
.menu-media{ position:absolute; overflow:hidden; z-index:0; }
.menu-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  transition:transform 0s linear var(--menu-chiusura);
}
body.menu-open .menu-media img{
  transform:scale(1);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1) .08s;
}

.menu-wordmark{ position:absolute; overflow:hidden; pointer-events:none; z-index:1; }
.menu-wordmark span{
  display:block; font-family:var(--display); text-transform:uppercase;
  color:var(--white); white-space:nowrap; line-height:.81;
}
.menu-vrule{ display:none; }

/* Back + logo */
.menu-back{
  position:absolute; z-index:2; background:none; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; color:var(--black);
  /* i <button> non ereditano il font: senza questo usa quello di sistema */
  font-family:var(--body);
}
.menu-back .lbl{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:var(--fs-label); font-weight:700; text-transform:uppercase;
}
/* La freccia del Back punta già a sinistra: non c'è niente da raddrizzare,
   quindi qui vale lo scatto del pulsante d'invio, specchiato — parte verso
   sinistra, esce e rientra da destra. Il rotate(180deg) è nel keyframe e non
   sull'elemento perché l'animazione sostituisce l'intera transform. */
.menu-back .lbl .ico{ width:.9em; height:.9em; transform:rotate(180deg); }
@keyframes back-scatto{
  0%   { transform:rotate(180deg) translateX(0);     opacity:1; }
  40%  { transform:rotate(180deg) translateX(1.1em); opacity:0; }
  41%  { transform:rotate(180deg) translateX(-1.1em); opacity:0; }
  100% { transform:rotate(180deg) translateX(0);     opacity:1; }
}
.menu-back:hover .lbl .ico{ animation:back-scatto .44s cubic-bezier(.4,0,.2,1); }

/* z-index 5 e non 2: le voci grandi (.menu-nav) sono anche loro a 2 e vengono
   dopo nel DOM, quindi coprivano il pannello della lingua. */
.menu-lang{
  position:absolute; z-index:5; background:var(--black); color:var(--white);
  display:flex; align-items:center; gap:4px; padding:0 4px;
}
.menu-lang span{ padding:4px 6px; font-size:var(--fs-ui); font-weight:500; text-transform:uppercase; }
.menu-lang{ height:32px; }
.menu-lang svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Voci */
.menu-nav{
  position:absolute; z-index:2; display:flex; flex-direction:column; gap:16px;
  max-width:calc(100% - var(--gut) * 2); min-width:0;
}
.menu-rows{ display:flex; flex-direction:column; min-width:0; }
.menu-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.menu-link{
  font-style:italic; font-weight:400; line-height:normal;
  font-size:clamp(30px, 5.291vw, 80px);
  max-width:100%; overflow-wrap:break-word;
}
.menu-addr{ max-width:100%; overflow-wrap:break-word; }
.menu-addr{ font-size:18px; font-weight:700; color:var(--n600); }

/* Piede */
.menu-foot{ position:absolute; z-index:2; display:flex; align-items:center; gap:16px; }
.menu-foot .mail{ font-size:18px; font-weight:700; color:var(--n600); white-space:nowrap; }
.menu-foot .div{ width:0; height:13px; border-left:1px solid var(--n400); }
.menu-foot .soc{ display:flex; align-items:center; gap:8px; }
/* gli SVG social sono esportati in crema: qui il fondo è chiaro, vanno invertiti */
.menu-foot .soc img{ width:24px; height:24px; filter:brightness(0) opacity(.72); transition:filter .18s ease-out; }
.menu-foot .soc a:hover img{ filter:brightness(0) opacity(1); }

/* Ingresso sfalsato: 50ms per elemento, risalita corta.
   In chiusura vale invece questa regola di base: sola dissolvenza, tutti
   insieme, e la risalita rimessa a posto solo dopo (transform 0s ritardata). */
.menu-stag{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--menu-chiusura-testi) var(--menu-curva-chiusura),
             transform 0s linear var(--menu-chiusura);
}
/* Le voci hanno anche .menu-stag: la sua shorthand cancellava la
   transizione del colore, quindi l'hover cambiava di scatto.
   Qui la ridichiaro insieme alle altre, con delay 0 solo per il colore. */
.menu-link.menu-stag{
  transition:opacity var(--menu-chiusura-testi) var(--menu-curva-chiusura),
             transform 0s linear var(--menu-chiusura),
             color .45s ease-in-out;
}
body.menu-open .menu-stag{
  opacity:1; transform:translateY(0);
  transition:opacity .85s cubic-bezier(.33,1,.68,1),
             transform .95s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(.18s + var(--i) * .05s);
}
body.menu-open .menu-link.menu-stag{
  transition:opacity .85s cubic-bezier(.33,1,.68,1),
             transform .95s cubic-bezier(.22,1,.36,1),
             color .45s ease-in-out;
  transition-delay:calc(.18s + var(--i) * .05s), calc(.18s + var(--i) * .05s), 0s;
}
@media (prefers-reduced-motion:reduce){
  .menu-panel,.menu-media img,.menu-stag,
  body.menu-open .menu-panel,body.menu-open .menu-media img,body.menu-open .menu-stag{
    transition-duration:.01s; transition-delay:0s;
  }
}

/* X di chiusura, allineata a destra sulla stessa riga di BACK */
.menu-close{
  position:absolute; background:none; border:0; padding:0; cursor:pointer;
  width:32px; height:32px; display:block;
  z-index:2;   /* sopra l'immagine: senza questo il DOM la dipingeva sotto */
}
/* 256:2056 material-symbols:close — rect #040301 + glifo #FAF8F2.
   Serve il fondo pieno: la X sta sopra la foto, un tratto nero sparirebbe. */
.menu-close svg{ width:32px; height:32px; display:block; }
/* L'hover non tocca piu l'opacita dell'intero svg: sbiadendo anche il rect di
   fondo lasciava trasparire la foto sotto, e sembrava un cambio di colore
   improvviso. Ora il fondo resta pieno e schiarisce, il glifo si attenua. */
.menu-close svg rect{ fill:#040301; transition:fill .28s cubic-bezier(.4,0,.2,1); }
.menu-close svg path{ transition:opacity .28s cubic-bezier(.4,0,.2,1); }
.menu-close:hover svg rect{ fill:#2A2622; }
.menu-close:hover svg path{ opacity:.75; }

/* Layout base (vale da 1280 in su, dove restano le quote del frame 121:573;
   sotto quella soglia comanda il blocco "MENU — telefono e tablet"). */
.menu-testa{ display:contents; }
.menu-logo{ display:none; }
.menu-back{ left:var(--gut); top:24px; height:32px; align-items:center; }
.menu-close{ right:var(--gut); top:24px; }
.menu-lang{ left:var(--gut); right:auto; top:64px; }
.menu-nav{ left:var(--gut); right:var(--gut); top:50%; transform:translateY(-50%); }
.menu-foot{ left:var(--gut); bottom:24px; }
.menu-media{ left:0; right:0; bottom:0; height:34%; }
.menu-wordmark{ left:var(--gut); right:var(--gut); bottom:64px; height:52px; }
.menu-wordmark span{ font-size:15vw; }
/* Il trattino separa le due parti dell'indirizzo quando stanno su una riga
   sola: da desktop c'è l'a capo e non serve. */
.menu-addr .sep{ display:none; }

/* Da 1280 in su, dove comincia il desktop vero: sotto quella soglia vale il
   blocco "MENU — telefono e tablet" e le due impaginazioni non devono
   sovrapporsi. Con `min-width:1024px` le quote assolute di qui restavano
   attive sulla fascia iPad e, lette come scostamenti relativi, spingevano
   la X e la foto fuori dal pannello. */
@media (min-width:1280px){
  /* Coordinate esatte del frame 121:573 */
  /* Sullo stesso filo delle voci e della riga in fondo (1.984%): nell'export
     stava a 3.505%, cioè 23px più a destra, e non si allineava a niente. */
  /* Allineato in verticale a lingua e croce: entrambe stanno a 6.313% e sono
     alte 32px. Il Back e piu basso, quindi si posiziona sullo stesso filo e
     si centra sui 32px con una altezza di riga esplicita. */
  .menu-back{ left:1.984%; top:6.313%; height:32px; align-items:center; }
  .menu-lang{ left:45.503%; right:auto; top:6.313%; }  /* @ 688,62 · 68×32 */
  .menu-close{ left:93.717%; right:auto; top:6.313%; } /* @ 1417,62 · 32×32 */
  /* Il top a 38.187% dell'export lasciava il blocco basso rispetto al
     riquadro dell'immagine: le voci vanno centrate sull'altezza. */
  .menu-nav{
    left:1.984%; right:auto; top:50%; transform:translateY(-50%);
    width:44.974%;                                          /* 680/1512 */
  }
  .menu-foot{ left:1.984%; top:95.010%; bottom:auto; }  /* y=933 */
  .menu-media{
    left:51.984%; top:3.055%; width:45.966%; height:93.890%;  /* 695×922 @786,30 */
    right:auto; bottom:auto; opacity:1;
  }
  .menu-wordmark{
    left:51.190%; top:85.031%; right:2.050%; bottom:auto;
    height:12.000%;                                     /* box 117.833 */
  }
  .menu-wordmark span{ font-size:9.624vw; }             /* 145.514 */
  .menu-vrule{
    display:block; position:absolute; left:97.950%; top:24.440%;
    width:0; height:51.120%; border-left:1px solid var(--black-25);
  }
}

/* =========================================================
   MENU — telefono e tablet fino a 1279  (frame 116:1537)
   Impaginazione diversa dal desktop: logo e X in testa, sotto la lingua e
   le voci, poi l'indirizzo su una riga sola e la foto in fondo con la firma
   bianca tagliata sul suo bordo inferiore.
   Qui il pannello è in flusso e non a quote assolute: fra un telefono da
   852px e un iPad mini da 1133 l'altezza cambia troppo perché delle
   percentuali reggano, e la foto deve poter cedere spazio senza spingere
   la firma fuori dal pannello.
   ========================================================= */
@media (max-width:1279.98px){
  .menu-panel{
    display:flex; flex-direction:column;
    padding:32px var(--gut) var(--gut);
  }
  /* Il desktop apre con BACK e chiude con la riga di contatti in basso:
     nel frame mobile non ci sono né l'uno né l'altra. */
  .menu-vrule, .menu-back, .menu-foot{ display:none; }

  .menu-testa{
    display:flex; align-items:center; justify-content:space-between;
    flex:0 0 auto;
  }
  .menu-logo{ display:block; }
  /* L'SVG del marchio è pieno di #FAF8F2, lo stesso crema del pannello:
     nell'header viene invertito su fondo scuro, qui va portato al nero,
     altrimenti resta bianco su bianco e sembra che manchi. */
  .menu-logo img{ display:block; height:20px; width:auto; filter:brightness(0); }
  /* position:relative serve al riquadro di tocco, ma va con top/right
     azzerati: gli scostamenti delle regole base la spostavano di 24px. */
  .menu-close{ position:relative; top:auto; right:auto; flex:0 0 auto; }
  /* 32px di glifo, 44 di bersaglio: il riquadro invisibile allarga il tocco
     senza ingrandire il quadrato nero. */
  .menu-close::before{ content:""; position:absolute; inset:-6px; }

  /* Chip lingua: corpo 12 come nel frame, stessa aggiunta sul bersaglio. */
  .menu-lang{
    position:relative; left:auto; top:auto; align-self:flex-start;
    height:auto; padding:0 4px;
    margin-top:clamp(52px, 22.137vw, 112px);
  }
  /* Il riquadro nero resta alto 26px come nel frame; il bersaglio arriva a
     44 col rettangolo invisibile, senza ingrandirlo. */
  .menu-lang .lang-btn{ position:relative; min-height:0; padding:0; }
  .menu-lang .lang-btn::before{ content:""; position:absolute; inset:-9px -6px; }
  .menu-lang span{ padding:4px 6px; font-size:12px; line-height:1.5; }
  .menu-lang svg{ width:12px; height:12px; }

  .menu-nav{
    position:static; transform:none; margin-top:8px; max-width:none;
    flex:0 0 auto; gap:14px;
  }
  /* Le cinque voci si leggono di seguito come un testo unico: le due righe
     del desktop si sciolgono e i link vanno a capo da soli, nell'ordine in
     cui stanno nel markup — Brand, Servizi, Eventi, About Us, Contatti — che
     alle misure di queste fasce cade su tre righe: 2 + 2 + 1. */
  .menu-row{ display:contents; }
  /* Misura legata al corpo delle voci e non alla pagina: sette volte il
     corpo. La coppia più larga, "Eventi, About Us,", ne occupa 6,3 e ci sta;
     le prime tre ne vorrebbero 7,9 e vanno a capo. Così l'andata a capo è
     2+2+1 a ogni larghezza invece di diventare 3+2 sui tablet.
     Il corpo sta in una variabile perché lo legge anche il tetto: in em non
     si poteva, perché su .menu-rows l'em è quello ereditato dal pannello. */
  .menu-nav{ --voce:clamp(40px, 14.249vw, 88px); }
  .menu-rows{
    flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
    max-width:calc(var(--voce) * 7);
  }
  .menu-link{ font-size:var(--voce); line-height:1.15; }

  .menu-addr{ font-size:clamp(14px, 3.562vw, 18px); }
  .menu-addr br{ display:none; }
  .menu-addr .sep{ display:inline; }

  /* La foto prende quel che resta: su uno schermo basso si accorcia invece
     di spingere la firma fuori dal pannello. */
  .menu-media{
    position:relative; flex:1 1 auto; min-height:24vw; height:auto;
    margin-top:6.870vw; opacity:1;
  }
  .menu-media img{ position:absolute; inset:0; }

  /* Firma larga esattamente quanto la foto, con i suoi stessi margini a
     sinistra e a destra: né sbordata né tagliata ai lati, tagliata solo in
     basso dal riquadro, più basso dei glifi (.848em contro l'1,16em della
     riga).
     Il corpo si ricava dalla misura del contenuto: "PICIEMME" in Aboreto è
     largo 4,858 volte il proprio corpo, quindi su 361px di contenuto fa i
     74,3 del nodo 121:565; si divide per 4,87 per lasciare un filo di
     margine. Con un clamp fisso la parola sbordava di 50px a 1024. */
  .menu-wordmark{
    left:var(--gut); right:var(--gut); bottom:var(--gut); top:auto;
    font-size:calc((100vw - var(--gut) * 2) / 4.87); height:.848em;
  }
  /* line-height:normal e non .81: con l'interlinea corta i glifi si
     centrano nel riquadro e la firma si vede tutta, mentre nel frame è
     tagliata sul fondo. Così partono dal filo alto e il riquadro, più basso
     di loro, ne taglia l'ultimo quinto — come la firma del footer. */
  .menu-wordmark span{ font-size:inherit; line-height:normal; text-align:center; margin-left:0; }
}

/* Tablet in orizzontale: molta larghezza e poca altezza. Con le misure del
   ritratto la colonna arrivava a 826px dentro un pannello alto 771 e la foto
   sbordava. Qui il vuoto in testa, il corpo delle voci e la firma si
   stringono quel tanto che basta a far tornare tutto dentro. */
@media (min-width:1024px) and (max-width:1279.98px) and (max-height:900px){
  .menu-lang{ margin-top:56px; }
  .menu-nav{ --voce:clamp(40px, 7.500vw, 72px); }
  .menu-media{ margin-top:32px; min-height:120px; }
  /* In orizzontale il riquadro è larghissimo e a misura piena la firma
     sarebbe alta 188px, mangiandosi la foto: qui il corpo resta più piccolo
     e la parola si centra nel riquadro invece di allinearsi a sinistra. */
  .menu-wordmark{ font-size:clamp(48px, 12.500vw, 160px); }
}

/* =========================================================
   1 — HERO (982)
   ========================================================= */
.hero{ min-height:100dvh; background:var(--white); color:var(--white); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease-in-out; }
.slide.is-active{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
/* La seconda slide aveva un ritocco d'inquadratura (object-position 24% e
   un ingrandimento del 6%) tarato sulla foto di prima. Con la foto nuova
   spingeva il taglio a sinistra: sul telefono restavano collo e clavicola e
   sparivano la bretella e la mano, che sono il soggetto. Ora e centrata
   come le altre due. */
.slide:nth-child(3) img{ object-position:76% center; transform:scale(1.12); }
.slide[data-ph]::after{
  content:attr(data-ph); position:absolute; left:var(--gut); bottom:16px;
  background:var(--burgundy-600); color:var(--white);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px;
}
.hero-in{ position:relative; z-index:1; min-height:100dvh; padding:17vh var(--gut) 4vh; display:flex; flex-direction:column; }
/* Sotto i 1024 vale lo stesso impianto del desktop: coda di 26vh, che porta
   il fondo della descrizione attorno al 74% dell'altezza, e "scroll to
   discover" staccato dal flusso e appeso a 4vh dal fondo. In flusso restava
   79px sopra il bordo e si spostava ogni volta che si toccava la coda. */
@media (max-width:1023.98px){
  /* ----------------------------------------------------------
     LA STRISCIA BIANCA SOTTO IL FOOTER
     ----------------------------------------------------------
     Non e un elemento: misurata, la pagina finisce esattamente dove
     finisce il footer, avanzo zero. E la tela oltre il documento.

     <html> non ha uno sfondo suo, quindi la tela la dipinge il body, che
     e --white. Su un telefono basta tirare oltre il fondo — o il
     rimbalzo alla fine di una scorsa veloce — e sotto al footer nero
     compare quel bianco.

     Si potrebbe dare il nero a <html>, ma allora comparirebbe in cima,
     dove le pagine interne sono chiare. Meglio togliere il rimbalzo: il
     documento si ferma ai propri bordi e non c'e piu nessun oltre da
     dipingere. In cambio si perde il tirare-per-ricaricare di Chrome
     Android, che su un sito da leggere non serve a nessuno.
     ---------------------------------------------------------- */
  html{ overscroll-behavior-y:none; }
  /* ----------------------------------------------------------
     LA BANDA BIANCA IN FONDO — la correzione vera
     ----------------------------------------------------------
     La riga qui sopra da sola non basta: Safari su iPhone applica
     overscroll-behavior ai contenitori interni ma NON al rimbalzo del
     documento. Su iOS quella riga non fa niente, e la banda resta.

     L'unico modo di colorare l'area oltre la pagina e lo sfondo della
     tela, che <html> porta via a <body> nel momento in cui ne dichiara
     uno suo. Il nero pieno pero comparirebbe anche in CIMA, dove le
     pagine interne sono chiare, e si sposterebbe il problema di un
     bordo.

     Da qui la sfumatura: bianco nella meta alta, nero nella bassa. Il
     body la copre per intero — resta visibile solo dove la pagina non
     arriva, cioe nei due rimbalzi: in cima si vede il bianco, in fondo
     il nero. Il punto in cui i due colori si toccano non conta, perche
     non lo vede nessuno: sta a meta di quattordicimila pixel di pagina,
     sotto il fondo bianco del body.
     ---------------------------------------------------------- */
  html{
    /* Il colore di fondo e la garanzia: quando la tela deve dipingere un
       punto che l'immagine non copre, usa questo. Nero, come il footer.

       LA SFUMATURA DI PRIMA NON FUNZIONAVA, E IL MOTIVO E QUESTO:
       senza background-repeat, il valore predefinito e `repeat`. La tela
       prende l'altezza del documento come piastrella e la RIPETE oltre i
       bordi — e la piastrella ricomincia col bianco. Sotto al footer si
       vedeva quindi l'inizio della copia successiva: bianco, di nuovo.
       Da qui `no-repeat`, che lascia il campo al colore di fondo.

       Con `fixed` la sfumatura si misura sulla finestra e non sul
       documento: meta alta bianca, meta bassa nera, ferme. Cosi il
       rimbalzo in cima resta chiaro come le pagine interne e quello in
       fondo resta nero come il footer. Se Safari ignorasse `fixed` — gli
       e gia successo in passato con gli sfondi ancorati — resta il nero
       del colore di fondo: in cima si vedrebbe scuro, in fondo si vede
       giusto. E il fondo e quello che conta. */
    background-color:var(--black);
    background-image:linear-gradient(to bottom, var(--white) 0 50%, var(--black) 50% 100%);
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  /* Il carosello si trascina in orizzontale, la pagina scorre in verticale:
     senza questo il browser prova a fare tutte e due e non ne riesce bene
     nessuna. */
  .ev-track{ touch-action:pan-y; }

  .hero-in{ padding-bottom:26vh; }
  .hero-scroll{
    position:absolute; left:50%; bottom:4vh; margin:0;
    transform:translateX(-50%);
  }
}
.hero-rule{ position:relative; height:0; border-top:1px solid var(--white-15); }
.hero-rule .fill{
  position:absolute; left:0; top:-1px; width:33.333%;
  border-top:1px solid var(--white); transition:width 1.3s cubic-bezier(.33,1,.68,1);
}
.hero-head{ margin-top:12px; display:flex; flex-direction:column; gap:16px; }
.hero-eyebrow{
  display:flex; align-items:center; gap:12px; white-space:nowrap;
  font-size:var(--fs-eyebrow-i); font-style:italic; font-weight:500;
}
.hero-eyebrow .rule{ flex:1 1 auto; max-width:35.95px; height:0; border-top:0.57px solid var(--white); }
.hero h1{
  font-family:var(--display); font-size:var(--fs-hero); font-weight:400;
  text-transform:uppercase; line-height:calc(110/124);
}
.hero h1 .d{ display:none; }
.hero-body{ margin-top:auto; margin-left:auto; width:43.8%; max-width:471px; font-size:var(--fs-body); }
.hero-scroll{
  margin-top:5vh; margin-inline:auto; display:flex; flex-direction:column;
  align-items:center; gap:16px;
}
/* Lineetta con caricamento continuo: si riempie dall'alto, si svuota in basso */
.hero-scroll .stem{
  position:relative; width:1px; height:64px; overflow:hidden;
  background:var(--white-15);
}
.hero-scroll .stem::after{
  content:""; position:absolute; inset:0; background:var(--white);
  animation:stemload 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes stemload{
  0%   { transform:scaleY(0); transform-origin:top; }
  45%  { transform:scaleY(1); transform-origin:top; }
  55%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll .stem::after{ animation:none; }
}
.hero-scroll span{ font-size:var(--fs-label); font-weight:700; text-transform:uppercase; white-space:nowrap; }
/* Barra di progresso verticale del carosello (x=1482, traccia 502) */
.hero-prog{ display:none; }
/* ---- Barra del tempo della hero ----
   Resta solo sul desktop vero. Su telefono e su tablet è un dettaglio che
   ruba spazio verticale alla schermata d'apertura senza aggiungere niente:
   il carosello continua a scorrere da solo, semplicemente non lo dichiara.
   Il conto del tempo in site.js non cambia: scrive su elementi nascosti. */
/* Selettore più forte del `.hero-prog{display:block}` che il blocco desktop
   dichiara più avanti nel foglio: senza questo, a 1024 la barra tornava. */
@media (max-width:1279.98px){
  .hero .hero-rule, .hero .hero-prog{ display:none; }
}
@media (hover:none){
  .hero .hero-rule, .hero .hero-prog{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .slide{ transition:none; } }

@media (min-width:1024px){
  .hero,.hero-in{ min-height:100vh; height:100vh; }
  /* In flusso invece che in % dell'altezza: su schermi bassi i blocchi
     posizionati in assoluto si sovrapponevano e l'ultimo usciva sotto. */
  .hero-in{ display:flex; flex-direction:column; padding:calc(var(--header-h) + 3vh) var(--gut) 26vh; }
  .hero-rule{ display:none; }
  .hero-prog{
    display:block; position:absolute; left:98.016%; top:24.440%; z-index:2;
    width:1px; height:51.120%; background:var(--white-15);
  }
  .hero-prog i{
    display:block; position:absolute; left:0; top:0; width:1px;
    height:33.333%; background:var(--white);
    transition:height 1.3s cubic-bezier(.33,1,.68,1);
  }
  .hero-head{ position:static; width:68.254%; margin:auto 0 0; gap:16px; }
  .hero-eyebrow{ gap:24px; }
  .hero-eyebrow .rule{ flex:0 0 35.95px; }
  .hero h1{ white-space:nowrap; }
  .hero h1 .m{ display:none; }
  .hero h1 .d{ display:inline; }
  .hero-body{ position:static; margin:5vh 0 0 51.9%; width:34.84%; max-width:471px; }
  .hero-scroll{ position:absolute; left:50%; bottom:4vh; margin:0; transform:translateX(-50%); }
}

/* =========================================================
   2 — ABOUT US (1028)
   ========================================================= */
.about{ background:var(--white); padding:64px var(--gut); }
.about-lead{ font-size:var(--fs-h1); font-weight:500; line-height:calc(75/72); }
.about-lead b{ font-weight:700; }
.about-fig{ margin-top:48px; display:flex; flex-direction:column; gap:32px; }
/* Il riquadro segue il ritratto del team invece di ritagliarlo: la foto e
   3:2, e con il 817/457 dell'export (1.788) perdeva 165px in basso. Con il
   rapporto vero il blocco cresce di circa 88px a 1512 e la CTA "Scopri chi
   siamo" scende con lui, mantenendo il gap di 32px qui sopra. */
.about-fig img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
/* Colore al passaggio, come i ritratti nella pagina About: la copia a colori
   sta sopra il bianco e nero, spenta, dentro un riquadro suo — se stesse
   dentro .about-fig coprirebbe anche il link "Scopri chi siamo". */
.about-foto{ position:relative; }
.about-foto .colore{
  position:absolute; inset:0; height:100%;
  opacity:0; transition:opacity var(--colore-fx);
}
@media (hover:hover){ .about-foto:hover .colore{ opacity:1; } }
.about-foto.is-colore .colore{ opacity:1; }
.about-dot{ width:20px; height:20px; border-radius:999px; background:var(--burgundy-600); }
.about-hline,.about-vline{ display:none; }
@media (min-width:1024px){
  /* Cresciuta da 67.989 con il ritratto passato a 3:2. Due effetti si
     sommano: la foto e piu alta di 5.8vw, e .about-fig e ancorata al 38.424%
     dell'altezza della sezione, quindi allungandola scende anche lei. Il
     valore e tarato sullo spazio che restava sotto la CTA prima del cambio
     — 101px in italiano, 35 nelle lingue che spostano il blocco di una riga
     (--about-giu): con 77.2vw tornano 100 e 33. Filetti, disco e foto sono
     tutti in % della stessa altezza, quindi restano allineati fra loro. */
  .about{ min-height:77.2vw; padding:0; }
  .about-lead{ position:absolute; left:1.984%; top:2.918%; width:82.011%; }
  .about-fig{ position:absolute; left:43.981%; top:38.424%; width:54.034%; margin:0; }
  .about-dot{ position:absolute; left:42.659%; top:32.782%; }
  .about-hline{ display:block; position:absolute; left:1.984%; top:35.700%; width:45.304%; height:0; border-top:1px solid var(--black-25); }
  .about-vline{ display:block; position:absolute; left:41.997%; top:30.934%; width:0; height:66.440%; border-left:1px solid var(--black-25); }
}

/* =========================================================
   3 — NUMERI (760)
   ========================================================= */
.numeri{ padding:64px var(--gut); }
.numeri .stats{ margin-top:48px; display:flex; flex-direction:column; gap:40px; }
.stat{ display:flex; flex-direction:column; gap:32px; }
.stat .num{ font-size:var(--fs-num); font-weight:700; line-height:1; color:var(--black); }
.stat .lbl{
  font-size:var(--fs-sm); font-weight:400; text-transform:uppercase;
  color:var(--n700); white-space:nowrap;
}
.numeri-main{ display:flex; flex-direction:column; gap:24px; }
.numeri-right{ display:flex; flex-direction:column; gap:40px; }
@media (min-width:1024px){
  .numeri{ padding:0; min-height:50.265vw; }
  .numeri .eyebrow{ position:absolute; left:5.291%; top:11.579%; width:24%; }
  .numeri-right{ position:absolute; left:41.997%; top:10.526%; width:56.019%; gap:80px; }
  .numeri .stats{ flex-direction:row; align-items:flex-start; gap:30px; margin:0; }
  .stat{ flex:0 0 auto; }
  .stat:nth-child(1){ min-width:25.03%; }
  .stat:nth-child(2){ min-width:24.91%; }
}

/* =========================================================
   4 — BRAND (789) — marquee seamless
   Track = 2 gruppi identici, animazione da 0 a -50%.
   ========================================================= */
.brand{ padding:64px 0; }
.brand-head{ padding-inline:var(--gut); display:flex; flex-direction:column; gap:8px; }
.brand-head .h{ font-size:var(--fs-h1); font-weight:700; line-height:calc(90/72); }
.brand-side{ padding-inline:var(--gut); margin-top:32px; display:flex; flex-direction:column; gap:32px; }
.brand-side p{ font-size:var(--fs-body); color:var(--n700); }
.marquee-wrap{
  margin-top:72px; padding:16px 0; display:flex; flex-direction:column; gap:16px;
  overflow:hidden; border-top:1px solid var(--black-25); border-bottom:1px solid var(--black-25);
}
.marquee{ overflow:hidden; display:flex; }
.mrow{ display:flex; flex:0 0 auto; width:max-content; animation:mslide 48s linear infinite; }
.marquee.rev .mrow{ animation-direction:reverse; }
.mgroup{ display:flex; flex:0 0 auto; }
.mcell{
  width:250px; flex:0 0 250px; height:124px; padding:0 48px 0 50px;
  display:flex; justify-content:center; align-items:center;
}
/* Normalizzazione: ogni logo dentro lo stesso box 152×64, object-fit contain */
.mcell img{ width:100%; height:64px; max-height:none; object-fit:contain; }
/* Loghi molto larghi o con molta aria nel file: nel box 152×64 restano
   otticamente più piccoli degli altri, quindi un ritocco in scala. */
.mcell img[alt="Deidad"],
.mcell img[alt="Naturana"],
.mcell img[alt="Royal Lounge"]{ transform:scale(1.28); }   /* tondo con anello sottile: nel box da 64 leggeva piccolo */
.mcell img[alt="Luna"],
.mcell img[alt="Elomi"]{ transform:scale(1.16); }
/* Lettering pieni che nel box riempiono tutta la misura e pesano più
   degli altri: rientrano di un filo. */
.mcell img[alt="Freya"],
.mcell img[alt="Robson"],
.mcell img[alt="Paul"]{ transform:scale(0.85); }
/* Golden Bay è l'unico marchio impilato (sole sopra, parola sotto): centrato
   come blocco, la parola cadeva sotto l'asse ottico degli altri lettering.
   Lo si alza di quanto basta a riportarla in linea. */
.mcell img[alt="Golden Bay"]{ transform:translateY(-8px); }
@keyframes mslide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .mrow{ animation:none; } }
@media (min-width:1024px){
  /* min-height alzata da 52.183vw per staccare lo slider dal blocco testi:
     testi fermi nella stessa posizione in px, marquee spinto ~40px più giù. */
  .brand{ padding:0; min-height:54.96vw; }
  .brand-head{ position:absolute; left:5.291%; top:9.63%; width:67.725%; padding:0; }
  .brand-side{ position:absolute; left:58.003%; top:27.43%; width:27.513%; padding:0; margin:0; }
  .marquee-wrap{ position:absolute; left:1.852%; top:59.57%; width:96.164%; height:35.62%; margin:0; }
}

/* =========================================================
   5 — METODO (1061)
   ========================================================= */
.metodo{ padding:64px var(--gut); }
.metodo-head{ display:flex; flex-direction:column; gap:8px; }
.metodo-head .k{ font-size:var(--fs-body); font-weight:700; }
.metodo-side{ margin-top:32px; display:flex; flex-direction:column; gap:32px; }
.metodo-wlines{ display:none; }
@media (min-width:1024px){
  /* Altezza guidata dal contenuto invece che da min-height + top in %.
     Con l'altezza fissa a 1061 (misura Figma) restavano ~420px vuoti;
     riducendo la min-height si riscalavano anche i top percentuali,
     quindi il vuoto tornava. Ora è tutto in flusso. */
  /* padding-bottom = distanza esatta fra "Tutti i servizi" e la sezione sticky */
  .metodo{ padding:3.6vw var(--gut) 64px; min-height:0; }
  .metodo-head{ position:static; width:88.017%; }        /* 1190/1352 */
  .metodo-head .k{ width:25.210%; }
  .metodo-side{
    position:static; width:36.169%;                      /* 489/1352 */
    margin:20px 0 0 58.949%;                             /* x=877 */
    gap:20px;
  }
  .metodo-wlines{ display:block; position:absolute; left:97.950%; top:22.620%; width:0; height:47.314%; border-left:1px solid var(--white-15); }
  .metodo-wlines::after{ content:""; position:absolute; left:-1px; top:0; width:0; height:43.825%; border-left:1px solid var(--white); }
}

/* =========================================================
   6 — SERVIZI — sticky scroll, 4 stati (245:1363)
   Wrapper alto 4 schermate, stage pinnato.
   ========================================================= */
.svc-scroller{ position:relative; }
.svc-stage{
  position:relative; height:auto; overflow:hidden; color:var(--white);
  background:var(--black);
}
.svc-slide{ position:relative; }
.svc-bg{ position:absolute; inset:0; z-index:0; }
.svc-bg img{ width:100%; height:100%; object-fit:cover; object-position:bottom; }
.svc-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 29.547%, rgba(0,0,0,.43) 70.453%);
}
/* Numerazione della voce: marcatore in cima a sinistra della slide, staccato
   dal blocco di testo che resta in basso. Stesso filo a sinistra del testo.
   Nessuna lineetta né altre decorazioni: corpo del sito, peso regolare,
   interlinea a 1, bianca sempre. */
.svc-testa{ display:block; }
.svc-num{
  position:absolute; z-index:2; left:var(--gut); top:20px;
  /* Allineamento a sinistra sul disegno, non sulla cassa: lo zero di
     Cormorant ha più avvicinamento a sinistra della R del titolo. In em
     così la correzione segue il corpo. */
  margin-left:-.025em;
  font-family:var(--body); font-size:82px;
  font-weight:400; line-height:1; letter-spacing:.02em; color:var(--white);
  /* Cifre minuscole, quelle di serie in Cormorant: sono le forme del
     mockup, dove lo zero e l'uno leggono come una "O" e una "I". Con
     lining-nums uscivano le maiuscole, più alte e strette. */
  font-variant-numeric:oldstyle-nums;
}
.svc-body{
  position:relative; z-index:2; padding:64px var(--gut);
  display:flex; flex-direction:column; gap:24px;
}
.svc-txt{ display:flex; flex-direction:column; gap:12px; }
.svc-txt h2{ font-size:var(--fs-h1); font-weight:700; line-height:calc(75/72); color:var(--white); }
.svc-txt p{ font-size:var(--fs-body); color:var(--n200); }
.btn-pill{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  padding:10px 24px; background:var(--white); color:var(--black); border-radius:999px;
  font-size:var(--fs-azione); font-weight:700; text-transform:uppercase;
  transition:color .18s ease-out;
}
.svc-prog{ display:none; }
@media (min-width:1024px){
  /* 400vh dava 75vh di scroll per stato: gli stati 02 e 03 passavano troppo
     in fretta. 900vh = 200vh a testa, così ogni slide resta in campo il tempo
     di leggerla per intero prima del crossfade. */
  .svc-scroller{ height:900vh; margin-bottom:0; }   /* i 106px erano di troppo: resta il rientro da 80px della sezione */
  /* Torna a tutta altezza: l'header ora si nasconde da solo,
     l'offset di 64px lasciava una striscia chiara sopra l'immagine. */
  .svc-stage{ position:sticky; top:0; height:100vh; }
  /* Crossfade vero: la slide uscente resta visibile per tutta la sua
     dissolvenza. Senza il ritardo su visibility spariva di colpo e si
     vedeva il fondo nero della stage — era quello il "flash". */
  .svc-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden;
    transition:opacity 1.5s ease-in-out, visibility 0s linear 1.5s;
  }
  .svc-slide.is-active{
    opacity:1; visibility:visible;
    transition:opacity 1.5s ease-in-out, visibility 0s linear 0s;
  }
  .svc-body{
    position:absolute; left:5.291%; bottom:32px; top:auto;
    width:56.019%; padding:0; gap:24px;
  }
  .svc-txt{ gap:12px; }
  /* Larghezza paragrafo diversa per slide, come nel frame 245:1363 */
  .svc-slide[data-i="0"] .svc-txt p{ width:83.590%; }   /* 708 */
  .svc-slide[data-i="1"] .svc-txt p{ width:71.429%; }   /* 605 */
  .svc-slide[data-i="2"] .svc-txt p{ width:103.542%; }  /* 877 */
  .svc-slide[data-i="3"] .svc-txt p{ width:100%; }      /* 847 */
  /* Stesso filo a sinistra di .svc-body. Con l'interlinea a 1 la cassa parte
     ben sopra le cifre (in Cormorant il numero occupa poco più di metà del
     corpo), quindi il `top` è quello della cassa, non del disegno. */
  .svc-num{ left:5.291%; top:20px; font-size:164px; }
  /* Traccia più lunga: resta centrata in verticale (16% sopra e sotto) e
     occupa più campo, così i quattro riempimenti si distinguono meglio. */
  .svc-prog{
    display:block; position:absolute; z-index:3; left:98.016%; top:16%;
    width:1px; height:68%; background:var(--white-15);
  }
  .svc-prog i{
    display:block; position:absolute; left:0; top:0; width:1px; height:23.904%;
    background:var(--white); transition:height 1.4s cubic-bezier(.33,1,.68,1);
  }
}

/* Scheda evento cliccabile: l'immagine si avvicina appena al passaggio
   del mouse e tutta la card porta alla pagina dell'evento. */
.ev{ display:block; color:inherit; }
.ev-shot{ display:block; position:relative; overflow:hidden; }
.ev-shot .ev-img{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
@media (hover:hover){
  .ev:hover .ev-shot .ev-img{ transform:scale(1.045); }
}
.ev.is-premuta .ev-shot .ev-img{ transform:scale(1.045); }
/* Come nella pagina Eventi: copertina a colori sopra, spenta.
   Qui la copia a colori porta anche la classe .ev-img, e la riga qui sopra
   ha la stessa forza di un `.ev-shot .colore`: essendo scritta dopo, la sua
   scorciatoia `transition` cancellava la dissolvenza e il colore compariva
   di scatto. Per questo il selettore e `.ev-img.colore`, che pesa di piu, e
   sta dopo: la dissolvenza vince, l'ingrandimento resta quello di prima. */
.ev-shot .ev-img.colore{
  position:absolute; inset:0; height:100%;
  opacity:0; transition:opacity var(--colore-fx-card), transform .5s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){ .ev:hover .ev-shot .ev-img.colore{ opacity:1; } }
.ev.is-premuta .ev-shot .ev-img.colore{ opacity:1; }
.ev:focus-visible{ outline:2px solid var(--black); outline-offset:4px; }

/* =========================================================
   7 — EVENTI (1066)
   ========================================================= */
.eventi{ padding:64px var(--gut); }
.eventi-head{ display:flex; flex-direction:column; gap:8px; }
.eventi-bar{ display:flex; align-items:center; justify-content:space-between; margin-top:40px; }
/* Etichetta di sezione: stessa misura di "La nostra storia", "Tutti gli
   Eventi", "Cosa Facciamo" — 28/700 su desktop. */
.eventi-bar .k{ font-size:var(--fs-eyebrow); font-weight:700; text-transform:uppercase; color:var(--black); }
.arrows{ display:flex; align-items:center; gap:16px; }
.arrows button{
  padding:10px; background:none; cursor:pointer; display:flex;
  border:1px solid var(--black-25); color:var(--black);
  transition:opacity .18s ease-out, border-color .18s ease-out;
}
.arrows .ico{ width:20px; height:20px; }
.arrows button:first-child .ico{ transform:rotate(180deg); }
.arrows button[disabled]{ opacity:.28; cursor:default; pointer-events:none; }
.ev-viewport{ overflow:hidden; margin-top:32px; }
.ev-track{ display:flex; gap:30px; transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.ev{ display:flex; flex-direction:column; gap:20px; flex:0 0 auto; width:70%; }
.ev-img{ aspect-ratio:370/268; background:var(--n300); width:100%; object-fit:cover; }
/* Evento ancora senza foto: stesso ingombro, fondo neutro. */
.ev-img.senza-foto{ display:block; }
.ev-meta{ display:flex; flex-direction:column; gap:4px; }
.ev-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.ev-top h3{ font-size:var(--fs-body); font-weight:700; }
/* Aboreto e non Cormorant, come le date delle schede in pagina Eventi: le
   cifre oldstyle del corpo del testo, accanto al titolo, sembravano di un
   altro corpo. Il peso torna a 400 perche Aboreto ne ha uno solo. */
.ev-top time{
  font-family:var(--display); font-size:calc(var(--fs-ui) * .86); font-weight:400;
  letter-spacing:.02em; text-transform:uppercase; color:var(--n700);
}
/* Titolo su due righe fisse: senza descrizione le schede restano
   tutte della stessa altezza. */
.ev-top h3{ line-height:1.15; min-height:calc(2 * 1.15em); }
.ev-body{ display:flex; flex-direction:column; gap:24px; }
/* Descrizione della scheda evento: stessa misura della pagina Eventi. */
.ev-body p{ font-size:clamp(16px, 1.323vw, 20px); font-weight:400; line-height:1.4; color:var(--n700); }
.ev-link{
  display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs);
  font-weight:700; text-transform:uppercase; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color .18s ease-out;
}
.eventi-vline,.eventi-hline,.eventi-dot{ display:none; }
.eventi-foot{ margin-top:32px; }
/* La freccia accompagna il link solo su telefono: da desktop "I nostri
   eventi" resta sottolineato e basta, come tutti gli altri u-link. */
@media (min-width:1024px){ .eventi-foot .u-link .ico{ display:none; } }

/* ---- Telefono: sezioni Eventi e Contatti ---- */
@media (max-width:1023.98px){
  /* Il pallino si appoggia sopra la N di "Get In", non più all'angolo della
     sezione. La riga prende la larghezza del proprio testo, così il suo
     bordo destro coincide con l'ultima lettera; la quota esatta la scrive
     site.js, perché dipende da dove cade quel bordo.
     Il disco resta fuori dalla riga: dentro finirebbe sotto la maschera
     dell'animazione d'ingresso, che lo taglierebbe a metà. */
  .cta-word i:nth-child(2){ width:max-content; }
  .cta-dot{ width:24px; height:24px; }

  /* La scheda che sporge a destra è attenuata sulla propria opacità: niente
     veli sovrapposti, si smorza la scheda stessa. La marca site.js a ogni
     passo del carosello. */
  .ev{ transition:opacity .5s ease; }
  .ev.is-fuori{ opacity:.38; }

  /* La scheda inquadrata va a colori da sola, senza che nessuno la tocchi.
     Col mouse il colore lo accende il passaggio, ma qui il mouse non c'e:
     l'equivalente e "quella che stai guardando". Si sposta con le frecce,
     quindi la prima e a colori all'apertura e a ogni avanzamento tocca
     alla successiva. La classe la mette site.js, nello stesso punto in cui
     calcola is-fuori. */
  .ev.is-inquadrata .ev-shot .ev-img.colore{ opacity:1; }

  /* "I nostri eventi" a sinistra, con la freccia */
  .eventi-foot{ display:flex; justify-content:flex-start; }

  /* ----------------------------------------------------------
     IL PARAGRAFO DELLA HERO
     ----------------------------------------------------------
     Il difetto era la larghezza: 43.8% e una proporzione da desktop, e su
     un telefono da 393px fa una colonna di 172 pixel. Il testo ci finiva
     dentro a forza, dieci righe da tre parole l'una, con una parola sola
     in fondo a meta di quelle.

     Il contenitore ha gia il proprio margine laterale (--gut), quindi al
     paragrafo basta occupare la colonna: margin-left a zero — che e anche
     lo spostamento a sinistra chiesto — e larghezza libera. Il testo passa
     da una decina di righe a quattro o cinque.

     margin-top resta `auto`: e quello che lo appoggia in fondo alla hero.
     Prima sembrava attaccato al titolo perche il blocco, alto dieci righe,
     riempiva tutto lo spazio e all'auto non restava niente da distribuire.
     Accorciato il testo, lo stacco torna da solo, senza numeri fissi che
     poi vanno rincorsi a ogni misura di schermo.

     text-wrap: `balance` pareggia la lunghezza delle righe, ed e quello che
     toglie le vedove — niente piu "opportunita" da sola in fondo. Chrome
     lo applica fino a sei righe, che e esattamente la misura di questo
     testo. Dove `balance` non c'e resta `pretty`, che almeno le vedove le
     evita: le due righe non sono un doppione, la seconda scavalca la prima
     dove il browser la conosce.

     I 12px in basso restano; quelli a sinistra no, li ha assorbiti il
     margine azzerato.
     ---------------------------------------------------------- */
  .hero-body{
    margin-left:0;
    width:auto;
    max-width:none;
    transform:translateY(12px);
    text-wrap:pretty;
    text-wrap:balance;
  }
}
@media (min-width:1024px){
  .eventi{ padding:0; min-height:70.503vw; }
  .eventi-head{ position:absolute; left:5.291%; top:7.505%; width:86.310%; }
  .eventi-lead{ position:absolute; left:27.976%; top:30.863%; width:40.212%; }
  .eventi-bar{ position:absolute; left:27.976%; top:47.749%; width:70.040%; margin:0; }
  .ev-viewport{ position:absolute; left:27.976%; top:53.377%; width:72.024%; margin:0; }
  .ev-track{ gap:1.984vw; }
  .ev{ width:19.841vw; }
  .eventi-foot{ position:absolute; left:5.291%; top:75.328%; margin:0; }
  .eventi-vline{ display:block; position:absolute; left:17.593%; top:71.764%; width:0; height:25.985%; border-left:1px solid var(--black-25); }
  .eventi-hline{ display:block; position:absolute; left:1.984%; top:78.518%; width:18.320%; height:0; border-top:1px solid var(--black-25); }
  .eventi-dot{ display:block; position:absolute; left:18.254%; top:75.704%; width:20px; height:20px; border-radius:999px; background:var(--burgundy-600); }
}

/* =========================================================
   8 — STATEMENT — citazione + immagine  (284:1201)
   Frame 1512×977. Sostituisce il vecchio blocco "Orizzonti":
   niente più pinning né marquee, è un blocco statico.
   ========================================================= */
.stmt{ position:relative; overflow:hidden; background:var(--white); padding:64px var(--gut); }
/* 52px sul frame da 1512, con un minimo leggibile su mobile */
.stmt-quote{
  font-size:clamp(26px, 3.439vw, 52px); font-style:italic; font-weight:400;
  line-height:normal; color:var(--black);
}
/* Non a tutta larghezza: resta il rientro di sinistra della pagina e
   l'immagine arriva fino al bordo destro, come nel resto del sito. */
.stmt-fig{ margin:40px calc(var(--gut) * -1) 0 0; }
.stmt-fig img{ display:block; width:100%; aspect-ratio:761/321; object-fit:cover; }

@media (min-width:1024px){
  /* Coordinate del frame: quota 977/1512 di altezza, il resto in % di 1512
     così il blocco si scala con la finestra come le altre sezioni. */
  .stmt{ padding:0; min-height:64.616vw; }
  .stmt-quote{
    position:absolute; left:12.037%; top:14.153vw; width:75.860%;   /* 182 · 214 · 1147 */
  }
  .stmt-fig{
    position:absolute; left:44.246%; top:29.101vw;                   /* 669 · 440 */
    width:50.331%; margin:0;                                         /* 761 */
  }
  .stmt-fig img{ height:21.230vw; aspect-ratio:auto; }               /* 321 */
}

/* =========================================================
   9 — CTA & CONTATTI (775)
   ========================================================= */
.cta{ background:var(--black); color:var(--white); padding:80px var(--edge); position:relative; }
.cta-word{ position:relative; }
.cta-word i{
  display:block; font-style:normal; font-family:var(--display);
  font-size:var(--fs-xl); text-transform:uppercase; line-height:calc(181/184);
}
.cta-word i:nth-child(1){ margin-left:0.272em; }
.cta-word i:nth-child(2){ margin-left:0.527em; }
.cta-word i:nth-child(3){ margin-left:0; }
/* Su telefono il pallino stava all'angolo in alto a destra, staccato da
   tutto: va accanto alla scritta, appena sopra la sua ultima riga. */
.cta-dot{
  position:absolute; left:0; top:0; width:24px; height:24px;
  border-radius:999px; background:var(--burgundy-600);
}
.cta-form{ margin-top:48px; display:flex; flex-direction:column; gap:32px; }
/* Stesso pulsante del modulo Contatti, ribaltato per il fondo nero: qui la
   sola freccia in alto a destra non bastava a dire "invia". Da desktop resta
   la freccia dell'export e il pulsante non serve. */
.cta-submit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:59px; padding:20px 10px; border:0; cursor:pointer;
  background:var(--white); color:var(--black);
  font-family:var(--body); font-size:var(--fs-azione); font-weight:500; text-transform:uppercase;
  transition:opacity var(--hover-fx);
}
.cta-submit:hover{ opacity:.82; }
.cta-submit .ico{ width:1em; height:1em; }
/* Il pulsante bianco vale a ogni larghezza, desktop compreso: la freccia
   sciolta in alto a destra diceva "invia" solo a chi la trovava, e teneva
   due comandi d'invio diversi fra desktop e telefono. */
.fields{ display:flex; flex-direction:column; gap:40px; }
/* La riga con Email e Telefono aveva il gap dichiarato solo nel blocco
   desktop: su telefono i due campi si impilavano attaccati, mentre tutti
   gli altri hanno 40px. Qui la riga è una colonna con lo stesso passo. */
.form-row{ display:flex; flex-direction:column; gap:40px; }
.field{
  padding:20px 10px; border-bottom:1px solid var(--n600);
  display:flex; align-items:center; gap:10px;
  transition:border-color var(--hover-fx);
}
.field.tall{ height:134px; align-items:flex-start; }
/* Niente text-transform sul valore: si scrive come si digita, il maiuscolo
   lo decide chi compila. Il maiuscoletto resta solo sul segnaposto, che è
   grafica dell'interfaccia. */
.field input,.field textarea{
  width:100%; border:0; background:none; font-family:var(--body);
  font-size:var(--fs-campo); font-weight:500; text-transform:none;
  color:var(--white); caret-color:var(--white); padding:0; resize:none;
}
/* Segnaposto più spento del testo digitato: scrivendo si vede "FULL NAME*"
   sparire e restare il valore a pieno contrasto. */
.field input::placeholder,.field textarea::placeholder{
  color:var(--n400); opacity:1; text-transform:uppercase;
}
.field input:focus,.field textarea:focus{ outline:none; }
.field:focus-within{ border-color:var(--white); }
.field.is-filled{ border-color:var(--n200); }
.consent{ display:flex; align-items:flex-start; gap:16px; }
.consent input{
  width:24px; height:24px; flex:0 0 auto; margin:0; border-radius:2px;
  border:1px solid var(--n600); appearance:none; background:none; cursor:pointer;
  display:grid; place-content:center;
  transition:border-color var(--hover-fx);
}
/* Spuntato: pallino pieno che entra in scala, non il quadrato tutto bianco. */
.consent input::before{
  content:""; width:10px; height:10px; border-radius:999px; background:var(--white);
  transform:scale(0); transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.consent input:checked{ border-color:var(--white); }
.consent input:checked::before{ transform:scale(1); }
.consent input:hover{ border-color:var(--n200); }
.consent input:focus-visible{ outline:1px solid var(--white); outline-offset:3px; }
.consent span{ font-size:var(--fs-xs); font-weight:400; line-height:20px; color:var(--n400); max-width:435px; }
/* Sottolineatura minimal */
.consent u{
  text-decoration:underline; text-decoration-thickness:.5px;
  text-underline-offset:2px; text-decoration-color:currentColor;
}
@media (min-width:1024px){
  .cta{ padding:0; }
  /* Sullo stesso filo alto del modulo (19,871%) e con le tre righe più
     distanziate: l'interlinea era 181 su un corpo di 184, cioè più stretta
     del corpo stesso, e le parole si toccavano. Con 1,109 il blocco misura
     quanto il modulo accanto, così i due si aprono e si chiudono insieme. */
  .cta-word{ position:absolute; left:1.984%; top:19.871%; }
  .cta-word i{ line-height:1.109; }
  /* Il disco tiene lo stesso appoggio sulla prima riga di prima: scende con
     lei, restando a un quinto della sua altezza. */
  .cta-dot{ left:43.981%; right:auto; top:24.222%; width:73px; height:73px; }
  /* La sezione tiene un minimo in px oltre a quello in vw: con Email e
     Telefono in colonna il modulo cresce di 99px e con la sola quota in vw
     la freccia d'invio finiva sotto il bordo della sezione. */
  .cta{ min-height:max(51.256vw, 900px); }
  .cta-form{ position:absolute; left:56.019%; top:19.871%; width:41.997%; margin:0; }
  /* Campi più raccolti e area messaggio un po' più bassa: il modulo deve
     chiudersi sul filo dell'ultima riga di "Let's get in touch". Lo scarto
     che resta lo pareggia site.js sul passo dei campi, perché la scritta
     scala col vw mentre le altezze dei campi sono fisse. */
  .fields{ gap:32px; }
  .field.tall{ height:120px; }
}

/* =========================================================
   9b — FORM: stati dei campi
   Vale per il form della home (.cta-form), quello dei Contatti
   (.ct-form) e la newsletter del footer (.ftr-mail), presente su
   tutte le pagine. Il messaggio d'errore è in posizione assoluta
   sotto il filetto: comparendo non sposta nulla, e i campi
   affiancati (Email / Telephone) restano allineati.
   ========================================================= */
.cta-form, .ftr-mail{ --col-errore:var(--errore-chiaro); }   /* fondo nero */
.ct-form{ --col-errore:var(--errore); }                      /* fondo chiaro */

.field, .ct-field, .ftr-mail, .consent, .ct-consent{ position:relative; }

.campo-errore{
  position:absolute; left:10px; top:100%; margin-top:6px;
  font-size:var(--fs-xs); font-weight:500; line-height:1.2;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity var(--hover-fx), transform var(--hover-fx);
}
/* Il colore sta qui e non sulla regola base: dentro il consenso c'è già
   `.consent span{ color:n400 }`, che a parità di peso vincerebbe e
   lascerebbe grigio il messaggio d'errore. */
.has-error > .campo-errore{ opacity:1; transform:none; color:var(--col-errore, var(--errore)); }

/* Campo in errore: il filetto diventa rosso e ci resta finché non si corregge. */
.field.has-error, .ct-field.has-error, .ftr-mail.has-error{ border-bottom-color:var(--col-errore); }
.field.has-error:focus-within, .ct-field.has-error:focus-within,
.ftr-mail.has-error:focus-within{ border-bottom-color:var(--col-errore); }
.consent.has-error input, .ct-consent.has-error input{ border-color:var(--col-errore); }
.consent.has-error .campo-errore, .ct-consent.has-error .campo-errore{ left:40px; }

/* Riga d'esito: la stessa per attesa, conferma ed errore. */
.form-esito{
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.02em;
  text-transform:uppercase; color:var(--white-65);
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--hover-fx), transform var(--hover-fx);
}
.form-esito.is-on{ opacity:1; transform:none; }
.form-esito.is-errore{ color:var(--col-errore, var(--errore)); }

/* ---- Caricamento ----
   Mentre l'invio è in corso il modulo si spegne e non accetta un secondo
   invio. Il cursore d'attesa vale su tutta l'area, anche sui campi
   disabilitati, che altrimenti non ne mostrerebbero nessuno. */
.is-invio{ cursor:progress; }
.is-invio input, .is-invio textarea, .is-invio button{ cursor:progress; }
.is-invio input, .is-invio textarea{ opacity:.55; }
.is-invio button{ opacity:.5; }
/* La freccia della newsletter e quella della home girano su sé stesse:
   basta a dire che sta lavorando, senza aggiungere elementi al markup. */
.is-invio button .ico{ animation:invio-gira 1s linear infinite; }
@keyframes invio-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .is-invio button .ico{ animation:none; }
}
.ftr-mail .form-esito{ position:absolute; left:10px; top:100%; margin-top:6px; }
/* Contatti: il pulsante chiude il form e la sezione finisce subito sotto, quindi
   in coda la conferma sarebbe caduta dentro la sezione successiva. Va nello
   stacco di 48px sopra il pulsante (59px = altezza fissa di .ct-submit):
   così si legge e non sposta nulla. */
.ct-form{ position:relative; }
.ct-form .form-esito{ position:absolute; left:0; bottom:74px; margin:0; color:var(--n700); }
/* Dopo la riga qui sopra, altrimenti il grigio dei Contatti vincerebbe
   sull'errore per ordine di dichiarazione. */
.form-esito.is-errore,
.ct-form .form-esito.is-errore{ color:var(--col-errore, var(--errore)); }

/* =========================================================
   10 — FOOTER (1160)
   ========================================================= */
.ftr{ background:var(--black); color:var(--white); padding:40px var(--edge); position:relative; }
/* .ftr-rule rimosso su richiesta: il filetto sopra "Iscriviti" non deve esserci */
.ftr-news h2{ font-family:var(--display); font-size:var(--fs-news); font-weight:400; text-transform:uppercase; line-height:calc(90/64); }
.ftr-newsright{ margin-top:40px; display:flex; flex-direction:column; gap:49px; }
/* Gerarchia del footer: bianco pieno per le informazioni, bianco al 65% per
   etichette e contenuti di servizio. Niente --n700 qui: sul nero non regge
   il contrasto. */
.ftr-newsright .desc{ font-size:var(--fs-body); font-weight:400; color:var(--white-65); }
.ftr-mail{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  height:59px; padding:20px 10px; border-bottom:1px solid var(--n600);
}
.ftr-mail input{
  flex:1 1 auto; min-width:0; border:0; background:none; padding:0;
  font-family:var(--body); font-size:var(--fs-campo); font-weight:500;
  text-transform:none; color:var(--white); caret-color:var(--white);
}
.ftr-mail input::placeholder{ color:var(--n400); opacity:1; text-transform:uppercase; }
.ftr-mail input:focus{ outline:none; }
.ftr-mail{ transition:border-color var(--hover-fx); }
.ftr-mail:focus-within{ border-bottom-color:var(--white); }
.ftr-mail button{ background:none; border:0; padding:0; cursor:pointer; display:flex; color:var(--white); }
.ftr-mail .ico{ width:29.5px; height:29.5px; stroke-width:1; }
.ftr-claim{ position:relative; margin-top:64px; max-width:431px; font-size:var(--fs-eyebrow); font-weight:700; padding-right:44px; }
.ftr-claim::after{ content:""; position:absolute; right:20px; top:-23px; width:30px; height:30px; border-radius:999px; background:var(--burgundy-600); }
.ftr-cols{ display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; margin-top:48px; }
.ftr-cols h4{ font-size:var(--fs-eyebrow); font-weight:700; color:var(--white-65); margin:0 0 12px; }
.ftr-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.ftr-cols li{ font-size:var(--fs-ui); font-weight:600; color:var(--white); }
/* Etichette che introducono il dato — "Tel:", "WA:", "Lunedì–Venerdì:" —
   attenuate, così l'occhio va sul recapito e non sull'etichetta. */
.ftr-cols .et{ color:var(--white-65); }

.ftr-cols li b{ font-weight:700; }
.legal{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.legal .pair{ display:flex; align-items:center; gap:12px; }
.legal a{
  font-size:var(--fs-ui); font-weight:600; text-decoration:underline;
  text-decoration-thickness:.5px; text-underline-offset:2px;
}

.ftr-social{ display:flex; gap:8px; align-items:center; }
.ftr-social img{ width:24px; height:24px; }
/* ---- Hover del footer ----
   Un solo comportamento per tutti i link, recapiti e voci di servizio:
   dal bianco al 65% al bianco pieno, su --hover-fx (.18s ease-out, i 180ms
   richiesti). Nessuna tinta d'accento, nessuno spostamento, nessuna
   sottolineatura aggiunta: cambia solo la luminosità del testo. */
.ftr a,
.ftr button{ color:var(--white); transition:color var(--hover-fx); }
.ftr-cols ul a,
.legal a{ color:var(--white-65); }
.ftr-cols ul a:hover,
.legal a:hover{ color:var(--white); }

/* Le icone social sono <img> con fill #FAF8F2, quindi non ereditano `color`:
   l'opacità dà la stessa resa: .65 = --white-65, 1 = --white. */
.ftr-social img{ opacity:.65; transition:opacity var(--hover-fx); }
.ftr-social a:hover img{ opacity:1; }

/* ---- Le tre icone, sulla misura del frame di riferimento (88×24) ----
   Tre riquadri da 24×24 con 8px di stacco. A quella misura i disegni
   cadono già come nel frame: "in" 17.5×17.5, il quadrato 18×18, la "f"
   11×18, tutti centrati. L'unico scostamento è verticale: nella nostra
   facebook.svg il disegno sta 1px più in alto (centro a 11 invece di 12),
   e lo recupero con una traslazione.
   Le correzioni passano solo da `transform`, che non tocca il layout: con un
   margine negativo il contenitore <a> si stringeva e il `max-width:100%`
   dell'immagine schiacciava la "f" in orizzontale (18×24 invece di 24×24).
   Le SVG hanno preserveAspectRatio="none", quindi qualunque riquadro non
   quadrato le deforma: da qui anche flex:0 0 auto e max-width:none. */
.ftr-social img,
.ct-social img{ flex:0 0 auto; max-width:none; }
.ftr-social img[src*="facebook"],
.ct-social img[src*="facebook"]{ transform:translateY(1px); }

/* La freccia della newsletter non cambia tinta: si sposta appena. */
.ftr-mail button{ transition:transform var(--hover-fx); }
.ftr-mail button:hover{ color:var(--white); transform:translateX(4px); }

/* Il corpo è già 19.765vw, cioè i 77.59px del frame da 393. Qui si aggiunge
   il ritaglio: riquadro più basso dei glifi (67 su 77.59) così la firma si
   interrompe in basso, come nel footer da desktop. */
/* 80 e non 56: la firma stava troppo attaccata al blocco dei contatti. */
.ftr-wordmark{ overflow:hidden; margin-top:80px; height:17.048vw; }
.ftr-wordmark span{
  /* Corpo del Figma (298.85px). Nessun taglio laterale: il testo è largo
     quanto il box. line-height:normal fa scendere i glifi oltre i 242px
     del contenitore, che li taglia sul fondo — l'overflow è verticale. */
  display:block; width:100%;
  font-family:var(--display); font-size:19.765vw;
  line-height:normal; text-transform:uppercase; white-space:nowrap;
}
.ftr-copy{ margin-top:27px; text-align:center; font-size:var(--fs-body); font-weight:400; color:var(--white-65); }
/* Bianco pieno solo se il copyright diventa un collegamento */
.ftr-copy a{ color:var(--white); }
@media (min-width:1024px){
  .ftr{ padding:0; min-height:76.720vw; }
  .ftr-news{ position:absolute; left:5.291%; top:6.897%; }
  .ftr-newsright{ position:absolute; left:50%; top:7.500%; width:44.709%; margin:0; }
  /* y=554 invece di 721: richiesta esplicita, allineato alla riga
     "Informazioni Aziendali". Scostamento voluto dal Figma. */
  .ftr-claim{ position:absolute; left:5.291%; top:47.759%; width:28.505%; max-width:none; margin:0; }
  .ftr-cols{ position:absolute; left:50%; top:34.138%; width:48.016%; gap:32px 60px; margin:0; }
  .ftr-wordmark{ position:absolute; left:1.984%; top:71.466%; width:96.032%; height:20.862%; margin:0; }
  .ftr-copy{ position:absolute; left:1.984%; top:94.655%; width:96.032%; margin:0; }
}

/* =========================================================
   FOOTER su telefono e tablet in verticale — frame 132:575
   Le misure del frame da 393: claim su misura corta col pallino accanto,
   recapiti a 16, icone social da 20 e la firma che sborda di 11px a sinistra
   prima di essere tagliata dal riquadro.
   Il filetto sopra "Iscriviti" resta fuori: era stato tolto su richiesta.
   ========================================================= */
@media (max-width:1023.98px){
  /* 36px su due righe con l'interlinea naturale: con 90/64 il blocco veniva
     19px più alto del frame e spingeva giù tutto il resto. */
  .ftr-news h2{ line-height:normal; }

  /* Fra la descrizione e il campo il frame lascia 8px: i 49 del desktop
     aprivano un vuoto che non c'entra con questa impaginazione. */
  .ftr-newsright{ gap:8px; }

  /* Freccia e segnaposto del campo newsletter come nel frame */
  .ftr-mail .ico{ width:16px; height:16px; }
  .ftr-mail input::placeholder{ font-size:14px; color:var(--n200); }

  /* Claim su 268 dei 361 di contenuto, col pallino appena a destra e
     allineato in alto: prima era largo quanto la pagina e il disco stava
     sopra la riga, staccato. */
  .ftr-claim{ width:74.238%; max-width:none; padding-right:0; }
  .ftr-claim::after{
    left:calc(100% + 1px); right:auto; top:0;
    width:clamp(15px, 3.817vw, 24px); height:clamp(15px, 3.817vw, 24px);
    background:var(--burgundy-500);
  }

  /* Recapiti a 16 e non a 14, colonne sui fili del frame (16 e 204) e
     con lo stacco giusto dal claim e fra le due file. */
  .ftr-cols{ margin-top:80px; gap:52px 16px; }
  .ftr-cols li,
  .legal a{ font-size:16px; }

  /* Tre icone da 20 con 4px di stacco */
  .ftr-social{ gap:4px; }
  .ftr-social img{ width:20px; height:20px; }

  /* Firma larga quanto il contenuto, senza sbordare né a sinistra né a
     destra — stessa regola della firma del menu — e abbassata di un filo
     dentro il riquadro che la taglia. Il copyright le sta sotto a 13px. */
  .ftr-wordmark span{
    margin-left:0; margin-top:.08em;
    font-size:calc((100vw - var(--gut) * 2) / 4.87);
  }
  .ftr-copy{ margin-top:13px; font-size:14px; }
}

/* =========================================================
   11 — INGRESSI IN SCORRIMENTO
   I titoli si formano quando entrano in campo: dissolvenza, risalita e
   maschera che li fa emergere dal basso, una riga dopo l'altra.
   Lo stato iniziale vale solo sotto .js-anim, classe che mette site.js:
   senza JS, o con prefers-reduced-motion, non si nasconde nulla.
   ========================================================= */
:root{
  --an-durata:1400ms;
  --an-curva:cubic-bezier(.22,1,.36,1);
  --an-salita:40px;
}

/* Maschera di riga: la riga esce da sotto il proprio bordo */
.an-riga{ display:block; overflow:hidden; }
.an-riga-in{
  display:block; will-change:transform;
  opacity:0; transform:translateY(var(--an-salita));
  transition:opacity var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms),
             transform var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms);
}
.is-visto .an-riga-in{ opacity:1; transform:none; }
/* A corsa finita la maschera non serve più e viene tolta: così nulla può
   tagliare discendenti o accenti nel rendering statico. */
.an-riga.an-finita{ overflow:visible; }

/* Solo dissolvenza, nessuno spostamento: per i testi di appoggio, dove il
   movimento sarebbe rumore accanto al titolo che si sta già formando. */
.js-anim [data-anim="dissolvenza"]{
  opacity:0;
  transition:opacity var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms);
}
.js-anim [data-anim="dissolvenza"].is-visto{ opacity:1; }

/* Blocchi interi: stessa dissolvenza e stessa risalita, senza maschera */
.js-anim [data-anim="blocco"]{
  opacity:0; transform:translateY(var(--an-salita));
  transition:opacity var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms),
             transform var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms);
}
.js-anim [data-anim="blocco"].is-visto{ opacity:1; transform:none; }

/* Immagine dello statement: entra dopo il testo, con un avvicinamento appena
   percettibile. */
.js-anim [data-anim="figura"]{
  opacity:0; transform:translateY(32px) scale(.97);
  transition:opacity var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms),
             transform var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms);
}
.js-anim [data-anim="figura"].is-visto{ opacity:1; transform:none; }

/* Wordmark del footer: sale da sotto il proprio riquadro, che ha già
   overflow:hidden. Nessuna scala, solo risalita piena e dissolvenza. */
.js-anim [data-anim="wordmark"] > span{
  opacity:0; transform:translateY(100%);
  transition:opacity var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms),
             transform var(--an-durata) var(--an-curva) var(--an-ritardo, 0ms);
}
.js-anim [data-anim="wordmark"].is-visto > span{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .an-riga{ overflow:visible; }
  .an-riga-in,
  [data-anim="dissolvenza"],
  [data-anim="blocco"],
  [data-anim="figura"],
  [data-anim="wordmark"] > span{
    opacity:1; transform:none; transition:none;
  }
}

/* =========================================================
   12 — TABLET E DISPOSITIVI TOUCH
   Il disegno desktop poggia su blocchi in posizione assoluta con `top` in
   percentuale di sezioni alte in vw. A 1512 tutto combacia; a 1024 le quote
   si riducono in proporzione ma il contenuto (testi, loghi, schede) no, e
   allora si accavalla o viene tagliato. Qui quelle sezioni tornano in
   flusso, così l'altezza la detta il contenuto.
   ========================================================= */

/* ---- Servizi: su touch un carosello, non lo scorrimento ancorato ----
   La sezione ancorata chiedeva nove schermate e su iPad non rispondeva.
   Sui dispositivi senza mouse le quattro voci si sfogliano di lato, con le
   frecce ai bordi come il carosello dello showroom. */
.svc-arrows{ display:none; }
@media (hover:none){
  .svc-scroller{ height:auto; margin-bottom:0; }
  .svc-stage{
    position:relative; top:auto; height:auto; padding:0;
    display:flex; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .svc-stage::-webkit-scrollbar{ display:none; }
  /* Composizione del desktop dentro una schermata sola: immagine a tutta
     slide, numero in cima a sinistra, testo appoggiato in fondo. */
  .svc-slide{
    position:relative; inset:auto; flex:0 0 100%; scroll-snap-align:start;
    min-height:74vh; display:flex; flex-direction:column; justify-content:flex-end;
    opacity:1; visibility:visible; transition:none;
  }
  .svc-body{
    position:relative; left:auto; bottom:auto; top:auto;
    width:auto; padding:56px var(--gut) 88px; gap:24px;
  }
  .svc-slide[data-i="0"] .svc-txt p,
  .svc-slide[data-i="1"] .svc-txt p,
  .svc-slide[data-i="2"] .svc-txt p,
  .svc-slide[data-i="3"] .svc-txt p{ width:auto; max-width:56ch; }
  .svc-prog{ display:none; }
  .svc-num{ position:absolute; left:var(--gut); top:24px; font-size:clamp(82px, 11vw, 120px); }

  /* Frecce ai bordi, sopra l'immagine: su fondo scuro invertono i colori
     rispetto a quelle degli eventi. */
  .svc-arrows{ display:block; }
  .svc-arrows button{
    position:absolute; z-index:4; top:50%; transform:translateY(-50%);
    border-color:var(--white-15); color:var(--white);
    background:rgba(4,3,1,.38); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .svc-arrows button.prev{ left:12px; }
  .svc-arrows button.prev .ico{ transform:rotate(180deg); }
  .svc-arrows button.next{ right:12px; }
  .svc-arrows button[disabled]{ opacity:.3; pointer-events:none; }
}

@media (min-width:1024px) and (max-width:1279.98px){
  /* --- Hero: su un ritratto da 1366 la schermata intera è troppa ---
     Il desktop fissa `height:100vh` su .hero e .hero-in, quindi non basta
     ritoccare la min-height: va tolta l'altezza fissa. La coda di 26vh
     lasciava inoltre 355px vuoti sotto il testo. */
  .hero, .hero-in{ min-height:min(100dvh, 86vw); height:auto; }
  /* Coda in fondo più alta: il blocco titolo+descrizione è ancorato al fondo
     del contenuto (margin-top:auto sull'intestazione), quindi si alza solo
     riservando più spazio sotto. Con 12vh il testo cadeva al 71-81%
     dell'altezza contro il 59-74% del desktop. In vw e non in vh perché la
     hero è alta 86vw, non quanto la finestra. */
  .hero-in{ padding:calc(var(--header-h) + 5vh) var(--gut) 22vw; }

  /* --- Brand: lo slider era ritagliato ---
     .marquee-wrap aveva altezza in % di .brand: a 1024 le due corsie
     scendevano a 75px mentre le celle dei loghi ne misurano 124, e
     l'overflow:hidden tagliava i marchi a metà. Ora la sezione è in flusso
     e le corsie sono alte quanto il loro contenuto. */
  .brand{ position:relative; padding:64px 0; min-height:0; }
  .brand-head{ position:static; width:auto; padding-inline:var(--gut); }
  .brand-side{
    position:static; width:min(62%, 620px); margin:24px 0 0;
    padding-inline:var(--gut);
  }
  .marquee-wrap{ position:static; width:auto; height:auto; margin:56px var(--edge) 0; }

  /* --- Metodo: più aria dal filetto di costruzione a destra --- */
  .metodo{ padding:56px var(--gut) 72px; }
  .metodo-head{ width:auto; }
  .metodo-side{ width:min(52%, 520px); margin:32px 0 0 auto; }

  /* --- Eventi: impaginazione desktop, solo le frecce staccate dalle schede.
     I due blocchi hanno `top` in percentuale della sezione: a 1024 finivano
     a 2px l'uno dall'altro. Si abbassa il carosello, non si smonta nulla. */
  .ev-viewport{ top:57.4%; }

  /* --- Eventi: "I nostri eventi" e il pallino stavano addosso alle linee
     di costruzione. Il testo, più grande in proporzione rispetto al 1512,
     arrivava a 2px dal filetto verticale e appoggiava sull'orizzontale;
     il pallino stava esattamente sull'incrocio. Qui le due linee si
     spostano a dare respiro e il disco si stacca da entrambe. */
  /* Quota dell'incrocio, scesa da 82,4% a 90,5% dell'altezza della sezione:
     resta lo stesso filetto verticale, ma la traversa con la scritta e il
     disco cade più in basso e la coda vuota sotto si accorcia. Sta su
     .eventi perché la leggono in tre: traversa, scritta e disco. */
  .eventi{ --linea-y:90.500%; }
  .eventi-vline{ left:23.500%; }
  .eventi-hline{ width:calc(21.516% + 44px); top:var(--linea-y); }
  /* "I nostri eventi" scende nell'angolo delle due linee di costruzione:
     il bordo destro a 12px dal filetto verticale e il fondo a 12px da
     quello orizzontale. Ancorato a destra e in basso e non più a sinistra,
     altrimenti la distanza dal filetto cambierebbe con la larghezza del
     testo lungo tutta la fascia. */
  .eventi-foot{
    left:auto; right:calc(76.500% + 12px);
    top:auto; bottom:calc(100% - var(--linea-y) + 12px);
    justify-content:flex-end;
  }
  /* Il disco tiene le stesse due distanze dall'altra parte dell'incrocio.
     Scarti in px e non in %: in percentuale si riavvicinavano al filetto
     quando la sezione si accorcia. */
  .eventi-dot{
    left:calc(23.500% + 13px); top:calc(var(--linea-y) - 28px);
    width:16px; height:16px;
  }

  /* Stesso disco anche nel blocco "Scopri chi siamo": stava appoggiato
     sull'incrocio delle sue due linee (6px dal filetto verticale e 0 da
     quello orizzontale). Qui prende le stesse misure e gli stessi 12px. */
  .about-dot{
    left:calc(41.997% + 13px); top:calc(35.700% - 28px);
    width:16px; height:16px;
  }

  /* --- Contatti: modulo più raccolto e sezione che lo contiene tutto ---
     Con i passi del desktop il form misurava 599px dentro una sezione di
     676 e il pulsante "Invia richiesta" finiva fuori, tagliato. Qui i campi
     si stringono e la sezione si alza quanto basta a lasciare aria sotto. */
  /* Quota fissa e non in vw: l'altezza del modulo non cambia lungo la
     fascia, mentre una misura in vw faceva crescere solo il vuoto sotto
     (a 1279 restavano 278px di nero). */
  .cta{ min-height:750px; }
  .cta-form{ gap:24px; }
  .fields{ gap:28px; }
  .form-row{ gap:28px; }
  .field{ padding:14px 10px; }
  /* Più bassa che sul telefono: insieme al passo fra i campi serve a far
     chiudere il modulo sul filo dell'ultima riga di "Let's get in touch". */
  .field.tall{ height:88px; }
  .consent{ gap:12px; }
}

/* ---------- Note ---------- */
.note{ display:none; }
body.annotate .note{
  display:block; border-left:3px solid var(--burgundy-600);
  background:rgba(100,28,31,.09); color:var(--burgundy-600);
  padding:12px 14px; margin:16px 0; font-size:15px; line-height:1.45; max-width:64ch;
  font-weight:400; text-transform:none; position:relative; z-index:6;
}
body.annotate .note.ok{ border-color:#2c6e49; background:rgba(44,110,73,.09); color:#2c6e49; }
body.annotate .note b{ text-transform:uppercase; font-size:13px; }
body.annotate .cta .note, body.annotate .ftr .note,
body.annotate .svc-body .note, body.annotate .hero .note{
  background:rgba(250,248,242,.14); border-color:var(--white); color:var(--white);
}
#annotoggle{
  position:fixed; right:16px; bottom:16px; z-index:200;
  background:var(--black); color:var(--white); border:0; cursor:pointer;
  font-family:var(--body); font-size:15px; font-weight:700; text-transform:uppercase;
  padding:12px 20px; border-radius:999px; box-shadow:0 6px 24px rgba(0,0,0,.3);
}
body.annotate #annotoggle{ background:var(--burgundy-600); }

/* =========================================================
   12 — SCOSTAMENTI PER LINGUA
   L'italiano è la misura su cui è disegnato il sito. Cambiando lingua i
   testi si allungano e in tre punti la composizione non regge più: il
   blocco "About us" della home, le voci del menu e la coppia di link
   legali nel footer.
   Qui stanno solo quelle differenze, agganciate a `html[data-lingua="…"]`
   che scrive i18n.js. In italiano nessun selettore fa presa e gli scarti
   valgono 0: il layout approvato non si muove di un pixel.
   ========================================================= */

/* ---- 2 · About us: linee di costruzione e foto più in basso ----
   "Piciemme rappresenta brand internazionali…" sta su tre righe in
   italiano e su quattro in tutte le altre lingue. Filetti, disco e foto
   sono a quote fisse tarate sulle tre righe: con la quarta il testo
   arriva a 6px dal disco e sembra appoggiato sopra.
   Qui scendono tutti insieme di una riga esatta — l'interlinea del
   blocco, 75/72 del corpo — e lo stacco torna quello dell'italiano.
   Il filetto verticale scende con loro ma si accorcia della stessa
   quantità: il piede resta dov'è e non sfonda la sezione. */
html[data-lingua="en"],
html[data-lingua="fr"],
html[data-lingua="es"],
html[data-lingua="de"]{ --about-giu:calc(var(--fs-h1) * 75 / 72); }

@media (min-width:1024px){
  .about-hline{ top:calc(35.700% + var(--about-giu, 0px)); }
  .about-vline{
    top:calc(30.934% + var(--about-giu, 0px));
    height:calc(66.440% - var(--about-giu, 0px));
  }
  .about-dot{ top:calc(32.782% + var(--about-giu, 0px)); }
  .about-fig{ top:calc(38.424% + var(--about-giu, 0px)); }
}
/* Nella fascia iPad Pro il disco ha già una quota sua (28px sopra il
   filetto, in px e non in %): lo scarto di lingua ci si somma. */
@media (min-width:1024px) and (max-width:1279.98px){
  .about-dot{ top:calc(35.700% - 28px + var(--about-giu, 0px)); }
}

/* ---- Footer · "Cookie Policy" e "Privacy Policy" su una riga sola ----
   I due link stanno in una riga flex che non va a capo: quando non ci
   stanno si stringono e spezzano la frase a metà ("Cookie / Policy").
   Succedeva in francese, spagnolo e tedesco da 1024 in su, e in tutte le
   lingue sul telefono, dove la colonna misura 165px.
   Due mosse: le etichette non si spezzano più al loro interno, e nelle
   tre lingue lunghe si accorciano alla forma corta che usano i footer di
   quei mercati (Cookies / Confidentialité, Cookies / Privacidad,
   Cookies / Datenschutz). Sotto i 600px il corpo scende con la pagina,
   così anche "Cookie Policy | Privacy Policy" entra nella colonna. */
.legal .pair a{ white-space:nowrap; }
@media (max-width:599.98px){
  .legal a{ font-size:clamp(13px, 3.4vw, 16px); }
}

/* ---- Menu · le cinque voci sempre su tre righe, 2 + 2 + 1 ----
   Le voci vanno a capo da sole dentro un tetto largo sette volte il loro
   corpo: una misura tarata sull'italiano, dove "Eventi, About Us," ci sta
   e "Brand, Servizi, Eventi," no. Con parole più lunghe quel rapporto
   salta: lo spagnolo finiva su quattro righe e in tedesco "Über uns"
   scendeva in fondo insieme a "Kontakt".
   Per ogni lingua servono quindi due misure sue: il corpo delle voci e il
   tetto in cui vanno a capo. Sono scelte perché la coppia più larga entri
   sempre e la terza voce non ci stia mai — così l'andata a capo resta
   2 + 2 + 1 a ogni larghezza. Il tedesco tiene il corpo quasi pieno, lo
   spagnolo lo abbassa: "Quiénes somos," da solo è largo cinque volte il
   corpo e non c'era altro modo di stare su tre righe. */
@media (max-width:1279.98px){
  .menu-rows{ max-width:calc(var(--voce) * var(--voce-k, 7)); }
  html[data-lingua="fr"] .menu-nav{ --voce:clamp(36px, 11vw, 78px);   --voce-k:8.2; }
  html[data-lingua="es"] .menu-nav{ --voce:clamp(34px, 10.1vw, 72px); --voce-k:9;   }
  html[data-lingua="de"] .menu-nav{ --voce:clamp(38px, 12vw, 80px);   --voce-k:7.5; }
}
/* Tablet in orizzontale: qui il corpo è già ridotto per far stare la
   colonna in un pannello basso, e a 72px le tre lingue tornano dentro
   senza altri sconti. Ripetuto con la stessa specificità delle regole di
   lingua qui sopra, altrimenti quelle vincerebbero anche qui. */
@media (min-width:1024px) and (max-width:1279.98px) and (max-height:900px){
  html[data-lingua] .menu-nav{ --voce:clamp(40px, 7.500vw, 72px); }
}
/* Da 1280 in su le voci stanno su due righe fisse, 3 + 2. In spagnolo e
   in tedesco quelle due righe traboccano: qui si sciolgono e le cinque
   voci vanno a capo da sole nella larghezza della colonna, come sotto i
   1280. Lo spagnolo perde un 5% di corpo perché "Eventos, Quiénes somos,"
   entri nei 680px del frame. */
@media (min-width:1280px){
  html[data-lingua="es"] .menu-row,
  html[data-lingua="de"] .menu-row{ display:contents; }
  html[data-lingua="es"] .menu-rows,
  html[data-lingua="de"] .menu-rows{
    flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  }
  html[data-lingua="es"] .menu-link{ font-size:clamp(28px, 5.027vw, 76px); }
}


/* ==========================================================
   MODALE DI CONFERMA
   ----------------------------------------------------------
   Quando l'invio riesce, al posto della riga d'esito compare questa.
   Il motivo non e decorativo: la conferma dei Contatti stava in fondo a
   un modulo lungo, e su mobile finiva sotto il bordo dello schermo —
   l'utente rimandava due volte perche non vedeva di aver gia mandato.
   Una modale la si vede per forza.

   L'errore invece resta sulla riga: la si legge accanto al campo da
   correggere, e una modale costringerebbe a chiuderla per rimettere le
   mani sul modulo.

   z-index 200: sopra .menu, che sta a 150. Se il menu fosse aperto la
   modale deve stargli davanti, non sotto.
   ========================================================== */
.modale{
  position:fixed; inset:0; z-index:200; visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:var(--edge);
  transition:visibility 0s linear .5s;
}
body.modale-aperta .modale{ visibility:visible; transition-delay:0s; }

/* Il velo non e nero pieno: la pagina sotto deve restare riconoscibile,
   perche la modale conferma qualcosa che e appena successo li dietro. */
.modale-velo{
  position:absolute; inset:0; background:rgba(4,3,1,0.62);
  opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1);
}
body.modale-aperta .modale-velo{ opacity:1; }

.modale-pannello{
  position:relative; z-index:1;
  width:min(560px, 100%); box-sizing:border-box;
  background:var(--white); color:var(--black);
  padding:56px 28px 48px; text-align:center;
  /* Contenitore per il titolo: si dimensiona sulla larghezza del
     pannello, non su quella della finestra. Vedi .modale-titolo. */
  container-type:inline-size;
  opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity .5s cubic-bezier(.4,0,.2,1),
             transform 0s linear .5s;
}
body.modale-aperta .modale-pannello{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.33,1,.68,1),
             transform .7s cubic-bezier(.22,1,.36,1);
}

/* --- Chiusura in alto a destra --- */
.modale-x{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; padding:0; border:0; background:none;
  cursor:pointer; color:var(--n400);
  display:flex; align-items:center; justify-content:center;
  transition:color var(--hover-fx);
}
.modale-x:hover{ color:var(--black); }
.modale-x svg{ width:14px; height:14px; }

/* --- Il segno di spunta ---
   Si disegna invece di comparire gia fatto: la conferma cosi arriva come
   un gesto che si compie, non come un'icona che si accende. Tratto
   sottile come i filetti del sito, non un cerchio pieno da notifica. */
.modale-segno{ display:block; width:56px; height:56px; margin:0 auto 28px; }
.modale-segno circle, .modale-segno path{
  fill:none; stroke:var(--burgundy-600);
  stroke-width:1; stroke-linecap:round; stroke-linejoin:round;
}
.modale-segno circle{ stroke-dasharray:170; stroke-dashoffset:170; }
.modale-segno path{ stroke-width:1.4; stroke-dasharray:36; stroke-dashoffset:36; }
body.modale-aperta .modale-segno circle{
  animation:modale-traccia .85s cubic-bezier(.22,1,.36,1) .12s forwards;
}
body.modale-aperta .modale-segno path{
  animation:modale-traccia .42s cubic-bezier(.22,1,.36,1) .62s forwards;
}
@keyframes modale-traccia{ to{ stroke-dashoffset:0; } }

/* --- Testi --- */
.modale-occhiello{
  font-family:var(--body); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--n400);
  margin:0 0 14px;
}
/* Il titolo sta su una riga in tutte e cinque le lingue, e la misura la
   detta la piu lunga: "SUSCRIPCIÓN REGISTRADA" in Aboreto occupa 1353px
   ogni 100px di corpo (misurato, non stimato). Perche entri, il corpo non
   puo superare 1/13.53 della larghezza utile; cqi si misura gia sul
   content-box, quindi il tetto e 7.39cqi e 7 lascia il margine.

   cqi e non vw perche a contare e la larghezza del pannello, che oltre i
   560px non cresce piu: con i vw il titolo avrebbe continuato ad allargarsi
   su uno spazio fermo. Il clamp in vw resta come ripiego per i browser
   senza container query. */
.modale-titolo{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(20px, 5.4vw, 32px);
  font-size:min(32px, 7cqi);
  line-height:1.14; white-space:nowrap;
  margin:0 0 18px;
}
/* Il filetto separa il titolo dal testo come nel resto del sito, dove le
   sezioni sono divise da una riga sottile e non da spazio soltanto. */
.modale-riga{
  width:40px; height:1px; margin:0 auto 20px; border:0;
  background:var(--burgundy-600);
}
/* Le due frasi stanno su due righe, una per riga: il testo le separa con
   un a capo vero e ci pensa pre-line a rispettarlo. Cosi le traduzioni
   restano stringhe semplici — niente <br> dentro i file di lingua, che
   vorrebbe dire passare da innerHTML per scriverle.

   Interlinea piu stretta che nel resto del sito: qui le righe sono due e
   corte, e a 1.5 si staccavano invece di leggersi come un blocco. */
.modale-testo{
  font-family:var(--body); font-size:var(--fs-body-m); font-weight:400;
  line-height:1.28; color:var(--n700);
  white-space:pre-line; text-wrap:balance;
  margin:0 auto; max-width:40ch;
}

/* --- Pulsante: stesso identico oggetto del pulsante d'invio --- */
.modale-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:59px; margin-top:36px;
  padding:20px 10px; border:0; cursor:pointer;
  background:var(--black); color:var(--white);
  font-family:var(--body); font-size:var(--fs-azione); font-weight:500;
  text-transform:uppercase;
  transition:opacity var(--hover-fx);
}
.modale-cta:hover{ opacity:.82; }

@media (min-width:768px){
  .modale-pannello{ padding:64px 56px 56px; }
}

/* Chi ha chiesto meno movimento vede la modale, non l'animazione: la
   spunta e gia disegnata e il pannello non sale. */
@media (prefers-reduced-motion:reduce){
  .modale-velo, .modale-pannello{ transition:opacity .01s linear; }
  .modale-pannello{ transform:none; }
  .modale-segno circle, .modale-segno path{ stroke-dashoffset:0; animation:none; }
  body.modale-aperta .modale-segno circle,
  body.modale-aperta .modale-segno path{ animation:none; }
}


/* ==========================================================
   PAGINE SENZA TEMPLATE PROPRIO (index.php)
   ----------------------------------------------------------
   In pratica: Privacy Policy e Cookie Policy. La testata e la stessa di
   Contatti — stesse quote, stesse briciole, stesso corpo del titolo —
   perche sono pagine del sito come le altre e non devono sembrare
   allegati arrivati da fuori.

   Il corpo del documento lo veste assets/complianz.css: qui c'e solo il
   guscio della pagina, che vale per qualunque contenuto finisca in
   index.php, anche uno che con Complianz non c'entra niente.
   ========================================================== */
.doc{
  background:var(--white);
  padding:var(--crumb-top) var(--gut) clamp(96px, 10vw, 160px);
}

/* ----------------------------------------------------------
   L'HEADER RESTA FERMO SULLE PAGINE DOCUMENTO
   ----------------------------------------------------------
   Ovunque nel sito l'header si nasconde mentre si scende e riappare da
   fermo (site.js, onScroll). Su pagine alte due o tre schermate non si
   nota. La Cookie Policy ne misura trenta: scorrendola l'header spariva
   e ricompariva a ogni cambio di direzione della rotella, e da li il
   tremolio.

   Non e un difetto nuovo, e il comportamento di sempre visto su una
   pagina abbastanza lunga da renderlo evidente. Qui viene disattivato
   solo su .pagina-doc, che porta il body delle pagine senza template:
   toccare la regola generale vorrebbe dire cambiare come si comporta
   l'header su tutto il sito per un problema che ha solo qui.

   La classe .hdr-on continua ad andare e venire, semplicemente qui non
   cambia piu niente: queste due regole arrivano dopo quelle a riga 184 e
   hanno la stessa specificita, quindi vincono per ordine.
   ---------------------------------------------------------- */
body.pagina-doc .hdr,
body.pagina-doc .hdr-bg{ transform:translateY(0); opacity:1; }
body.pagina-doc .hdr{ pointer-events:auto; }

/* Le stesse dichiarazioni di .ct-crumbs in contatti.css, nello stesso
   ordine: quel foglio si carica solo sulla pagina Contatti, quindi qui
   non si possono riusare i suoi selettori e vanno ripetute. Se un giorno
   cambiano li, vanno cambiate anche qui. */
.doc-crumbs{ display:flex; align-items:center; gap:8px; }
.doc-crumbs a span{ transition:color var(--hover-fx); }
.doc-crumbs a:hover span{ color:var(--black); }
.doc-crumbs span{ font-size:var(--fs-sm); font-weight:400; color:var(--black-25); }
.doc-crumbs b{ font-size:var(--fs-sm); font-weight:700; color:var(--burgundy-600); }

.doc-title{
  margin-top:var(--crumb-gap);
  font-size:var(--fs-title); font-weight:700;
  line-height:var(--lh-title); color:var(--black);
}

/* Il testo arriva quasi al margine destro. Il tetto serve solo agli
   schermi molto larghi, dove una riga piena diventa faticosa da seguire:
   sotto i 1300px circa non entra mai in gioco e la colonna e piena. */
.doc-corpo{
  margin-top:clamp(32px, 3.4vw, 56px);
  max-width:min(1180px, 100%);
}