/* ════════════════════════════════════════════════════════════
   YKKI — CESARE BERISHA · foglio di stile del sito
   Stile ispirato ad apple.com: un progetto per schermata, molta sottrazione.
   Colore firma: blu #103DD3. Font: SF (sui dispositivi Apple) con
   Inter Tight auto-ospitato come alternativa.
   Tutte le animazioni usano var(--morbida).
   ════════════════════════════════════════════════════════════ */
@font-face{font-family:'Inter Tight';src:url(../fonts/inter-tight.woff2) format('woff2');font-weight:100 900;font-display:swap}
@view-transition{navigation:auto} /* transizione nativa tra home e pagine progetto */

:root{
  --bg:#fff; --bg-2:#f5f5f7; --ink:#1d1d1f; --ink-2:#6e6e73; --line:#d2d2d7;
  --dark:#000; --dark-2:#161617; --on-dark:#f5f5f7; --on-dark-2:#a1a1a6;
  --acc:#103DD3;          /* blu firma: pulsanti (testo bianco 8:1) */
  --acc-hover:#0C31AE;
  --acc-text:#103DD3;     /* testo blu su chiaro (7,3:1) */
  --acc-dark:#7590FF;     /* testo blu su nero (7,2:1) */
  --acc-grad:linear-gradient(135deg,#BDCAFF,#7590FF 45%,#3456F0);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter Tight","Helvetica Neue",Arial,sans-serif;
  --morbida:cubic-bezier(.25,.6,.3,1);
  --r-tile:28px; --r-media:22px;
  --w:1040px; --pad:clamp(20px,4vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.gnav :focus-visible{outline-color:var(--acc-dark)}
::selection{background:var(--acc);color:#fff}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--pad)}

/* ── doppia lingua: ogni testo esiste in lang="it" e lang="en" ── */
[data-lang="it"] [lang="en"]{display:none!important}
[data-lang="en"] [lang="it"]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--acc);color:#fff;padding:10px 16px;border-radius:99px;font-size:14px}
.skip:focus{top:8px}

/* ── navigazione globale ───────────────────────────────────── */
.gnav{position:sticky;top:0;z-index:100;height:48px;background:rgba(22,22,23,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);color:#e8e8ed}
.gnav.static{position:relative}
.gnav-in{max-width:1024px;margin-inline:auto;padding-inline:22px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.gnav-brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#f5f5f7;flex-shrink:0}
.gnav-brand img{height:16px;width:auto}
.gnav-links{display:flex;gap:clamp(18px,3vw,36px);font-size:12px;letter-spacing:-.01em}
.gnav-links a{opacity:.82;transition:opacity .3s var(--morbida)}
.gnav-links a:hover{opacity:1}
.gnav-right{display:flex;align-items:center;gap:14px;font-size:12px}
.lang-btn{font:inherit;font-size:12px;background:none;border:0;color:#e8e8ed;opacity:.82;cursor:pointer;padding:6px 2px}
.lang-btn:hover{opacity:1}
.gnav-menu{display:none}
.gnav-menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:32px;height:32px}
.gnav-menu summary::-webkit-details-marker{display:none}
.gnav-menu[open] .gnav-sheet{opacity:1;transform:none;pointer-events:auto}
.gnav-sheet{position:fixed;inset:48px 0 auto 0;background:rgba(22,22,23,.97);backdrop-filter:blur(20px);padding:16px 30px 40px;display:grid;gap:4px;
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s var(--morbida),transform .35s var(--morbida)}
.gnav-sheet a{font-size:28px;font-weight:600;letter-spacing:-.02em;padding:6px 0;color:#f5f5f7}
@media(max-width:760px){.gnav-links{display:none}.gnav-menu{display:block}}

/* ── pulsanti a pillola e link ─────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px}
.pill{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:17px;line-height:1;letter-spacing:-.022em;padding:12px 22px;border-radius:980px;border:1px solid transparent;cursor:pointer;
  transition:background .3s var(--morbida),color .3s var(--morbida),border-color .3s var(--morbida),transform .3s var(--morbida)}
.pill[hidden]{display:none}
.pill:active{transform:scale(.97)}
.pill svg{width:17px;height:17px;flex:none}
.pill-1{background:var(--acc);color:#fff}
.pill-1:hover{background:var(--acc-hover)}
.pill-2{border-color:currentColor;color:var(--acc-text)}
.pill-2:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.dark .pill-2{color:var(--acc-dark)}
.pill-s{font-size:12px;padding:6px 12px}
.link{color:var(--acc-text);font-size:17px}
.link:hover{text-decoration:underline}
.dark .link{color:var(--acc-dark)}
.link::after{content:" ›"}

/* ── riquadri (tile) ──────────────────────────────────────── */
.tile{position:relative;text-align:center;overflow:hidden;padding-top:clamp(48px,6vw,64px);scroll-margin-top:48px}
.tile.dark{background:var(--dark);color:var(--on-dark)}
.tile.grey{background:var(--bg-2)}
.tile + .tile{margin-top:12px}
.tile.pad-b{padding-bottom:clamp(40px,5vw,64px)}
.tile-head{padding-inline:var(--pad)}
.eyebrow{font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--acc-text);margin-bottom:4px;letter-spacing:.01em}
.dark .eyebrow{color:var(--acc-dark)}
.t-xl{font-size:clamp(40px,6.2vw,64px);line-height:1.06;font-weight:600;letter-spacing:-.015em}
.t-l{font-size:clamp(34px,4.6vw,48px);line-height:1.08;font-weight:600;letter-spacing:-.003em}
.t-m{font-size:clamp(28px,3.4vw,40px);line-height:1.1;font-weight:600;letter-spacing:0}
.sub{font-size:clamp(19px,2.2vw,28px);line-height:1.15;letter-spacing:.007em;margin-top:6px}
.sub-s{font-size:clamp(17px,1.8vw,21px);line-height:1.38;color:var(--ink-2);max-width:40ch;margin:10px auto 0}
.dark .sub-s,.dark .sub{color:var(--on-dark-2)}
.tile .pills{margin-top:20px}
.tile-media{margin:clamp(32px,4vw,48px) auto 0;padding-inline:var(--pad);max-width:1200px}
.tile-media.bleed{padding-inline:12px;max-width:none} /* riquadri progetto: quasi a tutta larghezza, stesso margine della griglia */
.ai-badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:0;color:#fff;background:var(--acc);padding:4px 10px;border-radius:99px;margin-bottom:10px}

/* griglia di riquadri 2×2 */
.grid{display:grid;gap:12px;margin-top:12px;padding-inline:12px}
@media(min-width:834px){.grid{grid-template-columns:1fr 1fr}}
.grid .tile{margin:0;padding-bottom:clamp(36px,4vw,48px);min-height:580px;display:flex;flex-direction:column}
.grid .tile-media{margin-top:auto;padding-top:28px;width:100%}
.duo,.trio{display:flex;gap:12px;justify-content:center;align-items:flex-end}
.trio > *{width:30%}.trio > :nth-child(2){margin-bottom:28px}
.duo > *{width:44%}.duo > :nth-child(2){margin-bottom:36px}
.grid .tile.full{grid-column:1/-1} /* riquadro a tutta larghezza nella griglia dei servizi (Fotografia) */
.quattro{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;max-width:1040px;margin-inline:auto}
.quattro > :nth-child(even){margin-bottom:32px}
.scene:has(> .m, > video, > iframe) .scene-tag.keep{display:block}
/* GALLERIA VERTICALI (riquadro "Verticali" in home): schede 9:16 a scorrimento */
.vgal{padding-top:36px}
.hl-card.vcard{flex:0 0 clamp(230px,24vw,300px);border-radius:0;overflow:visible;scroll-snap-align:start}
.hl-card.vcard::before{display:none}
.hl-card.vcard .scene{border-radius:var(--r-media)}
.vcap{margin:12px 2px 0;font-size:14px;line-height:1.35;color:rgba(245,245,247,.72)}
.vcap b{display:block;color:#f5f5f7;font-weight:600;margin-bottom:2px}
.dark .hl-nav button{background:#2c2c2e;color:#f5f5f7}
.dark .hl-nav button:hover{background:#3a3a3c}
.full .sb-row{max-width:900px;margin-inline:auto}
/* VERTICALI a slider: un video alla volta, il successivo in piccolo di fianco, scorre in cerchio */
.vstage{padding-top:40px;--vw:clamp(240px,26vw,330px);--vg:28px;--vs:.58}
.vtrack{position:relative;width:calc(var(--vw) * (1 + var(--vs)) + var(--vg));height:calc(var(--vw) * 16 / 9 + 70px);margin-inline:auto}
.vslide{position:absolute;left:0;top:0;width:var(--vw);transform-origin:left 40%;transition:transform .8s var(--morbida),opacity .8s var(--morbida)}
.vslide .scene{border-radius:var(--r-media)}
.vslide .vcap{transition:opacity .5s var(--morbida)}
.vslide.is-on{z-index:1;opacity:1;transform:none}
.vslide.is-next{opacity:.6;cursor:pointer;transform:translateX(calc(var(--vw) + var(--vg))) scale(var(--vs))}
.vslide.is-next:hover{opacity:.85}
.vslide.is-next .play{display:none}
.vslide.is-next .vcap,.vslide.is-prev .vcap,.vslide.is-off .vcap{opacity:0}
.vslide.is-prev{opacity:0;pointer-events:none;transform:translateX(-48px) scale(.96)}
.vslide.is-off{opacity:0;pointer-events:none;transform:translateX(calc(var(--vw) + var(--vg) + 70px)) scale(var(--vs))}
.vnav{display:flex;align-items:center;justify-content:center;gap:16px}
.vnav button{width:44px;height:44px;border-radius:50%;border:0;background:#2c2c2e;color:#f5f5f7;cursor:pointer;display:grid;place-items:center;transition:background .3s var(--morbida)}
.vnav button:hover{background:#3a3a3c}
.vcount{font-size:14px;color:rgba(245,245,247,.6);min-width:3.5em;text-align:center;font-variant-numeric:tabular-nums}
/* senza JavaScript: semplice fila scorrevole */
.vstage:not(.vpronto) .vtrack{display:flex;gap:20px;overflow-x:auto;width:auto;height:auto}
.vstage:not(.vpronto) .vslide{position:static;flex:0 0 var(--vw)}
.vstage:not(.vpronto) .vnav{display:none}
@media(max-width:833px){.vstage{--vw:56vw;--vg:12px;--vs:.46}}
@media(prefers-reduced-motion:reduce){.vslide,.vslide .vcap{transition:none}}
/* PAGINA FOTOGRAFIA: griglia a colonne e ingrandimento al clic */
.fsec-k{margin-bottom:10px}
.fgrid{columns:3 260px;column-gap:14px}
.fitem{display:block;margin:0 0 14px;break-inside:avoid;border-radius:16px;overflow:hidden;background:#111;cursor:zoom-in}
.fitem img{display:block;width:100%;height:auto;transition:transform .9s var(--morbida)}
.fitem:hover img{transform:scale(1.03)}
@media(max-width:600px){.fgrid{columns:2;column-gap:10px}.fitem{margin-bottom:10px;border-radius:12px}}
/* con JavaScript: righe ordinate alla stessa altezza (posizioni calcolate da js/sito.js) */
.fgrid.righe{columns:auto;position:relative}
.fgrid.righe .fitem{position:absolute;margin:0}
.fgrid.righe .fitem img{width:100%;height:100%;object-fit:cover}
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:64px 16px}
.lb.on{display:flex}
.lb img{max-width:min(100%,1600px);max-height:100%;width:auto;height:auto;border-radius:10px;object-fit:contain}
.lb-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:14px;color:rgba(245,245,247,.75)}
.lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s var(--morbida)}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb-x{top:14px;right:14px}.lb-p{left:14px;top:50%;transform:translateY(-50%)}.lb-n{right:14px;top:50%;transform:translateY(-50%)}
html.lb-aperto{overflow:hidden}
@media(max-width:600px){.lb-p,.lb-n{top:auto;bottom:10px;transform:none}}
/* ALTRI PROGETTI VIDEO in home: schede 16:9 che portano alle mini-pagine */
.tile.altro{background:var(--bg);padding-bottom:clamp(48px,6vw,80px)}
.acards{display:flex;flex-wrap:wrap;justify-content:center;gap:36px 20px;text-align:left;max-width:1120px}
.acard{display:block;flex:0 1 calc((100% - 40px)/3);min-width:0;color:inherit;text-decoration:none}
.acard .scene{border-radius:var(--r-media);margin-bottom:14px}
.acard-yt{position:absolute;right:14px;bottom:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);display:grid;place-items:center;transition:transform .4s var(--morbida),background .4s var(--morbida)}
.acard-yt svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.acard:hover .acard-yt{transform:scale(1.08);background:rgba(255,255,255,.32)}
.acard .scene .m{transition:transform .9s var(--morbida)}
.acard:hover .scene .m{transform:scale(1.03)}
.acat{font-size:13px;font-weight:600;color:var(--acc-text);margin-bottom:4px}
.acard h3{font-size:clamp(20px,2vw,24px);line-height:1.15;font-weight:600;margin-bottom:6px}
.adesc{font-size:15px;line-height:1.4;color:var(--ink-2)}
/* AI: regole numerate, etichette dei video, galleria */
.step > .link{align-self:flex-start;margin-top:14px}
.ai-usi .link{display:inline-block;margin-top:10px}
/* pagina AI: slider "Verticali" con formati misti. Stessa altezza dei media (--mh), larghezza secondo il formato;
   --won/--wnx (larghezza del video attivo e del successivo) e --th (altezza) li calcola js/sito.js */
.vstage.misto{--mh:clamp(260px,32vw,440px);--vg:28px;--vs:.42;padding-top:8px}
.vstage.misto .vslide{transform-origin:left 30%}
.vstage.misto .vslide.h{width:min(calc(var(--mh) * 16 / 9),78vw)}
.vstage.misto .vslide.v{width:min(calc(var(--mh) * 9 / 16),78vw)}
.vstage.misto.vpronto .vtrack{width:calc(var(--won,600px) + var(--vg) + var(--wnx,300px) * var(--vs));height:var(--th,520px);transition:width .8s var(--morbida),height .8s var(--morbida)}
.vstage.misto .vslide.is-next{transform:translateX(calc(var(--won,600px) + var(--vg))) scale(var(--vs))}
.vstage.misto .vslide.is-off{transform:translateX(calc(var(--won,600px) + var(--vg) + 70px)) scale(var(--vs))}
.vstage.misto .vcap{text-align:left;max-width:60ch}
.vstage.misto .vdesc{display:block;margin-top:4px}
.vstage.misto:not(.vpronto) .vslide{flex-basis:auto}
@media(max-width:833px){.vstage.misto{--mh:100vw;--vg:12px;--vs:.4}}
}
.grid .tile.full:has(.bleed){padding-bottom:12px;min-height:0} /* riquadro AI come i progetti: il loop arriva quasi al bordo */
.ai-usi{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);text-align:left}
.ai-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;font-size:15px;font-weight:600;letter-spacing:0}
.ai-usi h3{font-size:clamp(21px,2.2vw,28px);line-height:1.15;font-weight:600;margin:14px 0 8px}
.ai-usi p{font-size:17px;line-height:1.47;color:var(--ink-2)}
.ai-usi b{color:var(--ink);font-weight:600}
.ai-tag{display:inline-block;font-size:12px;font-weight:600;line-height:1;letter-spacing:0;padding:7px 11px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ai-tag.gen{background:var(--acc)}
.scene > .ai-tag{position:absolute;left:12px;top:12px;z-index:3;white-space:nowrap}
@media(max-width:833px){.ai-usi{grid-template-columns:1fr;gap:28px}}
.scene:has(> iframe) > .ai-tag{display:none}
.dark .acat{color:var(--acc-dark)}
.dark .adesc{color:var(--on-dark-2)}
.dark .ai-usi p{color:var(--on-dark-2)}
#episodi .acards{margin-inline:auto;margin-bottom:clamp(28px,4vw,40px)}
/* telefono e tablet piccolo: i riquadri scorrono di lato col dito */
@media(max-width:833px){
  .acards{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;gap:14px;max-width:none;padding-bottom:4px;scroll-padding-inline:var(--pad)}
  .acards::-webkit-scrollbar{display:none}
  .wrap .acards{margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad)}
  #episodi .acards{margin-inline:calc(-1 * var(--pad))}
  .acard{flex:0 0 78%;scroll-snap-align:start}
}
.adesc-l{max-width:62ch;margin-top:clamp(28px,4vw,44px);font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2)}
/* FOTOGRAFIA in home: anteprime che scorrono di lato in un loop continuo */
.tile-media.fstrip{max-width:none;padding-inline:0;overflow:hidden;padding-top:40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fstrip-track{display:flex;gap:16px;width:max-content;align-items:flex-start;will-change:transform;touch-action:pan-y} /* il movimento lo fa js/sito.js: scorre da solo e si trascina col dito o col mouse */
.tile-media.fstrip{cursor:grab;user-select:none;-webkit-user-select:none}
.tile-media.fstrip.trascina{cursor:grabbing}
.fcard img{-webkit-user-drag:none;pointer-events:none}
.fcard{flex:0 0 auto;display:block;width:clamp(150px,17vw,240px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#111}
.fcard:nth-child(even){margin-top:34px}
.fcard img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--morbida)}
.fcard:hover img{transform:scale(1.04)}
.grid .tile.full:has(.fstrip){min-height:0} /* niente spazio vuoto sopra la striscia */
/* VERTICALI: fotogrammi sfumati ai lati, solo decorativi */
.vstage{position:relative}
.vtrack,.vnav{position:relative;z-index:1}
.vdeco{display:none}
@media(min-width:1100px){
  .vdeco{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
  .vdeco img{position:absolute;width:clamp(110px,10.5vw,160px);height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:18px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 100%)}
  .vdeco .d1{left:3%;top:4%;opacity:.15}
  .vdeco .d2{left:14.5%;top:26%;opacity:.3}
  .vdeco .d3{right:13%;top:10%;opacity:.3}
  .vdeco .d4{right:2.5%;top:32%;opacity:.15}
  /* pagina AI: i video orizzontali occupano più spazio, la decorazione sta più verso i bordi */
  .misto .vdeco .d1{left:1.5%;top:2%}.misto .vdeco .d2{left:8.5%;top:30%}
  .misto .vdeco .d3{left:auto;right:8.5%;top:6%}.misto .vdeco .d4{right:1.5%;top:34%}
}
@media(max-width:833px){.hl-card.vcard{flex-basis:68vw}} /* etichetta che resta visibile anche sopra i media veri (es. dichiarazione AI) */
@media(max-width:833px){.quattro{grid-template-columns:1fr 1fr}.quattro > :nth-child(even){margin-bottom:24px}}
.sb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sb-row > .scene{border-radius:10px}
.sb-row > .wide{grid-column:1/-1;margin-top:6px;border-radius:var(--r-media)}

/* ── MEDIA: segnaposto (scena a gradiente) o contenuto reale ──
   Segnaposto: <div class="scene r169 s1">. Contenuto reale: un <img class="m">
   dentro la scena, oppure data-loop="ID-BUNNY" per un video in loop. */
.scene{position:relative;overflow:hidden;border-radius:var(--r-media);background:#0b0d14;isolation:isolate}
.scene.r169{aspect-ratio:16/9}.scene.r239{aspect-ratio:2.39/1}.scene.r916{aspect-ratio:9/16}
.scene.r45{aspect-ratio:4/5}.scene.r32{aspect-ratio:3/2}.scene.r11{aspect-ratio:1/1}.scene.r1610{aspect-ratio:16/10}
.scene::before{content:"";position:absolute;inset:-20%;z-index:-1;background:var(--g);animation:deriva 22s var(--morbida) infinite alternate}
.scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes deriva{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-3%,2%)}100%{transform:scale(1.06) translate(3%,-2%)}}
.scene > .m,.scene > video,.scene > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;z-index:0}
.scene:has(> .m,> video,> iframe)::before,.scene:has(> .m,> video,> iframe)::after{display:none}
.scene:has(> .m,> video,> iframe) .scene-tag{display:none}
.scene-tag{position:absolute;left:14px;bottom:12px;z-index:2;font-size:12px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.85);background:rgba(0,0,0,.32);backdrop-filter:blur(8px);padding:5px 10px;border-radius:99px}
.play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;color:#fff;
  background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;
  transition:transform .4s var(--morbida),background .4s var(--morbida)}
