/* ==== impianto di pagina ==== */
.shell{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--section-y);padding-bottom:var(--section-y)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.lenis{scroll-behavior:auto}

/* ==== il fascio: puntatore-proiettore che inverte i colori ==== */
html.fascio-on body{cursor:none}
/* niente manina: sui cliccabili il cursore e' l'anello giallo di aggancio */
html.fascio-on a,html.fascio-on button{cursor:none}
/* col fascio attivo la manina di sistema non esiste MAI: l'anello giallo di
   aggancio e' l'unico cursore, su qualsiasi elemento (carte, tasti, elenchi) */
html.fascio-on *{cursor:none!important}
#fascio{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:2000;transform:translate(-50%,-50%);transition:width 300ms var(--ease-out),height 300ms var(--ease-out),opacity 260ms var(--ease-out)}
#fascio.grande{width:84px;height:84px}
#fascio.spento{opacity:0}
/* sull'aggancio il pallino si stringe e sfuma mentre l'anello giallo sboccia
   dal suo centro: dissolvenza incrociata, mai piu' lo scatto di colore */
#fascio.aggancio{width:6px;height:6px;opacity:0}
#fascio.carica{width:26px;height:26px}
#fascio-aggancio{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2000}
#fascio-aggancio::before{content:"";position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;border:2px solid var(--yellow-500);transform:translate(-50%,-50%) scale(.37);opacity:0;transition:opacity 260ms var(--ease-out),transform 300ms var(--ease-out)}
#fascio-aggancio.aggancio::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
#fascio-aggancio.spento::before{opacity:0}
/* ==== il pacchetto effetti del fascio (la regia: EFFETTI-FASCIO.md) ==== */
/* Un disco sovrapposto al fascio veste i titoli. I sobri partono col fascio,
   i quattro di colore emergono solo dopo ~700ms di permanenza (classe armato).
   Buio in sala vive solo sul payoff della home. */
#fascio-fx{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2001}
#fascio-fx::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:width 300ms var(--ease-out),height 300ms var(--ease-out),opacity 500ms var(--ease-out)}
#fascio-fx.on::before{width:84px;height:84px}
/* quando un effetto prende il posto del pallino (buio, triangolo) il pallino
   NON si allarga sotto: si stringe e sfuma, come fa sull'aggancio. Altrimenti
   per un quarto di secondo si vede il cerchione grande al posto della forma. */
#fascio.celato{opacity:0;width:6px;height:6px;transition:width 200ms var(--ease-out),height 200ms var(--ease-out),opacity 130ms var(--ease-out)}
/* il buio resta disegnato anche fuori dal titolo: cosi' l'uscita e' una
   dissolvenza morbida, non uno spegnimento a interruttore */
#fascio-fx.fx-buio::before{width:150px;height:150px;background:transparent;box-shadow:0 0 0 200vmax rgba(15,14,12,.92);transition:opacity 700ms var(--ease-out)}
#fascio-fx.on.fx-buio::before{opacity:1;transition:opacity 350ms var(--ease-out)}
#fascio-fx.fx-polvere{mix-blend-mode:multiply}
#fascio-fx.on.fx-polvere::before{opacity:1;background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22/></filter><rect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22/></svg>');animation:fx-grana .35s steps(4) infinite}
@keyframes fx-grana{0%{background-position:0 0}25%{background-position:37px 61px}50%{background-position:89px 22px}75%{background-position:14px 96px}100%{background-position:0 0}}
/* l'animazione parte DOPO i 300ms della transizione: un'animazione CSS batte
   sempre una transizione, e partendo subito imponeva 84px al primo fotogramma,
   cioe' lo scatto. Con l'attesa il pallino si apre morbido e poi respira. */
#fascio.grande.fx-respiro{animation:fx-resp 2.2s ease-in-out 300ms infinite}
@keyframes fx-resp{0%,100%{width:84px;height:84px}50%{width:67px;height:67px}}
#fascio.grande.fx-blob{animation:fx-blob 3.2s ease-in-out infinite}
@keyframes fx-blob{0%,100%{border-radius:50%}25%{border-radius:46% 54% 51% 49%/52% 47% 53% 48%}50%{border-radius:53% 47% 45% 55%/48% 54% 46% 52%}75%{border-radius:47% 53% 55% 45%/53% 46% 52% 47%}}
#fascio-fx.fx-triangolo{mix-blend-mode:difference}
/* Il triangolo compare in 240ms, mentre il pallino sfuma in 130: quando la forma
   si vede, il pallino non c'e' gia' piu'. La FORMA (bianco, punte, rotazione) sta
   su questa regola e non su .on: altrimenti allo spegnimento il triangolo
   tornerebbe cerchio a meta' della dissolvenza. Con .on cambiano solo la misura
   e l'opacita', cioe' le due cose che sanno transire. */
#fascio-fx.fx-triangolo::before{border-radius:0;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%);animation:fx-gira 26s linear infinite;transition:width 300ms var(--ease-out),height 300ms var(--ease-out),opacity 240ms var(--ease-out)}
#fascio-fx.on.fx-triangolo::before{opacity:1;width:84px;height:74px}
@keyframes fx-gira{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
#fascio-fx.fx-aurora{mix-blend-mode:multiply}
#fascio-fx.armato.fx-aurora::before{opacity:1;background:linear-gradient(100deg,rgba(0,229,176,0) 10%,rgba(0,229,176,.55) 32%,rgba(123,92,255,.45) 55%,rgba(0,229,176,0) 80%);background-size:260% 260%;filter:blur(6px);animation:fx-aur 4.5s ease-in-out infinite}
@keyframes fx-aur{0%,100%{background-position:0% 0%}50%{background-position:90% 60%}}
#fascio-fx.fx-ologramma{mix-blend-mode:multiply}
#fascio-fx.armato.fx-ologramma::before{opacity:.85;background:conic-gradient(from var(--oang,0deg),#ffd9ec,#d9f3ff,#fff6c9,#e3d9ff,#d3ffe9,#ffd9ec)}
.fascio-onda{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:2001;border:3px solid #00e5b0;mix-blend-mode:multiply;animation:fx-onda 1.1s ease-out forwards}
@keyframes fx-onda{0%{width:10px;height:10px;opacity:.9}100%{width:110px;height:110px;opacity:0}}
#fascio-tela{position:fixed;inset:0;pointer-events:none;z-index:2001;mix-blend-mode:multiply}
/* i triangolini dell'esplosione (▲ in Inter, neri e bianchi) */
.tri{position:fixed;left:0;top:0;z-index:4000;pointer-events:none;font-family:var(--font-sans);line-height:1;will-change:transform,opacity;user-select:none} /* sopra il sipario (3000): l'esplosione non si taglia cambiando pagina */
.tri-orb{position:fixed;left:0;top:0;z-index:1999;pointer-events:none;font-family:var(--font-sans);line-height:1;will-change:transform,opacity;user-select:none}

/* ==== testata fissa ==== */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--veil-header);backdrop-filter:var(--blur-header);-webkit-backdrop-filter:var(--blur-header);border-bottom:var(--rule)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:14px var(--gutter)}
.brand{border:none;display:flex;align-items:center}
.brand img{height:35px;width:auto;display:block}
.brand .picto{display:none;height:30px}
/* menu: lettere che si sollevano una a una + sottolineatura che scorre */
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav a{font-weight:700;font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary-sm);border:none;padding-bottom:4px;position:relative;background-image:linear-gradient(var(--yellow-500),var(--yellow-500));background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;transition:background-size var(--dur-base) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.nav a:hover{color:var(--text-primary);background-size:100% 2px}
.nav a .lt{display:inline-block;transition:transform 260ms var(--ease-out);transition-delay:calc(var(--i)*22ms)}
.nav a:hover .lt{transform:translateY(-3px)}
/* lampo al click: una fascia gialla attraversa la voce dal basso verso l'alto */
.nav a .lt{position:relative;z-index:1}
.nav a.lampo::after{content:"";position:absolute;left:-6px;right:-6px;top:-4px;bottom:-2px;background:var(--yellow-500);z-index:0;animation:nav-lampo 460ms var(--ease-out)}
@keyframes nav-lampo{0%{transform:scaleY(0);transform-origin:bottom}49.9%{transform:scaleY(1);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:top}}
/* il conta-clic accanto al logo (solo home): il gioco dell'esplosione tiene
   il punteggio. 5 secondi senza cliccare e il tabellino svanisce azzerandosi;
   a quota 20, e poi a soglie casuali, un applauso lampo */
