:root{
  /* --dim: 4.5:1 su bianco e su --bg (accessibilità WCAG); era #888 che non passava.
     --cyt: cyan per TITOLI GRANDI su fondo chiaro (3:1); il --cy brillante resta per
     fondi scuri, bottoni e dettagli grafici. */
  --w:#fff;--bg:#f2f2f0;--ink:#080808;--dim:#6e6e6e;
  --cy:#00B8D4;--cyt:#009cb5;--cy2:rgba(0,184,212,.08);--ln:rgba(0,0,0,.08);--lnw:rgba(255,255,255,.07);
  --f:"Helvetica Neue",Helvetica,Arial,sans-serif;--ez:.77,0,.18,1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
/* NB: scroll-behavior:smooth globale è INCOMPATIBILE con GSAP ScrollTrigger
   (rompe pin/scrub/snap delle referenze home e dello scroll laterale servizi).
   Lo smooth sugli anchor è gestito via JS in nav.js solo dove serve.
   Qui manteniamo solo scroll-margin-top per non finire sotto al nav fisso. */
:target,[id]{scroll-margin-top:96px}

/* ── TRANSIZIONE TRA LE PAGINE (View Transitions API) ──
   Sui browser che la supportano, la navigazione tra pagine e' animata;
   sugli altri la navigazione resta normale (nessun effetto, nessun problema). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pt-old .3s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:pt-new .45s cubic-bezier(.16,1,.3,1) both}
@keyframes pt-old{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-16px)}}
@keyframes pt-new{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
body{background:var(--w);color:var(--ink);font-family:var(--f);overflow-x:hidden;-webkit-font-smoothing:antialiased}

body::after{content:"";position:fixed;inset:0;z-index:7000;pointer-events:none;opacity:.02;
  background: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='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* CURTAIN */
#ct,#ct2{position:fixed;inset:0;pointer-events:none;transform:scaleY(0);transform-origin:bottom}
#ct{z-index:9500;background:var(--cy)}
#ct2{z-index:9499;background:#000}
#spg{position:fixed;top:0;left:0;right:0;height:1.5px;background:var(--cy);z-index:9400;transform-origin:left;transform:scaleX(0);pointer-events:none}

/* CURSOR */
#cd{position:fixed;width:5px;height:5px;background:var(--cy);border-radius:50%;z-index:9300;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:multiply}
#cr{position:fixed;width:28px;height:28px;border:1px solid rgba(0,140,160,.3);border-radius:50%;z-index:9298;pointer-events:none;transform:translate(-50%,-50%);transition:width .4s cubic-bezier(var(--ez)),height .4s cubic-bezier(var(--ez)),opacity .3s,border-color .3s,background .3s}
#cr.big{width:66px;height:66px;opacity:.18;border-color:rgba(0,184,212,.5)}
#cr.inv{border-color:rgba(255,255,255,.25);width:36px;height:36px}
.td{position:fixed;border-radius:50%;pointer-events:none;background:var(--cy);transform:translate(-50%,-50%);will-change:left,top;mix-blend-mode:multiply}
@media(pointer:coarse){#cd,#cr{display:none}}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;align-items:center;justify-content:space-between;padding:32px 56px;transition:background .6s,border-color .6s,padding .4s,transform .45s cubic-bezier(var(--ez));border-bottom:.5px solid transparent}
#nav.hidden{transform:translateY(-100%)}
#nav.solid{background:rgba(255,255,255,.93);backdrop-filter:blur(20px);border-color:var(--ln);padding:18px 56px}
@media(max-width:768px){#nav,#nav.solid{padding:18px 22px}}
.logo-w{cursor:pointer;transition:opacity .3s}.logo-w:hover{opacity:.5}
.ham{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:700}
.ham span{display:block;width:22px;height:1px;background:var(--w);transform-origin:center;transition:transform .45s cubic-bezier(var(--ez)),opacity .3s,background .3s}
#nav.solid .ham span{background:var(--ink)}
.ham.open span{background:var(--w)!important}
.ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* MEGA */
/* NB: #mega e #mega.open sono definiti più sotto (reveal con clip-path).
   Qui c'era un vecchio #mega con translateY in conflitto: due animazioni
   d'apertura insieme → flicker sulla colonna servizi. Rimosso.
   Le .mega-* qui sotto sono legacy non più usate da nessun template. */
.mega-in{display:grid;grid-template-columns:1.1fr 1fr;width:100%;padding:120px 52px 60px;gap:80px;height:100%;align-items:center}
@media(max-width:860px){.mega-in{grid-template-columns:1fr;padding:90px 22px 48px;gap:0;align-items:flex-start;overflow-y:auto}}
.mega-item{border-bottom:.5px solid rgba(255,255,255,.05)}
.mega-lnk{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0;cursor:pointer;transition:padding-left .4s cubic-bezier(var(--ez))}
.mega-lnk:hover{padding-left:18px}
.mt{font-size:clamp(22px,4.8vw,56px);font-weight:200;letter-spacing:-.05em;color:rgba(255,255,255,.26);transition:color .3s}
.mega-lnk:hover .mt{color:#fff}
.ma{font-size:15px;color:rgba(255,255,255,.08);transition:transform .4s,color .3s}
.mega-lnk:hover .ma{transform:translate(6px,-5px);color:var(--cy)}
.mega-side{display:flex;flex-direction:column;gap:32px}
@media(max-width:860px){.mega-side{display:none}}
.mega-vis{flex:1;min-height:220px;max-height:300px;border-radius:12px;overflow:hidden;background:#0a0a0a;border:.5px solid rgba(255,255,255,.06)}
#mCV{width:100%;height:100%;display:block}
.mega-ci-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.16);font-weight:500;margin-bottom:8px}
.mega-ci a{font-size:13px;color:rgba(255,255,255,.26);text-decoration:none;transition:color .3s;cursor:pointer;padding:3px 0;display:block}
.mega-ci a:hover{color:#fff}

/* ── HERO ── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#040404}
/* width/height 100% obbligatori: il buffer interno è a risoluzione ridotta (perf)
   e senza stiramento CSS il canvas resterebbe piccolo in alto a sinistra */
#hGL{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
/* Slider homepage (foto/video dal backend); se nessuna slide attiva resta lo sfondo WebGL */
.hero-slides{position:absolute;inset:0;z-index:1;overflow:hidden;background:#040404}
.hslide{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 1.4s cubic-bezier(var(--ez));z-index:0}
.hslide.on{opacity:1}
video.hslide{width:100%;height:100%;object-fit:cover}
.hslide-embed iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero-slides::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(4,4,4,.7) 0%,rgba(4,4,4,.38) 32%,rgba(4,4,4,.55) 100%);pointer-events:none}
/* Velo scuro e pallini disattivabili per singola slide (classi impostate da home.js). */
.hero-slides.no-vela::after{display:none}
.hero.no-pallini>.ph-canvas{display:none}
/* Pulsante audio del video (il visitatore accende/spegne). Posizionato appena a
   SINISTRA del launcher del chatbot (fisso in basso a destra, 56px @ right/bottom:28)
   e allineato in verticale, così non si sovrappone né al chatbot né alla CTA. */
.h-audio{position:absolute;right:98px;bottom:34px;z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.35);transition:background .18s,border-color .18s,transform .18s}
.h-audio:hover{background:rgba(0,0,0,.6);transform:translateY(-1px)}
.h-audio .ic-on{display:none}
.h-audio.on{border-color:var(--cy)}
.h-audio.on .ic-on{display:block}
.h-audio.on .ic-off{display:none}
@media(max-width:640px){.h-audio{right:78px;bottom:24px;width:40px;height:40px}}
/* "Rivedi il video": compare al centro dell'hero quando il video finisce (no loop). */
.h-replay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:6;display:none;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.5);color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 10px 34px rgba(0,0,0,.4);transition:transform .2s,background .18s,border-color .18s}
.h-replay.show{display:inline-flex;animation:hReplayIn .3s cubic-bezier(.34,1.4,.64,1) both}
.h-replay:hover{background:rgba(0,0,0,.66);border-color:var(--cy);transform:translate(-50%,-50%) scale(1)}
@keyframes hReplayIn{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(.94)}}
.h-particles{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero>.ph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;pointer-events:none}
.hero::before{content:"";position:absolute;bottom:0;left:0;right:0;height:62%;z-index:3;background:linear-gradient(to top,rgba(4,4,4,.99) 0%,rgba(4,4,4,.1) 55%,transparent);pointer-events:none}
.h-top{position:absolute;top:0;left:0;right:0;padding:100px 52px 0;z-index:4;display:flex;justify-content:space-between;align-items:flex-start}
@media(max-width:768px){.h-top{padding:86px 26px 0;flex-direction:column;gap:8px}}
.h-eye{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;opacity:0}
.h-yr{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.14);font-weight:500;opacity:0}
.h-bot{position:relative;z-index:4;padding:0 52px 9vh}
@media(max-width:768px){.h-bot{padding:0 26px 11vh}}
.hero h1{font-size:clamp(48px,13.5vw,204px);font-weight:200;letter-spacing:-.07em;line-height:.88;margin-bottom:32px}
.h1a{display:block;color:#fff}
.h1b{display:block;color:var(--cy);font-weight:700;text-transform:uppercase;letter-spacing:-.04em}
.hero h1 .sc{display:inline-block}
/* contenuto per-slide (titolo + CTA dal backend) che cambia con la foto */
.hero-slide-content{display:grid}
.hsc{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .7s cubic-bezier(var(--ez))}
.hsc.on{opacity:1;pointer-events:auto;animation:hscReveal 1.35s cubic-bezier(var(--ez)) both}
@keyframes hscReveal{0%{opacity:0;transform:translateY(32px);filter:blur(16px)}100%{opacity:1;transform:none;filter:blur(0)}}
.hsc-tit{font-size:clamp(40px,8.5vw,140px);font-weight:200;letter-spacing:-.05em;line-height:.92;color:#fff;max-width:18ch}
.hsc-cy{color:var(--cy);font-weight:700;text-transform:uppercase;letter-spacing:-.04em}
.hsc-cta{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:15px 32px;border-radius:999px;background:var(--cy);color:#001014;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;transition:transform .3s,box-shadow .3s,background .3s}
.hsc-cta span{transition:transform .35s}
.hsc-cta:hover{transform:translateY(-2px);background:#1fd0ee;box-shadow:0 16px 36px rgba(0,184,212,.35)}
.hsc-cta:hover span{transform:translateX(5px)}

/* ── LAVORI: griglia bento con immagini ── */
.work-sec{padding:clamp(60px,8vw,96px) clamp(20px,5vw,52px);background:var(--w);border-top:.5px solid var(--ln)}
.work-hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,52px)}
.work-h{font-size:clamp(28px,4.5vw,60px);font-weight:700;letter-spacing:-.05em;line-height:.96;margin-top:10px;color:var(--ink)}
.work-all{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap;transition:color .3s,border-color .3s}
.work-all:hover{color:var(--cy);border-color:var(--cy)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:14px;grid-auto-flow:dense}
.work-card{position:relative;overflow:hidden;border-radius:18px;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,2.4vw,34px);background:#f1f1ef;color:var(--ink);transition:transform .5s cubic-bezier(var(--ez)),box-shadow .5s,opacity .4s,filter .4s}
.work-card:hover{transform:scale(1.05);z-index:6;box-shadow:0 24px 60px rgba(0,0,0,.26)}
/* La scheda su cui passi si evidenzia leggermente, le altre si attenuano appena */
.work-grid:hover .work-card:not(:hover){opacity:.72}
.work-card.feat{grid-column:span 2;grid-row:span 2;background:#0a0a0a;color:#fff}
.work-card.has-img{background-image:var(--bg);background-size:cover;background-position:center;color:#fff}
.work-card.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.05));z-index:0}
.work-card>*{position:relative;z-index:1}
.work-n{position:absolute;top:18px;right:24px;font-size:clamp(40px,5vw,92px);font-weight:700;line-height:1;color:rgba(0,0,0,.06);z-index:0;pointer-events:none;font-variant-numeric:tabular-nums}
.work-card.feat .work-n,.work-card.has-img .work-n{color:rgba(255,255,255,.08)}
.work-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:600;display:block;margin-bottom:12px}
.work-tit{font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.04}
.work-card.feat .work-tit{font-size:clamp(28px,3.6vw,48px)}
.work-dsc{font-size:14px;line-height:1.62;margin-top:14px;max-width:44ch;color:rgba(255,255,255,.62)}
.work-arr{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:inherit;border-bottom:1px solid currentColor;padding-bottom:3px;align-self:flex-start;transition:gap .3s}
.work-card:hover .work-arr{gap:14px}
.work-card.feat .work-arr,.work-card.has-img .work-arr{color:var(--cy);border-color:var(--cy)}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}.work-card.feat{grid-column:span 2;grid-row:span 1}}
@media(max-width:600px){.work-grid{grid-template-columns:1fr;grid-auto-rows:210px}.work-card.feat{grid-column:span 1}}

/* ── REFERENZE: zoom-out su scroll — card quadrate, 3 colonne, fullscreen ── */
.rzo{position:relative;width:100vw;margin-left:calc(50% - 50vw)}   /* full-bleed: la scena occupa tutta la larghezza */
/* Stage: altezza esatta 100vh per la prima card fullscreen.
   Con >3 lavori la griglia interna è più alta della viewport: lo stage la lascia
   "uscire" sotto (overflow visibile), e il pin GSAP la accompagna. */
