.tx{padding-inline:12px}
.tx-r{padding-inline-end:12px}

/* Correzione 1 del 9 settembre 2026. Miki: "il titolone della homepage si
   sposta con lo scroll. perche'?!". La causa era data-drift sul suo h2: la
   regola [data-drift] di _sistema.css dava --dx 10px e --dy 13px, la riga
   .apri__row [data-drift] azzerava solo il verticale, e scrollBoot di
   _parti.js scriveva a ogni fotogramma un translate3d fino a 10 px in
   orizzontale. L'attributo e' stato tolto da quel solo h2 in
   homepage-main.html, cosi' il titolo non entra piu' nell'elenco degli
   elementi che si muovono e il codice non lo tocca. Gli altri titoli con
   data-drift, qui e nelle altre pagine, restano come sono. */
.hero{position:relative;height:100svh;min-height:fit-content;overflow:hidden}
.hero,.hero *{cursor:none}
.hero__media{position:absolute;inset:0;z-index:-1;background:var(--ink)}
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:var(--velo);
  background-image:var(--velo-testo);
}
.hero__media video{width:100%;height:100%;object-fit:cover}
.apri__reel{
  position:fixed;z-index:6;left:0;top:0;
  display:grid;place-items:center;width:auto;min-height:44px;
  transform:translate3d(var(--rlx,-999px),var(--rly,-999px),0);
  pointer-events:none;
  will-change:transform;
}
@media (max-width:1023px){
  .apri__reel{
    position:static;transform:none;left:auto;top:auto;
    margin:0;
    display:inline-grid;justify-items:start;place-items:start;
    flex:none;align-self:flex-start;
    width:max-content;max-width:100%;height:auto;min-height:var(--dito);
    pointer-events:auto;will-change:auto;
  }
  .apri--cursore,.apri--cursore *{cursor:auto}
  .apri__row{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
  #hero{--apri-sotto:20px}
}
@media (pointer:coarse) and (min-width:1024px){
  .apri--cursore,.apri--cursore *{cursor:auto}
}

/* TOLTE l'8 settembre 2026: .hero__cap, .hero__frase e .hero__lato, con i due
   @media che restavano vuoti. Nessun elemento porta quelle classi. Le regole su
   .hero__frase in _sistema.css sono ferme allo stesso modo, ma non sono mie. */

/* Il ripiego per chi ha chiesto meno animazioni stava solo in contacts.css, che
   questa pagina non carica: il filmato dell'apertura girava lo stesso. */
.apri__media .top__fermo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;
}
@media (prefers-reduced-motion:reduce){
  .apri__media video{display:none}
  .apri__media .top__fermo{display:block}
}

.reelbox{
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  padding:0;border:0;background:var(--ink);color:var(--figure);overflow:hidden;
}
.reelbox::backdrop{background:var(--ink)}
.reelbox__scena{position:relative;width:100%;height:100%;overflow:hidden}
.reelbox__v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink);display:block}
.reelbox .hero__veil{pointer-events:none}
.reelbox .hero__back{top:var(--s-7);z-index:4}
.reelbox__scena:fullscreen{width:100vw;height:100vh}

/* Correzione 4 del 9 settembre 2026. Miki: "le linee di background della
   sezione awards ancora non vanno bene. servono le linee laterali ai fianchi
   della lista award". Le linee le disegna paintGrid di _parti.js leggendo
   data-g sulla sezione, in percentuale della gabbia (larghezza meno --clear
   per lato). Le due che c'erano, 13.5 e 86.5, cadevano sui bordi interni
   delle colonne dei loghi, che quei bordi li disegnano gia' da sole con
   border-inline: erano un doppione, e sono state tolte. Al loro posto le due
   che chiede lui, sui fianchi della lista, cioe' sui bordi della scatola di
   testo di .cl__aw dopo il suo padding del 10 per cento. Misurate col
   browser: 295 / 969 px a 1280, 329 / 1096 a 1440, 426 / 1458 a 1900. Una
   percentuale secca non li segue, perche' il vuoto fra le colonne e' fisso
   mentre le colonne crescono: da qui la forma percentuale:scarto di data-g,
   21.2:13.8 e 78.8:-14.1, che a tutte e tre le larghezze cade entro un
   pixel. La linea centrale a 50 resta: e' anche il binario (data-rail), e
   togliendola dalla lista si accenderebbe quello al suo posto.
   RICALCOLATE la sera del 9 settembre, e non per ripensamento: la correzione 8
   qui sotto cambia la traccia laterale, quindi il bordo della lista si sposta
   e le due linee dovevano seguirlo o si sarebbero messe a tagliarla. Il conto
   e' lo stesso di prima con la nuova traccia dentro, e resta una retta perche'
   la traccia e' una retta: 16.64:115.4 e 83.36:-115.4. Verificate a nove
   larghezze da 1024 a 2200 con la sonda
   scripts/controlli/_ctrl-loghi-per-lato-e-albo.mjs, che misura lo scarto fra
   la linea e il bordo della lista e pretende che si tocchino. */
.cl{padding-block:calc(var(--s-8) * 2);position:relative}
/* PROPOSTA D, 9 settembre 2026. I loghi scorrono in verticale su due colonne
   ai lati in senso opposto e l'albo dei premi sta in mezzo.

   Correzione 8 della sera del 9. Miki: "su schermi un po' piu' piccoli, dal
   desktop al tablet, mostrano troppi loghi, addirittura sei per lato, mentre
   su schermi piu' grandi viene ridotto a tre-quattro. Possiamo tenerne sempre
   un numero tipo 3-4, non di piu' per lato".

   PERCHE' ERANO SEI, misurato. La cella ha rapporto fisso 214/140, quindi la
   sua altezza la decide la larghezza della traccia; l'altezza della colonna la
   dettava l'albo ed e' quasi la stessa a ogni larghezza. Quindi piu' lo
   schermo era stretto, piu' la cella era bassa dentro una colonna alta uguale,
   e i loghi si moltiplicavano: contati sette a 1024 e a 1280, otto a 1100, sei
   a 1440, quattro a 1920. La traccia laterale era .58fr, cioe' una FRAZIONE
   della pagina, ed e' esattamente questo il difetto: la cella rimpiccioliva
   con lo schermo mentre la colonna restava alta.

   QUI IL LEGAME SI ROVESCIA. La traccia laterale non e' piu' una frazione ma
   una misura quasi ferma, e l'altezza della colonna la detta la traccia e non
   piu' l'albo: quattro celle e otto decimi, cioe' quattro loghi interi piu' un
   pezzo che la maschera sfuma, a QUALUNQUE larghezza e con l'albo sia chiuso
   sia aperto. Il conto non e' piu' un risultato che cambia con lo schermo, e'
   una scelta scritta nel numero 4.8.

   LA FORMA E' AFFINE, e non e' un vezzo. Le due linee di sfondo ai fianchi
   della lista (data-g nel markup) sono percentuale della gabbia piu' scarto
   fisso: cadono sul bordo giusto a ogni larghezza solo se la traccia laterale
   e' anch'essa una retta in funzione della larghezza. Una clamp() con un tetto
   spezza la retta, e sopra il tetto le linee scappano dal bordo della lista di
   decine di pixel. Da qui calc(8.3vw + 115px), che retta lo e'.
   Il secondo ramo, 50vw - 320px, e' il vincolo dell'albo e non della griglia:
   tiene la colonna centrale sopra i 505 px, che e' quanto chiede la riga di
   premio piu' lunga (404 px misurati) per non andare a capo. Vince solo sotto
   i 1043 px di finestra, cioe' sotto la soglia dove le linee di sfondo non
   vengono nemmeno disegnate: la retta resta intatta dove serve.
   Il tetto di 900 px sta sull'ALTEZZA e non sulla larghezza, per la stessa
   ragione: cappare la traccia spezzerebbe la retta, cappare l'altezza no. Su
   uno schermo molto largo senza tetto la fascia arriverebbe a 1363 px e non
   starebbe piu' in una schermata. */
.cl__cols{
  --lato:min(calc(8.3vw + 115px),calc(50vw - 320px));
  display:grid;
  grid-template-columns:var(--lato) minmax(0,1fr) var(--lato);
  gap:var(--s-4);
  align-items:stretch;
}
/* Correzione 5 di Miki: sul desktop il titolo dei clienti e' troppo e sparisce
   dalla vista, ma resta nel documento perche' la sezione ha
   aria-labelledby="clLab" e senza di lui l'etichetta punterebbe al nulla.
   Sul telefono torna visibile: si disfa qui la tecnica .sr di _sistema.css.
   Due classi cosi' non dipende dall'ordine dei fogli. */
