/* =====================================================================
   EmmeQuadro — regia 13 · IL FILM "AL QUADRATO" (rivoluzione totale)
   ---------------------------------------------------------------------
   La home e' un'unica ripresa: il visitatore E' la macchina da presa che
   scende dentro l'azienda. Linguaggio: mirino di camera (gli angoli
   dell'inquadratura sono fissi a schermo), disegno tecnico da ingegneri,
   tipografia industriale estesa in maiuscolo, acciaio e luce.
   A muoversi sono cornici, fondali e numeri; il testo vive su un livello
   che fa solo opacita' e traslazione: resta a fuoco per costruzione.
   Con JavaScript spento, su telefono o con "riduci il movimento" la
   pagina scorre normalmente e resta completa.
   I caratteri arrivano da assets/fonts/caratteri.css, non da qui.
   ===================================================================== */

:root{
  color-scheme:dark;
  --ink:#04070b; --ink2:#070c12;
  --paper:#f3f7fb; --paper2:#c8d5e0; --paper3:#a2b5c6;
  --key:#8fd4e6; --key-d:#3d99ad; --amber:#e8ae66;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20);
  --sqline:rgba(143,212,230,.30);
  --bar:clamp(46px,5.4vh,62px);
  --barb:clamp(38px,4.4vh,50px);
  --gut:clamp(18px,4vw,68px);
  --ffx:"Archivo","Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --ffd:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --ffb:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --ffm:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --ez:cubic-bezier(.16,.84,.28,1);
  /* acciaio: il gradiente dei titoli chiave */
  --chrome:linear-gradient(180deg,#ffffff 4%,#dfe9f0 32%,var(--key) 58%,#2e6c7a 96%);
  /* Scala su misure fisse con margine (mai solo vw+vh): ingrandendo col
     browser il testo non rimpicciolisce. */
  --t1:clamp(2.55rem,1rem + 5.3vw,6.6rem);
  --t2:clamp(2.1rem,1.2rem + 2.9vw,4.6rem);
  --t3:clamp(1.25rem,1.35vw,1.66rem);
  --tb:clamp(1.12rem,1.05vw,1.36rem);
  --ts:clamp(.96rem,.78vw,1.14rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:var(--bar)}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--ffb);font-size:var(--tb);line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--ffd);font-weight:600;line-height:1.06;letter-spacing:-.022em}
p{margin:0}
::selection{background:var(--key);color:#03181e}
:focus-visible{outline:2px solid var(--key);outline-offset:3px;border-radius:3px}

.salta{position:fixed;left:12px;top:-100px;z-index:999;background:var(--key);color:#03181e;
  padding:.6rem 1rem;border-radius:6px;font-weight:600;transition:top .2s}
.salta:focus{top:12px}

/* ---------------- atmosfera: canvas + griglia tecnica + grana ---------------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(120% 80% at 50% -12%, #0a1119 0%, #04070c 44%, #020408 100%)}
/* il foglio da disegno tecnico: griglia di quadrati appena percettibile */
.atmos::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(143,212,230,.033) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(90deg,rgba(143,212,230,.033) 0 1px,transparent 1px 72px)}
#atmo{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
#dust{position:absolute;inset:0;width:100%;height:100%}
.vig{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(118% 92% at 50% 46%,transparent 40%,rgba(0,0,0,.34) 76%,rgba(0,0,0,.72) 100%)}
.grain{position:fixed;inset:-150px;z-index:4;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr 1.1s steps(3) infinite}
@keyframes gr{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-14px,9px,0)}66%{transform:translate3d(11px,-12px,0)}100%{transform:translate3d(0,0,0)}}

/* ---------------- il mirino: gli angoli dell'inquadratura ---------------- */
.viewf{position:fixed;z-index:6;pointer-events:none;
  left:calc(var(--gut)*.45);right:calc(var(--gut)*.45);
  top:calc(var(--bar) + 1.4vh);bottom:calc(var(--barb) + 1.4vh)}
.viewf i{position:absolute;width:24px;height:24px;border:0 solid rgba(143,212,230,.34)}
.viewf .ctl{left:0;top:0;border-left-width:1px;border-top-width:1px}
.viewf .ctr{right:0;top:0;border-right-width:1px;border-top-width:1px}
.viewf .cbl{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.viewf .cbr{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.viewf .tick{width:1px;height:8px;background:rgba(143,212,230,.22);left:50%;border:0}
.viewf .tick.t{top:0}.viewf .tick.b{bottom:0}
@media(max-width:899px){.viewf{display:none}}

/* ---------------- bande nere / letterbox ---------------- */
.bar{position:fixed;left:0;right:0;z-index:20;background:#000;display:flex;align-items:center;
  padding:0 var(--gut);gap:1.2rem}
.bar-t{top:0;height:var(--bar);border-bottom:1px solid rgba(255,255,255,.07)}
.bar-b{bottom:0;height:var(--barb);border-top:1px solid rgba(255,255,255,.07)}
.bar-t::after,.bar-b::after{content:"";position:absolute;left:0;right:0;height:26px;pointer-events:none}
.bar-t::after{top:100%;background:linear-gradient(to bottom,rgba(0,0,0,.72),transparent)}
.bar-b::after{bottom:100%;background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}

.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand img{width:auto;height:clamp(22px,2.6vh,30px);filter:saturate(.85) brightness(1.12)}
.brand b{font-family:var(--ffd);font-weight:700;font-size:.98rem;letter-spacing:.01em;line-height:1;display:block}
.brand i{display:block;font-style:normal;font-family:var(--ffm);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper3);margin-top:.28rem}

.menu{white-space:nowrap;display:flex;align-items:center;gap:clamp(.7rem,1.5vw,1.5rem);margin-left:auto}
.menu a{font-family:var(--ffm);font-size:.665rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper2);padding:.45rem 0;position:relative;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:.18rem;height:1px;background:var(--key);
  transition:right .45s var(--ez)}