.contaclic{display:inline-flex;align-items:center;gap:10px;margin-left:16px;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity 360ms var(--ease-out),transform 360ms var(--ease-out)}
.contaclic.on{opacity:1;transform:none}
.contaclic b{font-family:var(--font-mono);font-weight:normal;font-size:15px;line-height:1;background:var(--yellow-500);color:var(--fa1-black);padding:4px 8px;display:inline-block}
.contaclic b.pop{animation:cc-pop 220ms var(--ease-out)}
@keyframes cc-pop{0%{transform:scale(1.4)}100%{transform:scale(1)}}
.contaclic .lode{font-family:var(--font-mono);font-style:normal;font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-primary);opacity:0;transform:translateX(-8px);transition:opacity 180ms var(--ease-out),transform 260ms var(--ease-out)}
.contaclic .lode.qui{opacity:1;transform:translateX(0)}
@media (max-width:640px){.contaclic{margin-left:10px;gap:7px;position:relative}.contaclic b{font-size:12px;padding:2px 5px}.contaclic .lode{position:absolute;top:calc(100% + 6px);left:0;font-size:10px;letter-spacing:.12em;white-space:nowrap}}
@media (max-width:640px){
  .brand .word{display:none}.brand .picto{display:block}
  .nav{gap:10px}
  /* le voci restano intere: niente parole spezzate su schermi stretti */
  .nav a{font-size:var(--size-label-s);letter-spacing:0.05em;white-space:nowrap}
}

/* ==== apertura (Home B: la pagina bianca) ==== */
/* il primo schermo si chiude esatto: header (14+35+14+1 = 64px) + hero
   = altezza della finestra, lo showreel resta sotto la piega */
.hero{position:relative;border-bottom:var(--rule);overflow:hidden;min-height:calc(100svh - 64px);display:flex;align-items:center}
.hero .sabbia{position:absolute;inset:0;display:block;pointer-events:none}
.hero .inner{position:relative;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-7);padding-top:var(--space-10);padding-bottom:var(--space-10)}
.hero h1{font-size:var(--size-display-xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:var(--leading-display);max-width:14ch}
.hero .sub{font-size:var(--size-body-l);font-weight:var(--weight-light);line-height:1.5;color:var(--text-primary);max-width:44ch}
.hero .gare{font-size:var(--size-body-s);line-height:1.55;color:var(--text-secondary)}
/* il titolo entra per righe mascherate, come il resto della pagina */
@media (max-width:640px){.hero .inner{padding-top:var(--space-9);padding-bottom:var(--space-9)}}

/* ==== bottone primario: colata di nero al passaggio ==== */
/* Hover del tasto: un solo gesto. Il cuneo tiene la sua forma per tutto il
   viaggio (pura traslazione, niente ricalcoli), il testo cambia colore con un
   filo di ritardo mentre la tenda gli passa sotto, la freccia viaggia insieme.
   Niente animazione della spaziatura: rifluiva il testo a ogni frame. */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;background:var(--yellow-500);color:var(--text-on-accent);padding:14px 22px;border:none;transition:color 300ms var(--ease-out)}
.btn>span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:-2px;background:var(--fa1-black);transform:translateX(-115%) skewX(-12deg) scaleX(1.25);transform-origin:right;transition:transform 420ms var(--ease-out)}
.btn:hover{color:var(--fa1-white);transition-delay:70ms}
/* sui tasti che entrano col reveal, la regola .rv soppianterebbe la
   transizione del colore: qui si tengono insieme le due cose */
html.js-anim .btn.rv{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out),color 300ms var(--ease-out)}
html.js-anim .btn.rv:hover{transition-delay:0ms,0ms,70ms}
.btn:hover::before{transform:translateX(0) skewX(-12deg) scaleX(1.25)}
.btn .freccia{display:inline-block;transition:transform 420ms var(--ease-out)}
.btn:hover .freccia{transform:translateX(6px)}

/* CTA secondaria in mono con freccia */
.cta-mono{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-primary);border:none;background-image:linear-gradient(var(--fa1-black),var(--fa1-black));background-repeat:no-repeat;background-position:left bottom;background-size:100% 1px;padding-bottom:3px;transition:background-size var(--dur-base) var(--ease-out)}
.cta-mono:hover{background-image:linear-gradient(var(--yellow-500),var(--yellow-500));background-size:100% 2px}
.cta-mono .freccia{display:inline-block;transition:transform var(--dur-base) var(--ease-out)}
.cta-mono:hover .freccia{transform:translateX(5px)}

/* ==== irruzione fotografica ==== */
.irruzione{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--fa1-black)}
.irruzione .media{position:absolute;inset:0;background:var(--fa1-black)}
/* Showreel YouTube: la sezione ha il formato esatto del video (mai un taglio,
   regola del 22 agosto) e l'iframe vive sotto uno scudo che blocca ogni click.
   Il player resta coperto dal nero finche' non riproduce: in pausa o all'avvio
   YouTube mostra miniatura, titolo e link, e qui non si devono vedere. */
.irruzione .media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity 600ms var(--ease-out)}
.irruzione .media.in-moto iframe{opacity:1}
.sr-scudo{position:absolute;inset:0;z-index:1}
.sr-audio,.sr-play{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fa1-white);background:rgba(15,14,12,.55);border:1px solid rgba(255,255,255,.4);border-radius:50%;backdrop-filter:blur(4px);transition:background 260ms var(--ease-out),transform 260ms var(--ease-out),opacity 320ms var(--ease-out)}
.sr-audio{right:var(--gutter);bottom:var(--space-6);width:52px;height:52px}
.sr-play{top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px}
.sr-audio:hover,.sr-play:hover{background:rgba(15,14,12,.78)}
.sr-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.sr-audio.via,.sr-play.via{opacity:0;pointer-events:none}
.sr-audio svg,.sr-play svg{display:block}
.ph-label{position:relative;font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label-wide);text-transform:uppercase;color:var(--text-secondary);text-align:center;max-width:56ch;padding:var(--space-6)}

/* ==== blocchi a due colonne ==== */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-8)}
.sec-head{position:relative;display:flex;flex-direction:column;gap:var(--space-4);border-top:var(--rule-strong);padding-top:var(--space-4);container-type:inline-size}
.sec-head h2{font-size:var(--size-h1);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);line-height:var(--leading-tight);max-width:24ch}
/* sul filo della riga scorre in loop continuo un triangolino nero (Inter).
   Scelta di Fabio del 16 agosto: e' una deroga al tetto "massimo un triangolo
   per composizione" del Manuale (la firma del menu lo consuma gia'), da
   registrare nel Manuale se resta nel sito definitivo. Loop = --ease-linear. */
/* la corsa e il saltello sono guidati dal motore (5c) via --trix/--triy:
   solo transform, mai layout; con motion ridotto resta fermo a inizio riga */
.sec-head::after{content:"▲";font-family:var(--font-sans);font-size:12px;line-height:1;color:var(--fa1-black);position:absolute;top:-7px;left:0;transform:translate(var(--trix,0px),var(--triy,0px));will-change:transform;pointer-events:none}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}}

/* Le cifre di polvere (sezione I numeri): il canvas vive solo quando il motore
   gira (classe .viva aggiunta da JS); su tocco, motion ridotto o senza JS
   restano le cifre di testo statiche, stesse posizioni. */
/* la bilancia: testo a sinistra, griglia 3x2 delle cifre a destra;
   su schermi stretti il testo passa sopra e le cifre sotto */