.rzo-stage{height:100vh;height:100svh;min-height:560px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--w);overflow:visible}
/* La larghezza esatta della griglia la calcola il JS per riempire lo schermo. */
.rzo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(96vw,1500px)}
.rzo-card{position:relative;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,1.8vw,32px);aspect-ratio:1/1;color:#fff;transform-origin:center center;will-change:opacity,transform}
/* Foto (sfondo) + vela nera al 25% (default), un filo più scura in basso per la leggibilità del testo */
.rzo-card::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;z-index:0;transition:transform .6s cubic-bezier(var(--ez))}
.rzo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.25) 50%,rgba(0,0,0,.25));z-index:1;transition:opacity .4s}
.rzo-card:hover::before{transform:scale(1.06)}
.rzo-card:hover::after{opacity:.72}
.rzo-card>*{position:relative;z-index:2}
/* Inquadrature diverse per non avere tessere identiche (finché la foto è la stessa per tutte) */
.rzo-card:nth-child(3n+2)::before{background-position:top}
.rzo-card:nth-child(3n)::before{background-position:bottom}
.rzo-n{position:absolute;top:18px;right:26px;font-size:clamp(34px,4vw,80px);font-weight:700;line-height:1;color:rgba(255,255,255,.16);pointer-events:none;font-variant-numeric:tabular-nums}
.rzo-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:600;display:block;margin-bottom:8px}
.rzo-tit{font-size:clamp(18px,1.7vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.rzo-arr{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cy);border-bottom:1px solid var(--cy);padding-bottom:3px;align-self:flex-start;transition:gap .3s}
.rzo-card:hover .rzo-arr{gap:14px}
/* Con JS l'effetto zoom-out è attivo anche su mobile (2 colonne, gestite dal JS).
   Fallback STATICO solo per no-JS o "riduci movimento": griglia normale scrollabile. */
.rzo-static.rzo-stage{height:auto;min-height:0;display:block;overflow:visible}
.rzo-static .rzo-grid{width:100%!important;grid-template-columns:repeat(2,1fr);gap:8px}
.rzo-static .rzo-card{transform:none!important;opacity:1!important;position:static!important;width:auto!important;height:auto!important;left:auto!important;top:auto!important}
@media(max-width:560px){.rzo-static .rzo-grid{grid-template-columns:1fr}.rzo-static .rzo-card{aspect-ratio:16/10}}

/* stat strip */
.h-stats{display:flex;align-items:center;gap:0;opacity:0;transform:translateY(14px);position:relative;z-index:1}
.h-stat{display:flex;align-items:baseline;gap:7px;padding:0 28px}
.h-stat:first-child{padding-left:0}
.h-stat-n{font-size:clamp(18px,2.2vw,26px);font-weight:700;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.h-stat-l{font-size:clamp(12px,1vw,14px);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:500}
.h-stat-div{width:.5px;height:28px;background:rgba(255,255,255,.12);flex-shrink:0}
@media(max-width:768px){.h-stats{flex-direction:column;gap:8px;align-items:flex-start}.h-stat{padding:0}.h-stat-div{display:none}}
/* scroll indicator */
.h-scroll-line{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:28px;opacity:0}
.h-scroll-line span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.22);writing-mode:vertical-rl}
.h-scroll-line::before{content:"";width:1px;height:48px;background:rgba(255,255,255,.15);display:block;animation:sc 2.4s ease infinite}
@keyframes sc{0%,100%{transform:scaleY(0);transform-origin:top;opacity:0}40%{opacity:1}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:768px){.h-scroll-line{display:none}}

/* ── MARQUEE ── */

.stmt-mq{display:none}

@keyframes smq{to{transform:translateX(-50%)}}
.stmt-i{font-size:clamp(18px,2.5vw,36px);font-weight:200;letter-spacing:-.03em;color:rgba(255,255,255,.1);padding:0 52px;white-space:nowrap;display:flex;align-items:center;gap:52px}
.stmt-i em{color:var(--cy);font-style:normal}
.s-dot{width:4px;height:4px;border-radius:50%;background:var(--cy);opacity:.6;flex-shrink:0}

/* ── BOLD DECO SHARED ── */
.deco-wrap{overflow:visible}
/* Stato base: visibile. Lo ScrollTrigger di home.js anima da y:38/opacity:0 quando entra in viewport.
   Se per qualche motivo lo ScrollTrigger non scatta (cache, errore JS a monte) il titolone resta
   comunque leggibile senza animazione. */
.deco{font-size:clamp(88px,16vw,224px);font-weight:700;letter-spacing:-.065em;line-height:.9;text-transform:uppercase;display:block;opacity:1;transform:translateY(0);will-change:transform,opacity}
.deco.deco-anim{opacity:0;transform:translateY(38px)}
.deco.ink{color:var(--ink)}
.deco.white{color:#fff}
/* sotto-etichetta allineata al bordo destro della parola deco (sotto la "RA" di CURA) */
.deco-head{width:max-content;max-width:100%}
.deco-head .mani-sub{text-align:right}

/* ── ① CURA — sinistra ── */
.mani-sec{display:grid;grid-template-columns:1fr 1fr;background:var(--w);border-top:.5px solid var(--ln)}
/* Padding verticale = a quello della foto (.mani-R) così CURA (in alto) e testo/bollino
   (in basso) si allineano ai bordi alto/basso della foto. Altezza guidata dalla foto. */
.mani-L{padding:clamp(48px,5vw,84px) 56px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.mani-sub{font-size:clamp(16px,1.8vw,24px);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px;font-weight:500;opacity:0;transform:translateX(-16px)}
.mani-bg-num{position:absolute;right:-20px;bottom:-44px;font-size:clamp(160px,30vw,380px);font-weight:700;color:rgba(0,0,0,.026);letter-spacing:-.08em;line-height:1;pointer-events:none;user-select:none;font-variant-numeric:tabular-nums;z-index:0}
/* margin-top fisso (era "auto" che spingeva il testo in fondo alla colonna,
   creando un vuoto enorme tra il titolo CURA e il paragrafo).
   Larghezza: arriva fin sotto la A di CURA (~parola intera), non più 42ch. */
.mani-body{font-size:clamp(13px,1.1vw,16px);color:var(--dim);line-height:1.8;max-width:68ch;margin-top:clamp(32px,5vw,64px);padding-top:0;position:relative;z-index:1;opacity:0;transform:translateY(18px)}
/* sotto i 1500px la colonna è più bassa e il testo largo 68ch finirebbe sopra
   il bollino 30 anni: larghezza sicura (il bollino si riduce vicino alla sua
   regola base, più avanti nel file) */
@media(max-width:1500px){.mani-body{max-width:52ch}}
/* NB: le altre regole ≤1500px della riga CTA stanno in FONDO al file:
   qui verrebbero scavalcate dalle regole base che seguono */
/* Foto contenuta e incorniciata (stesso formato della pagina Studio): non più a
   tutto bordo, ma centrata con margine bianco intorno + angoli tondi e bordo. */
.mani-R{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:clamp(48px,5vw,84px)}
.mani-photo{position:relative;width:100%;border-radius:14px;overflow:hidden;border:.5px solid var(--ln)}
.mani-photo canvas,.mani-photo img{width:100%;height:auto;aspect-ratio:4/3;display:block;object-fit:cover}
.mani-caption{position:absolute;bottom:16px;right:16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:500;text-align:right;line-height:1.7;padding:8px 14px;backdrop-filter:blur(8px);background:rgba(0,0,0,.32);border-radius:6px}
@media(max-width:768px){.mani-sec{grid-template-columns:1fr}.mani-L{padding:56px 22px;border-right:none;border-bottom:.5px solid var(--ln)}.mani-R{min-height:auto;position:relative;padding:30px 22px 46px}}

/* ── ② DESIGN — destra + horizontal scroll chiaro ── */
.svc-sec{background:var(--bg);border-top:.5px solid var(--ln);position:relative;z-index:1}
.svc-hdr{padding:118px 52px 0}
@media(max-width:768px){.svc-hdr{padding:96px 22px 0}}
/* il titolo SERVIZI hugga il suo contenuto (allineato a destra); così il payoff sotto
   può essere giustificato per coprire ESATTAMENTE la larghezza della parola SERVIZI */
.design-title-wrap{text-align:right;width:max-content;max-width:100%;margin-left:auto}
/* Sottotitolo SERVIZI: larghezza libera (niente più giustificato forzato sulla
   larghezza della parola gigante), allineato a destra come il resto del blocco */
.design-claim{font-size:clamp(15px,1.7vw,22px);letter-spacing:.04em;text-transform:uppercase;color:var(--dim);font-weight:500;line-height:1.4;margin:clamp(4px,.8vw,10px) 0 0 auto;max-width:74ch}
.design-hdr-btm{display:flex;justify-content:flex-end;align-items:baseline;margin-top:16px;gap:20px}
.design-sub{font-size:clamp(14px,1.5vw,19px);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:500;opacity:0;transform:translateY(10px)}
/* scroll */
.svc-scroll-outer{position:relative}
#svcPin{position:relative;top:0;height:100svh;overflow:hidden;width:100%}
#svcTrack{display:flex;height:100svh;will-change:transform}
/* Pannello servizio (scroll laterale): non occupa più i primi 90px della viewport
   altrimenti la barra nav fissa copre la parte alta del contenuto durante il pin.
   90px = altezza nav (~58-72) + un po' di margine visivo. */
.svc-panel{flex-shrink:0;width:100vw;height:100svh;padding-top:90px;box-sizing:border-box;display:grid;grid-template-columns:50% 50%}
.svc-pL{background:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:52px;position:relative;overflow:hidden;transition:background .65s cubic-bezier(var(--ez))}
.svc-pL::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 15% 75%,rgba(0,184,212,.05),transparent);pointer-events:none}
.svc-pL::after{content:"";position:absolute;top:0;left:0;width:2px;height:0;background:var(--cy);transition:height .75s cubic-bezier(var(--ez));z-index:2}
.svc-panel:hover .svc-pL{background:var(--ink)}
.svc-panel:hover .svc-pL::after{height:100%}
/* numero bg grande */
.svc-pL-bg{position:absolute;right:-15px;bottom:-44px;font-size:clamp(180px,32vw,400px);font-weight:700;color:rgba(0,184,212,.06);letter-spacing:-.08em;line-height:1;pointer-events:none;user-select:none;font-variant-numeric:tabular-nums;z-index:0;transition:color .55s}
.svc-panel:hover .svc-pL-bg{color:rgba(0,184,212,.07)}
.svc-pidx{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:18px;font-variant-numeric:tabular-nums;position:relative;z-index:1;transition:color .4s}
.svc-panel:hover .svc-pidx{color:rgba(255,255,255,.35)}
.svc-pnum{font-size:clamp(100px,20vw,260px);font-weight:700;letter-spacing:-.08em;color:var(--w);line-height:.84;font-variant-numeric:tabular-nums;position:relative;z-index:1;transition:color .5s,letter-spacing .6s cubic-bezier(var(--ez))}
.svc-pnum-sfx{color:var(--cy);transition:color .4s}
.svc-panel:hover .svc-pnum{color:var(--w);letter-spacing:-.1em}
.spips{display:flex;gap:5px;margin-top:24px;position:relative;z-index:1}
.spip{height:1.5px;background:rgba(255,255,255,.14);border-radius:1px;flex:1;transition:background .5s}
.spip.on{background:var(--cy)}
.svc-panel:hover .spip{background:rgba(255,255,255,.14)}
.svc-panel:hover .spip.on{background:var(--cy)}
/* pannello R */
.svc-pR{background:var(--w);display:flex;flex-direction:column;justify-content:center;padding:52px clamp(52px,6vw,96px);border-left:.5px solid var(--ln);transition:background .5s;position:relative;overflow:hidden}
.svc-panel:hover .svc-pR{background:var(--bg)}
/* mini visual canvas */
.svc-mini-visual{position:absolute;bottom:0;right:0;width:200px;height:200px;opacity:.18;transition:opacity .5s,transform .6s cubic-bezier(var(--ez));pointer-events:none}
.svc-panel:hover .svc-mini-visual{opacity:.32;transform:scale(1.04)}
.svc-ptag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy);font-weight:500;margin-bottom:18px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .4s cubic-bezier(var(--ez))}
.svc-ptag::before{content:"";width:14px;height:1px;background:var(--cy);flex-shrink:0}
.svc-panel:hover .svc-ptag{opacity:1;transform:translateX(0)}
.svc-ptit{font-size:clamp(34px,5.2vw,78px);font-weight:700;letter-spacing:-.045em;margin-bottom:16px;line-height:.98;color:var(--ink);transition:transform .45s cubic-bezier(var(--ez))}
.svc-panel:hover .svc-ptit{transform:translateY(-4px)}
.svc-pdsc{font-size:clamp(16px,1.35vw,20px);color:#555;line-height:1.78;max-width:66ch;margin-bottom:24px}
.svc-ptags{display:flex;gap:6px;flex-wrap:wrap}
.svc-ptag2{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:.5px solid var(--ln);color:var(--dim);font-weight:500;transition:all .32s}
.svc-ptag2.on{border-color:var(--cy);color:var(--cy);background:var(--cy2)}
/* Pillola nera come "Guarda il video aziendale" (senza play): prima era un
   link testuale grigio che non si vedeva */
.svc-parr{margin-top:auto;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:#fff;background:var(--ink);border-radius:999px;padding:14px 28px;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform .25s,box-shadow .25s,gap .25s}
.svc-parrl{width:20px;height:1px;background:rgba(255,255,255,.55);display:inline-block;transition:width .4s,background .3s}
.svc-parr:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.26);gap:14px}.svc-parr:hover .svc-parrl{background:#fff;width:36px}
.svc-prog{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(0,0,0,.06);z-index:10}
.svc-pf{height:100%;background:var(--cy);transform-origin:left;transform:scaleX(0)}
@media(max-width:768px){
  /* Scroll orizzontale mantenuto anche su telefono (replica desktop): pannelli a tutta
     finestra che scorrono di lato. Lo split 50/50 si impila in verticale: banda numero
     COMPATTA in alto (auto), il resto dello schermo al testo (descrizioni lunghe). */
  .svc-panel{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .svc-pL{padding:clamp(66px,15vw,86px) 22px 16px;justify-content:flex-end}
  .svc-pR{padding:22px 22px 24px;border-left:none;border-top:.5px solid var(--ln);justify-content:flex-start}
  .svc-pnum{font-size:clamp(60px,17vw,104px)}
  .svc-ptit{font-size:clamp(26px,6.6vw,40px);margin-bottom:12px}
  /* descrizione più compatta; line-clamp = rete di sicurezza per le descrizioni molto lunghe
     (il testo completo è sulla pagina del servizio, raggiunta da "Scopri il servizio →") */
  .svc-pdsc{font-size:14px;line-height:1.55;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
  .svc-ptags{flex-wrap:wrap}
  /* pillola un filo più compatta su mobile (niente padding-top: storcerebbe la pillola) */
  .svc-parr{margin-top:16px;padding:12px 22px;font-size:11px}
  /* su touch non c'è hover: mostro sempre l'etichetta del servizio */
  .svc-ptag{opacity:1;transform:none;margin-bottom:12px}
  .spips,.svc-mini-visual{display:none}
  .svc-panel:hover .svc-pR{background:var(--w)}
}

/* ── QUOTE ── */
.quote-sec{background:var(--ink);padding:96px 52px;border-top:.5px solid rgba(255,255,255,.06);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center}
.quote-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(0,184,212,.06),transparent);pointer-events:none}
@media(max-width:768px){.quote-sec{padding:68px 22px}}
.q-line{width:1px;height:52px;background:var(--cy);margin-bottom:28px;opacity:0;transform:scaleY(0);transform-origin:top}
.quote-txt{font-size:clamp(36px,8vw,112px);font-weight:200;letter-spacing:-.055em;color:#fff;line-height:.95;font-style:normal;opacity:0;transform:translateY(32px);max-width:16ch}
.quote-txt em{font-style:normal;color:var(--cy)}
/* marchio figurativo diversaMENTE® al posto della scritta: centrato, in equilibrio
   con le righe di testo sopra (il file ora è ritagliato a filo del marchio). */
.quote-dm{display:block;height:clamp(95px,12.5vw,170px);width:auto;max-width:92vw;object-fit:contain;margin:clamp(14px,2vw,26px) auto 0}
.q-meta{margin-top:32px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);opacity:0}
.q-bgn{position:absolute;right:-40px;bottom:-60px;font-size:clamp(200px,35vw,480px);font-weight:700;color:rgba(255,255,255,.015);letter-spacing:-.08em;line-height:1;pointer-events:none;user-select:none;font-variant-numeric:tabular-nums}

/* ── ③ METODO — sinistra ── */
.metodo-sec{background:var(--bg);border-top:.5px solid var(--ln)}
.metodo-top{display:grid;grid-template-columns:.65fr 1fr;gap:80px;padding:80px 52px 56px;align-items:end}
@media(max-width:768px){.metodo-top{grid-template-columns:1fr;gap:20px;padding:60px 22px 40px}}
.metodo-top-R{opacity:0;transform:translateY(14px)}
.metodo-top-R p{font-size:clamp(13px,1.1vw,16px);color:var(--dim);line-height:1.78;max-width:44ch}
.metodo-steps{position:relative;border-top:.5px solid var(--ln)}
.metodo-timeline{position:absolute;left:150px;top:0;bottom:0;width:1px;background:rgba(0,0,0,.06);overflow:hidden;pointer-events:none}
@media(max-width:768px){.metodo-timeline{left:70px}}
.metodo-tl-fill{position:absolute;top:0;left:0;right:0;height:0;background:var(--cy);transition:height .1s linear}
.metodo-step{display:grid;grid-template-columns:140px 1fr;gap:0;padding:48px 52px 48px 0;border-bottom:.5px solid var(--ln);overflow:hidden;position:relative}
.metodo-step-num{display:flex;align-items:flex-start;justify-content:flex-start;padding-top:4px;position:relative;z-index:1}
.ms-n{font-size:clamp(48px,8vw,96px);font-weight:700;color:rgba(0,0,0,.08);letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;transition:color .45s}
.metodo-step:hover .ms-n{color:var(--cy)}
/* corpo step su 2 sotto-colonne: titolo a sx, descrizione+tag a dx (riempie la larghezza) */
.metodo-step-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,5vw,72px);align-items:center;opacity:0;transform:translateX(32px)}
.metodo-step-body h3{grid-column:1;grid-row:1/span 2;align-self:center;font-size:clamp(24px,3vw,42px);font-weight:700;letter-spacing:-.04em;margin:0;color:var(--ink);line-height:1.04}
.metodo-step-body p{grid-column:2;grid-row:1;align-self:end;font-size:clamp(14px,1.1vw,17px);color:var(--dim);line-height:1.78;max-width:56ch;margin:0 0 14px}
.metodo-step-tags{grid-column:2;grid-row:2;align-self:start;display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:768px){
  .metodo-step{grid-template-columns:80px 1fr;padding:40px 22px 40px 0}
  .metodo-step-body{grid-template-columns:1fr}
  .metodo-step-body h3{grid-row:auto;margin-bottom:10px}
  .metodo-step-body p{grid-row:auto;align-self:auto;margin-bottom:16px}
  .metodo-step-tags{grid-row:auto}
}
.ms-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:.5px solid var(--ln);color:var(--dim);font-weight:500}

