/* ==========================================================================
   CHROMA LABS · style.css · v4
   Dark cinematografico. Hairline al posto dei bordi duri, easing lunghi,
   grana pellicola, radius morbidi, giallo solo dove decide qualcosa.

   Indice
   01 Font self hosted
   02 Tokens
   03 Reset e base
   04 Icone SVG inline
   05 Grana, playhead, header
   06 Eyebrow, bottoni
   07 Hero, showreel, clienti
   08 Sezioni e tipografia di sezione
   09 Servizi (pipeline)
   10 Portfolio (griglia, card, filtri)
   11 Lightbox e scheda lavoro
   12 Numeri, approccio
   13 Contatto e form
   14 Social
   15 Footer
   16 Pagine interne: prosa, NFC, 404
   17 Reveal e animazioni di stato
   18 Reduced motion
   ========================================================================== */

/* ---------- 01 Font self hosted ----------
   Poppins in quattro pesi, latin subset, OFL. Nessuna richiesta esterna.
   Il preload dei file sta nell'head di ogni pagina. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600.woff2") format("woff2");
}

/* ---------- 02 Tokens ---------- */
:root {
  --nero: #0b0b0c;
  --nero-2: #111113;
  --nero-3: #17171a;
  --bianco: #f4f3ef;
  --grigio: #98968f;
  --grigio-scuro: #83817a; /* 4,6:1 anche sul nero-3: minimo AA per il testo piccolo */
  --giallo: #f2c43d;
  --giallo-soft: rgba(242, 196, 61, 0.35);
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-forte: rgba(255, 255, 255, 0.13);

  --font: "Poppins", system-ui, sans-serif;

  /* Scala tipografica. Ruoli, non numeri sparsi:
     display  h1 hero, 404
     h2       titoli di sezione
     h3       titoli di card e blocchi
     lead     sottotitoli e domande
     body     testo corrente
     small    nav, eyebrow, label, meta
     micro    note legali, credits */
  --fs-display: clamp(2.6rem, 6.4vw, 5.6rem);
  --fs-h2: clamp(1.9rem, 4vw, 3.3rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small: 0.8125rem;
  --fs-micro: 0.72rem;

  /* Pesi. Il 200 esce: appiattiva tutto. */
  --peso-leggero: 300;
  --peso-testo: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --wrap: min(1240px, 100% - 2 * var(--gutter));
  --sezione: clamp(6rem, 14vh, 11rem);

  --radius: 16px;
  --radius-s: 10px;

  --icona-stroke: 1.3;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-veloce: 0.5s var(--ease);
  --t-lento: 1.1s var(--ease);
}

/* ---------- 03 Reset e base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(242, 196, 61, 0.045), transparent 55%),
    var(--nero);
  color: var(--bianco);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--peso-testo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, iframe { display: block; max-width: 100%; }
img { height: auto; } /* width/height nell'HTML servono solo al rapporto, mai a schiacciare */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: var(--peso-medio); }

::selection { background: var(--giallo); color: var(--nero); }
:focus-visible { outline: 2px solid var(--giallo); outline-offset: 4px; border-radius: 4px; }

.wrap { width: var(--wrap); margin-inline: auto; }

/* ---------- 04 Icone SVG inline ----------
   Un solo tratto per tutto il sito: stroke 1.3, cap e join round,
   currentColor. La dimensione la decide il contesto. */
.icona {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}
.icona svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icona-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Elementi pieni dentro un'icona a tratto (il punto di Instagram) */
.icona svg .pieno { fill: currentColor; stroke: none; }

/* ---------- 05 Grana, playhead, header ---------- */
.grana {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 400;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grana-vibra 0.9s steps(3) infinite;
}
@keyframes grana-vibra {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1.5%); }
  66% { transform: translate(1.5%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Perforazioni da pellicola sui due bordi della finestra. Un solo
   elemento con la stessa immagine ripetuta a sinistra e a destra.
   Sotto i 900px sparisce: ruberebbe larghezza al testo. */
.pellicola {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='34'%3E%3Crect x='4' y='9' width='8' height='16' rx='2.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='34'%3E%3Crect x='4' y='9' width='8' height='16' rx='2.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E");
  background-position: left top, right top;
  background-repeat: repeat-y, repeat-y;
}
@media (max-width: 900px) { .pellicola { display: none; } }

.playhead {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, rgba(242, 196, 61, 0.55), var(--giallo));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 500;
  pointer-events: none;
}

/* Link "salta al contenuto": fuori schermo finché non riceve il fuoco
   da tastiera, poi compare sopra l'header. */
.salta {
  position: fixed;
  top: 0.8rem; left: 0.8rem;
  z-index: 1000;
  padding: 0.7rem 1.1rem;
  background: var(--giallo);
  color: var(--nero);
  font-weight: var(--peso-medio);
  font-size: var(--fs-small);
  border-radius: 999px;
  transform: translateY(-200%);
}
.salta:focus-visible { transform: none; outline: 2px solid var(--bianco); outline-offset: 2px; }
#contenuto:focus { outline: none; }

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  padding: 1.3rem 0;
  border-bottom: 1px solid transparent;
  transition: background 0.6s ease, padding 0.6s var(--ease), border-color 0.6s ease;
}
.header.scrolled {
  background: rgba(11, 11, 12, 0.72);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  padding: 0.75rem 0;
  border-bottom-color: var(--hairline);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 2.4rem; }