.numeri-due{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7);align-items:center}
.numeri-due .fa1-label{display:block;margin-bottom:var(--space-5)}
.numeri-lato.sola .fa1-label{margin-bottom:0} /* etichetta sola: niente stacco sotto */
.numeri-due.numeri-riga{grid-template-columns:minmax(0,1fr);gap:var(--space-7)} /* etichetta sopra, cifre su una riga sola */
@media (max-width:900px){.numeri-due{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}
/* i due quadri da tre cifre impilati formano la griglia 3x2 */
.cifre-fila{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.cifre-quadro{display:flex;flex-direction:column;gap:4px;min-width:0}
.cifre-quadro canvas{display:none;width:100%}
.cifre-quadro.viva canvas{display:block;pointer-events:none}
/* il canvas sfoga oltre la colonna (margini negativi impostati dal motore):
   la sezione taglia al proprio bordo per non creare scroll orizzontale */
#numeri{overflow:hidden}
.cifre-quadro.viva .cifre-statiche{display:none}
.cifre-statiche{display:grid;grid-template-columns:repeat(var(--slot,3),1fr);text-align:center;font-weight:var(--weight-semibold);font-size:clamp(22px,2.8vw,36px);line-height:1;letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.cifre-dida{display:grid;grid-template-columns:repeat(var(--slot,3),1fr);gap:var(--space-4);text-align:center;font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label-wide);text-transform:uppercase;color:var(--text-secondary)}
/* Le stesse cifre in due impaginazioni: un rigo solo da cinque sul monitor,
   due righe da tre e due sul telefono, dove cinque caselle ridurrebbero la
   polvere a una macchia. Ne vive una alla volta. */
/* Riga corta centrata rispetto a quella sopra: le due cifre occupano due
   caselle su tre, e il gruppo sta in mezzo invece che a sinistra. */
.cifre-quadro.centrata .cifre-statiche,
.cifre-quadro.centrata .cifre-dida{grid-template-columns:repeat(var(--cifre),1fr);width:calc(var(--cifre) / var(--slot) * 100%);margin-inline:auto}
.cifre-quadro.solo-stretto{display:none}
@media (max-width:900px){
  .cifre-quadro.solo-largo{display:none}
  .cifre-quadro.solo-stretto{display:flex}
}

/* la citazione fuori scala di Chi siamo: quattro righe monumentali con
   maschera e punto finale giallo. I .timbro nel paragrafo sono
   l'evidenziatore che cammina: si accendono uno alla volta con lo scroll
   (motore 6c) e si spengono risalendo. */
.citazione{margin:0;font-size:clamp(2.6rem,6.2vw,4.9rem);font-weight:var(--weight-semibold);line-height:1.07;letter-spacing:var(--tracking-heading);color:var(--text-primary)}
.citazione .punto{font-style:normal;color:var(--yellow-500)}
.timbro{font-family:var(--font-mono);font-size:.9em;padding:0.04em 0.3em;margin:0 -0.06em;transition:background-color 460ms var(--ease-out),color 460ms var(--ease-out)}
.timbro.on{background:var(--fa1-black);color:var(--fa1-white)}

/* l'etichetta di sezione che e' anche la porta della pagina: niente doppio
   "Chi siamo", il cartellino in alto naviga (filetto giallo + freccia) */
a.label-cta{display:inline-flex;align-items:center;border:none;color:inherit;background-image:linear-gradient(var(--yellow-500),var(--yellow-500));background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;padding-bottom:3px;transition:background-size var(--dur-base) var(--ease-out)}
a.label-cta:hover{background-size:100% 2px}
a.label-cta .freccia{display:inline-block;width:0;opacity:0;overflow:hidden;transform:translateX(-6px);margin-left:0;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out),width 240ms var(--ease-out),margin-left 240ms var(--ease-out)}
a.label-cta:hover .freccia{width:1.1em;opacity:1;transform:none;margin-left:8px}

/* ==== card servizio: bordo che si disegna, ombra in dissolvenza ==== */
.g-servizi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-5)}
/* L'area sensibile (.sc) resta ferma: si alza solo il contenuto (.sc-in).
   Cosi' il mouse sul bordo basso non entra nel loop alzati/abbassati.
   L'ombra e' pre-disegnata su un livello fisso e appare per sola opacita':
   il browser la compone sulla GPU invece di ridisegnarla a ogni fotogramma. */
.sc{position:relative;grid-column:span 2;min-height:220px;display:flex}
.sc:nth-child(4),.sc:nth-child(5){grid-column:span 3}
.sc::before{content:"";position:absolute;inset:0;box-shadow:var(--shadow-media);opacity:0;transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out);pointer-events:none}
/* l'ombra si alza INSIEME alla card: se restasse ferma, nei 4px scoperti
   sotto il bordo comparirebbe una righetta grigia di ombra spalmata */
.sc:hover::before{opacity:1;transform:translateY(-4px)}
.sc-in{position:relative;flex:1;background:var(--surface-base);border:1px solid var(--border-hairline);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;transition:transform 480ms var(--ease-out)}
.sc:hover .sc-in{transform:translateY(-4px)}
.sc-in::before,.sc-in::after{content:"";position:absolute;pointer-events:none;background:var(--yellow-500)}
.sc-in::before{top:-1px;left:0;height:2px;width:0;transition:width var(--dur-slow) var(--ease-out)}
.sc-in::after{top:-1px;right:-1px;width:2px;height:0;transition:height var(--dur-slow) var(--ease-out)}
.sc:hover .sc-in::before{width:100%}
.sc:hover .sc-in::after{height:40%;transition-delay:180ms}
.sc .idx{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label-wide);color:var(--text-accent);transition:transform var(--dur-base) var(--ease-out)}
.sc:hover .idx{transform:translateX(6px)}
.sc h3{font-size:var(--size-h3);font-weight:var(--weight-semibold);letter-spacing:-0.01em;line-height:var(--leading-heading)}
.sc p{font-size:var(--size-body-s);line-height:1.55;color:var(--text-secondary)}
@media (max-width:960px){.g-servizi{grid-template-columns:minmax(0,1fr)}.sc,.sc:nth-child(4),.sc:nth-child(5){grid-column:auto;min-height:0}}

/* ==== Studio: il manifesto (la lettera del deck, evidenziazioni nere
   da Manuale cap. 20 tramite i .timbro che camminano con lo scroll) ==== */
.claim-studio{margin:0;font-size:clamp(2rem,4.6vw,3.6rem);font-weight:var(--weight-semibold);line-height:1.12;letter-spacing:var(--tracking-heading);max-width:22ch}
.claim-studio .punto{font-style:normal;color:var(--yellow-500)}
.lettera{display:flex;flex-direction:column;gap:1.4em;max-width:var(--measure-prose)}
.lettera p{font-size:var(--size-body-l);font-weight:var(--weight-light);line-height:1.7;color:var(--text-primary)}
.lettera .firma{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label-wide);color:var(--text-secondary);margin-top:var(--space-5)}
.date-riga{display:flex;gap:var(--space-6);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label-wide);color:var(--text-secondary)}
.date-riga b{color:var(--text-primary);font-weight:var(--weight-medium)}

/* ==== Echi di Roma: tre ritratti affiancati al posto della copertina 16:9
   (deroga scelta da Fabio, 18 agosto 2026: il materiale e' solo verticale) ==== */
.fila-ritratti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.fila-ritratti .frame.foto{aspect-ratio:9/16}
.fila-ritratti.quadra .frame.foto{aspect-ratio:3/4} /* Leonardo Immaginato: materiale 4:5 e 3:4 */
/* coda-due: quando l'ultima riga ha due sole foto, si centrano invece di lasciare
   un vuoto a destra. Sei colonne con span 2 danno la stessa larghezza di tre. */
.fila-ritratti.coda-due{grid-template-columns:repeat(6,minmax(0,1fr))}
.fila-ritratti.coda-due .frame{grid-column:span 2}
.fila-ritratti.coda-due .frame:nth-last-child(2){grid-column:2/span 2}
@media (max-width:960px){.fila-ritratti{grid-template-columns:minmax(0,1fr)}.fila-ritratti .frame.foto{aspect-ratio:3/4}}
@media (max-width:960px){.fila-ritratti.coda-due{grid-template-columns:minmax(0,1fr)}.fila-ritratti.coda-due .frame,.fila-ritratti.coda-due .frame:nth-last-child(2){grid-column:auto}}

/* ==== chi siamo al buio: la citazione appoggiata a una fotografia scura ==== */
.chi-buio{position:relative;overflow:hidden}
.chi-buio>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45)}
.chi-buio .dentro{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start;padding-top:var(--space-9);padding-bottom:var(--space-9)}
.chi-buio .chi-label{color:var(--fa1-white)}
.chi-buio .citazione{color:var(--fa1-white)}
.chi-buio .chi-riga{color:var(--fa1-white);opacity:.85;font-weight:var(--weight-light);max-width:var(--measure-prose)}

/* ==== cosa facciamo, forma compatta: la versione estesa vive in servizi.html ==== */
.g-servizi-mini{display:flex;flex-direction:column;border-top:var(--rule)}
.g-servizi-mini .sm{display:flex;align-items:baseline;gap:var(--space-6);padding:var(--space-5) var(--space-3);border-bottom:var(--rule)}
.g-servizi-mini .idx{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label-wide);color:var(--text-accent)}
.g-servizi-mini .tit{font-size:var(--size-h3);font-weight:var(--weight-semibold);letter-spacing:-0.01em;line-height:var(--leading-heading)}
@media (max-width:960px){.g-servizi-mini .sm{gap:var(--space-4);padding:var(--space-4) 0}}

/* ==== card progetto ==== */
.g-progetti{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-5);row-gap:var(--space-8)}
.pc{display:flex;flex-direction:column;gap:var(--space-4);border:none}
.pc.land{grid-column:span 3}
.pc.port{grid-column:span 2}
.pc .frame{position:relative;overflow:hidden;width:100%;background:var(--surface-media);display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center}
.pc .frame::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--yellow-500);transition:width var(--dur-slow) var(--ease-out)}
.pc:hover .frame::after{width:100%}
.pc .frame .ph-label{transition:transform var(--dur-slow) var(--ease-out)}
.pc:hover .frame .ph-label{transform:scale(1.04)}
.pc.land .frame{aspect-ratio:var(--ratio-landscape)}
.pc.port .frame{aspect-ratio:var(--ratio-portrait)}
.pc h3{font-size:var(--size-h3);font-weight:var(--weight-semibold);letter-spacing:-0.01em}
.pc .meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pc .meta span{font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary-sm);border:1px solid var(--border-hairline);padding:3px 8px;white-space:nowrap;transition:border-color var(--dur-fast) var(--ease-out)}
.pc:hover .meta span{border-color:var(--border-strong)}
@media (max-width:960px){.g-progetti{grid-template-columns:repeat(2,minmax(0,1fr))}.pc.land,.pc.port{grid-column:auto}}
@media (max-width:640px){.g-progetti{grid-template-columns:minmax(0,1fr)}}

