/* ====================================================================
   BlackBox — style.css  (rounded / cinematic / black+red)
   ==================================================================== */

:root{
  --bg:#060607;
  --bg-2:#0d0d10;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --white:#f4f4f6;
  --muted:#9a9aa2;
  --muted-d:#5b5b63;
  --red:#ff2a2a;
  --red-deep:#c00010;
  --red-glow:rgba(255,42,42,.32);

  --ff:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ff-d:'Space Grotesk',var(--ff);
  --ff-brand:'Hitmarker',var(--ff-d);

  --maxw:1280px;
  --pad:clamp(18px,4vw,40px);
  --r:22px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
body{font-family:var(--ff);background:var(--bg);color:var(--white);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--red);color:#fff}
h1,h2,h3{font-family:var(--ff-brand);font-weight:500;letter-spacing:-.01em;line-height:1.06}

[data-lang="it"] .lang-en{opacity:.35}
[data-lang="en"] .lang-it{opacity:.35}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* La grana e' un velo FISSO a tutto schermo con `mix-blend-mode`,
   sopra una pagina che scorre. Per fondersi, il compositore deve
   rileggere tutto quello che ci sta sotto a ogni fotogramma: sui
   telefoni e' la ricetta classica degli strisci — pezzi di scheda e di
   bottone che restano stampati mentre si scorre, segnalati da Nicolas
   il 2026-09-08 fra la 03 e la 04. Al 4% di opacita' non si vede
   comunque: sul telefono si spegne. */
@media (max-width:720px), (hover:none) and (pointer:coarse){
  .grain{display:none}
}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:var(--red);box-shadow:0 0 14px var(--red-glow)}
.dust{position:fixed;inset:0;z-index:0;pointer-events:none}
.footer{position:relative;z-index:1}

/* ====================================================================
   NAV (rounded glass container)
   ==================================================================== */
/* 2026-08-28 — la barra e' una fascia rettangolare a tutta larghezza,
   appoggiata in cima allo schermo: non piu' una pastiglia arrotondata che
   galleggia dentro i margini. Il vetro resta identico — stessa sfocatura,
   stessa saturazione, stessi colori: cambia la forma, non la materia. */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:100;padding:0}
.nav{
  position:relative;
  max-width:none;margin:0;display:flex;align-items:center;gap:18px;
  /* La fascia va da bordo a bordo, il contenuto no: resta incolonnato sui
     1280px del resto del sito. max() tiene il margine minimo sugli schermi
     stretti, dove il calcolo darebbe un valore negativo. */
  padding:14px max(var(--pad),calc((100% - var(--maxw))/2));
  border:0;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;
  transition:border-color .4s var(--ease);
}
/* effetto vetro su un livello a parte (pseudo-elemento): tenere backdrop-filter sull'elemento .nav
   direttamente romperebbe il posizionamento fixed del menu mobile, che è suo discendente */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  /* Niente ombra portata: serviva a staccare una pastiglia dal fondo, e su
     una fascia a filo bordo farebbe sembrare la barra sospesa. Resta il filo
     di luce in alto, che e' il bordo del vetro. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .4s var(--ease);
}
.nav>.logo{flex:1 1 0;min-width:max-content}
.nav__links{flex:0 0 auto}
.nav__actions{flex:1 1 0;justify-content:flex-end}
.nav-wrap.scrolled .nav{border-bottom-color:rgba(255,255,255,.1)}
.nav-wrap.scrolled .nav::before{
  background:rgba(10,10,12,.55);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.logo{font-family:var(--ff-brand);font-weight:500;font-size:1.32rem;letter-spacing:.04em;display:inline-flex;align-items:flex-end;color:#fff}
.logo__dot{width:6px;height:6px;border-radius:50%;background:var(--red);margin:0 0 5px 4px;box-shadow:0 0 10px var(--red-glow)}

.nav__links{display:flex;gap:clamp(18px,2.2vw,30px)}
.nav__links a{font-size:.9rem;color:var(--muted);transition:color .3s;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--red);transition:width .3s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}

.nav__actions{display:flex;align-items:center;gap:14px}
.lang-toggle{font-family:var(--ff-d);font-size:.8rem;color:var(--muted);transition:color .3s}
.lang-toggle:hover{color:#fff}
.lang-sep{margin:0 3px;color:var(--muted-d)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff-d);font-weight:500;font-size:.95rem;
  padding:13px 24px;border-radius:100px;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s,color .3s}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn--sm{padding:9px 18px;font-size:.85rem}
.btn--red{background:var(--red);color:#fff;box-shadow:0 10px 30px var(--red-glow)}
.btn--red:hover{transform:translateY(-2px);box-shadow:0 16px 40px var(--red-glow);background:#ff3b3b}
.btn--ghost{border:1px solid var(--line);color:#fff;background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:#fff;transform:translateY(-2px)}

.nav__burger{display:none;flex-direction:column;gap:6px;width:24px}
.nav__burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease)}

/* ====================================================================
   INTRO (showreel dentro le lettere · zoom Netflix)
   ==================================================================== */
.intro{position:fixed;inset:0;z-index:9999;display:none;transform-origin:50% 50%;will-change:transform,opacity,filter;opacity:1}
/* il nero e' un livello suo e non lo sfondo di .intro: se lo mettessimo sull'elemento
   chiuderemmo anche il buco della maschera SVG e si perderebbe lo showreel dentro le lettere */
.intro::before{content:"";position:absolute;inset:0;background:#000}
.intro.fonts-ready::before{opacity:0;transition:opacity .15s}
html.bb-intro-scaduta .intro{display:none!important}
html.js .intro{display:block}
html.no-intro .intro{display:none}
.section,#hero,#work,#services,#studio,#contact{scroll-margin-top:88px}
.intro__svg{width:100%;height:100%;display:block}
/* 2026-08-29 — "Convergenza". Prima: 13rem di tetto (208px su qualunque
   schermo sopra i 1224px) e lettere immobili per 2,6s, con il movimento
   tutto concentrato nello zoom finale. Ora la scritta cala a 8.5rem e il
   movimento sta all'ingresso: le lettere arrivano una a una da larghe e
   sfocate e la spaziatura si chiude. Poi il quadro sta fermo mentre lo
   showreel si accende dentro le lettere, e lo zoom finale resta quello di
   sempre. Totale 4,1s invece di 4,7s. */
#introText,.intro__fill{font-family:var(--ff-brand);font-weight:500;font-size:clamp(2.8rem,11vw,8.5rem);letter-spacing:-.03em}
#introText{fill:#000}
.intro__fill{fill:#fff}

/* Le lettere sono <tspan> con --i:0..7, divise a mano in
   04-embed-A-testata.html: senza quella divisione lo scalare non ha su cosa
   attaccarsi e l'ingresso torna a essere una comparsa secca. */
#introText tspan,.intro__fill tspan{opacity:0}
.intro.play tspan{animation:wmLetter .5s var(--ease) forwards;
  animation-delay:calc(var(--i) * .055s + .15s)}
@keyframes wmLetter{to{opacity:1}}

/* La spaziatura va animata su maschera E riempimento con gli stessi numeri:
   la maschera buca il nero dove il riempimento disegna le lettere, e se le
   due tracciature divergono i buchi smettono di stare sotto al disegno.
   La sfocatura invece solo sul riempimento: dentro un <mask> un filtro non
   si vede (conta solo la luminanza) e costa comunque. */
.intro.play #introText{animation:wmTrack 1.1s var(--ease) forwards}
.intro.play .intro__fill{animation:wmTrackBlur 1.1s var(--ease) forwards,
  fillWhite .4s ease 1.5s forwards}
@keyframes wmTrack{from{letter-spacing:.26em}to{letter-spacing:-.03em}}
@keyframes wmTrackBlur{from{letter-spacing:.26em;filter:blur(9px)}
  to{letter-spacing:-.03em;filter:blur(0)}}
@keyframes fillWhite{to{opacity:0}}

/* Lo zoom e' rimasto identico all'originale — centrato, scala 6.5, il
   respiro a 1.05, la sfocatura a 5px. Era stato provato con l'origine sulla
   O (68%): agganciarlo a una lettera fa scivolare la parola verso sinistra
   proprio mentre lo showreel si accende dentro i buchi, e in quel momento
   non si deve muovere niente. Cambia solo l'attacco, 2s invece di 2,6s,
   perche' le lettere adesso finiscono di entrare prima.
   Il nome introReveal non si tocca: main.js ascolta l'animationend proprio
   per quel nome, e rinominarlo lascerebbe l'intro incollata allo schermo
   fino al timeout. */
.intro.play{animation:introReveal 2.1s cubic-bezier(.6,0,.25,1) 2s forwards}
@keyframes introReveal{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  26%{transform:scale(1.05)}
  55%{opacity:1;filter:blur(0)}
  100%{transform:scale(6.5);opacity:0;filter:blur(5px)}
}

html.js .nav-wrap{opacity:0;transform:translateY(-8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
body.intro-done .nav-wrap{opacity:1;transform:none}

/* ====================================================================
   HERO (fullscreen showreel)
   ==================================================================== */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  padding-top:clamp(90px,11vh,116px)}
@media(max-height:680px){.hero__scroll{display:none}}
@media(max-height:560px){.hero__badge{display:none}}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video{width:100%;height:100%;object-fit:cover;display:block}
.hero__grain{position:absolute;inset:-4%;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:translate(calc((var(--hx,50%) - 50%) * -0.12), calc((var(--hy,40%) - 40%) * -0.12));
  transition:transform 1.2s var(--ease)}
.hero__glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease);
  background:radial-gradient(46vw circle at var(--hx,50%) var(--hy,40%),rgba(255,42,42,.10),transparent 62%)}
body.intro-done .hero__glow{opacity:1}
.hero__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,7,.92) 0%,rgba(6,6,7,.35) 42%,rgba(6,6,7,.22) 66%,rgba(6,6,7,.6) 100%)}
.hero__badge{position:absolute;left:var(--pad);top:calc(var(--pad) + 60px);z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-d);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  padding:7px 14px;border-radius:100px;background:rgba(0,0,0,.4);border:1px solid var(--line);backdrop-filter:blur(6px)}
html.js .hero__badge{opacity:0;transition:opacity .8s .5s}
body.intro-done .hero__badge{opacity:1}
.hero__badge i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}