.cl__h--cli{margin:0}
/* Miki: "i loghi scompaiono troppo presto, il loro contenitore e' troppo poco
   alto, vorrei che si estendesse oltre, arrivando al limite verticale della
   sezione". L'altezza non e' una frazione di schermata ma quella della riga
   della griglia, che le tre colonne si dividono da sorelle. Il minimo resta
   per le schermate cortissime, dove l'albo e' basso e senza minimo i loghi si
   vedrebbero a fatica.
   Seconda volta che lo chiede: "la mia richiesta di fare lo slider dei loghi
   piu' alto rispetto alla sezione degli awards e honors non e' ancora stata
   esaudita". Stirate e basta venivano ESATTAMENTE uguali all'albo, 561 px
   tutte e due, e lui le vuole sporgenti. Il margine negativo vale il respiro
   della sezione, calc(var(--s-8) * 2) per lato, quindi le colonne escono dal
   ritmo della griglia e arrivano al bordo vero. La riga continua a dettarla
   l'albo, perche' la scatola che la griglia misura ha i margini dentro: la
   sezione resta alta uguale, misurata 837 px a 1440 prima e dopo. */
/* Correzione 2 del 9 settembre 2026. Miki: "i loghi animati non devono
   arrivare fino al bordo della sezione, facciamo che deve sfumare a circa
   40px dal bordo". La maschera era in percentuale, quindi i 40 px che lui
   chiede cambiavano con l'altezza della colonna (15% di 834 px fanno 125,
   ma su una schermata corta ne farebbero 60). Adesso e' in pixel: i primi
   e gli ultimi 40 px sono trasparenti pieni, cosi' nessun logo tocca il
   bordo a nessuna altezza, e la sfumatura sale fino a 140 px per tenere la
   stessa morbidezza di prima. */
/* L'altezza, dalla sera del 9 settembre, la detta la traccia laterale e non
   piu' la riga della griglia: quattro celle e otto decimi. Perche' 4.8 e non
   4: il resto di cella cade tutto dentro i 140 px in cui la maschera qui sotto
   sfuma, quindi non si vede un quinto logo, e in cambio la colonna e' il piu'
   alta possibile, che e' cio' che accorcia il salto quando l'albo si apre.
   COSA SI PERDE, e va detto: prima la colonna si stirava sulla riga
   (align-self:stretch) e arrivava sempre al bordo della sezione, che Miki
   aveva chiesto due volte. Adesso ci arriva quando la sezione e' alta come
   lei, e quando l'albo aperto la supera resta piu' corta e centrata. E' il
   prezzo del numero fisso di loghi: con la colonna stirata, l'albo aperto fa
   la sezione 841 px, e quattro loghi in 841 px vogliono celle da 168, cioe'
   tracce da 257 px per lato, che sotto i 1200 la lista dei premi non puo'
   cedere senza andare a capo. Le due cose non stanno insieme, e Miki ha
   chiesto per ultimo il numero di loghi.
   align-self:center e non stretch: con un'altezza definita, stretch si
   comporta come start e tutto il vuoto finirebbe in fondo, sbilanciato.
   Il min-height che c'era qui, 448 px, e' stato tolto: serviva a difendere una
   colonna che si stirava sulle schermate cortissime, e adesso l'altezza non
   dipende piu' dalla schermata. Era anche una trappola: con un'altezza
   imposta da min-height, il rapporto avrebbe ristretto la colonna sotto la sua
   traccia. */
.cl__col{
  position:relative;
  height:min(calc(var(--lato) * 140 / 214 * 4.8),900px);align-self:center;
  margin-block:calc(var(--s-8) * -2);
  overflow:hidden;
  border-inline:1px solid var(--linea);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 40px,#000 140px,#000 calc(100% - 140px),transparent calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,transparent 40px,#000 140px,#000 calc(100% - 140px),transparent calc(100% - 40px),transparent 100%);
}
/* Il nastro sta fermo finche' la lista non e' entrata in vista: is-in lo mette
   l'osservatore condiviso di _parti.js sulla stessa .stg. Il momento e' prima
   dell'entrata delle celle, che aspettano is-dentro qui sotto, ma finche' le
   celle sono invisibili non si vede muovere niente, e in cambio il nastro non
   parte mai da fermo sotto gli occhi di chi guarda. */
/* Il nastro sta FUORI dal flusso: se contasse nell'altezza, la colonna
   crescerebbe coi suoi loghi (misurato: la sezione passava da 885 a 1727 px)
   e stirarla all'altezza della riga non servirebbe a niente, perche' la riga
   la fa la colonna stessa. Cosi' invece la riga la detta l'albo dei premi, la
   colonna ci si stira dentro e il nastro viene ritagliato. */
.cl__logos{
  position:absolute;inset:0 0 auto 0;
  animation:cl-sale 44s linear infinite;animation-play-state:paused;
}
.cl__logos.is-in{animation-play-state:running}
.cl__col--giu .cl__logos{animation-direction:reverse;animation-duration:53s}
@media (hover:hover){
  .cl__col:hover .cl__logos{animation-play-state:paused}
}
/* I sei loghi ci sono TRE volte e il giro ne consuma sei, cioe' un terzo: con
   due copie sole il nastro finiva prima del fondo della colonna adesso che la
   colonna e' alta quanto la sezione (misurato a 1440: sei celle fanno 727 px
   contro 849 di colonna, quindi un vuoto di 122 px a ogni giro). La distanza
   percorsa in un giro resta sei celle, percio' le durate qui sopra si leggono
   ancora come prima. */
@keyframes cl-sale{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-33.3333%,0)}}
/* Miki: "l'animazione in entrata dei loghi non c'e', io voglio
   vedere che prima non ci sono e poi entrano con uno slide o qualcosa insieme
   al titolo, o subito dopo il titolo". Portando la proposta D si era persa la
   classe stg sulla lista. La scaletta sta sulle CELLE, che sono i figli, mentre
   lo scorrimento sta sul contenitore: le due trasformazioni non si toccano.
   IL MOMENTO lo comanda is-dentro della sezione, lo stesso che apre la
   maschera del titolo, e non l'osservatore condiviso: quello accende is-in
   appena il nastro sfiora il fondo dello schermo, misurato a scrollY 100
   contro i 450 del titolo, quindi i loghi entravano fuori dalla vista ed e'
   esattamente il motivo per cui Miki non vedeva nessuna entrata. Due gradini
   di ritardo perche' partano subito DOPO il titolo e non insieme.
   Senza .sez, cioe' quando il moto ridotto o un browser senza osservatore
   spengono la coreografia della homepage, non si applica niente e restano
   valide le regole di _sistema.css, che li mostrano. */
.cl.sez.is-dentro .cl__logos.stg>*{
  animation:stg-in var(--t-su) var(--e-osmo) calc(var(--stg-step) * 2 + var(--d,0ms)) both;
}
.cl.sez:not(.is-dentro) .cl__logos.stg>*{
  animation:none;opacity:.01;transform:translateY(11px);
}
.cl__cell{
  display:grid;place-items:center;
  aspect-ratio:214/140;overflow:hidden;min-height:0;
  border-bottom:1px solid var(--linea);
  padding:0;
  position:relative;z-index:1;background:var(--ink);
  transition:background-color var(--t-quick) var(--e-out);
}
/* Correzione 6 del 9 settembre 2026. Miki: "penso non siano stati inseriti
   tutti nella dimensione corretta, alcuni risultano troppo piccoli e altri
   troppo grandi. Bilancia il peso visivo dei loghi nei loro box".
   Qui c'era scritto che le dodici tele sono tutte 500x300 col margine di 40 px
   "quindi non serve piu' una scala per ognuno: ci pensa la cella". La prima
   meta' e' vera, la conclusione no, e si vedeva: normalizzare la TELA non
   normalizza l'INCHIOSTRO che ci sta dentro. Misurato con sharp, il segno
   dentro la tela va da 420x50 di Antonina Poppy a 420x217 di Nike, cioe' da
   una fascia 8.4:1 a un blocco 1.9:1. Con due limiti fissi uguali per tutti,
   76% e 62%, tutte le tele rendevano identiche (122.8x73.7 a 1440) e l'area
   coperta dal segno andava da 5.8% a 25.0% della cella: quattro volte e
   mezzo di scarto, e sono esattamente il "troppo piccoli" e il "troppo
   grandi" di Miki.
   Adesso il limite di altezza e' per marchio, in funzione di quanto
   inchiostro contiene la sua tela, e punta tutti alla stessa area coperta,
   circa 3700 px2 su una cella di 21978 px2 a 1440, cioe' il 17 per cento, che
   e' la media di prima: il muro non diventa ne' piu' pieno ne' piu' vuoto,
   diventa pari. Le percentuali sono gradini scelti sulle aree misurate, non a
   occhio, e valgono a ogni larghezza perche' la cella ha un rapporto fisso.
   Le due fasce lunghissime, AutoTrader e Antonina Poppy, si fermano al 92%
   per un motivo fisico e non di gusto: a 8.2:1 l'area piena chiederebbe un
   segno piu' largo della cella. Al 92% la tela occupa tutta la larghezza e il
   segno ne prende l'84%, cioe' otto per cento di respiro per lato, che e' il
   massimo possibile senza tagliare. Restano a circa il 13%, ed e' il tetto.
   max-width sale da 76% a 100% perche' sotto il 92% di altezza non lega mai
   (la tela e' 5:3 e la cella 1.54:1, quindi la larghezza arriva sempre dopo):
   resta come guardia, perche' nessuna tela esca dalla cella.
   Restano BIANCHI pieni: erano grigi solo perche' li spegneva un'opacita', e
   il segnale del passaggio sta sul fondo della cella, cosi' nessun logo deve
   spegnersi per farne notare un altro. */