/* ==== clienti ==== */
.gruppo{display:flex;flex-direction:column;gap:var(--space-4)}
.gruppo .etichetta{display:flex;align-items:center;gap:var(--space-3)}
.gruppo .etichetta b{font-size:var(--size-body);font-weight:var(--weight-medium);color:var(--text-primary)}
.gruppo .etichetta i{flex:1;height:1px;background:var(--border-hairline);font-style:normal}
.loghi{display:grid;gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline)}
.loghi.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.loghi.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.loghi>div{position:relative;overflow:hidden;background:var(--surface-base);min-height:96px;display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center}
.loghi>div>span{position:relative;z-index:1;transition:color 260ms var(--ease-out) 90ms}
.loghi>div.coperta>span{color:var(--fa1-white)}
/* la fascia nera entra dal lato da cui arriva il mouse ed esce dal lato da cui
   esce, con cinque tessiture pescate a caso: pieno, linee, pixel, scatti, sbieco.
   Le posizioni fuori/dentro le detta il JavaScript; qui vivono solo le transizioni. */
.fascia{position:absolute;inset:0;pointer-events:none}
.fascia.pieno,.fascia.scatti,.fascia.sbieco{background:var(--fa1-black)}
.fascia,.fascia>i,.fascia>b{transition:transform 400ms var(--ease-out);will-change:transform}
.fascia.scatti{transition-timing-function:steps(4,end)}
.fascia>i,.fascia>b{position:absolute;background:var(--fa1-black);display:none;font-style:normal;font-weight:normal}
/* linee: cinque stecche che entrano in sequenza */
.fascia.linee>i{display:block;transition-delay:calc(var(--s)*45ms)}
.fascia.linee.oriz>i{left:0;right:0;height:20.5%}
.fascia.linee.oriz>i:nth-of-type(1){top:0}.fascia.linee.oriz>i:nth-of-type(2){top:20%}.fascia.linee.oriz>i:nth-of-type(3){top:40%}.fascia.linee.oriz>i:nth-of-type(4){top:60%}.fascia.linee.oriz>i:nth-of-type(5){top:80%}
.fascia.linee.vert>i{top:0;bottom:0;width:20.5%}
.fascia.linee.vert>i:nth-of-type(1){left:0}.fascia.linee.vert>i:nth-of-type(2){left:20%}.fascia.linee.vert>i:nth-of-type(3){left:40%}.fascia.linee.vert>i:nth-of-type(4){left:60%}.fascia.linee.vert>i:nth-of-type(5){left:80%}
/* pixel: due scacchiere complementari, la seconda arriva un attimo dopo */
.fascia.pixel>b{display:block;left:0;top:0;right:0;bottom:0;-webkit-mask-image:conic-gradient(#000 25%,#0000 25% 50%,#000 50% 75%,#0000 75%);-webkit-mask-size:18px 18px;mask-image:conic-gradient(#000 25%,#0000 25% 50%,#000 50% 75%,#0000 75%);mask-size:18px 18px}
.fascia.pixel>b+b{-webkit-mask-position:9px 9px;mask-position:9px 9px;transition-delay:130ms}
.loghi .nome{font-size:var(--size-body-s);font-weight:var(--weight-medium);color:var(--text-secondary)}
/* i titoli degli spettacoli sono link: colore ereditato (bianco sotto la
   fascia) e casella intera cliccabile */
.loghi span a{border:none;color:inherit}
.loghi span a::after{content:"";position:absolute;inset:0;z-index:2}
@media (max-width:960px){
  .loghi.c4,.loghi.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* con un numero dispari di celle l'ultima si allarga: niente buco grigio */
  .loghi>div:last-child:nth-child(odd){grid-column:span 2}
}

/* ==== cta finale ==== */
.cta-fin h2{font-size:var(--size-display-l);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:var(--leading-display);max-width:20ch}
.cta-fin p{font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-secondary);max-width:52ch}

/* ==== piede ==== */
.site-footer{border-top:var(--rule)}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,3fr) minmax(0,3fr);gap:var(--space-6)}
.site-footer .col{display:flex;flex-direction:column;gap:var(--space-2)}
.site-footer .col a,.site-footer .col span.riga{font-size:var(--size-body-s);line-height:1.35;color:var(--text-secondary);border:none}
.site-footer a:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* la freccia mono scivola dentro da sinistra sulle voci del piede */
.site-footer .col a{position:relative;align-self:flex-start;transition:color var(--dur-fast) var(--ease-out),padding-left 240ms var(--ease-out)}
.site-footer .col a::before{content:"→";font-family:var(--font-mono);font-size:11px;line-height:1;position:absolute;left:0;top:50%;transform:translate(-6px,-50%);opacity:0;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.site-footer .col a:hover{padding-left:16px}
.site-footer .col a:hover::before{opacity:1;transform:translate(0,-50%)}
/* il punto che orbita: l'ora di Roma nel piede, in basso a sinistra sotto i
   dati societari. Il punto giallo (bordato di nero per non perdersi sul
   bianco) e' la lancetta dei secondi veri; al passaggio del mouse fa un giro
   extra di scatto e si rimette in pari da solo. */
.orologio{display:inline-flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);user-select:none} /* in riga: quadrante + ROMA, allineati a sinistra come il resto della colonna */
.orologio .quadrante{position:relative;width:74px;height:74px;border:1px solid var(--border-strong);border-radius:50%;display:flex;align-items:center;justify-content:center}
.orologio .ora-hm{font-style:normal;font-family:var(--font-mono);font-size:14px;color:var(--text-primary)}
.orologio .orbita{position:absolute;inset:0;will-change:transform}
.orologio .orbita b{position:absolute;left:50%;top:-5px;margin-left:-5px;width:10px;height:10px;border-radius:50%;background:var(--yellow-500);border:1.5px solid var(--fa1-black);box-sizing:border-box}
.orologio .citta{font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label-wide);color:var(--text-secondary);font-weight:normal}
@media (prefers-reduced-motion:reduce){.orologio .orbita{display:none}}
.f-label{padding-bottom:var(--space-2);border-bottom:var(--rule)}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-5);border-top:var(--rule)}
@media (max-width:960px){.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.site-footer .cols{grid-template-columns:minmax(0,1fr)}}

/* ==== reveal: la luce che sale ==== */
html.js-anim .rv{opacity:0;transform:translateY(28px);transition:none} /* lo stato nascosto non si anima mai: si anima solo l'ingresso */
html.js-anim .rv.in{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
html.js-anim .rv.in{opacity:1;transform:none}
/* la maschera respira sotto la linea di base: niente discendenti tagliate */
.rv-mask{overflow:hidden;display:block;padding-bottom:0.14em;margin-bottom:-0.14em}
html.js-anim .rv-mask>span{display:block;transform:translateY(115%);transition:transform var(--dur-reveal) var(--ease-out)}
html.js-anim .rv-mask.in>span{transform:none}
html.js-anim .rv-mask.done{overflow:visible}
.rv-d2{transition-delay:120ms}.rv-d3{transition-delay:240ms}.rv-d4{transition-delay:360ms}
html.js-anim .rv-mask.rv-d2>span{transition-delay:120ms}
html.js-anim .rv-mask.rv-d3>span{transition-delay:240ms}
html.js-anim .rv-mask.rv-d4>span{transition-delay:360ms}
/* ingresso parola per parola per i testi narrativi */
html.js-anim .rv-words .wd{opacity:0;transform:translateY(0.55em);transition:opacity 640ms var(--ease-out),transform 640ms var(--ease-out);transition-delay:calc(var(--wi)*var(--wpasso,22ms))}
html.js-anim .rv-words.in .wd{opacity:1;transform:none}
.rv-words .wd{display:inline-block}

/* ==== pagine interne ==== */
.pagina-testa{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;padding-top:var(--space-9);padding-bottom:var(--space-8);position:relative}
/* il ritorno dalle schede: come nella griglia progetti, il quadrato giallo
   sta in basso a destra della testata, appena sopra la fotografia */
.testa-riga{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);width:100%}
.scheda-torna{position:absolute;right:var(--gutter);bottom:var(--space-8)}
/* telefono (26/8 sera): il tasto sta NELLA riga del titolo, mai sopra ai
   testi; il titolo si stringe per fargli posto */
@media (max-width:640px){
  .scheda-torna{position:static;align-self:flex-start;flex:none;margin-top:2px}
}
/* il ritorno dal basso (scelta A di Fabio, 26/8 sera): pastiglia flottante,
   solo touch, pilotata dal blocco 5d di motore.js */