.menu a:hover{color:var(--paper)}.menu a:hover::after{right:0}
.menu a.on{color:var(--key)}
.cta-t{font-family:var(--ffm);font-size:.665rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line2);padding:.5rem .85rem;border-radius:2px;transition:.35s var(--ez);white-space:nowrap}
.cta-t:hover{background:var(--key);color:#03181e;border-color:var(--key)}
.burger{display:none;margin-left:auto;width:38px;height:30px;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:8px;width:22px;height:1.5px;
  background:var(--paper);transition:.35s var(--ez);content:""}
.burger span{top:14px}.burger span::before{top:-7px;left:0}.burger span::after{top:7px;left:0}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:rotate(45deg) translate(5px,5px)}
body.nav-open .burger span::after{transform:rotate(-45deg) translate(5px,-5px)}

/* slate in banda bassa */
.slate{display:flex;align-items:center;gap:.7rem;font-family:var(--ffm);font-size:.63rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--paper3);white-space:nowrap;min-width:0}
.slate .rec{width:6px;height:6px;border-radius:50%;background:#e0563f;flex:0 0 auto;
  box-shadow:0 0 10px #e0563f;animation:rec 2.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.22}}
.slate b{color:var(--paper);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.trk{flex:1;height:1px;background:rgba(255,255,255,.13);position:relative;min-width:40px}
.trk i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--key-d),var(--key));
  box-shadow:0 0 12px rgba(143,212,230,.6)}
.tc{font-family:var(--ffm);font-size:.63rem;letter-spacing:.18em;color:var(--paper2);white-space:nowrap}

/* rullino capitoli */
.chapters{position:fixed;right:calc(var(--gut) * .42);top:50%;transform:translateY(-50%);z-index:19;
  display:flex;flex-direction:column;gap:.62rem;align-items:flex-end}
.chapters button{display:flex;align-items:center;gap:.6rem;opacity:.42;transition:opacity .4s}
.chapters button:hover,.chapters button[aria-current="true"]{opacity:1}
.chapters .lb{font-family:var(--ffm);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper2);opacity:0;transform:translateX(6px);transition:.4s var(--ez);white-space:nowrap}
.chapters button:hover .lb{opacity:1;transform:none}
.chapters .mk{width:26px;height:2px;background:rgba(255,255,255,.32);transition:.45s var(--ez)}
.chapters button[aria-current="true"] .mk{width:44px;background:var(--key);box-shadow:0 0 12px rgba(143,212,230,.7)}

/* ---------------- palcoscenico ---------------- */
.reel{position:relative;z-index:5}
.pin{position:relative}
.stage{position:relative}
.scene{position:relative;display:flex;align-items:center;overflow-x:clip;
  padding:calc(var(--bar) + 4vh) var(--gut) calc(var(--barb) + 4vh);isolation:isolate}
.scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.85;
  background:var(--glow,radial-gradient(70% 60% at 50% 8%,rgba(143,212,230,.12),transparent 70%))}
/* il numerale architettonico di ogni inquadratura */
.scene::after{content:attr(data-num);position:absolute;z-index:-1;right:1%;top:4%;
  font-family:var(--ffx);font-stretch:125%;font-weight:900;line-height:1;
  font-size:clamp(7rem,20vh,17rem);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(143,212,230,.09);
  pointer-events:none;user-select:none}
.scene:nth-of-type(even)::after{right:auto;left:1%}
.s1::after,.s5::after{display:none}
.in{width:min(1460px,94%);margin:0 auto;position:relative}
.cut{display:none}