.cl__cell img{--peso:62%;max-width:100%;max-height:var(--peso);width:auto;height:auto;object-fit:contain}
.cl__cell img[src$="/autotrader.webp"]{--peso:92%}
.cl__cell img[src$="/antonina-poppy.webp"]{--peso:92%}
.cl__cell img[src$="/diesel.webp"]{--peso:75%}
.cl__cell img[src$="/citroen.webp"]{--peso:68%}
.cl__cell img[src$="/trenitalia.webp"]{--peso:65%}
.cl__cell img[src$="/google.webp"]{--peso:63%}
.cl__cell img[src$="/adidas.webp"]{--peso:58%}
.cl__cell img[src$="/astra-makeup.webp"]{--peso:54%}
.cl__cell img[src$="/desperados.webp"]{--peso:54%}
.cl__cell img[src$="/virgin-media.webp"]{--peso:54%}
.cl__cell img[src$="/stake.webp"]{--peso:52%}
.cl__cell img[src$="/nike.webp"]{--peso:51%}
@media (hover:hover){
  .cl__cell:hover{background:color-mix(in srgb,var(--paper) 7%,transparent)}
}
.cl__link{display:grid;place-items:center;width:100%;height:100%;padding:var(--s-3)}
/* L'albo e' una colonna di testo, non una fascia tesa da un logo all'altro: il
   vuoto a destra e a sinistra e' quello che lo fa leggere come un albo. Se lo
   prende DENTRO la colonna, quindi la sezione non si allarga di un pixel, ed e'
   in percentuale e non in vw per restare una proporzione a ogni schermo. */
.cl__aw{padding-inline:10%}
/* Lo stacco fra il titolo dei premi e la prima riga, terzo giro. Da --s-5 (24)
   era diventato --s-8 (72), poi meta' di 72, cioe' 36, e Miki: "la distanza tra
   il titolo Awards and Honors e la lista e' ancora troppo, puoi fare lo stesso
   tipo di distanza come abbiamo fatto nel resto del sito?". Nel resto del sito
   lo stacco fra un titolo di sezione e cio' che segue sta fra 15 e 38 px, e
   qui il valore che il sito usava era --s-5. Si torna a quello: e' un gradino
   della scala e non un numero inventato. */
.cl__list{margin-top:var(--s-5)}
.cl__list--piu{margin-top:0}
/* Correzione 3 del 9 settembre 2026, e Miki ci e' tornato piu' volte: "voglio
   che tieni i font come nel sito vero, mi riferisco alla lista award". Il sito
   online e' stato misurato: riga in Archivo 17 px peso 400, interlinea 20.4 px
   (cioe' --t-h3 con --lh-h3 a 1.2), padding 12 px sopra e sotto (--s-2). Il
   serif sul nome e il maiuscoletto spento sull'esito erano una mia aggiunta e
   non stanno nel sito vero: nome, esito e anno sono la stessa cosa, stesso
   corpo, stesso peso, stesso bianco. */
.aw__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  border-bottom:1px solid var(--linea);
  padding-block:var(--s-2);
  font-family:var(--f-sans);font-weight:400;
  font-size:var(--t-h3);line-height:var(--lh-h3);
}
/* Le due meta' della riga si distinguono solo per dove stanno: i 12 px sono la
   distanza dei testi dalle linee che vale in tutto il sito, non spaziatura di
   carattere. Il colore lo eredita la riga, cosi' al passaggio, quando si
   rovescia in bianco (regola .aw__row di _sistema.css), si rovesciano insieme
   e non serve piu' rimettere a posto l'esito. */
.aw__row>span:first-child{padding-inline-start:12px}
.aw__row>span:last-child{padding-inline-end:12px;white-space:nowrap}
/* 9 settembre 2026, Miki: "se possibile allinea le linee verticali in modo che
   tocchino quelle orizzontali della lista senza intersecarsi". Nella sua
   schermata, all'angolo della lista dei premi, il filetto della riga sporgeva
   di 8 px oltre la verticale di sfondo e la verticale ci passava dentro: una
   croce a ogni riga invece di un angolo. Misurato a 1440: le verticali cadono a
   330.2 e 1095.5, la lista sta fra 329.1 e 1095.9, ma il riquadro della riga
   arrivava a 321.1 e 1103.9. Gli 8 px vengono da padding:0 8px con margin:0
   -8px di .aw__row in _sistema.css, che allargano SOLO il riquadro e non il
   testo: toglierli non sposta di un pixel cio' che si legge, accorcia filetto e
   banda del passaggio fino alle verticali e lascia che orizzontale e verticale
   si tocchino invece di incrociarsi. Non si toccano le percentuali di data-g,
   che Miki ha approvato. Sotto i 1081 px le verticali non esistono (media query
   di _sistema.css) e la lista e' a tutta larghezza: li' la sporgenza serve
   ancora alla banda del passaggio e resta com'era. */
@media (min-width:1081px){
  #clients .aw__row{padding-inline:0;margin-inline:0}
}
/* Correzione 7 del 9 settembre 2026. Miki: "e anche su desktop voglio un
   bottone dopo 4 o 5 punti della lista award. Voglio che ci sia il pulsante
   Read more per espandere, perche' altrimenti a colpo d'occhio sembra
   troppo". Qui c'era .cl__more{display:none}, e le quattro regole del
   pannello stavano dentro la media query dei 900 px: il bottone esisteva
   solo sul telefono e sulla scrivania le nove righe stavano tutte in vista.
   Adesso stanno qui, senza cancello di larghezza. Sotto i 900 px non cambia
   niente, perche' li' facevano gia' esattamente questo.
   Il pannello si apre con le righe della griglia da 0fr a 1fr, che non chiede
   di misurare altezze; la visibility cambia in ritardo alla chiusura perche'
   da chiuso il testo non deve restare leggibile agli strumenti mentre e'
   soltanto ritagliato. */
.cl__extra{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-su) var(--e-osmo)}
.cl__extra>*{overflow:hidden;min-height:0;visibility:hidden;
  transition:visibility 0s linear var(--t-su)}
.cl__extra.is-aperto{grid-template-rows:1fr}
.cl__extra.is-aperto>*{visibility:visible;transition:visibility 0s}
.cl__more{display:grid;justify-items:start;margin-top:var(--s-5)}
.peek{
  position:fixed;left:0;top:0;z-index:80;
  width:clamp(200px,17.6vw,254px);aspect-ratio:16/9;
  pointer-events:none;margin:0;
}
.peek__in{
  display:block;width:100%;height:100%;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.5);background:var(--ink);
  opacity:.01;transform:scale(.94);visibility:hidden;
  transition:opacity 260ms var(--e-out),transform 260ms var(--e-out),visibility 0s linear 260ms;
}
.peek.is-on .peek__in{opacity:1;transform:scale(1);visibility:visible;transition:opacity 260ms var(--e-out),transform 260ms var(--e-out),visibility 0s}
.peek img{width:100%;height:100%;object-fit:cover}
.peek--contain img{object-fit:contain;padding:22px;background:var(--ink)}
.peek__badge{display:none}
.peek--doppia{width:clamp(276px,24.32vw,351px);aspect-ratio:2.4568;display:flex;gap:1px}
.peek--doppia.is-on{background:var(--linea)}
.peek--doppia .peek__in{flex:1 1 auto;width:auto}
.peek--doppia .peek__badge{display:block;flex:none;width:27.64%}
.peek--doppia .peek__badge img{object-fit:contain;padding:12px;background:var(--ink)}
@media (pointer:coarse){.peek{display:none}}

.sel,.sel *{cursor:none}
.sel .sel__ctl,.sel .sel__ctl *{cursor:pointer}
@media (pointer:coarse){.sel,.sel *{cursor:auto}}