.torna-giu{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:2500;display:inline-flex;align-items:center;gap:10px;background:var(--yellow-500);color:var(--text-on-accent);font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:.08em;text-transform:uppercase;padding:14px 18px;border:none;box-shadow:0 6px 24px rgba(15,14,12,.2);transform:translateY(140px);transition:transform 340ms var(--ease-out)}
.torna-giu.qui{transform:none}
/* nella pastiglia la freccia e' il triangolino del brand (scelta E) */
.torna-giu i{font-style:normal;font-size:0;width:13px;height:15px;background:var(--text-on-accent);clip-path:polygon(0 50%, 100% 0, 100% 100%)}
.pagina-testa h1{font-size:var(--size-display-l);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:var(--leading-display);max-width:18ch}
.sotto-mono{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.prosa{display:flex;flex-direction:column;gap:var(--space-4)}
.prosa p{font-size:var(--size-body-l);font-weight:var(--weight-light);line-height:1.6;color:var(--text-primary);max-width:var(--measure-prose)}
/* un respiro tra il media di apertura delle schede e la riga della sezione dopo */
section[aria-label="Apertura"] .media-scheda{margin-bottom:var(--space-7)}
.media-scheda{background:var(--surface-media);display:flex;align-items:center;justify-content:center;aspect-ratio:var(--ratio-landscape);max-height:60svh;overflow:hidden}
.galleria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.galleria .frame{background:var(--surface-media);aspect-ratio:var(--ratio-portrait);display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center}
/* la galleria standard: la fisarmonica (decisione 18/8, assorbe i due schemi
   statici). Fascia a proporzione fissa 2.8:1: le celle hanno la stessa forma su
   ogni schermo, e la cella aperta (flex 2.3 su 4.3) diventa un 3:2 esatto:
   la foto sotto il mouse si mostra intera, mai tagliata. */
.galleria.fisa{display:flex;aspect-ratio:2.8/1}
.galleria.fisa .frame{flex:1;min-width:0;aspect-ratio:auto;transition:flex 560ms var(--ease-out)}
.galleria.fisa .frame img{transform:scale(1.04);transition:transform 900ms var(--ease-out)}
.galleria.fisa .frame:hover{flex:2.3}
.galleria.fisa .frame:hover img{transform:scale(1)}
/* reveal e fisarmonica convivono: transizione combinata, nessun ritardo sul flex */
html.js-anim .galleria.fisa .frame.rv{transition:flex 560ms var(--ease-out),opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
html.js-anim .galleria.fisa .frame.rv-d2{transition-delay:0ms,120ms,120ms}
html.js-anim .galleria.fisa .frame.rv-d3{transition-delay:0ms,240ms,240ms}
@media (max-width:960px){.galleria.fisa{flex-direction:column;aspect-ratio:auto}.galleria.fisa .frame{flex:none;aspect-ratio:var(--ratio-landscape)}}
@media (max-width:960px){.galleria{grid-template-columns:minmax(0,1fr)}}
.credits{font-size:var(--size-body-s);line-height:1.7;color:var(--text-secondary);max-width:var(--measure-prose)}

/* Blocco crediti standard delle opere immersive (colonnino, 25/8):
   filetto nero, "Un'opera di" in evidenza, ruoli in etichette mono. */
.crediti-opera{border-top:1px solid var(--text-primary);padding-top:22px;max-width:var(--measure-prose)}
.crediti-opera .opera{font-size:17px;font-weight:var(--weight-semibold);margin-bottom:18px}
.crediti-opera .opera-fonte{font-size:var(--size-body-s);color:var(--text-secondary);margin:-12px 0 18px}
.crediti-opera dl{display:grid;grid-template-columns:max-content 1fr;gap:9px 28px;margin:0;font-size:var(--size-body-s)}
.crediti-opera dt{font-family:var(--font-mono);font-size:var(--size-label-s);text-transform:uppercase;letter-spacing:.14em;color:var(--text-secondary-sm);padding-top:2px}
.crediti-opera dd{margin:0;color:var(--text-primary)}
@media (max-width:640px){.crediti-opera dl{grid-template-columns:1fr;gap:2px}.crediti-opera dt{margin-top:10px}}
.nav-scheda{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between;width:100%}
.linea{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-7);border-top:var(--rule);padding-top:var(--space-6);padding-bottom:var(--space-7)}
.linea .frame{background:var(--surface-media);aspect-ratio:var(--ratio-landscape);display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center}
/* quando il frame ospita una fotografia vera: niente rientri, la foto riempie */
.frame.foto{padding:0;overflow:hidden}
.frame.foto img{width:100%;height:100%;object-fit:cover;display:block}
/* variante per le immagini composte (collage): intere su fondo bianco, mai tagliate */
.frame.foto.intera{background:#fff}
.frame.foto.intera img{object-fit:contain}
.media-scheda.foto{padding:0}
.media-scheda.foto img{width:100%;height:100%;object-fit:cover;display:block}
/* variante collage (scheda dei sei show): l'immagine composta si mostra intera,
   centrata, senza tagli ne' gabbia 16:9 */
.media-scheda.collage{aspect-ratio:auto;max-height:none;background:none}
.media-scheda.collage img{width:min(100%,88svh);height:auto;object-fit:contain;margin:0 auto}
.linea h3{font-size:var(--size-h2);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading)}
.linea .corpo{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.linea p{font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-secondary);max-width:var(--measure-prose)}
.linea ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.linea li{font-size:var(--size-body-s);line-height:1.5;color:var(--text-primary);display:flex;gap:10px;align-items:baseline}
.linea li>span{min-width:0} /* il testo del punto resta un blocco solo dentro il flex */
.linea li strong{font-weight:var(--weight-semibold);color:var(--text-primary)} /* etichetta del punto di forza */
.linea li::before{content:"\25B2";font-family:var(--font-sans);font-size:7px;color:var(--fa1-black);flex:none;transform:translateY(-2px)}
@media (max-width:960px){.linea{grid-template-columns:minmax(0,1fr)}}

/* ==== studio: la linea che si costruisce ==== */
.tl-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--space-8);align-items:start}
.tl-colonna{position:relative;padding-left:56px;min-height:420px}
.tl-binario{position:absolute;left:26px;top:6px;bottom:6px;width:2px;background:var(--border-hairline)}
.tl-tratto{position:absolute;left:26px;top:6px;width:2px;background:var(--fa1-black);height:0}
.tl-testina{display:none} /* la punta e' la linea stessa: nessun triangolo a cavallo del binario */
.fatto{position:relative;padding:18px 0;cursor:pointer;opacity:0;transform:translateY(16px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.fatto.acceso{opacity:1;transform:none}
.fatto .marcatore{position:absolute;left:-49px;top:22px;font-family:var(--font-sans);font-size:11px;line-height:1;color:var(--fa1-black);transform:rotate(90deg);transition:transform var(--dur-base) var(--ease-out)} /* accanto al binario, mai a cavallo */
.fatto .sotto-mono{display:inline-block;min-width:11ch} /* colonna anni a larghezza fissa ("2021-2024" e' il metro): i titoli partono tutti dallo stesso filo */
.fatto h3{display:inline-block;margin-left:10px;font-size:var(--size-h3);font-weight:var(--weight-semibold);border-bottom:2px solid transparent;transition:border-color var(--dur-fast) var(--ease-out)}
.fatto.attivo h3{border-color:var(--yellow-500)}
.fatto.attivo .marcatore{transform:rotate(90deg) scale(1.5)}
.tl-palco{position:sticky;top:72px;background:var(--surface-raise);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);opacity:0;transition:opacity 480ms var(--ease-out)}
.tl-palco.vivo{opacity:1}
.tl-palco .frame{background:var(--surface-media);aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center} /* piu' basso del 16/9: il palco non deve sbordare sotto la timeline */
.tl-palco h3{font-size:var(--size-h3);font-weight:var(--weight-semibold)}
.tl-palco p{font-size:var(--size-body-s);line-height:1.6;color:var(--text-secondary);min-height:3.2em} /* altezza riservata: la riga sotto non balla al cambio di testo */
/* il cambio di contenuto sale come la luce: esce in fretta verso il basso
   (.via), il nuovo risale con un leggero sfalsamento */
.tl-palco .frame,.tl-palco .sotto-mono,.tl-palco h3,.tl-palco p{transition:opacity 260ms var(--ease-out),transform 340ms var(--ease-out)}
.tl-palco h3{transition-delay:40ms}
.tl-palco p{transition-delay:80ms}
.tl-palco.via .frame,.tl-palco.via .sotto-mono,.tl-palco.via h3,.tl-palco.via p{opacity:0;transform:translateY(12px);transition-duration:150ms;transition-delay:0ms}
@media (max-width:960px){.tl-split{grid-template-columns:minmax(0,1fr)}.tl-palco{position:static}}

/* ==== progetti: le colonne delle aree ==== */
/* Cinque colonne a tutta scena, una per linea di servizio: al passaggio si
   allargano e mostrano le miniature dei loro progetti, al click si aprono
   nella griglia dell'area. Il tasto giallo apre l'archivio completo. */
.colonne{display:flex;gap:6px;height:clamp(400px,60vh,620px)}
.colonna{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;border:none;padding:0;cursor:pointer;overflow:hidden;transition:flex 560ms var(--ease-out),filter 300ms var(--ease-out)}
/* ingresso delle fasce dell'archivio: stessa morbidezza delle scritte,
   a scalare; l'animazione non tocca la transition del hover */
html.js-anim .colonne .colonna{opacity:0}
html.js-anim .colonne.svela .colonna{animation:col-entra 680ms var(--ease-out) both;animation-delay:calc(var(--ci,0)*110ms)}
@keyframes col-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.colonna:hover,.colonna:focus-visible{flex:2.6;filter:brightness(1.05)}
.colonna .mini{display:flex;flex-wrap:wrap;gap:6px;margin:12px 12px 0;opacity:0;transform:translateY(10px);transition:opacity 400ms var(--ease-out) 120ms,transform 400ms var(--ease-out) 120ms}
.colonna:hover .mini,.colonna:focus-visible .mini{opacity:1;transform:none}
.colonna .mini i{width:46px;height:31px;flex:none;font-style:normal;outline:1px solid rgba(255,252,246,.35)}
.colonna .chip{margin:12px;background:var(--surface-base);padding:10px 14px;max-width:calc(100% - 24px);overflow:hidden;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}
.colonna .chip span{font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary);line-height:1.5;font-weight:700} /* va a capo: mai troncare le etichette */
/* a riposo l'etichetta sta in due meta' impilate: box tutti uguali; a colonna
   aperta le meta' tornano in linea e il testo scorre libero */