/* ---------------- tipografia di scena ---------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ffm);font-size:clamp(.78rem,.62vw,.92rem);
  letter-spacing:.28em;text-transform:uppercase;color:var(--key);margin-bottom:1.15rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--key);opacity:.75}
h2.t{font-family:var(--ffx);font-stretch:116%;font-weight:800;text-transform:uppercase;
  font-size:var(--t2);max-width:24ch;letter-spacing:-.015em;line-height:.98}
h2.t em{font-style:normal;color:var(--key)}
.lead{font-size:clamp(.98rem,.3vw + .66vh,1.14rem);color:var(--paper2);line-height:1.62;max-width:60ch}
.sub{color:var(--paper2)}
.rule{height:1px;background:linear-gradient(90deg,var(--line2),transparent);margin:1.5rem 0}

.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ffm);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.82rem 1.35rem;border-radius:2px;
  border:1px solid var(--line2);transition:.4s var(--ez);position:relative;overflow:hidden}
.btn svg{width:15px;height:15px;transition:transform .4s var(--ez)}
.btn:hover svg{transform:translateX(4px)}
.btn-p{background:var(--key);color:#03181e;border-color:var(--key);font-weight:600;
  box-shadow:0 0 0 rgba(143,212,230,0),0 14px 44px -18px rgba(143,212,230,.85)}
.btn-p:hover{background:#a9e2f1;border-color:#a9e2f1;box-shadow:0 0 34px -6px rgba(143,212,230,.55)}
.btn-p::after{content:"";position:absolute;inset:0;transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);width:60%}
.btn-p:hover::after{transition:transform .7s var(--ez);transform:translateX(280%) skewX(-18deg)}
.btn-g:hover{border-color:var(--key);color:var(--key);background:rgba(143,212,230,.06)}
.lnk{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ffm);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--key);border-bottom:1px solid rgba(143,212,230,.35);
  padding-bottom:.35rem;transition:.35s var(--ez)}
.lnk svg{width:15px;height:15px;transition:transform .4s var(--ez)}
.lnk:hover{color:#bfeaf6;border-color:#bfeaf6}.lnk:hover svg{transform:translateX(4px)}

/* ---------- SC.01 · il titolo di testa (editoriale, mirino a destra) ---------- */
.s1 .in{text-align:left}
.s1 .studio{font-family:var(--ffm);font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--paper3);margin-bottom:clamp(1.2rem,3vh,2.2rem);display:flex;align-items:center;gap:.9rem}
.s1 .studio::before{content:"";width:34px;height:1px;background:var(--key);opacity:.8}
h1{font-family:var(--ffx);font-stretch:121%;font-weight:900;font-size:var(--t1);line-height:.96;
  letter-spacing:-.012em;text-transform:uppercase;margin:0}
h1 .l{display:block;overflow:hidden}
h1 .l i{display:block;font-style:normal}
h1 .sq{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 44px rgba(143,212,230,.38))}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
  gap:clamp(1.5rem,4vw,5rem);align-items:center;margin-top:clamp(1.2rem,3vh,2.2rem)}
.s1 .hr{width:clamp(60px,9vw,120px);height:1px;margin:0 0 clamp(1rem,2.4vh,1.8rem);
  background:linear-gradient(90deg,var(--key),transparent);opacity:.85}
.s1 .sott{max-width:56ch;font-size:clamp(.97rem,.28vw + .62vh,1.14rem);color:var(--paper2);line-height:1.62}
.s1 .sott b{color:var(--paper);font-weight:600}
.credlist{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:clamp(1rem,2.4vh,1.7rem);
  font-family:var(--ffm);font-size:.615rem;letter-spacing:.19em;text-transform:uppercase;color:var(--paper3)}
.credlist li{display:flex;align-items:center;gap:.5rem}
.credlist li::before{content:"";width:4px;height:4px;background:var(--key);border-radius:50%;
  box-shadow:0 0 9px var(--key)}
.acts{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:clamp(1.2rem,2.8vh,2rem)}
/* il quadrato-mirino dove si compone il marchio */
.viewsq{position:relative;aspect-ratio:1;max-width:min(38vh,420px);width:100%;margin-left:auto;
  border:1px solid rgba(143,212,230,.2);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 80% at 50% 42%,rgba(143,212,230,.07),transparent 75%)}
.viewsq .c{position:absolute;width:18px;height:18px;border:0 solid var(--key)}
.viewsq .c1{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.viewsq .c2{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px}
.viewsq .c3{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px}
.viewsq .c4{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
.viewsq picture{display:contents}
.s1 .mark{height:auto;width:min(62%,240px);margin:0;
  filter:drop-shadow(0 0 34px rgba(143,212,230,.42)) saturate(.92) brightness(1.1)}
.mghost{position:absolute;right:-3%;bottom:-9%;z-index:-1;pointer-events:none;user-select:none;
  font-family:var(--ffx);font-stretch:125%;font-weight:900;line-height:1;
  font-size:clamp(11rem,34vh,26rem);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(143,212,230,.08)}
.hint{position:absolute;left:50%;margin-left:-40px;width:80px;bottom:calc(var(--barb) + 1.6vh);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:0;
  font-family:var(--ffm);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--paper3);animation:hintIn 1.1s var(--ez) 2s forwards}
.hint .hl{width:1px;height:clamp(20px,3.6vh,40px);background:linear-gradient(180deg,transparent,var(--key));
  transform-origin:50% 0}
@keyframes hintIn{to{opacity:1}}
@keyframes hintPulse{0%,100%{transform:scaleY(.45);opacity:.3}50%{transform:scaleY(1);opacity:.95}}
.hint .hl{animation:hintPulse 3s ease-in-out infinite}

/* ---------- SC.02 · i numeri: targhe d'acciaio a tutta riga ---------- */
.s2 .in{text-align:left}
.s2 .kick{font-family:var(--ffm);font-size:clamp(.72rem,.6vw,.86rem);font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--key);
  margin:0 0 clamp(1.6rem,4vh,2.8rem);display:flex;align-items:center;gap:.9rem}