.nav a {
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grigio);
  padding: 0.35rem 0;
  transition: color var(--t-veloce);
}
.nav a:hover { color: var(--bianco); }
.nav a[aria-current="page"] { color: var(--giallo); }

.timecode {
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  color: var(--grigio-scuro);
  font-variant-numeric: tabular-nums;
  min-width: 8.5ch;
  text-align: right;
}
.timecode span { color: var(--giallo); }

/* Menu mobile */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px;
  height: 1.5px;
  background: var(--bianco);
  transition: transform 0.45s var(--ease), opacity 0.3s ease;
}
.nav-toggle span { top: 50%; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .timecode { display: none; }
  .nav-toggle { display: block; z-index: 310; }
  .nav {
    position: fixed;
    inset: 0;
    background: rgba(11, 11, 12, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    gap: 2.6rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s var(--ease), visibility 0.55s;
  }
  .nav.open { opacity: 1; visibility: visible; }
  .nav a { font-size: 1.4rem; font-weight: var(--peso-testo); letter-spacing: 0.02em; text-transform: none; }
}

/* ---------- 06 Eyebrow, bottoni ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grigio);
  margin-bottom: 1.8rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--giallo);
  box-shadow: 0 0 12px rgba(242, 196, 61, 0.5);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  border: 1px solid var(--hairline-forte);
  color: var(--bianco);
  font-weight: var(--peso-medio);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--giallo);
  transform: translateY(102%);
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.btn::after {
  content: "\2192";
  font-weight: var(--peso-leggero);
  transition: transform 0.5s var(--ease);
}
.btn:hover { color: var(--nero); border-color: var(--giallo); }
.btn:hover::before { transform: translateY(0); }
.btn:hover::after { transform: translateX(4px); }
.btn.pieno { background: var(--giallo); border-color: var(--giallo); color: var(--nero); }
.btn.pieno::before { background: var(--bianco); }
/* Bottone con icona a sinistra: la freccia non serve */
.btn .icona { width: 18px; height: 18px; }
.btn.con-icona::after { content: none; }

/* ---------- 07 Hero, showreel, clienti ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 8rem;
}
.hero-inner { padding-bottom: clamp(2rem, 5vh, 4rem); }
.hero h1 {
  font-size: var(--fs-display);
  font-weight: var(--peso-leggero);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.hero h1 strong { font-weight: var(--peso-forte); color: var(--giallo); }
.hero p.sub {
  margin-top: 1.8rem;
  max-width: 50ch;
  color: var(--grigio);
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.hero-cta-row { margin-top: 2.6rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }

/* Apertura pagina: le righe salgono con stagger. Una delle tre animazioni
   che restano, insieme a lightbox e cambio filtro. */
.hero .eyebrow, .hero h1, .hero p.sub, .hero .hero-cta-row, .hero .showreel {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
}
body.pronto .hero .eyebrow { transition-delay: 0.1s; }
body.pronto .hero h1 { transition-delay: 0.22s; }
body.pronto .hero p.sub { transition-delay: 0.38s; }
body.pronto .hero .hero-cta-row { transition-delay: 0.52s; }
body.pronto .hero .showreel { transition-delay: 0.7s; }
body.pronto .hero .eyebrow, body.pronto .hero h1, body.pronto .hero p.sub,
body.pronto .hero .hero-cta-row, body.pronto .hero .showreel {
  opacity: 1;
  transform: none;
  filter: none;
}

.showreel { margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--nero-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  transform: translateZ(0);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--nero-2);
}
/* Il frame del video sta sotto, con un velo scuro dal basso: play e
   timecode restano leggibili su qualunque fotogramma. */
.video-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.08), rgba(11, 11, 12, 0.55));
}
.video-poster:hover img { transform: scale(1.03); }
.video-poster .play, .video-poster .label { position: relative; z-index: 1; }
.video-poster .play {
  width: clamp(68px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hairline-forte);
  display: grid;
  place-items: center;
  transition: transform 0.6s var(--ease), background 0.6s var(--ease), border-color 0.6s var(--ease);
}
.video-poster .play svg { width: 28%; fill: var(--bianco); margin-left: 6%; transition: fill 0.5s ease; }
.video-poster:hover .play { transform: scale(1.1); background: var(--giallo); border-color: var(--giallo); }
.video-poster:hover .play svg { fill: var(--nero); }
.video-poster .label {
  position: absolute;
  z-index: 1;
  bottom: 1.3rem; left: 1.5rem;
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grigio);
}