.colonna .chip .mez{display:block;font-style:normal}
.colonna:hover .chip .mez,.colonna:focus-visible .chip .mez{display:inline}
.col-tutti{display:flex;justify-content:center;margin-top:var(--space-7)}
/* le due viste (colonne / griglia) si scambiano con una dissolvenza breve */
#vista-colonne,#vista-griglia{transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.vista-via{opacity:0;transform:translateY(10px)}
.gp-testa{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.gp-testa h2{font-size:var(--size-h2);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading)}
/* il ritorno e' solo una freccia, in una casella gialla come i comandi
   cliccabili del sito: al passaggio si inverte in nero e la freccia scivola
   verso le colonne */
/* il tasto indietro e' il triangolo del brand ruotato a sinistra (scelta E
   del 27/8): punta a sinistra, base verticale a destra, freccia nella
   pancia. L'area di tocco resta il rettangolo pieno, la forma e' disegnata
   dal ::before ritagliato. */
.gp-torna{position:relative;width:48px;height:52px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;font-family:var(--font-mono);font-size:16px;line-height:1;color:var(--text-on-accent);cursor:pointer;transition:color var(--dur-base) var(--ease-out)}
.gp-torna::before{content:"";position:absolute;inset:0;background:var(--yellow-500);clip-path:polygon(0 50%, 100% 0, 100% 100%);transition:background var(--dur-base) var(--ease-out)}
.gp-torna:hover{color:var(--yellow-500)}
.gp-torna:hover::before{background:var(--fa1-black)}
.gp-torna i{position:relative;z-index:1;font-style:normal;display:inline-block;margin-left:12px;transition:transform 300ms var(--ease-out)}
.gp-torna:hover i{transform:translateX(-4px)}
.gp-filtri{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-5);margin-bottom:var(--space-7)}
/* il filtro scelto si evidenzia di nero: lo stesso dispositivo di
   evidenziazione del design system (.fa1-evidenza), non un sottolineato */
.gp-filtri button{border:none;background:none;padding:4px 8px;font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.gp-filtri button:hover{color:var(--text-primary)}
.gp-filtri button.attivo{background:var(--evidenza-bg);color:var(--evidenza-fg)}
/* la griglia riordina in scena: le carte che restano planano nella nuova
   posizione (FLIP), le escluse si dissolvono sul posto, le nuove risalgono,
   l'altezza accompagna. Transizioni sulla base, non su .qui, cosi' valgono
   anche all'uscita */
.gp-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--space-7) var(--space-5);position:relative;transition:height 450ms var(--ease-out)}
a.gp-card{display:flex;flex-direction:column;gap:var(--space-3);border:none;color:inherit;opacity:0;transform:translateY(14px);transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out)}
a.gp-card.qui{opacity:1;transform:none}
.gp-card .frame{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--surface-media);display:flex;align-items:center;justify-content:center;padding:var(--space-3);text-align:center}
.gp-card .frame::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--yellow-500);transition:width var(--dur-slow) var(--ease-out)}
.gp-card:hover .frame::after{width:100%}
.gp-card h3{font-size:var(--size-body);font-weight:var(--weight-semibold);line-height:1.35;display:inline;background-image:linear-gradient(var(--yellow-500),var(--yellow-500));background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;transition:background-size 380ms var(--ease-out)}
.gp-card:hover h3{background-size:100% 2px}
.gp-card .sotto-mono{font-size:var(--size-label-s)}
@media (max-width:760px){
  .colonne{flex-direction:column;height:auto;gap:8px}
  .colonna{height:124px;flex:none}
  .colonna:hover,.colonna:focus-visible{flex:none;filter:none}
  .colonna .mini{display:none}
  .colonna .chip .mez{display:inline} /* a fasce piene l'etichetta sta su una riga */
}

/* ==== contatti: la prima chiamata ==== */
/* l'ingresso a onda: dopo il sipario la prima schermata entra come un gesto
   solo, tutti gli elementi in viaggio insieme con scarti minimi (contatti.html) */
html.js-anim .ch-ent{opacity:0;transform:translateY(22px);transition:opacity 750ms var(--ease-out),transform 750ms var(--ease-out)}
html.js-anim .ch-ent.dentro{opacity:1;transform:none}
/* prima che gli script arrivino (dischi lenti) le colonne aspettano invisibili:
   la classe la mette il capo di contatti.html, la toglie l'onda stessa */
html.ch-attesa .chiamata-domande,html.ch-attesa .chiamata-lettera{opacity:0}
/* il doppio binario (26/8, scelta 5 del test): due strade dichiarate sopra il
   quiz - le sette domande o il foglio bianco */
.ch-binari{position:relative;display:inline-flex;border:1px solid var(--text-primary);border-radius:2px;overflow:hidden;isolation:isolate}
.ch-binario{position:relative;z-index:1;border:none;background:transparent;color:inherit;font:inherit;font-size:var(--size-body-s);padding:9px 16px;cursor:pointer;transition:color 260ms var(--ease-out)}
.ch-binario.attivo{color:var(--fa1-white)}
/* la fascia nera scivola da un binario all'altro (26/8 sera) */
.ch-slitta{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--text-primary);transition:transform 380ms var(--ease-out),width 380ms var(--ease-out);pointer-events:none}
/* il foglio bianco e' la gemella della lettera (scelta A del 26/8 sera):
   stesso pannello dell'anteprima "gia' scritta", col saluto gia' stampato */
.ch-mano{display:flex;flex-direction:column;gap:var(--space-5)}
.ch-mano-carta{background:var(--surface-raise);border-left:2px solid var(--fa1-black);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);max-width:640px;cursor:text}
.ch-mano-saluto{font-size:var(--size-body);line-height:1.8}
.ch-mano textarea{width:100%;font:inherit;font-size:var(--size-body);line-height:1.8;color:inherit;background:transparent;border:none;resize:vertical;min-height:150px;padding:0}
/* niente anello di fuoco sul campo: la carta stessa e' il segnale visivo
   (il focus via codice all'apertura accendeva il riquadro nero di base.css) */
.ch-mano textarea:focus,.ch-mano textarea:focus-visible{outline:none;box-shadow:none}
.chiamata{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--space-8);align-items:start}
.chiamata-domande{display:flex;flex-direction:column;gap:var(--space-5);min-height:300px}
#ch-atto{display:flex;flex-direction:column;gap:var(--space-5);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
#ch-atto.via{opacity:0;transform:translateY(12px)}
#ch-atto h3{font-size:var(--size-h2);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading)}
.ch-opzioni{display:flex;gap:var(--space-3);flex-wrap:wrap}
/* la risposta scritta a mano: i tasti "altro" aprono una riga di testo libero.
   Niente scatole: una riga che si inchiostra quando ci scrivi (il segnale di
   focus e' quello, al posto dell'anello del design system che qui stona) */
/* l'inizio della frase sopra il campo libero: chi scrive vede il posto che
   sta riempiendo, invece di indovinare una parola nel vuoto */