.s2 .kick::before{content:"";width:34px;height:1px;background:var(--key);opacity:.8}
.nums{display:block;border-top:1px solid var(--line2)}
/* Numero e didascalia vicini, sulla stessa riga di lettura: la colonna
   del numero e' fissa, cosi' le quattro didascalie si allineano fra loro
   e nessuna finisce spinta al bordo dello schermo. */
.nums li{display:grid;grid-template-columns:minmax(0,clamp(300px,36vw,600px)) minmax(0,1fr);
  align-items:baseline;column-gap:clamp(1.4rem,4vw,4.5rem);
  padding:clamp(.7rem,2vh,1.3rem) 0;border-bottom:1px solid var(--line);text-align:left}
.nums b{display:block;font-family:var(--ffx);font-stretch:122%;font-weight:850;letter-spacing:-.035em;
  line-height:.92;font-size:clamp(3.2rem,1.6rem + 6.2vw,9.4rem);font-variant-numeric:tabular-nums;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(143,212,230,.28))}
.nums span{display:block;margin:0;font-family:var(--ffb);font-size:clamp(1rem,.45vw + .5vh,1.3rem);
  letter-spacing:0;line-height:1.55;color:var(--paper2);text-align:left;max-width:46ch}
.s2 .orefield{position:absolute;inset:-12% -6%;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,rgba(143,212,230,.05) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,rgba(143,212,230,.05) 0 1px,transparent 1px 64px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 78%)}

/* ---------- SC.03 · manifesto: la carta e la competenza ---------- */
.s3 .head{max-width:none;margin-bottom:clamp(1.6rem,4vh,2.8rem)}
.s3 h2.t{max-width:20ch;font-size:clamp(2.2rem,1.2rem + 3.4vw,5.2rem)}
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;position:relative;
  background:rgba(0,0,0,.34)}
.cmp::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.12) 50%,rgba(0,0,0,0) 62%)}
.cmp .col{padding:clamp(1.4rem,3.4vh,2.4rem) clamp(1.1rem,2.4vw,2.2rem);position:relative;z-index:1}
.cmp .old{background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.5))}
.cmp .old .veil{position:absolute;inset:0;pointer-events:none;opacity:0;background:rgba(2,4,8,.55)}
.cmp .new{position:relative;background:
  radial-gradient(128% 150% at 72% -12%,rgba(143,212,230,.30),rgba(143,212,230,.08) 44%,transparent 76%);
  box-shadow:inset 0 1px 0 rgba(143,212,230,.4)}
.cmp .new::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--key),transparent);box-shadow:0 0 30px 2px rgba(143,212,230,.7)}
.cmp h4{font-family:var(--ffm);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:400;color:var(--paper3);margin-bottom:1.1rem}
.cmp .new h4{color:var(--key)}
.cmp li{display:flex;gap:.75rem;padding:.55rem 0;font-size:var(--tb);line-height:1.5;color:var(--paper3)}
.cmp .new li{color:var(--paper)}
.cmp li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.62em;border-radius:1px;
  background:rgba(255,255,255,.2);transform:rotate(45deg)}
.cmp .new li::before{background:var(--key);box-shadow:0 0 10px rgba(143,212,230,.8)}

/* ---------- SC.04 · quattro righe d'archivio ---------- */
.s4 .head{max-width:none;margin-bottom:clamp(1.4rem,3.4vh,2.4rem)}
.frames{display:block;border-top:1px solid var(--line2)}
.frame{display:grid;grid-template-columns:clamp(76px,9vw,150px) minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1rem,3vw,3.2rem);align-items:center;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;
  padding:clamp(1.2rem,3vh,2rem) .3rem;transition:.5s var(--ez);overflow:visible;position:relative}
.frame::before,.frame::after{display:none}
.frame .sp{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ez);
  background:linear-gradient(90deg,rgba(143,212,230,.09),transparent 70%)}
.frame:hover{transform:none;background:none;border-color:rgba(143,212,230,.35)}
.frame:hover .sp{opacity:1}
.frame .n{font-family:var(--ffx);font-stretch:125%;font-weight:900;line-height:1;margin:0;
  font-size:clamp(2.3rem,1.1rem + 2.7vw,4.8rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(143,212,230,.55)}
.frame h3{font-family:var(--ffx);font-stretch:112%;font-weight:750;text-transform:uppercase;
  letter-spacing:-.008em;font-size:clamp(1.3rem,.8rem + 1.3vw,2.2rem);margin:0;line-height:1.04}
.frame p{font-size:var(--ts);line-height:1.62;color:var(--paper2);margin:0}

/* ---------- SC.05 · normativa: l'anno d'acciaio ---------- */
.s5 .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.4rem,3.4vw,4rem);align-items:center}
.s5 h2.t{font-size:clamp(2.2rem,1.2rem + 3.2vw,5rem);max-width:14ch}
.ghost{position:absolute;right:-1%;top:50%;transform:translateY(-50%);z-index:-1;
  font-family:var(--ffx);font-stretch:125%;font-weight:900;font-size:clamp(9rem,30vh,25rem);
  line-height:1;letter-spacing:-.045em;pointer-events:none;user-select:none;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(143,212,230,.2) 55%,rgba(143,212,230,.03));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.strips{display:flex;flex-direction:column;gap:.7rem}