/* ── COUNTER ── */
/* COUNTER — nastro orizzontale scorrevole su sfondo a particelle */
.cnt-sec{background:#050505;position:relative;z-index:2;isolation:isolate;overflow:hidden;border-top:.5px solid rgba(255,255,255,.06);border-bottom:.5px solid rgba(255,255,255,.06)}
.cnt-sec .ph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.cnt-marquee{position:relative;z-index:3;padding:clamp(64px,9vw,120px) 0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.cnt-mq-row{display:inline-flex;align-items:center;gap:clamp(40px,5vw,88px);animation:cntmq 36s linear infinite;will-change:transform}
.cnt-sec:hover .cnt-mq-row{animation-play-state:paused}
.cnt-stat{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px}
.cnt-stat-n{font-size:clamp(50px,8vw,112px);font-weight:700;letter-spacing:-.05em;color:#fff;line-height:.88;font-variant-numeric:tabular-nums}
.cnt-stat-n i{font-style:normal;font-size:.38em;font-weight:600;color:var(--cy);margin-left:6px;letter-spacing:0}
.cnt-stat-l{font-size:clamp(12px,1.2vw,15px);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52);font-weight:500;white-space:nowrap}
.cnt-mq-sep{color:var(--cy);font-size:clamp(13px,1.4vw,18px);opacity:.6}
@keyframes cntmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cnt-mq-row{animation:none}}

/* ── REFERENZE ── */
.ws-sec{background:var(--w);isolation:isolate;position:relative;z-index:3}
.ws-hdr{padding:80px 52px 56px;border-top:.5px solid var(--ln)}
@media(max-width:768px){.ws-hdr{padding:60px 22px 40px}}
#wsContainer{position:relative}
.ws-bar{position:sticky;bottom:0;height:3px;background:rgba(0,0,0,.06);z-index:30}
.ws-barf{height:100%;background:linear-gradient(90deg,var(--cy),rgba(0,184,212,.4));transform-origin:left;transform:scaleX(0)}
.ws-card{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:62% 38%;transform-origin:top center;will-change:transform,filter;overflow:hidden}
.ws-ci{overflow:hidden;position:relative;background:#080808}
.ws-ci img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;will-change:transform;transform:scale(1.08)}
.ws-ci::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(125deg,rgba(0,184,212,.08),transparent 60%);opacity:0;transition:opacity .7s}
.ws-card:hover .ws-ci::after{opacity:1}
.ws-ci-ov{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:28px;background:linear-gradient(to top,rgba(8,8,8,.48) 0%,transparent 50%)}
.ws-bgn{position:absolute;top:16px;left:20px;font-size:clamp(52px,9vw,130px);font-weight:700;color:rgba(255,255,255,.042);font-variant-numeric:tabular-nums;line-height:1;pointer-events:none;user-select:none;transition:color .5s}
.ws-card:hover .ws-bgn{color:rgba(0,184,212,.07)}
.ws-cidx{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.ws-inf{background:var(--w);display:flex;flex-direction:column;justify-content:center;padding:48px;border-left:.5px solid var(--ln);transition:background .4s}
.ws-card:hover .ws-inf{background:#fafaf8}
.ws-idx{font-size:11px;color:var(--dim);letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.ws-cats{display:flex;gap:6px;margin-bottom:12px}
.ws-cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--bg);color:var(--dim);font-weight:500;transition:all .35s}
.ws-card:hover .ws-cat{background:var(--cy2);color:var(--cy)}
.ws-tit{font-size:clamp(22px,3.8vw,52px);font-weight:700;letter-spacing:-.04em;line-height:.96;margin-bottom:12px;color:var(--ink);transition:transform .45s cubic-bezier(var(--ez))}
.ws-card:hover .ws-tit{transform:translateY(-3px)}
.ws-dsc{font-size:13px;color:var(--dim);line-height:1.72;max-width:34ch;margin-bottom:20px}
.ws-cta{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:var(--ink);text-decoration:none;transition:color .3s,gap .35s}
.ws-cln{width:20px;height:1px;background:var(--ink);display:inline-block;transition:width .4s,background .3s}
.ws-cta:hover{color:var(--cy);gap:14px}.ws-cta:hover .ws-cln{background:var(--cy);width:36px}
@media(max-width:768px){
  .ws-card{position:relative;height:auto;grid-template-columns:1fr;transform:none!important;filter:none!important;border-radius:0!important;border-bottom:.5px solid var(--ln)}
  .ws-ci{height:55vw;position:relative}
  .ws-inf{padding:26px 22px}
  .ws-bar{display:none}
}

/* ── CLIENTI ── */
.mq{background:var(--bg);padding:18px 0;overflow:hidden;border-top:.5px solid var(--ln);border-bottom:.5px solid var(--ln)}
/* Fascia clienti prima delle news: NERA con i nomi in bianco. Padding simmetrico
   (non più "fusa" con la sezione news) così la striscia scura è bilanciata. */
.mq-news{background:#080808;border-top:0;border-bottom:0;padding:18px 0;margin-bottom:0}
.mq-news .mqi{color:rgba(255,255,255,.72);border-right-color:rgba(255,255,255,.16)}
.mq-news .mqi:hover{color:#fff}
.mq-news + .news-sec{padding-top:clamp(48px,5vw,72px)}
.mqt{display:flex;width:max-content;animation:mqa 28s linear infinite}
@keyframes mqa{to{transform:translateX(-50%)}}
.mqi{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--dim);padding:0 32px;white-space:nowrap;border-right:.5px solid var(--ln);text-transform:uppercase;cursor:pointer;transition:color .3s}
.mqi:hover{color:var(--ink)}

/* ── ④ BLOG — destra ── */
.blog-sec{background:var(--bg);border-top:.5px solid var(--ln)}
.blog-in{display:grid;grid-template-columns:1fr .88fr;min-height:520px}
.blog-R{display:flex;flex-direction:column;order:1;border-right:.5px solid var(--ln)}
.blog-L{padding:64px 52px;display:flex;flex-direction:column;justify-content:space-between;order:2;position:relative;overflow:hidden}
.blog-meta{padding-top:32px}
.blog-cat{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.blog-cat::before{content:"";width:10px;height:1px;background:var(--cy)}
.blog-t{font-size:clamp(16px,1.8vw,22px);font-weight:700;letter-spacing:-.025em;line-height:1.14;margin-bottom:8px;color:var(--ink)}
.blog-d{font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.blog-art{display:block;padding:28px 36px;border-bottom:.5px solid var(--ln);text-decoration:none;color:var(--ink);position:relative;overflow:hidden;transition:background .32s;cursor:pointer;flex:1}
.blog-art:hover{background:var(--w)}
.blog-art-cat{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);font-weight:500;margin-bottom:8px;display:block}
.blog-art-t{font-size:15px;font-weight:500;letter-spacing:-.02em;line-height:1.28;margin-bottom:6px;display:block;transition:transform .32s}
.blog-art:hover .blog-art-t{transform:translateY(-2px)}
.blog-art-d{font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.blog-arr{position:absolute;bottom:20px;right:20px;font-size:14px;color:var(--cy);opacity:0;transition:opacity .3s,transform .3s;transform:translate(-4px,4px)}
.blog-art:hover .blog-arr{opacity:1;transform:translate(0,0)}
@media(max-width:768px){.blog-in{grid-template-columns:1fr}.blog-R{order:1;border-right:none;border-bottom:.5px solid var(--ln)}.blog-L{order:2;padding:52px 22px}.blog-art{padding:22px}}


/* ── NEWS ── */
.news-sec{background:var(--w);border-top:.5px solid var(--ln);padding:88px 52px}
@media(max-width:768px){.news-sec{padding:60px 22px}}

/* ── NEWS home, layout "prima pagina" (A4.3): copertina grande col titolo
   sulla foto + elenco compatto con miniature quadrate a destra ── */
.hn-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.hn-feat{position:relative;display:flex;align-items:flex-end;border-radius:22px;overflow:hidden;aspect-ratio:16/10.5;text-decoration:none;color:#fff;transition:transform .5s cubic-bezier(var(--ez)),box-shadow .5s}
.hn-feat:hover{transform:translateY(-6px);box-shadow:0 24px 48px -20px rgba(0,0,0,.35)}
/* velo nero SEMPRE presente sulla foto (leggero di default, più fondo in hover
   per far leggere la descrizione); sta sotto il testo, sopra la foto */
.hn-feat::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:.55;transition:opacity .45s;z-index:1;pointer-events:none}
.hn-feat:hover::after{opacity:1}
/* descrizione breve: nascosta, si apre sotto il titolo insieme al velo */
.hn-feat-exc{margin:0;font-size:14px;line-height:1.65;color:rgba(255,255,255,.88);max-width:52ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;opacity:0;transform:translateY(8px);max-height:0;transition:opacity .45s cubic-bezier(var(--ez)),transform .45s cubic-bezier(var(--ez)),max-height .45s cubic-bezier(var(--ez))}
.hn-feat:hover .hn-feat-exc{opacity:1;transform:translateY(0);max-height:120px}
.hn-feat-img{position:absolute;inset:0;background:#0b1320}
.hn-feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(var(--ez))}
.hn-feat:hover .hn-feat-img img{transform:scale(1.04)}
.hn-feat-body{position:relative;z-index:2;width:100%;padding:clamp(22px,2.6vw,34px);padding-top:150px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 60%);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hn-feat-body h2{margin:0;font-size:clamp(24px,2.7vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.05;max-width:20ch;color:#fff}
.hn-date{font-size:11px;color:rgba(0,0,0,.55);letter-spacing:.06em}
.hn-feat-body .hn-date{color:rgba(255,255,255,.5)}
.hn-list{display:flex;flex-direction:column}
/* hover riga: fondo che si accende, barretta ciano a sinistra, testo che slitta */
.hn-row{position:relative;text-decoration:none;color:var(--ink);padding:18px 16px;margin:0 -16px;border-radius:14px;border-top:.5px solid rgba(0,0,0,.14);display:grid;grid-template-columns:124px 1fr;gap:18px;align-items:center;transition:background .35s}
.hn-row:first-child{border-top:none;padding-top:4px}
.hn-row:hover{background:#f2f6f7}
.hn-row::after{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;background:var(--cy);transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(var(--ez))}
.hn-row:hover::after{transform:scaleY(1)}
.hn-row-body{transition:transform .35s cubic-bezier(var(--ez))}
.hn-row:hover .hn-row-body{transform:translateX(4px)}
.hn-thumb{width:124px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#0b1320;display:block;position:relative}
.hn-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(var(--ez))}
/* velo nero di default sulle miniature; in hover si alza e scopre la foto */
.hn-thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);transition:opacity .35s;pointer-events:none}
.hn-row:hover .hn-thumb::after{opacity:0}
.hn-row:hover .hn-thumb img{transform:scale(1.06)}
.hn-row-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.hn-row-tit{font-size:clamp(16px,1.5vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.22;color:var(--ink)}
@media(max-width:900px){
  .hn-grid{grid-template-columns:1fr;gap:26px}
  .hn-feat{aspect-ratio:16/11}
  .hn-feat-body{padding-top:110px}
  .hn-thumb{width:92px}
  /* niente margini negativi da hover: le righe restano a filo della copertina */
  .hn-row{grid-template-columns:92px 1fr;padding:14px 0;margin:0;border-radius:0}
}
.news-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.news-all{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500;text-decoration:none;border-bottom:.5px solid rgba(0,0,0,.15);padding-bottom:3px;transition:color .3s,border-color .3s;white-space:nowrap;flex-shrink:0;margin-bottom:12px}
.news-all:hover{color:var(--ink);border-color:rgba(0,0,0,.4)}
/* Layout: featured grande a sinistra + 2 card a destra */
.news-grid{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto;gap:1px;background:var(--ln)}
@media(max-width:860px){.news-grid{grid-template-columns:1fr}}
/* Card base */
.news-card{background:var(--w);display:flex;flex-direction:column;cursor:pointer;transition:background .35s;text-decoration:none;position:relative;overflow:hidden}
.news-card:hover{background:#fafaf8}
.news-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cy);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(var(--ez))}
.news-card:hover::after{transform:scaleY(1)}
/* Featured (prima card) */
.news-card-feat{grid-row:span 2;display:flex;flex-direction:column}
.news-card-feat .news-img{height:280px;position:relative;overflow:hidden;flex-shrink:0}
.news-card-feat .news-img canvas{width:100%;height:100%;display:block}
.news-card-feat .news-body{padding:32px 36px;flex:1;display:flex;flex-direction:column;gap:12px}
.news-card-feat .news-card-tit{font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
/* Card compatta */
.news-card-sm{padding:28px 32px;gap:10px;display:flex;flex-direction:column;border-top:.5px solid var(--ln)}
.news-card-sm:first-of-type{border-top:none}
/* Elementi condivisi */
.news-card-cat{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);font-weight:500}
.news-card-tit{font-size:clamp(15px,1.5vw,20px);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.news-card-exc{font-size:13px;color:var(--dim);line-height:1.7;max-width:40ch}
.news-card-feat .news-card-exc{max-width:none}
.news-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:.5px solid var(--ln)}
.news-card-date{font-size:11px;color:rgba(0,0,0,.28);letter-spacing:.06em}
.news-card-arr{font-size:15px;color:var(--cy);transition:transform .35s cubic-bezier(var(--ez))}
.news-card:hover .news-card-arr{transform:translate(4px,-4px)}
@media(max-width:860px){
  .news-card-feat .news-img{height:200px}
  .news-card-feat .news-body,.news-card-sm{padding:24px 22px}
  .news-card-sm{border-top:.5px solid var(--ln)}
}

/* ── ⑤ SEMPRE — centrato ── */
/* ── HOME: banner newsletter — spezzatore tra Portfolio e News ── */
/* Sezione ponte tra Portfolio e News: niente titolone centrato. Il box è
   EQUIDISTANTE tra la fine delle referenze e la striscia clienti — sopra basta
   il fondo del Portfolio (padding-top 0), sotto lo stesso valore (stesso clamp
   del .work-sec) così i due spazi restano uguali a ogni larghezza. */
/* padding-bottom = fondo del Portfolio + i ~60px che l'effetto pin (attivo >768px)
   aggiunge sotto la 2ª riga di referenze → box equidistante sopra/sotto. */
.h-nl-sec{padding:0 clamp(20px,5vw,80px) calc(clamp(60px,8vw,96px) + 60px);background:var(--w)}
/* ≤1100px le referenze diventano statiche (niente extra del pin, vedi home.js):
   sotto basta il fondo Portfolio. Soglia allineata a quella del pin. */
@media(max-width:1100px){.h-nl-sec{padding-bottom:clamp(60px,8vw,96px)}}
/* Titolo NEWSLETTER centrato sul box (stessa larghezza max), senza sottotitolo.
   Sta nello spazio sopra il box: le misure esterne (156/156) restano invariate. */
.h-nl-hdr{text-align:center;max-width:1400px;margin:0 auto clamp(20px,2.6vw,36px)}
/* "NEWSLETTER" è largo ~6,2× il font: a 224px sborderebbe dal box. Ridimensionato
   per restare dentro la larghezza del box a ogni schermo. */
.h-nl-hdr .deco{font-size:clamp(40px,13vw,200px)}
.h-nl{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,80px);
  align-items:center;max-width:1400px;margin:0 auto;
  padding:clamp(40px,5vw,72px) clamp(34px,4vw,56px);
  background:linear-gradient(135deg,#0a0a0b,#0f1418);color:#fff;border-radius:20px;
  position:relative;overflow:hidden}
.h-nl::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 0% 100%,rgba(0,184,212,.18),transparent 55%);
  pointer-events:none}
.h-nl-text{position:relative}
.h-nl-kick{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cy);font-weight:600;display:block;margin-bottom:14px}
.h-nl-title{font-size:clamp(28px,3.4vw,44px);font-weight:300;
  letter-spacing:-.025em;line-height:1.1;color:#fff;margin:0 0 16px}
.h-nl-sub{font-size:clamp(14.5px,1.2vw,17px);color:rgba(255,255,255,.7);
  line-height:1.6;max-width:48ch;margin:0}
.h-nl-form{position:relative;display:flex;flex-direction:column;gap:14px}
.h-nl-row{display:flex;gap:10px;flex-wrap:wrap}
.h-nl-row input[type=email]{flex:1;min-width:200px;min-height:52px;
  padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;font-size:16px;font-family:var(--f);
  transition:border-color .25s,background .25s}
.h-nl-row input[type=email]:focus{outline:none;border-color:var(--cy);
  background:rgba(255,255,255,.10)}
.h-nl-row input[type=email]::placeholder{color:rgba(255,255,255,.4)}
.h-nl-btn{padding:14px 28px;border-radius:999px;border:0;
  background:var(--cy);color:#001014;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background .25s,transform .25s,box-shadow .35s;
  box-shadow:0 6px 20px rgba(0,184,212,.25)}
.h-nl-btn:hover{background:#fff;transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,184,212,.35)}
.h-nl-priv{font-size:12.5px;color:rgba(255,255,255,.5);
  line-height:1.55;margin:4px 0 0}
@media(max-width:900px){
  .h-nl{grid-template-columns:1fr;padding:36px 28px}
  .h-nl-row{flex-direction:column}
  .h-nl-btn{width:100%}
}

.sempre-sec{background:#040404;border-top:.5px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
/* Marchio in filigrana: metà cerchio sul bordo sinistro, semi-trasparente,
   sotto a titolo e box (che stanno su un piano superiore) */
/* desktop: largo il 50% della fascia (proporzioni originali), partenza alta */
.sempre-mark{position:absolute;left:0;top:-2%;transform:translateX(-50%);width:50%;height:auto;opacity:.07;pointer-events:none;user-select:none;z-index:0}
/* mobile: molto più discreto (piccolo, in alto, più trasparente) */
@media(max-width:768px){.sempre-mark{width:auto;height:26%;top:2%;opacity:.05}}
.sempre-sec .sempre-hdr,.sempre-sec .h-ct-split{position:relative;z-index:1}

/* ── HOME: sezione "Pronto a partire" — box CTA grande (stile mega menu .mcta)
   sopra alle 3 card contatti riusate da /contatti. Sfondo scuro, accenti ciano. ── */
/* Sezione fullscreen: occupa tutta la larghezza viewport, niente container 1400px */
.h-cta-sec{padding:clamp(72px,9vw,128px) clamp(20px,3vw,40px);
  display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.h-cta{display:flex;align-items:center;justify-content:space-between;gap:36px;
  flex-wrap:wrap;max-width:1400px;width:100%;margin:0 auto;
  padding:clamp(38px,4.5vw,64px) clamp(34px,4vw,56px);
  background:linear-gradient(135deg,rgba(0,184,212,.10),rgba(0,184,212,.02));
  border:.5px solid rgba(0,184,212,.22);border-radius:18px;
  position:relative;overflow:hidden}
.h-cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0,rgba(0,184,212,.22),transparent 60%);
  pointer-events:none}
.h-cta-text{position:relative;flex:1;min-width:280px}
.h-cta-kick{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cy);font-weight:600;margin-bottom:12px}
.h-cta-title{font-size:clamp(28px,3.4vw,44px);font-weight:300;color:#fff;
  letter-spacing:-.02em;line-height:1.1;margin:0}
.h-cta-btn{position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:16px 28px;border-radius:999px;background:var(--cy);
  color:#001014;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;flex-shrink:0;
  transition:background .25s,transform .25s,box-shadow .35s;
  box-shadow:0 6px 24px rgba(0,184,212,.25)}
.h-cta-btn:hover{background:#fff;transform:translateX(6px);
  box-shadow:0 10px 32px rgba(0,184,212,.35)}

/* Layout 2 colonne fullscreen: sinistra = CTA + 3 card stack, destra = mappa */
.h-ct-split{max-width:none;width:100%;margin:0;
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3vw,40px);align-items:stretch}
.h-ct-left{display:flex;flex-direction:column;gap:clamp(20px,2vw,28px)}
.h-ct-right{position:relative;border-radius:18px;overflow:hidden;
  min-height:560px;background:#0b1320;border:1px solid rgba(255,255,255,.08)}
/* pointer-events:none di default = lo scroll della pagina passa SOPRA alla mappa.
   La classe .map-active (toggle da nav.js sul wrapper) la riattiva quando l'utente
   tocca l'overlay "Clicca per interagire". Senza questo, su mobile la mappa OSM
   cattura il touch e fa zoom/pan → la pagina sembra "scattare in su". */
.h-ct-right iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none}
.h-ct-right.map-active iframe{pointer-events:auto}

/* Quando le 3 card sono nella colonna sinistra (più stretta) le impilo verticali */
.h-ct-left .h-ct-quick{grid-template-columns:1fr;gap:14px}
/* Card più imponenti: padding generoso, icona più grande, label+valore visibili,
   sub riga descrittiva sotto. Coerenti per dimensione col banner Canale WhatsApp. */
.h-ct-left .h-ct-quick .ct-card{display:grid;grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;column-gap:clamp(18px,2vw,26px);row-gap:4px;
  align-items:center;padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);min-height:auto}
.h-ct-left .h-ct-quick .ct-card-ico{margin:0;width:60px;height:60px;border-radius:14px;
  flex-shrink:0;grid-row:1/3}
.h-ct-left .h-ct-quick .ct-card-ico svg{width:28px;height:28px}
.h-ct-left .h-ct-quick .ct-card-l{display:block;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;
  grid-column:2;grid-row:1}
.h-ct-left .h-ct-quick .ct-card-v{font-size:clamp(19px,1.8vw,24px);font-weight:700;
  letter-spacing:-.01em;line-height:1.1;color:#fff;
  grid-column:2;grid-row:2;min-width:0}
.h-ct-left .h-ct-quick .ct-card-sub{display:none}
.h-ct-left .h-ct-quick .ct-card-arr{margin:0;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;
  grid-column:3;grid-row:1/3;align-self:center;white-space:nowrap}
@media(max-width:560px){
  .h-ct-left .h-ct-quick .ct-card{grid-template-columns:auto 1fr;
    grid-template-rows:auto auto auto;row-gap:6px}
  .h-ct-left .h-ct-quick .ct-card-arr{grid-column:1/-1;grid-row:3;
    justify-self:start;padding-top:6px;border-top:1px dashed rgba(255,255,255,.08);
    width:100%;text-align:left;align-self:start}
  .h-ct-left .h-ct-quick .ct-card-ico{width:48px;height:48px}
  .h-ct-left .h-ct-quick .ct-card-ico svg{width:24px;height:24px}
}

@media(max-width:900px){
  .h-ct-split{grid-template-columns:1fr;gap:24px}
  .h-ct-right{min-height:340px}
}

/* Le 3 card contatto su sfondo scuro: ribilancio bordi e leggibilità */
.h-ct-quick{max-width:1400px;width:100%;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.h-ct-quick .ct-card{background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);color:#fff}
.h-ct-quick .ct-card:hover{background:rgba(0,184,212,.06);border-color:rgba(0,184,212,.4)}
.h-ct-quick .ct-card-l{color:rgba(255,255,255,.5)}
.h-ct-quick .ct-card-v{color:#fff}
.h-ct-quick .ct-card-sub{color:rgba(255,255,255,.55)}
.h-ct-quick .ct-card-ico{background:rgba(0,184,212,.1);color:var(--cy)}
.h-ct-quick .ct-card-wa .ct-card-ico{background:rgba(37,211,102,.12);color:#25d366}
@media(max-width:900px){
  .h-ct-quick{grid-template-columns:1fr}
  .h-cta{flex-direction:column;align-items:flex-start;gap:24px}
  .h-cta-btn{width:auto}
}
.sempre-hdr{padding:80px 52px 44px;text-align:center;display:flex;flex-direction:column;align-items:center}
@media(max-width:768px){.sempre-hdr{padding:60px 22px 32px}}
/* Sub leggermente visibile di default (anche se lo ScrollTrigger del reveal non scatta) */
.sempre-sub{font-size:clamp(12px,1.2vw,15px);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:12px;font-weight:500;opacity:1}
.sempre-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:.5px solid rgba(255,255,255,.06);border-bottom:.5px solid rgba(255,255,255,.06)}
.s-info{padding:36px 48px}
.s-info:not(:last-child){border-right:.5px solid rgba(255,255,255,.06)}
.s-info-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy);font-weight:500;margin-bottom:9px;display:block}
.s-info h3{font-size:clamp(14px,1.5vw,21px);font-weight:200;letter-spacing:-.02em;line-height:1.2;color:#fff}
.s-info a{text-decoration:none;color:#fff;transition:color .3s;display:block}.s-info a:hover{color:var(--cy)}
.sempre-body{display:grid;grid-template-columns:1fr 1.2fr}
.sempre-form{padding:52px 52px 64px;display:flex;flex-direction:column}
.sempre-map{overflow:hidden;position:relative}
/* di default l'iframe non cattura la rotella: lo scroll pagina passa attraverso */
.sempre-map iframe{width:100%;height:100%;border:none;display:block;filter:grayscale(1) brightness(.3) contrast(1.2);pointer-events:none}
/* overlay trasparente sopra la mappa: intercetta lo scroll e mostra l'hint */
.map-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;transition:background .3s}
.map-overlay:hover{background:rgba(0,0,0,.18)}
.map-overlay-hint{padding:9px 18px;border-radius:999px;background:rgba(0,0,0,.62);color:var(--cy);font-size:11px;font-weight:600;letter-spacing:.05em;border:.5px solid var(--cy);opacity:0;transition:opacity .3s;pointer-events:none}
.map-overlay:hover .map-overlay-hint{opacity:1}
/* dopo il click: l'iframe torna interattivo e l'overlay sparisce */
.sempre-map.map-active iframe{pointer-events:auto}
.sempre-map.map-active .map-overlay{display:none}

/* ── Mappa "fancy": look scuro pulito, segnaposto animato e card indicazioni ── */
.map-fancy iframe{filter:grayscale(1) invert(.92) contrast(.86) brightness(.96) hue-rotate(185deg)}
/* quando il visitatore attiva la mappa, mostra la versione reale a colori (più leggibile) */
.map-fancy.map-active iframe{filter:none}
.map-fancy{box-shadow:0 24px 60px rgba(0,0,0,.42)}
/* segnaposto: la punta coincide col centro della mappa (dove OSM ha il marker) */
.map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:3;pointer-events:none;filter:drop-shadow(0 6px 9px rgba(0,0,0,.5));animation:mapPinDrop .55s cubic-bezier(.34,1.4,.64,1) both}
.map-pin svg{display:block}
.map-pin::after{content:"";position:absolute;left:50%;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--cy);transform:translateX(-50%);animation:mapPulse 2.4s ease-out infinite}
@keyframes mapPulse{0%{box-shadow:0 0 0 0 rgba(0,184,212,.5)}70%{box-shadow:0 0 0 16px rgba(0,184,212,0)}100%{box-shadow:0 0 0 0 rgba(0,184,212,0)}}
@keyframes mapPinDrop{from{opacity:0;transform:translate(-50%,-145%)}to{opacity:1;transform:translate(-50%,-100%)}}
.map-fancy.map-active .map-pin{display:none}
/* card informativa in basso a sinistra */
.map-card{position:absolute;left:16px;bottom:16px;z-index:4;max-width:min(80%,268px);
  background:rgba(12,17,26,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:13px 15px;pointer-events:none;box-shadow:0 12px 32px rgba(0,0,0,.42)}
.map-card-name{font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em}
.map-card-addr{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:2px;line-height:1.35}
.map-card-btn{display:inline-flex;align-items:center;gap:6px;margin-top:11px;pointer-events:auto;
  padding:8px 15px;border-radius:999px;background:var(--cy);color:#001014;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;text-decoration:none;transition:transform .2s,box-shadow .25s,background .2s}
.map-card-btn:hover{background:#1fd0ee;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,184,212,.4)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.24);font-weight:500;margin-bottom:7px}
.fld input,.fld textarea,.fld select{width:100%;background:transparent;border:none;border-bottom:.5px solid rgba(255,255,255,.1);padding:5px 0 8px;font-size:15px;color:#fff;font-family:var(--f);outline:none;transition:border-color .3s;-webkit-appearance:none}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.14)}
.fld select option{background:#111;color:#fff}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--cy)}
.fld textarea{min-height:54px;resize:none;line-height:1.6}
.fsub{background:var(--cy);color:#000;border:none;padding:14px 32px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;font-family:var(--f);margin-top:8px;transition:background .35s,transform .2s}
.fsub:hover{background:#00d4f5}.fsub:active{transform:scale(.97)}
@media(max-width:768px){
  .sempre-strip{grid-template-columns:1fr}
  .s-info{padding:22px;border-right:none!important;border-bottom:.5px solid rgba(255,255,255,.06)}
  .sempre-body{grid-template-columns:1fr}
  .sempre-map{height:220px}
  .sempre-form{padding:36px 22px 48px}
  .frow{grid-template-columns:1fr}
}

/* ── FOOTER ── */
footer{background:#000;padding:52px 52px 22px}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.fclaim{font-size:13px;color:rgba(255,255,255,.55);line-height:1.72;margin-top:11px}
footer h4,footer .ft-h{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:13px}
footer a{display:block;color:rgba(255,255,255,.66);text-decoration:none;font-size:13px;margin-bottom:7px;transition:color .3s;cursor:pointer}
footer a:hover{color:var(--cy)}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:.5px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.5)}
/* Icone social SVG flat: cerchio sottile + hover ciano */
.fsoc{display:flex;gap:10px}
.fsoc a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.65);text-decoration:none;
  transition:color .25s,border-color .25s,background .25s,transform .25s}
.fsoc a:hover{color:var(--cy);border-color:var(--cy);background:rgba(0,184,212,.06);transform:translateY(-2px)}
.fsoc svg{display:block}
/* Indirizzo in colonna 3 — testo non-link */
.ft-addr{color:rgba(255,255,255,.6);font-size:14px;line-height:1.55;margin-top:5px;display:block}
@media(max-width:768px){.ft{grid-template-columns:1fr 1fr}footer{padding:40px 22px 20px}.fbot{flex-direction:column;gap:14px;text-align:center}}
/* Su smartphone strette, le 2 colonne footer diventano ancora troppo strette → stack singolo */
@media(max-width:520px){.ft{grid-template-columns:1fr;gap:28px}.fbot{padding-top:24px}}


/* CHAT — il finto widget e' stato sostituito dal chatbot reale (_chatbot.html.twig + chatbot.css/js) */

/* UTILITY */
.kick{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);font-weight:500;display:block;margin-bottom:12px}
.sec-h{font-size:clamp(28px,5.5vw,88px);font-weight:700;letter-spacing:-.05em;line-height:.94;color:var(--ink)}
.sec-h em{font-style:normal;color:var(--cy)}
.sh-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.seeall{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500;text-decoration:none;cursor:pointer;border-bottom:.5px solid transparent;padding-bottom:2px;transition:color .3s,border-color .3s;white-space:nowrap}
.seeall:hover{color:var(--ink);border-color:rgba(0,0,0,.2)}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes flt2{0%,100%{transform:translateY(0)}33%{transform:translateY(-14px)}66%{transform:translateY(-6px)}}
@keyframes flt3{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-22px) translateX(8px)}}

/* ── SERVIZI: cursor contestuale ── */
#svc-cur{position:fixed;z-index:8000;pointer-events:none;width:96px;height:96px;border-radius:50%;background:rgba(8,8,8,.88);display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:3px;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1);backdrop-filter:blur(10px);border:.5px solid rgba(255,255,255,.1)}
#svc-cur.vis{opacity:1;transform:translate(-50%,-50%) scale(1)}
#svc-cur.left-side{cursor:w-resize}
#svc-cur.right-side{cursor:e-resize}
#scn{font-size:14px;font-weight:700;letter-spacing:-.01em;color:#fff;font-family:var(--f);font-variant-numeric:tabular-nums;line-height:1}
#scl{font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy);font-family:var(--f);font-weight:500}
/* kbd hint */
.svc-kbd{position:absolute;bottom:20px;right:52px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.18);display:flex;align-items:center;gap:6px;pointer-events:none;z-index:5;transition:opacity .8s;font-family:var(--f)}
.svc-kbd kbd{background:rgba(0,0,0,.07);border:.5px solid rgba(0,0,0,.12);border-radius:3px;padding:2px 5px;font-family:var(--f);font-size:9px}
@media(max-width:768px){.svc-kbd{display:none}}