.sel{
  position:relative;isolation:isolate;
  --sel-e:calc(100svh + var(--head-h-c) * 2);
  --sel-alto-nat:calc(var(--sel-e) * 0.23607 - 40px);
  --sel-centro-nat:calc(var(--sel-e) * 0.47214 + 40px);
  /* L'altezza del titolo ricalcata sulla sua stessa regola, per stare in
     sincrono se cambia il corpo: il clamp qui sotto e' lo stesso di .sel__t. */
  --sel-t-h:calc(max(48px,min(11.4vw,var(--t-display))) * var(--lh-display));
  /* Il pavimento della riga in cima. Il titolo sta appoggiato al fondo di
     quella riga, e la sezione si aggancia con la testata che le copre i primi
     --head-h-c px: quindi al titolo servono due volte quella altezza, piu' un
     respiro, piu' il suo corpo, meno la sporgenza con cui scende sotto la
     linea di base. Senza questo pavimento, sotto i 1440 il titolo saliva
     dentro la testata: misurato coperto di 21 px a 1100x700, 16 a 1280x720,
     5 a 1366x768. Sopra i 1440 e sul telefono il pavimento non lega mai,
     quindi la' non cambia niente. */
  --sel-alto-min:calc(var(--head-h-c) * 2 + var(--s-2) + var(--sel-t-h) * 0.86957);
  --sel-alto:max(var(--sel-alto-nat),var(--sel-alto-min));
  /* Quello che la riga in cima guadagna lo perde quella di mezzo: cosi' il
     filetto in fondo alla parte centrale e l'altezza totale restano dove
     stanno, e si sposta solo il filetto sotto il titolo. */
  --sel-centro:calc(var(--sel-centro-nat) - (var(--sel-alto) - var(--sel-alto-nat)));
  --sel-basso:calc(var(--sel-e) * 0.29180);
  min-height:var(--sel-e);
  display:grid;
  grid-template-rows:var(--sel-alto) var(--sel-centro) minmax(var(--sel-basso),auto);
}
@media (min-width:1440px){
  .sel{
    --sel-alto-nat:calc(var(--sel-e) * 0.32 - 40px);
    --sel-centro-nat:calc(var(--sel-e) * 0.38821 + 40px);
  }
}
.sel__h{position:absolute;left:0;right:0;height:1px;background:var(--linea);z-index:3}
.sel__h--0{top:0}
.sel__h--1{top:var(--sel-alto)}
.sel__h--2{top:calc(var(--sel-alto) + var(--sel-centro))}
.sel__h--3{bottom:0}
.sel__h.rv{clip-path:none;transform:scaleX(0);transform-origin:left center}
.sel__h.rv.is-in{animation:sel-tira var(--t-title) var(--ez) both}
.sel__h.rv.is-done{animation:none;transform:none}
@keyframes sel-tira{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sel__stella{
  position:absolute;z-index:3;left:calc(var(--clear) + .5px);top:.5px;
  width:11px;height:13px;transform:translate(-50%,-50%);
  background-color:var(--stella);
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
}

.sel__alto{grid-row:1;position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-inline:var(--clear)}
.sel__t{
  display:block;text-align:center;margin-bottom:-.12em;
  font-family:var(--f-display);font-weight:400;font-synthesis:none;
  font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);
  text-transform:uppercase;white-space:nowrap;
}
.sel__t .mk{display:inline-block}

.sel__bg{position:absolute;inset:0;z-index:0;
  transform:scale(calc(.55 + .45 * var(--gz,1)));transform-origin:50% 50%;will-change:transform}
.sel__slide{position:absolute;inset:0;opacity:0;transition:opacity var(--t-mega) var(--e-out)}
.sel__slide.is-on{opacity:1}
.sel__slide video,.sel__slide img{width:100%;height:100%;object-fit:cover}
.sel__velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--velo)}
.sel__v{position:absolute;top:0;bottom:0;width:1px;background:var(--linea);z-index:3}
.sel__v--l{left:var(--clear)}
.sel__v--r{left:calc(100% - var(--clear))}

.sel__ctl.rv,.sel__ctl.rv.is-in,.sel__ctl.rv.is-done,
.sel__meta.rv,.sel__meta.rv.is-in,.sel__meta.rv.is-done{clip-path:none;animation:none}
.sel__ctl.rv,.sel__meta.rv{
  opacity:.01;transform:translateX(-64px);
  transition:opacity var(--t-title) var(--ez),transform var(--t-title) var(--ez);
}
.sel__ctl.rv.is-in,.sel__meta.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sel__ctl.rv,.sel__meta.rv{opacity:1;transform:none;transition:none}
}

.sel__basso{
  grid-row:3;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:var(--s-4);padding:0 var(--clear) var(--s-4);
}
.sel__ctl{width:408px;max-width:100%}
.sel > .sp-voce{bottom:calc(var(--head-h-c) * 2)}
.sel__ctl .sp-ctrl__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel__meta{position:relative;min-height:calc(var(--s-6) + var(--s-2));text-align:center;width:100%}
.sel__pane{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity var(--t-mega) var(--e-out);
}
.sel__pane.is-on{opacity:1}
.sel__d{font-size:var(--t-para-md);line-height:var(--lh-para-md);max-width:34ch;margin-inline:auto}
.sel__case{
  position:fixed;z-index:6;left:0;top:0;
  display:grid;place-items:center;width:auto;min-height:44px;
  transform:translate3d(var(--rlx,-999px),var(--rly,-999px),0);
  pointer-events:none;will-change:transform;
}
.sel__case .sp-watch,.apri__reel .sp-watch{
  transform-origin:var(--cox,0%) var(--coy,0%);
  transform:scale(.62);opacity:.01;visibility:hidden;
  transition:transform 260ms var(--e-out),opacity 200ms var(--e-out),visibility 0s linear 260ms,
             background var(--t-band) var(--e-band),color var(--t-band) var(--e-band);
}
.sel__case.is-on .sp-watch,.apri__reel.is-on .sp-watch{
  transform:scale(1);opacity:1;visibility:visible;
  transition:transform 260ms var(--e-out),opacity 200ms var(--e-out),visibility 0s,
             background var(--t-band) var(--e-band),color var(--t-band) var(--e-band);
}
.sel__case[data-rib-x] .sp-watch,.apri__reel[data-rib-x] .sp-watch{
  padding-right:calc(var(--w-sporge-x) + var(--sp-pad));
  padding-left:var(--sp-pad);
  margin-left:0;
  margin-right:calc(var(--w-sporge-x) * -1);
}
.sel__case[data-rib-x] .sp-watch::after,.apri__reel[data-rib-x] .sp-watch::after{
  left:0;right:var(--w-sporge-x);
}
.sel__case[data-rib-x] .sp-watch::before,.apri__reel[data-rib-x] .sp-watch::before{
  left:auto;right:0;transform:scaleX(-1);
}
.sel__case[data-rib-y] .sp-watch,.apri__reel[data-rib-y] .sp-watch{
  padding-top:0;
  padding-bottom:var(--w-sporge-y);
  margin-top:0;
  margin-bottom:calc(var(--w-sporge-y) * -1);
}
.sel__case[data-rib-y] .sp-watch::after,.apri__reel[data-rib-y] .sp-watch::after{
  top:0;bottom:var(--w-sporge-y);
}
.sel__case[data-rib-y] .sp-watch::before,.apri__reel[data-rib-y] .sp-watch::before{
  top:auto;bottom:0;transform:scaleY(-1);
}
.sel__case[data-rib-x][data-rib-y] .sp-watch::before,
.apri__reel[data-rib-x][data-rib-y] .sp-watch::before{
  transform:scale(-1,-1);
}
@media (prefers-reduced-motion:reduce){
  .sel__case .sp-watch,.apri__reel .sp-watch{transform:none}
  .sel__case.is-on .sp-watch,.apri__reel.is-on .sp-watch{transform:none}
}
@media (pointer:coarse){
  .sel__case{position:static;transform:none;pointer-events:auto;margin-top:var(--s-3)}
  .sel__case .sp-watch,.apri__reel .sp-watch{
    transform:none;opacity:1;visibility:visible;
    --w-sporge-x:0px;--w-sporge-y:0px;
  }
  .sel__case .sp-watch::before,.apri__reel .sp-watch::before{display:none}
}