/* Clienti: titolo piccolo e striscia di loghi. Senza JS (o con reduced
   motion) la fila è statica e centrata. Con il JS la striscia entra in
   loop: il JS clona la lista quante volte serve, misura la larghezza di
   un set e imposta --shift (spostamento esatto) e --durata (100px/s).
   Partenza a metà corsa, così non si vede mai l'attacco da sinistra. */
.clienti { padding: clamp(3.5rem, 9vh, 6rem) 0 0; }
.clienti h2 {
  font-size: var(--fs-h3);
  font-weight: var(--peso-medio);
  letter-spacing: -0.01em;
  margin-top: -0.6rem;
}
.loghi { margin-top: clamp(2rem, 5vh, 3rem); overflow: hidden; }
.loghi-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem clamp(4rem, 8vw, 8rem);
  padding-inline: var(--gutter);
}
.loghi-track { --logo-h: clamp(32px, 4.2vw, 48px); }
.loghi-track li { flex-shrink: 0; }
/* I loghi quadrati o verticali a parità di altezza sembrano più piccoli: si alzano */
.loghi-track li.alto img { height: calc(var(--logo-h) * 1.45); }
.loghi-track img {
  height: var(--logo-h);
  width: auto;
  opacity: 0.55;
  filter: grayscale(1) brightness(1.4);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.loghi-track li:hover img { opacity: 1; filter: none; }
.loghi.loop {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.loghi.loop .loghi-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  padding-inline: 0;
  animation: scorri var(--durata, 40s) linear infinite;
  animation-delay: calc(var(--durata, 40s) * -0.5);
  will-change: transform;
}
.loghi.loop:hover .loghi-track { animation-play-state: paused; }
@keyframes scorri { to { transform: translateX(var(--shift, -50%)); } }

/* ---------- 08 Sezioni ---------- */
.sezione { padding-block: var(--sezione); }
/* Le pagine interne hanno l'h1 nella testata, con la misura dei titoli
   di sezione: il display resta alla hero della home. */
.sezione h2, .pagina-testata h1 {
  font-size: var(--fs-h2);
  font-weight: var(--peso-leggero);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.sezione h2 strong, .pagina-testata h1 strong { font-weight: var(--peso-forte); }
.intro-sezione { margin-top: 1.6rem; max-width: 54ch; color: var(--grigio); font-size: var(--fs-lead); }

/* ---------- 09 Servizi: la pipeline ----------
   Quattro passi su un'unica linea, come una timeline. Niente card
   identiche: una hairline continua, un nodo giallo per passo, numero
   tabulare. Al passaggio la linea si accende da sinistra, come un
   playhead. Sotto i 600px la linea diventa verticale. */
.servizi-griglia {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.servizio {
  --pad: clamp(1.4rem, 2.5vw, 2.4rem);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.4rem var(--pad) 2.6rem;
  border-top: 1px solid var(--hairline);
}
.servizio:first-child { padding-left: 0; --pad-nodo: 0px; }
/* Nodo sulla linea */
.servizio::before {
  content: "";
  position: absolute;
  top: -4px;
  left: var(--pad-nodo, var(--pad));
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--giallo);
  box-shadow: 0 0 0 4px var(--nero);
  transition: box-shadow 0.6s var(--ease);
}
/* Segmento che si accende */
.servizio::after {
  content: "";
  position: absolute;
  top: -1px; left: var(--pad-nodo, var(--pad)); right: calc(-1 * var(--pad));
  height: 1px;
  background: var(--giallo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}
.servizio:last-child::after { right: 0; }
.servizio:hover::after, .servizio:focus-within::after { transform: scaleX(1); }
.servizio:hover::before, .servizio:focus-within::before { box-shadow: 0 0 0 4px var(--nero), 0 0 16px rgba(242, 196, 61, 0.6); }

.servizio .passo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.servizio .num {
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  color: var(--giallo);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}
.servizio .icona { width: 28px; height: 28px; color: var(--bianco); transition: color 0.5s ease; }
.servizio:hover .icona { color: var(--giallo); }
.servizio h3 {
  font-size: var(--fs-h3);
  font-weight: var(--peso-medio);
  margin-top: 2.2rem;
  letter-spacing: -0.01em;
}
.servizio .domanda {
  margin-top: 0.4rem;
  font-size: var(--fs-lead);
  font-weight: var(--peso-leggero);
  line-height: 1.35;
  color: var(--bianco);
  max-width: 18ch;
}
.servizio p { color: var(--grigio); font-size: 0.95rem; line-height: 1.65; margin-top: 1.1rem; }
.servizio .cta {
  margin-top: auto;
  padding-top: 1.8rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bianco);
  transition: color 0.4s ease;
}
.servizio .cta::after {
  content: "\2192";
  font-weight: var(--peso-leggero);
  transition: transform 0.5s var(--ease);
}
.servizio .cta:hover { color: var(--giallo); }
.servizio .cta:hover::after { transform: translateX(4px); }

@media (max-width: 1000px) {
  .servizi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servizio:nth-child(odd) { padding-left: 0; --pad-nodo: 0px; }
  .servizio:nth-child(even)::after { right: 0; }
}
@media (max-width: 600px) {
  .servizi-griglia { grid-template-columns: 1fr; }
  .servizio, .servizio:nth-child(odd) {
    padding: 0 0 2.6rem 1.6rem;
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }
  .servizio:last-child { padding-bottom: 0.5rem; }
  .servizio::before { top: 0.5rem; left: -4px; }
  .servizio::after {
    top: 0.5rem; bottom: 0; left: -1px; right: auto;
    width: 1px; height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .servizio:hover::after, .servizio:focus-within::after { transform: scaleY(1); }
  .servizio h3 { margin-top: 1.4rem; }
}

/* ---------- 10 Portfolio ---------- */
.filtri { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.filtri button {
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  color: var(--grigio);
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.filtri button:hover { border-color: var(--hairline-forte); color: var(--bianco); }
.filtri button[aria-pressed="true"] { background: var(--giallo); border-color: var(--giallo); color: var(--nero); }

.griglia-lavori {
  margin-top: clamp(3rem, 7vh, 5rem);
  columns: 3 300px;
  column-gap: 1.2rem;
}
/* Griglia in attesa di /data/lavori.json: spazio riservato, niente salto */
.griglia-lavori[aria-busy="true"] { min-height: 42vh; }
.lavori-errore { color: var(--grigio); font-size: var(--fs-small); max-width: 46ch; }
.lavori-errore a { color: var(--giallo); }

.lavoro {
  break-inside: avoid;
  margin-bottom: 1.2rem;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-s);
  text-align: left;
  padding: 0;
  isolation: isolate;
  background: var(--nero-2);
}
.lavoro.nascosto { display: none; }
.lavoro img {
  width: 100%;
  height: auto;
  transform: scale(1.001);
  transition: transform 1.4s var(--ease);
}
.lavoro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 9, 0.92) 0%, rgba(8, 8, 9, 0.25) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.lavoro:hover img, .lavoro:focus-visible img { transform: scale(1.045); }
/* I fotogrammi dell'anteprima stanno sopra il poster e sotto badge,
   overlay e sfumatura: al passaggio del mouse si alternano in dissolvenza. */
.lavoro .fotogramma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s var(--ease), transform 1.4s var(--ease);
  pointer-events: none;
}
.lavoro .fotogramma.in-vista { opacity: 1; }
.lavoro:hover::after, .lavoro:focus-visible::after { opacity: 1; }
.lavoro .overlay {
  position: absolute;
  inset: 0;
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}
.lavoro .overlay .cat,
.lavoro .overlay .titolo {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.lavoro .overlay .titolo { transition-delay: 0.06s; }
.lavoro:hover .overlay .cat, .lavoro:hover .overlay .titolo,
.lavoro:focus-visible .overlay .cat, .lavoro:focus-visible .overlay .titolo {
  opacity: 1;
  transform: none;
}
.lavoro .overlay .cat {
  color: var(--giallo);
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lavoro .overlay .titolo { font-size: 1.2rem; font-weight: var(--peso-medio); margin-top: 0.35rem; letter-spacing: -0.01em; line-height: 1.3; }
.lavoro .tipo-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--hairline-forte);
  display: grid;
  place-items: center;
  z-index: 1;
  color: var(--bianco);
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}
.lavoro:hover .tipo-badge { background: var(--giallo); border-color: var(--giallo); color: var(--nero); }
/* Il play del badge è pieno, come quello dello showreel: a 15px il tratto
   non reggerebbe. Stesso glifo, stesso currentColor. */
.lavoro .tipo-badge svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }

.link-portfolio { margin-top: 3.5rem; text-align: center; }

/* Touch: niente hover, il contesto deve esserci sempre */
@media (hover: none) {
  .lavoro::after {
    opacity: 1;
    background: linear-gradient(to top, rgba(8, 8, 9, 0.85) 0%, rgba(8, 8, 9, 0.2) 40%, transparent 60%);
  }
  .lavoro .overlay .cat, .lavoro .overlay .titolo { opacity: 1; transform: none; }
}

/* Mobile: non una colonna infinita ma una griglia a due colonne
   con flusso denso. I 16:9 occupano la riga intera, i verticali e i
   quadrati si affiancano. Il formato arriva dal JSON via data-formato. */
@media (max-width: 700px) {
  .griglia-lavori {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 0.65rem;
    margin-top: 2.4rem;
  }
  /* Ritmo fisso: a mezza larghezza tutto è 4:5, a tutta riga 16:9.
     Le miniature 1:1 e 9:16 vengono ritagliate, la lightbox le mostra intere. */
  .lavoro { margin-bottom: 0; border-radius: 8px; aspect-ratio: 4 / 5; }
  .lavoro img { height: 100%; object-fit: cover; }
  .lavoro[data-formato="16:9"] { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .lavoro .overlay { padding: 0.9rem; }
  .lavoro .overlay .cat { font-size: var(--fs-micro); letter-spacing: 0.16em; }
  .lavoro .overlay .titolo { font-size: 0.92rem; margin-top: 0.2rem; }
  .lavoro[data-formato="16:9"] .overlay { padding: 1.2rem; }
  .lavoro[data-formato="16:9"] .overlay .titolo { font-size: 1.05rem; }
  .lavoro .tipo-badge { width: 32px; height: 32px; top: 0.65rem; right: 0.65rem; }
  .lavoro .tipo-badge svg { width: 13px; height: 13px; }
  .filtri { margin-top: 2rem; gap: 0.45rem; }
  .filtri button { padding: 0.5rem 1.05rem; }
}

/* ---------- 11 Lightbox e scheda lavoro ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(6, 6, 7, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.lightbox.aperta { opacity: 1; visibility: visible; }
.lightbox-contenuto {
  width: min(1100px, 100%);
  max-height: 90vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "meta";
  gap: 1.2rem clamp(1.6rem, 3vw, 2.8rem);
  transform: translateY(24px) scale(0.985);
  transition: transform 0.6s var(--ease);
}
.lightbox.aperta .lightbox-contenuto { transform: none; }
.lightbox-media { grid-area: media; min-width: 0; }
.lightbox-meta { grid-area: meta; }
.lightbox-contenuto .video-frame { width: 100%; box-shadow: 0 60px 160px rgba(0, 0, 0, 0.7); }
/* Un verticale non va allargato a 16:9. Il frame prende il rapporto
   dichiarato nel JSON e resta dentro l'altezza utile della finestra. */
.lightbox-contenuto .video-frame[data-formato="9:16"] { aspect-ratio: 9 / 16; width: min(100%, 42vh); }
.lightbox-contenuto .video-frame[data-formato="4:5"] { aspect-ratio: 4 / 5; width: min(100%, 60vh); }
.lightbox-contenuto .video-frame[data-formato="1:1"] { aspect-ratio: 1; width: min(100%, 74vh); }
.lightbox-contenuto .video-frame[data-formato] { margin-inline: auto; }
.lightbox-contenuto img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-s);
  box-shadow: 0 60px 160px rgba(0, 0, 0, 0.7);
}
.lightbox-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.lightbox-meta .cat { color: var(--giallo); font-size: var(--fs-small); font-weight: var(--peso-medio); letter-spacing: 0.2em; text-transform: uppercase; }
.lightbox-meta .titolo { font-weight: var(--peso-medio); color: var(--bianco); }
.lightbox-chiudi {
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  width: 50px; height: 50px;
  border: 1px solid var(--hairline-forte);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  z-index: 1;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease), transform 0.5s var(--ease);
}
.lightbox-chiudi:hover { border-color: var(--giallo); color: var(--giallo); transform: rotate(90deg); }