/* ── REFERENZE: KPI ── */
.ws-kpi{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;opacity:0;transform:translateY(7px);transition:opacity .5s .05s,transform .5s .05s}
.ws-card:hover .ws-kpi{opacity:1;transform:translateY(0)}
.wk{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--cy);font-weight:500;background:rgba(0,184,212,.08);padding:3px 9px;border-radius:4px;white-space:nowrap}

/* ── REFERENZE: mouse follower ── */
#wsF{position:fixed;z-index:8000;pointer-events:none;width:128px;height:128px;border-radius:50%;background:rgba(8,8,8,.9);display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:5px;transform:translate(-50%,-50%) scale(.7);opacity:0;transition:opacity .4s,transform .4s cubic-bezier(.34,1.56,.64,1);backdrop-filter:blur(8px);border:.5px solid rgba(255,255,255,.1)}
#wsF.vis{opacity:1;transform:translate(-50%,-50%) scale(1)}
#wsFT{font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;text-transform:uppercase;font-family:var(--f);line-height:1.35;padding:0 14px;text-align:center}
#wsFS{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:500;font-family:var(--f)}

/* ── REFERENZE: indicatore laterale ── */
#wsPV{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:500;display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity .5s;pointer-events:none}
#wsPV.vis{opacity:1}
.wpd{position:relative;width:2px;height:34px;background:rgba(0,0,0,.08);border-radius:1px;overflow:hidden}
.wpdf{position:absolute;top:0;left:0;right:0;height:0%;background:var(--cy);transition:height .5s cubic-bezier(var(--ez));border-radius:1px}
.wpd.on .wpdf{height:100%}
.wpdn{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:8px;letter-spacing:.1em;color:rgba(0,0,0,.22);font-weight:500;white-space:nowrap;font-family:var(--f);font-variant-numeric:tabular-nums}
@media(max-width:768px){#wsPV,#wsF,#svc-cur{display:none}}

/* ── REFERENZE: scroll parallax ── */
.proj-sec{background:var(--ink);position:relative;z-index:3;isolation:isolate}
.proj-hdr{padding:80px 52px 0;border-top:.5px solid rgba(255,255,255,.07)}
@media(max-width:768px){.proj-hdr{padding:60px 22px 0}}
#projCards{position:relative}
.proj-card{height:100svh;display:grid;grid-template-columns:58% 42%;position:relative;overflow:hidden;border-top:.5px solid rgba(255,255,255,.07)}
.proj-card-img{position:relative;overflow:hidden}
.proj-card-img img{position:absolute;top:-12%;left:0;right:0;bottom:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.proj-img-ov{position:absolute;inset:0;background:linear-gradient(125deg,rgba(0,184,212,.07),transparent 55%);z-index:2;pointer-events:none}
.proj-bgn{position:absolute;top:-10px;left:16px;font-size:clamp(100px,18vw,240px);font-weight:700;color:rgba(255,255,255,.04);line-height:1;font-variant-numeric:tabular-nums;z-index:1;pointer-events:none;user-select:none}
.proj-info{background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:56px 52px;border-left:.5px solid rgba(255,255,255,.07);opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.77,0,.18,1),transform .6s cubic-bezier(.77,0,.18,1)}
.proj-info.in{opacity:1;transform:translateY(0)}
.proj-idx{font-size:11px;color:rgba(255,255,255,.22);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;font-variant-numeric:tabular-nums}
.proj-cats{display:flex;gap:6px;margin-bottom:14px}
.proj-cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.4);font-weight:500}
.proj-tit{font-size:clamp(26px,4.5vw,62px);font-weight:700;letter-spacing:-.045em;line-height:.94;color:#fff;margin-bottom:12px}
.proj-kpi{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.proj-kv{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--cy);font-weight:500;background:rgba(0,184,212,.08);padding:3px 9px;border-radius:4px}
.proj-dsc{font-size:13px;color:rgba(255,255,255,.32);line-height:1.74;max-width:36ch;margin-bottom:24px}
.proj-cta{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:rgba(255,255,255,.5);text-decoration:none;transition:color .3s,gap .35s;margin-top:auto}
.proj-cln{width:20px;height:1px;background:rgba(255,255,255,.3);display:inline-block;transition:width .4s,background .3s}
.proj-cta:hover{color:var(--cy);gap:14px}.proj-cta:hover .proj-cln{background:var(--cy);width:36px}
.proj-prog{position:fixed;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.06);z-index:200;opacity:0;transition:opacity .4s;pointer-events:none}
.proj-prog.vis{opacity:1}
.proj-pf{height:100%;background:var(--cy);transform-origin:left;transform:scaleX(0)}
.proj-nav{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .4s;pointer-events:none}
.proj-nav.vis{opacity:1;pointer-events:auto}
.proj-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);cursor:pointer;transition:all .4s}
.proj-dot.on{background:var(--cy);width:22px;border-radius:3px}
@media(max-width:768px){
  .proj-card{grid-template-columns:1fr;height:auto}
  .proj-card-img{height:55vw;position:relative}
  .proj-card-img img{top:0;bottom:0;height:100%}
  .proj-info{padding:28px 22px;opacity:1;transform:none}
  .proj-bgn,.proj-nav{display:none}
}