.hero__content{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(78px,13vh,130px)}
.hero__content>*{transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .hero__content>*{opacity:0;transform:translateY(26px)}
body.intro-done .hero__content>*{opacity:1;transform:none}
body.intro-done .hero__content>*:nth-child(1){transition-delay:.05s}
body.intro-done .hero__content>*:nth-child(2){transition-delay:.16s}
body.intro-done .hero__content>*:nth-child(3){transition-delay:.28s}
body.intro-done .hero__content>*:nth-child(4){transition-delay:.4s}
.eyebrow{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.3em;font-size:.7rem;color:var(--red);margin-bottom:20px}
.hero__title{font-family:var(--ff-brand);font-weight:500;font-size:clamp(2.5rem,7.2vw,5.8rem);letter-spacing:-.01em;max-width:16ch}
.hero__title span{display:block}
.hero__title .accent{color:var(--red)}
.hero__sub{max-width:560px;margin:22px 0 0;color:#dcdce0;font-weight:300;font-size:clamp(1rem,1.4vw,1.16rem)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

.hero__scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--ff-d);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
html.js .hero__scroll{opacity:0;transition:opacity .8s .7s}
body.intro-done .hero__scroll{opacity:1}
.hero__scroll i{width:1px;height:32px;background:linear-gradient(var(--red),transparent);position:relative;overflow:hidden}

.hero__scroll i::after{content:"";position:absolute;inset:0;width:100%;height:40%;background:var(--red);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* ====================================================================
   PROOF / SECTORS MARQUEE
   ==================================================================== */
/* 2026-08-28 — meno vuoto sotto: fra il carosello e "01 — Cosa e come lo
   facciamo" c'erano 200px in tutto (70 qui piu' 130 sopra la sezione). */
.proof{position:relative;z-index:1;max-width:none;width:100%;margin:0;padding:clamp(40px,6vw,70px) 0 clamp(12px,2vw,28px)}
.proof__label{text-align:center;font-size:.8rem;color:var(--muted-d);margin-bottom:22px;letter-spacing:.02em}
/* Niente righe sopra e sotto: le sfumature ai lati dicono gia' dove il nastro
   comincia e dove finisce, i due filetti erano di troppo. */
.marquee{position:relative;overflow:hidden;padding:33px 0;
  cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.marquee:active{cursor:grabbing}
.marquee__edge{position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none}
.marquee__edge--l{left:0;background:linear-gradient(90deg,var(--bg),transparent);backdrop-filter:blur(2px);-webkit-mask:linear-gradient(90deg,#000 30%,transparent)}
.marquee__edge--r{right:0;background:linear-gradient(270deg,var(--bg),transparent);backdrop-filter:blur(2px);-webkit-mask:linear-gradient(270deg,#000 30%,transparent)}
/* 2026-08-28 — loghi del 50% piu' grandi: a 21px erano una fila di puntini,
   non un elenco di strumenti riconoscibili. Cresce tutto insieme (icona,
   testo, spazio fra un logo e l'altro), se no il carosello si sbilancia. */
.marquee__track{display:flex;align-items:center;gap:51px;width:max-content;white-space:nowrap;will-change:transform}
.marquee__track span{display:inline-flex;align-items:center;font-family:var(--ff-d);font-weight:500;font-size:clamp(1.38rem,2.4vw,1.72rem);color:var(--muted);cursor:default}
.marquee__track .stack-name{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--ease),opacity .25s var(--ease),margin-left .35s var(--ease)}
.marquee__track span:hover .stack-name{max-width:300px;opacity:1;margin-left:10px}
.marquee__track svg{width:32px;height:32px;flex:none}
.marquee__track svg path{fill:currentColor}
.marquee__track .stack-ic{width:32px;height:32px;flex:none;display:inline-block;background:var(--muted);
  -webkit-mask-image:var(--ic);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
  mask-image:var(--ic);mask-size:contain;mask-repeat:no-repeat;mask-position:center}
.marquee__track i{color:var(--red);font-style:normal;font-size:.7rem}

/* ====================================================================
   SECTIONS
   ==================================================================== */
.section{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(70px,10vw,130px) var(--pad)}
/* 2026-08-28 — Studio e' la sezione subito sotto il carosello dei loghi:
   li' il vuoto pieno delle sezioni sarebbe di troppo, perche' il carosello
   ha gia' la sua aria sotto. */
#studio{padding-top:clamp(36px,5vw,56px)}
.section__head{max-width:820px;margin-bottom:clamp(40px,5vw,64px)}
.kicker{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:var(--red);margin-bottom:18px}
.section__head h2,.studio__text h2{font-size:clamp(1.9rem,4.6vw,3.2rem)}
.section__note{margin-top:14px;color:var(--muted-d);font-size:.9rem}

.cards{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:34px 30px 38px;border:1px solid var(--line-soft);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  transition:flex-grow .5s var(--ease),border-color .5s,background .5s,opacity .4s var(--ease)}
.card:hover{border-color:rgba(255,42,42,.4)}
.card__ic{width:52px;height:52px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:var(--red);margin-bottom:22px;transition:.5s var(--ease)}
.card__ic svg{width:24px;height:24px}
.card:hover .card__ic{background:rgba(255,42,42,.1);border-color:var(--red)}
.card h3{font-size:1.4rem;margin-bottom:12px}
.card p{color:var(--muted);font-weight:300;font-size:.97rem}

/* ---------- accordion premium "Cosa facciamo" ---------- */
.xcard{padding:0}
.xcard__trigger{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:34px 30px 32px;text-align:left;cursor:pointer}
.xcard__teaser{color:var(--muted);font-weight:300;font-size:.97rem;transition:opacity .3s,max-height .3s,margin .3s}
.xcard__chevron{position:absolute;top:30px;right:26px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:transform .4s var(--ease),border-color .3s,color .3s}
.xcard__trigger:hover .xcard__chevron{border-color:var(--red);color:#fff}
.xcard__chevron svg{width:16px;height:16px}
.card.is-open .xcard__chevron{transform:rotate(180deg);border-color:var(--red);color:var(--red)}
.xcard__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.xcard__panel-inner{overflow:hidden}
.card.is-open .xcard__panel{grid-template-rows:1fr}
.xcard__desc{color:var(--muted);font-weight:300;font-size:1rem;line-height:1.7;max-width:70ch;margin:2px 30px 26px}
.xcard__group{padding:0 30px 26px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.card.is-open .xcard__group{opacity:1;transform:none}
.card.is-open .xcard__group:nth-child(1){transition-delay:.08s}
.card.is-open .xcard__group:nth-child(2){transition-delay:.16s}
.xcard__group:last-child{padding-bottom:36px}
.xcard__group h4{font-family:var(--ff-d);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-d);margin-bottom:14px}
.xcard__tags{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.xcard__tags li{font-family:var(--ff-d);font-size:.82rem;color:var(--muted);padding:7px 14px;border:1px solid var(--line-soft);border-radius:100px;background:rgba(255,255,255,.02)}
.xcard__checks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px}
.xcard__checks li{position:relative;padding-left:24px;color:#dcdce0;font-weight:300;font-size:.92rem}
.xcard__checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red);font-weight:700}
.cards.has-open .card{flex-grow:1;min-width:120px}
.cards.has-open .card.is-open{flex-grow:8;min-width:0}
.cards.has-open .card:not(.is-open){opacity:.6;border-color:var(--line-soft)}
.cards.has-open .card:not(.is-open):hover{opacity:1;border-color:rgba(255,42,42,.4)}
.cards.has-open .card:not(.is-open) .xcard__trigger{flex:1 1 auto;align-items:center;justify-content:center;padding:26px 10px}
.cards.has-open .card:not(.is-open) .card__ic{margin-bottom:0;width:40px;height:40px;flex:none}
.cards.has-open .card:not(.is-open) .card__ic svg{width:18px;height:18px}
.cards.has-open .card:not(.is-open) h3{display:none}
.cards.has-open .card:not(.is-open) .xcard__chevron{display:none}
.cards.has-open .card:not(.is-open) .xcard__panel{flex:0 0 0;display:none}
.cards.has-open .card:not(.is-open) .xcard__teaser,
.card.is-open .xcard__teaser{opacity:0;max-height:0;margin:0;overflow:hidden}
@media(max-width:900px){
  .cards{flex-direction:column}
  .cards .card{flex:none}
  .cards.has-open .card:not(.is-open) h3{display:block}
  .xcard__checks{grid-template-columns:1fr}
}

.work__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:1fr}
.tile{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:1;
  display:flex;flex-direction:column;justify-content:space-between;padding:20px 22px;transition:transform .5s var(--ease),border-color .5s}
.tile--feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.tile:hover{transform:translateY(-4px);border-color:var(--line)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 60%);z-index:0}
.tile>*{position:relative;z-index:1}
.ph{background:#0e0e12}
.ph--1{background:radial-gradient(120% 120% at 20% 0%,#2a0a0e,#0b0b0f 60%)}
.ph--2{background:radial-gradient(120% 120% at 80% 10%,#1a1030,#0b0b0f 60%)}
.ph--3{background:radial-gradient(120% 120% at 30% 90%,#301a10,#0b0b0f 60%)}
.ph--4{background:radial-gradient(120% 120% at 70% 20%,#10222e,#0b0b0f 60%)}
.ph--5{background:radial-gradient(120% 120% at 40% 80%,#2a0a0e,#0b0b0f 60%)}
.tile__no{font-family:var(--ff-d);font-size:.8rem;color:rgba(255,255,255,.5);letter-spacing:.1em}
.tile__meta{display:flex;flex-direction:column;gap:9px}
.tag{align-self:flex-start;font-family:var(--ff-d);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--red);
  padding:4px 11px;border:1px solid rgba(255,42,42,.4);border-radius:100px;font-weight:500}
.tile__meta em{font-family:var(--ff-d);font-weight:500;font-size:1.05rem;font-style:normal}
.tile--feature .tile__meta em{font-size:1.5rem}

.studio__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(38px,6vw,76px);align-items:start}
.studio__text h2{margin:16px 0 22px}
.studio__text p{color:var(--muted);font-weight:300;font-size:1.05rem;max-width:560px}
/* ====================================================================
   V4 — GLOBO "Dove operiamo"
   ==================================================================== */
.globe-wrap{position:relative;width:100%;max-width:264px;aspect-ratio:1;margin:0 auto 18px}
.globe-canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.globe-canvas:active{cursor:grabbing}
.globe-label{position:absolute;left:0;top:0;transform:translate(-50%,-160%);pointer-events:none;
  font-family:var(--ff-d);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 6px rgba(255,42,42,.9),0 0 14px rgba(255,42,42,.5),0 0 22px rgba(255,255,255,.25);
  white-space:nowrap;opacity:0;animation:holoFloat 3s ease-in-out infinite}
.globe-label::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:13px;
  background:linear-gradient(rgba(255,42,42,.85),rgba(255,42,42,0));transform:translateX(-50%)}
@keyframes holoFloat{0%,100%{margin-top:0}50%{margin-top:-3px}}

.contact__title{font-size:clamp(2rem,5.5vw,4rem);margin:14px 0 50px}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:start}
.contact__lead{color:var(--muted);font-weight:300;font-size:1.1rem;max-width:420px;margin-bottom:32px}
.cline{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-top:1px solid var(--line);transition:padding .3s var(--ease)}
.cline:last-child{border-bottom:1px solid var(--line)}
.cline:hover{padding-left:10px}
.cline__k{font-family:var(--ff-d);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--red)}
.cline__v{font-size:1.02rem;color:#fff;word-break:break-all}
.contact__form{display:flex;flex-direction:column;gap:20px}
.contact__form label{display:flex;flex-direction:column;gap:9px}
.contact__form label span{font-family:var(--ff-d);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.contact__form input[type=text],.contact__form input[type=email],.contact__form textarea{
  background:transparent;border:none;border-bottom:1px solid var(--line);color:#fff;font-family:var(--ff);font-size:1.05rem;padding:8px 0;resize:vertical;transition:border-color .3s}
.contact__form input::placeholder,.contact__form textarea::placeholder{color:var(--muted-d)}
.contact__form input:focus,.contact__form textarea:focus{outline:none;border-color:var(--red)}
.consent{flex-direction:row!important;align-items:flex-start;gap:11px!important}
.consent input{margin-top:3px;accent-color:var(--red);width:16px;height:16px;flex:none}
.consent span{font-family:var(--ff)!important;text-transform:none!important;letter-spacing:0!important;font-size:.82rem!important;color:var(--muted)!important;line-height:1.5}
.consent a{color:var(--red);text-decoration:underline}
.contact__form .btn{align-self:flex-start;margin-top:4px}

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,7vw,90px) var(--pad) clamp(84px,9vw,104px);border-top:1px solid var(--line);overflow:hidden}
.footer__big{font-family:var(--ff-brand);font-weight:500;font-size:clamp(2.6rem,15vw,11rem);line-height:.9;letter-spacing:-.01em;display:flex;align-items:flex-end;color:#fff}
.footer__big .logo__dot{width:clamp(9px,2.3vw,24px);height:clamp(9px,2.3vw,24px);margin-bottom:.18em;margin-left:.1em}
.footer__cols{display:flex;flex-wrap:wrap;gap:40px 70px;margin-top:0}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__h{font-family:var(--ff-d);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted-d);margin-bottom:4px}
.footer__col a{color:var(--muted);font-size:.92rem;transition:color .3s}
.footer__col a:hover{color:#fff}
.footer__muted{color:var(--muted-d);font-size:.85rem}
.footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted-d)}
.footer__legal span:first-child{font-family:var(--ff-d);font-style:italic;color:var(--muted)}

/* ====================================================================
   COOKIE BANNER
   ==================================================================== */
.cookie{position:fixed;left:var(--pad);right:var(--pad);bottom:16px;z-index:150;max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  padding:16px 20px;border-radius:16px;background:rgba(13,13,16,.92);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cookie[hidden]{display:none}
.cookie p{font-size:.82rem;color:var(--muted);flex:1;min-width:240px}
.cookie__actions{display:flex;align-items:center;gap:16px}
.cookie__link{font-size:.82rem;color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ====================================================================
   REVEAL + RESPONSIVE
   ==================================================================== */
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease) var(--d,0s),transform .3s var(--ease) var(--d,0s)}
.reveal.in{opacity:1!important;transform:none!important}

@media(max-width:980px){
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .tile--feature{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .studio__grid,.contact__grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .nav{display:flex;justify-content:space-between}
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;justify-content:center;gap:8px;padding:40px;
    background:rgba(8,8,10,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .5s var(--ease);z-index:99}
  .nav__links.open{transform:none}
  .nav__links a{font-size:1.5rem;font-family:var(--ff-d);color:#fff}
  .nav__burger{display:flex;z-index:101}
  .nav.open .nav__burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav.open .nav__burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
  .nav-wrap.scrolled .nav{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(10,10,12,.92);
  }
}
@media(max-width:720px){
  .nav__actions .btn--red{display:none}
  .work__grid{grid-template-columns:1fr}
  .tile,.tile--feature{grid-column:auto;aspect-ratio:16/11}
  .stats{gap:28px}
  .stat strong{font-size:1.9rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}

/* ====================================================================
   LEGAL PAGES
   ==================================================================== */
.legal-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);background:rgba(6,6,7,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.legal-top a.back{font-size:.88rem;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:color .3s}
.legal-top a.back:hover{color:#fff}
.legal{max-width:820px;margin:0 auto;padding:clamp(50px,8vw,90px) var(--pad) 90px}
.legal h1{font-family:var(--ff-d);font-size:clamp(2rem,5vw,3rem);letter-spacing:-.02em;margin-bottom:10px}
.legal .updated{color:var(--muted-d);font-size:.85rem;margin-bottom:34px}
.legal h2{font-family:var(--ff-d);font-size:1.25rem;margin:38px 0 12px;color:#fff}
.legal p,.legal li{color:var(--muted);font-weight:300;font-size:1rem;line-height:1.7}
.legal ul{margin:10px 0 10px 20px}
.legal li{margin-bottom:6px}
.legal a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--white);font-weight:500}
.legal .ph-fill{color:var(--red);font-weight:500}
.legal .note{border:1px solid rgba(255,42,42,.35);background:rgba(255,42,42,.06);border-radius:14px;padding:18px 20px;margin:26px 0;color:var(--white);font-size:.92rem;font-weight:300}
.legal .lead{color:#cfcfd4;font-size:1.08rem;margin-bottom:20px}

/* ====================================================================
   COME LAVORIAMO — TIMELINE
   ==================================================================== */
.tl{display:grid;grid-template-columns:340px 1fr;gap:clamp(20px,3vw,40px);align-items:stretch}

.tl__rail{position:relative;display:flex;flex-direction:column;gap:2px}
.tl__rail-line{position:absolute;left:29px;top:28px;bottom:28px;width:2px;background:var(--line-soft);border-radius:2px;overflow:hidden;z-index:0}
.tl__rail-fill{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(180deg,var(--red-deep),var(--red));transition:height .5s var(--ease)}
.tl__item{position:relative;z-index:1;display:flex;align-items:flex-start;gap:14px;padding:12px 10px;border-radius:14px;text-align:left;
  transition:background .3s;width:100%}
.tl__item:hover{background:rgba(255,255,255,.03)}
.tl__item.is-on{background:rgba(255,42,42,.07)}
.tl__item-node{flex:none;width:12px;height:12px;margin-top:16px;border-radius:50%;background:var(--bg-2);border:2px solid var(--line-soft);position:relative;transition:.3s}
.tl__item.is-on .tl__item-node{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(255,42,42,.18)}
.tl__item.is-on .tl__item-node::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,42,42,.5);animation:tlNodePulse 1.8s ease-out infinite}
@keyframes tlNodePulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.tl__item-ic{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-2);display:flex;
  align-items:center;justify-content:center;color:var(--muted-d);transition:.3s}
.tl__item-ic svg{width:20px;height:20px}
.tl__item-ic--notion{font-family:var(--ff-d);font-weight:700;font-size:1.05rem}
.tl__item.is-on .tl__item-ic{border-color:var(--red);color:var(--red);background:rgba(255,42,42,.08)}
.tl__item-body{display:flex;flex-direction:column;padding-top:2px;min-width:0}
.tl__item-no{font-family:var(--ff-d);font-size:.68rem;letter-spacing:.1em;color:var(--red);margin-bottom:3px}
.tl__item-title{font-size:.96rem;color:#fff;font-weight:500;margin-bottom:3px}
.tl__item-sub{font-size:.79rem;color:var(--muted);font-weight:300;line-height:1.45}

.tl__panels{position:relative;height:100%}
.tl__panel{display:none;height:100%}
.tl__panel.is-on{display:block;animation:tlIn .55s var(--ease)}
@keyframes tlIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.tl__panel-inner{height:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center;
  padding:clamp(28px,4vw,46px);border:1px solid var(--line-soft);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.tl__eyebrow{font-family:var(--ff-d);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.tl__copy h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:14px}
.tl__lead{color:#dcdce0;font-weight:300;font-size:.98rem;margin-bottom:14px}
.tl__note{color:var(--muted);font-weight:300;font-size:.88rem;margin-bottom:14px}
.tl__closing{color:#fff;font-weight:400;font-size:.96rem;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.tl__tags{margin-bottom:6px}
.tl__checks{margin-bottom:6px}

.tl__visual{position:relative;min-height:180px;display:flex;align-items:center;justify-content:center}

.tl-logo{display:inline-block;-webkit-mask-image:var(--ic);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
  mask-image:var(--ic);mask-size:contain;mask-repeat:no-repeat;mask-position:center}

@keyframes tlPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}
@keyframes tlNodePulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes tlRowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* 01 · richiesta — canali che convergono nella inbox */
.tlv-req{position:relative;width:100%;max-width:230px;height:150px}
.tlv-req__paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tlv-req__paths path{fill:none;stroke:var(--line-soft);stroke-width:1.5;stroke-dasharray:3 6}
.tlv-req__pt{position:absolute;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--red);opacity:0}
.tlv-req__pt.p1{offset-path:path('M14 22 C 90 22 110 68 150 75');animation:tlReqMove 2.6s ease-in-out infinite}
.tlv-req__pt.p2{offset-path:path('M14 75 C 90 75 110 75 150 75');animation:tlReqMove 2.6s ease-in-out infinite;animation-delay:.55s}
.tlv-req__pt.p3{offset-path:path('M14 128 C 90 128 110 82 150 75');animation:tlReqMove 2.6s ease-in-out infinite;animation-delay:1.1s}
@keyframes tlReqMove{0%{offset-distance:0%;opacity:0}8%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.tlv-req__src{position:absolute;left:0;transform:translateY(-50%);width:34px;height:34px;border-radius:10px;border:1px solid var(--line-soft);
  background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.tlv-req__src svg{width:16px;height:16px}
.tlv-req__src .tl-logo{width:16px;height:16px;background:#25D366}
.tlv-req__inbox{position:absolute;right:0;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:16px;border:1px solid var(--line-soft);
  background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--red)}
.tlv-req__inbox svg{width:24px;height:24px}
.tlv-req__badge{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:.66rem;
  font-family:var(--ff-d);font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--bg);
  animation:tlPulse 2s ease-in-out infinite}

/* 02 · briefing — call con waveform */
.tl__visual--briefing{gap:0}
.tlv-avatar{position:relative;width:52px;height:52px;flex:none;border-radius:50%;border:1.5px solid var(--line-soft);
  background:radial-gradient(circle at 35% 30%,rgba(255,42,42,.35),var(--bg-2) 70%)}
.tlv-avatar__ring{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,42,42,.5);animation:tlNodePulse 2.2s ease-out infinite}
.tlv-wave{display:flex;align-items:center;gap:3px;height:30px;margin:0 14px}
.tlv-wave i{width:3px;border-radius:2px;background:var(--red);opacity:.8;animation:tlWave 1.2s ease-in-out infinite;animation-delay:calc(var(--n) * .09s)}
@keyframes tlWave{0%,100%{height:6px}50%{height:26px}}

/* 03 · strategia — roadmap con waypoint che compaiono */
.tlv-strat{position:relative;width:100%;max-width:260px;height:100px}
.tlv-route{position:absolute;top:0;left:0;width:100%;height:70px;overflow:visible}
.tlv-route path{fill:none;stroke:var(--line-soft);stroke-width:2;stroke-dasharray:6 8}
.tlv-route__dot{position:absolute;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px var(--red-glow);offset-path:path('M8 58 C 50 58 40 12 80 12 S 140 58 172 58 S 195 24 212 24');
  animation:tlStratMove 4.4s ease-in-out infinite}
@keyframes tlStratMove{0%{offset-distance:0%}100%{offset-distance:100%}}
.tlv-route__tag{position:absolute;font-family:var(--ff-d);font-size:.68rem;color:var(--muted);padding:4px 10px;border:1px solid var(--line-soft);
  border-radius:100px;background:var(--bg-2);opacity:0;animation:tlTagIn .5s var(--ease) forwards;animation-delay:calc(var(--t) * 1.1s + .3s)}
.tlv-route__tag--a{left:0;top:78px}
.tlv-route__tag--b{left:30%;top:0}
.tlv-route__tag--c{left:58%;top:78px}
.tlv-route__tag--d{left:86%;top:14px}
@keyframes tlTagIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 04 · workspace / finto Notion */
.tlv-notion{width:100%;max-width:320px;border-radius:14px;border:1px solid var(--line-soft);background:#0a0a0c;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.tlv-notion__bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.02)}
.tlv-notion__logo{width:15px;height:15px;background:#fff;flex:none}
.tlv-notion__bar span{font-family:var(--ff-d);font-size:.72rem;color:var(--muted)}
.tlv-notion__body{padding:16px}
.tlv-notion__progress{height:6px;border-radius:6px;background:var(--line-soft);overflow:hidden;margin-bottom:14px}
.tlv-notion__progress span{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--red-deep),var(--red));animation:tlBar 4s ease-in-out infinite}
@keyframes tlBar{0%,100%{width:58%}50%{width:68%}}
.tlv-notion__list{list-style:none;display:flex;flex-direction:column;gap:9px}
.tlv-notion__list li{position:relative;padding-left:24px;font-size:.82rem;color:var(--muted-d);font-weight:300;
  opacity:0;transform:translateX(-6px);animation:tlRowIn .45s var(--ease) forwards;animation-delay:calc(var(--n) * .12s + .15s)}
.tlv-notion__list li::before{content:"○";position:absolute;left:0;top:0;color:var(--muted-d)}
.tlv-notion__list li.is-done{color:#dcdce0}
.tlv-notion__list li.is-done::before{content:"✓";color:var(--red)}
.tlv-notion__list li.is-active{color:#fff;font-weight:500}
.tlv-notion__list li.is-active::before{content:"●";color:var(--red);animation:tlPulse 1.6s ease-in-out infinite}
.tlv-caret{display:inline-block;width:2px;height:12px;background:var(--red);margin-left:4px;vertical-align:middle;animation:tlCaret 1s steps(1) infinite}
@keyframes tlCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* 05 · produzione — carosello servizi + barra */
.tlv-prod{width:100%;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:22px}
.tlv-prod__icons{position:relative;width:56px;height:56px}
.tlv-prod__icons span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:16px;
  border:1px solid var(--line-soft);background:var(--bg-2);color:var(--red);opacity:0;animation:tlProdCycle 5.6s ease-in-out infinite;
  animation-delay:calc(var(--n) * 1.4s)}
.tlv-prod__icons svg{width:24px;height:24px}
@keyframes tlProdCycle{0%,3%{opacity:0;transform:scale(.9)}8%,22%{opacity:1;transform:scale(1)}27%,100%{opacity:0;transform:scale(.9)}}
.tlv-bar{width:100%;max-width:240px;height:8px;border-radius:8px;background:var(--line-soft);overflow:hidden}
.tlv-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red-deep),var(--red));animation:tlProd 3.6s ease-in-out infinite}
@keyframes tlProd{0%{width:6%}80%{width:92%}100%{width:92%}}

/* 06 · revisioni — thread di chat */
.tl__visual--revisions{align-items:stretch}
.tlv-thread{width:100%;max-width:220px;display:flex;flex-direction:column;gap:9px;margin:auto}
.tlv-msgline{display:flex;opacity:0;animation:tlRowIn .5s var(--ease) forwards;animation-delay:calc(var(--n) * .35s + .2s)}
.tlv-msgline--r{justify-content:flex-end}
.tlv-msgline__bubble{display:block;height:22px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line-soft)}
.tlv-msgline--l .tlv-msgline__bubble{width:70%;border-bottom-left-radius:3px}
.tlv-msgline--r .tlv-msgline__bubble{width:55%;border-bottom-right-radius:3px;background:rgba(255,42,42,.12);border-color:rgba(255,42,42,.3)}
.tlv-msgline__bubble--typing{display:flex;align-items:center;justify-content:center;gap:3px}
.tlv-msgline__bubble--typing i{width:4px;height:4px;border-radius:50%;background:var(--muted);animation:tlType 1.2s ease-in-out infinite}
.tlv-msgline__bubble--typing i:nth-child(2){animation-delay:.15s}
.tlv-msgline__bubble--typing i:nth-child(3){animation-delay:.3s}
@keyframes tlType{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.tlv-msgline__check{width:26px;height:22px;border-radius:8px;background:rgba(255,42,42,.12);border:1px solid rgba(255,42,42,.35);color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:.8rem}

/* 07 · consegna — cartella che si chiude */
.tl__visual--delivery{flex-direction:column;gap:14px}
.tlv-deliver{position:relative;width:80px;height:64px;perspective:220px}
.tlv-deliver__file{position:absolute;bottom:30px;left:calc(6px + var(--n) * 23px);width:22px;height:16px;border-radius:2px;background:var(--bg-2);border:1px solid var(--line-soft);
  opacity:0;animation:tlFileIn 3.2s ease-in-out infinite;animation-delay:calc(var(--n) * .18s);z-index:0}
@keyframes tlFileIn{0%{opacity:0;transform:translateY(-16px)}18%{opacity:1;transform:translateY(0)}40%{opacity:1;transform:translateY(0)}55%,100%{opacity:0;transform:translateY(6px)}}
.tlv-folder__back{position:absolute;left:8px;top:18px;width:64px;height:38px;border-radius:0 8px 8px 8px;background:var(--bg-2);
  border:1.5px solid var(--line-soft);z-index:1}
.tlv-folder__back::before{content:"";position:absolute;left:0;top:-8px;width:26px;height:10px;border-radius:6px 6px 0 0;background:var(--bg-2);
  border:1.5px solid var(--line-soft);border-bottom:none}
.tlv-folder__lid{position:absolute;left:8px;top:18px;width:64px;height:38px;border-radius:0 8px 8px 8px;
  background:linear-gradient(180deg,rgba(255,42,42,.18),rgba(255,42,42,.05));border:1.5px solid rgba(255,42,42,.4);
  transform-origin:top center;z-index:2;animation:tlLidClose 3.2s ease-in-out infinite}
@keyframes tlLidClose{0%,40%{transform:rotateX(0)}55%,100%{transform:rotateX(55deg)}}
.tlv-folder__badge{position:absolute;left:52px;top:2px;z-index:3;width:22px;height:22px;border-radius:50%;background:var(--red);
  color:#fff;font-size:.72rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--bg-2);
  opacity:0;animation:tlBadgePop 3.2s ease-in-out infinite}
@keyframes tlBadgePop{0%,52%{opacity:0;transform:scale(.4)}62%{opacity:1;transform:scale(1.25)}70%{transform:scale(1)}95%,100%{opacity:1;transform:scale(1)}}
.tlv-folder__label{font-family:var(--ff-d);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* 08 · partnership — heartbeat + linea che continua */
.tl__visual--partnership{flex-direction:column;gap:16px}
.tlv-heart{width:44px;height:44px;color:var(--red);animation:tlHeartbeat 1.6s ease-in-out infinite}
.tlv-heart svg{width:100%;height:100%}
@keyframes tlHeartbeat{0%,100%{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(1.05)}}
.tlv-continues{position:relative;width:100%;max-width:200px;height:2px;background:var(--line-soft);display:flex;justify-content:space-between}
.tlv-continues i{width:5px;height:5px;border-radius:50%;background:var(--red);margin-top:-1.5px;opacity:.25;animation:tlDrift 2.6s ease-in-out infinite;animation-delay:calc(var(--n) * .2s)}
@keyframes tlDrift{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:1;transform:translateX(6px)}}
.tl__visual--partnership p{font-family:var(--ff-d);font-size:.84rem;color:var(--muted);font-style:italic;text-shadow:0 0 12px rgba(255,42,42,.25);
  animation:tlShimmer 3s ease-in-out infinite}
@keyframes tlShimmer{0%,100%{opacity:.7}50%{opacity:1}}

/* ====================================================================
   PACCHETTI
   ==================================================================== */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.pkg{position:relative;display:flex;flex-direction:column;padding:34px 30px;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--bg-2)}
.pkg--featured{border-color:var(--red);box-shadow:0 20px 60px var(--red-glow)}
.pkg__badge{position:absolute;top:-11px;left:30px;font-family:var(--ff-d);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:#fff;background:var(--red);padding:5px 12px;border-radius:100px}
.pkg h3{font-family:var(--ff-brand);font-weight:500;font-size:1.5rem;margin-bottom:6px}
.pkg__for{color:var(--muted);font-weight:300;font-size:.92rem;margin-bottom:18px}
.pkg__price{font-family:var(--ff-d);margin-bottom:22px;color:var(--muted)}
.pkg__price strong{font-size:2rem;color:#fff;font-weight:700}
.pkg ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.pkg li{position:relative;padding-left:24px;color:#cfcfd4;font-weight:300;font-size:.94rem}
.pkg li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--red)}
.pkg .btn{width:100%}
.pkgs__group{font-family:var(--ff-brand);font-size:1.15rem;font-weight:500;color:#fff;display:flex;align-items:center;gap:12px;margin:0 0 28px}
.pkgs__group::before{content:"";width:26px;height:1px;background:var(--red);flex:none}
.pkgs__note{color:var(--muted-d);font-size:.86rem;margin:24px 0 0}
.pkgs__note + .pkgs__group{margin-top:96px}

/* ====================================================================
   FAQ
   ==================================================================== */
.faq__list{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{list-style:none;cursor:pointer;padding:22px 42px 22px 0;position:relative;font-family:var(--ff-brand);font-weight:500;font-size:1.12rem;color:#fff;transition:color .3s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--red);transition:transform .3s}
.faq__item[open] summary::after{content:"\2013"}
.faq__item summary:hover{color:var(--red)}
.faq__item p{color:var(--muted);font-weight:300;padding:0 42px 24px 0;max-width:72ch}

/* ====================================================================
   QUIZ
   ==================================================================== */
.quiz__inner{max-width:820px;margin:0 auto;text-align:center;border:1px solid var(--line);border-radius:var(--r);padding:clamp(30px,5vw,54px);background:var(--bg-2)}
.quiz__inner .kicker{justify-content:center;display:flex}
.quiz__inner h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:30px}
.quiz__box{position:relative;min-height:120px}
.quiz__q{font-family:var(--ff-d);font-size:1.15rem;margin-bottom:20px;color:#fff}
.quiz__opts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.quiz__opts button{padding:13px 22px;border:1px solid var(--line);border-radius:100px;color:#fff;font-family:var(--ff-d);font-size:.95rem;background:rgba(255,255,255,.03);transition:.3s var(--ease)}
.quiz__opts button:hover{border-color:var(--red);background:rgba(255,42,42,.08);transform:translateY(-2px)}
.quiz__step[hidden],.quiz__result[hidden]{display:none}
.quiz__result{display:flex;flex-direction:column;align-items:center;gap:14px}
.quiz__rlabel{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--red)}
.quiz__rtitle{font-family:var(--ff-d);font-size:1.5rem}
.quiz__rtext{color:var(--muted);font-weight:300;max-width:54ch}
.quiz__restart{color:var(--muted-d);font-size:.85rem;text-decoration:underline;margin-top:2px}
.quiz__bar{height:3px;background:var(--line-soft);border-radius:3px;margin-top:26px;overflow:hidden}
.quiz__bar span{display:block;height:100%;width:33%;background:var(--red);transition:width .4s var(--ease)}

@media(max-width:980px){
  .pkgs{grid-template-columns:1fr}
  .pkg--featured{order:-1}
  .tl{grid-template-columns:1fr}
  .tl__rail{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tl__rail::-webkit-scrollbar{display:none}
  .tl__rail-line{display:none}
  .tl__item{flex-direction:column;align-items:center;text-align:center;flex:none;width:108px;padding:14px 8px;gap:8px}
  .tl__item-node{display:none}
  .tl__item-body{padding-top:0;align-items:center}
  .tl__item-sub{display:none}
  .tl__item-title{font-size:.78rem}
  .tl__panel-inner{grid-template-columns:1fr;gap:26px}
  .tl__visual{min-height:140px;order:-1}
}
@media(max-width:720px){
  .tl__panel-inner{padding:22px}
}
html.flat .hero{min-height:520px}

.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(1) brightness(.66) contrast(1.05);transition:transform .8s var(--ease),filter .6s}
.tile:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.9) contrast(1.05)}

/* ====================================================================
   V4 — BLOCCO STUDIO UNIFICATO (tabs: Servizi + Metodo + Studio)
   ==================================================================== */
.labs .section__head{margin-bottom:32px}
.tabs{position:relative;display:flex;gap:4px;padding:5px;border:1px solid var(--line-soft);border-radius:100px;
  background:var(--bg-2);margin-bottom:clamp(30px,4vw,46px);width:100%}
.tabs__ink{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:100px;background:var(--red);
  box-shadow:0 8px 22px var(--red-glow);transition:transform .45s var(--ease),width .45s var(--ease);z-index:0;transform:translateX(5px)}
.tab{position:relative;z-index:1;flex:1;padding:11px 22px;border-radius:100px;font-family:var(--ff-d);font-weight:500;font-size:.9rem;
  color:var(--muted);transition:color .3s;white-space:nowrap;text-align:center}
.tab:hover{color:#fff}
.tab.is-on{color:#fff}

.panes{position:relative}
.pane[hidden]{display:none}
.pane{animation:paneIn .5s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.studio__lead{color:var(--muted);font-weight:300;font-size:1.14rem;line-height:1.7;max-width:620px}

/* ====================================================================
   CONFIGURATORE — scorciatoia fissa a #pacchetti
   ==================================================================== */
.cfg-fab{position:fixed;right:20px;bottom:20px;z-index:160;display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px 13px 16px;border-radius:100px;font-family:var(--ff-d);font-weight:500;font-size:.9rem;color:#fff;
  background:var(--red);box-shadow:0 14px 40px var(--red-glow);
  transition:transform .35s var(--ease),box-shadow .35s,opacity .3s}
.cfg-fab svg{width:20px;height:20px}
.cfg-fab:hover{transform:translateY(-3px);box-shadow:0 20px 52px var(--red-glow)}

body.cookie-open .cfg-fab{bottom:96px}

@media(max-width:480px){
  .cfg{right:10px;left:10px;bottom:10px;width:auto}
  .cfg-fab{right:14px;bottom:14px;padding:12px 18px 12px 15px}
  body.cookie-open .cfg-fab{bottom:150px}
  body.cookie-open .cfg{bottom:14px}
}

/* avviso: il dispositivo sta limitando le animazioni.
   Compare solo con prefers-reduced-motion, appoggiato sopra .cfg-fab.
   Il `bottom` lo calcola main.js misurando la FAB, non e' un numero indovinato. */
.bb-rm{position:fixed;right:20px;bottom:var(--bb-rm-bottom,92px);z-index:159;
  display:flex;align-items:flex-start;gap:8px;
  width:min(320px,calc(100vw - 28px));padding:13px 14px;
  border:1px solid var(--line);border-radius:14px;background:rgba(10,10,12,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.bb-rm__t{font-family:var(--ff-d);font-size:.76rem;line-height:1.45;color:#dcdce0}
.bb-rm__t b{display:block;color:#fff;font-size:.79rem;margin-bottom:3px;font-weight:500}
.bb-rm__x{flex:none;width:44px;height:44px;margin:-13px -14px 0 0;border:0;
  background:transparent;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer}
.bb-rm__x:hover{color:#fff}
.bb-rm__x:focus-visible{outline:2px solid var(--red);outline-offset:-4px;border-radius:12px}
.bb-rm[hidden]{display:none}
@media(max-width:720px){.bb-rm{right:14px}}

.form-ok{color:#57e08e;font-family:var(--ff-d);font-size:1rem;line-height:1.5;padding:6px 0}
.form-ok[hidden]{display:none}
.hp{position:absolute!important;left:-9999px;height:0;overflow:hidden}
.recaptcha-wrap{display:flex;flex-direction:column;gap:10px;padding:6px 14px 14px;border:1px solid rgba(255,42,42,.35);border-radius:14px;background:rgba(255,42,42,.05)}
.recaptcha-label{font-family:var(--ff-d);font-size:.85rem;color:#fff}
.recaptcha{min-height:78px}

/* ============================================================
   01 — Cosa facciamo, schede grandi
   ============================================================ */
/* ============================================================
   01 — COSA FACCIAMO, a schede grandi
   Da incollare in style.css. Qui NON si ridichiara niente che il
   sito abbia gia' (kicker, section__head, section__note, tl__lead,
   i token, i caratteri): quelle regole arrivano da style.css.
   I tempi sono quelli misurati su apple.com il 2026-09-03,
   campionando ogni 50ms un salto di due schede:
   - la fila si sposta in 1s con una curva simmetrica (4,8% del
     cammino a 164ms, 45% a 491ms, 98% a 915ms)
   - il testo non aspetta: a 60ms dal clic si e' gia' mosso
   - chi esce si dissolve nella prima meta', chi entra compare
     nella seconda
   ============================================================ */
/* LA FASCIA RESTA NERA, LE SCHEDE SONO GRIGIE — al contrario di Apple,
   per scelta di Nicolas (2026-09-04). Da loro la sezione è rgb(29,29,31)
   e le schede dentro sono nere, ma le loro schede sono fotografie: qui
   dentro c'è testo, e la scheda deve leggersi come un oggetto appoggiato
   sul nero della pagina. Il grigio è lo stesso, solo spostato dentro.
   Regola di casa rispettata lo stesso: su fondo scuro la profondità si
   fa col chiaro, mai con un'ombra. */
.sez-schede{position:relative;z-index:1;background:var(--bg);
  /* piena larghezza: sopra ci sono .section{max-width:1280} di
     style.css e .section{padding-left:max(...)} del blocco Head */
  max-width:none;margin:0;padding:clamp(70px,10vw,130px) 0;
  /* NB: la riga sopra da sola non basta sul sito vero. Il blocco
     provvisorio del campo Head porta anche lui `.section{padding-left:
     max(...)}`, pesa uguale (una classe) e nel documento viene DOPO
     questo foglio: a parita' vince lui. Il risultato erano 40px di
     banda in piu' per lato e la finestra della 02 larga 1280 invece
     che quanto lo schermo. Rimedio con la classe raddoppiata, come si
     e' gia' fatto con .pj.pj sulle pagine progetto. */
  /* la sezione misura se stessa: cosi' i fili non dipendono dal
     contenitore di Webflow in cui e' incollata */
  container-type:inline-size;
  --fili:max(var(--pad),calc((100cqw - var(--maxw))/2));
  --scheda-w:calc(100cqw - 2*var(--fili));
  --scheda-gap:18px;
  --tempo-scheda:1s;
  --ease-migra:cubic-bezier(.5,0,.5,1);
  --tempo-testo:.5s;
  --corsa-testo:160px}
.sez-schede.sez-schede{padding-left:0;padding-right:0}
.sez-schede__testa{padding:0 var(--fili)}
.sez-schede .section__head{margin-bottom:clamp(40px,5vw,64px)}
/* il sommario torna al colore che ha in tutte le altre sezioni: qui il
   fondo e' di nuovo il nero della pagina, non la fascia grigia */

/* ---------- la pista ---------- */
/* Desktop: NON si scorre, si cambia scheda col clic (puntini, scheda
   a lato, frecce). La fila e' spostata da una transform lenta e il
   vetro la ritaglia ai bordi della pagina.
   Tocco: torna uno scorrimento vero con l'aggancio, perche' li' il
   dito e' il gesto giusto e il browser lo fa meglio di noi. */
.carosello{position:relative}
.carosello__vetro{overflow:hidden}
.carosello__pista{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:var(--scheda-w);
  gap:var(--scheda-gap);align-items:stretch;padding:2px var(--fili) 6px;
  transform:translate3d(var(--x,0px),0,0);
  transition:transform var(--tempo-scheda) var(--ease-migra);will-change:transform}
.carosello__pista:focus{outline:none}

/* ---------- la scheda ---------- */
.scheda-g{position:relative;min-height:clamp(360px,50vh,520px);display:flex;flex-direction:column;
  justify-content:center;--imb:clamp(28px,4vw,46px);padding:var(--imb);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r);
  background:#1d1d1f;
  transition:border-color .5s,background .5s}
.scheda-g.e-attiva{border-color:rgba(255,255,255,.14)}
.scheda-g:not(.e-attiva){cursor:pointer}
.scheda-g:not(.e-attiva):hover{border-color:rgba(255,42,42,.45)}

/* IL MOVIMENTO: la scheda migra piano, e dentro sono solo i testi ad
   avere un'animazione loro. --off e' la distanza dalla scheda al
   centro (-1, 0, +1): il segno da' il verso, quindi cliccando a
   sinistra si specchia da solo. */
.scheda-g__testo{display:flex;flex-direction:column;gap:16px;max-width:52ch;
  transform:translate3d(calc(var(--off,0)*var(--corsa-testo)),0,0);opacity:0;
  transition:transform var(--tempo-scheda) var(--ease-migra),
             opacity var(--tempo-testo) ease-in-out}
.scheda-g.e-attiva .scheda-g__testo{transform:none;opacity:1;
  transition:transform var(--tempo-scheda) var(--ease-migra),
             opacity var(--tempo-testo) ease-in-out var(--tempo-testo)}
.scheda-g h3{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.06;text-wrap:balance}
.scheda-g .tl__lead{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.7;max-width:46ch}

/* ---------- la foto dentro la scheda ---------- */
/* Due livelli della STESSA foto — la scena col soggetto tolto, e il
   soggetto ritagliato — spostati di quantita' diverse: e' la
   parallasse. Chi e' vicino si sposta di piu' di chi e' lontano,
   come guardando fuori dal finestrino.
   Le due sorgenti del movimento hanno tempi diversi, e per questo
   stanno su due elementi annidati: il contenitore porta il cambio
   scheda (1s, la stessa curva della scheda, cosi' arrivano insieme),
   l'immagine dentro porta il mouse (.25s, che deve sembrare subito).
   Una transizione sola non potrebbe avere due durate.
   Le immagini le prepara `ritaglia.py`. */
/* IL TESTO PARTE DALL'ALTO, NON DAL CENTRO. Centrato, un testo lungo
   comincia piu' in su di uno corto: a 1920 i tre titoli partivano a
   115, 135 e 150px, e cambiando scheda si vedeva saltare. Dall'alto
   partono tutti dall'imbottitura. La foto resta stirata: ha
   `align-self:stretch` scritto suo. */
.scheda-g:has(.scheda-g__foto){display:grid;align-items:start;padding-right:0;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,3vw,40px)}
/* Due righe riservate al titolo: "Produzione Video & Foto" va a capo e
   gli altri due no, e senza questo il paragrafo della prima scheda
   partirebbe una riga piu' sotto degli altri. 2,12 = due righe della
   sua interlinea (1,06). */
.scheda-g:has(.scheda-g__foto) h3{min-height:2.12em}
.scheda-g__foto{position:relative;overflow:hidden;align-self:stretch;background:#000;
  margin-top:calc(-1*var(--imb));margin-bottom:calc(-1*var(--imb));
  /* -1px perche' il bordo della scheda ha raggio interno di un pixel
     meno: senza, la foto sbuca dall'angolo tondo */
  border-radius:0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0;
  /* IL BORDO VERSO IL TESTO NON E' UN TAGLIO. La foto si scioglie
     nella scheda: la maschera la porta a niente, e la sfocatura qui
     sotto le toglie il dettaglio prima che sparisca. Cosi' il grigio
     della scheda e la foto sono una superficie sola, non due pezzi
     accostati. */
  --sfuma:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 6%,rgba(0,0,0,.85) 16%,#000 26%);
  -webkit-mask-image:var(--sfuma);mask-image:var(--sfuma)}
.scheda-g__foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  --velo:linear-gradient(to right,#000 0,rgba(0,0,0,.55) 14%,transparent 30%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:var(--velo);mask-image:var(--velo)}
.foto__strato{position:absolute;inset:0;will-change:transform;
  transform:translate3d(calc(clamp(-1,var(--off,0),1)*var(--corsa)),0,0);
  transition:transform var(--tempo-scheda) var(--ease-migra)}
.foto__strato img{display:block;width:100%;height:100%;object-fit:cover;
  /* dove guarda la cornice: ogni foto ha il suo centro d'interesse,
     e `--fuoco` lo dice scheda per scheda (vedi le tre righe sotto) */
  object-position:var(--fuoco,50% 50%);
  /* piu' grandi della cornice: e' lo slancio che serve a spostarsi
     senza scoprire il bordo */
  transform:translate3d(calc(var(--mx,0)*var(--corsa-x)),calc(var(--my,0)*var(--corsa-y)),0) scale(var(--cresce));
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
/* LA SCALA E' LA STESSA PER TUTTI E DUE, e non e' un dettaglio: il
   soggetto ritagliato deve stare esattamente sopra il buco lasciato
   nello sfondo. Con due scale diverse (erano 1,06 e 1,12) i due
   livelli erano gia' sfalsati da fermi, e la ricucitura dello sfondo
   si vedeva come un alone sfocato intorno alla persona.
   1,12 e' il minimo che regge la corsa piu' lunga, quella del
   soggetto: (1,12-1)/2 * 530px = 32px, contro i 21 che percorre. */
/* Il centro d'interesse e lo slancio di ognuna delle tre.
   `--cresce` sta QUI e non sui livelli, cosi' sfondo e soggetto non
   possono avere scale diverse nemmeno per sbaglio.
   Quanto deve valere lo dice il rapporto fra foto e cornice:
   `object-fit:cover` lascia gia' abbondanza sul lato lungo, e la
   crescita serve solo per il lato che entra esatto.
   - foto verticale in cornice orizzontale: stretta in larghezza, e
     la corsa lunga e' proprio quella -> 1,12
   - foto orizzontale: la larghezza avanza del 41%, e resta da coprire
     solo la corsa verticale di 6px -> 1,045. Con 1,12 il telefono
     veniva tagliato sopra e sotto. */
.scheda-g__foto{--cresce:1.12}
.scheda-g__foto--larga{--cresce:1.045}
.scheda-g__foto--testa{--fuoco:50% 6%}      /* foto verticale: conta l'alto */
.scheda-g__foto--sinistra{--fuoco:42% 50%}  /* i due schermi stanno a sinistra */

.foto__strato--fondo{--corsa:5px}
.foto__strato--fondo img{--corsa-x:4px;--corsa-y:3px}
.foto__strato--sopra{--corsa:12px}
.foto__strato--sopra img{--corsa-x:9px;--corsa-y:6px}

/* ---------- la barra sotto: puntini e linea ---------- */
/* l'etichetta parlata dei puntini: il sito non ha una classe per
   nascondere alla vista lasciandola ai lettori di schermo, e senza
   questa regola la pillola diventa un bottone pieno di scritte */
.sez-schede .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.carosello__comandi{display:flex;justify-content:center;margin-top:clamp(26px,3vw,42px)}
.comandi{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 12px;
  /* sul nero la pillola e' grigia come le schede: e' lo stesso vetro
     della barra di navigazione, appena piu' chiaro perche' qui non ha
     una fascia sotto che la stacchi */
  border-radius:100px;border:1px solid rgba(255,255,255,.1);
  background:rgba(29,29,31,.72);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)}
/* la linea cresce con la stessa durata e la stessa curva della scheda:
   barra e scheda arrivano insieme, invece di scattare una prima e una
   dopo */
.carosello__punto{position:relative;width:28px;height:44px;display:grid;place-items:center;padding:0;
  background:none;border:0;cursor:pointer;transition:width var(--tempo-scheda) var(--ease-migra)}
.carosello__punto i{display:block;width:6px;height:6px;border-radius:3px;
  background:rgba(255,42,42,.82);
  transition:width var(--tempo-scheda) var(--ease-migra),background .3s ease,transform .25s var(--ease)}
.carosello__punto:hover i{background:var(--red);transform:scale(1.25)}
.carosello__punto.e-attivo{width:60px}
.carosello__punto.e-attivo i{width:44px;background:var(--red);transform:none}
.carosello__punto:focus-visible{outline:none}
.carosello__punto:focus-visible i{box-shadow:0 0 0 3px rgba(255,42,42,.35)}
.comandi:has(.carosello__punto:focus-visible){border-color:var(--red)}

/* ---------- dove si tocca: torna lo scorrimento vero ---------- */
/* La condizione non e' solo la larghezza: un telefono che dichiara una
   finestra larga resterebbe col carosello a clic e il dito non
   scorrerebbe niente. */
@media(max-width:900px),(hover:none) and (pointer:coarse){
  .sez-schede{--scheda-w:min(87.5cqw,var(--maxw))}
  .carosello__vetro{overflow:visible}
  .carosello__pista{transform:none;transition:none;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-right:calc(100cqw - var(--scheda-w) - var(--fili));scroll-padding-inline-start:var(--fili);
    overscroll-behavior-x:contain}
  .carosello__pista::-webkit-scrollbar{display:none}
  /* Niente `align-self:start`: con quello ogni scheda si fermava al suo
     contenuto e le tre venivano di tre altezze diverse (563, 539, 511 a
     390px), che scorrendo si vede. Lasciandole allo `stretch` della
     pista prendono tutte l'altezza della piu' piena. */
  .scheda-g{scroll-snap-align:start;scroll-snap-stop:always;
    min-height:clamp(240px,38svh,340px);--imb:22px;padding:24px var(--imb) 26px}
  .scheda-g h3{font-size:clamp(1.4rem,6vw,1.9rem)}
  /* col dito la foto va SOPRA il testo, a filo dei tre lati: una
     colonna sola non ha spazio per due */
  /* `align-content:start` non e' un doppione di `align-items`: le schede
     adesso sono tutte alte quanto la piu' piena, e lo spazio che avanza
     una griglia lo spalma sulle righe. Cosi' la foto della scheda piu'
     corta scendeva, e il testo con lei — 293, 306 e 319px a 390. Lo
     spazio che avanza va tutto in fondo. */
  .scheda-g:has(.scheda-g__foto){grid-template-columns:minmax(0,1fr);
    align-items:start;align-content:start;padding-right:var(--imb);gap:18px}
  /* LA CORNICE PRENDE LA FORMA DELLA FOTO. Con un'altezza fissa la
     cornice veniva 326x186 (rapporto 1,76) mentre la foto e' 0,75:
     entrava il 43% dell'altezza, cioe' una fetta orizzontale in cui
     non si capiva piu' niente. A 4:3 ne entra il 56%, che e'
     esattamente la fascia buona — testa, monitor e le due persone in
     fondo. Il tetto in svh e' per i telefoni larghi e i tablet, dove
     4:3 diventerebbe mezza pagina. */
  .scheda-g__foto{order:-1;align-self:auto;aspect-ratio:4/3;height:auto;max-height:42svh;
    margin:-24px calc(-1*var(--imb)) 0;
    border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
    /* qui la foto sta sopra il testo: il lato da sciogliere e' quello
       di sotto, non quello di sinistra */
    --sfuma:linear-gradient(to top,transparent 0,rgba(0,0,0,.35) 8%,rgba(0,0,0,.85) 20%,#000 32%)}
  .scheda-g__foto::after{
    --velo:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 16%,transparent 34%)}
  /* qui `--off` lo riscrive il JavaScript a ogni fotogramma: una
     transizione a tempo arriverebbe in ritardo sul dito */
  .foto__strato{transition:none}
  .scheda-g:not(.e-attiva){cursor:auto}
  /* IL TESTO SEGUE IL DITO: `--off` e `--fade` li scrive il JavaScript a
     ogni fotogramma dello scorrimento, come fa Apple, che lega la
     didascalia alla posizione e non al cronometro. Le due voci sono
     elencate insieme perche' la seconda deve battere la regola di
     `.e-attiva` qui sopra, che pesa uguale. */
  .scheda-g__testo,.scheda-g.e-attiva .scheda-g__testo{
    max-width:none;transition:none;
    transform:translate3d(calc(var(--off,0)*60px),0,0);opacity:var(--fade,1)}
  /* ANCHE LA BARRA SEGUE IL DITO. Con una transizione a tempo la linea
     si allungava solo a gesto finito, con un ritardo che si vedeva:
     `--vicino` (quanto la scheda e' vicina al centro, da 0 a 1) lo
     scrive il JavaScript a ogni fotogramma, come `--off` e `--fade`.
     Le voci con `.e-attivo` sono ripetute perche' pesano di piu' e
     senza queste vincerebbero le misure fisse di sopra. */
  .carosello__punto,.carosello__punto.e-attivo{transition:none;
    width:calc(28px + 32px*var(--vicino,0))}
  .carosello__punto i,.carosello__punto.e-attivo i{transition:background .25s ease;
    width:calc(6px + 38px*var(--vicino,0))}
}
/* ============================================================
   LE ALTRE PAGINE SUI FILI DELLA NAV — 2026-09-03
   Il blocco provvisorio del campo Head porta sui fili solo `.section`
   e `.footer`, che stanno sulla home. Le altre pagine hanno contenitori
   loro, centrati su misure diverse, e a schermo largo cadono molto più
   dentro della barra. Misurato a 1920 (fili a 313 e 1593):

     chi siamo  583 → 1323   (270px dentro)
     legali     583 → 1323   (270px dentro)
     progetto   453 → 1453   (140px dentro)
     portfolio  353 → 1553   (40px dentro)

   Qui prendono lo stesso padding della barra. Dove il contenuto è testo
   da leggere (chi siamo, legali) la misura di riga resta quella di
   prima, spostata sul filo invece che centrata: una riga da 1280px non
   si legge, ed è la stessa scelta della home, dove `.section__head` sta
   dentro 820px pur partendo dal filo.
   ============================================================ */
/* La classe è ripetuta apposta (`.pj.pj`): le regole di queste pagine
   non stanno in style.css ma dentro i loro embed, cioè in un <style> che
   nel documento viene DOPO questo blocco. A parità di peso vincerebbero
   loro; raddoppiando la classe il peso sale e non serve !important. */
.cs.cs,.legal.legal,.pf.pf,.pj.pj{max-width:none;margin-left:0;margin-right:0;
  padding-left:max(var(--pad),calc((100% - var(--maxw))/2));
  padding-right:max(var(--pad),calc((100% - var(--maxw))/2))}
/* la misura di riga di chi siamo e delle pagine legali */
.cs.cs>*,.legal.legal>*{max-width:820px}
.cs.cs>.cs-facts,.cs.cs>.cs-cta,.cs.cs>.cs-pullquote{max-width:none}

html:not(.js) .carosello__comandi{display:none}
html:not(.js) .scheda-g__testo{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .carosello__pista,.scheda-g__testo,.scheda-g.e-attiva .scheda-g__testo,
  .carosello__punto,.carosello__punto i,.foto__strato,.foto__strato img{transition:none}
  .scheda-g__testo{transform:none}
  /* la foto resta ferma e intera: la scala serviva solo al movimento */
  .foto__strato{transform:none}
  .foto__strato img{transform:none}
}

/* ============================================================
   02 — Come lavoriamo, scheda agganciata
   ============================================================ */
/* ============================================================
   02 — COME LAVORIAMO, una scheda sola che si sfoglia scorrendo
   Da incollare in style.css, dopo il blocco della 01: da li'
   arrivano `.carosello__comandi`, `.comandi` e `.carosello__punto`,
   che qui NON si ridichiarano.
   Come la 01, non si ridichiara niente che il sito abbia gia'
   (`.kicker`, `.section__head`, `.tl__copy`, `.tl__eyebrow`,
   `.tl__lead`, `.tl__note`, `.tl__closing`, `.tl__visual`, tutte le
   `.tlv-*` delle illustrazioni, i token, i caratteri).

   IL GESTO: la scheda si aggancia (`position:sticky`) e la pagina
   continua a scorrere sotto. Nessuna rotella rubata: chi scorre
   comanda, con la rotella, il trackpad, i tasti o la barra laterale.
   Quanto si e' scorso dentro la corsa decide quale passo sta al
   centro — e ogni passo, arrivato, resta fermo per il 62% del suo
   tratto, cosi' si legge.
   ============================================================ */
/* ---------- LA CONDIZIONE PERCHE' L'AGGANCIO ESISTA ----------
   `style.css` ha `overflow-x:hidden` sia su `html` sia su `body` (righe
   28-29), per non far comparire la barra orizzontale. Ma `hidden` su
   `body` ne fa un contenitore che scorre, e `position:sticky` si
   aggancia a QUELLO invece che alla finestra: la scheda scorreva via
   come un blocco qualunque — misurato, -325px al primo assaggio.
   `clip` taglia allo stesso modo senza creare il contenitore, e lo
   sticky torna a vedere la finestra. Sta dentro `:has()` per non
   toccare le pagine che questa sezione non ce l'hanno (e `:has()` sul
   sito e' gia' in uso, nel blocco Head). */
html:has(.sez-metodo),body:has(.sez-metodo){overflow-x:clip}
.sez-metodo{position:relative;z-index:1;background:var(--bg);
  /* piena larghezza: sopra ci sono .section{max-width:1280} di
     style.css e .section{padding-left:max(...)} del blocco Head.
     Niente padding verticale: qui lo spazio lo fa il palco, che e'
     alto quanto la finestra. */
  max-width:none;margin:0;padding:0;
  /* NB: `padding:0` da solo non basta sul sito vero. Il blocco
     provvisorio del campo Head porta anche lui `.section{padding-left:
     max(...)}`, pesa uguale e viene DOPO questo foglio: a parita'
     vince lui, e la finestra restava larga 1280 invece che quanto lo
     schermo — cioe' senza i passi vicini che sbucano ai bordi, che e'
     tutto il punto. La classe raddoppiata qui sotto pesa di piu'. */
  /* la sezione misura se stessa, come la 01: i fili non dipendono
     dal contenitore di Webflow in cui e' incollata */
  container-type:inline-size;
  --fili:max(var(--pad),calc((100cqw - var(--maxw))/2));
  /* L'UNICA MANOPOLA DELLA LUNGHEZZA. Quanto si scorre per passare
     da un passo al successivo. Otto passi con 55svh l'uno fanno
     (7 + 0,62) x 55 + 100 = 519svh, cioe' poco piu' di cinque
     schermate. */
  --corsa-passo:55svh;
  --riposo:.62;
  --tempo-scheda:1s;
  --ease-migra:cubic-bezier(.5,0,.5,1);
  --corsa-testo:120px;
  --imb:clamp(24px,3.2vw,44px)}

/* la corsa: e' solo altezza, non si vede. Dentro ci sta il palco,
   che si incolla in cima e ci resta finche' la corsa non e' finita.
   L'altezza la scrive anche il CSS (e non solo il JavaScript) cosi'
   la pagina e' gia' della misura giusta al primo fotogramma. */
.metodo__corsa{height:calc(100svh + (var(--passi,8) - 1 + var(--riposo)) * var(--corsa-passo));
  /* IL MARGINE NEGATIVO ANNULLA L'ARIA SOPRA LA SCHEDA AL PRIMO
     FOTOGRAMMA. Il palco ha in cima lo spazio della barra fissa
     (~87px): serve quando la scheda e' agganciata, ma prima che si
     agganci quello spazio e' solo un vuoto fra il titolo e la scheda.
     Tirando su la corsa di altrettanto, la scheda parte attaccata al
     titolo e l'aggancio non cambia di niente: `position:sticky`
     guarda `top`, non il margine di chi la contiene. */
  margin-top:calc(-1 * (var(--nav-h,74px) + clamp(10px,2vh,26px)))}
.metodo__palco{position:sticky;top:0;height:100svh;
  /* la barra di navigazione e' fissa e coprirebbe la scheda: il
     JavaScript misura la sua altezza vera e la scrive qui */
  padding:calc(var(--nav-h,74px) + clamp(10px,2vh,26px)) var(--fili) clamp(18px,3vh,34px);
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(14px,2.4vh,30px);align-content:stretch}
/* la testa: sui fili come quella della 01, e sopra la corsa.
   IMBOTTITURA CORTA, e non e' una svista: sopra c'e' gia' la coda
   della 01 (fino a 130px suoi), e sommate facevano una fascia nera
   di piu' di 260px fra i puntini della 01 e questo occhiello —
   segnalata da Nicolas il 2026-09-07. */
.sez-metodo.sez-metodo{padding-left:0;padding-right:0}
.sez-metodo__testa{padding:clamp(18px,2.2vw,34px) var(--fili) 0}
.sez-metodo .section__head{margin-bottom:clamp(12px,1.6vh,22px)}

/* ---------- la scheda ---------- */
/* Una sola, da filo a filo, grigia sul nero: la stessa superficie
   delle schede della 01 (2026-09-04, scelta di Nicolas: la fascia
   resta nera e sono le schede a schiarire).
   ALTA QUANTO IL PASSO PIU' PIENO, non quanto lo spazio disponibile:
   gli otto passi stanno nella stessa riga di griglia, quindi la
   misura la detta il piu' alto ed e' la stessa per tutti — la scheda
   non cambia mai altezza mentre si sfoglia. Presa invece tutta
   l'altezza libera, i passi leggeri ci nuotavano dentro: 250px di
   testo in una scheda da 720. Il vuoto che avanza sta FUORI dalla
   scheda, che e' dove non si vede. */
/* LA FINESTRA VA DA BORDO A BORDO, LA SCHEDA STA SUI FILI.
   Chiesto da Nicolas il 2026-09-07: prima il vetro finiva dove finisce
   la scheda e i passi vicini sparivano dentro il nulla, quindi non si
   capiva che ce n'erano altri. Adesso il ritaglio e' lo schermo: ai
   lati spuntano il passo prima e il prossimo, e lo scorrimento si
   spiega da solo — e' la stessa cosa che fa la 01. */
.metodo__scheda{position:relative;align-self:center;
  /* esce dai fili del palco e arriva ai bordi */
  width:auto;margin:0 calc(-1 * var(--fili));
  height:auto;max-height:min(100%,720px);
  background:none;border:0;border-radius:0;overflow:hidden}
.metodo__vetro{height:100%;overflow:hidden}
.metodo__pista{height:100%;display:grid;grid-auto-flow:column;
  /* la scheda misura da filo a filo; il resto della finestra lo
     occupano i vicini */
  grid-auto-columns:calc(100cqw - 2 * var(--fili));gap:var(--scheda-gap,18px);
  padding:0 var(--fili);
  transform:translate3d(var(--x,0px),0,0);will-change:transform}
.metodo__pista:focus{outline:none}
.metodo__pista:focus-visible{outline:2px solid var(--red);outline-offset:-3px}

/* ---------- il passo ---------- */
/* Stessa impaginazione dei vecchi pannelli — testo a sinistra,
   illustrazione a destra — ma senza il loro riquadro: il riquadro
   adesso e' la scheda, e un bordo dentro l'altro si vedrebbe. */
/* Adesso la scheda grigia e' il PASSO, non la cornice: ognuno ha il
   suo bordo e il suo grigio, e sono loro a sfilare. Quello acceso e'
   appena piu' chiaro dei vicini, come nella 01. */
/* IL CONTENUTO NON VA AI BORDI DELLA SCHEDA. Con l'imbottitura sola
   il testo finiva appiccicato a sinistra e l'illustrazione a destra,
   con un vuoto in mezzo: la scheda sembrava stirata (segnalato da
   Nicolas il 2026-09-07). Adesso i fianchi sono piu' larghi
   dell'imbottitura verticale e le due colonne stanno piu' vicine. */
.passo{height:100%;overflow:hidden;
  padding:var(--imb) clamp(26px,4vw,60px);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r);
  background:#1d1d1f;
  display:grid;
  /* LE COLONNE ALLA LORO MISURA VERA, E LA COPPIA AL CENTRO.
     Con le frazioni la colonna del testo restava larga anche quando
     il testo finiva a 52 caratteri: il vuoto si apriva in mezzo
     (misurato, 217px a 1920). Cosi' invece lo spazio che avanza va
     fuori, ai lati, e le due colonne restano vicine. */
  grid-template-columns:minmax(0,52ch) minmax(0,clamp(240px,26vw,420px));
  justify-content:center;gap:clamp(20px,2.6vw,44px);
  align-items:center;align-content:center;
  transition:border-color .5s,opacity .5s}
.metodo__pista .passo:not(.e-attivo){border-color:rgba(255,255,255,.05)}
.passo__corpo{display:contents}
/* IL MOVIMENTO. La fila si sposta con lo scorrimento, fotogramma per
   fotogramma; dentro, testo e illustrazione hanno una corsa loro piu'
   corta — e' la parallasse della 01, la stessa idea della didascalia
   di Apple, che percorre 161px contro i 2560 della fila.
   `--off` (da -1 a +1) e `--fade` li scrive il JavaScript: una
   transizione a tempo arriverebbe in ritardo sulla rotella. */
.passo__testo{transform:translate3d(calc(var(--off,0)*var(--corsa-testo)),0,0);
  opacity:var(--fade,1);max-width:52ch;min-width:0}
.passo__figura{transform:translate3d(calc(var(--off,0)*var(--corsa-testo)*.55),0,0);
  opacity:var(--fade,1);min-width:0}
/* le illustrazioni sono animate a ciclo continuo: fuori dal passo
   acceso non devono girare, sono otto scene tutte insieme */
.metodo__pista .passo:not(.e-attivo) *{animation-play-state:paused}
.passo h3{font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.1;text-wrap:balance;margin-bottom:12px}
.passo .tl__lead{font-size:clamp(1rem,1.1vw,1.08rem);line-height:1.7}
/* IL RITMO E' PIU' STRETTO DI QUELLO DEI VECCHI PANNELLI. Li' ogni
   pannello aveva la pagina intera sotto di se'; qui devono starci
   tutti nella stessa scheda, e l'altezza la detta il passo 04 col suo
   elenco di tredici voci. Sono una quarantina di pixel, e sono la
   differenza fra l'aggancio e la rete che lo spegne. */
.passo .tl__lead,.passo .tl__note{margin-bottom:10px}
.passo .tl__closing{margin-top:12px;padding-top:12px}
.passo .xcard__tags,.passo .xcard__checks{margin-bottom:2px}
/* L'elenco piu' lungo e' quello del workspace: tredici voci. Le
   colonne NON si contano a mano: con un numero fisso, a 1366px le
   quattro colonne venivano da 150px e "Cronologia del progetto"
   andava a capo — quattro righe alte il doppio, 189px invece di 152.
   Con `auto-fit` le colonne le decide la larghezza vera, e nessuna
   voce va a capo. */
.passo .xcard__checks{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 18px}

/* Finestra bassa (un portatile da tredici pollici e' sui 620px di
   finestra utile). Prima si prende dai margini, che non si leggono;
   poi, sotto i 760px, dalla scala dei testi. Sotto ancora non basta
   nemmeno questo, ed e' la rete a spegnere l'aggancio. */
@media(min-width:901px) and (max-height:860px){
  .sez-metodo{--imb:clamp(18px,2.2vw,30px)}
  .sez-metodo .section__head{margin-bottom:clamp(24px,3vh,36px)}
}
@media(min-width:901px) and (max-height:760px){
  /* il testo si prende piu' colonna: l'elenco del workspace passa da
     quattro righe a tre, e sono una sessantina di pixel. La scenetta
     resta, solo piu' piccola. */
  .sez-metodo{--imb:20px}
  /* e la cornice si stringe prima dei testi: sopra la scheda basta un
     dito d'aria sotto la barra, e sotto altrettanto */
  .metodo__palco{padding:calc(var(--nav-h,74px) + 6px) var(--fili) 12px;gap:10px}
  .passo{grid-template-columns:minmax(0,52ch) minmax(0,clamp(200px,20vw,300px));gap:clamp(18px,2.5vw,32px)}
  .sez-metodo .comandi{height:38px}
  .sez-metodo .carosello__punto{height:38px}
  .passo h3{font-size:1.25rem;margin-bottom:8px}
  .passo .tl__lead{font-size:.95rem;line-height:1.55}
  .passo .tl__lead,.passo .tl__note{margin-bottom:8px}
  .passo .tl__note,.passo .tl__closing{font-size:.85rem}
  .passo .tl__closing{margin-top:10px;padding-top:10px}
  .passo .tl__visual{min-height:130px}
  .sez-metodo .carosello__comandi{margin-top:-4px}
}
/* Ultimo gradino, per le finestre davvero basse. Sotto questo non si
   stringe piu': si toglierebbe da leggere, e allora e' meglio la
   colonna che la rete mette al suo posto. */
@media(min-width:901px) and (max-height:700px){
  .sez-metodo{--imb:16px}
  .metodo__palco{padding:calc(var(--nav-h,74px) + 4px) var(--fili) 8px;gap:8px}
  .passo{grid-template-columns:minmax(0,52ch) minmax(0,clamp(170px,16vw,240px));gap:20px}
  .passo h3{font-size:1.15rem;margin-bottom:6px}
  .passo .tl__lead{font-size:.9rem;line-height:1.5}
  .passo .tl__lead,.passo .tl__note{margin-bottom:6px}
  .passo .tl__note,.passo .tl__closing{font-size:.8rem}
  .passo .tl__closing{margin-top:8px;padding-top:8px}
  .passo .xcard__checks{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:5px 14px}
  .passo .xcard__checks li,.passo .xcard__tags li{font-size:.78rem}
  .passo .tl__visual{min-height:100px}
  .sez-metodo .comandi{height:34px}
  .sez-metodo .carosello__punto{height:34px}
}

/* ---------- i puntini ---------- */
/* La pillola, i puntini e la linea rossa sono quelli della 01: qui
   si ridichiarano solo le variabili che il blocco della 01 tiene su
   `.sez-schede`, e la regola che lega la linea allo scorrimento
   invece che a un cronometro (come fa la 01 sotto il dito). */
.sez-metodo .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sez-metodo .carosello__comandi{margin-top:0}
.sez-metodo .carosello__punto,.sez-metodo .carosello__punto.e-attivo{transition:none;
  width:calc(20px + 26px*var(--vicino,0))}
.sez-metodo .carosello__punto i,.sez-metodo .carosello__punto.e-attivo i{
  transition:background .25s ease;width:calc(6px + 30px*var(--vicino,0))}

/* ---------- la rete: se un passo non entra, si vede ---------- */
/* LA RETE, e resta ORIZZONTALE. Una misura sbagliata dentro
   `overflow:hidden` non si lamenta: taglia e basta. Il JavaScript
   confronta il contenuto di ogni passo con l'altezza della scheda e,
   se qualcosa resta fuori, spegne l'aggancio.

   Fino al 2026-09-08 spegnendolo metteva i passi IN COLONNA, uno sotto
   l'altro. Nicolas: «deve essere sempre uno scrolling orizzontale,
   diventa verticale se va a scheda». Ha ragione, ed e' una regola sulla
   forma della sezione, non un ripiego: gli otto passi sono una fila,
   e una fila resta una fila anche quando l'aggancio non regge. Quindi
   qui la scheda smette solo di stare incollata e di essere alta quanto
   la finestra — i passi restano affiancati e si sfogliano di lato, con
   gli stessi puntini di sempre.

   NOTA: non si riusa il blocco del telefono, che a prima vista fa la
   stessa cosa. Quello nasconde contenuto apposta (la nota, la frase di
   chiusura, le voci oltre la sesta) per tenere le schede basse su uno
   schermo stretto. Qui il contenuto e' proprio la ragione per cui
   l'aggancio ha ceduto: nasconderlo sarebbe rispondere al problema
   cancellando la domanda. */
.sez-metodo.e-lunga .metodo__corsa{height:auto;margin-top:0}
.sez-metodo.e-lunga .metodo__palco{position:static;height:auto;
  padding-top:0;padding-bottom:clamp(70px,10vw,130px)}
.sez-metodo.e-lunga .metodo__scheda{height:auto;max-height:none}
.sez-metodo.e-lunga .metodo__vetro{overflow:visible}
/* `align-items:start`: senza aggancio le schede non hanno piu' una
   riga alta quanto la finestra da riempire, e stirarle tutte a quella
   piu' piena le farebbe alte il doppio del necessario */
/* `scroll-padding-inline-start`: senza, l'aggancio incolla la scheda al
   bordo del contenitore ignorando l'imbottitura, e il filo della barra
   sparisce (misurato: primo passo a 0 invece che a 80). */
.sez-metodo.e-lunga .metodo__pista{transform:none;align-items:start;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--fili);
  scrollbar-width:none;overscroll-behavior-x:contain}
.sez-metodo.e-lunga .metodo__pista::-webkit-scrollbar{display:none}
.sez-metodo.e-lunga .passo{height:auto;overflow:visible;
  scroll-snap-align:start;scroll-snap-stop:always}
.sez-metodo.e-lunga .passo__testo,.sez-metodo.e-lunga .passo__figura{
  transform:none;opacity:1}

/* ---------- dove si tocca: niente aggancio, si sfoglia col dito ----------
   La condizione non e' solo la larghezza — un telefono che dichiara
   una finestra larga resterebbe agganciato e il dito non
   scorrerebbe niente — ed e' la stessa scritta nel JavaScript. */
@media(max-width:900px),(hover:none) and (pointer:coarse){
  .sez-metodo{--corsa-testo:60px}
  /* niente margine negativo: qui il palco non ha lo spazio della barra
     da compensare, e tirare su la corsa metterebbe la fila sopra al
     titolo (visto sul telefono di Nicolas, 2026-09-07) */
  .metodo__corsa{height:auto;margin-top:0}
  .metodo__palco{position:static;height:auto;display:block;
    padding:0 0 clamp(70px,10vw,130px)}
  .sez-metodo .section__head{margin-bottom:clamp(30px,5vw,48px)}
  /* `margin:0`: il palco qui non ha imbottitura laterale, e il margine
     negativo che sul computer fa uscire la finestra dai fili qui
     spingerebbe la fila mezzo filo fuori dallo schermo */
  .metodo__scheda{margin:0;height:auto;max-height:none;border:0;background:none;border-radius:0;overflow:visible}
  .metodo__vetro{overflow:visible;border-radius:0}
  /* torna uno scorrimento vero con l'aggancio: qui il dito e' il
     gesto giusto e il browser lo fa meglio di noi */
  /* `align-items:stretch` (il valore di serie): le otto schede stanno
     nella stessa riga di griglia, quindi prendono tutte l'altezza
     della piu' piena — IDENTICHE, che e' quello che Nicolas ha
     chiesto il 2026-09-07. Perche' non sia un'altezza assurda, qui
     sotto si stringe quello che si puo' stringere senza togliere
     parole: pastiglie e illustrazioni. */
  .metodo__pista{transform:none;grid-auto-columns:min(87.5cqw,var(--maxw));
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-left:var(--fili);
    padding-right:calc(100cqw - min(87.5cqw,var(--maxw)) - var(--fili));
    scroll-padding-inline-start:var(--fili);overscroll-behavior-x:contain}
  .metodo__pista::-webkit-scrollbar{display:none}
  .passo{height:auto;scroll-snap-align:start;scroll-snap-stop:always;
    grid-template-columns:minmax(0,1fr);gap:18px;--imb:22px;padding:24px var(--imb) 26px;
    border:1px solid rgba(255,255,255,.07);border-radius:var(--r);background:#1d1d1f}
  /* la scenetta va sopra il testo: una colonna sola non ha spazio
     per due (e' la stessa scelta di `.tl__panel-inner` a 900px) */
  .passo__figura{order:-1}
  .passo h3{font-size:clamp(1.3rem,5.4vw,1.7rem)}
  .sez-metodo .carosello__comandi{margin-top:clamp(22px,4vw,34px)}

  /* ---- QUI SI SACRIFICA CONTENUTO PER L'ALTEZZA ----
     Scelta di Nicolas (2026-09-07): sul telefono le schede andavano
     da 490 a 1058px, e una scheda alta il doppio di un'altra non e'
     piu' un carosello. Se ne va la nota grigia, se ne va la frase di
     chiusura, e gli elenchi si fermano a sei voci con un "+N altre".
     Sul computer non cambia niente: li' c'e' tutto.
     ECCEZIONE: la nota del passo 04 resta, perche' li' non e' una
     nota — e' l'etichetta dell'elenco ("All'interno trovi:"), e
     toglierla lascerebbe una lista senza titolo. */
  .passo .tl__closing{display:none}
  .passo:not([data-passo="3"]) .tl__note{display:none}
  /* Le pastiglie sono corte e si incolonnano bene: sei. Le spunte
     del passo 04 sono frasi che vanno a capo in due colonne strette
     (211px per sei voci): quattro. Le soglie stanno SOLO qui — il
     "+N altre" conta le voci nascoste, non le indovina. */
  .passo .xcard__tags li:nth-child(n+7):not(.passo__altre),
  .passo .xcard__checks li:nth-child(n+4):not(.passo__altre){display:none}
  .passo .passo__altre{display:list-item}
  /* la finta finestra di Notion e' l'illustrazione piu' alta di tutte
     (246px contro i 140 delle altre) e da sola sbilanciava il passo
     04: due righe in meno, che li' sono decorazione */
  .passo .tlv-notion__list li:nth-child(n+3){display:none}
  /* e il paragrafo respira un po' meno: e' l'unico modo di guadagnare
     sul passo 04 senza togliergli una frase */
  .passo .tl__lead{font-size:.94rem;line-height:1.55}
  /* Le pastiglie: a 310px di scheda ne entrava UNA per riga, e cinque
     etichette diventavano 221px. Piu' piccole ne entrano due o tre,
     e sono una novantina di pixel in meno sui passi 05, 07 e 08. */
  .passo .xcard__tags{gap:7px}
  .passo .xcard__tags li{font-size:.74rem;padding:5px 11px}
  /* Le illustrazioni: `zoom` rimpicciolisce anche l'ingombro, non
     solo il disegno (`transform:scale` lascerebbe il buco). Dove non
     c'e' (Firefox prima della 126) resta la misura piena: la scheda
     viene piu' alta, non si rompe niente. */
  .passo__figura{zoom:.78}
  /* il contenuto sta al centro, come sul computer: le schede sono
     tutte alte uguale e quelle leggere hanno aria da spartire */
  .passo{align-content:center}
}
/* il segnale delle voci nascoste: lo scrive il JavaScript, e si vede
   solo dove le voci sono davvero nascoste */
.passo__altre{display:none;color:var(--muted-d);font-style:italic}
.passo .xcard__checks .passo__altre{padding-left:24px;font-size:.86rem}
.passo .xcard__checks .passo__altre::before{content:none}
.passo .xcard__tags .passo__altre{border:0;background:none;padding:7px 2px;font-size:.8rem}

/* ---------- chi ha chiesto meno movimento ---------- */
/* Nessun aggancio e nessuna corsa: gli otto passi uno sotto l'altro,
   che e' come li leggerebbe chi non vede la scheda muoversi. */
@media(prefers-reduced-motion:reduce){
  /* niente margine negativo: qui il palco non ha lo spazio della barra
     da compensare, e tirare su la corsa metterebbe la fila sopra al
     titolo (visto sul telefono di Nicolas, 2026-09-07) */
  .metodo__corsa{height:auto;margin-top:0}
  .metodo__palco{position:static;height:auto;
    padding-top:0;padding-bottom:clamp(70px,10vw,130px)}
  .metodo__scheda{height:auto;max-height:none}
  .metodo__vetro{overflow:visible}
  .metodo__pista{grid-auto-flow:row;grid-auto-columns:auto;transform:none;overflow:visible}
  .passo{height:auto;overflow:visible;scroll-snap-align:none;
    border-bottom:1px solid var(--line-soft)}
  .passo:last-child{border-bottom:0}
  .passo__testo,.passo__figura{transform:none;opacity:1}
  .sez-metodo .carosello__comandi{display:none}
}

/* ============================================================
   03 — Chi siamo, scheda sola
   ============================================================ */
/* ============================================================
   03 — CHI SIAMO, una scheda sola
   Rifatta il 2026-09-07: la lingua e' quella della 01 e della 02 —
   una scheda grigia #1d1d1f da filo a filo, dentro il testo e a
   destra il globo. Fuori sono rimasti il pannello "Workspace live",
   che mostrava dati inventati, e la mini-timeline Briefing ->
   Partnership, che diceva le stesse cose della 02 due sezioni dopo.
   Le regole del globo stanno gia' in `style.css` (`.globe-wrap`,
   `.globe-canvas`, `.globe-label`) e lo disegna `main.js`.
   ============================================================ */
#chisiamo{position:relative}
/* il bagliore dietro la sezione: e' quello che c'era, tenuto */
#chisiamo::before{content:"";position:absolute;inset:-40px -20px;z-index:-1;pointer-events:none;opacity:.8;
  background:radial-gradient(700px 400px at 12% 15%,rgba(255,42,42,.05),transparent 60%),
             radial-gradient(600px 500px at 92% 85%,rgba(255,255,255,.03),transparent 65%)}

/* la scheda: la stessa superficie della 01 e della 02.
   `overflow:hidden` non e' un dettaglio: e' il bordo che taglia il
   globo, ed e' tutto l'effetto. */
.chi-scheda{position:relative;overflow:hidden;
  --imb:clamp(28px,4vw,46px);padding:var(--imb);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);background:#1d1d1f}
/* il testo comanda l'altezza della scheda, e si ferma prima del
   globo: la misura e' la stessa riga di lettura delle altre sezioni */
.chi-testo{position:relative;z-index:1;max-width:min(56ch,62%);
  display:flex;flex-direction:column;align-items:flex-start}
.chi-lead{color:#dcdce0;font-weight:300;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.7;
  max-width:52ch;margin:0 0 clamp(22px,3vw,30px)}

/* i tre punti: la spunta rossa del sito, senza i riquadri di prima */
.chi-punti{list-style:none;display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);
  margin:0 0 clamp(26px,3.5vw,34px);padding:0;max-width:54ch}
.chi-punti li{position:relative;padding-left:30px}
.chi-punti li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red);font-weight:700}
.chi-punti h4{margin:0 0 4px;font-size:1rem;font-weight:500;color:#fff;line-height:1.3}
.chi-punti p{margin:0;color:var(--muted);font-weight:300;font-size:.9rem;line-height:1.6}

/* IL GLOBO GRANDE, APPOGGIATO AL BORDO DESTRO E TAGLIATO.
   `style.css` lo tiene a 264px e centrato: qui si scavalcano tutte e
   due le cose. Esce dalla scheda di circa un quinto — quel tanto che
   basta perche' si capisca che continua oltre il bordo — e il taglio
   lo fa `overflow:hidden` della scheda.
   Ridisegnarsi grande lo sa fare da solo: `resizeGlobe()` in
   `main.js` legge la misura vera del canvas e rifa' il fondo alla
   densita' dello schermo, quindi non sgrana. */
.chi-globo{position:absolute;top:50%;right:0;
  /* FUORI DAL FLUSSO. Dentro la griglia era il globo a dettare
     l'altezza della scheda: 780px invece dei 625 del testo. Cosi'
     invece si appoggia al bordo destro, esce, e il bordo lo taglia
     senza che la scheda cresca. */
  transform:translate(17%,-50%);width:min(780px,54vw)}
.chi-globo .globe-wrap{width:100%;max-width:none;margin:0}

@media(max-width:900px),(hover:none) and (pointer:coarse){
  /* una colonna sola: il globo va sopra il testo, come fanno le
     illustrazioni della 02 quando lo spazio finisce */
  .chi-scheda{display:flex;flex-direction:column;gap:20px;padding:24px 22px 26px}
  .chi-testo{max-width:none}
  /* col dito il globo sta sopra il testo e non esce: tagliato su uno
     schermo stretto sarebbe solo una fetta */
  .chi-globo{position:static;transform:none;width:auto;order:-1;margin:0}
  .chi-globo .globe-wrap{width:min(300px,68vw);margin:0 auto}
}

/* ============================================================
   04 — Portfolio, sezione-testata
   ============================================================ */
/* ============================================================
   04 — PORTFOLIO, la sezione E' la testata video
   Ripresa dal vault (`BlackBox-Webflow-Codici/06-embed-C-lavori.html`,
   disegno del 2026-08-31) il 2026-09-07 su richiesta di Nicolas: il
   rollback al 28/08 l'aveva riportata a linguette e caroselli.

   La sezione non ha una testa fuori e non ha schede: E' il progetto in
   evidenza, a tutto schermo e da bordo a bordo, e il clic — su
   qualunque punto — porta alla pagina Portfolio. Le cose fighe vivono
   li', non in home.

   Rispetto al sorgente del vault: il numero e' 04 (era 03, prima che
   sparisse la sezione Pacchetti), il divisore che seguiva resta fuori
   (il sito servito oggi non ha divisori), e le funzioni del nastro di
   schede — che nessuno chiamava piu' — sono state tolte.
   ============================================================ */
.work .section__head{margin-bottom:clamp(40px,5vw,64px)}
      .work .section__head h2{font-size:clamp(2.3rem,5.6vw,4rem)}
      .work .section__note{font-size:1rem;margin-top:18px}

      /* ---- Il progetto in evidenza: una testata, non una scheda ----
         Stessa anatomia della hero del sito: sfondo che riempie tutto,
         grana, velo, contenuto appoggiato in basso e allineato al
         contenitore. Niente bordo, niente angoli, niente riquadri: e' una
         seconda testata dentro la pagina. Esce dai 1280px come il nastro,
         con lo stesso --vw misurato dal codice. */
      /* la sezione non fa cornice: il video tocca i divisori */
      .section.work{padding-top:0;padding-bottom:0}
      .work-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
        margin:0 calc(50% - var(--vw,100vw)/2);width:var(--vw,100vw);
        min-height:clamp(520px,86svh,940px);padding-top:clamp(70px,10vh,110px);background:#0b0b0f}
      .work-hero__media{position:absolute;inset:0;z-index:0;background:#0b0b0f;container-type:size}
      .work-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform 1.4s var(--ease)}
      /* Il video copre la copertina, non la sostituisce. */
      .work-hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform 1.4s var(--ease)}
      .work-hero:hover .work-hero__media img,.work-hero:hover .work-hero__vid{transform:scale(1.03)}
      /* Il riquadro YouTube nasce trasparente e compare solo quando il video
         sta davvero suonando: se non parte non si vede mai, e sotto resta la
         copertina invece di un rettangolo nero. */
      .work-hero__ytwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);background:#0b0b0f}
      .work-hero__ytwrap.is-on{opacity:1}
      /* Riserva, per browser senza unita' di contenitore: copre finche' la
         testata e' piu' larga che alta. La misura buona la mette il codice
         in pixel (adattaVideo), che funziona ovunque. */
      .work-hero__ytwrap iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:188%;height:188%;border:0;display:block;background:#0b0b0f}
      @supports (width:1cqw){
        .work-hero__ytwrap iframe{width:106cqw;height:59.625cqw;min-width:188.4cqh;min-height:106cqh}
      }
      .work-hero__grain{position:absolute;inset:-4%;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
      /* Stessa forma del velo della testata del sito, ma piu' carico nella
         fascia bassa: li' ci sta il testo, e una copertina chiara sotto il
         sottotitolo lo rendeva faticoso da leggere. */
      /* 2026-08-31 — il bordo alto si scioglie nel nero: il video non ha
         piu' un taglio contro il divisore sopra, ci sfuma dentro */
      .work-hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,#060607 0%,rgba(6,6,7,.92) 14%,rgba(6,6,7,.6) 34%,rgba(6,6,7,.22) 62%,rgba(6,6,7,.55) 82%,rgba(6,6,7,.97) 96%,#060607 100%)}
      .work-hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(42vw circle at 22% 78%,rgba(255,42,42,.11),transparent 60%)}

      /* La riga in alto segue il contenitore, non il bordo dello schermo:
         cosi' il pallino e l'anno stanno in colonna col titolo sotto.
         Scende di ottantotto pixel per la stessa ragione per cui il badge
         della testata del sito scende di sessanta: la barra di navigazione
         e' fissa e alta 78, e li' sopra coprirebbe tutto. */
      .work-hero__top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
        width:100%;padding:clamp(88px,11vh,116px) max(var(--pad),calc((100% - var(--maxw))/2)) 0}
      /* 2026-08-31 — niente pillola col pallino: sembrava un bottone
         play. E' il kicker di sezione come nelle altre, col suo trattino
         rosso (la <i> del modello fa da trattino). */
      .work-hero__badge{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff-d);
        font-weight:500;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
      .work-hero__badge i{width:24px;height:2px;background:var(--red)}
      .work-hero__tipo{font-family:var(--ff-d);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}

      /* 2026-08-31 — due colonne: titolo a sinistra, chiusura a filo
         destro sulla linea guida di VIDEO · anno. Provata la colonna
         unica, ma le due colonne piacevano di piu'. */
      .work-hero__content{position:relative;z-index:2;width:100%;
        padding:0 max(var(--pad),calc((100% - var(--maxw))/2)) clamp(56px,10vh,110px);display:flex;flex-direction:row;align-items:flex-end;
        justify-content:space-between;gap:clamp(28px,4vw,64px)}
      .work-hero__sx{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
      /* la chiusura: il pannello "Solo un assaggio" vive dentro la testata,
         in basso a destra, e il bottone porta al portfolio come tutta la
         scheda */
      .work-hero__fine{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:12px;
        flex:0 0 clamp(240px,26vw,340px)}
      .work-hero__fine-eyebrow{font-family:var(--ff-d);font-size:.74rem;text-transform:uppercase;
        letter-spacing:.18em;color:var(--red);font-weight:500}
      .work-hero__fine-testo{color:#dcdce0;font-weight:300;font-size:.95rem;line-height:1.55}
      .work-hero__eyebrow{font-family:var(--ff-d);font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--red);font-weight:500}
      .work-hero__title{font-family:var(--ff-brand);font-weight:500;font-size:clamp(2.2rem,6.2vw,5rem);letter-spacing:-.01em;line-height:1.03;max-width:16ch;color:#fff;margin:0;text-wrap:balance}
      .work-hero__sub{max-width:560px;margin:0;color:#dcdce0;font-weight:300;font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.5}
      .work-hero__sub .is-live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.5);animation:workLiveDot 2s infinite}
      @keyframes workLiveDot{0%{box-shadow:0 0 0 0 rgba(61,220,132,.45)}70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
      .work-hero__cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--ff-d);font-size:.95rem;font-weight:500;color:#fff;
        padding:13px 24px;border-radius:100px;background:var(--red);box-shadow:0 10px 30px var(--red-glow);transition:transform .3s var(--ease),box-shadow .3s,background .3s}
      .work-hero:hover .work-hero__cta{transform:translateY(-2px);box-shadow:0 16px 40px var(--red-glow);background:#ff3b3b}

      /* ---- Gli altri progetti, in movimento ---- */
      /* Il nastro esce dai 1280px della .section: il contenitore sta dentro,
         la striscia va da bordo a bordo. Il margine negativo annulla il
         centraggio. Si usa --vw, non 100vw: 100vw conta anche la barra di
         scorrimento e la pagina finirebbe otto pixel piu' larga dello
         schermo. Il valore lo scrive il codice qui sotto; 100vw resta come
         riserva se per qualsiasi motivo non arrivasse. */
      .work-stream{position:relative;margin:clamp(40px,5vw,64px) calc(50% - var(--vw,100vw)/2) 0;width:var(--vw,100vw)}
      .work-stream[hidden]{display:none}
      .work-stream__head{max-width:var(--maxw);margin:0 auto clamp(20px,3vw,30px);padding:0 var(--pad);font-family:var(--ff-d);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:500}

      /* La fila e' un contenitore che scorre per davvero, non un nastro
         animato con una trasformazione: cosi' quando si ferma la si trascina
         col dito, con la rotella o col trackpad in tutte e due i versi.
         Lo scorrimento automatico lo fa il codice muovendo scrollLeft. */
      .work-row{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;
        scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;cursor:grab;margin-bottom:2px}
      .work-row::-webkit-scrollbar{display:none}
      .work-row:last-child{margin-bottom:0}
      .work-row:active{cursor:grabbing}
      .work-track{display:flex;flex:none;gap:2px}

      /* Le sfumature ai lati, le stesse della galleria in pagina progetto:
         dicono che il nastro continua oltre il bordo dello schermo invece di
         finire tagliato di netto. */
      .work-stream__fade{position:absolute;top:0;bottom:0;width:clamp(48px,8vw,96px);z-index:3;pointer-events:none}
      .work-stream__fade--l{left:0;background:linear-gradient(to right,var(--bg) 10%,rgba(6,6,7,0))}
      .work-stream__fade--r{right:0;background:linear-gradient(to left,var(--bg) 10%,rgba(6,6,7,0))}

      /* Angoli vivi e tessere accostate: il nastro si legge come una striscia
         continua, non come una fila di schede. Niente bordo, che fra due
         tessere vicine diventerebbe una cucitura doppia. */
      .work-tile{position:relative;display:block;flex:none;width:clamp(220px,24vw,340px);aspect-ratio:1/1;overflow:hidden;background:#0e0e12}
      /* Quasi nessuna riduzione di luce: il bianco e nero basta a mettere il
         nastro un passo indietro rispetto alla testata. Scurire anche le
         copertine — erano a .75 — voleva dire prendere immagini gia' scure di
         loro e appoggiarle sul nero: sparivano dentro il fondo, e il nastro
         si leggeva come una fascia di macchie invece che di fotografie.
         La leggibilita' del titolo la fa la sfumatura sotto, non il filtro. */
      .work-tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.95) contrast(1.08);transition:transform .9s var(--ease),filter .6s;user-select:none;-webkit-user-drag:none}
      /* Al passaggio del mouse deve schiarirsi, non scurirsi: tornano i
         colori e un filo di luce in piu'. */
      .work-tile:hover img{transform:scale(1.05);filter:grayscale(0) brightness(1) contrast(1.12)}
      .work-tile__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,7,.94),rgba(6,6,7,.34) 46%,rgba(6,6,7,.04) 78%);pointer-events:none}
      .work-tile__cap{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2}
      .work-tile__cat{display:block;font-family:var(--ff-d);font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      /* nome del progetto = titolo, non etichetta: stava in Saira sotto un
         titolo in evidenza graziato, e la riga sembrava di un altro sito */
      .work-tile__name{font-family:var(--ff-brand);font-weight:500;font-size:1.24rem;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

      .work-cta-panel{margin-top:56px;padding:56px 40px;border:1px solid #2a2a2a;border-radius:var(--r);background:rgba(255,255,255,.015);text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
      .work-cta-panel__eyebrow{font-family:var(--ff-d);font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--red);font-weight:500}
      .work-cta-panel__text{font-size:1.3rem;font-weight:300;color:#fff;max-width:560px;line-height:1.4}

      /* La testata tiene la stessa proporzione su tutti gli schermi. */
      @media(max-width:860px){
        .work-tile{width:clamp(200px,58vw,260px)}
      }
      @media(max-width:860px){
        .work-hero__content{flex-direction:column;align-items:flex-start;gap:28px}
        .work-hero__fine{flex:none;width:100%;align-items:flex-start;text-align:left}
      }
      @media(max-width:520px){
        .work-hero__title{max-width:none}
        .work-hero__tipo{display:none}
      }
      /* Schermi bassi: la testata non deve mangiarsi tutta la finestra. */
      @media(max-height:620px){
        .work-hero{min-height:520px}
      }

/* ============================================================
   06 — Parliamone, contatti e modulo
   ============================================================ */
/* ============================================================
   06 — PARLIAMONE, due schede: i contatti e il modulo
   Rifatta il 2026-09-07 nella lingua delle altre sezioni (schede
   grigie #1d1d1f sui fili, titoli Hitmarker, pillole).
   LA DIFFERENZA FRA LE DUE DEVE VEDERSI, ed e' il punto di tutta la
   sezione: a sinistra si TOCCA (righe che portano fuori: mail,
   telefono, WhatsApp, con la freccia), a destra si SCRIVE (campi col
   bordo, il fondo piu' scuro e il fuoco rosso).
   ============================================================ */
.sez-parliamone .section__head{margin-bottom:clamp(22px,3vh,34px)}

/* le tre promesse: schedine, non riquadri sparsi */
.par-promesse{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);
  margin-bottom:clamp(16px,2vw,22px)}
.par-promessa{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:clamp(16px,2vw,22px) 14px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:#1d1d1f}
.par-promessa i{font-style:normal;font-size:1.15rem;line-height:1}
.par-promessa b{font-family:var(--ff-brand);font-weight:500;font-size:1.15rem;color:#fff}
.par-promessa span{font-family:var(--ff-d);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-d)}

/* le due schede, appaiate */
.par-due{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(14px,1.8vw,20px);align-items:start}
.par-scheda{--imb:clamp(24px,3vw,40px);padding:var(--imb);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r);background:#1d1d1f}
.par-occhiello{font-family:var(--ff-d);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin:0 0 10px}
.par-scheda h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.1;margin:0 0 12px}
.par-nota{color:var(--muted);font-weight:300;font-size:.92rem;line-height:1.6;
  margin:0 0 clamp(18px,2.4vw,26px);max-width:42ch}

/* ---------- a sinistra: si tocca ---------- */
/* Ogni riga e' un modo per raggiungerci e si comporta da bottone: si
   accende sotto il dito e ha la freccia che dice "esci di qui". */
.par-vie{display:flex;flex-direction:column;gap:10px}
.par-via{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 16px;border:1px solid var(--line-soft);border-radius:14px;
  background:rgba(255,255,255,.02);color:#fff;text-decoration:none;
  transition:border-color .25s,background .25s,transform .25s var(--ease)}
a.par-via:hover,a.par-via:focus-visible{border-color:rgba(255,42,42,.45);
  background:rgba(255,42,42,.06);transform:translateX(3px)}
.par-via__k{font-family:var(--ff-d);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-d);flex:none}
.par-via__v{font-size:1rem;color:#fff;text-align:right;display:flex;flex-wrap:wrap;
  justify-content:flex-end;gap:0 10px}
.par-via__v a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)}
.par-via__v a:hover{color:var(--red);border-bottom-color:var(--red)}
.par-via__v i{font-style:normal;color:var(--muted-d)}
.par-via__freccia{flex:none;color:var(--muted-d);font-style:normal}
a.par-via:hover .par-via__freccia{color:var(--red)}

/* ---------- a destra: si scrive ---------- */
/* I campi hanno il fondo piu' scuro della scheda e un bordo vero: e'
   quello che li fa leggere come "qui dentro si scrive" invece che come
   una riga di testo qualunque. */
.par-modulo label{display:block;margin-bottom:14px}
.par-modulo label > span{display:block;font-family:var(--ff-d);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);margin-bottom:7px}
.par-modulo input[type=text],.par-modulo input[type=email],.par-modulo textarea{
  width:100%;padding:13px 15px;color:#fff;font-family:var(--ff);font-size:1rem;
  background:#141416;border:1px solid rgba(255,255,255,.10);border-radius:12px;
  transition:border-color .25s,background .25s}
.par-modulo textarea{resize:vertical;min-height:118px;line-height:1.6}
.par-modulo input::placeholder,.par-modulo textarea::placeholder{color:var(--muted-d)}
.par-modulo input:focus,.par-modulo textarea:focus{outline:none;
  border-color:rgba(255,42,42,.6);background:#17171a}
.par-consenso{display:flex;align-items:flex-start;gap:10px;margin:16px 0 18px}
.par-consenso input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--red)}
.par-consenso span{font-size:.86rem;color:var(--muted);font-weight:300;line-height:1.5}
.par-consenso a{color:var(--red)}
.par-modulo .btn{width:100%;justify-content:center}
.par-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(max-width:900px),(hover:none) and (pointer:coarse){
  .par-due{grid-template-columns:minmax(0,1fr)}
  .par-promesse{grid-template-columns:repeat(3,1fr);gap:8px}
  .par-promessa{padding:14px 8px}
  .par-promessa b{font-size:1rem}
  .par-promessa span{font-size:.6rem;letter-spacing:.08em}
  .par-via{flex-direction:column;align-items:flex-start;gap:6px}
  .par-via__v{text-align:left;justify-content:flex-start}
}

/* ============================================================
   Il bordo che si accende (tutte le schede)
   ============================================================ */
/* === effetto bordo che si accende (nuovo) === */
/* ============================================================
   IL BORDO CHE SI ACCENDE SOTTO IL PUNTATORE
   Portato dal componente BorderGlow di React Bits (2026-09-07,
   chiesto da Nicolas) — ma il sito non e' React: qui e' tutto CSS
   piu' un ascolto solo, che scrive due numeri.

   I due numeri sono:
     --edge-proximity  quanto il puntatore e' vicino al bordo (0-100)
     --cursor-angle    da che parte sta, in gradi

   Da quelli il CSS ricava tre strati: il bordo colorato, un velo
   dentro la scheda e l'alone fuori. Nessuno dei tre e' visibile
   finche' il puntatore non si avvicina.

   I COLORI sono i tuoi: il rosso del sito, il bianco, e un rosa in
   mezzo che smorza il salto fra i due.
   ============================================================ */
.bb-glow{
  --edge-proximity:0;
  --cursor-angle:45deg;
  /* quanto vicino al bordo deve stare il puntatore perche' si accenda */
  --edge-sensitivity:48;
  --color-sensitivity:calc(var(--edge-sensitivity) + 20);
  /* quanto e' largo il cono di luce, in percentuale del giro */
  --cono:26;
  /* quanto esce l'alone dalla scheda */
  --alone:30px;
  --velo:.14;
  /* i tre colori, e le loro sfumature sparse sul bordo */
  --c-rosso:#ff2a2a;
  --c-bianco:#ffffff;
  --c-mezzo:#ff8f8f;
  --luce:0deg 90% 78%;
  position:relative;
  isolation:isolate;               /* serve: senza, gli strati finiscono dietro al fondo */
  transform:translate3d(0,0,.01px);
}
.bb-glow::before,
.bb-glow::after,
.bb-glow > .bb-glow__luce{
  content:"";position:absolute;inset:0;border-radius:inherit;
  transition:opacity .25s ease-out;z-index:-1;pointer-events:none}
/* da fermi non si vede niente: si spegne piu' lentamente di come si accende */
.bb-glow:not(:hover)::before,
.bb-glow:not(:hover)::after,
.bb-glow:not(:hover) > .bb-glow__luce{opacity:0;transition:opacity .75s ease-in-out}

/* 1. il bordo colorato: sette macchie di colore, e una maschera a cono
      che ne lascia vedere solo il pezzo dalla parte del puntatore */
.bb-glow::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--fondo,#1d1d1f) 0 100%) padding-box,
    radial-gradient(at 80% 55%, var(--c-rosso) 0px, transparent 50%) border-box,
    radial-gradient(at 69% 34%, var(--c-bianco) 0px, transparent 50%) border-box,
    radial-gradient(at 8% 6%, var(--c-mezzo) 0px, transparent 50%) border-box,
    radial-gradient(at 41% 38%, var(--c-rosso) 0px, transparent 50%) border-box,
    radial-gradient(at 86% 85%, var(--c-bianco) 0px, transparent 50%) border-box,
    radial-gradient(at 82% 18%, var(--c-mezzo) 0px, transparent 50%) border-box,
    radial-gradient(at 51% 4%, var(--c-bianco) 0px, transparent 50%) border-box,
    linear-gradient(var(--c-mezzo) 0 100%) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cono) * 1%), transparent calc((var(--cono) + 15) * 1%),
    transparent calc((100 - var(--cono) - 15) * 1%), black calc((100 - var(--cono)) * 1%));
  mask-image:conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cono) * 1%), transparent calc((var(--cono) + 15) * 1%),
    transparent calc((100 - var(--cono) - 15) * 1%), black calc((100 - var(--cono)) * 1%));
}

/* 2. il velo dentro la scheda, dalla parte del puntatore: e' quello che
      evita il bordo "appiccicato" e fa sembrare la luce entrata dentro */
.bb-glow::after{
  border:1px solid transparent;
  background:
    radial-gradient(at 80% 55%, var(--c-rosso) 0px, transparent 50%) padding-box,
    radial-gradient(at 69% 34%, var(--c-bianco) 0px, transparent 50%) padding-box,
    radial-gradient(at 8% 6%, var(--c-mezzo) 0px, transparent 50%) padding-box,
    radial-gradient(at 86% 85%, var(--c-mezzo) 0px, transparent 50%) padding-box,
    linear-gradient(var(--c-rosso) 0 100%) padding-box;
  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite:destination-out, source-over;
  mask-composite:subtract, add;
  opacity:calc(var(--velo) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode:soft-light;
}

/* 3. l'alone fuori dalla scheda: sette ombre una dentro l'altra, dal
      filo di luce sul bordo fino allo sfumato largo */
.bb-glow > .bb-glow__luce{
  inset:calc(var(--alone) * -1);z-index:1;
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mask-image:conic-gradient(from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter}
.bb-glow > .bb-glow__luce::before{
  content:"";position:absolute;inset:var(--alone);border-radius:inherit;
  box-shadow:
    /* SOLO IL FILO SUL BORDO, non la luce dentro: le ombre interne
       larghe (12 e 30px) tingevano mezza scheda ed e' quello che
       Nicolas ha chiamato invasivo */
    inset 0 0 0 1px hsl(var(--luce) / 100%),
    inset 0 0 4px 0 hsl(var(--luce) / 35%),
    0 0 3px 0 hsl(var(--luce) / 50%),
    0 0 12px 0 hsl(var(--luce) / 30%),
    0 0 30px 2px hsl(var(--luce) / 16%),
    0 0 60px 2px hsl(var(--luce) / 8%)}

/* chi ha chiesto meno movimento non vede niente di tutto questo */
@media(prefers-reduced-motion:reduce){
  .bb-glow::before,.bb-glow::after,.bb-glow > .bb-glow__luce{display:none}
}

/* E col dito nemmeno. Questo bordo si accende dove passa il PUNTATORE:
   senza puntatore non ha niente da seguire, e resta comunque un livello
   in piu' da comporre su ogni scheda mentre la pagina scorre. Chiesto
   da Nicolas il 2026-09-08: sul telefono le schede restano pulite. */
@media (max-width:720px), (hover:none) and (pointer:coarse){
  .bb-glow::before,.bb-glow::after,.bb-glow > .bb-glow__luce{display:none}
}

/* ============================================================
   Pagina chi siamo — la fascia dei lavori
   ============================================================ */
/* ---------- qualche lavoro (aggiunta del 2026-09-07) ----------
     Niente schede grigie: lo stesso bordo sottile dei tre numeri qui
     sopra, cosi' la fascia sembra nata con la pagina. */
  .cs-lavori{margin:clamp(38px,6vw,72px) 0}
  .cs-lavori__nota{color:var(--muted);font-weight:300;margin:0 0 22px}
  .cs-lavori__griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
  .cs-lavoro{display:block;text-decoration:none;border:1px solid var(--line-soft);
    border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.02);
    transition:border-color .3s,transform .3s var(--ease)}
  .cs-lavoro:hover{border-color:rgba(255,42,42,.45);transform:translateY(-3px)}
  .cs-lavoro__foto{display:block;aspect-ratio:4/3;overflow:hidden;background:#0b0b0f}
  .cs-lavoro__foto img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .6s var(--ease)}
  .cs-lavoro:hover .cs-lavoro__foto img{transform:scale(1.04)}
  .cs-lavoro__testo{display:block;padding:14px 16px 16px}
  .cs-lavoro__cat{display:block;font-family:var(--ff-d);font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--red);margin-bottom:5px}
  .cs-lavoro__tit{display:block;font-family:var(--ff-brand);font-weight:500;font-size:1rem;
    color:#fff;line-height:1.2}
  @media(max-width:900px){
    .cs-lavori__griglia{grid-template-columns:repeat(2,1fr)}
  }