.ch-guida{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.ch-libero{display:flex;gap:var(--space-5);align-items:baseline;width:100%;max-width:46ch}
.ch-libero input{flex:1;min-width:0;border:none;border-bottom:1px solid var(--border-strong);background:none;font-family:var(--font-mono);font-size:var(--size-body-s);color:var(--text-primary);padding:8px 2px;transition:border-color var(--dur-fast) var(--ease-out)}
.ch-libero input:focus,.ch-libero input:focus-visible{outline:none;box-shadow:none;border-color:var(--fa1-black)}
.ch-libero input.vuota{border-color:var(--yellow-500);animation:trema 240ms var(--ease-out)}
@keyframes trema{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.ch-libero .annulla{border:none;background:none;padding:4px 0;font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-out)}
.ch-libero .annulla:hover{color:var(--text-primary)}
/* le frecce per scorrere le domande: nude, mono, si sporgono nella loro
   direzione al passaggio. Niente scatole, niente etichette. */
.ch-nav{display:flex;gap:var(--space-7);margin-top:var(--space-6)}
.ch-nav button{border:none;background:none;padding:6px 4px;font-family:var(--font-mono);font-size:20px;line-height:1;color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ch-nav button:hover{color:var(--text-primary)}
.ch-nav button.nav-ind:hover{transform:translateX(-5px)}
.ch-nav button.nav-av:hover{transform:translateX(5px)}
/* sempre al loro posto, mai bugiarde: spente finche' il passo non e' possibile
   (si accendono con la risposta), cosi' il layout non salta e il patto
   "prima rispondi, poi avanzi" resta intatto */
.ch-nav button:disabled{color:var(--border-strong);pointer-events:none;transform:none}
.ch-op.scelta{border-color:var(--fa1-black);box-shadow:inset 0 -3px 0 var(--yellow-500)} /* la risposta gia' data, quando si torna indietro */
.ch-op{position:relative;overflow:hidden;border:1px solid var(--border-strong);background:none;padding:12px 18px;font-family:var(--font-sans);font-size:var(--size-body);color:var(--text-primary);cursor:pointer;transition:color 250ms var(--ease-out)}
.ch-op i{position:absolute;inset:0;background:var(--fa1-black);transform:translateY(101%);transition:transform 250ms var(--ease-out)}
.ch-op b{position:relative;font-weight:inherit}
@media (hover:hover){
  .ch-op:hover{color:var(--fa1-white)}
  .ch-op:hover i{transform:translateY(0)}
}
.chiamata-lettera{position:sticky;top:96px;background:var(--surface-raise);border-left:2px solid var(--fa1-black);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);min-height:260px}
#ch-lettera{font-size:var(--size-body);line-height:1.8;color:var(--text-primary)}
.ch-parola{display:inline-block;opacity:0;transform:translateY(8px);background:var(--yellow-500);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.ch-parola.dentro{opacity:1;transform:none}
.ch-parola.spenta{transition:background 1200ms var(--ease-out);background:transparent}
#ch-chiudi{margin-top:auto;opacity:0;transition:opacity 400ms var(--ease-out);pointer-events:none}
#ch-chiudi.vivo{opacity:1;pointer-events:auto}
@media (max-width:960px){.chiamata{grid-template-columns:minmax(0,1fr)}.chiamata-lettera{position:static}}
@media (prefers-reduced-motion:reduce){.fatto,.ch-parola{opacity:1;transform:none;transition:none}}

/* ==== instagram nel piede ==== */
.site-footer .ig{display:inline-flex;align-items:center;gap:8px}
.site-footer .ig svg{flex:none;display:block}
.site-footer .ig:hover{text-decoration:none}
.site-footer .ig:hover span{text-decoration:underline;text-underline-offset:4px}

/* ==== il sipario tra le pagine ==== */
#sipario{position:fixed;inset:0;background:var(--fa1-black);transform:translateY(101%);pointer-events:none;z-index:3000;transition:transform 320ms var(--ease-out)}
#sipario.chiuso{transform:translateY(0)}
#sipario.chiuso.via{transform:translateY(-102%)} /* ritorno dalla cache: esce verso l'alto */
/* la pagina nuova nasce gia' coperta dal nero, che si solleva rivelandola:
   un gesto continuo col sipario in uscita, nessuno scatto */
html.arrivo body::after{content:"";position:fixed;inset:0;background:var(--fa1-black);z-index:3000;pointer-events:none;animation:sipario-esce 460ms var(--ease-out) 50ms forwards}
@keyframes sipario-esce{from{transform:translateY(0)}to{transform:translateY(-102%)}}
@media (prefers-reduced-motion:reduce){#sipario{display:none}html.arrivo body::after{display:none}}

/* ==== clienti: la nuvola dei loghi (glitch liquido al passaggio) ==== */
#clienti{padding-bottom:var(--space-8)}
.nuvola-clienti{position:relative;height:700px;max-width:840px;width:100%;margin:0 auto} /* 31/8: da 620 a 700px, l'altezza che serve a far stare 27 loghi senza che si tocchino */
.nuvola-clienti .nube{position:absolute;left:var(--x);top:var(--y);width:calc(var(--w)*0.7 + 52px);height:auto;margin:-16px 0 0 -26px;cursor:crosshair}
.nuvola-clienti .nube-nome{position:absolute;left:var(--x);top:var(--y);font-size:var(--size-body-s);font-weight:var(--weight-medium);color:#9E9E9E;white-space:nowrap}
@media (max-width:960px){
  /* sul telefono la nuvola diventa una griglia di due colonne: due loghi per
     riga, ognuno centrato nella sua casella e mai ingrandito oltre la misura
     che ha di suo */
  .nuvola-clienti{height:auto;display:grid;grid-template-columns:repeat(2,1fr);align-items:center;justify-items:center;gap:var(--space-6) var(--space-5);padding:var(--space-4) 0}
  .nuvola-clienti .nube,.nuvola-clienti .nube-nome{position:static;margin:0}
  .nuvola-clienti .nube{width:min(100%,calc(var(--w)*0.7 + 52px))}
  .nuvola-clienti .nube.nube-grande{width:min(115%,calc(var(--w)*0.7 + 52px))}
  /* logo dispari in fondo: sta in mezzo invece che a sinistra */
  .nuvola-clienti .nube:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ==== video nelle schede: l'anteprima in loop (motore.js blocco 13) ==== */
.media-scheda.video-loop{position:relative;cursor:pointer;background:var(--fa1-black);aspect-ratio:var(--vr,16/9);max-height:none;width:min(100%,calc(72svh * var(--vr,1.7778)));margin:0 auto} /* la cornice prende il formato del video: mai un taglio */
.media-scheda.video-loop iframe,
.media-scheda.video-loop video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity 600ms var(--ease-out);object-fit:contain;background:#000;display:block}
.media-scheda.video-loop.in-moto iframe,
.media-scheda.video-loop.in-moto video{opacity:1} /* visibile solo quando riproduce: niente lampo della miniatura */
.media-scheda.video-loop.vl img{display:none} /* la copertina non si vede mai sopra il video */
.media-scheda.video-loop .sr-scudo{z-index:2}
.vl-audio{z-index:3;right:16px;bottom:16px;opacity:1;width:40px;height:40px} /* 26/8: pari al quadratino dello schermo intero e incolonnato con lui (right 16) */



/* ==== apertura editoriale: schede con video verticale (scelta 25/8) ====
   Video a sinistra; a destra il sottotitolo della testa promosso a frase
   grande, con la colonnina dati in Syne Mono. Il --vr sta anche nell'HTML
   cosi' il segnaposto pre-consenso ha gia' il formato giusto. */
section[aria-label="Apertura"] .apertura-editoriale{display:flex;gap:var(--space-7);align-items:stretch;margin-bottom:var(--space-7)}
.apertura-editoriale .media-scheda.video-loop{margin:0;flex-shrink:0;width:min(42%,calc(72svh * var(--vr,0.5625)))}
.apertura-editoriale .apertura-lato{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--space-5);padding:var(--space-4) 0}
.apertura-frase{font-weight:var(--weight-bold);font-size:clamp(30px,3.6vw,54px);letter-spacing:-0.02em;line-height:1.08;max-width:20ch}
.apertura-frase.lunga{font-size:clamp(22px,2.5vw,36px);line-height:1.22;max-width:34ch}
.apertura-dati{display:flex;flex-direction:column;gap:9px;font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-700)}
.apertura-dati b{color:var(--text-primary);font-weight:400}
@media (max-width:960px){
  section[aria-label="Apertura"] .apertura-editoriale{flex-direction:column;align-items:center}
  .apertura-editoriale .media-scheda.video-loop{width:min(100%,380px)}
  .apertura-editoriale .apertura-lato{align-items:center;text-align:center}
  .apertura-frase,.apertura-frase.lunga{max-width:none}
}

/* ============ Il banner dei cookie (variante 1 "barra bianca") ============ */
/* Accetta e Rifiuta gemelli, come chiedono le Linee guida del Garante. */
.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:1900;background:#fff;
  border-top:var(--rule);box-shadow:0 -14px 40px rgba(15,14,12,.08);
  padding:18px var(--gutter)}
.ck-dentro{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ck-banner p{font-size:13.5px;font-weight:var(--weight-light);line-height:1.5;max-width:56ch;color:var(--text-primary)}
.ck-banner p b{font-weight:var(--weight-semibold)}
.ck-gemelli{display:flex;gap:10px;flex-wrap:wrap}
.ck-bt{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 20px;border:1.5px solid var(--fa1-black);background:transparent;color:var(--fa1-black);cursor:pointer}
.ck-bt.pieno{background:var(--fa1-black);color:#fff}
.ck-prefs{display:none;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:var(--rule)}
.ck-prefs.aperte{display:flex}
.ck-riga{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px;max-width:520px}
.ck-riga span{font-weight:var(--weight-medium)}
.ck-riga small{display:block;color:var(--text-secondary);font-size:11.5px;font-weight:var(--weight-regular);margin-top:1px}
.ck-lev{position:relative;width:40px;height:22px;border-radius:999px;background:#9b978f;border:0;flex:none;cursor:pointer;transition:background .2s}
.ck-lev::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s}
.ck-lev.si{background:var(--yellow-500)}
.ck-lev.si::after{left:20px}
.ck-lev.blocco{background:var(--fa1-black);opacity:.45;cursor:default}
.ck-lev.blocco::after{left:20px}
@media (max-width:640px){.ck-banner{padding:14px 16px}.ck-bt{padding:10px 14px;font-size:11.5px}}

/* il segnaposto dei video spenti (schede): il click vale come accettazione */
.media-scheda.video-loop{position:relative}
.video-spento{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:var(--surface-media);border:0;cursor:pointer;padding:0}
.video-spento span{font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-secondary);border:1px solid currentColor;padding:10px 16px;
  transition:color 200ms var(--ease-out)}
.video-spento:hover span{color:var(--fa1-black)}

/* Instagram nel menu: solo l'icona, dopo Contatti (24/8). In hover fa
   come le altre voci: si solleva e sotto sboccia la riga gialla */
/* ==== la lingua del sito: due sigle in colonna, accanto a Instagram ====
   Oggi e' un'insegna, non un tasto: l'inglese non esiste ancora. Quando i testi
   inglesi ci saranno, .lg-off diventa un <a href> e questa regola resta uguale. */
.lingua-sito{display:inline-flex;flex-direction:column;gap:1px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;line-height:1.2;text-align:center}
.lingua-sito .lg-on{font-weight:600;color:var(--text-primary)}
.lingua-sito .lg-off{font-weight:400;color:var(--grey-500,#A6A39E)}
.nav .ig-nav svg{display:block;transition:transform 260ms var(--ease-out)}
.nav .ig-nav:hover svg{transform:translateY(-3px)}


/* telefoni stretti: il menu su una riga fino a 320px */
@media (max-width:380px){
  .nav{gap:8px}
  .nav a{letter-spacing:0.02em}
}

/* Da telefono le voci del menu stanno a 10px l'una dall'altra, e con quel
   passo il tasto IT/EN finisce addosso all'icona di Instagram: non e' una
   voce di menu, quindi prende un po' d'aria in piu'. Sul monitor lo spazio
   c'e' gia' e non si tocca niente. */
@media (max-width:960px){
  .nav .ig-nav + .lingua-sito{margin-left:8px}
}

/* Telefono: sezioni piu' raccolte in TUTTO il sito (il passo di riferimento
   e' quello della pagina contatti, approvato da Fabio il 25/8) e teste di
   pagina compatte */
@media (max-width:640px){
  .sec{padding-top:calc(var(--section-y)*0.6);padding-bottom:calc(var(--section-y)*0.6)}
  .pagina-testa{padding-top:var(--space-7);padding-bottom:var(--space-5)}
}
/* Telefono (26/8): gli style inline di prime sezioni, CTA finale e footer
   vincono sul media query esterno, quindi qui servono !important mirati.
   Nessuna di queste regole agisce sopra i 640px. */
@media (max-width:640px){
  /* prima sezione di ogni pagina: il padding-top inline (56px) scende a 40px;
     la hero della home resta fuori */
  main > section:first-of-type:not(.hero){padding-top:var(--space-7) !important}
  /* fascia scura "chi siamo" della home: da 72+72 a 40+40 */
  .chi-buio .dentro{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  /* CTA finale della home: lo shell interno sommava 56+56 al passo della
     sezione; su telefono basta il passo della sezione */
  .cta-fin .shell{padding-top:0 !important;padding-bottom:0 !important}
  /* coda della pagina: footer piu' raccolto (56 sopra, 40 di stacco, 24 sotto) */
  .site-footer .shell{padding-top:var(--space-8) !important;gap:var(--space-7) !important;padding-bottom:var(--space-5) !important}
  .site-footer .cols{gap:var(--space-5)}
}
/* Telefono (26/8): i media di apertura delle schede e le testate di sezione
   (.rv-plain), finora senza alcun effetto, entrano con una dissolvenza breve.
   Solo qui: sul desktop .rv-plain resta senza animazione. */
@media (max-width:640px){
  html.js-anim .rv-plain{opacity:0;transition:opacity 700ms var(--ease-out)}
  html.js-anim .rv-plain.in{opacity:1}
}
/* Telefono: anche le righe a sipario (rv-d2/d3/d4) entrano quasi insieme,
   una frase gia' visibile non lascia indietro l'ultima riga */
@media (max-width:640px){
  .rv-d2{transition-delay:50ms}.rv-d3{transition-delay:90ms}.rv-d4{transition-delay:130ms}
  html.js-anim .rv-mask.rv-d2>span{transition-delay:50ms}
  html.js-anim .rv-mask.rv-d3>span{transition-delay:90ms}
  html.js-anim .rv-mask.rv-d4>span{transition-delay:130ms}
}

/* ==== schermo intero delle schede video (26/8, scelta 3 del test) ====
   In fondo al foglio: piu' avanti c'e' un'altra regola .media-scheda.video-loop
   (segnaposto video spenti) che altrimenti riprenderebbe position:relative.
   Quadratino in alto a destra; si esce toccando ovunque, come lo showreel
   della home (etichetta "Torna indietro"; il tasto audio non fa uscire). */
.vl-intero{position:absolute;z-index:3;right:16px;top:16px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--fa1-white);background:rgba(15,14,12,.55);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(4px);cursor:pointer;transition:background 260ms var(--ease-out),opacity 320ms var(--ease-out)} /* 26/8 sera: cerchio bordato come il tasto audio, stessa colonna (right 16) */
.vl-intero:hover{background:rgba(15,14,12,.78)}
.media-scheda.pieno .vl-intero{opacity:0;pointer-events:none} /* dentro si esce toccando ovunque */
.vl-torna{position:absolute;z-index:5;left:50%;top:78%;transform:translate(14px,10px);white-space:nowrap;pointer-events:none;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#fff;background:rgba(15,14,12,.55);backdrop-filter:blur(4px);padding:7px 11px;opacity:0;transition:opacity .25s ease}
.media-scheda.pieno .vl-torna{opacity:1}
@media (hover:none){
  .media-scheda.pieno .vl-torna{left:50% !important;top:auto !important;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%)}
}
.media-scheda:fullscreen{background:#000}
.media-scheda:fullscreen iframe,
.media-scheda:fullscreen video{width:100vw;height:100vh}
/* ripiego per iPhone (niente Fullscreen API sui contenitori): pieno schermo nella pagina */
.media-scheda.finto-intero{position:fixed;inset:0;z-index:6000;width:100vw;height:100vh;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;background:#000;margin:0}
.media-scheda.finto-intero iframe,
.media-scheda.finto-intero video{width:100%;height:100%}
body.finto-attivo{overflow:hidden}

/* un titolo che sta nella pagina per Google e per i lettori di schermo ma non
   si vede: serve dove il titolo a schermo e' stato tolto per scelta grafica */
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* l'albo dei festival: nome a sinistra, paese incolonnato a destra, come le
   tabelle della pagina Track record */
.albo{display:grid;grid-template-columns:1fr auto;gap:6px var(--space-6);align-items:baseline}
.albo span{font-size:var(--size-body-s);color:var(--text-primary)}
.albo b{font-weight:var(--weight-regular);font-family:var(--font-mono);font-size:var(--size-label-s);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary);text-align:right}
@media (max-width:520px){.albo{grid-template-columns:1fr}.albo b{text-align:left;margin-bottom:6px}}

/* Stato fissato: l'ingresso e' finito e da qui in poi non dipende piu' da
   transizioni ne' da fotogrammi. Senza questo, un testo lungo sorpreso a
   meta' dell'onda (scorrimento fermo, scheda in secondo piano) resterebbe
   con le ultime parole invisibili. */
/* Nota 31/8: qui NON si spegne la transizione. Spegnerla su .rv spegneva anche
   le transizioni che non c'entrano nulla con l'ingresso, e la fisarmonica delle
   gallerie (.galleria.fisa .frame, transizione su flex) diventava istantanea.
   Opacita' e trasformazione sono gia' inchiodate qui sotto, quindi non possono
   animarsi comunque. */
html.js-anim .rv.finito,
html.js-anim .rv-plain.finito{opacity:1 !important;transform:none !important}
html.js-anim .rv-mask.finito>span{transform:none !important;transition:none !important}
html.js-anim .rv-words.finito .wd{opacity:1 !important;transform:none !important;transition:none !important}

/* Le fotografie non si trascinano fuori dalla pagina e, su iOS, il dito
   tenuto premuto non apre il menu di salvataggio. Il divieto del tasto destro
   lo mette motore.js (blocco 0a-bis). */
img,canvas,video{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}