/* Scheda: compare solo se il lavoro ha cliente, anno, ruoli, testo o
   credits nel JSON. Senza quei campi la lightbox resta quella di sempre. */
.lightbox-scheda { display: none; }
.lightbox.con-scheda .lightbox-contenuto {
  width: min(1280px, 100%);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  grid-template-areas: "media scheda" "meta scheda";
  align-items: start;
}
.lightbox.con-scheda .lightbox-scheda {
  display: block;
  grid-area: scheda;
  align-self: stretch;
  max-height: 84vh;
  overflow-y: auto;
  padding-left: clamp(1.6rem, 3vw, 2.8rem);
  border-left: 1px solid var(--hairline);
}
.lightbox.con-scheda .lightbox-contenuto img { max-height: 70vh; }
.scheda-dati { display: grid; gap: 1.1rem; }
.scheda-dati dt {
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}
.scheda-dati dd { margin-top: 0.25rem; font-size: 0.95rem; color: var(--bianco); }
.scheda-testo { margin-top: 1.6rem; color: var(--grigio); font-size: 0.95rem; line-height: 1.65; }
.scheda-credits {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--grigio-scuro);
  white-space: pre-line;
}
.scheda-dati [hidden], .scheda-testo[hidden], .scheda-credits[hidden] { display: none; }