.strip{border-left:2px solid var(--key);padding:clamp(.85rem,2vh,1.2rem) clamp(.95rem,1.6vw,1.4rem);
  background:linear-gradient(90deg,rgba(143,212,230,.09),rgba(143,212,230,.012) 60%,transparent);
  transition:.5s var(--ez)}
.strip:hover{background:linear-gradient(90deg,rgba(143,212,230,.17),rgba(143,212,230,.03) 60%,transparent);
  transform:translateX(5px)}
.strip .tag{font-family:var(--ffm);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--key);display:block;margin-bottom:.5rem}
.strip h3{font-size:clamp(.98rem,.34vw + .48vh,1.1rem);margin-bottom:.4rem;letter-spacing:-.015em}
.strip p{font-size:var(--ts);color:var(--paper2);line-height:1.55}

/* ---------- SC.06 · la linea di produzione ---------- */
.s6 .in{max-width:1180px}
.s6 .head{text-align:left;max-width:none;margin:0 0 clamp(1.2rem,3vh,2.2rem)}
.s6 h2.t{font-size:clamp(2.2rem,1.2rem + 3.2vw,5rem)}
.mq{position:absolute;left:0;right:0;top:2%;z-index:-1;overflow:hidden;pointer-events:none;opacity:.6}
.mq span{display:inline-block;white-space:nowrap;
  font-family:var(--ffx);font-stretch:125%;font-weight:900;text-transform:uppercase;line-height:1;
  font-size:clamp(4.5rem,15vh,11rem);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(143,212,230,.10);
  animation:mqx 46s linear infinite}
@keyframes mqx{to{transform:translateX(-50%)}}
/* elenco verticale (fuori dal film / telefono) */
.cast{counter-reset:corso}
.cast li{counter-increment:corso}
.cast li a{display:flex;align-items:baseline;gap:.5rem;padding:clamp(.62rem,1.35vh,.9rem) .45rem;
  border-bottom:1px solid rgba(255,255,255,.055);transition:.4s var(--ez)}
.cast li:first-child a{border-top:1px solid rgba(255,255,255,.055)}
.cast .r{font-family:var(--ffx);font-stretch:110%;font-weight:700;letter-spacing:-.012em;
  font-size:clamp(1.25rem,1.35vw,1.7rem);white-space:nowrap;transition:.4s var(--ez)}
.cast .ld{flex:1;min-width:14px;border-bottom:1px dotted rgba(255,255,255,.2);transform:translateY(-.3em)}
.cast .d{font-family:var(--ffm);font-size:clamp(1rem,.82vw,1.18rem);letter-spacing:.04em;color:var(--paper2);
  text-align:right;transition:.4s var(--ez)}
.cast li a:hover{background:linear-gradient(90deg,rgba(143,212,230,.1),transparent);padding-left:1.1rem}
.cast li a:hover .r{color:var(--key)}
.s6 .foot{text-align:left;margin-top:clamp(1rem,2.6vh,1.8rem)}

/* ---------- SC.07 · il metodo: quattro stazioni ---------- */
.s7 .head{max-width:none;margin-bottom:clamp(1.8rem,4.6vh,3.4rem)}
.s7 h2.t{font-size:clamp(2.2rem,1.2rem + 3.2vw,5rem);max-width:22ch}
.tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.8rem)}
.tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:rgba(255,255,255,.12)}
.tl::after{content:"";position:absolute;left:0;top:9px;height:1px;width:var(--sweep,0%);
  background:linear-gradient(90deg,var(--key-d),var(--key));box-shadow:0 0 14px rgba(143,212,230,.6);
  transition:width 1.6s var(--ez)}
html.film .tl::after{transition:none}
.tl .st{position:relative;padding-top:clamp(3.4rem,7vh,5rem)}
.tl .st::before{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:1px solid var(--key);box-shadow:0 0 0 4px rgba(4,7,11,1),0 0 16px rgba(143,212,230,.55)}
.tl .k{position:absolute;top:clamp(.8rem,2vh,1.4rem);left:0;
  font-family:var(--ffx);font-stretch:125%;font-weight:900;font-size:clamp(1.9rem,1rem + 1.8vw,3.4rem);
  line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(143,212,230,.5);
  margin:0;display:block}
.tl h3{font-family:var(--ffx);font-stretch:110%;font-weight:750;text-transform:uppercase;
  font-size:clamp(1.15rem,.7rem + .9vw,1.7rem);margin-bottom:.5rem}
.tl p{font-size:var(--ts);color:var(--paper2);line-height:1.6}
.s7 .close{margin-top:clamp(1.6rem,4vh,2.8rem);font-size:clamp(1.05rem,.5vw + .6vh,1.4rem);
  font-family:var(--ffd);font-weight:400;letter-spacing:-.018em;color:var(--paper2);max-width:64ch;line-height:1.5}
.s7 .close em{font-style:normal;color:var(--key)}