.pila{
  --alta:65.5;
  --stacco:1.1;
  --cima:13.8;
  --sx:var(--gab-est);
  --dx:calc(100% - var(--gab-est));
  --altezza:1svh;
  --q:0;
  --n:3;
  position:relative;
}
#portfolio{padding-top:0}
.pila__track{position:relative}
.pila.is-viva .pila__track{height:calc(var(--n) * var(--corsa-scheda,56svh))}
.pila__stage{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.pila.is-viva .pila__stage{position:sticky;top:0;height:100svh}

.pila__fondi{position:absolute;inset:0;z-index:0;overflow:hidden}
.pila__fondo{position:absolute;inset:-6%;opacity:0;transition:opacity 900ms linear}
.pila__fondo.is-on{opacity:1}
.pila__fondo video{width:100%;height:100%;object-fit:cover}
.pila__velo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--velo);mix-blend-mode:multiply;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.pila.is-viva .pila__colonna{
  position:absolute;
  left:var(--sx);
  right:calc(100% - var(--dx));
  top:0;bottom:0;z-index:1;
}
.pila.is-viva .pila__nastro{
  position:absolute;left:0;right:0;
  top:calc(var(--cima) * var(--altezza));
  display:flex;flex-direction:column;
  gap:calc(var(--stacco) * var(--altezza));
  transform:translate3d(0,
    calc(var(--alta) * var(--altezza) / 2 - 100% / 6 + var(--stacco) * var(--altezza) / 3
      - var(--q) * (var(--n) - 1) / var(--n) * (100% + var(--stacco) * var(--altezza))),0);
  will-change:transform;
}
.pila.is-viva .pila__q{flex:none;height:auto;aspect-ratio:16/9}
.pila__q{position:relative;overflow:hidden;background:var(--ink)}
.pila.is-viva .pila__q{
  --lon:0;
  filter:blur(calc((var(--lon) + var(--lon) * var(--lon) * .5) * 1px));
  opacity:calc(1 - var(--lon) * .085 - var(--lon) * var(--lon) * .095);
  transition:filter 420ms linear,opacity 420ms linear;
}

.pila.is-viva .pila__q[data-lontano="0"]{
  transition:filter 140ms linear,opacity 420ms linear;
}
@media (prefers-reduced-motion:reduce){
  .pila.is-viva .pila__q{transition:none}
}
.pila__q :is(video,img){width:100%;height:100%;object-fit:cover;display:block}

.pila.is-viva .pila__filo{
  position:absolute;left:0;right:0;height:1px;background:var(--linea);
  z-index:2;pointer-events:none;
}
.pila.is-viva .pila__filo--alto{top:calc(var(--cima) * var(--altezza))}
.pila.is-viva .pila__filo--basso{
  top:calc((var(--cima) + var(--alta) / 2) * var(--altezza) + var(--carta,0px) / 2);
}
.pila.is-viva .pila__filo--basso::before{
  content:"";position:absolute;top:50%;left:var(--gab-est);
  width:11px;height:12px;
  background-color:var(--stella);
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
  transform:translate(-50%,-50%);
}

.pila.is-viva .pila__lato{
  position:absolute;z-index:3;
  top:calc(var(--cima) * var(--altezza));
  height:calc(var(--alta) * var(--altezza));
  display:flex;align-items:center;
}
.pila.is-viva .pila__lato--sx{
  left:0;right:auto;
  width:max-content;max-width:var(--sx);
  padding-inline-start:calc(var(--clear) + var(--filo));
  padding-inline-end:var(--filo);
  padding-block:var(--filo);
}
.pila.is-viva .pila__lato--dx{
  left:var(--dx);right:0;
  gap:var(--filo);
  padding-inline-end:var(--clear);
}
@property --riga{syntax:"<length>";inherits:false;initial-value:0px}
.pila.is-viva .righello{
  --passo:30px;--tacca:11px;--fioco:.85;
  --linea:var(--paper);
  filter:none;
  margin-block:calc(var(--cima) * var(--altezza) * -1)
               calc((100 - var(--cima) - var(--alta)) * var(--altezza) * -1);
  --riga:calc((var(--cima) + var(--alta) / 2) * var(--altezza)
          - var(--spessore) / 2 + (var(--q) - .5) * var(--passo) * 3);
}
@supports (top:round(down,1px,1px)){
  .pila.is-viva .righello{
    --riga:round(down,
      calc((var(--cima) + var(--alta) / 2) * var(--altezza)
        - var(--spessore) / 2 + (var(--q) - .5) * var(--passo) * 3),
      var(--passo));
  }
}
.pila.is-viva .righello__t:nth-of-type(4n+1){--tacca:22px}
.pila.is-viva .righello__t{
  width:max(
    calc(var(--tacca) + var(--r,0) * (var(--colmo) - var(--tacca))),
    calc(var(--tacca) + var(--m,0) * (var(--mano) - var(--tacca))));
  opacity:calc(var(--fioco) + max(var(--r,0),var(--m,0)) * (1 - var(--fioco)));
  transition:width var(--t-quick,220ms) var(--e-out,ease);
}
@media (prefers-reduced-motion:reduce){
  .pila.is-viva .righello__t{transition:none}
}
.pila__h .ser{font-weight:400}
.pila__go{margin-top:var(--s-4)}
.pila__read{position:relative;flex:1;min-width:0;display:grid;align-content:center}
.pila.is-viva .pila__read{
  padding:15px;
  padding-inline-start:var(--filo);
  margin:-15px;
  margin-inline-start:calc(-1 * var(--filo));
}
.pila__i{
  grid-area:1 / 1;
  opacity:.01;visibility:hidden;transform:translateY(14px);
  transition:opacity 450ms linear,transform 450ms var(--e-out),visibility 0s linear 450ms;
}
.pila__i[data-pos="-1"]{transform:translateY(-14px)}
.pila__i[data-pos="1"]{transform:translateY(14px)}
.pila__i.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 450ms linear,transform 450ms var(--e-out),visibility 0s}
@media (prefers-reduced-motion:reduce){.pila__i{transform:none;transition:opacity 450ms linear,visibility 0s linear 450ms}.pila__i.is-on{transform:none}}
.pila__st{font-size:var(--t-h3);line-height:var(--lh-h2);text-transform:uppercase}
.pila__p{margin-top:var(--s-3);font-size:var(--t-para-md);line-height:var(--lh-para-md);max-width:38ch}

.pila.is-viva :is(.pila__lato--sx,.pila__read){
  transition:opacity var(--t-su) var(--e-osmo),transform var(--t-su) var(--e-osmo);
}
.pila.is-viva[data-scena="prima"] :is(.pila__lato--sx,.pila__read){
  opacity:.001;transform:translateY(14px);
}
.pila.is-viva[data-scena="dopo"] :is(.pila__lato--sx,.pila__read){
  opacity:.001;transform:translateY(-14px);
}
@media (prefers-reduced-motion:reduce){
  .pila.is-viva :is(.pila__lato--sx,.pila__read){transition:none}
  .pila.is-viva[data-scena] :is(.pila__lato--sx,.pila__read){opacity:1;transform:none}
}

.pila:not(.is-viva) .pila__stage{
  display:grid;grid-template-columns:minmax(0,1fr);
  row-gap:var(--s-6);padding-inline:var(--clear);
}
.pila:not(.is-viva) :is(.pila__colonna,.pila__nastro,.pila__lato--dx,.pila__read){display:contents}
.pila:not(.is-viva) :is(.pila__fondi,.pila__velo,.pila__filo,.righello){display:none}
.pila:not(.is-viva) .pila__lato--sx{grid-row:1;padding-inline-start:var(--filo)}
.pila:not(.is-viva) .pila__q{
  grid-column:1;aspect-ratio:481/702;
  max-width:calc(78svh * 481 / 702);
}
.pila:not(.is-viva) .pila__i{
  grid-column:1;padding-inline-start:var(--filo);
  opacity:1;visibility:visible;transition:none;
}
.pila:not(.is-viva) .pila__q:nth-child(1){grid-row:2}
.pila:not(.is-viva) .pila__i:nth-child(1){grid-row:3}
.pila:not(.is-viva) .pila__q:nth-child(2){grid-row:4}
.pila:not(.is-viva) .pila__i:nth-child(2){grid-row:5}
.pila:not(.is-viva) .pila__q:nth-child(3){grid-row:6}
.pila:not(.is-viva) .pila__i:nth-child(3){grid-row:7}
@media (max-width:1080px){
  .pila:not(.is-viva) .pila__stage{
    --sbircia:var(--clear);
    --diapo:calc(100vw - var(--clear) * 2 - var(--sbircia) * 2);
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:var(--diapo);
    align-items:start;
    column-gap:var(--s-3);
    row-gap:var(--s-4);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--sbircia);
    padding-inline:var(--clear);
    scrollbar-width:none;
  }
  .pila:not(.is-viva) .pila__stage::-webkit-scrollbar{display:none}
  .pila:not(.is-viva) .pila__lato--sx{
    grid-row:1;grid-column:1 / -1;
    position:sticky;left:0;
    justify-self:start;width:max-content;max-width:calc(100vw - var(--clear) * 2);
    padding-inline-start:var(--filo);
  }
  .pila:not(.is-viva) .pila__q{
    grid-row:2;aspect-ratio:16/9;
    width:auto;max-width:none;
    scroll-snap-align:center;
  }
  .pila:not(.is-viva) .pila__i{
    grid-row:3;padding-inline-start:0;
  }
  .pila:not(.is-viva) .pila__q:nth-child(n){grid-row:2}
  .pila:not(.is-viva) .pila__i:nth-child(n){grid-row:3}
  .pila:not(.is-viva) .pila__q:nth-child(1),
  .pila:not(.is-viva) .pila__i:nth-child(1){grid-column:1}
  .pila:not(.is-viva) .pila__q:nth-child(2),
  .pila:not(.is-viva) .pila__i:nth-child(2){grid-column:2}
  .pila:not(.is-viva) .pila__q:nth-child(3),
  .pila:not(.is-viva) .pila__i:nth-child(3){grid-column:3}
  .pila:not(.is-viva) .pila__q:nth-child(4),
  .pila:not(.is-viva) .pila__i:nth-child(4){grid-column:4}
  .pila:not(.is-viva) .pila__q:nth-child(5),
  .pila:not(.is-viva) .pila__i:nth-child(5){grid-column:5}
  .pila:not(.is-viva) .pila__q:nth-child(6),
  .pila:not(.is-viva) .pila__i:nth-child(6){grid-column:6}
}
@media (min-width:1081px){
  .pila:not(.is-viva) .pila__stage{
    grid-template-columns:var(--dx) minmax(0,1fr);
    align-items:center;
  }
  .pila:not(.is-viva) .pila__lato--sx{grid-column:1 / -1}
  .pila:not(.is-viva) .pila__q{
    grid-column:1;justify-self:end;
    width:calc(var(--dx) - var(--sx));
  }
  .pila:not(.is-viva) .pila__i{grid-column:2}
  .pila:not(.is-viva) .pila__q:nth-child(1),.pila:not(.is-viva) .pila__i:nth-child(1){grid-row:2}
  .pila:not(.is-viva) .pila__q:nth-child(2),.pila:not(.is-viva) .pila__i:nth-child(2){grid-row:3}
  .pila:not(.is-viva) .pila__q:nth-child(3),.pila:not(.is-viva) .pila__i:nth-child(3){grid-row:4}
  .pila:not(.is-viva) .pila__q:nth-child(4),.pila:not(.is-viva) .pila__i:nth-child(4){grid-row:5}
  .pila:not(.is-viva) .pila__q:nth-child(5),.pila:not(.is-viva) .pila__i:nth-child(5){grid-row:6}
  .pila:not(.is-viva) .pila__q:nth-child(6),.pila:not(.is-viva) .pila__i:nth-child(6){grid-row:7}
}