@media (max-width: 820px) {
  .lightbox { padding: 0.75rem; align-items: flex-start; }
  .lightbox-contenuto { max-height: none; }
  .lightbox.con-scheda .lightbox-contenuto {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "meta" "scheda";
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100svh - 1.5rem);
    overflow-y: auto;
    padding-top: 4.6rem;
    padding-bottom: 1rem;
  }
  .lightbox.con-scheda .lightbox-scheda {
    max-height: none;
    overflow: visible;
    padding: 1.4rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .lightbox-chiudi { top: 0.9rem; right: 0.9rem; width: 44px; height: 44px; }
  .lightbox:not(.con-scheda) .lightbox-contenuto { align-self: center; }
}

/* ---------- 12 Numeri, approccio ---------- */
.numeri { position: relative; }
.numeri::before, .numeri::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--wrap);
  height: 1px;
  background: var(--hairline);
}
.numeri::before { top: 0; }
.numeri::after { bottom: 0; }
.numeri-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 3.5rem 2.5rem;
  margin-top: clamp(3rem, 7vh, 5rem);
}
.numero .valore {
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  font-weight: var(--peso-leggero);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.numero .valore .suffisso { color: var(--giallo); font-weight: var(--peso-medio); }
.numero .etichetta { margin-top: 1rem; color: var(--grigio); font-size: 0.93rem; max-width: 24ch; line-height: 1.6; }

.approccio-griglia {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
@media (max-width: 820px) { .approccio-griglia { grid-template-columns: 1fr; } }
.approccio-testo p + p { margin-top: 1.4rem; }
.approccio-testo p { color: var(--grigio); }
.approccio-testo strong { color: var(--bianco); }
.pilastri { display: grid; gap: 1rem; }
.pilastro {
  padding: 1.8rem 2rem;
  background: var(--nero-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: baseline;
  transition: border-color 0.6s var(--ease);
}
.pilastro:hover { border-color: var(--giallo-soft); }
.pilastro .marker { color: var(--giallo); font-size: var(--fs-small); font-weight: var(--peso-medio); letter-spacing: 0.15em; }
.pilastro h3 { font-size: 1.1rem; font-weight: var(--peso-medio); }
.pilastro p { color: var(--grigio); font-size: 0.93rem; margin-top: 0.45rem; line-height: 1.6; }

/* ---------- 13 Contatto e form ---------- */
.contatto { position: relative; overflow: hidden; }
.contatto::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: var(--wrap);
  height: 1px;
  background: var(--hairline);
}
.contatto-icona {
  position: absolute;
  right: clamp(-180px, -9vw, -70px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(320px, 36vw, 560px);
  height: auto; /* l'attributo height="900" nell'HTML altrimenti la schiaccia */
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}
/* Convive con .wrap: .wrap decide la larghezza massima del contenitore,
   qui si stringe ulteriormente e si centra. Nessuna dichiarazione di
   width che annulli quella di .wrap. */
.contatto-griglia {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 440px);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1040px;
}
@media (max-width: 820px) {
  .contatto-griglia { grid-template-columns: 1fr; align-items: start; }
  .contatto-icona { display: none; }
}
.contatto-info .voce { margin-top: 2rem; }
.contatto-info .voce .label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}
.contatto-info .voce .label .icona { width: 15px; height: 15px; color: var(--giallo); }
.contatto-info .voce > a, .contatto-info .voce > p:not(.label) { display: block; margin-top: 0.4rem; font-size: 1.08rem; transition: color 0.4s ease; }
.contatto-info .voce a:hover { color: var(--giallo); }
/* Riga con link e icona a fianco (telefono + WhatsApp) */
.contatto-info .voce .riga { display: flex; align-items: center; gap: 0.7rem; }
.link-icona {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline-forte);
  color: var(--grigio);
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.link-icona .icona { width: 17px; height: 17px; }
.contatto-info .voce .link-icona:hover { color: var(--nero); background: var(--giallo); border-color: var(--giallo); }
.contatto-info .social-riga { margin-top: 0.7rem; }

.form {
  display: grid;
  gap: 1.05rem;
  background: var(--nero-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.campo { display: grid; gap: 0.45rem; }
.campo label {
  font-size: 0.75rem;
  font-weight: var(--peso-medio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grigio);
}
.campo input, .campo textarea, .campo select {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  padding: 0.72rem 0.95rem;
  color: var(--bianco);
  font: inherit;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: rgba(242, 196, 61, 0.55);
  background: rgba(255, 255, 255, 0.04);
}
.campo select { appearance: none; cursor: pointer; }
.campo select option { background: var(--nero-2); }
.campo textarea { resize: vertical; min-height: 104px; }

/* Honeypot antispam: fuori schermo, non display:none (i bot lo riconoscono) */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Consenso privacy: obbligatorio, con link alla policy */
.campo-consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--grigio);
}
.campo-consenso input {
  width: 16px; height: 16px;
  margin-top: 0.2rem;
  accent-color: var(--giallo);
  cursor: pointer;
}
.campo-consenso a { color: var(--bianco); border-bottom: 1px solid var(--hairline-forte); transition: color 0.4s ease, border-color 0.4s ease; }
.campo-consenso a:hover { color: var(--giallo); border-color: var(--giallo); }
.form .btn { justify-self: start; margin-top: 0.3rem; }
.form .btn[disabled] { opacity: 0.6; pointer-events: none; }
/* Esito dell'invio: a invio riuscito i campi spariscono e resta il messaggio */
.form-esito { font-size: 0.95rem; line-height: 1.6; color: var(--grigio); }
.form-esito strong { display: block; font-size: var(--fs-h3); font-weight: var(--peso-medio); color: var(--bianco); margin-bottom: 0.5rem; }
.form-esito a { color: var(--giallo); }
.form-esito.fallito { color: var(--bianco); border-left: 2px solid var(--giallo); padding-left: 1rem; }
.form.inviato .campo, .form.inviato .campo-consenso, .form.inviato .btn { display: none; }
.form.inviato { padding-block: clamp(2rem, 4vw, 3rem); }

/* ---------- 14 Social ---------- */
.social-riga { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social-link {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline-forte);
  display: grid;
  place-items: center;
  color: var(--grigio);
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.social-link .icona { width: 18px; height: 18px; }
.social-link:hover { color: var(--nero); background: var(--giallo); border-color: var(--giallo); }

/* ---------- 15 Footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding: 3.5rem 0 2.2rem; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.6rem; }
.footer img { height: 24px; width: auto; opacity: 0.9; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; }
.footer nav a { font-size: var(--fs-small); color: var(--grigio); transition: color 0.4s ease; }
.footer nav a:hover { color: var(--bianco); }
.footer .social-riga { gap: 0.5rem; }
.footer .social-link { width: 38px; height: 38px; }
.footer .social-link .icona { width: 16px; height: 16px; }
.footer .legal {
  width: 100%;
  margin-top: 1.2rem;
  color: var(--grigio-scuro);
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
}
.footer .legal a { color: var(--grigio); transition: color 0.4s ease; }
.footer .legal a:hover { color: var(--bianco); }

/* ---------- 16 Pagine interne ---------- */
.pagina-testata { padding-top: clamp(9rem, 20vh, 13rem); }

/* Prosa: studio e privacy. Un solo blocco di testo, una sola regola. */
.prosa { max-width: 66ch; margin-top: clamp(2.5rem, 6vh, 4rem); }
.prosa p, .prosa li { color: var(--grigio); font-size: 1.02rem; }
.prosa p + p { margin-top: 1.3rem; }
.prosa strong { color: var(--bianco); }
.prosa h3 { margin-top: 2.8rem; font-size: var(--fs-h3); font-weight: var(--peso-medio); letter-spacing: -0.01em; }
.prosa h3 + p, .prosa h3 + ul { margin-top: 0.8rem; }
.prosa ul { margin-top: 1rem; padding-left: 1.2rem; list-style: disc; }
.prosa li + li { margin-top: 0.5rem; }
.prosa ul + p { margin-top: 1.3rem; }
.prosa li::marker { color: var(--giallo); }
.prosa a:not(.btn) { color: var(--bianco); border-bottom: 1px solid var(--hairline-forte); transition: color 0.4s ease, border-color 0.4s ease; }
.prosa a:not(.btn):hover { color: var(--giallo); border-color: var(--giallo); }
.prosa .btn { margin-top: 3rem; }
.prosa .aggiornato { margin-top: 3rem; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grigio-scuro); }
.citazione {
  margin: clamp(3rem, 8vh, 5rem) 0;
  padding-left: 2.2rem;
  border-left: 2px solid var(--giallo);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: var(--peso-leggero);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 30ch;
  color: var(--bianco);
}

/* Team (studio): tre persone su hairline, nessuna foto finché non ci sono.
   La sezione è più corta della standard: viene subito dopo la prosa. */
.team-sezione { padding-top: 0; }
.team { margin-top: clamp(3rem, 7vh, 5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.persona { padding: 1.8rem 0; border-top: 1px solid var(--hairline); }
.persona img {
  display: block;
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-s);
  margin-bottom: 1.4rem;
}
.team-cta { margin-top: clamp(2.5rem, 6vh, 4rem); }
.persona .ruolo { font-size: var(--fs-micro); font-weight: var(--peso-medio); letter-spacing: 0.2em; text-transform: uppercase; color: var(--giallo); }
.persona h3 { margin-top: 0.7rem; font-size: var(--fs-h3); font-weight: var(--peso-medio); letter-spacing: -0.01em; }
.persona p:not(.ruolo) { margin-top: 0.5rem; color: var(--grigio); font-size: 0.93rem; line-height: 1.6; }

/* Titoli di coda: ruolo a destra, nome a sinistra, come a fine film. */
.coda { margin-top: clamp(3.5rem, 8vh, 6rem); padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--hairline); text-align: center; }
.coda-lista { margin-top: 2.2rem; max-width: 40rem; margin-inline: auto; display: grid; gap: 1rem 2rem; text-align: initial; }
.coda-lista > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(1.2rem, 3vw, 2.4rem); align-items: baseline; }
.coda-lista dt {
  text-align: right;
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}
.coda-lista dd { margin: 0; color: var(--bianco); font-size: 0.98rem; line-height: 1.5; }
.coda-lista dd span { display: block; }
.coda-fine { margin-top: 2.6rem; text-align: center; font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--grigio-scuro); }
@media (max-width: 600px) {
  .coda-lista > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .coda-lista dt { text-align: left; }
}