button.play{cursor:pointer}
/* LENTE della home a tutta larghezza: il video occupa tutta la pagina, così il fascio di luce originale
   arriva da solo da un bordo all'altro (prima era prolungato in CSS e si vedeva lo stacco).
   Niente margini né angoli. Il video resta sempre intero (16:9): l'anello della lente arriva quasi al bordo alto,
   quindi qualsiasi taglio in altezza lo mozzerebbe. */
#showreel{position:relative;container-type:inline-size;max-width:none;padding-inline:0}
#showreel .scene{border-radius:0}
/* nel video il punto di luce sta al 48,28% della larghezza ed è il centro dell'avvicinamento della lente.
   Ingrandendo del 3,56% dall'angolo in alto a sinistra il punto di luce cade al centro della pagina,
   allineato al centro dei titoli centrati (es. "NACS."): così la lente cresce senza scivolare di lato.
   Il bordo sinistro e quello alto restano dove sono (l'anello non si taglia), l'eccesso esce a destra e in basso. */
#showreel .scene > .m{transform-origin:46.98% 44.72%;transform:translate(1.672%,1.592%) scale(1.0356) rotate(var(--rot,0deg))}
/* stessa posizione di "scale(1.0356) dall'angolo in alto a sinistra", ma col perno al centro dell'anello della lente
   (46,98% · 44,72% del video): durante l'ingresso la lente ruota su se stessa senza spostarsi (--rot, da js/sito.js) */