/* ---------- SC.08 · i due · M per M ---------- */
.s8 .head{max-width:none;margin-bottom:clamp(1.4rem,3.4vh,2.4rem)}
.s8 h2.t{font-size:clamp(2.2rem,1.2rem + 3.2vw,5rem)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,2rem)}
.who{position:relative;padding:clamp(1.3rem,3vh,2.1rem) clamp(1.1rem,2vw,1.9rem);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;background:rgba(2,4,8,.4)}
.who::before{content:"";position:absolute;left:0;right:0;top:6px;height:7px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 9px,transparent 9px 21px)}
.who.a{background:radial-gradient(110% 120% at 0% 0%,rgba(143,212,230,.15),rgba(2,4,8,.4) 62%)}
.who.b{background:radial-gradient(110% 120% at 100% 0%,rgba(232,174,102,.14),rgba(2,4,8,.4) 62%)}
.mono{font-family:var(--ffx);font-stretch:122%;font-weight:900;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.6rem,1.8vw + 2.4vh,4.2rem);margin:.5rem 0 .7rem}
.who.a .mono{color:transparent;-webkit-text-stroke:1.5px rgba(143,212,230,.8)}
.who.b .mono{color:transparent;-webkit-text-stroke:1.5px rgba(232,174,102,.75)}
.who h3{font-family:var(--ffx);font-stretch:110%;font-weight:750;
  font-size:clamp(1.15rem,.55vw + .6vh,1.6rem);margin-bottom:.3rem}
.who .role{font-family:var(--ffm);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper3);margin-bottom:.85rem}
.who p.bio{font-size:var(--ts);color:var(--paper2);line-height:1.62}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.95rem}
.tags li{font-family:var(--ffm);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper2);border:1px solid var(--line);padding:.3rem .55rem;border-radius:2px}
.s8 .foot{margin-top:clamp(1rem,2.6vh,1.8rem)}
/* Le due M giganti dietro la scena: solo traslazione, mai scala. */
.mm{position:absolute;inset:0;z-index:-1;pointer-events:none;user-select:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.mm span{font-family:var(--ffx);font-stretch:125%;font-weight:900;line-height:1;
  font-size:clamp(16rem,56vh,36rem);letter-spacing:-.05em;color:transparent;
  will-change:transform,opacity}
.mm .ma{-webkit-text-stroke:1.5px rgba(143,212,230,.32)}
.mm .mb{-webkit-text-stroke:1.5px rgba(232,174,102,.28);margin-left:-.52em}
.mm .m2{position:absolute;top:50%;left:50%;transform:translate(.6em,-1.12em);
  font-size:clamp(6rem,19vh,13rem);-webkit-text-stroke:0;color:var(--key);
  text-shadow:0 0 60px rgba(143,212,230,.55);opacity:0}
html:not(.film) .mm{opacity:.3}
html:not(.film) .mm .m2{opacity:1}

/* ---------- SC.09 · il cartello finale ---------- */
.s9 .in{text-align:center;max-width:900px}
.s9 .eyebrow{margin-inline:auto}
.s9 h2{margin-inline:auto;max-width:18ch;font-size:clamp(2rem,1.1rem + 2.6vw,4.2rem)}
.s9 .lead{margin:1.2rem auto 0}
.s9 .acts{margin-top:clamp(1.4rem,3.4vh,2.4rem);justify-content:center}
.fin{margin-top:clamp(1.6rem,4vh,3rem);display:flex;justify-content:center;gap:clamp(1rem,3vw,3rem);
  flex-wrap:wrap;font-family:var(--ffm);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper3)}
.fin a{transition:color .3s}.fin a:hover{color:var(--key)}
.sqclose{position:absolute;left:50%;top:50%;width:min(88vw,1020px);aspect-ratio:16/10;z-index:-1;
  transform:translate(-50%,-50%);border:1px solid var(--sqline);border-radius:4px;
  box-shadow:0 0 60px -18px rgba(143,212,230,.35),inset 0 0 80px -40px rgba(143,212,230,.25);
  opacity:0;pointer-events:none;will-change:transform,opacity}
.sqclose::before,.sqclose::after{content:"";position:absolute;width:18px;height:18px;border:0 solid var(--key)}
.sqclose::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
.sqclose::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
html:not(.film) .s9.on .sqclose{opacity:.6;transition:opacity 1.4s var(--ez)}
.s9.on .btn-p{animation:ctaGlow 3.2s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 14px 44px -18px rgba(143,212,230,.85)}
  50%{box-shadow:0 0 46px -4px rgba(143,212,230,.75)}}

/* ---------------- titoli di coda ---------------- */
.coda{position:relative;z-index:5;background:linear-gradient(180deg,transparent,#000 42%);
  padding:clamp(3.5rem,9vh,7rem) var(--gut) calc(var(--barb) + 3rem)}
.coda .in{width:min(1220px,100%);margin:0 auto}
.coda .top{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(2rem,5vh,3.4rem)}
.coda .top .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.coda .top span{font-family:var(--ffm);font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--paper3)}
.cols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr;gap:clamp(1.4rem,3vw,3rem)}
.cols h5{font-family:var(--ffm);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--key);font-weight:400;margin:0 0 1rem}
.cols li{margin-bottom:.52rem;font-size:.845rem;color:var(--paper2);line-height:1.55}
.cols li a{transition:color .3s}.cols li a:hover{color:var(--key)}
.cols .muted{color:var(--paper3);font-size:.79rem}
.coda .bmark{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.coda .bmark img{height:34px;width:auto;filter:saturate(.85) brightness(1.1)}
.coda .bmark b{font-family:var(--ffd);font-size:1.05rem;font-weight:700;display:block;line-height:1}
.coda .bmark i{font-style:normal;font-family:var(--ffm);font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper3);display:block;margin-top:.3rem}
.coda .about{font-size:.845rem;color:var(--paper2);max-width:34ch}
.legal{margin-top:clamp(2rem,5vh,3.2rem);padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;font-family:var(--ffm);font-size:.63rem;
  letter-spacing:.1em;color:var(--paper3)}