/* NFC: touchpoint da QR. Nessun header, nessun playhead. Una colonna,
   tre azioni grandi, i social, il vcf. Tutto sopra la piega. */
.pagina-nfc main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vh, 5rem) 0;
}
.nfc {
  width: min(420px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  text-align: center;
}
.nfc .logo-nfc img { height: 34px; width: auto; margin-inline: auto; }
.nfc h1 {
  margin-top: 2.4rem;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  font-weight: var(--peso-leggero);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.nfc h1 strong { font-weight: var(--peso-forte); color: var(--giallo); }
.nfc .sub { margin-top: 0.8rem; color: var(--grigio); font-size: var(--fs-lead); }
.nfc-azioni { margin-top: 2.4rem; display: grid; gap: 0.7rem; }
.btn-grande {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--hairline-forte);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  font-size: 0.95rem;
  font-weight: var(--peso-medio);
  letter-spacing: 0.02em;
  color: var(--bianco);
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}
.btn-grande .icona { width: 22px; height: 22px; color: var(--giallo); }
.btn-grande .testo { flex: 1; }
.btn-grande::after {
  content: "\2192";
  font-weight: var(--peso-leggero);
  color: var(--grigio-scuro);
  transition: transform 0.5s var(--ease), color 0.5s ease;
}
.btn-grande:hover { border-color: var(--giallo); background: rgba(242, 196, 61, 0.05); }
.btn-grande:hover::after { transform: translateX(4px); color: var(--giallo); }
.btn-grande.pieno { background: var(--giallo); border-color: var(--giallo); color: var(--nero); }
.btn-grande.pieno .icona, .btn-grande.pieno::after { color: var(--nero); }
.btn-grande.pieno:hover { background: var(--bianco); border-color: var(--bianco); }
.nfc .social-riga { margin-top: 2rem; justify-content: center; }
.nfc-salva { margin-top: 2rem; }
.nfc-nota {
  margin-top: 2.4rem;
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
}
.nfc-nota a { color: var(--grigio); transition: color 0.4s ease; }
.nfc-nota a:hover { color: var(--giallo); }

/* 404: frame mancante */
.pagina-404 main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 7rem 0 4rem;
}
.errore { text-align: center; width: var(--wrap); margin-inline: auto; }
.errore .codice {
  font-size: clamp(6rem, 22vw, 14rem);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
}
.errore .tc {
  margin-top: 0.6rem;
  max-width: none;
  font-size: var(--fs-small);
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grigio-scuro);
  font-variant-numeric: tabular-nums;
}
.errore .tc span { color: var(--giallo); }
.errore h1 { margin-top: 1.6rem; font-size: var(--fs-h2); font-weight: var(--peso-leggero); letter-spacing: -0.02em; line-height: 1.12; }
.errore h1 strong { font-weight: var(--peso-forte); }
.errore p { margin-top: 1rem; color: var(--grigio); max-width: 40ch; margin-inline: auto; }
.errore .azioni { margin-top: 2.4rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- 17 Reveal e animazioni di stato ----------
   Il reveal resta solo dove serve un'entrata (titoli di sezione e card
   del portfolio al primo caricamento). Niente blur, corsa corta. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--ritardo, 0s);
}
.reveal.visibile { opacity: 1; transform: none; }

/* Cambio filtro: le card che restano rientrano con stagger */
@keyframes lavoro-entra {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.lavoro.entra {
  animation: lavoro-entra 0.6s var(--ease) both;
  animation-delay: var(--ritardo, 0s);
}

/* ---------- 18 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .reveal, .lavoro.entra,
  .hero .eyebrow, .hero h1, .hero p.sub, .hero .hero-cta-row, .hero .showreel {
    opacity: 1; transform: none; filter: none; animation: none;
  }
  .grana { animation: none; }
  .lavoro .fotogramma { display: none; }
}