/* INTRO: copertina nera mentre il video parte; il flare esterno nasce quando nel video si accende la luce. Il testo c'è da subito. */
#showreel .scene:has(> .segnaposto){background:#000}
#showreel .scene:has(> .segnaposto)::before{display:none}
#showreel .scene > video.intro{z-index:1}
/* Messa a fuoco e avvicinamento contenuto sono già dentro il video (fotogramma per fotogramma), non in CSS:
   animare scala e sfocatura sopra un video a 24 fps lo rendeva scattoso. */
/* immagine che si dissolve nel nero ai lati, senza riquadro visibile */
.scene.sfuma{background:#000}
.scene.sfuma > .m{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* sulla copertina temporanea il pulsante play non attivo non copre la luce del flare */
.scene:has(> .segnaposto) button.play[aria-disabled="true"]{display:none}
button.play[aria-disabled="true"]{cursor:default}
.play svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.scene:hover .play,a:hover .play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.28)}
/* palette fredda dei segnaposto: cobalto, ora blu, neon viola, acciaio, studio, ciano, notte, ghiaccio */
.s1{--g:radial-gradient(60% 70% at 32% 42%,#8fb0ff 0,#3d66f0 22%,#0f2b8f 52%,#020718 82%)}
.s2{--g:radial-gradient(40% 32% at 72% 32%,#bcd6ff 0,transparent 60%),radial-gradient(70% 80% at 30% 70%,#3d7fb5 0,#163a5e 45%,#07121f 85%)}
.s3{--g:radial-gradient(45% 55% at 25% 40%,#7b5cff 0,transparent 65%),radial-gradient(55% 60% at 75% 60%,#2f6bff 0,transparent 70%),linear-gradient(#070818,#070818)}
.s4{--g:radial-gradient(70% 60% at 60% 30%,#eef3fb 0,#a7b4c9 30%,#3c4658 62%,#0d1016 92%)}
.s5{--g:radial-gradient(55% 60% at 60% 35%,#f2f2f4 0,#b9b9bf 35%,#55555c 70%,#1d1d20 100%)}
.s6{--g:radial-gradient(60% 50% at 40% 30%,#c4ecf2 0,#3aa3b8 35%,#0f4a62 70%,#061b26 100%)}
.s7{--g:linear-gradient(160deg,#03050c 0,#142a66 50%,#3d6bff 100%)}
.s8{--g:radial-gradient(50% 60% at 50% 45%,#eef4ff 0,#9ab8ff 30%,#2c4fd0 62%,#0a1440 100%)}

/* il media cresce entrando nello schermo (scroll-driven, nativo; senza supporto resta fermo) */
@supports (animation-timeline:view()){
  .grow{animation:cresci linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes cresci{from{transform:scale(.86);border-radius:40px;filter:brightness(.7)}to{transform:none;border-radius:var(--r-end,var(--r-media));filter:none}}
  .rise{animation:sali linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  @keyframes sali{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}

/* ── affermazione: le parole si accendono scorrendo ────────── */
.statement{padding-block:clamp(120px,16vw,200px)}
.statement p{font-size:clamp(36px,6vw,72px);line-height:1.08;font-weight:600;letter-spacing:-.02em;max-width:18ch}
.statement .w{opacity:.16;transition:opacity .35s var(--morbida)}
.statement .w.on{opacity:1}
.statement .acc{color:var(--acc-text)}
[data-hero] h1 .dim{display:block;text-wrap:balance;color:var(--on-dark-2)} /* seconda riga del titolo in home */
[data-hero] .sub{max-width:52ch;margin-inline:auto}
.fsec-d{max-width:62ch;margin:calc(-1 * clamp(12px,2vw,24px)) 0 clamp(24px,3vw,36px);font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink-2)} /* riga di racconto sotto il titolo di un gruppo foto */

/* ── racconto allo scroll: media fermo, testo che scorre ────── */
.story{background:var(--dark);color:var(--on-dark);padding-block:clamp(80px,10vw,140px);scroll-margin-top:48px}
.story-head{text-align:center;margin-bottom:clamp(40px,6vw,80px)}
.story-head .dim{color:var(--on-dark-2)}
.story-grid{display:grid;gap:40px;max-width:1200px;margin-inline:auto;padding-inline:var(--pad)}
@media(min-width:900px){.story-grid{grid-template-columns:1.25fr 1fr;gap:64px}}
.story-media{position:sticky;top:76px;height:min(62vh,560px);align-self:start;z-index:1}
.story-media .scene{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .8s var(--morbida),transform 1.2s var(--morbida)}
.story-media .scene.on{opacity:1;transform:none}
/* passo 2 di "Come lavoro": tavole dello storyboard intere (non ritagliate), in dissolvenza una dopo l'altra (5 × 3 s) */
.story-media .sb-tavole{background:#f6efee}
.sb-tavole > .m{object-fit:contain;opacity:0;animation:sbTavole 15s infinite}
.sb-tavole > .m:nth-of-type(2){animation-delay:3s}.sb-tavole > .m:nth-of-type(3){animation-delay:6s}
.sb-tavole > .m:nth-of-type(4){animation-delay:9s}.sb-tavole > .m:nth-of-type(5){animation-delay:12s}
.sb-tavole > .m:first-of-type{opacity:1}
@keyframes sbTavole{0%{opacity:0}4%,20%{opacity:1}24%,100%{opacity:0}}
/* variante a 4 tavole (passo 1, concept): 4 × 3 s */
.sb-tavole.sb-4 > .m{animation-name:sbTavole4;animation-duration:12s}
@keyframes sbTavole4{0%{opacity:0}5%,25%{opacity:1}30%,100%{opacity:0}}
/* variante a 2 tavole (passo 2, moodboard): 2 × 4 s */
.sb-tavole.sb-2 > .m{animation-name:sbTavole2;animation-duration:8s}
.sb-tavole.sb-2 > .m:nth-of-type(2){animation-delay:4s}
@keyframes sbTavole2{0%{opacity:0}8%,50%{opacity:1}58%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sb-tavole > .m{animation:none}.sb-tavole > .m:not(:first-of-type){display:none}}
.story-count{position:absolute;right:18px;top:14px;z-index:4;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .6s var(--morbida)}
.step.on{opacity:1}
.step-n{font-size:15px;font-weight:600;color:var(--acc-dark);margin-bottom:10px}
.step h3{font-size:clamp(32px,4vw,48px);line-height:1.08;font-weight:600;letter-spacing:-.01em}
.step p{font-size:clamp(17px,1.7vw,21px);line-height:1.4;color:var(--on-dark-2);margin-top:14px;max-width:34ch}
.step p b{color:var(--on-dark);font-weight:600}
@media(max-width:899px){.story-media{top:56px;height:auto;aspect-ratio:16/9}.step{min-height:62vh}}

/* ── sezioni semplici ─────────────────────────────────────── */
.section{padding-block:clamp(80px,10vw,140px);scroll-margin-top:48px}
.section.grey{background:var(--bg-2)}
.section.dark{background:var(--dark);color:var(--on-dark)}
.center{text-align:center}
.sec-t{font-size:clamp(32px,4.4vw,56px);line-height:1.07;font-weight:600;letter-spacing:-.005em;margin-bottom:clamp(28px,4vw,48px)}
.sec-t .dim{color:var(--ink-2)}
.dark .sec-t .dim{color:var(--on-dark-2)}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:36px 56px;margin:clamp(36px,5vw,56px) auto 0;list-style:none;max-width:1100px}
.logos + .logos{margin-top:36px}
.logos li{position:relative}
.logos img{display:block;transition:opacity .4s var(--morbida)}
.logos .lg-m{opacity:.72}
.logos .lg-c{position:absolute;inset:0;width:100%;height:100%;opacity:0} /* versione a colori, sopra quella monocolore */
.logos li:hover .lg-m{opacity:0}
.logos li:hover .lg-c{opacity:1}
/* schermi medi: loghi un po' più piccoli e più vicini, così ogni fila sta su una riga */
@media(max-width:1099px){.logos{gap:30px 34px}.logos + .logos{margin-top:30px}.logos .lg-m{zoom:.85}}
@media(max-width:759px){.logos{gap:26px 24px}.logos + .logos{margin-top:26px}.logos .lg-m{zoom:.7}}
@media(max-width:600px){.logos{gap:26px 30px}.logos .lg-m{zoom:.8}}

/* ── chi sono ─────────────────────────────────────────────── */
.about{display:grid;gap:clamp(32px,5vw,64px);align-items:center;max-width:1100px;margin-inline:auto;padding-inline:var(--pad)}
@media(min-width:860px){.about{grid-template-columns:1fr 1.1fr}}
.about img{border-radius:var(--r-media);width:100%}
.about p{font-size:clamp(17px,1.7vw,21px);color:var(--ink-2);margin-top:14px;max-width:38ch}
.about p b{color:var(--ink);font-weight:600}
.about .pills{justify-content:flex-start;margin-top:26px}

/* ── domande frequenti: details nativo, nessuno script ────── */
.faq-wrap{max-width:860px}
.faq{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.01em;transition:color .3s var(--morbida)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;
  transition:transform .4s var(--morbida)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--acc-text)}
.faq-a{padding:0 0 24px;color:var(--ink-2);font-size:17px;max-width:62ch}
.faq details[open] .faq-a{animation:faq-in .5s var(--morbida)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-a ul{padding-left:1.2em;display:grid;gap:4px}
.faq-more{margin-top:32px;color:var(--ink-2)}
.eyebrow.center{text-align:center}

/* ── contatti + form preventivo ───────────────────────────── */
.contact{padding-block:clamp(80px,10vw,140px)}
.contact .mail{display:inline-block;margin-top:22px;font-size:clamp(19px,2.2vw,24px);font-weight:600;color:var(--acc-text)}
.contact .mail:hover{text-decoration:underline}
.contact .soc{margin-top:10px;font-size:14px;color:var(--ink-2)}
.contact .soc a{color:var(--acc-text)}
.contact .soc a:hover{text-decoration:underline}
.reply-time{font-size:15px;color:var(--ink-2);margin-top:10px}
.quote{max-width:760px;margin:clamp(48px,6vw,72px) auto 0;background:var(--bg-2);border-radius:var(--r-tile);padding:clamp(26px,4vw,48px);text-align:left;scroll-margin-top:64px}
.quote h3{font-size:clamp(26px,3vw,32px);font-weight:600;letter-spacing:-.01em}
.quote-intro{color:var(--ink-2);margin:6px 0 26px}
.f-grid{display:grid;gap:16px}
@media(min-width:620px){.f-grid{grid-template-columns:1fr 1fr}.f-full{grid-column:1/-1}}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:17px;letter-spacing:-.01em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;transition:border-color .3s var(--morbida),box-shadow .3s var(--morbida)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(16,61,211,.15)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* trappola anti-spam: invisibile alle persone */
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.f-privacy{font-size:14px;color:var(--ink-2);max-width:44ch}
.f-privacy a{color:var(--acc-text);text-decoration:underline;text-underline-offset:2px}
.f-privacy a:hover{text-decoration:underline}
.f-status{margin-top:16px;font-size:16px;min-height:1px}
.f-status.ok{color:var(--acc-text);font-weight:600}
.f-status.err{color:#b3261e;font-weight:600}
/* esito senza JavaScript: preventivo.php rimanda a #inviato o #errore-invio */
.f-msg{display:none;scroll-margin-top:90px;margin-bottom:20px;padding:14px 18px;border-radius:14px;font-size:16px;font-weight:600}
.f-msg:target{display:block}
#inviato{background:#e8edfc;color:var(--acc-text)}
#errore-invio{background:#fdecea;color:#b3261e}

/* ── pulsante WhatsApp fisso (solo mobile, dopo l'hero) ───── */
.wa-fab{position:fixed;right:16px;bottom:16px;z-index:60;width:54px;height:54px;border-radius:50%;display:none;place-items:center;color:#fff;background:var(--acc);
  box-shadow:0 12px 30px -10px rgba(16,61,211,.6);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s var(--morbida),transform .4s var(--morbida)}
.wa-fab svg{width:24px;height:24px}
.wa-fab.on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:760px){.wa-fab:not([hidden]){display:grid}}

/* ── footer ───────────────────────────────────────────────── */
.foot{background:var(--bg-2);color:var(--ink-2);font-size:12px;line-height:1.5;letter-spacing:-.01em}
.foot-in{max-width:980px;margin-inline:auto;padding:20px 22px 32px}
.foot-top{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.foot a{color:#424245}
.foot a:hover{text-decoration:underline}
@media(max-width:760px){.foot-in{padding-bottom:90px}}

/* ═══ PAGINA PROGETTO ═════════════════════════════════════════ */
.lnav{position:sticky;top:0;z-index:90;background:rgba(251,251,253,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.12)}
.lnav-in{max-width:1024px;margin-inline:auto;padding-inline:22px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lnav-t{font-size:21px;font-weight:600;letter-spacing:.011em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnav-r{display:flex;align-items:center;gap:22px;font-size:12px;flex-shrink:0}
.lnav-r a:not(.pill){color:var(--ink-2)}
.lnav-r a:not(.pill):hover{color:var(--ink)}
@media(max-width:640px){.lnav-r a:not(.pill){display:none}}
.p-hero{background:var(--dark);color:var(--on-dark);text-align:center;padding-top:clamp(56px,8vw,96px);overflow:hidden;scroll-margin-top:52px}
.p-hero h1{font-size:clamp(52px,10vw,120px);line-height:1;font-weight:700;letter-spacing:-.03em}
.p-hero .tile-media{padding-bottom:clamp(56px,7vw,96px)}
/* carosello "in breve" */
.hl{position:relative;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px max(var(--pad),calc((100vw - var(--w))/2 + var(--pad))) 24px}
.hl::-webkit-scrollbar{display:none}
.hl-card{flex:0 0 min(78vw,720px);scroll-snap-align:center;position:relative;border-radius:var(--r-tile);overflow:hidden}
.hl-card .scene{border-radius:0}
.hl-cap{position:absolute;left:0;right:0;top:0;z-index:3;padding:28px 30px;font-size:clamp(19px,2vw,24px);line-height:1.2;font-weight:600;color:#fff;text-shadow:0 1px 20px rgba(0,0,0,.35);max-width:24ch}
.hl-card:has(.m)::before{content:"";position:absolute;inset:0 0 auto;height:62%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.28) 45%,transparent)} /* con le foto vere: velo in alto per leggere la didascalia */
.step p a{color:var(--acc-dark);text-decoration:underline;text-underline-offset:3px} /* link nei passi del processo (es. il video sul canale del cliente) */
.hl-nav{display:flex;justify-content:flex-end;gap:14px;max-width:var(--w);margin-inline:auto;padding-inline:var(--pad)}
.hl-nav button{width:44px;height:44px;border-radius:50%;border:0;background:#e8e8ed;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .3s var(--morbida),opacity .3s var(--morbida)}
.hl-nav button:hover{background:#dcdce1}
.hl-nav button[disabled]{opacity:.35;cursor:default}
/* scheda dati */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 32px;border-top:1px solid var(--line);padding-top:28px}
.facts dt{font-size:14px;font-weight:600;color:var(--ink-2)}
.facts dd{font-size:21px;font-weight:600;margin-top:4px;letter-spacing:.01em}
/* numeri */
.stats{display:grid;gap:40px;text-align:center}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat b{display:block;font-size:clamp(64px,9vw,112px);line-height:1;font-weight:700;letter-spacing:-.04em;background:var(--acc-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:8px;font-size:17px;color:var(--on-dark-2)}
/* galleria a mosaico */
.bento{display:grid;gap:14px;grid-template-columns:repeat(6,1fr)}
.bento > *{grid-column:span 6}
@media(min-width:760px){.bento .b-a{grid-column:span 4;grid-row:span 2}.bento .b-b,.bento .b-c{grid-column:span 2}.bento .b-d,.bento .b-e{grid-column:span 3}}
.bento .scene{height:100%;min-height:200px}
/* prossimo progetto */
.next{display:grid;gap:28px;align-items:center}
@media(min-width:760px){.next{grid-template-columns:1fr 1.4fr}}
.next .pills{justify-content:flex-start;margin-top:20px}

/* ── pagine di testo (privacy) ─────────────────────────────── */
.doc{max-width:760px;margin-inline:auto;padding:clamp(56px,8vw,96px) var(--pad)}
.doc h1{font-size:clamp(40px,6vw,64px);line-height:1.05;font-weight:600;letter-spacing:-.015em;margin-bottom:12px}
.doc h2{font-size:24px;font-weight:600;margin:44px 0 10px}
.doc p{color:var(--ink-2);max-width:66ch}
.doc .upd{font-size:14px;color:var(--ink-2);margin-bottom:8px}
.doc h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:30px 0 8px}
.doc p + p{margin-top:12px}
.doc ul{color:var(--ink-2);max-width:66ch;padding-left:1.2em;display:grid;gap:8px;margin-top:10px}
.doc ul + p{margin-top:14px}
.doc b{color:var(--ink);font-weight:600}
.doc a{color:var(--acc-text);text-decoration:underline;text-underline-offset:2px}
.doc .todo{color:var(--acc-text);border:2px dashed var(--acc);border-radius:14px;padding:14px 16px;margin-top:10px}

/* ── pagina 404 ───────────────────────────────────────────── */
.nf{min-height:calc(100vh - 48px);padding-bottom:clamp(48px,6vw,80px)}
.nf-more{margin-top:18px}

/* comparsa del testo */
.fade{opacity:0;transform:translateY(24px);transition:opacity .9s var(--morbida),transform .9s var(--morbida)}
.fade.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene::before{animation:none}
  .grow,.rise{animation:none!important}
  .fade{opacity:1;transform:none;transition:none}
  .statement .w{opacity:1}
  .story-media .scene,.step,.wa-fab,.gnav-sheet,.faq summary::after{transition:none}
  .faq details[open] .faq-a{animation:none}
}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}