/* ── MEGA MENU: 3 colonne con reveal sequenziale ── */
/* Il pannello copre SEMPRE tutto lo schermo (fondo pieno), così non si intravede
   mai la pagina sotto. L'effetto "reveal" è dato dalle colonne/voci che entrano a
   cascata (vedi più sotto), non da un clip-path che scopriva gli angoli. */
#mega{position:fixed;inset:0;z-index:580;background:#020202;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .35s;
  display:flex;flex-direction:column;overflow:hidden}
#mega.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
/* Glow che segue il mouse */
#mega::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,184,212,.055) 0%,transparent 68%);
  transform:translate(calc(var(--mx,50vw) - 300px),calc(var(--my,50vh) - 300px));
  pointer-events:none;z-index:0;transition:transform .55s ease;will-change:transform}
/* Linea decorativa verticale */
#mega::after{content:"";position:absolute;top:80px;bottom:80px;left:33.33%;
  width:.5px;background:rgba(255,255,255,.04);z-index:0;
  transform:scaleY(0);transform-origin:top;
  transition:transform .7s cubic-bezier(.77,0,.18,1) .4s}
#mega.open::after{transform:scaleY(1)}
/* Header del menu */
.mhd{display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;height:80px;flex-shrink:0;position:relative;z-index:2;
  opacity:0;transform:translateY(-10px);
  transition:opacity .35s .52s,transform .35s .52s}
#mega.open .mhd{opacity:1;transform:translateY(0)}
.mhd-logo{opacity:.28;transition:opacity .3s;cursor:pointer}.mhd-logo:hover{opacity:.6}
.mhd-close{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:none;cursor:pointer;
  color:rgba(255,255,255,.75);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:all .3s;font-family:var(--f)}