.legal a:hover{color:var(--key)}

/* ---------------- entrata del testo (come un sottotitolo) ---------------- */
/* I blocchi partono nascosti SOLO se JavaScript e' vivo (classe .js messa da
   pronto.js). Senza, tutto resta visibile. */
html.js .q{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 1.15s var(--ez),transform 1.15s var(--ez),filter 1.15s var(--ez)}
html.js .scene.on .q,html.js .coda.on .q{opacity:1;transform:none;filter:none}
.scene.on .q:nth-child(1){transition-delay:.05s}
.q[data-d="1"]{transition-delay:.12s}.q[data-d="2"]{transition-delay:.24s}
.q[data-d="3"]{transition-delay:.36s}.q[data-d="4"]{transition-delay:.48s}
.q[data-d="5"]{transition-delay:.6s}.q[data-d="6"]{transition-delay:.72s}
.q[data-d="7"]{transition-delay:.84s}.q[data-d="8"]{transition-delay:.96s}
.q[data-d="9"]{transition-delay:1.08s}.q[data-d="10"]{transition-delay:1.2s}
.q[data-d="11"]{transition-delay:1.32s}.q[data-d="12"]{transition-delay:1.44s}
h1 .l i{transform:translate3d(0,110%,0);transition:transform 1.35s var(--ez)}
.scene.on h1 .l i{transform:none}
h1 .l:nth-child(2) i{transition-delay:.16s}
/* L'hero e' acceso appena la pagina nasce: nessun sipario sul contenuto. */

/* menu mobile a schermo intero */
.drawer{position:fixed;inset:0;z-index:18;background:#02040a;display:flex;flex-direction:column;
  justify-content:center;gap:.2rem;padding:var(--bar) var(--gut) var(--barb);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ez),visibility .45s}
body.nav-open .drawer{opacity:1;visibility:visible}
.drawer a{font-family:var(--ffd);font-size:clamp(1.4rem,7vw,2.1rem);font-weight:500;letter-spacing:-.02em;
  padding:.5rem 0;border-bottom:1px solid var(--line);transform:translateY(14px);opacity:0;
  transition:.5s var(--ez)}
body.nav-open .drawer a{transform:none;opacity:1}
body.nav-open .drawer a:nth-child(1){transition-delay:.08s}
body.nav-open .drawer a:nth-child(2){transition-delay:.14s}
body.nav-open .drawer a:nth-child(3){transition-delay:.2s}
body.nav-open .drawer a:nth-child(4){transition-delay:.26s}
body.nav-open .drawer a:nth-child(5){transition-delay:.32s}
body.nav-open .drawer a:nth-child(6){transition-delay:.38s}
body.nav-open .drawer a:nth-child(7){transition-delay:.44s;color:var(--key)}

/* =====================================================================
   IL FILM (html.film) — GSAP attivo, schermo >=900px, movimento pieno
   ===================================================================== */
html.film .scene{min-height:100vh;min-height:100svh}
html.film .scene.s3,html.film .scene.s4,html.film .scene.s5,
html.film .scene.s7,html.film .scene.s9{min-height:min(94vh,980px)}
html.film .scene + .scene{border-top:0}

/* le cornici della spinta in avanti (SC.01) */
.sqpush{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;
  width:min(46vh,520px);aspect-ratio:1;transform:translate(-50%,-50%);
  border:1px solid var(--sqline);border-radius:3px;opacity:0;will-change:transform,opacity}
.sqpush.b{border-color:rgba(143,212,230,.16)}
.sqpush.c{border-color:rgba(232,174,102,.14)}
html:not(.film) .sqpush{display:none}

/* SC.06 nel film: la corsa orizzontale di targhe */
html.film .s6{display:block;padding-top:calc(var(--bar) + 6vh)}
html.film .s6 .in{max-width:none;width:auto;margin:0}
html.film .s6 .head{margin:0 max(var(--gut),calc((100vw - 1180px)/2)) clamp(1.6rem,4vh,2.6rem)}
html.film .cast{display:flex;width:max-content;gap:clamp(.8rem,1.4vw,1.4rem);border:0;
  padding:0 max(var(--gut),calc((100vw - 1180px)/2));will-change:transform}
html.film .cast li{flex:0 0 auto;width:clamp(290px,24vw,375px);position:relative}
html.film .cast li a{flex-direction:column;align-items:flex-start;gap:.7rem;height:100%;
  border:1px solid var(--line)!important;border-radius:3px;
  padding:clamp(1.5rem,3.2vh,2.2rem) clamp(1.1rem,1.6vw,1.6rem);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(2,4,8,.5));
  position:relative;overflow:hidden}