.pp{background:var(--ink);padding-block:var(--s-8) 0;overflow:hidden;
  min-height:100svh;display:grid;align-content:center}
.pp__head{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--gab-est) * .75 + 12px);
  margin-inline:var(--clear)}
.pp__h .mk{display:block}
.pp__lead{align-self:end;font-size:var(--t-para-md);line-height:var(--lh-para-md);padding-inline-start:12px}
.pp__stage{position:relative;z-index:1;margin-top:var(--s-8);margin-inline:var(--clear)}
.pp__stage::before{content:"";position:absolute;z-index:-1;inset:0 -1px;background:var(--ink)}
.pp__wires{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pp__wires path{fill:none;stroke:var(--paper);stroke-width:1px;vector-effect:non-scaling-stroke}
.pp__stage.rv,.pp__stage.rv.is-in,.pp__stage.rv.is-done{clip-path:none;animation:none}
.pp__stage.rv .pp__spark{opacity:.01;transform:scale(.35);
  transition:opacity var(--t-quick) var(--ez) var(--d,0ms),transform var(--t-band) var(--ez) var(--d,0ms)}
.pp__stage.rv .pp__item span{opacity:.01;
  transition:opacity var(--t-quick) var(--ez) var(--d,0ms),transform var(--t-band) var(--ez) var(--d,0ms)}
.pp__stage.rv .pp__list--in .pp__item span{transform:translateX(-16px)}
.pp__stage.rv .pp__list--out .pp__item span{transform:translateX(16px)}
.pp__stage.rv .pp__core{clip-path:inset(0 100% 0 0);transition:clip-path var(--t-band) var(--ez) var(--d,0ms)}
.pp__stage.rv .pp__note{opacity:.01;transform:translateY(8px);
  transition:opacity var(--t-band) var(--ez) var(--d,0ms),transform var(--t-band) var(--ez) var(--d,0ms)}
.pp__stage.rv .pp__wires path{stroke-dasharray:var(--len,0);stroke-dashoffset:var(--len,0);
  transition:stroke-dashoffset var(--t-linea) var(--ez) var(--d,0ms)}
.pp__stage.rv.is-in .pp__spark{opacity:1;transform:none}
.pp__stage.rv.is-in .pp__item span{opacity:1;transform:none}
.pp__stage.rv.is-in .pp__core{clip-path:inset(0)}
.pp__stage.rv.is-in .pp__note{opacity:1;transform:none}
.pp__stage.rv.is-in .pp__wires path{stroke-dashoffset:0}
.pp__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) var(--gab-int) minmax(0,1fr);align-items:center;gap:0}
.pp__list{display:grid;gap:calc(var(--s-5) + var(--s-3));font-size:var(--t-para-md);line-height:var(--lh-para-md)}
.pp__list--in{width:37%;margin-inline-start:var(--clear);padding-inline-start:12px}
.pp__item{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);white-space:nowrap}
.pp__list--out{width:33.2%;justify-self:end;margin-inline-end:var(--clear)}
.pp__list--out .pp__item{flex-direction:row-reverse;justify-content:flex-end;white-space:nowrap}
.pp__spark{flex:none;width:11px;height:13px;background:var(--stella);
  -webkit-mask:var(--spark) center/contain no-repeat;mask:var(--spark) center/contain no-repeat}
.pp__core{
  display:block;text-decoration:none;
  border:0;
  background:var(--paper);
  color:var(--ink);
  padding:var(--s-2) var(--s-4);
  text-align:center;
  font-size:var(--t-h3);line-height:var(--lh-h3);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  width:100%;
}
.pp__core::after{background:var(--ink)}
.pp__core:focus-visible{color:var(--paper)}
@media(hover:hover){
  .pp__core:hover{color:var(--paper)}
}
.pp__mid{position:relative;align-self:center}
.pp__note{position:absolute;left:0;right:0;top:calc(100% + var(--s-5));text-align:center;font-size:var(--t-para-md);line-height:var(--lh-para-md)}
.pp__out{display:none}

.pp__curl{position:relative;display:flex;justify-content:center;margin-top:var(--s-8)}
.pp__curl svg{width:calc(var(--s-12) * 200 / 224);height:var(--s-12);overflow:visible}
.pp__curl path{fill:none;stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:butt;stroke-linejoin:miter}

.dp{background:var(--ink);padding-block:var(--s-5) var(--s-8);text-align:center}
.dp__h{text-align:center}
.dp__stage{position:relative;isolation:isolate;margin-top:var(--s-3);display:flex;justify-content:center;align-items:center;gap:0}
.dp__filo{position:absolute;left:0;right:0;width:auto;--star-x:0%}
.dp__filo--t{top:0}
.dp__filo--b{bottom:0}
.dp__filo--t::after,.dp__filo--b::before,.dp__filo--b::after{display:none}
.dp__phone{
  position:relative;
  flex:none;width:23%;aspect-ratio:310/469;overflow:hidden;box-sizing:border-box;
  border:1px solid var(--linea);
  border-radius:var(--s-4);
  padding:var(--s-1);
  background:var(--ink);
}
.dp__phone video{width:100%;height:100%;object-fit:cover;border-radius:var(--s-3);display:block}
.dp__phone::before{
  content:"";position:absolute;z-index:2;top:calc(var(--s-1) / 2);left:50%;
  width:6px;height:6px;transform:translateX(-50%);
  border-radius:50%;background:var(--linea);pointer-events:none;
}
@property --alone{syntax:"<color>";inherits:false;initial-value:transparent}
.dp__alone{
  position:absolute;z-index:-1;left:50%;top:50%;width:60%;height:104%;
  transform:translate(-50%,-50%);pointer-events:none;
  --alone:transparent;
  background:radial-gradient(closest-side,var(--alone),transparent 76%);
  filter:blur(40px);
  transition:--alone 900ms linear;
}
.dp__stat{
  position:absolute;top:42%;margin:0;
  display:flex;flex-direction:column-reverse;
  font-size:var(--t-h2);line-height:var(--lh-h2);
}
.dp__stat--l{right:calc(61.5% + var(--s-3));text-align:right;align-items:flex-end}
.dp__stat--r{left:calc(61.5% + var(--s-3));text-align:left;align-items:flex-start}
.dp__stat dd{display:block;margin:0;font-weight:800;letter-spacing:var(--tr-h2)}
.dp__stat dt{display:block;font-style:normal;font-weight:400}
.rx{
  position:absolute;z-index:3;width:var(--sz,26px);height:var(--sz,26px);pointer-events:none;
  color:var(--accent);opacity:.01;
  animation:rx-su var(--dur,4s) cubic-bezier(.33,0,.2,1) forwards;
}
.rx svg{width:100%;height:100%;display:block}
@keyframes rx-su{
  0%{opacity:.01;transform:translate3d(0,0,0) scale(.55)}
  14%{opacity:1;transform:translate3d(calc(var(--dx,0px) * .2),calc(var(--rise,72px) / -6),0) scale(1)}
  72%{opacity:.72}
  100%{opacity:.01;transform:translate3d(var(--dx,0px),calc(var(--rise,72px) * -1),0) scale(.72)}
}
.dp__p{margin-top:var(--s-3);font-size:var(--t-para-md);line-height:var(--lh-para-md);max-width:34ch;margin-inline:auto}