.mhd-close span{font-size:18px;line-height:1}
.mhd-close:hover{background:var(--cy);color:#001014;border-color:var(--cy)}
/* Corpo 3 colonne */
/* fullscreen: 3 colonne a tutta larghezza, attaccate (niente bordi), differenziate solo dalla tonalità */
.mbody{display:grid;grid-template-columns:repeat(3,1fr);flex:1;overflow:hidden;
  position:relative}
/* Colonne: fade+slide dal basso dopo il circle expand */
.mcol{display:flex;flex-direction:column;padding:120px clamp(30px,4vw,64px) 52px;
  position:relative;overflow:hidden;z-index:1;
  opacity:0;transform:translateY(28px);
  transition:opacity .55s cubic-bezier(.77,0,.18,1),transform .55s cubic-bezier(.77,0,.18,1),opacity .3s}
#mega.open .mcol:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.32s}
#mega.open .mcol:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.44s}
#mega.open .mcol:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.56s}
/* Sfondo di ogni colonna — leggermente diverso per profondità */
.mcol:nth-child(1){background:#0e0e10}
.mcol:nth-child(2){background:#0a0a0c}
.mcol:nth-child(3){background:#070708}
/* Numero di sfondo — scala da 0.8 a 1 */
.mcol-bgn{position:absolute;right:-20px;bottom:-40px;
  font-size:clamp(140px,22vw,300px);font-weight:700;
  color:rgba(255,255,255,.022);line-height:1;
  pointer-events:none;user-select:none;font-variant-numeric:tabular-nums;
  letter-spacing:-.08em;
  opacity:0;transform:scale(.85);
  transition:opacity .7s,transform .7s cubic-bezier(.34,1.2,.64,1)}
#mega.open .mcol:nth-child(1) .mcol-bgn{opacity:1;transform:scale(1);transition-delay:.42s}
#mega.open .mcol:nth-child(2) .mcol-bgn{opacity:1;transform:scale(1);transition-delay:.54s}
#mega.open .mcol:nth-child(3) .mcol-bgn{opacity:1;transform:scale(1);transition-delay:.66s}
/* Label colonna */
.mcol-label{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.2);font-weight:500;margin-bottom:32px;
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .4s,transform .4s}
.mcol-label::before{content:"";width:18px;height:.5px;background:rgba(255,255,255,.2)}
#mega.open .mcol:nth-child(1) .mcol-label{opacity:1;transform:translateY(0);transition-delay:.28s}
#mega.open .mcol:nth-child(2) .mcol-label{opacity:1;transform:translateY(0);transition-delay:.37s}
#mega.open .mcol:nth-child(3) .mcol-label{opacity:1;transform:translateY(0);transition-delay:.46s}
/* Link */
.mcol-body{display:flex;flex-direction:column;width:100%}
.mlink{display:flex;align-items:baseline;gap:12px;padding:12px 0;
  border-bottom:.5px solid rgba(255,255,255,.04);cursor:pointer;
  text-decoration:none;position:relative;
  opacity:0;transform:translateY(-12px);
  transition:opacity .38s,transform .38s cubic-bezier(.77,0,.18,1);
  will-change:transform}
.mlink:last-child{border-bottom:none}
/* Linea hover reveal */
.mlink::after{content:"";position:absolute;left:0;bottom:0;
  height:.5px;width:0;background:var(--cy);
  transition:width .45s cubic-bezier(.77,0,.18,1)}
.mlink:hover::after{width:100%}
/* Delay link nella col 1 */
#mega.open .mcol:nth-child(1) .mlink:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.32s}
#mega.open .mcol:nth-child(1) .mlink:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.38s}
#mega.open .mcol:nth-child(1) .mlink:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.44s}
#mega.open .mcol:nth-child(1) .mlink:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.50s}
#mega.open .mcol:nth-child(1) .mlink:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.56s}
#mega.open .mcol:nth-child(1) .mlink:nth-child(6){opacity:1;transform:translateY(0);transition-delay:.62s}
/* Delay link nella col 2 */
#mega.open .mcol:nth-child(2) .mlink:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.40s}
#mega.open .mcol:nth-child(2) .mlink:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.46s}
#mega.open .mcol:nth-child(2) .mlink:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.52s}
#mega.open .mcol:nth-child(2) .mlink:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.58s}
#mega.open .mcol:nth-child(2) .mlink:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.64s}
/* Delay link nella col 3 */
#mega.open .mcol:nth-child(3) .mlink:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.48s}
#mega.open .mcol:nth-child(3) .mlink:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.54s}
#mega.open .mcol:nth-child(3) .mlink:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.60s}
.mlink-n{font-size:10px;letter-spacing:.14em;color:rgba(0,184,212,.6);
  font-variant-numeric:tabular-nums;font-weight:500;flex-shrink:0;min-width:22px;
  transition:color .3s}
.mlink-t{font-size:clamp(15px,1.4vw,20px);font-weight:400;letter-spacing:.01em;text-transform:uppercase;
  color:rgba(255,255,255,.8);transition:color .35s}
/* Hover: solo la sottolineatura + voce un filo più bianca (niente movimento) */
.mlink:hover .mlink-t{color:#fff}
.mlink:hover .mlink-n{color:var(--cy)}
/* Link contatti (colonna 3) — diversi */
.mlink-contact .mlink-t{font-size:clamp(13px,1.3vw,16px);font-weight:300;
  color:rgba(255,255,255,.55);letter-spacing:-.01em}
.mlink-contact:hover .mlink-t{color:rgba(255,255,255,.7)}
/* CTA scrivici */
.mlink-cta .mlink-t{color:var(--cy);font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase}
.mlink-cta:hover .mlink-t{color:#fff}
/* Quando il mega e' aperto, TUTTE le voci sono visibili (a prescindere dal numero) */
#mega.open .mlink{opacity:1;transform:translateY(0)}

/* ── Mega menu accattivante: voci servizi con descrizione + freccia ── */
.mlink-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.mlink-d{font-size:13px;font-weight:300;color:rgba(255,255,255,.4);
  line-height:1.5;letter-spacing:0;text-transform:none;
  transition:color .35s,transform .35s cubic-bezier(.77,0,.18,1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mlink:hover .mlink-d{color:rgba(255,255,255,.7)}
/* Freccia direzionale */
.mlink-arr{font-size:18px;color:rgba(0,184,212,.35);font-weight:300;
  margin-left:auto;align-self:center;flex-shrink:0;
  transition:transform .35s cubic-bezier(.77,0,.18,1),color .35s;
  opacity:0;transform:translateX(-8px)}
.mlink:hover .mlink-arr{opacity:1;transform:translateX(0);color:var(--cy)}
/* Voci semplici della colonna Azienda */
.mlink-simple{align-items:center}
.mlink-simple .mlink-t{flex:1}
/* Linea hover più morbida */
.mlink::after{height:1px;background:linear-gradient(90deg,var(--cy),rgba(0,184,212,.2))}

/* CTA gigante in fondo alla colonna Azienda */
.mcta{margin-top:28px;padding:22px 24px;
  background:linear-gradient(135deg,rgba(0,184,212,.08),rgba(0,184,212,.02));
  border:.5px solid rgba(0,184,212,.18);border-radius:14px;
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s .7s,transform .5s .7s cubic-bezier(.77,0,.18,1)}
#mega.open .mcta{opacity:1;transform:translateY(0)}
.mcta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0,rgba(0,184,212,.18),transparent 60%);
  pointer-events:none}
.mcta-kick{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cy);font-weight:600;margin-bottom:8px;position:relative}
.mcta-title{font-size:clamp(20px,2.2vw,28px);font-weight:300;color:#fff;
  letter-spacing:-.015em;line-height:1.15;margin-bottom:18px;position:relative}
.mcta-btn{display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;background:var(--cy);
  color:#06121a;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;
  transition:background .25s,transform .25s,box-shadow .35s;
  position:relative;box-shadow:0 4px 20px rgba(0,184,212,.25)}
.mcta-btn:hover{background:#fff;color:#06121a;transform:translateX(4px);
  box-shadow:0 8px 28px rgba(0,184,212,.35)}

/* Bottoni rapidi WhatsApp / Telefono in fondo alla colonna 3 */
.mquick{display:flex;gap:10px;margin-top:30px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s .82s,transform .5s .82s cubic-bezier(.77,0,.18,1)}
#mega.open .mquick{opacity:1;transform:translateY(0)}
.mquick-btn{display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:12px;flex:1;
  border:.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.85);font-size:13px;font-weight:500;
  text-decoration:none;transition:all .3s cubic-bezier(.77,0,.18,1)}
.mquick-btn svg{color:rgba(255,255,255,.5);transition:color .3s}
.mquick-btn:hover{background:rgba(0,184,212,.08);border-color:rgba(0,184,212,.4);color:#fff;
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,184,212,.15)}
.mquick-btn:hover svg{color:var(--cy)}
.mquick-btn.wa:hover{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.4);box-shadow:0 6px 20px rgba(37,211,102,.15)}
.mquick-btn.wa:hover svg{color:#25d366}
.mquick-btn.wa-ch:hover{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.4);box-shadow:0 6px 20px rgba(37,211,102,.15)}
.mquick-btn.wa-ch:hover svg{color:#25d366}

/* Mobile: CTA + quick stack verticale, descrizione servizi nascosta per non far esplodere l'altezza */
@media (max-width:768px){
  .mlink-d{display:none}
  .mlink-arr{display:none}
  .mcta{padding:18px 20px;margin-top:18px}
  .mquick{flex-direction:column;margin-top:20px}
  .mquick-btn{padding:12px 16px}
}
/* Mega — colonna "Dove siamo" (contatti) */
.mwhere{display:flex;flex-direction:column;gap:20px;margin-top:6px}
.mwhere-name{font-size:21px;font-weight:600;color:#fff;letter-spacing:-.01em}
/* Indirizzo + valori recapiti: stesso peso delle voci principali del menu (400),
   non più light 300 che a video sparivano sul fondo scuro. */
.mwhere-addr{font-size:15px;color:rgba(255,255,255,.78);line-height:1.65;font-weight:400;margin-top:-10px}
.mwhere-row{display:flex;flex-direction:column;gap:5px;padding-top:18px;border-top:.5px solid rgba(255,255,255,.07)}
.mwhere-row>span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);font-weight:700}
.mwhere-row a,.mwhere-row>div{font-size:16px;color:#fff;font-weight:500;letter-spacing:-.01em;transition:color .25s}
/* contatti linkati: bianchi, senza sottolineatura (l'hover resta ciano) */
.mwhere-row a{text-decoration:none}
.mwhere-row a:hover{color:var(--cy)}
/* Riga social nel menu: icone in fila, bianche → ciano all'hover */
.msocial{display:flex;gap:16px;align-items:center;margin-top:2px}
.msocial a{display:inline-flex;color:#fff}
.msocial a:hover{color:var(--cy)}
/* Footer del menu */
.mfoot{padding:16px 52px;border-top:.5px solid rgba(255,255,255,.04);
  display:flex;justify-content:space-between;align-items:center;flex-shrink:0;
  opacity:0;transition:opacity .35s .62s}
#mega.open .mfoot{opacity:1}
.mfoot-copy{font-size:11px;color:rgba(255,255,255,.14);letter-spacing:.06em;font-family:var(--f)}
.mfoot-links{display:flex;gap:20px}
.mfoot-links a{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.2);
  text-decoration:none;transition:color .3s;font-family:var(--f);cursor:pointer;text-transform:uppercase}
.mfoot-links a:hover{color:rgba(255,255,255,.6)}
.mcol{transition:transform .68s cubic-bezier(.77,0,.18,1),opacity .3s}
@media(max-width:768px){
  .mbody{grid-template-columns:1fr;overflow-y:auto;padding-top:88px;align-content:start}
  .mcol{padding:0 22px;overflow:visible;opacity:1!important;transform:none!important;border-left:none;border-top:.5px solid rgba(255,255,255,.08)}
  .mcol:first-child{border-top:none}
  .mcol-bgn{display:none}
  /* Accordion mobile: l'intestazione apre/chiude le voci */
  .mcol-label{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;letter-spacing:.14em;color:rgba(255,255,255,.62);padding:24px 0;margin:0}
  .mcol-label::before{display:none}
  .mcol-label::after{content:"+";font-size:26px;font-weight:200;line-height:1;color:var(--cy)}
  .mcol.open .mcol-label{color:#fff}
  .mcol.open .mcol-label::after{content:"\2013"}
  .mcol-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.77,0,.18,1)}
  .mcol.open .mcol-body{max-height:80vh;padding-bottom:16px}
  .mlink{padding:15px 0}
  .mfoot{padding:14px 22px;flex-direction:column;gap:8px;align-items:flex-start}
}



/* ── INTRO REFERENZE ── */
.proj-top-bar{position:absolute;top:0;left:0;right:0;z-index:20;padding:28px 52px;display:flex;align-items:center;justify-content:space-between;border-bottom:.5px solid rgba(255,255,255,.05);pointer-events:none}
.proj-top-link{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;transition:color .3s;font-weight:500;pointer-events:auto;border-bottom:.5px solid rgba(255,255,255,.18);padding-bottom:2px}
.proj-top-link:hover{color:rgba(255,255,255,.7)}

/* ── REFERENZE: stacked cards a click ── */
.proj-sec{height:100svh;position:relative;overflow:hidden;background:var(--ink);z-index:3;isolation:isolate}
.proj-hdr{position:absolute;top:0;left:0;right:0;padding:80px 52px 0;z-index:30;pointer-events:none}
#projCards{position:absolute;inset:0}
.proj-card{position:absolute;inset:0;display:grid;grid-template-columns:58% 42%;
  will-change:transform,filter;transform-origin:top center;
  transition:transform .78s cubic-bezier(.77,0,.18,1),filter .78s,opacity .5s}
.proj-card.is-hidden{transform:translateY(100%);opacity:0;z-index:1}
.proj-card.is-active{transform:translateY(0) scale(1);filter:none;opacity:1;z-index:10}
.proj-card.is-prev1{transform:scale(.93) translateY(-14px);filter:blur(3px) brightness(.48);opacity:1;z-index:9}
.proj-card.is-prev2{transform:scale(.87) translateY(-28px);filter:blur(6px) brightness(.25);opacity:1;z-index:8}
.proj-card.is-prev3{transform:scale(.82) translateY(-40px);filter:blur(10px) brightness(.1);opacity:.7;z-index:7}
.proj-card.is-exiting{transform:translateY(100%);opacity:0;z-index:11;transition:transform .62s cubic-bezier(.77,0,.18,1),opacity .35s}
.proj-card-img{position:relative;overflow:hidden}
.proj-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.proj-img-ov{position:absolute;inset:0;background:linear-gradient(125deg,rgba(0,184,212,.07),transparent 55%);z-index:2;pointer-events:none}
.proj-bgn{position:absolute;top:-10px;left:16px;font-size:clamp(100px,18vw,240px);font-weight:700;color:rgba(255,255,255,.04);line-height:1;font-variant-numeric:tabular-nums;z-index:1;pointer-events:none;user-select:none}
.proj-info{background:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:56px 52px 100px;border-left:.5px solid rgba(255,255,255,.07)}
.proj-idx{font-size:11px;color:rgba(255,255,255,.22);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;font-variant-numeric:tabular-nums}
.proj-cats{display:flex;gap:6px;margin-bottom:14px}
.proj-cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.4);font-weight:500}
.proj-tit{font-size:clamp(26px,4.5vw,62px);font-weight:700;letter-spacing:-.045em;line-height:.94;color:#fff;margin-bottom:12px}
.proj-kpi{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.proj-kv{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--cy);font-weight:500;background:rgba(0,184,212,.08);padding:3px 9px;border-radius:4px}
.proj-dsc{font-size:13px;color:rgba(255,255,255,.32);line-height:1.74;max-width:36ch;margin-bottom:24px}
.proj-cta{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:rgba(255,255,255,.5);text-decoration:none;transition:color .3s,gap .35s;margin-top:auto}
.proj-cln{width:20px;height:1px;background:rgba(255,255,255,.3);display:inline-block;transition:width .4s,background .3s}
.proj-cta:hover{color:var(--cy);gap:14px}.proj-cta:hover .proj-cln{background:var(--cy);width:36px}
.proj-ui{position:absolute;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 52px 32px;pointer-events:none}
.proj-counter{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.28);font-variant-numeric:tabular-nums;pointer-events:none}
.proj-nav-row{display:flex;align-items:center;gap:12px;pointer-events:auto}
.proj-dots-row{display:flex;gap:6px;align-items:center}
.proj-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);cursor:pointer;transition:all .4s}
.proj-dot.on{background:var(--cy);width:22px;border-radius:3px}
.proj-arr{width:38px;height:38px;border-radius:50%;border:.5px solid rgba(255,255,255,.14);background:transparent;color:rgba(255,255,255,.45);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .3s;font-family:var(--f);line-height:1}
.proj-arr:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.proj-arr:disabled{opacity:.2;cursor:default;pointer-events:none}
.proj-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.06);z-index:25}
.proj-bar-fill{height:100%;background:var(--cy);transform-origin:left;transform:scaleX(0);transition:transform .78s cubic-bezier(.77,0,.18,1)}
@media(max-width:768px){
  .proj-card{grid-template-columns:1fr;grid-template-rows:50svw 1fr}
  .proj-card-img{position:relative}
  .proj-card-img img{position:absolute}
  .proj-info{padding:24px 22px 80px}
  .proj-bgn{display:none}
  .proj-ui{padding:0 22px 24px}
  .proj-hdr{display:none}
}