html.film .cast li a::before{content:"";position:absolute;left:0;right:0;top:6px;height:7px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 9px,transparent 9px 21px)}
html.film .cast li a::after{content:counter(corso,decimal-leading-zero);position:absolute;
  right:.55rem;bottom:.2rem;font-family:var(--ffx);font-stretch:125%;font-weight:900;line-height:1;
  font-size:clamp(2.6rem,2.6vw,4rem);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(143,212,230,.28)}
html.film .cast li a:hover{padding-left:clamp(1.1rem,1.6vw,1.6rem);border-color:rgba(143,212,230,.5)!important;
  transform:translateY(-5px)}
html.film .cast .r{white-space:normal;font-size:clamp(1.35rem,1.25vw,1.7rem);line-height:1.08;
  margin-top:.7rem;text-transform:uppercase;font-stretch:114%}
html.film .cast .ld{display:none}
html.film .cast .d{text-align:left;font-size:clamp(.82rem,.68vw,.98rem);color:var(--key);
  letter-spacing:.12em;text-transform:uppercase}
html.film .s6 .foot{margin:clamp(1.6rem,4vh,2.6rem) max(var(--gut),calc((100vw - 1180px)/2)) 0;text-align:left}
html.film .s6 .q{opacity:1;transform:none;transition:none}
html.film .s2 .nums .q{transition-delay:0s}

@media (max-width:1180px){
  .cols{grid-template-columns:1fr 1fr}
  .frame{grid-template-columns:clamp(56px,8vw,90px) minmax(0,1fr);grid-template-rows:auto auto}
  .frame p{grid-column:2}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem}
  .tl::before,.tl::after{display:none}
  .tl .st::before{box-shadow:0 0 16px rgba(143,212,230,.55)}
}
@media (max-width:1150px){
  .menu,.cta-t{display:none}
  .burger{display:block}
  .chapters{display:none}
  .s5 .in{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .ghost{font-size:clamp(6rem,30vw,12rem);right:-4%;top:-2%;transform:none}
  .duo{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .viewsq{display:none}
  .mghost{font-size:clamp(8rem,26vw,14rem);bottom:-3%}
}
@media (max-width:680px){
  .cmp{grid-template-columns:minmax(0,1fr)}
  .cmp .new::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--key),transparent)}
  .frame{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:1.2rem .2rem}
  .frame p{grid-column:1}
  .cast li a{flex-wrap:wrap;gap:.15rem .5rem}
  .cast .ld{display:none}
  .cast .d{width:100%;text-align:left}
  .nums li{grid-template-columns:minmax(0,1fr);row-gap:.35rem}
  .cols{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .coda .top span{letter-spacing:.24em;font-size:.56rem}
  .tc{display:none}
  .btn{padding:.75rem 1.05rem;font-size:.63rem}
  .scene{padding:calc(var(--bar) + 3.5vh) var(--gut) calc(var(--barb) + 3.5vh)}
}
@media (max-width:420px){
  .tl{grid-template-columns:minmax(0,1fr)}
  .duo .tags li:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .q{opacity:1;transform:none;filter:none}
  h1 .l i{transform:none}
  .grain{animation:none}
  .slate .rec{animation:none}
  .mq span{animation:none}
}

/* Banco di verifica (?jump=<y>): niente transizioni di entrata, lo
   screenshot fotografa lo stato a regime, non una dissolvenza. */
html.salto .q,html.salto h1 .l i{transition:none!important}
html.salto .hint{animation:none;opacity:0}

/* ---------------------------------------------------------------
   Il marchio a particelle dentro il quadrato-mirino dell'hero.
   --------------------------------------------------------------- */
.s1{position:relative}
.s1 #heroCanvas{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ez)}
.s1 #heroCanvas.con-logo{opacity:1}
.s1 .in{position:relative;z-index:2}
.s1 #heroCanvas.con-logo ~ .in .mark{opacity:0;transform:scale(.94);
  transition:opacity 1s var(--ez) .35s,transform 1s var(--ez) .35s}
@media(max-width:899px){.s1 #heroCanvas.con-logo{opacity:.42}
  .s1 #heroCanvas.con-logo ~ .in .mark{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .s1 #heroCanvas{transition:none}
  .s1 #heroCanvas.con-logo ~ .in .mark{transition:none}}

/* ---------------------------------------------------------------
   Fuori dal film la pagina scorre normalmente e compatta.
   --------------------------------------------------------------- */
html:not(.film) .scene{min-height:0;padding:clamp(3.6rem,8vh,6.4rem) var(--gut)}
html:not(.film) .scene.s1{min-height:100vh;min-height:100svh;
  padding:calc(var(--bar) + 4vh) var(--gut) calc(var(--barb) + 4vh)}
html:not(.film) .scene + .scene{border-top:1px solid rgba(255,255,255,.05)}
.s6 .head p:not(.eyebrow),.s3 .head p:not(.eyebrow),.s4 .head p:not(.eyebrow),.s7 .head p:not(.eyebrow){font-size:var(--t3);line-height:1.55}