.wp{padding-bottom:var(--s-8)}
.wp__top{padding-top:var(--s-9)}
.wp__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-3)}
.wp__card{position:relative;aspect-ratio:331/418;overflow:hidden;isolation:isolate}
.wp__card img{width:100%;height:100%;object-fit:cover}
.wp__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ink) 0%,transparent) 52%,
    color-mix(in srgb,var(--ink) 72%,transparent) 100%)}
.wp__link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.wp__lab{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:var(--s-4) 12px}
.wp__name{display:block;font-size:var(--t-h3);line-height:var(--lh-h3)}
.wp__at{display:block;margin-top:var(--s-1);font-size:var(--t-menu);line-height:var(--lh-menu);
  letter-spacing:var(--tr-menu);text-transform:uppercase}

.sez>*{transition:opacity var(--t-entra) var(--e-osmo)}
.sez:not(.is-dentro)>*{opacity:.25}
.sez .en{opacity:.001;transform:translateY(14px);
  transition:opacity var(--t-su) var(--e-osmo) var(--d,0ms),
             transform var(--t-su) var(--e-osmo) var(--d,0ms)}
.sez.is-dentro .en{opacity:1;transform:none}
.sez .en-m{clip-path:inset(100% 0 0 0);
  transition:clip-path var(--t-mask) var(--e-osmo) var(--d,0ms)}
.sez.is-dentro .en-m{clip-path:inset(-1px)}
.sez :is(.rule,.dp__filo,.pila__filo){
  clip-path:inset(-40px 0 -40px 0);
  transition:clip-path var(--t-linea) var(--e-osmo)}
.sez:not(.is-dentro) :is(.rule,.dp__filo,.pila__filo){clip-path:inset(-40px 100% -40px 0)}