/* ── Hint "clicca per scorrere" ── */
.proj-hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  z-index:15;background:rgba(255,255,255,.11);backdrop-filter:blur(12px);
  border:.5px solid rgba(255,255,255,.22);border-radius:999px;
  padding:11px 22px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.8);font-family:var(--f);font-weight:500;white-space:nowrap;
  cursor:pointer;display:flex;align-items:center;gap:9px;
  animation:hintFloat 2.2s ease-in-out infinite;
  transition:opacity .6s,transform .6s cubic-bezier(.77,0,.18,1)}
.proj-hint.gone{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}
.proj-hint-arr{font-size:14px;color:var(--cy);display:inline-block;animation:hintArr 1.4s ease-in-out infinite}
@keyframes hintFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
@keyframes hintArr{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* Dots centrati sotto la sezione */
.proj-dots-center{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:22;display:flex;gap:8px;align-items:center;pointer-events:auto}
.proj-dot-c{width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.2);cursor:pointer;transition:all .45s cubic-bezier(.77,0,.18,1);
  border:.5px solid rgba(255,255,255,.15)}
.proj-dot-c.on{background:var(--cy);width:28px;border-radius:4px;border-color:transparent}
/* Info panel centrata verticalmente */
.proj-info{background:var(--ink);display:flex;flex-direction:column;
  justify-content:center;padding:52px 52px 80px;
  border-left:.5px solid rgba(255,255,255,.07)}
@media(max-width:768px){
  .proj-hint{bottom:20px;font-size:9px;padding:9px 16px}
  .proj-dots-center{bottom:20px}
  .proj-info{padding:24px 22px 80px;justify-content:flex-end}
}
/* ── INTRO REFERENZE ── */
.proj-top-bar{position:absolute;top:0;left:0;right:0;z-index:20;padding:28px 52px;display:flex;align-items:center;justify-content:space-between;border-bottom:.5px solid rgba(255,255,255,.05);pointer-events:none}
.proj-top-link{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);text-decoration:none;transition:color .3s;font-weight:500;pointer-events:auto;border-bottom:.5px solid rgba(255,255,255,.18);padding-bottom:2px}
.proj-top-link:hover{color:rgba(255,255,255,.7)}


/* ── LOGO REALE (nav: bianco su barra trasparente, nero su barra solida) ── */
.nav-logo{display:block;height:48px;width:auto}
.nav-logo-dark{display:none}
#nav.solid .nav-logo-light{display:none}
#nav.solid .nav-logo-dark{display:block}
@media(max-width:768px){.nav-logo{height:38px}}

/* ── Bollino "30 anni" (1996–2026) — hero, sezione CURA, footer, mega menu ── */
.h-top-r{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
/* aspect-ratio esplicito (il PNG è 493x401): l'altezza è nota PRIMA che l'immagine
   carichi → niente spostamenti di layout durante lo scroll (jump su iOS) */
.h-badge{width:clamp(112px,11vw,156px);height:auto;aspect-ratio:493/401;display:block;opacity:.95}
/* bollino 30 anni sovrapposto al "30" grigio (.mani-bg-num), in basso a destra */
.mani-badge{width:clamp(140px,15vw,210px);height:auto;aspect-ratio:493/401;display:block;position:absolute;right:clamp(24px,3.2vw,60px);bottom:clamp(48px,5vw,84px);z-index:2}
/* schermi intermedi: bollino ridotto e più accostato al bordo,
   per non toccare paragrafo e riga CTA */
@media(max-width:1500px){.mani-badge{width:clamp(105px,8.6vw,128px);right:clamp(18px,1.8vw,28px)}}
.ft-badge{width:150px;height:auto;aspect-ratio:493/401;display:block;margin-top:24px;opacity:.92}
.mfoot-l{display:flex;align-items:center;gap:20px}
.mfoot-badge{height:42px;width:auto;display:block}
@media(max-width:768px){
  .h-badge{width:96px}
  .mfoot-badge{height:36px}
}
@media(max-width:560px){
  .h-badge{display:none}
}

/* ════ METODO — sezione pinnata step-by-step (stesso effetto pagina servizio) ════ */
.ppin{background:var(--bg);position:relative;border-top:.5px solid var(--ln)}
.ppin-stage{height:100vh;height:100svh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ppin-head{position:absolute;top:clamp(40px,7vh,74px);left:0;right:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 24px;will-change:transform}
.ppin-head .kick{color:var(--cy)}
.ppin-word{display:inline-block;font-size:clamp(40px,7vw,92px);font-weight:700;letter-spacing:-.05em;line-height:.95;color:var(--ink);transform-origin:center center;will-change:transform}
.ppin-headdesc{display:block;max-width:46ch;margin:14px auto 0;font-size:clamp(16px,1.6vw,21px);line-height:1.6;color:var(--dim)}
.ppin-stepwrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0}
.ppin-line{position:absolute;left:50%;top:15vh;bottom:14vh;width:1.5px;transform:translateX(-50%);background:rgba(0,184,212,.05);z-index:2;overflow:hidden;border-radius:2px}
.ppin-line-fill{position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,184,212,.2);transform:scaleY(0);transform-origin:top;will-change:transform}
.ppin-bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(220px,42vw,520px);font-weight:800;color:rgba(0,0,0,.06);letter-spacing:-.08em;line-height:1;z-index:1;pointer-events:none;font-variant-numeric:tabular-nums;user-select:none}
/* arrivo del numero più evidente: pop (scala + dissolvenza) a ogni cambio step */
@keyframes ppinPop{0%{opacity:.2;transform:translate(-50%,-50%) scale(1.14)}55%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ppin-panels{position:relative;z-index:3;width:100%;max-width:680px;text-align:center}
.ppin-panel{position:absolute;left:0;right:0;top:50%;transform:translateY(-44%);opacity:0;transition:opacity .45s cubic-bezier(var(--ez)),transform .45s cubic-bezier(var(--ez));pointer-events:none}
.ppin-panel.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.ppin-pn{display:block;font-size:13px;letter-spacing:.3em;color:var(--cy);font-weight:600;margin-bottom:18px;font-variant-numeric:tabular-nums}
.ppin-pt{font-size:clamp(32px,5vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);margin-bottom:18px}
.ppin-pd{font-size:clamp(15px,1.55vw,20px);color:#3c3c3c;line-height:1.7;max-width:48ch;margin:0 auto 22px}
.ppin-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ppin-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;border:.5px solid rgba(0,184,212,.4);color:var(--cy);font-weight:500}
.ppin-dots{position:absolute;bottom:clamp(40px,7vh,74px);left:0;right:0;z-index:4;display:flex;gap:11px;justify-content:center}
.ppd{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.16);transition:transform .35s,background .35s}
.ppd.on{background:var(--cy);transform:scale(1.35)}
.ppin-static .ppin-stage{height:auto;display:block;overflow:visible;padding:clamp(60px,9vw,110px) clamp(20px,5vw,52px)}
.ppin-static .ppin-head{position:static;align-items:flex-start;text-align:left;margin-bottom:clamp(34px,5vw,56px);padding:0}
.ppin-static .ppin-word{transform:none!important}
.ppin-static .ppin-stepwrap{opacity:1!important;display:block;height:auto}
.ppin-static .ppin-line,.ppin-static .ppin-bg,.ppin-static .ppin-dots{display:none}
.ppin-static .ppin-panels{max-width:760px;margin:0;text-align:left}
.ppin-static .ppin-panel{position:static;opacity:1!important;transform:none!important;pointer-events:auto;padding:26px 0;border-bottom:.5px solid var(--ln)}
.ppin-static .ppin-pd{margin-left:0}
.ppin-static .ppin-tags{justify-content:flex-start}

/* Indicatori carosello news: nascosti su desktop, mostrati solo su mobile
   (override esplicito nel blocco @media(max-width:768px) sotto). */
.ni-dots{display:none}

/* ════════════════════════════════════════════════════════════════════════
   📱 OVERRIDE MOBILE (round 2 — 2026-06-24) — feedback utente
   ──────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* — HEADER MOBILE: z-index alto, e basta. Lo stato trasparente vs solido lo
       gestisce il JS (nav.js) togliendo/aggiungendo la classe .solid:
         - in cima alla pagina o quando il mega menu è aperto → niente .solid
           → nav trasparente, logo bianco, hamburger bianco.
         - scrollando giù di almeno 60px → .solid → bg bianco + logo nero. */
  /* 9990: sopra a TUTTI i contenuti di pagina, ma SOTTO la chat
     (pannello 9998, bottone 9999): a chat aperta logo e hamburger finiscono dietro. */
  #nav{z-index:9990!important}
  #nav.solid{background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:.5px solid var(--ln)!important}
  #nav.solid .nav-logo-light{opacity:0}
  #nav.solid .nav-logo-dark{opacity:1}
  #nav.solid .ham span{background:var(--ink)}

  /* MEGA MENU: su mobile niente decorazioni glow/linea. La copertura piena è
     gestita dalla regola base (#mega visibility) — niente clip-path (prima
     lasciava scoperto un angolo, "menu a 3/4"). */
  #mega::before,#mega::after{display:none!important}

  /* — BOLLINO 30 anni: footer/menu/CURA più piccoli. Nella sezione CURA lo
       spostiamo in ALTO a destra (vicino al "30" grigio decorativo), così non
       si sovrappone più al paragrafo "Ogni progetto...". */
  .ft-badge{width:90px;margin-top:18px}
  .mfoot-badge{height:30px}
  /* Bollino 30 anni: nel flusso del documento, allineato in basso a destra DOPO
     il testo (.mani-body) e PRIMA della foto della reception. Niente position:
     absolute così non c'è rischio di sovrapporsi al paragrafo. */
  .mani-badge{position:static!important;display:block!important;
    width:clamp(70px,18vw,96px)!important;height:auto;
    margin:24px 0 4px auto!important;opacity:.85;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important}

  /* — SEZIONE CURA: il testo (.mani-body) ha "margin-top:auto" per uso desktop
       (lo spinge in basso al container 660px alto). Su mobile lo annulliamo:
       il testo deve stare SUBITO sotto allo slogan "del DETTAGLIO". */
  .mani-L{padding:48px 22px 28px;min-height:0}
  .mani-R{min-height:200px}
  .mani-bg-num{font-size:clamp(140px,46vw,220px)}
  .mani-body{margin-top:18px!important;padding-top:0!important;
    opacity:1!important;transform:none!important;max-width:none}
  .mani-sub{opacity:1!important;transform:none!important}

  /* — PANNELLI SERVIZI: pin GSAP attivo anche su mobile. Lo scroll verticale
       della pagina viene trasformato in scroll orizzontale del track. Il CSS
       qui sotto serve solo per ridimensionare il layout su schermo piccolo
       (50/50 verticale e padding ridotti) — il movimento orizzontale lo fa
       GSAP via transform. NON tocchiamo overflow / scroll-snap / touch-action
       (sennò lottano col pin). */
  .svc-panel{grid-template-rows:1fr 1fr!important}
  .svc-pL{padding:clamp(40px,10vw,60px) 22px 18px;justify-content:flex-end;overflow:hidden}
  .svc-pR{padding:18px 22px 22px;justify-content:flex-start;overflow:hidden}
  .svc-pdsc{-webkit-line-clamp:6;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
    font-size:14px;line-height:1.55}
  .svc-ptit{font-size:clamp(26px,6.6vw,40px);margin-bottom:12px}
  .svc-pnum{font-size:clamp(60px,17vw,104px)}
  .svc-ptag{opacity:1;transform:none}
  .spips,.svc-mini-visual{display:none}

  /* — REFERENZE in evidenza: stesso aspetto della LISTA del portfolio (/lavori,
       .pf-fs-card): card a tutta larghezza, alte, impilate senza spazi, titolo
       grande leggero su immagine. */
  .rzo,.rzo-static{height:auto!important}
  .rzo-grid,.rzo-static .rzo-grid{grid-template-columns:1fr!important;gap:0!important;
    width:100%!important}
  .rzo-card,.rzo-static .rzo-card{aspect-ratio:auto!important;min-height:58svh!important;
    position:static!important;transform:none!important;opacity:1!important;
    width:auto!important;height:auto!important;left:auto!important;top:auto!important;
    grid-column:1!important;grid-row:auto!important;
    padding:32px 22px!important;justify-content:flex-end!important}
  .rzo-n{top:18px;right:22px;font-size:clamp(34px,11vw,64px)}
  .rzo-cat{font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--cy)}
  .rzo-tit{font-size:clamp(30px,8.5vw,50px);font-weight:300;line-height:1.0;
    letter-spacing:-.03em;color:#fff;margin-top:8px}
  .rzo-arr{margin-top:16px}

  /* — DECO PAROLE GIGANTI: nessuna deve uscire dallo schermo (NEWSLETTER,
       APPROFONDIMENTI, ESPLORA, ecc.). Regola globale per tutte le `.deco`. */
  .deco{font-size:clamp(38px,12vw,72px)!important;
    white-space:normal!important;word-break:break-word;line-height:.92}
  .h-nl{grid-template-columns:1fr;padding:32px 24px;gap:24px}
  .h-nl-title{font-size:clamp(22px,6.5vw,32px)}

  /* — NEWS in evidenza: slider a trascinamento (transform, guidato da home.js).
       `touch-action:pan-y`: lo swipe verticale scrolla la pagina, quello
       orizzontale muove lo slider — niente conflitto con lo scroll GSAP
       normalizzato (che rompeva lo scroll-touch nativo). */
  .ni-rail{overflow:hidden}
  .news-grid,.home-ni-grid,.ni-grid-full{display:flex!important;flex-direction:row!important;
    grid-template-columns:none!important;gap:14px;padding:0 22px;
    touch-action:pan-y;will-change:transform;
    transition:transform .45s cubic-bezier(.4,0,.2,1)}
  .ni-card,.news-card{flex:0 0 calc(100vw - 64px);width:calc(100vw - 64px);padding:18px;
    -webkit-user-select:none;user-select:none}
  .ni-card img{pointer-events:none;-webkit-user-drag:none}
  .ni-dots{display:flex!important;justify-content:center;gap:8px;margin-top:18px;padding:0 22px}
  .ni-dot{width:8px;height:8px;border-radius:50%;background:rgba(15,23,42,.18);
    transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;border:0;padding:0;flex-shrink:0}
  .ni-dot.on{background:var(--cy);width:24px;border-radius:4px}
  .ni-card .ni-tit,.news-card .news-tit{font-size:16px;line-height:1.3}
  .ni-card .ni-desc,.news-card .news-desc{font-size:13px;-webkit-line-clamp:3}
}