@media (max-width:900px){
  .cl{padding-block:var(--s-8)}
  /* Correzione 6 del 9 settembre 2026. Miki: "in mobile la distanza tra il
     titolo beloved clients e lo slider dei loghi e' insufficiente e unica,
     dovrebbe essere la stessa distanza che c'e' tra awards and honors e la
     lista award". Misurato a 390 px: 1.1 px sotto il titolo dei clienti
     contro 24 px sotto quello dei premi, che e' il --s-5 di .cl__list. Il
     titolo sta in un .wrap suo, fuori dalla griglia, quindi il gap fra le
     righe non lo tocca e non c'era niente a staccarlo: qui glielo mette la
     griglia, con lo STESSO gradino della lista dei premi e non un numero
     nuovo. Solo sotto i 900 px: sulla scrivania il titolo dei clienti e'
     fuori dalla vista con la tecnica .sr e questo margine sposterebbe i
     loghi senza che si veda perche'. */
  .cl__cols{grid-template-columns:minmax(0,1fr);gap:var(--s-8);margin-top:var(--s-5)}
  /* Il titolo "Our beloved clients" non si vede piu' nemmeno sul telefono, per
     richiesta di Miki del 9 settembre sera. Qui c'era la regola che glielo
     rimetteva in vista togliendogli la tecnica .sr: tolta. Il titolo RESTA nel
     documento, invisibile, e non si cancella dalla pagina: la sezione lo nomina
     con aria-labelledby, quindi buttarlo lascerebbe senza nome la sezione per
     chi legge con la voce, e senza titolo di secondo livello per i motori. */
  /* Correzione 2 di Miki: sul telefono i loghi tornano nastri orizzontali. Qui
     il movimento e' SCORRIMENTO e non piu' translate, perche' i due non
     convivono sullo stesso elemento: solo lo scorrimento si puo' prendere col
     dito, e il dito e' la cosa che mancava. Il nastro E' il contenitore che
     scorre, cosi' il trascinamento non ha bisogno di codice: lo fa il browser.
     Lo avanza homepage.js, un giro ogni --giro invece dei 40 secondi di prima.
     Le due colonne restano tutte e due: nasconderne una toglierebbe sei
     clienti su dodici solo dal telefono. */
  /* Miki: "in mobile lo slider loghi va su una sola riga". Le due colonne
     diventano una fascia sola: la seconda non sparisce, i suoi sei loghi si
     accodano alla prima, cosi' sul telefono si vedono tutti e dodici come
     sul desktop. Lo fa il codice, spostando le celle. */
  /* Il margine negativo del desktop serve a far sporgere le colonne dentro il
     respiro della sezione: qui le colonne sono fasce orizzontali in colonna
     sola, e tenerlo vorrebbe dire farle salire sopra il titolo. */
  .cl__col{
    height:auto;min-height:0;overflow:visible;
    margin-block:0;
    border-inline:0;border-block:1px solid var(--linea);
    -webkit-mask-image:none;mask-image:none;
  }
  /* DUE NASTRI SUL TELEFONO, uno per senso, 10 settembre 2026. Miki: "non so
     neanche io se mettere due righe nel mobile, una che scorre in un senso e
     una che scorre nell'altro. Forse e' la scelta migliore".
     Qui c'era .cl__col--giu{display:none}, e il codice versava i sei loghi
     della seconda colonna dentro la prima per farne un nastro solo.
     QUESTA RIGA E' L'INTERRUTTORE, ed e' uno solo: homepage.js fonde le due
     colonne SOLO se trova questa nascosta col foglio, quindi per tornare a un
     nastro unico basta rimettere display:none qui e non si tocca il codice.
     Il margine negativo vale il gap della griglia, --s-8, e serve a incollare
     il secondo nastro sotto il primo: senza, i due si allontanerebbero di 72 px
     e non si leggerebbero piu' come due righe della stessa cosa. Il bordo alto
     si toglie perche' il bordo basso del primo e' gia' la linea che li divide,
     altrimenti in mezzo se ne vedrebbero due.
     Il senso opposto NON si scrive qui: lo decide gia' homepage.js in misura(),
     che da' verso -1 a chi sta dentro .cl__col--giu, esattamente come faceva
     l'animation-direction:reverse della scrivania.
     COSTO: le celle in movimento restano ventiquattro, dodici per nastro,
     perche' prima stavano tutte e ventiquattro nell'unico nastro fuso. In piu'
     ci sono un secondo contenitore che scorre, una seconda maschera e il
     doppio di riquadri dipinti in vista, da tre a sei. */
  .cl__col--giu{margin-top:calc(var(--s-8) * -1);border-top:0}
  /* La terza copia dei sei loghi serve solo al giro verticale del desktop, che
     e' alto quanto la sezione. Qui il giro e' orizzontale e lo conta il codice
     come meta' del nastro: lasciandola, il conto e la velocita' cambierebbero
     senza che nessuno l'abbia chiesto. */
  .cl__cell--x3{display:none}
  .cl__logos{
    --giro:32s;
    position:static;
    display:flex;animation:none;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    /* La sfumata scende da 10 a 4 per cento perche' la cella si e' stretta a
       un terzo dello schermo: a 390 px il dieci per cento sono 34 px, cioe' il
       30 per cento del primo e dell'ultimo dei tre loghi che Miki vuole
       vedere, e li spegneva proprio mentre glieli si mostrava. Al quattro per
       cento sono 14 px, l'orlo resta morbido e i tre restano pieni. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .cl__logos::-webkit-scrollbar{display:none}
  /* i punti di fermata servono al dito, non al movimento automatico: si
     accendono solo mentre e' la mano a comandare, altrimenti tirerebbero
     indietro il nastro a ogni fotogramma */
  .cl__logos.is-mano{scroll-snap-type:x proximity}
  .cl__logos.is-mano .cl__cell{scroll-snap-align:center}
  /* Miki, 9 settembre sera: "e qui vorrei vederne 3 insieme", e insieme a
     questo "andrebbero messi della giusta dimensione come nel desktop,
     dovrebbero essere le stesse immagini". Le immagini sono gia' le stesse
     del desktop: non c'e' srcset, non c'e' un file col suffisso, non c'e'
     una regola che ne serva altre sotto i 900 px. Quello che cambiava era la
     misura della cella: 150 px fissi dentro la gabbia del telefono, che e'
     342 px a 390 (390 meno i 24 di --clear per lato), cioe' 2.28 celle in
     vista. Ne entravano due e una fetta.
     Un TERZO del contenitore ne fa entrare tre interi a qualunque larghezza
     di telefono senza un numero nuovo da mantenere: 114 px a 390, 109 a 375,
     115 a 393, 128 a 430. La percentuale si risolve sulla larghezza del
     nastro, che e' definita perche' e' la colonna della griglia, e la cella
     tiene il suo rapporto 214/140, quindi l'inchiostro dentro il riquadro
     resta nella stessa proporzione del desktop: cambia la scala, non il peso.
     LE IMMAGINI SONO EAGER, e la ragione sta qui e non nel foglio: le dodici
     tele vere hanno perso loading="lazy" e hanno preso fetchpriority="low".
     Su questo nastro il pigro faceva danno invece che bene, perche' il
     browser conta la vicinanza allo SCHERMO e non al nastro: dei ventiquattro
     riquadri in fila ne erano vicini tre o quattro, e gli altri partivano a
     scaricare uno alla volta man mano che il nastro li portava dentro. Da qui
     i loghi che "ci mettono molto a caricare" e compaiono a uno a uno. Adesso
     partono tutti col resto della pagina ma in fondo alla fila delle
     priorita', quindi non rubano banda al filmato di apertura: dodici file
     per 167 KB in tutto. I ventiquattro doppioni restano lazy e non costano
     una richiesta, perche' puntano agli stessi dodici indirizzi. */
  .cl__cell{flex:0 0 calc(100% / 3);border-bottom:0;border-right:1px solid var(--linea)}
  .cl__aw{order:1;padding-inline:0}
  /* PRIMA I LOGHI, POI I PREMI, 10 settembre 2026. Miki: "la sezione Awards e
     Honors compare prima dei loghi nel mobile, non va bene perche' i loghi sono
     sopra". Il posto era gia' giusto, misurato a 390x844: il nastro sta a 940
     px e l'albo a 1089, quindi i loghi SONO sopra. Sbagliato era il momento.
     Le celle dei loghi partivano con due gradini di ritardo (var(--stg-step) *
     2, cioe' 110 ms), che sulla scrivania servono a farle entrare dopo il
     titolo; le righe dell'albo partivano da zero. Risultato: sul telefono le
     prime due righe dei premi entravano prima del nastro che sta sopra di
     loro. Qui i due ritardi si scambiano, cosi' la cascata segue l'occhio
     dall'alto in basso. Solo sotto i 900 px: sulla scrivania i loghi stanno ai
     fianchi dell'albo e non sopra, e li' il ritardo dopo il titolo resta. */
  .cl.sez.is-dentro .cl__logos.stg>*{animation-delay:var(--d,0ms)}
  .cl.sez.is-dentro .cl__list>li.en{transition-delay:calc(var(--stg-step) * 2 + var(--d,0ms))}
  /* Correzione 3 di Miki, quattro premi in vista e gli altri cinque dietro un
     bottone: le cinque regole che lo facevano stavano qui dentro e adesso
     stanno in cima al foglio, senza cancello di larghezza, perche' dal 9
     settembre sera il bottone lo vuole anche sulla scrivania. Qui non serve
     piu' niente: quello che c'era e' esattamente quello che c'e' sopra. */
  .sel__t{font-size:clamp(48px,11.4vw,var(--t-display))}
  .sel__basso{min-width:0;max-width:100%}
  .sel__ctl{min-width:0;width:100%;max-width:100%}
  .pp__head{grid-template-columns:minmax(0,1fr);margin-inline:0}
  .pp__lead{margin-top:var(--s-4);padding-bottom:0}
  .pp__wires{display:none}
  .pp__grid{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .pp__list{gap:var(--s-5)}
  .pp__list--in,.pp__list--out{width:100%;margin-inline:0}
  .pp__list--in{margin-bottom:calc(var(--s-8) - var(--s-3))}
  .pp__mid{position:static}
  .pp__note{position:static;margin-top:var(--s-5)}
  .pp__out{display:block;margin-top:calc(var(--s-8) - var(--s-3));padding-inline-start:12px}
  .pp__list--out{padding-inline-start:12px}
  .pp__list--in .pp__item,.pp__list--out .pp__item{flex-direction:row-reverse;justify-content:flex-end}
  .pp__core{min-width:0}
  .dp__stage{flex-direction:row;align-items:center;justify-content:center;
    gap:var(--s-1);margin-top:var(--s-6)}
  .dp__p{margin-top:var(--s-6)}
  .dp__filo,.dp__alone{display:none}
  .rx{display:none}
  .dp__phone{width:62%}
  .dp__stat{
    position:static;flex:1 1 0;min-width:0;
    writing-mode:vertical-rl;text-orientation:mixed;
    flex-direction:row-reverse;align-items:center;justify-content:center;
    font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:normal;
    text-align:center;white-space:nowrap;
  }
  .dp__stat--l,.dp__stat--r{text-align:center;left:auto;right:auto}
  .dp__stat dd{letter-spacing:normal}
  .wp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp__name{font-size:var(--t-h2);line-height:var(--lh-h2)}
  .wp__lab{padding:var(--s-3) 12px}
}
@media (max-width:640px){
  .wp__grid{gap:var(--s-3)}
}
@media (prefers-reduced-motion: reduce){
  .cl__logos{animation:none !important}
  .cl__extra{transition:none !important}
  .sez>*,.sez:not(.is-dentro)>*,.sez .en,.sez.is-dentro .en{
    opacity:1 !important;transform:none !important;transition:none !important}
  .sez :is(.rule,.dp__filo,.pila__filo),
  .sez:not(.is-dentro) :is(.rule,.dp__filo,.pila__filo),
  .sez .en-m,.sez.is-dentro .en-m{
    clip-path:none !important;transition:none !important}
  .sel__slide,.sel__pane{transition:none}
  .sel__bg{transform:none !important}
  .pp__stage.rv :is(.pp__spark,.pp__item span,.pp__core,.pp__note){
    opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  .pp__stage.rv .pp__wires path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .rx{display:none !important}
  .pp__curl path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}

.pp__core--disco{
  position:relative;isolation:isolate;display:block;
  width:var(--s-12);height:var(--s-12);
  margin-inline:auto;padding:0;
  background:none;border:0;text-decoration:none;
  color:var(--paper);
  letter-spacing:normal;text-transform:none;
}
.pp__core--disco::after{content:none;display:none}
.pp__core--disco::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper);border-radius:50%;
  transform:scale(0);transform-origin:center;
  transition:transform var(--t-band) var(--e-band);
}
.pp__stage.rv .pp__core--disco,
.pp__stage.rv.is-in .pp__core--disco,
.pp__stage.rv.is-done .pp__core--disco{
  clip-path:none;opacity:1;transform:none;transition:none}
.core__disco{position:absolute;inset:0;display:block}
.core__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.core__filo{
  fill:none;stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke;
  transition:stroke var(--t-band) var(--e-band)}
.core__parole{
  fill:var(--paper);font-size:var(--t-h3);font-weight:700;text-transform:uppercase;
  transition:fill var(--t-band) var(--e-band)}
.core__ruota{
  transform-box:view-box;transform-origin:center;
  animation:core-giro 34s linear infinite;animation-play-state:paused}
.core__spark{
  position:absolute;left:50%;top:50%;
  width:var(--s-8);height:var(--s-8);
  margin:calc(var(--s-8) / -2) 0 0 calc(var(--s-8) / -2);
  background:var(--paper);
  -webkit-mask:var(--spark) center/contain no-repeat;
  mask:var(--spark) center/contain no-repeat;
  transform-origin:center;
  transition:background var(--t-band) var(--e-band);
  animation:core-respiro 4200ms ease-in-out infinite;animation-play-state:paused}
.pp__core--disco.is-motore .core__ruota,
.pp__core--disco.is-motore .core__spark{animation-play-state:running}
.pp__core--disco:focus-visible::before{transform:scale(1)}
.pp__core--disco:focus-visible .core__filo{stroke:var(--ink)}
.pp__core--disco:focus-visible .core__parole{fill:var(--ink)}
.pp__core--disco:focus-visible .core__spark{background:var(--ink)}
@media(hover:hover){
  .pp__core--disco:hover::before{transform:scale(1)}
  .pp__core--disco:hover .core__filo{stroke:var(--ink)}
  .pp__core--disco:hover .core__parole{fill:var(--ink)}
  .pp__core--disco:hover .core__spark{background:var(--ink)}
}
@keyframes core-giro{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes core-respiro{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(8deg) scale(1.1)}
  100%{transform:rotate(0deg) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .core__ruota,.core__spark{animation:none !important;transform:none !important}
  .pp__core--disco::before,.core__filo,.core__parole,.core__spark{transition:none !important}
}

@media (max-width:1080px),(pointer:coarse){
  .sel__case{display:none}
}

/* TOLTE l'8 settembre 2026 con il blocco Vimeo di homepage.js: .pila__mount
   non compare in nessun HTML del sito, lo cercava solo quel blocco morto. */

@media (max-width:1080px){
  .pila:not(.is-viva) .pila__stage{padding-top:var(--s-9);padding-bottom:var(--s-6)}
}