/* Telefoni più stretti (iPhone SE / 360px e simili): un giro extra di refinement. */
@media(max-width:560px){
  .ft-badge{width:78px}
  .mani-badge{width:80px;right:12px;bottom:12px}
  .mani-bg-num{font-size:clamp(120px,42vw,180px)}
  .h-nl-sec{padding:0 16px 60px}
}

/* Forza il rendering "testuale" dei caratteri unicode (frecce + stelline) su mobile
   iOS/Android — altrimenti vengono renderizzati come emoji colorate. */
body,body *{font-variant-emoji:text}

/* Rimando al video aziendale nel blocco "CURA del dettaglio" */
/* Pulsante video aziendale: pillola nera piena (più in evidenza del vecchio
   link testuale), play cyan tondo a sinistra, lift al passaggio del mouse */
/* Link "Conosci l'azienda": fisso subito dopo il paragrafo */
.mani-more{margin:20px 0 18px;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding-bottom:2px;border-bottom:1.5px solid rgba(0,0,0,.18);position:relative;z-index:1;transition:border-color .25s,gap .25s}
.mani-more:hover{border-color:var(--ink);gap:12px}
/* margin-top:auto = il pulsante video si ancora in FONDO alla colonna,
   sulla stessa linea del bollino 30 anni */
.mani-video-link{display:inline-flex;align-items:center;gap:12px;margin-top:auto;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:11px 28px 11px 12px;text-decoration:none;position:relative;z-index:1;box-shadow:0 10px 26px rgba(0,0,0,.18);transition:transform .25s,box-shadow .25s,gap .25s}
.mani-video-link .mvl-play{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--cy);color:#001014;padding-left:2px;flex-shrink:0;box-shadow:0 4px 14px rgba(0,184,212,.45);transition:transform .25s}
.mani-video-link:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.26);gap:15px}
.mani-video-link:hover .mvl-play{transform:scale(1.12)}
/* Tablet/mobile (layout impilato): niente ancoraggio in fondo, il pulsante segue
   il testo con un respiro fisso. DEVE stare DOPO la regola base per vincere. */
@media(max-width:768px){.mani-video-link{margin-top:22px}}

/* ── Recensioni Google in home (lette via API lato server, grafica nostra) ──
   Fascia con tinta azzurrina volutamente DIVERSA dal grigio della fascia News. */
.rw-sec{padding:clamp(60px,8vw,96px) clamp(20px,5vw,52px);background:#e9f2f4;border-top:.5px solid var(--ln)}
.rw-hdr{margin-bottom:clamp(28px,3.5vw,48px)}
.rw-hdr .deco{font-size:clamp(48px,9vw,150px);line-height:.9}
/* riepilogo: voto gigante + stelle + azioni Google */
.rw-top{margin:0 0 clamp(24px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rw-score{display:flex;align-items:center;gap:18px}
.rw-score>b{font-size:clamp(52px,6vw,84px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.rw-stars{display:flex;gap:3px}
.rw-stars svg{fill:#cfdde2}
.rw-stars svg.on{fill:#f5b301}
.rw-tot{display:block;font-size:13px;color:var(--dim);margin-top:6px}
.rw-btns{display:flex;gap:10px;flex-wrap:wrap}
.rw-gbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px 28px;border-radius:999px;text-decoration:none;transition:background .25s,border-color .25s,color .25s,transform .2s}
.rw-gbtn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.rw-wbtn{background:var(--ink);color:#fff}
.rw-wbtn:hover{background:var(--cy);border-color:var(--cy);color:#fff}
/* frecce dello slider */
.rw-nav{margin:0 0 clamp(14px,2vw,22px);display:flex;justify-content:flex-end;gap:8px}
.rw-arr{width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.28);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .2s;padding:0}
.rw-arr:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
/* slider full-bleed: le card scorrono da bordo a bordo dello schermo */
.rw-slider{margin:0 calc(50% - 50vw)}
/* padding laterale = padding di .rw-sec: la prima card parte sotto la D di DICONO.
   scroll-padding uguale, altrimenti lo snap riporta la card a filo del bordo. */
.rw-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px clamp(20px,5vw,52px) 10px;scroll-padding-inline:clamp(20px,5vw,52px);scrollbar-width:none;cursor:grab}
.rw-track::-webkit-scrollbar{display:none}
.rw-track.rw-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
/* card recensione: virgolettone ciano, testo protagonista, firma in basso */
.rw-card{flex:0 0 clamp(240px,21vw,310px);min-width:0;scroll-snap-align:start;background:var(--w);border:1px solid rgba(0,0,0,.05);border-radius:16px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:12px;min-height:250px}
.rw-card::before{content:"\201C";font-family:Georgia,"Times New Roman",serif;font-size:54px;line-height:.55;color:var(--cy);height:.42em;flex-shrink:0}
.rw-txt{margin:0;flex:1;font-size:13px;line-height:1.7;color:#3a3a3a;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.rw-card-hd{display:flex;align-items:center;gap:11px;padding-top:16px;border-top:.5px solid rgba(0,0,0,.08)}
.rw-ava{width:38px;height:38px;border-radius:50%;background:var(--cy);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rw-who{min-width:0;flex:1}
.rw-who b{display:block;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);margin-top:2px}
.rw-stars-sm{flex-shrink:0;gap:1px}
.rw-stars-sm svg{width:12px;height:12px}
/* variante scura: spezza il ritmo (una card ogni tre) */
.rw-dark{background:#0b0b0b;border-color:transparent}
.rw-dark .rw-txt{color:rgba(255,255,255,.82)}
.rw-dark .rw-who b{color:#fff}
.rw-dark .rw-meta{color:rgba(255,255,255,.45)}
.rw-dark .rw-card-hd{border-top-color:rgba(255,255,255,.12)}
.rw-dark .rw-stars svg{fill:rgba(255,255,255,.18)}
.rw-dark .rw-stars svg.on{fill:#f5b301}
@media(max-width:640px){
  /* due card per schermata, si scorre col dito */
  .rw-track{gap:10px;padding-left:20px;padding-right:20px;scroll-padding-inline:20px}
  .rw-card{flex-basis:calc((100vw - 50px)/2);min-height:210px;padding:16px 14px 14px;gap:10px}
  .rw-card::before{font-size:42px}
  .rw-txt{font-size:12px;line-height:1.6;-webkit-line-clamp:6}
  .rw-card-hd{padding-top:12px;gap:8px}
  .rw-ava{width:28px;height:28px;font-size:12px}
  .rw-who b{font-size:12px}
  .rw-meta{font-size:10px;gap:4px}
  .rw-stars-sm svg{width:10px;height:10px}
  .rw-nav{display:none}
}

/* ── Richiamo AI in home: fascia PIENA a tutta larghezza, stessa tinta
   azzurrina della fascia recensioni (#e9f2f4). Prima del METODO. ── */
.hai-sec{background:#e9f2f4;border-top:.5px solid var(--ln);padding:clamp(56px,7.5vw,100px) clamp(20px,5vw,52px);position:relative;overflow:hidden}
/* marchio in filigrana sul lato del pulsante: nero (via filtro), metà fuori dal bordo destro */
.hai-mark{position:absolute;right:0;top:50%;transform:translate(50%,-50%);height:180%;width:auto;filter:brightness(0);opacity:.05;pointer-events:none;user-select:none}
.hai{display:grid;grid-template-columns:1.1fr auto;gap:clamp(40px,5vw,80px);align-items:center;max-width:1400px;margin:0 auto;position:relative;z-index:2}
.hai-kick{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cy);font-weight:600;display:block;margin-bottom:14px}
.hai-title{font-size:clamp(28px,3.4vw,44px);font-weight:300;letter-spacing:-.025em;line-height:1.1;color:var(--ink);margin:0 0 18px}
.hai-title em{font-style:normal;color:#0794ab;font-weight:600}
/* pillole in griglia 2x2: tutte della STESSA larghezza, testo centrato */
.hai-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:580px}
.hai-chip{font-size:11.5px;font-weight:600;letter-spacing:.05em;padding:9px 16px;border-radius:999px;background:var(--w);color:var(--ink);border:1px solid rgba(0,0,0,.08);text-align:center;white-space:nowrap}
@media(max-width:520px){.hai-chips{grid-template-columns:1fr}.hai-chip{white-space:normal}}
.hai-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:16px 32px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .25s,border-color .25s,transform .2s}
.hai-btn:hover{background:var(--cy);border-color:var(--cy);transform:translateY(-2px)}
@media(max-width:900px){.hai{grid-template-columns:1fr;gap:24px}}

/* ── SEZIONE CURA, fascia tablet-orizzontale (769-1100px): colonne affiancate ma
   strette → niente ancoraggio in fondo del pulsante (si pestava col bollino).
   Tutto in flusso: testo → pulsante → bollino piccolo allineato a destra.
   In fondo al file APPOSTA: deve vincere sulle regole base per ordine. ── */
@media(min-width:769px) and (max-width:1100px){
  .mani-video-link{margin-top:22px}
  .mani-badge{position:static;width:120px;margin:28px 0 0 auto}
}

/* ── SEZIONE CURA, telefono/tablet verticale (≤768px): il pulsante video si
   RIDIMENSIONA con lo schermo (font e play proporzionali) e il bollino 30 anni
   gli sta accanto a destra, agganciato alla STESSA linea di base (bottom = padding
   colonna, come il pulsante che chiude il flusso). In fondo al file: vince per ordine. ── */
@media(max-width:768px){
  .mani-video-link{margin-top:22px;font-size:clamp(10px,2.9vw,12px);padding:9px 20px 9px 10px;gap:10px}
  .mani-video-link .mvl-play{width:clamp(26px,7vw,32px);height:clamp(26px,7vw,32px)}
  .mani-more{font-size:clamp(10px,2.9vw,12px)}
  .mani-badge{position:absolute!important;left:auto!important;top:auto!important;
    right:22px!important;bottom:28px!important;
    width:clamp(64px,18vw,96px)!important;margin:0!important}
}

/* (il blocco "riga CTA ≤1500px" è stato rimosso: il link Conosci l'azienda ora
   sta subito dopo il testo e il pulsante video, da solo, non tocca mai il bollino) */

/* ── MENU APERTO: la barra (logo + X) ha fondo scuro pieno come il menu, così
   le voci che scorrono ci spariscono sotto invece di sovrapporsi (bug mobile).
   In fondo al file: deve vincere su #nav e #nav.solid per ordine. ── */
#nav.menu-aperto{background:#020202!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.08)!important}
#nav.menu-aperto .nav-logo-light{display:block;opacity:1}
#nav.menu-aperto .nav-logo-dark{display:none;opacity:0}
#nav.menu-aperto .ham span{background:var(--w)!important}

/* ── FIREFOX: niente sfocatura (backdrop-filter) sugli elementi FISSI durante
   lo scroll — su Firefox la sfocatura è calcolata dalla CPU a ogni frame e
   faceva scattare tutto il sito. Compensata con fondi un filo più opachi.
   Il trucco @supports(-moz-appearance:none) seleziona SOLO Firefox. ── */
@supports (-moz-appearance:none){
  #nav.solid{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.98)!important}
}

/* ── Privacy/Cookie INLINE nella riga societaria del footer ──
   La regola generale "footer a" rende i link block (voci di colonna):
   dentro .fbot devono invece scorrere orizzontali accanto alla P.IVA. */
.fbot span a{display:inline;margin:0;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px}
.fbot span a:hover{color:var(--cy)}

/* ── Social del footer al CENTRO ESATTO della pagina (a destra finivano sotto
   la bolla del chatbot). Griglia a 3 zone: se lo schermo si stringe, le icone
   scivolano verso destra senza mai sovrapporsi ai dati societari.
   Su mobile resta il layout in colonna (regola @768 sopra). ── */
.fbot .fsoc{margin:0 auto}
@media(min-width:769px){
  .fbot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .fbot>span{grid-column:1;justify-self:start}
  .fbot .fsoc{grid-column:2;margin:0}
}

/* ── Marchio registrato ®: sempre piccolo e in apice, mai a corpo pieno ── */
.rmark{font-size:.42em;vertical-align:super;line-height:0;letter-spacing:0;font-style:normal}

/* ── Banner cookie GDPRSet COMPATTO su mobile ──
   Il widget occupava ~metà schermo ed essendo il blocco più grande diventava
   l'elemento LCP (arrivando tardi affossava PageSpeed). Testo più piccolo e
   spazi stretti: stesso contenuto, metà ingombro. */
@media(max-width:768px){
  #freegdpr-div-widget{font-size:11px!important;line-height:1.35!important;padding:10px 12px!important}
  #freegdpr-div-widget p,#freegdpr-div-widget span,#freegdpr-div-widget div{font-size:11px!important;line-height:1.35!important}
  #freegdpr-div-widget a,#freegdpr-div-widget button{font-size:11px!important;padding:6px 12px!important;margin:2px!important}
  #freegdpr-div-widget img{max-height:16px!important}
}