/* ============================================================
   PAGINE INTERNE infosoft.it — stile condiviso
   (la palette/--variabili arrivano da home.css, caricato prima)
   ============================================================ */

.site-page{background:var(--w);color:var(--ink)}
.site-main{min-height:60vh}

/* ── NAV interna (elegante: blur, sottolineato animato, CTA piena) ── */
.snav{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,56px);height:76px;
  background:rgba(8,8,8,.7);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.snav-logo{display:flex;align-items:center}
.snav-logo img{height:34px;width:auto;display:block;transition:opacity .3s}
.snav-logo:hover img{opacity:.6}
.snav-links{display:flex;align-items:center;gap:clamp(22px,2.8vw,44px)}
.snav-links a{
  position:relative;color:rgba(255,255,255,.78);text-decoration:none;
  font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 0;transition:color .3s;
}
.snav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:var(--cy);transition:right .45s cubic-bezier(var(--ez));
}
.snav-links a:hover{color:#fff}
.snav-links a.on{color:#fff}
.snav-links a:hover::after,.snav-links a.on::after{right:0}
.snav-cta{
  color:#001014 !important;background:var(--cy);border-radius:999px;
  padding:10px 22px;letter-spacing:.08em;
  transition:transform .3s,box-shadow .3s,background .3s;
}
.snav-cta::after{display:none !important}
.snav-cta:hover{transform:translateY(-1px);background:#1fd0ee;box-shadow:0 10px 28px rgba(0,184,212,.32)}
.snav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.snav-burger span{width:24px;height:2px;background:#fff;transition:.3s}

/* ── Testata di pagina ── */
.page-hero{
  background:#080808;color:#fff;
  /* Più respiro sopra/sotto al titolo principale di tutte le pagine interne.
     Su mobile (clamp inferiore) il padding-top era 140px = quasi metà schermo iPhone SE
     che mangia la prima viewport. Abbassato a 110px per dare più contenuto subito visibile. */
  padding:clamp(110px,15vw,200px) clamp(20px,5vw,80px) clamp(54px,8vw,110px);
  position:relative;overflow:hidden;
}
/* Anchor target offset: 96px desktop / 72px mobile (nav più basso) */
@media(max-width:768px){
  :target,[id]{scroll-margin-top:72px}
}
.page-hero::after{
  content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,184,212,.14),transparent 68%);pointer-events:none;
}
.ph-kick{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--cy);font-weight:600;display:block;margin-bottom:28px}
/* Larghezza più generosa così "Lavori che parlano da soli." e simili non spezzano alla 2a parola */
.ph-title{font-size:clamp(38px,7vw,86px);font-weight:600;line-height:.98;letter-spacing:-.03em;max-width:22ch;margin-bottom:0}
/* Tagline del servizio: ruolo tipografico distinto da .ph-title così è
   personalizzabile da Gestione Stile separatamente. Default: ciano sotto al titolo. */
.ph-tagline{margin:14px 0 0;font-size:clamp(20px,2.4vw,32px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--cy);max-width:30ch}
/* Più aria sopra al sottotitolo, e tipografia più ariosa. */
.ph-sub{margin-top:36px;max-width:68ch;color:rgba(255,255,255,.82);font-size:clamp(16px,1.7vw,20px);line-height:1.7;font-weight:300}
.ph-crumb{margin-bottom:26px;font-size:12px;color:rgba(255,255,255,.55)}
.ph-crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.ph-crumb a:hover{color:var(--cy)}
/* Hero a particelle su tutte le testate (canvas dietro, contenuto davanti) */
.page-hero .ph-canvas,.cs-hero .ph-canvas,.art-hero .ph-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
.page-hero>*:not(.ph-canvas),.cs-hero>*:not(.ph-canvas){position:relative;z-index:3}
.art-hero .art-hero-in{z-index:3}
.page-hero::after,.cs-hero::after,.art-hero::after{z-index:2}

/* ── INDICE SERVIZI ── */
.svc-index{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding:clamp(40px,5vw,72px) clamp(16px,2.5vw,34px);
}
@media(max-width:1200px){.svc-index{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.svc-index{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.svc-index{grid-template-columns:1fr}}
.svc-card{
  background:var(--w);border:1px solid var(--ln);border-radius:18px;
  padding:clamp(26px,3vw,38px);text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;min-height:286px;position:relative;overflow:hidden;
  transition:border-color .3s,box-shadow .35s,transform .35s;
}
.svc-card:hover{border-color:var(--cy);box-shadow:0 20px 44px -20px rgba(0,184,212,.4);transform:translateY(-4px)}
/* filo d'accento ciano che scorre in alto all'hover */
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--cy);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.svc-card-ico{width:54px;height:54px;border-radius:14px;background:rgba(0,184,212,.1);color:var(--cy);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,color .3s,transform .3s}
.svc-card-ico svg{width:26px;height:26px;display:block}
.svc-card:hover .svc-card-ico{background:var(--cy);color:#fff;transform:scale(1.05)}
.svc-card-n{font-size:13px;font-weight:700;color:var(--cy);letter-spacing:.14em;opacity:.5}
.svc-card-tit{font-size:clamp(22px,2.3vw,28px);font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.svc-card-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy);font-weight:600;margin:0 0 12px}
.svc-card-dsc{font-size:14.5px;line-height:1.6;color:var(--dim);margin:0;max-width:44ch}
.svc-card-arr{margin-top:auto;padding-top:24px;font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:gap .3s,color .3s}
.svc-card:hover .svc-card-arr{gap:14px;color:var(--cy)}

/* ── DETTAGLIO SERVIZIO (layout del mockup) ── */
/* Hero pagina con canvas particelle */
.ph{position:relative;min-height:72vh;display:flex;flex-direction:column;justify-content:flex-end;background:#040404;overflow:hidden}
.ph-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
.ph::before{content:"";position:absolute;bottom:0;left:0;right:0;height:60%;z-index:2;background:linear-gradient(to top,rgba(4,4,4,.98) 0%,transparent);pointer-events:none}
.ph-body{position:relative;z-index:3;padding:0 clamp(20px,5vw,52px) clamp(48px,6vw,64px)}
.ph-bread{display:flex;align-items:center;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.ph-bread a,.ph-bread span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;font-weight:500;transition:color .3s}
.ph-bread a:hover{color:rgba(255,255,255,.8)}
.ph-bread-sep{color:rgba(255,255,255,.14);font-size:10px}
.ph-bread .current{color:var(--cy)}
.ph-num{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);font-weight:500;margin-bottom:14px}
.ph-h1{font-size:clamp(48px,12vw,150px);font-weight:200;letter-spacing:-.07em;line-height:.88;color:#fff;margin-bottom:20px;overflow-wrap:break-word}
.ph-h1 strong{font-weight:700;color:var(--cy);display:block;font-size:.7em;text-transform:uppercase;letter-spacing:-.04em}
.ph-tag{font-size:clamp(14px,1.5vw,18px);color:rgba(255,255,255,.62);max-width:52ch;line-height:1.72}
.ph-stats{display:flex;flex-wrap:wrap;margin-top:40px;border-top:.5px solid rgba(255,255,255,.07);padding-top:28px}
.ph-stat{display:flex;flex-direction:column;gap:4px;padding-right:40px;border-right:.5px solid rgba(255,255,255,.07);margin-right:40px}
.ph-stat:last-child{border-right:none;padding-right:0;margin-right:0}
.ph-stat-n{font-size:clamp(22px,3vw,36px);font-weight:700;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ph-stat-l{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46);font-weight:500}

/* Sezioni tipo */
.sec{padding:clamp(74px,10vw,128px) clamp(20px,5vw,52px)}
.sec-bg{background:var(--bg)}
.sec-white{background:var(--w)}
/* Su pagine interne il testo gigante "deco" e' visibile di default (reveal = extra) */
.site-page .deco{transform:none;opacity:1}
.site-page .deco-sub{opacity:1;transform:none}
/* sotto-etichetta sotto la parola gigante: leggibile (non microscopica) */
.deco-sub{font-size:clamp(16px,1.8vw,24px);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:500;margin-top:14px}
/* sotto-etichetta allineata al bordo destro della parola deco */
.deco-head .deco-sub{text-align:right}

/* ① Intro */
/* minmax(0,1fr): senza questo una parola lunga del titolone impone la larghezza
   della sua colonna (1fr non scende sotto il contenuto) e schiaccia il testo. */
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:start}
/* Il titolone è tarato sulle sezioni a TUTTA larghezza (fino a 224px): in una
   colonna a metà pagina sfonda. Qui va proporzionato alla colonna, e deve poter
   andare a capo invece di imporre la propria larghezza. */
/* Specificità alta di proposito: deve battere .st-intro .deco (150px), che è
   pensata per titoli a tutta larghezza e qui sfonderebbe la colonna.
   NB: .deco-head resta width:max-content (come da base) così si stringe sul
   titolo e il .deco-sub, allineato a destra, si incastra sotto la sua fine. */
.intro-grid .deco-wrap .deco{font-size:clamp(44px,6.5vw,116px)}
/* Titolone + testo affiancati solo quando c'è spazio vero: sotto i 1100px (tablet
   in orizzontale, finestre strette) il testo va sotto il titolo. */
/* minmax(0,1fr) e non 1fr: col solo 1fr la colonna non può scendere sotto il suo
   contenuto "incomprimibile" e su mobile il testo sborda oltre lo schermo. */
@media(max-width:1100px){.intro-grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,36px)}}
.intro-r{padding-top:48px}
.intro-r h2{font-size:clamp(22px,2.5vw,34px);font-weight:700;letter-spacing:-.04em;margin-bottom:18px;color:var(--ink);line-height:1.1}
.intro-bg-num{position:absolute;right:-20px;bottom:-40px;font-size:clamp(160px,26vw,340px);font-weight:700;color:rgba(0,0,0,.028);letter-spacing:-.08em;line-height:1;pointer-events:none;user-select:none;font-variant-numeric:tabular-nums;z-index:0}

/* ② Caratteristiche — stile CARD uniforme con sottoservizi (.sp-card) */
.feat-hdr{text-align:right;margin-bottom:clamp(40px,5vw,56px)}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2vw,26px);max-width:1400px;margin:0 auto}
.feat-card{background:var(--w);border:1px solid var(--ln);border-radius:16px;
  padding:clamp(28px,3vw,40px) clamp(26px,2.6vw,34px);
  position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.77,0,.18,1),box-shadow .4s,border-color .4s}
.feat-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(0,0,0,.07);border-color:rgba(0,184,212,.3)}
.feat-card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0,rgba(0,184,212,.05),transparent 60%);
  opacity:0;transition:opacity .4s;pointer-events:none}
.feat-card:hover::before{opacity:1}
.feat-n{font-size:11px;letter-spacing:.22em;color:var(--cy);font-weight:700;
  font-variant-numeric:tabular-nums;margin-bottom:14px;display:block;position:relative}
.feat-title{font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:10px;line-height:1.2;position:relative}
.feat-desc{font-size:14.5px;color:var(--dim);line-height:1.65;position:relative}

/* ③ Processo */
.proc-wrap{display:grid;grid-template-columns:.7fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}
.proc-steps{border-top:.5px solid var(--ln)}
.proc-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;padding:clamp(26px,3.5vh,40px) 0;border-bottom:.5px solid var(--ln)}
.proc-step-n{font-size:clamp(38px,5.4vw,66px);font-weight:700;color:rgba(0,0,0,.12);letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;transition:color .45s cubic-bezier(var(--ez)),transform .45s cubic-bezier(var(--ez));padding-top:2px;transform-origin:left center}
.proc-step:hover .proc-step-n{color:var(--cy)}
.proc-step-body h3{font-size:clamp(16px,1.8vw,22px);font-weight:700;letter-spacing:-.03em;margin-bottom:7px;color:var(--ink)}
.proc-step-body p{font-size:13px;color:var(--dim);line-height:1.72;max-width:40ch}
.proc-step-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.proc-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:.5px solid var(--ln);color:var(--dim);font-weight:500}

/* ④ Referenze correlate */
.ref-sec{background:var(--ink);padding:clamp(60px,8vw,88px) clamp(20px,5vw,52px)}
.ref-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:20px;flex-wrap:wrap}
/* Referenze fotografiche: la card È il progetto — foto di sfondo, cliente in
   evidenza, settore/anno. Senza foto: fondo scuro pulito (fallback). */
.ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ref-card{position:relative;overflow:hidden;border-radius:16px;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(280px,30vw,400px);padding:clamp(22px,2.4vw,34px);background:linear-gradient(160deg,#141a20,#090c10)}
.ref-card.has-img::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center top;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ref-card.has-img:hover::before{transform:scale(1.05)}
.ref-card.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,9,.92) 0%,rgba(4,6,9,.35) 55%,rgba(4,6,9,.2) 100%)}
.ref-card-cats{position:absolute;top:16px;left:16px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.ref-card-cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(4,6,9,.55);backdrop-filter:blur(4px);color:rgba(255,255,255,.8);font-weight:600}
.ref-card-body{position:relative;z-index:2;display:flex;flex-direction:column}
.ref-card-cli{font-size:clamp(11px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--cy);font-weight:700;margin-bottom:8px}
.ref-card-tit{font-size:clamp(20px,2.3vw,32px);font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.08}
.ref-card-meta{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:7px}
.ref-card-arr{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.65);transition:color .3s,gap .35s;margin-top:16px}
.ref-card:hover .ref-card-arr{color:var(--cy);gap:14px}

/* ⑤ CTA finale */
.cta-sec{background:#040404;padding:clamp(68px,9vw,96px) clamp(20px,5vw,52px);text-align:center;display:flex;flex-direction:column;align-items:center;border-top:.5px solid rgba(255,255,255,.05)}
.cta-q{width:1px;height:52px;background:var(--cy);margin-bottom:28px}
.cta-h{font-size:clamp(36px,8vw,100px);font-weight:200;letter-spacing:-.055em;color:#fff;line-height:.95;max-width:14ch}
.cta-h em{font-style:normal;color:var(--cy)}
.cta-sub{font-size:clamp(13px,1.2vw,16px);color:rgba(255,255,255,.55);margin-top:24px;max-width:48ch;line-height:1.7}
.cta-btn{display:inline-flex;align-items:center;gap:12px;background:var(--cy);color:#000;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:15px 34px;border-radius:999px;text-decoration:none;margin-top:36px;transition:background .35s,gap .4s,transform .2s}
.cta-btn:hover{background:#00d4f5;gap:18px}.cta-btn:active{transform:scale(.97)}
.cta-arr{width:20px;height:1px;background:#000;display:inline-block;transition:width .4s}
.cta-btn:hover .cta-arr{width:32px}

/* ── NEWS: elenco articoli ── */
/* news-index ora è una SECTION normale, non più una grid (era il bug delle
   card schiacciate sotto a "Altri approfondimenti"). La grid è dentro .ni-grid. */
.news-index{padding:clamp(40px,5vw,72px) clamp(20px,5vw,80px)}

/* Lavori (pagina elenco): griglia uniforme 3 per riga, schede tutte uguali */
.lav-index{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(260px,26vw,340px)}
.lav-index .work-card{grid-column:auto !important;grid-row:auto !important}
@media(max-width:900px){.lav-index{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.lav-index{grid-template-columns:1fr;grid-auto-rows:240px}}

/* ════ PORTFOLIO — elenco referenze: filtro categorie + schede stile home (.rzo) ════ */
.pf-sec{padding:clamp(26px,3.5vw,46px) clamp(20px,5vw,52px) clamp(60px,8vw,110px);background:var(--w)}
.pf-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,3vw,40px)}
.pf-chip{font:inherit;cursor:pointer;border:.5px solid var(--ln);background:transparent;color:var(--ink);border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;transition:background .25s,color .25s,border-color .25s}
.pf-chip:hover{border-color:var(--cy);color:var(--cy)}
.pf-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* griglia statica con le stesse schede della home (.rzo-card), senza l'effetto pin/fullscreen */
.pf-rzo{width:100%;max-width:1400px;margin:0 auto}
/* Filtro categorie: chip su desktop, una sola pill a tendina su mobile
   (le chip andrebbero a capo su più righe allungando troppo la pagina). */
.pf-select-wrap{display:none;position:relative;width:100%}
.pf-select{appearance:none;-webkit-appearance:none;font:inherit;width:100%;cursor:pointer;
  border:.5px solid var(--ln);background:var(--w);color:var(--ink);border-radius:999px;
  padding:13px 42px 13px 20px;font-size:14px;font-weight:600;outline:none}
.pf-select:focus{border-color:var(--cy)}
.pf-select-wrap::after{content:"";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  pointer-events:none;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink)}
@media(max-width:768px){
  .pf-filter .pf-chip{display:none}
  .pf-select-wrap{display:block}
}
.pf-noresult{padding:36px 2px;color:var(--dim);font-size:15px}
/* "Carica altre" nel portfolio: mostra 8 progetti alla volta */
.pf-more-wrap{display:flex;justify-content:center;margin-top:clamp(30px,4vw,52px)}
.pf-more-wrap[hidden]{display:none}
.pf-more{font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,transform .2s}
.pf-more:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.pf-more:active{transform:translateY(0)}
.ni-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--w);border-radius:16px;overflow:hidden;border:1px solid var(--ln);transition:transform .4s cubic-bezier(var(--ez)),box-shadow .4s}
.ni-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.12)}
.ni-img{aspect-ratio:16/10;position:relative;overflow:hidden;background:#0b1320}
.ni-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(var(--ez))}
.ni-card:hover .ni-img img{transform:scale(1.05)}
.ni-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.ni-cat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy);font-weight:600;margin-bottom:10px}
.ni-tit{font-size:clamp(18px,1.9vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.18}
.ni-exc{font-size:14px;line-height:1.6;color:var(--dim);margin-top:10px}
.ni-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px;font-size:12px;color:var(--dim)}
.ni-arr{color:var(--cy);font-weight:700;transition:transform .3s}
.ni-card:hover .ni-arr{transform:translateX(4px)}

/* ── ARTICOLO: dettaglio ── */
.art-hero{background:#080808;color:#fff;padding:clamp(110px,13vw,160px) clamp(20px,5vw,40px) clamp(40px,5vw,64px);position:relative;overflow:hidden}
.art-hero::after{content:"";position:absolute;right:-120px;top:-100px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,212,.12),transparent 70%);pointer-events:none}
.art-hero-in{max-width:820px;margin:0 auto;position:relative;z-index:1}
.art-hero .ph-crumb{margin-bottom:22px}
.art-cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);font-weight:600;display:block;margin-bottom:14px}
.art-title{font-size:clamp(30px,5vw,60px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:#fff}
.art-date{margin-top:16px;font-size:13px;color:rgba(255,255,255,.62);letter-spacing:.04em}
.art{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.art-cover{margin:clamp(34px,4vw,52px) 0 0}
.art-cover img{width:100%;border-radius:16px;display:block}
.art-body{max-width:760px;margin:clamp(36px,4vw,56px) auto clamp(50px,6vw,90px);font-size:clamp(16px,1.4vw,18px);line-height:1.8;color:#2a2a2a}
.art-body p{margin-bottom:22px}
.art-body h2{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;margin:38px 0 16px;color:var(--ink)}
.art-body h3{font-size:clamp(18px,2vw,23px);font-weight:700;margin:30px 0 12px;color:var(--ink)}
.art-body ul,.art-body ol{margin:0 0 22px 22px}.art-body li{margin-bottom:8px}
.art-body a{color:var(--cy);text-decoration:underline}
.art-body img{max-width:100%;border-radius:12px;margin:20px 0}
.art-body strong{font-weight:700;color:var(--ink)}
.art-body blockquote{margin:24px 0;padding:6px 0 6px 22px;border-left:3px solid var(--cy);font-size:1.08em;color:var(--ink);font-style:italic}

/* ── CASO STUDIO (lavoro): dettaglio ── */
.cs-hero{background:#080808;color:#fff;padding:clamp(110px,13vw,150px) clamp(20px,5vw,80px) clamp(56px,6vw,90px);position:relative;overflow:hidden}
.cs-hero::after{content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,212,.12),transparent 70%);pointer-events:none}
.cs-hero .ph-crumb{margin-bottom:26px}
.cs-client{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy);font-weight:600;margin-bottom:16px}
.cs-title{font-size:clamp(38px,7vw,92px);font-weight:600;letter-spacing:-.04em;line-height:.96;max-width:16ch}
.cs-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px}
.cs-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px}
.cs-year{font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.58);margin-left:4px}
.cs-kpi{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cs-kpi span{font-size:12px;letter-spacing:.04em;font-weight:600;color:var(--cy);background:rgba(0,184,212,.1);border-radius:7px;padding:8px 14px}
.cs-cover{max-width:1200px;margin:0 auto;padding:clamp(34px,4vw,52px) clamp(20px,5vw,40px) 0}
.cs-cover img{width:100%;border-radius:18px;display:block;box-shadow:0 30px 80px rgba(0,0,0,.18)}
.cs-body{padding:clamp(50px,6vw,90px) clamp(20px,5vw,40px)}
.cs-body-in{max-width:760px;margin:0 auto;font-size:clamp(16px,1.4vw,19px);line-height:1.8;color:#2a2a2a}
.cs-cta{background:#080808;color:#fff;text-align:center;padding:clamp(56px,8vw,110px) 24px}
.cs-cta h2{font-size:clamp(28px,5vw,58px);font-weight:600;letter-spacing:-.03em;max-width:16ch;margin:0 auto}
.cs-cta-sub{margin:18px auto 0;max-width:48ch;font-size:clamp(14px,1.3vw,16.5px);line-height:1.7;color:rgba(255,255,255,.62)}
.cs-cta-btn{display:inline-block;margin-top:30px;background:var(--cy);color:#001014;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;text-decoration:none;padding:15px 32px;border-radius:999px;transition:transform .3s,background .3s}
.cs-cta-btn:hover{transform:translateY(-2px);background:#1fd0ee}
.cs-altri{padding:clamp(40px,5vw,70px) clamp(20px,5vw,80px);border-top:1px solid var(--ln)}
.cs-altri-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.cs-altri-row{display:flex;flex-wrap:wrap;gap:14px}
.cs-altri-row a{text-decoration:none;color:var(--ink);border:1px solid var(--ln);border-radius:999px;padding:10px 20px;font-size:14px;font-weight:500;transition:.25s}
.cs-altri-row a:hover{border-color:var(--cy);color:var(--cy)}

/* ── STUDIO: strip numeri ── */
.st-stats{display:grid;grid-template-columns:repeat(4,1fr);background:#080808;color:#fff}
/* variante a 3 numeri (es. pagina Bandi) */
.st-stats.cols-3{grid-template-columns:repeat(3,1fr)}
.st-stats>div{padding:clamp(30px,4vw,52px) clamp(16px,2vw,32px);border-right:.5px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}
.st-stats>div:last-child{border-right:none}
.st-n{font-size:clamp(34px,4.5vw,60px);font-weight:700;letter-spacing:-.04em;color:#fff;line-height:1}
.st-l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);font-weight:500}
/* Tablet: 4 numeri diventano 2 colonne (a 768px in 4 colonne si schiacciavano),
   i 3 numeri si impilano — le etichette lunghe non vanno più a capo strette. */
@media(max-width:900px){
  .st-stats{grid-template-columns:repeat(2,1fr)}
  .st-stats>div:nth-child(2){border-right:none}
  .st-stats.cols-3{grid-template-columns:1fr}
  .st-stats.cols-3>div{border-right:none;border-bottom:.5px solid rgba(255,255,255,.08)}
  .st-stats.cols-3>div:last-child{border-bottom:none}
}
@media(max-width:520px){.st-stats{grid-template-columns:1fr}.st-stats>div{border-right:none;border-bottom:.5px solid rgba(255,255,255,.08)}.st-stats>div:last-child{border-bottom:none}}

/* ── STUDIO: intro "Chi siamo" — parola gigante a misura pagina interna ── */
.st-intro .deco{font-size:clamp(56px,10vw,150px);line-height:.92}

/* ── STUDIO: sezione "Valori" (griglia caratteristiche stile servizio) ── */
.st-valori-hdr{margin-bottom:clamp(34px,5vw,56px)}
.st-valori-hdr .deco{font-size:clamp(48px,8vw,140px);line-height:.9}
.st-valori-hdr .deco-sub{text-align:left}
/* sulla pagina Studio i numeri delle card sono già visibili (no hover-only) */
.st-valori .feat-card .feat-n{margin-bottom:14px}

/* ── STUDIO: diversaMENTE® — fascia scura brand con particelle ── */
.dm-band{position:relative;overflow:hidden;background:#040404;color:#fff;padding:clamp(64px,9vw,120px) clamp(20px,5vw,52px);border-top:.5px solid rgba(255,255,255,.06)}
.dm-band>.ph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.dm-band::after{content:"";position:absolute;right:-160px;top:-150px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,212,.12),transparent 70%);z-index:0;pointer-events:none}
.dm-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.dm-title{font-size:clamp(40px,7vw,96px);font-weight:300;letter-spacing:-.04em;line-height:1;margin:10px 0 6px}
.dm-title strong{font-weight:700;color:var(--cy)}
.dm-title sup{font-size:.3em;font-weight:400;top:-1.4em;margin-left:.05em;color:rgba(255,255,255,.5)}
.dm-lead{font-size:clamp(15px,1.5vw,20px);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:clamp(34px,4vw,52px)}
.dm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px);align-items:stretch}
/* Le 3 colonne ora sono CARD alte uguali (border + padding uniformi).
   Numerini + titolino sopra, paragrafo che si estende, niente strappi visivi. */
.dm-col{display:flex;flex-direction:column;gap:14px;
  padding:clamp(24px,2.4vw,32px) clamp(22px,2vw,28px);
  background:rgba(255,255,255,.02);
  border:.5px solid rgba(255,255,255,.08);border-radius:14px;
  transition:background .35s,border-color .35s}
.dm-col:hover{background:rgba(0,184,212,.04);border-color:rgba(0,184,212,.25)}
.dm-col-n{font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--cy);font-variant-numeric:tabular-nums}
.dm-col-t{font-size:clamp(16px,1.4vw,18px);font-weight:600;color:#fff;letter-spacing:-.01em;margin:0;text-transform:uppercase;letter-spacing:.04em}
.dm-grid p{font-size:clamp(14px,1.05vw,15.5px);line-height:1.75;color:rgba(255,255,255,.74);margin:0;flex:1}
.dm-grid p strong{color:#fff;font-weight:600}
@media(max-width:860px){.dm-grid{grid-template-columns:1fr;gap:14px}}

/* ── STUDIO: I nostri uffici (foto + testo) ── */
.uff-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.uff-photo{border-radius:14px;overflow:hidden;border:.5px solid var(--ln)}
.uff-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.uff-h{font-size:clamp(28px,3.6vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.04;color:var(--ink);margin:8px 0 18px}
@media(max-width:820px){.uff-grid{grid-template-columns:1fr;gap:28px}.uff-photo{order:2}}
/* ── STUDIO: gallery a slide degli uffici ── */
.ug{position:relative}
.ug-track{display:flex;transition:transform .55s cubic-bezier(.77,0,.18,1)}
.ug-slide{flex:0 0 100%;min-width:0}
.ug-slide img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.ug-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:none;background:rgba(0,0,0,.42);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;transition:background .25s,opacity .25s;opacity:.85}
.ug:hover .ug-nav{opacity:1}
.ug-nav:hover{background:rgba(0,0,0,.72)}
.ug-prev{left:12px}
.ug-next{right:12px}
.ug-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:2}
.ug-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);border:none;padding:0;cursor:pointer;transition:background .25s,transform .25s}
.ug-dot.on{background:#fff;transform:scale(1.3)}
/* Una sola foto: niente frecce né pallini (identico all'immagine singola di prima). */
.ug.single .ug-nav,.ug.single .ug-dots{display:none}

/* ── STUDIO: il team ── */
.team-hdr{margin-bottom:clamp(20px,3vw,30px)}
.team-hdr .deco{font-size:clamp(48px,8vw,140px);line-height:.9}
.team-hdr .deco-sub{text-align:left}
.team-intro{max-width:62ch;color:var(--dim);font-size:clamp(15px,1.35vw,18px);line-height:1.75;margin-bottom:clamp(34px,5vw,56px)}
/* Team (stile "muro di foto" come il vecchio sito): tessere-foto a tutto riquadro,
   nome+ruolo sovrapposti in basso, tinta ciano su hover. */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.team-card{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0e0e10;isolation:isolate}
.team-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;z-index:1;
  filter:grayscale(.12) brightness(.68) contrast(1.02);
  transition:filter .5s cubic-bezier(.77,0,.18,1),transform .9s cubic-bezier(.77,0,.18,1)}
/* Iniziali di ripiego (dietro alla foto: si vedono solo se la foto manca). */
.team-ini{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.22);font-weight:200;font-size:clamp(34px,4vw,54px);letter-spacing:.05em}
/* Velo scuro in basso per leggibilità del nome. */
.team-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.2) 42%,transparent 66%)}
/* Tinta ciano al passaggio del mouse (duotone leggero). */
.team-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--cy);opacity:0;mix-blend-mode:overlay;transition:opacity .45s}
.team-card:hover::after{opacity:.5}
.team-card:hover .team-photo{filter:grayscale(0) brightness(.82) contrast(1.05);transform:scale(1.06)}
.team-info{position:absolute;left:clamp(18px,1.6vw,26px);right:16px;bottom:clamp(16px,1.5vw,24px);z-index:3}
.team-name{font-size:clamp(15px,1.3vw,19px);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;line-height:1.12;margin:0}
.team-role{font-size:clamp(11px,1vw,13px);color:rgba(255,255,255,.72);letter-spacing:.02em;line-height:1.4;margin-top:5px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}

/* ── CONTATTI ── */
/* intestazione di sezione (kick + parola gigante) come nelle altre pagine interne */
.ct-head{margin-bottom:clamp(34px,5vw,56px)}
.ct-head .deco{font-size:clamp(48px,9vw,150px);line-height:.9}
.ct-head .deco-sub{text-align:left}
/* cornice unica a due colonne: info+mappa a sinistra, form a destra */
.ct-wrap{display:grid;grid-template-columns:.85fr 1.15fr;border:.5px solid var(--ln);border-radius:14px;overflow:hidden;background:var(--w)}
.ct-info{background:var(--bg);padding:clamp(40px,5vw,72px) clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:26px;border-right:.5px solid var(--ln)}
.ct-info-item{display:flex;flex-direction:column;gap:5px}
.ct-info-l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);font-weight:600}
.ct-info-item a,.ct-info-item span{font-size:clamp(16px,1.6vw,20px);color:var(--ink);text-decoration:none;font-weight:500;line-height:1.5}
.ct-info-item a:hover{color:var(--cy)}
/* mappa più ariosa + overlay che blocca lo scroll/zoom finché non si clicca */
.ct-map{position:relative;margin-top:auto;border-radius:12px;overflow:hidden;border:1px solid var(--ln);height:clamp(220px,30vh,300px)}
.ct-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3);pointer-events:none}
.ct-map.is-on iframe{pointer-events:auto;filter:none}
.ct-map-ov{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0;cursor:pointer;background:rgba(8,8,8,.04);display:flex;align-items:flex-end;justify-content:center;transition:background .3s}
.ct-map-ov:hover{background:rgba(8,8,8,.10)}
.ct-map-ov span{margin-bottom:14px;font-family:var(--f);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(8,8,8,.82);padding:8px 16px;border-radius:999px;pointer-events:none}
.ct-map.is-on .ct-map-ov{display:none}

/* ── Mappa "fancy" (coerente con la home): look scuro pulito, segnaposto, card indicazioni ── */
.ct-map.map-fancy{border-color:rgba(255,255,255,.1);box-shadow:0 18px 44px rgba(8,12,20,.28)}
.map-fancy iframe{filter:grayscale(1) invert(.92) contrast(.86) brightness(.96) hue-rotate(185deg)}
.map-fancy.is-on iframe{filter:none}
.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.is-on .map-pin{display:none}
.map-card{position:absolute;left:14px;bottom:14px;z-index:4;max-width:min(82%,260px);background:rgba(12,17,26,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.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,.64);margin-top:2px;line-height:1.35}
.map-card-btn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;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)}
.ct-form-wrap{padding:clamp(40px,5vw,72px) clamp(24px,5vw,72px)}
/* intro del form: titolo + sottotitolo, stesso tono di voce delle pagine servizio */
.ct-form-intro{margin-bottom:clamp(24px,3vw,34px)}
.ct-form-intro h2{font-size:clamp(22px,2.5vw,32px);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.1;margin-bottom:10px}
.ct-form-intro p{font-size:15px;color:var(--dim);line-height:1.6;max-width:46ch}
.ct-form{display:flex;flex-direction:column;gap:18px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-field{display:flex;flex-direction:column;gap:7px}
.ct-field label{font-size:12px;letter-spacing:.04em;color:var(--dim);font-weight:500}
.ct-field input,.ct-field select,.ct-field textarea{font-family:var(--f);font-size:16px;color:var(--ink);background:var(--w);border:1px solid var(--ln);border-radius:9px;padding:13px 15px;min-height:48px;transition:border-color .25s,box-shadow .25s;width:100%;box-sizing:border-box}
/* font-size:16px sopra serve a iOS Safari per non zoomare al focus.
   min-height:48px garantisce tap target ≥ 44px (Apple HIG / Material). */
.ct-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23475569' stroke-width='1.6'><polyline points='1 1 6 6 11 1'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(0,184,212,.12)}
/* Campo allegati (upload file) */
.ct-field input.ct-file{padding:9px 12px;min-height:auto;font-size:14px;color:var(--dim);cursor:pointer}
.ct-field input.ct-file::file-selector-button{font-family:var(--f);font-size:13px;font-weight:600;color:#fff;background:var(--cy);border:none;border-radius:7px;padding:9px 14px;margin-right:12px;cursor:pointer;transition:background .2s}
.ct-field input.ct-file::file-selector-button:hover{background:#0098b4}
.ct-file-hint{font-size:12px;color:var(--dim)}
.ct-field textarea{resize:vertical;min-height:120px}
.ct-submit{align-self:flex-start;display:inline-block;background:var(--cy);color:#001014;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;border:0;border-radius:999px;padding:15px 32px;cursor:pointer;text-decoration:none;transition:transform .3s,background .3s}
.ct-submit:hover{transform:translateY(-2px);background:#1fd0ee}
.ct-err{background:#fde8e8;color:#b42318;border:1px solid #f3c0c0;border-radius:9px;padding:13px 16px;font-size:14px;margin-bottom:18px}
.ct-ok{text-align:center;padding:clamp(30px,5vw,60px) 10px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ct-ok-ico{width:64px;height:64px;border-radius:50%;background:rgba(0,184,212,.12);color:var(--cy);font-size:30px;display:flex;align-items:center;justify-content:center}
.ct-ok h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em}
.ct-ok p{color:var(--dim);font-size:15px;max-width:42ch}
@media(max-width:820px){.ct-wrap{grid-template-columns:1fr}.ct-row{grid-template-columns:1fr}.ct-info{border-right:none;border-bottom:.5px solid var(--ln)}.ct-head .deco-sub{text-align:left}}

/* ── CONTATTI — 3 card rapide (telefono / email / WhatsApp) ── */
.ct-quick{background:var(--bg)}
.ct-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1280px;margin:0 auto;padding:0 clamp(20px,3vw,40px)}
.ct-card{display:flex;flex-direction:column;gap:8px;padding:clamp(26px,3vw,38px) clamp(22px,2.5vw,30px);
  background:var(--w);border:.5px solid var(--ln);border-radius:16px;
  text-decoration:none;color:var(--ink);
  transition:transform .35s cubic-bezier(.77,0,.18,1),box-shadow .35s,border-color .35s;
  position:relative;overflow:hidden}
.ct-card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,184,212,.05),transparent 60%);
  opacity:0;transition:opacity .35s;pointer-events:none}
.ct-card:hover{transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.08),0 2px 8px rgba(0,184,212,.1);
  border-color:rgba(0,184,212,.4)}
.ct-card:hover::before{opacity:1}
.ct-card-ico{width:56px;height:56px;border-radius:14px;
  background:rgba(0,184,212,.08);color:var(--cy);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  transition:transform .35s cubic-bezier(.77,0,.18,1),background .35s}
.ct-card:hover .ct-card-ico{transform:scale(1.08) rotate(-4deg);background:rgba(0,184,212,.14)}
.ct-card-l{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:600}
.ct-card-v{font-size:clamp(18px,1.9vw,22px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ct-card-sub{font-size:13.5px;color:var(--dim);line-height:1.5;font-weight:400;margin-top:2px;flex:1}
.ct-card-arr{font-size:12px;font-weight:700;color:var(--cy);letter-spacing:.06em;text-transform:uppercase;
  margin-top:14px;transition:transform .3s cubic-bezier(.77,0,.18,1);position:relative}
.ct-card:hover .ct-card-arr{transform:translateX(6px)}
/* Variante WhatsApp con accent verde sull'icona */
.ct-card-wa .ct-card-ico{background:rgba(37,211,102,.1);color:#1c9c4d}
.ct-card-wa:hover .ct-card-ico{background:rgba(37,211,102,.18)}
.ct-card-wa .ct-card-arr{color:#1c9c4d}
.ct-card-wa:hover{border-color:rgba(37,211,102,.4);box-shadow:0 16px 40px rgba(0,0,0,.08),0 2px 8px rgba(37,211,102,.1)}

/* Banner risposta 24h */
.ct-promise{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  max-width:1280px;margin:clamp(30px,4vw,46px) auto 0;padding:22px clamp(22px,3vw,32px);
  background:linear-gradient(135deg,rgba(0,184,212,.06),rgba(0,184,212,.02));
  border:.5px solid rgba(0,184,212,.18);border-radius:14px}
.ct-promise-l{display:flex;align-items:center;gap:18px;flex:1;min-width:280px}
.ct-promise-l svg{color:var(--cy);flex-shrink:0}
.ct-promise-t{font-size:clamp(15px,1.4vw,18px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ct-promise-d{font-size:13.5px;color:var(--dim);line-height:1.5;margin-top:3px}
.ct-promise-btn{padding:11px 22px;background:var(--ink);color:var(--w);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;text-decoration:none;
  transition:transform .25s,background .25s;flex-shrink:0}
.ct-promise-btn:hover{transform:translateY(-2px);background:var(--cy);color:#001014}

/* Info estese nella card form (sostituisce ct-info-item) */
.ct-info-block{display:flex;flex-direction:column;gap:6px;padding-bottom:18px;border-bottom:.5px solid var(--ln)}
.ct-info-block:last-of-type{border-bottom:none;padding-bottom:0}
.ct-info-v{font-size:15px;color:var(--ink);line-height:1.55;font-weight:500}
.ct-info-v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--cy);transition:color .25s}
.ct-info-v a:hover{color:var(--cy)}

/* ── Contatti: 3 righe info con icona ciano + label uppercase + valore ── */
.ct-info-row{display:flex;gap:18px;padding:18px 0;border-bottom:.5px solid var(--ln);align-items:flex-start}
.ct-info-row:last-of-type{border-bottom:none}
.ct-info-row:first-of-type{padding-top:0}
.ct-info-ico{flex-shrink:0;width:42px;height:42px;border-radius:11px;
  background:rgba(0,184,212,.08);color:var(--cy);
  display:flex;align-items:center;justify-content:center}
.ct-info-body{flex:1;min-width:0}
.ct-info-body .ct-info-l{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cy);font-weight:700;margin-bottom:6px}
.ct-info-body .ct-info-v{font-size:15px;line-height:1.6;color:var(--ink);font-weight:400}
.ct-info-body .ct-info-v strong{font-weight:600}

.ct-privacy{font-size:11.5px;color:var(--dim);line-height:1.55;margin-top:4px;letter-spacing:.01em}

/* Responsive: ≤900px → 1 colonna, banner verticale */
@media(max-width:900px){
  .ct-quick-grid{grid-template-columns:1fr}
  .ct-promise{flex-direction:column;align-items:flex-start;gap:18px}
  .ct-promise-btn{width:100%;text-align:center}
}

/* ── Articolo: cover allineata + griglia "altri" 3 col ── */
.art-cover-sec{padding:0 clamp(24px,5vw,52px)}
.art-cover-wrap{max-width:1100px;margin:clamp(40px,5vw,72px) auto 0;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.08)}
.art-cover-wrap img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.ni-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);
  max-width:1280px;margin:clamp(40px,5vw,72px) auto 0;padding:0 clamp(24px,3vw,40px)}
@media(max-width:900px){.ni-grid{grid-template-columns:1fr;gap:18px}}

/* Modificatore "full-width" per .ni-grid: card 3 per riga a tutta larghezza viewport
   (rimuove max-width:1280px e padding ai lati). Usato in homepage e nella pagina /news.
   Manteniamo l'alias .home-ni-grid per retrocompatibilità coi template già deployati. */
.ni-grid-full,.home-ni-grid{max-width:none;padding:0;width:100%;gap:clamp(20px,2.5vw,36px);margin:0}
.ni-grid-full .ni-card,.home-ni-grid .ni-card{border-radius:18px}
.ni-grid-full .ni-img,.home-ni-grid .ni-img{aspect-ratio:16/11}
.ni-grid-full .ni-body,.home-ni-grid .ni-body{padding:clamp(24px,2.4vw,32px) clamp(22px,2.2vw,30px) clamp(28px,2.6vw,36px)}
.ni-grid-full .ni-tit,.home-ni-grid .ni-tit{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:8px 0}
.ni-grid-full .ni-exc,.home-ni-grid .ni-exc{font-size:14.5px;color:var(--dim);line-height:1.65;margin:0 0 14px}
@media(max-width:900px){.ni-grid-full,.home-ni-grid{grid-template-columns:1fr}}

/* ── Portfolio: card fullscreen una sotto l'altra (no effetto pin) ── */
.pf-fs-list{display:flex;flex-direction:column}
.pf-fs-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100vh;min-height:100svh;
  padding:clamp(40px,5vw,80px) clamp(28px,5vw,80px);
  color:#fff;text-decoration:none;overflow:hidden;isolation:isolate}
.pf-fs-card::before{content:"";position:absolute;inset:0;
  background-image:var(--bg);background-size:cover;background-position:center;
  z-index:0;transition:transform 1.2s cubic-bezier(var(--ez,.77,0,.18,1))}
.pf-fs-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,4,5,.92) 0%,rgba(4,4,5,.55) 45%,rgba(4,4,5,.15) 100%);
  z-index:1;transition:opacity .45s}
.pf-fs-card:hover::before{transform:scale(1.04)}
.pf-fs-card:hover::after{opacity:.85}
.pf-fs-card>*{position:relative;z-index:2}
.pf-fs-n{position:absolute;top:clamp(28px,4vw,52px);right:clamp(28px,5vw,80px);
  font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--cy);
  font-variant-numeric:tabular-nums;z-index:2}
.pf-fs-body{max-width:780px;display:flex;flex-direction:column;gap:14px}
.pf-fs-cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);font-weight:700}
.pf-fs-tit{font-size:clamp(38px,7vw,96px);font-weight:300;letter-spacing:-.04em;line-height:.95;color:#fff;margin:0}
.pf-fs-cli{font-size:clamp(14px,1.2vw,17px);color:rgba(255,255,255,.75);font-weight:500;letter-spacing:.02em;margin-top:6px}
.pf-fs-desc{font-size:clamp(15px,1.25vw,18px);line-height:1.65;color:rgba(255,255,255,.85);font-weight:400;
  max-width:62ch;margin:10px 0 0}
.pf-fs-arr{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cy);
  margin-top:24px;display:inline-flex;align-items:center;gap:8px;transition:gap .3s}
.pf-fs-card:hover .pf-fs-arr{gap:14px}
@media(max-width:768px){
  .pf-fs-card{min-height:80vh;min-height:80svh;padding:32px 22px}
  .pf-fs-n{top:18px;right:22px}
}

/* ── Sottopagine servizio: card ariose con padding generosi, gap tra le card,
   titolo "rientrato" (no a filo schermo), 2-3 colonne in base alla larghezza ── */
.sp-sec{padding:clamp(60px,8vw,110px) clamp(40px,6vw,80px)}
/* Griglia sottopagine: 4 colonne fullscreen (coerente con .svc-family-grid).
   Padding del padre .sp-sec resta il "margine" laterale visivo. */
.sp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2vw,28px);width:100%;margin:clamp(40px,5vw,72px) 0 0}
.sp-card{display:flex;flex-direction:column;gap:18px;
  padding:clamp(28px,2.5vw,40px) clamp(24px,2.2vw,34px);
  background:var(--w);border:1px solid var(--ln);border-radius:18px;
  text-decoration:none;color:var(--ink);position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.77,0,.18,1),box-shadow .4s,border-color .4s;
  min-height:clamp(260px,28vh,320px)}
.sp-card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0,rgba(0,184,212,.08),transparent 55%);
  opacity:0;transition:opacity .4s;pointer-events:none}
.sp-card:hover{transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.08),0 4px 12px rgba(0,184,212,.08);
  border-color:rgba(0,184,212,.3)}
.sp-card:hover::before{opacity:1}
.sp-card-top{display:flex;justify-content:space-between;align-items:center;position:relative}
.sp-card-n{font-size:11px;letter-spacing:.28em;color:var(--cy);font-weight:700;font-variant-numeric:tabular-nums}
.sp-card-arr{color:var(--dim);transition:transform .4s cubic-bezier(.77,0,.18,1),color .35s}
.sp-card:hover .sp-card-arr{color:var(--cy);transform:translateX(8px)}
.sp-card-tit{font-size:clamp(22px,2vw,28px);font-weight:600;
  letter-spacing:-.02em;line-height:1.15;margin:0;position:relative;color:var(--ink)}
.sp-card-dsc{font-size:15px;color:var(--dim);line-height:1.65;font-weight:400;
  margin:0;position:relative;flex:1}
.sp-card-cta{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cy);position:relative;display:inline-flex;align-items:center;gap:8px;
  transition:gap .3s;margin-top:6px}
.sp-card:hover .sp-card-cta{gap:14px}
@media(max-width:1100px){
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:760px){
  .sp-sec{padding:clamp(48px,6vw,72px) clamp(20px,4vw,32px)}
  .sp-grid{grid-template-columns:1fr;gap:14px}
  .sp-card{padding:32px 28px;min-height:0}
}

/* ── ASSISTENZA ── */
.asg{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ln);border-top:.5px solid var(--ln)}
.asc{background:var(--w);padding:clamp(34px,3.5vw,52px) clamp(28px,3vw,44px);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;transition:background .3s;min-height:240px}
.asc:hover{background:#fafafa}
.asc::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--cy);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(var(--ez))}
.asc:hover::after{transform:scaleX(1)}
.asc-n{font-size:clamp(48px,5vw,80px);font-weight:700;letter-spacing:-.05em;color:rgba(0,0,0,.06);line-height:1;margin-bottom:16px;font-variant-numeric:tabular-nums;transition:color .3s}
.asc:hover .asc-n{color:rgba(0,184,212,.12)}
.asc-t{font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:10px;transition:color .3s}
.asc:hover .asc-t{color:var(--cy)}
.asc-d{font-size:14px;color:var(--dim);line-height:1.7;max-width:38ch;flex:1}
.asc-btn{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink);border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:3px;align-self:flex-start;transition:color .3s,border-color .3s}
.asc:hover .asc-btn{color:var(--cy);border-color:var(--cy)}
.asc-arr{transition:transform .3s cubic-bezier(var(--ez))}
.asc:hover .asc-arr{transform:translate(4px,-4px)}
@media(max-width:600px){.asg{grid-template-columns:1fr}}
/* form "Richiedi assistenza" — riusa le classi .ct-* del form contatti */
.as-form-sec{padding:clamp(52px,8vw,96px) clamp(20px,5vw,52px);background:var(--bg);border-top:.5px solid var(--ln);scroll-margin-top:90px}
.as-form-inner{max-width:720px;margin:0 auto}
.as-form-h{font-size:clamp(28px,4vw,46px);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.05;margin:8px 0 8px}
.as-form-sub{color:var(--dim);font-size:clamp(15px,1.4vw,18px);line-height:1.7;margin-bottom:28px;max-width:54ch}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* pulsante "Apri una richiesta" nell'hero → salta al form (anchor) */
.ph-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:14px 30px;border-radius:999px;background:var(--cy);color:#001014;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .3s,box-shadow .3s,background .3s}
.ph-cta:hover{transform:translateY(-2px);background:#1fd0ee;box-shadow:0 14px 34px rgba(0,184,212,.35)}

/* ── NEWSLETTER (split scuro + form bianco) ── */
.nl{background:#080808;padding:clamp(120px,14vw,170px) clamp(20px,5vw,64px) clamp(60px,7vw,90px);display:flex;align-items:center;min-height:86vh}
.nl-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);max-width:1180px;margin:0 auto;width:100%;align-items:center}
.nl-left{position:relative;color:#fff}
.nl-deco{position:absolute;top:-44px;left:-8px;font-size:clamp(120px,18vw,220px);font-weight:700;letter-spacing:-.06em;color:rgba(255,255,255,.04);line-height:1;pointer-events:none;user-select:none}
.nl-kick{position:relative;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);font-weight:600;display:block;margin-bottom:18px}
.nl-h{position:relative;font-size:clamp(40px,5.5vw,68px);font-weight:700;letter-spacing:-.04em;line-height:.95;margin-bottom:20px}
.nl-h em{font-style:normal;color:var(--cy)}
.nl-p{position:relative;font-size:15px;color:rgba(255,255,255,.45);line-height:1.7;max-width:38ch}
.nl-stats{position:relative;display:flex;gap:36px;margin-top:38px}
.nl-stat-n{font-size:26px;font-weight:700;letter-spacing:-.03em;color:#fff}
.nl-stat-l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:4px}
.nl-right{background:var(--w);border-radius:18px;padding:clamp(30px,3vw,44px);color:var(--ink)}
.nl-right-h{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:22px}
.nl-form2{display:flex;flex-direction:column;gap:14px}
.nl-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nl-in{font-family:var(--f);font-size:15px;color:var(--ink);background:var(--w);border:1px solid var(--ln);border-radius:10px;padding:14px 15px;width:100%;transition:border-color .2s,box-shadow .2s}
.nl-in:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(0,184,212,.12)}
.nl-priv{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--dim);line-height:1.5;cursor:pointer}
.nl-priv input{margin-top:2px;width:16px;height:16px;accent-color:var(--cy);flex-shrink:0}
.nl-priv a{color:var(--cy)}
.nl-cap{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--ln);border-radius:10px;padding:10px 14px}
.nl-cap-q{font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap}
.nl-cap-in{flex:1;max-width:90px;font-family:var(--f);font-size:15px;color:var(--ink);background:var(--w);border:1px solid var(--ln);border-radius:8px;padding:9px 11px;outline:none}
.nl-cap-in:focus{border-color:var(--cy)}
.nl-sub{align-self:stretch;justify-content:center;text-align:center}
@media(max-width:720px){.nl-split{grid-template-columns:1fr;gap:30px}.nl-deco{display:none}}

/* ── Footer: stili gia' in home.css (.ft/.fbot/.fsoc/h4). Niente da ridefinire. ── */

/* ── Mobile ── */
@media(max-width:860px){
  .snav-burger{display:flex}
  .snav-links{
    position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(8,8,8,.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .snav-links.open{max-height:360px}
  .snav-links a{padding:15px clamp(20px,5vw,40px);width:100%;border-top:.5px solid rgba(255,255,255,.06)}
  .snav-cta{background:none;color:var(--cy) !important;border-radius:0}
}
@media(max-width:768px){
  .intro-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .intro-r{padding-top:0}
  .feat-grid{grid-template-columns:1fr}
  .feat-hdr{text-align:left}
  .proc-wrap{grid-template-columns:1fr;gap:40px}
  .ref-grid{grid-template-columns:1fr}
  /* statistiche hero: tolgo i divisori e uso un gap così le etichette non si toccano */
  .ph-stats{gap:18px 30px}
  .ph-stat{border-right:none;padding-right:0;margin-right:0;flex:0 1 auto;min-width:0}
}

/* ── Paragrafi liberi a blocchi (in coda alla pagina servizio) ── */
.blk-coll-h{font-size:clamp(22px,2.5vw,34px);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin-bottom:clamp(28px,3vw,44px)}
.blk-testo{max-width:64ch;margin:0 auto}
.blk-testo-h{font-size:clamp(22px,2.5vw,34px);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin-bottom:18px}
.blk-testo-p{font-size:clamp(15px,1.4vw,18px);color:var(--dim);line-height:1.8;white-space:pre-line}
.blk-quote{max-width:60ch;margin:0 auto;text-align:center}
.blk-quote-t{font-size:clamp(22px,3vw,38px);font-weight:300;letter-spacing:-.03em;line-height:1.3;color:var(--ink);margin:0}
.blk-quote-t::before{content:"\201C"}
.blk-quote-t::after{content:"\201D"}
.blk-quote-a{margin-top:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:600}

/* Citazione su FASCIA NERA: particelle + virgoletta gigante + parole che si accendono */
.blk-quote-band{background:#040404;color:#fff;position:relative;overflow:hidden;padding:clamp(84px,13vw,180px) clamp(20px,5vw,52px);border-top:.5px solid rgba(255,255,255,.06)}
.blk-quote-band .ph-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.blk-quote-band::after{content:"";position:absolute;right:-160px;top:-150px;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(0,184,212,.13),transparent 70%);z-index:2;pointer-events:none}
.blk-quote-band>*:not(.ph-canvas){position:relative;z-index:3}
.blk-quote-band .blk-quote{max-width:1100px;margin:0 auto;text-align:left}
.blk-quote-mark{font-size:clamp(120px,18vw,260px);line-height:.5;color:var(--cy);opacity:.16;font-weight:700;margin-bottom:-4px;user-select:none}
.blk-quote-band .blk-quote-t{font-size:clamp(26px,4.4vw,58px);font-weight:600;letter-spacing:-.035em;line-height:1.22;color:#fff;max-width:20ch;margin:0}
.blk-quote-band .blk-quote-t::before,.blk-quote-band .blk-quote-t::after{content:none}
.blk-quote-band .blk-quote-a{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,3vw,40px);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.blk-quote-band .blk-quote-a span{width:42px;height:.5px;background:var(--cy);display:inline-block}
.blk-figure{max-width:980px;margin:0 auto}
.blk-figure-img{width:100%;height:auto;display:block;border-radius:14px;border:.5px solid var(--ln)}
.blk-figure-cap{margin-top:14px;font-size:13px;color:var(--dim);text-align:center;line-height:1.6}
.blk-steps{max-width:880px}

/* ════ REFERENZA / CASO STUDIO — alternanza fullscreen ↔ corpo ════ */
/* HERO — fullscreen */
.cs-hero{min-height:92vh;display:flex;padding:clamp(86px,10vw,124px) clamp(24px,6vw,80px) clamp(40px,5vw,60px)}
.cs-hero-in{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,7vw,90px)}
.cs-hero-top{display:flex;justify-content:space-between;align-items:center}
.cs-pos{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32);border-left:.5px solid var(--lnw);padding-left:14px;white-space:nowrap}
.cs-hero-mid{margin-top:auto}
/* Logo cliente: altezza fluida ma MAI più largo del contenitore (i marchi
   orizzontali tipo wordmark, rifilati, sbordavano su mobile). Su telefono
   il minimo scende a 56px e la larghezza si ferma al 78% della colonna. */
.cs-logo{height:clamp(56px,10vw,140px);width:auto;max-width:min(460px,78%);object-fit:contain;object-position:left center;display:block;margin-bottom:26px}
.cs-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.cs-tags span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,184,212,.1);color:var(--cy);border:.5px solid rgba(0,184,212,.28);padding:4px 11px;border-radius:3px;font-weight:600}
.cs-kick{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);font-weight:600;margin-bottom:18px}
.cs-h1{font-size:clamp(44px,8.5vw,108px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:#fff}
.cs-claim{margin:clamp(26px,3vw,40px) 0 0;max-width:52ch;font-size:clamp(15px,1.7vw,22px);color:rgba(255,255,255,.42);line-height:1.65}
.cs-meta-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(26px,4vw,60px);border-top:.5px solid var(--lnw);padding-top:26px}
.cs-meta-row>div span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:6px}
.cs-meta-row>div b{font-size:clamp(14px,1.4vw,17px);font-weight:700;color:#fff;letter-spacing:-.01em}
.cs-meta-spacer{flex:1;min-width:0}
.cs-meta-sito b a{color:var(--cy);text-decoration:none}
/* COVER — full-bleed */
.cs-cover-wrap{background:var(--ink);padding:0}
.cs-cover{max-width:none;margin:0;padding:0}
.cs-cover img{width:100%;height:clamp(360px,72vh,760px);object-fit:cover;border-radius:0;box-shadow:none;display:block}
/* KPI — banda full-width */
.cs-kpi-sec{background:var(--ink);padding:0}
.cs-kpi-grid{max-width:none;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--lnw)}
.cs-kpi-card{background:var(--ink);padding:clamp(40px,5vw,68px) clamp(22px,3vw,40px)}
.cs-kpi-note{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:12px}
.cs-kpi-n{font-size:clamp(40px,7vw,84px);font-weight:700;letter-spacing:-.06em;color:#fff;line-height:.85;font-variant-numeric:tabular-nums}
.cs-kpi-l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.34);margin-top:12px;font-weight:500}
/* CORPO — editoriale a tutta larghezza */
.cs-prj-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(34px,6vw,96px);align-items:start}
.cs-prj-aside{position:sticky;top:96px}
.cs-prj-aside .kick{margin-bottom:16px}
.cs-prj-tit{font-size:clamp(36px,5vw,72px);font-weight:700;letter-spacing:-.045em;line-height:.9;color:var(--ink)}
.cs-prj-body{max-width:74ch;margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.85;color:#2a2a2a}

/* ── Corpo referenza/articolo: 1 colonna larga centrata, pagina piena.
   Niente più CSS column-count (creava confusione/strappi). H2 sezione
   ben distinti con marcatore ciano. ── */
.cs-body-sec{padding:clamp(72px,9vw,128px) clamp(24px,5vw,52px)}
.cs-body-art{max-width:920px;margin:clamp(36px,5vw,64px) auto 0;
  font-size:clamp(16px,1.18vw,18.5px);line-height:1.8;color:#1a1a1a}
.cs-body-art h2{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2;margin:clamp(44px,5vw,64px) 0 18px;
  padding-top:clamp(36px,4vw,48px);border-top:1.5px solid var(--cy);
  display:inline-block;padding-right:60px}
.cs-body-art h2:first-child{padding-top:0;border-top:none;margin-top:0}
.cs-body-art h3{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:32px 0 12px}
.cs-body-art p{margin:0 0 1.25em}
.cs-body-art p:last-child{margin-bottom:0}
.cs-body-art ul,.cs-body-art ol{margin:0 0 1.25em;padding-left:1.4em}
.cs-body-art li{margin-bottom:.5em}
.cs-body-art blockquote{margin:1.6em 0;padding:8px 0 8px 24px;border-left:3px solid var(--cy);
  font-style:italic;color:#3a3a3a;font-size:clamp(18px,1.4vw,22px);line-height:1.65}
.cs-body-art strong{color:var(--ink);font-weight:600}
.cs-body-art a{color:var(--ink);border-bottom:1.5px solid var(--cy);text-decoration:none;transition:color .25s}
.cs-body-art a:hover{color:var(--cy)}
/* GALLERIA — banda scura full-bleed */
.cs-gal-sec{background:var(--ink);padding:clamp(64px,8vw,118px) 0 clamp(30px,4vw,54px)}
.cs-gal-h{max-width:none;margin:0 0 clamp(26px,3vw,40px);padding:0 clamp(20px,5vw,52px);display:flex;justify-content:space-between;align-items:flex-end}
.cs-gal-h .kick{color:rgba(255,255,255,.5)}
.cs-gal-h .cs-gal-c{color:var(--cy)}
.cs-gal{max-width:none;margin:0;padding:0 clamp(12px,2vw,22px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px)}
.cs-gal-item{margin:0}
.cs-gal-item img{width:100%;border-radius:8px;display:block;border:.5px solid var(--lnw)}
.cs-gal-item figcaption{font-size:11px;color:rgba(255,255,255,.4);margin-top:9px;letter-spacing:.04em}
.cs-gal-big{grid-column:1 / -1}
.cs-gal-big img{aspect-ratio:21/9;object-fit:cover}
/* SERVIZI — contenuto */
.cs-srv-h{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:28px;border-bottom:.5px solid var(--ln)}
.cs-srv-tit{font-size:clamp(34px,6vw,72px);font-weight:700;letter-spacing:-.05em;color:var(--ink);line-height:.92;margin-top:10px}
.cs-srv-bgn{font-size:clamp(60px,10vw,128px);font-weight:700;letter-spacing:-.08em;color:var(--ink);opacity:.05;line-height:.82}
.cs-srv-list{max-width:1280px;margin:0 auto}
.cs-srv-row{display:grid;grid-template-columns:auto 1fr auto;gap:0 clamp(20px,3vw,40px);padding:clamp(24px,3vw,38px) 0;border-bottom:.5px solid var(--ln);align-items:center;text-decoration:none;color:var(--ink);transition:padding .3s}
.cs-srv-row:hover{padding-left:14px}
.cs-srv-n{font-size:clamp(26px,4vw,52px);font-weight:700;letter-spacing:-.06em;color:var(--ink);opacity:.13;font-variant-numeric:tabular-nums}
.cs-srv-t{font-size:clamp(16px,2vw,24px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.cs-srv-d{font-size:clamp(13px,1.1vw,15px);color:var(--dim);line-height:1.6;margin-top:5px}
.cs-srv-arr{color:var(--cy);font-size:20px}
/* CITAZIONE — banda full-width */
.cs-quote{background:var(--ink);color:#fff;padding:clamp(80px,12vw,150px) clamp(24px,6vw,80px);position:relative;overflow:hidden}
.cs-quote .ph-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%}
.cs-quote>*:not(.ph-canvas){position:relative;z-index:3}
.cs-quote-in{max-width:1000px;margin:0 auto}
.cs-quote-mark{font-size:200px;line-height:.5;color:var(--cy);opacity:.13;font-weight:700;margin-bottom:-14px;user-select:none}
.cs-quote blockquote{font-size:clamp(26px,4.6vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.18;color:#fff;max-width:18ch}
.cs-quote-a{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.cs-quote-a span{width:40px;height:.5px;background:rgba(255,255,255,.25);display:inline-block}
/* TIMELINE — contenuto */
/* Timeline / step orizzontali — stile CARD (uniforme con sottoservizi .sp-card) */
.cs-tl-h{max-width:1400px;margin:0 auto 40px;display:flex;align-items:center;gap:14px}
.cs-tl-line{flex:1;height:.5px;background:var(--ln)}
.cs-tl{max-width:1400px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,1.8vw,24px)}
.cs-tl-item{background:var(--w);border:1px solid var(--ln);border-radius:16px;
  padding:clamp(28px,2.8vw,40px) clamp(24px,2.4vw,32px);
  transition:transform .35s cubic-bezier(.77,0,.18,1),box-shadow .35s,border-color .35s;
  display:flex;flex-direction:column;gap:8px}
.cs-tl-item:hover{transform:translateY(-4px);
  box-shadow:0 14px 36px rgba(0,0,0,.06);border-color:rgba(0,184,212,.3)}
.cs-tl-p{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cy);font-weight:700;margin-bottom:4px}
.cs-tl-t{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.cs-tl-d{font-size:clamp(13.5px,1.1vw,15px);color:var(--dim);line-height:1.65}
/* CTA — più grande */
.cs-cta{padding:clamp(80px,12vw,150px) 24px}
.cs-cta h2{font-size:clamp(34px,6vw,76px)}
/* PREC/SUCC */
.cs-nav{display:grid;grid-template-columns:1fr 1fr;border-top:.5px solid var(--ln);background:var(--bg)}
.cs-nav-i{padding:26px clamp(24px,6vw,80px);text-decoration:none;border-right:.5px solid var(--ln);transition:background .2s;display:block}
.cs-nav-r{text-align:right;border-right:none}
.cs-nav-i:hover{background:var(--w)}
.cs-nav-i span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.cs-nav-i b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
@media(max-width:880px){
  .cs-prj-grid{grid-template-columns:1fr;gap:22px}
  .cs-prj-aside{position:static}
  .cs-prj-tit{font-size:clamp(30px,8vw,48px)}
}
@media(max-width:760px){
  .cs-hero{min-height:0}
  .cs-h1{font-size:clamp(38px,12vw,62px)}
  .cs-meta-row{gap:22px}
  .cs-meta-spacer{display:none}
  .cs-gal{grid-template-columns:1fr}
  .cs-gal-big img{aspect-ratio:16/10}
  .cs-srv-bgn{display:none}
}

/* ════════════════════════════════════════════════════════════════
   DETTAGLIO SERVIZIO — scrollytelling (solo tipografia + colore)
   Fasce a piena pagina con parola gigante "sticky" che alterna lato,
   fascia nera "Caratteristiche" con track orizzontale bloccato (JS).
   ════════════════════════════════════════════════════════════════ */
.body-text{font-size:clamp(16px,1.4vw,19px);line-height:1.78;color:#3a3a3a;max-width:60ch}

/* fasce a piena pagina con parola gigante fissa */
.svc-stage{position:relative;overflow:hidden;padding-top:0;padding-bottom:0}
.svc-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:start;position:relative;z-index:1}
.svc-split-aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.svc-split-main{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:10vh 0}
.svc-split-rev .svc-split-aside{order:2}
.svc-split-rev .svc-split-main{order:1}
/* ════ PROCESSO — sezione "pinnata", step-by-step (scrolli ma resti fermo) ════ */
.ppin{background:var(--w);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(240px,44vw,560px);font-weight:800;color:rgba(6,182,212,.16);letter-spacing:-.08em;line-height:1;z-index:1;pointer-events:none;font-variant-numeric:tabular-nums;user-select:none;text-shadow:0 0 60px rgba(6,182,212,.12)}
/* arrivo del numero più evidente: pop (scala + dissolvenza) a ogni cambio step */
@keyframes ppinPop{0%{opacity:.1;transform:translate(-50%,-50%) scale(1.28)}45%{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:15px;letter-spacing:.32em;color:var(--cy);font-weight:700;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)}
/* fallback senza pin (mobile / no-JS): lista statica leggibile */
.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}
.svc-stage .deco{font-size:clamp(56px,10vw,168px);line-height:.92}
.svc-stage .intro-r{padding-top:0}
.svc-stage .intro-r h2{font-size:clamp(26px,3.2vw,46px);line-height:1.05;margin-bottom:22px}
.svc-stage .intro-r .body-text{font-size:clamp(17px,1.55vw,22px)}
.intro-bg-num{will-change:transform}

/* processo: binario verticale che si disegna allo scroll */
.proc-steps-rail{position:relative;padding-left:42px;border-top:none}
.proc-rail{position:absolute;left:7px;top:16px;bottom:16px;width:2px;background:rgba(0,0,0,.09);overflow:hidden;border-radius:2px}
.proc-rail-fill{position:absolute;inset:0;background:var(--cy);transform:scaleY(0);transform-origin:top}
.proc-steps-rail .proc-step{position:relative;border-bottom:.5px solid var(--ln)}
/* pallino sulla timeline per ogni step */
.proc-steps-rail .proc-step::before{content:"";position:absolute;left:-41px;top:30px;width:14px;height:14px;border-radius:50%;background:var(--w);border:2px solid rgba(0,0,0,.18);box-shadow:0 0 0 5px var(--w);transition:background .45s cubic-bezier(var(--ez)),border-color .45s,transform .45s cubic-bezier(var(--ez));z-index:2}
.proc-steps-rail .proc-step:hover::before{border-color:var(--cy)}
/* pallino "superato" (cumulativo, come la linea ciano) */
.proc-steps-rail .proc-step.is-passed::before{background:var(--cy);border-color:var(--cy)}
/* step "attivo" = quello più vicino al centro mentre scorri (spotlight) */
.proc-steps-rail .proc-step.is-active::before{transform:scale(1.3)}
.proc-step.is-active .proc-step-n{color:var(--cy);transform:scale(1.07)}
.proc-step.is-active .proc-step-body h3{color:var(--ink)}
.proc-step.is-active .proc-step-body p{color:#383838}
.proc-step.is-active .proc-tag{border-color:rgba(0,184,212,.45);color:var(--cy)}

/* caratteristiche: FASCIA NERA + track orizzontale (pin via JS) */
.feat-band{background:#040404;color:#fff;padding:clamp(60px,8vw,110px) 0;position:relative;overflow:hidden;border-top:.5px solid rgba(255,255,255,.06)}
.feat-band>.ph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.feat-band-hdr{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 clamp(20px,5vw,52px);margin-bottom:clamp(32px,4vw,52px)}
.feat-band-hdr .kick{color:var(--cy)}
.feat-band-hdr .deco{font-size:clamp(48px,8vw,150px);line-height:.9}
.feat-band-hdr .deco-sub{color:rgba(255,255,255,.42);font-size:clamp(15px,1.6vw,21px);font-weight:500;letter-spacing:.02em;margin-top:2px}
.feat-hint{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600;white-space:nowrap;padding-bottom:6px}
.feat-hint i{width:34px;height:1px;background:rgba(255,255,255,.3);position:relative;display:inline-block}
.feat-hint i::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid rgba(255,255,255,.55);border-right:1px solid rgba(255,255,255,.55);transform:rotate(45deg)}
.feat-viewport{position:relative;z-index:1;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
/* Touch: il nastro caratteristiche è un carosello nativo a swipe (niente pin GSAP,
   vedi servizio.js) — lo snap aggancia le card; scroll-padding allinea al padding */
@media(pointer:coarse){
  .feat-viewport{scroll-snap-type:x proximity;scroll-padding-inline:clamp(20px,5vw,52px)}
  .feat-panel{scroll-snap-align:start}
}
.feat-viewport::-webkit-scrollbar{display:none}
/* NB: niente width:max-content né will-change (residui dell'era pin GSAP):
   su Safari creavano SPAZIO FANTASMA scrollabile dopo l'ultima card.
   Il respiro finale è lo spacer ::after (il solo modo affidabile su Safari:
   padding-right e margin dell'ultima card vengono ignorati negli scroller). */
.feat-track{display:flex;gap:16px;padding-left:clamp(20px,5vw,52px)}
.feat-track::after{content:"";flex:0 0 clamp(4px,3vw,36px)}
.feat-panel{position:relative;flex:0 0 clamp(330px,40vw,560px);min-height:clamp(400px,62vh,640px);background:#0c0c0e;border:.5px solid rgba(255,255,255,.08);border-radius:20px;padding:clamp(34px,3.2vw,56px);display:flex;flex-direction:column;justify-content:flex-start;transition:background .45s cubic-bezier(var(--ez)),border-color .45s,transform .45s}
/* numero GIGANTE in filigrana nell'angolo in basso a destra (come il numerone
   della sezione servizi in home): enorme, semi-trasparente, tagliato dal bordo */
.feat-panel{overflow:hidden}
.feat-panel .feat-n.feat-n-btm{position:absolute;right:-.06em;bottom:-.22em;font-size:clamp(150px,17vw,280px);font-weight:800;letter-spacing:-.05em;line-height:1;color:rgba(255,255,255,.055);pointer-events:none}
.feat-panel:hover{background:#101015;border-color:rgba(0,184,212,.45);transform:translateY(-4px)}
.feat-panel .feat-n{font-size:14px;letter-spacing:.2em;color:var(--cy);font-weight:600;font-variant-numeric:tabular-nums;display:block}
/* titolo SEMPRE subito sotto al numero (non più spinto in fondo alla card):
   così le card restano allineate anche con descrizioni di lunghezza diversa */
.feat-panel-body{margin-top:clamp(20px,2.4vw,34px)}
.feat-panel .feat-title{font-size:clamp(28px,2.6vw,42px);font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.02;margin-bottom:16px}
.feat-panel .feat-desc{font-size:clamp(15px,1.25vw,19px);color:rgba(255,255,255,.62);line-height:1.65}

/* mobile/tablet: le fasce a 2 colonne (parola gigante + testo) collassano a 1 colonna.
   Soglia 1100px così anche i tablet (es. iPad 1024) non hanno la colonna di testo stretta. */
@media(max-width:1100px){
  /* hero più contenuto su tablet così i nomi lunghi non sforano */
  .ph-h1{font-size:clamp(40px,8.5vw,96px)}
  .svc-stage{padding-top:clamp(56px,9vw,80px);padding-bottom:clamp(56px,9vw,80px)}
  .svc-split{grid-template-columns:1fr;gap:30px}
  .svc-split-aside{position:static;height:auto;display:block}
  .svc-split-rev .svc-split-aside,.svc-split-rev .svc-split-main{order:0}
  .svc-split-main{min-height:0;display:block;padding:0}
  .feat-band-hdr{flex-direction:column;align-items:flex-start;gap:14px}
  .feat-hint{display:none}
  .feat-panel{flex-basis:clamp(300px,72vw,560px);min-height:380px}
}

/* parole spezzate per cascata/accensione (movimento stile PayPal) */
[data-mask] .w,[data-highlight] .w{display:inline-block}
/* striscia ticker (marquee) */
.svc-marquee{overflow:hidden;background:var(--w);color:var(--ink);border-top:.5px solid var(--ln);border-bottom:.5px solid var(--ln);padding:clamp(16px,2vw,26px) 0;white-space:nowrap}
.svc-marquee-row{display:inline-flex;align-items:center;gap:clamp(20px,3vw,42px);animation:svcmq 26s linear infinite;will-change:transform}
.svc-marquee:hover .svc-marquee-row{animation-play-state:paused}
.svc-mq-item{font-size:clamp(20px,2.6vw,40px);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)}
.svc-mq-dot{color:var(--cy);font-size:clamp(12px,1.2vw,16px)}
@keyframes svcmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.svc-marquee-row{animation:none}}

/* Marquee "sub-argomenti" (sottopagine satellite) — tono più discreto del marquee
   delle caratteristiche, per non competere visivamente con esso. */
.svc-marquee-sub{padding:clamp(10px,1.4vw,18px) 0;background:#fafafa}
.svc-marquee-sub .svc-mq-item{font-size:clamp(13px,1.4vw,18px);font-weight:600;letter-spacing:.04em;color:var(--dim);text-transform:none}
.svc-marquee-sub .svc-mq-dot{color:var(--cy);opacity:.7}

/* ── Definizione "answer-first" (chunk citabile dagli LLM) ───────────────
   Sottile fascia editoriale subito sotto l'hero. Tono sobrio, tipografia
   morbida, larghezza misurata per leggibilità (idealmente 60-80 caratteri
   per riga). Nessun bordo: stacca solo con uno sfondo leggermente diverso. */
.svc-def{background:#f7f9fa;border-top:.5px solid var(--ln);border-bottom:.5px solid var(--ln)}
.svc-def-in{max-width:880px;margin:0 auto;padding:clamp(28px,4vw,52px) clamp(20px,5vw,52px)}
.svc-def-in p{font-size:clamp(17px,1.7vw,22px);line-height:1.55;color:var(--ink);font-weight:400;margin:0;letter-spacing:-.005em}

/* ── FAQ accordion ──────────────────────────────────────────────────────
   Coerente con .sp-card / .feat-card: card a bordo sottile, raggio uniforme,
   chevron CSS che ruota all'apertura. Stato aperto evidenziato con bordo ciano. */
/* stessa tinta azzurrina della fascia recensioni in home: le card bianche
   dell'accordion risaltano e le due sezioni si richiamano tra le pagine */
.svc-faq-sec{padding:clamp(56px,8vw,96px) clamp(20px,5vw,52px);background:#e9f2f4}
.svc-faq-list{max-width:920px;margin:clamp(20px,3vw,40px) auto 0;display:flex;flex-direction:column;gap:14px}
.svc-faq-item{background:var(--w);border:1px solid var(--ln);border-radius:14px;overflow:hidden;transition:border-color .25s, box-shadow .25s}
.svc-faq-item[open]{border-color:rgba(0,184,212,.45);box-shadow:0 8px 24px rgba(15,23,42,.04)}
.svc-faq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,32px);font-size:clamp(16px,1.6vw,20px);font-weight:600;color:var(--ink);line-height:1.35;outline:none}
.svc-faq-item summary::-webkit-details-marker{display:none}
.svc-faq-item summary:focus-visible{box-shadow:inset 0 0 0 2px var(--cy)}
.svc-faq-n{font-size:11px;letter-spacing:.16em;color:var(--cy);font-weight:700;font-variant-numeric:tabular-nums}
.svc-faq-qt{min-width:0}
.svc-faq-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--ln);color:var(--ink);transition:transform .3s ease, border-color .3s, color .3s}
.svc-faq-item:hover .svc-faq-ic{border-color:var(--cy);color:var(--cy)}
.svc-faq-item[open] .svc-faq-ic{transform:rotate(180deg);border-color:var(--cy);color:var(--cy)}
.svc-faq-a{padding:0 clamp(20px,3vw,32px) clamp(22px,3vw,30px) clamp(20px,3vw,32px);border-top:.5px dashed var(--ln);margin-top:-1px}
.svc-faq-a p{font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:var(--dim);margin:18px 0 0 0;max-width:760px}
.svc-faq-a a{color:var(--cy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.svc-faq-a a:hover{filter:brightness(.85)}

/* ── Referenze AI in evidenza (pagina AI per le imprese) ── */
/* Due card per riga a TUTTA larghezza (niente tetto: sul widescreen restava mezza pagina vuota) */
.airef-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px;width:100%}
@media(max-width:720px){.airef-grid{grid-template-columns:1fr}}
.airef-card{display:flex;flex-direction:column;background:var(--w);border:1px solid var(--ln);border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--ink);transition:transform .3s,border-color .3s,box-shadow .3s}
.airef-card:hover{transform:translateY(-4px);border-color:var(--cy);box-shadow:0 20px 44px -20px rgba(0,184,212,.35)}
.airef-img{aspect-ratio:16/9;background:#0a0a0a center/cover no-repeat}
.airef-body{display:flex;flex-direction:column;gap:7px;padding:18px 20px 20px}
.airef-tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:700}
.airef-tit{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.airef-arr{margin-top:6px;font-size:13px;font-weight:600;color:var(--dim);transition:color .25s}
.airef-card:hover .airef-arr{color:var(--cy)}

/* ── "Dove operiamo" (pagina Web Agency): testo su colonne + pillole zone ── */
.wa-aree{max-width:1120px;margin:0 auto}
.wa-aree-t{font-size:clamp(26px,3.2vw,42px);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--ink);margin:14px 0 26px}
.wa-aree-txt{columns:2 380px;column-gap:52px;font-size:clamp(15px,1.5vw,17px);line-height:1.8;color:var(--dim);max-width:1040px}
.wa-aree-txt a{color:var(--cy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wa-aree-zone{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.wa-zona{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--ink);
  border:1px solid var(--ln);border-radius:999px;padding:9px 18px;text-decoration:none;background:var(--w)}
a.wa-zona{color:var(--cy);border-color:rgba(0,184,212,.4);background:rgba(0,184,212,.05);
  transition:background .25s,border-color .25s,transform .25s}
a.wa-zona:hover{background:var(--cy);color:#fff;border-color:var(--cy);transform:translateY(-2px)}
@media (max-width:680px){
  .svc-faq-item summary{grid-template-columns:auto 1fr auto;gap:14px;padding:16px 16px}
  .svc-faq-ic{width:30px;height:30px}
  .svc-faq-a{padding:0 16px 20px}
}

/* ── Famiglia servizio (sottopagina) — padre + sorelle ─────────────────
   Layout fullscreen 4 per riga, card che riusano lo stile di .sp-card ma
   con un trattamento distintivo per la card "padre" (bordo + accent ciano). */
.svc-family-sec{padding:clamp(56px,8vw,96px) clamp(20px,3vw,52px)}
.svc-family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:100%;margin:clamp(28px,4vw,48px) 0 0}
.svc-family-card{background:var(--w);border:1px solid var(--ln);border-radius:14px;padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:transform .25s,border-color .25s,box-shadow .25s;min-height:240px}
.svc-family-card:hover{transform:translateY(-4px);border-color:rgba(0,184,212,.55);box-shadow:0 12px 28px rgba(15,23,42,.06)}
.svc-family-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:700}
.svc-family-tit{font-size:clamp(18px,1.4vw,22px);font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:4px 0 0;color:var(--ink)}
.svc-family-dsc{font-size:13.5px;line-height:1.55;color:var(--dim);margin:0;flex:1}
.svc-family-arr{margin-top:auto;font-size:13px;font-weight:600;color:var(--cy);transition:gap .25s}
.svc-family-card:hover .svc-family-arr{letter-spacing:.02em}

/* Card "Pagina principale": più calda, accent ciano in evidenza per dire
   "qui torni al servizio madre". */
.svc-family-parent{background:linear-gradient(160deg,rgba(0,184,212,.05),rgba(0,184,212,.02));border-color:rgba(0,184,212,.35)}
.svc-family-parent .svc-family-tag{color:var(--cy)}
.svc-family-parent:hover{border-color:var(--cy);box-shadow:0 12px 28px rgba(0,184,212,.12)}

/* Responsive: 2 col a tablet, 1 col mobile. */
@media (max-width:1100px){
  .svc-family-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:600px){
  .svc-family-grid{grid-template-columns:1fr;gap:12px}
  .svc-family-card{min-height:0}
}

/* ── Sezione "Dal blog" — articoli collegati al servizio ────────────────
   Card image-forward con cover sopra + corpo sotto. Layout 4-col fullscreen
   coerente con .svc-family-grid e .sp-grid. */
.svc-blog-sec{padding:clamp(56px,8vw,96px) clamp(20px,3vw,52px)}
.svc-blog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:100%;margin:clamp(28px,4vw,48px) 0 0}
.svc-blog-card{background:var(--w);border:1px solid var(--ln);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .25s,border-color .25s,box-shadow .25s}
.svc-blog-card:hover{transform:translateY(-4px);border-color:rgba(0,184,212,.45);box-shadow:0 12px 28px rgba(15,23,42,.06)}
.svc-blog-cover{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#0e1218}
.svc-blog-cover-empty{background:linear-gradient(135deg,#0e1218,#1f2937)}
.svc-blog-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-blog-cat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:700}
.svc-blog-tit{font-size:clamp(16px,1.2vw,18px);font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0;color:var(--ink)}
.svc-blog-dsc{font-size:13px;line-height:1.55;color:var(--dim);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-blog-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:10px;border-top:.5px solid var(--ln)}
.svc-blog-date{font-size:11px;color:var(--dim);font-weight:500}
.svc-blog-arr{font-size:12px;font-weight:700;color:var(--cy);transition:gap .25s}
.svc-blog-card:hover .svc-blog-arr{letter-spacing:.02em}
@media (max-width:1100px){
  .svc-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:600px){
  .svc-blog-grid{grid-template-columns:1fr;gap:12px}
}

/* ════════════════════════════════════════════════════════════════════════
   📱 OVERRIDE MOBILE pagine interne (round 2026-06-24) — feedback utente
   ──────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* — Hero pagine interne: la kick (es. "Web Agency · Viterbo · dal 1996") va a capo
       invece di tagliare. Letter-spacing più stretto su schermi piccoli. */
  .ph-kick{letter-spacing:.16em;word-spacing:.05em;white-space:normal;
    overflow-wrap:break-word;word-break:break-word;font-size:10.5px}
  .ph-title{max-width:none;overflow-wrap:break-word;word-break:break-word;
    font-size:clamp(34px,9vw,52px)}
  .ph-tagline{font-size:clamp(16px,5vw,22px)}
  .ph-sub{font-size:clamp(14px,3.8vw,17px);line-height:1.55}
  /* — Pagina servizio: hero più compatto, no max-width 22ch che spezzava male. */
  .page-hero{padding-top:96px;padding-bottom:36px}

  /* — Sottotitoli sotto le parole giganti (es. "AGENZIA DI COMUNICAZIONE · DAL 1996"
       di Web Agency, "Le specializzazioni di…" sotto ESPLORA). Va a capo invece di
       essere tagliato dal viewport. */
  .deco-sub{font-size:clamp(12px,3.6vw,16px)!important;letter-spacing:.08em!important;
    white-space:normal;word-break:break-word;line-height:1.35;
    text-align:left!important;max-width:100%}
  /* — Parole giganti delle pagine interne: stesso clamp + word-break della home. */
  .deco{font-size:clamp(38px,12vw,72px)!important;
    white-space:normal!important;word-break:break-word;line-height:.92}
  /* — Servizio: APPROFONDIMENTI deco non deve uscire (era stessa cosa di NEWSLETTER) */
  .sp-sec .deco,.svc-faq-sec .deco,.svc-family-sec .deco,.svc-blog-sec .deco,
  .feat-band-hdr .deco,.intro-r h2{max-width:100%}
}

/* Forza il rendering "testuale" dei caratteri unicode (→ ↗ ↑ ✦ ✓) anche su iOS/Android,
   che altrimenti li sostituiscono con la versione emoji colorata. */
.site-page,.site-page *{font-variant-emoji:text}

/* ── Banner "Canale WhatsApp ufficiale" — visibile sia in home (sezione contatti)
   sia nella pagina /contatti. Colore WhatsApp brand verde; CTA in evidenza. */
.wa-channel-banner{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,22px);
  align-items:center;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#128c7e 0%,#25d366 100%);
  border-radius:18px;padding:clamp(16px,2.2vw,22px) clamp(18px,3vw,28px);
  margin-top:clamp(18px,2vw,28px);
  box-shadow:0 8px 24px rgba(37,211,102,.18);transition:transform .25s,box-shadow .25s}
.wa-channel-banner:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.28)}
.wa-channel-banner-ico{width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-channel-banner-ico svg{color:#fff}
.wa-channel-banner-text{min-width:0}
.wa-channel-banner-kick{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;opacity:.85;margin-bottom:2px}
.wa-channel-banner-title{font-size:clamp(16px,1.7vw,21px);font-weight:700;line-height:1.2;
  letter-spacing:-.01em}
.wa-channel-banner-sub{font-size:13px;opacity:.85;line-height:1.4;margin-top:4px}
.wa-channel-banner-cta{font-weight:700;font-size:14px;letter-spacing:.01em;white-space:nowrap;
  padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);transition:background .25s,border-color .25s}
.wa-channel-banner:hover .wa-channel-banner-cta{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.5)}
/* Versione "page" usata nella pagina /contatti: massimo larghezza coerente col layout */
.wa-channel-banner-page{max-width:1200px;margin-left:auto;margin-right:auto}
@media(max-width:768px){
  .wa-channel-banner{grid-template-columns:auto 1fr;gap:14px}
  .wa-channel-banner-cta{grid-column:1/-1;text-align:center;margin-top:4px}
  .wa-channel-banner-ico{width:44px;height:44px}
  .wa-channel-banner-ico svg{width:22px;height:22px}
}

/* ── Video aziendale (pagina Azienda) — anteprima + play con audio ── */
.va-sec{background:var(--w);overflow:hidden}
/* layout "come gli uffici": video card a sinistra, testo a destra */
/* il video occupa META' PAGINA esatta (50vw), il testo prende il resto */
.va-grid{display:grid;grid-template-columns:minmax(0,50vw) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.va-title{font-size:clamp(26px,3.4vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.04;color:var(--ink);margin:8px 0 18px}
.va-p{font-size:15.5px;color:var(--dim);line-height:1.8;margin:0 0 14px;max-width:52ch}
.va-dur{position:absolute;right:16px;bottom:14px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;letter-spacing:.08em;font-weight:600;padding:6px 12px;border-radius:999px;pointer-events:none}
.va-player.is-playing .va-dur{display:none}
@media(max-width:900px){.va-grid{grid-template-columns:1fr;gap:26px}}
/* Player full-bleed (a tutta larghezza), altezza contenuta. Attaccato alla sezione
   successiva (nessuno stacco): il poster reale evita che si confonda col nero sotto. */
/* La fascia segue le PROPORZIONI ESATTE dei tre file video (niente più altezza
   fissa che tagliava il video): desktop 16:9, tablet 16:10, mobile verticale 2:3.
   Le soglie coincidono con quelle della scelta del file (768 / 1200 in studio.html.twig). */
.va-player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:16px;border:.5px solid var(--ln)}
@media(max-width:1199px){.va-player{aspect-ratio:16/10}}
@media(max-width:767px){.va-player{aspect-ratio:2/3}}
.va-video{width:100%;height:100%;object-fit:cover;display:block}
.va-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);transition:background .2s,color .2s,transform .2s;padding-left:4px}
.va-play:hover{background:var(--cy);color:#001014;transform:translate(-50%,-50%) scale(1.06)}
.va-player.is-playing .va-play{display:none}
@media(max-width:600px){.va-play{width:64px;height:64px}}

/* ── /bandi: elenco "Aperti adesso" (dalla Gestione Bandi) ──
   Card grandi a TUTTA larghezza: su schermi grandi il bando deve dominare la
   sezione, non essere una riga persa a sinistra. */
.bnd-list{display:flex;flex-direction:column;gap:18px;margin-top:clamp(26px,3vw,44px)}
.bnd-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,44px);text-decoration:none;
  border:1px solid var(--ln);border-left:5px solid var(--cy);border-radius:0 18px 18px 0;
  padding:clamp(24px,2.8vw,40px) clamp(22px,3.2vw,48px);background:var(--w);
  transition:border-color .25s,box-shadow .3s,transform .25s}
.bnd-row:hover{transform:translateY(-3px);box-shadow:0 22px 48px -26px rgba(8,12,20,.5)}
.bnd-row.st-aperto{border-left-color:#22c55e}
.bnd-row.st-in_arrivo{border-left-color:#f0a929}
.bnd-row.st-chiuso{border-left-color:#c8ced4;opacity:.78}
/* pill di stato sopra il titolo */
.bnd-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:12px}
.st-aperto .bnd-pill{background:#dcfce7;color:#166534}
.st-in_arrivo .bnd-pill{background:#fef3c7;color:#92400e}
.st-chiuso .bnd-pill{background:#f4f4f5;color:#71717a}
.bnd-row-t{font-size:clamp(19px,2.2vw,30px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.bnd-row-s{font-size:clamp(13.5px,1.2vw,16px);color:var(--dim);margin-top:8px}
/* CTA a pulsante vero (non link piccolo); per i chiusi resta sobrio */
.bnd-row-badge{flex-shrink:0;display:inline-flex;align-items:center;background:var(--cy);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:15px 30px;border-radius:999px;white-space:nowrap;transition:filter .2s,transform .2s}
.bnd-row:hover .bnd-row-badge{filter:brightness(.94);transform:translateX(3px)}
@media(max-width:760px){.bnd-row{flex-direction:column;align-items:flex-start;gap:16px}}

/* ── Pagina News, layout "la grande viaggia": righe da 3 allineate, la card
   grande (2 colonne su 4) si sposta a ogni riga: sinistra → centro → destra ── */
.nx-wrap{padding:clamp(10px,2vw,24px) 52px 110px;background:var(--w)}
@media(max-width:768px){.nx-wrap{padding:8px 22px 70px}}
/* pillole filtro categorie */
.nx-chips{display:flex;gap:8px;flex-wrap:wrap;margin:clamp(20px,2.6vw,30px) 0 clamp(34px,4vw,54px)}
.nx-chip{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:10px 18px;border-radius:999px;border:1px solid rgba(0,0,0,.18);color:var(--ink);text-decoration:none;transition:border-color .25s,background .25s,color .25s}
.nx-chip:hover{border-color:var(--ink)}
.nx-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* mobile: le pillole diventano una sola tendina (stesso pattern del portfolio) */
@media(max-width:768px){.nx-chips .nx-chip{display:none}}
/* griglia */
.nx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(34px,3.8vw,60px) clamp(18px,2.2vw,28px)}
.nx-card{text-decoration:none;color:var(--ink);display:block;min-width:0}
.nx-ph{border-radius:16px;overflow:hidden;background:#0b1320;position:relative}
.nx-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(var(--ez))}
/* velo nero di default su tutte le foto; in hover si SCURISCE per far
   leggere la descrizione breve che appare sopra l'immagine */
.nx-ph::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);transition:background .35s;pointer-events:none}
.nx-card:hover .nx-ph::after{background:rgba(0,0,0,.62)}
.nx-ph-exc{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px 15px;color:rgba(255,255,255,.94);font-size:13.5px;line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;pointer-events:none}
.nx-card:hover .nx-ph-exc{opacity:1;transform:none}
.nx-card:hover .nx-ph img{transform:scale(1.05)}
.nx-card.sm .nx-ph{aspect-ratio:6/7}
.nx-card.big{grid-column:span 2}
.nx-card.big .nx-ph{aspect-ratio:16/9.1}
.nx-card.big.centro{grid-column:2/4}
.nx-cat{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);font-weight:600;margin:14px 0 6px}
.nx-tit{margin:0;font-size:clamp(16px,1.55vw,20px);font-weight:700;letter-spacing:-.02em;line-height:1.18}
.nx-card.big .nx-tit{font-size:clamp(22px,2.3vw,30px)}
.nx-date{display:block;font-size:11px;color:rgba(0,0,0,.35);letter-spacing:.06em;margin-top:8px}
.nx-hide{display:none}
/* carica altre */
.nx-more{display:flex;justify-content:center;margin-top:clamp(44px,5vw,70px)}
.nx-more-btn{border:1px solid var(--ink);color:var(--ink);background:none;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:16px 42px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.nx-more-btn:hover{background:var(--ink);color:#fff}
/* mobile: una colonna, tutte le card uguali */
@media(max-width:900px){
  .nx-grid{grid-template-columns:1fr;gap:30px}
  .nx-card.big,.nx-card.big.centro{grid-column:auto}
  .nx-card.sm .nx-ph,.nx-card.big .nx-ph{aspect-ratio:16/10}
}

/* ── Fascia Google Partner (pagina Web Agency): fascia scura in dialogo con la
   banda diversaMENTE, tipografia allineata alle sezioni forti della pagina ── */
.gp-sec{background:#0b0b0b;border-top:.5px solid rgba(255,255,255,.06)}
.gp-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,80px);align-items:center}
.gp-title{font-size:clamp(38px,5.2vw,84px);font-weight:700;letter-spacing:-.045em;line-height:.98;color:#fff;margin:12px 0 22px}
/* "Google" coi colori ufficiali del brand (blu, rosso, giallo, blu, verde, rosso) */
.gp-g1{color:#4285F4}.gp-g2{color:#EA4335}.gp-g3{color:#FBBC05}.gp-g4{color:#34A853}
.gp-p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.62);max-width:56ch;margin:0 0 14px}
.gp-p strong{color:#fff}
.gp-badge{background:#fff;border-radius:24px;padding:clamp(34px,4.5vw,60px);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 80px -30px rgba(0,184,212,.25)}
.gp-badge img{width:clamp(170px,17vw,230px);height:auto;display:block}
@media(max-width:900px){.gp-grid{grid-template-columns:1fr}.gp-badge{max-width:340px;margin:0 auto}}

/* ── Blocco "testo" dei servizi, layout editoriale: titolo sticky a sinistra,
   capoversi a destra (niente capolettera, richiesta utente) ── */
/* full page: niente gabbia centrata, il blocco usa tutta la larghezza della fascia */
.blkt-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,90px);align-items:start}
.blkt-body p{max-width:70ch}
.blkt-left{position:sticky;top:110px}
.blkt-h{font-size:clamp(28px,3.4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:12px 0 0}
.blkt-line{width:56px;height:3px;background:var(--cy);margin-top:26px}
.blkt-body p{font-size:clamp(15px,1.4vw,18px);color:#3a3a3a;line-height:1.85;margin:0 0 1.2em}
.blkt-body p:last-child{margin-bottom:0}
@media(max-width:900px){.blkt-grid{grid-template-columns:1fr;gap:22px}.blkt-left{position:static}}

/* ── Pagina bando, redesign: fatti chiave, 3 passi, in breve azzurrino,
   FAQ a due colonne, altri bandi ── */
.bnd-wrap{max-width:1180px;margin:0 auto}
.bnd-h2{font-size:clamp(24px,2.8vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:10px 0 30px}
/* fatti chiave nell'hero scuro */
.bnd-fatti{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;margin-top:26px}
.bnd-fatto{background:#0d0d0f;padding:15px 18px}
.bnd-fatto span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:4px}
.bnd-fatto b{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2}
.bnd-fatto b.cy{color:var(--cy)}
@media(max-width:640px){.bnd-fatti{grid-template-columns:1fr}}
/* come funziona */
.bnd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.bnd-step{border:1px solid var(--ln);border-radius:16px;padding:26px}
.bnd-step-n{font-size:13px;font-weight:700;color:var(--cy);letter-spacing:.1em}
.bnd-step h3{font-size:18px;letter-spacing:-.02em;margin:10px 0 8px}
.bnd-step p{font-size:13.5px;color:var(--dim);line-height:1.65;margin:0}
.bnd-gratis{display:inline-flex;align-items:center;gap:9px;margin-top:26px;background:rgba(0,184,212,.08);border:1px solid rgba(0,184,212,.25);color:#067a8d;font-size:13px;font-weight:600;padding:12px 20px;border-radius:999px}
@media(max-width:820px){.bnd-steps{grid-template-columns:1fr}}
/* il bando in breve: fascia azzurrina di famiglia */
.bnd-brev-sec{background:#e9f2f4;border-top:.5px solid var(--ln);padding:clamp(60px,8vw,100px) clamp(20px,5vw,52px)}
.bnd-brev{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,5vw,80px);align-items:start}
.bnd-brev-left{position:sticky;top:110px}
.bnd-brev-h{font-size:clamp(26px,3vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:10px 0 0}
.bnd-line{width:56px;height:3px;background:var(--cy);margin-top:24px}
.bnd-brev-body p{font-size:15.5px;color:#3a3a3a;line-height:1.85;margin:0 0 1.1em;max-width:66ch}
.bnd-brev-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.bnd-bc{background:var(--w);border-radius:14px;padding:20px}
.bnd-bc h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);margin:0 0 8px}
.bnd-bc p{font-size:13.5px;color:var(--dim);line-height:1.6;margin:0}
@media(max-width:900px){.bnd-brev{grid-template-columns:1fr;gap:24px}.bnd-brev-left{position:static}.bnd-brev-cards{grid-template-columns:1fr}}
/* FAQ a due colonne con accordion numerato */
.bnd-faq{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(36px,5vw,80px);align-items:start}
.bnd-faq-left{position:sticky;top:110px}
.bnd-faq-help{margin-top:28px;font-size:13.5px;color:var(--dim);line-height:1.7}
.bnd-faq-help a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--cy)}
.bnd-fq{border:1px solid var(--ln);border-radius:16px;margin-bottom:12px;overflow:hidden;transition:box-shadow .25s,border-color .25s;background:var(--w)}
.bnd-fq[open]{border-color:rgba(0,184,212,.45);box-shadow:0 18px 44px -26px rgba(0,0,0,.18)}
.bnd-fq-q{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;cursor:pointer;list-style:none}
.bnd-fq-q::-webkit-details-marker{display:none}
.bnd-fq-n{font-size:12px;font-weight:700;color:var(--cy);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.bnd-fq-t{font-size:15px;font-weight:600;letter-spacing:-.01em}
.bnd-fq-ic{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:all .25s}
.bnd-fq[open] .bnd-fq-ic{background:var(--cy);border-color:var(--cy);color:#fff;transform:rotate(180deg)}
.bnd-fq-a{padding:0 20px 20px 56px;font-size:14px;color:var(--dim);line-height:1.75;max-width:60ch}
@media(max-width:900px){.bnd-faq{grid-template-columns:1fr;gap:24px}.bnd-faq-left{position:static}}
/* altri bandi */
.bnd-alt-sec{background:var(--bg)}
.bnd-alt{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bnd-alt-card{background:var(--w);border:1px solid var(--ln);border-radius:16px;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(var(--ez)),box-shadow .3s}
.bnd-alt-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px -26px rgba(0,0,0,.18)}
.bnd-alt-card b{font-size:16px;letter-spacing:-.02em;display:block}
.bnd-alt-card small{display:block;font-size:12px;color:var(--dim);margin-top:4px}
.bnd-alt-pill{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;white-space:nowrap}
.bnd-alt-pill.st-aperto{background:rgba(46,204,113,.14);color:#1d8a4e}
.bnd-alt-pill.st-in_arrivo{background:rgba(240,169,41,.15);color:#a5720e}
.bnd-alt-pill.st-chiuso{background:rgba(0,0,0,.06);color:var(--dim)}
@media(max-width:760px){.bnd-alt{grid-template-columns:1fr}}

/* ── PORTFOLIO, toggle vista (solo desktop ≥900px): elenco fullscreen (default),
   griglia a 2 o a 3 colonne con card compatte. In fondo al file: vince per ordine. ── */
.pf-vista{display:none}
@media(min-width:900px){
  .pf-vista{display:inline-flex;gap:6px;margin-left:auto;align-self:center}
  .pf-vbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:.5px solid var(--ln);background:transparent;color:#8a8a8a;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
  .pf-vbtn:hover{color:var(--ink);border-color:#bbb}
  .pf-vbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}

  .pf-fs-list.pf-vista-2,.pf-fs-list.pf-vista-3{display:grid;gap:14px;padding:0 clamp(20px,4vw,52px)}
  .pf-fs-list.pf-vista-2{grid-template-columns:repeat(2,1fr)}
  .pf-fs-list.pf-vista-3{grid-template-columns:repeat(3,1fr)}
  .pf-vista-2 .pf-fs-card,.pf-vista-3 .pf-fs-card{min-height:0;border-radius:18px;padding:clamp(20px,2vw,30px)}
  .pf-vista-2 .pf-fs-card{aspect-ratio:4/3}
  .pf-vista-3 .pf-fs-card{aspect-ratio:1/1}
  .pf-vista-2 .pf-fs-tit{font-size:clamp(24px,2.6vw,40px)}
  .pf-vista-3 .pf-fs-tit{font-size:clamp(20px,1.9vw,30px)}
  .pf-vista-2 .pf-fs-desc,.pf-vista-3 .pf-fs-desc{display:none}
  .pf-vista-2 .pf-fs-n,.pf-vista-3 .pf-fs-n{top:16px;right:18px}
  .pf-vista-2 .pf-fs-body,.pf-vista-3 .pf-fs-body{gap:8px}
  .pf-vista-3 .pf-fs-cli{font-size:13px}
  .pf-vista-2 .pf-fs-arr,.pf-vista-3 .pf-fs-arr{margin-top:10px;font-size:11px}
}

/* ── COUNTER su MOBILE: stile compatto della pagina servizi (numeri affiancati
   su 2 colonne, cifre ridotte) su tutte le pagine che usano .st-stats
   (Azienda, elenco Bandi). Prima: una riga gigante per numero. ── */
@media(max-width:768px){
  .st-stats,.st-stats.cols-3{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px;padding:32px 22px}
  .st-stats>div,.st-stats.cols-3>div{padding:0;border:none!important;gap:5px}
  .st-n{font-size:clamp(28px,8.5vw,38px)}
  .st-l{font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.5)}
}

/* ── NASTRO CARATTERISTICHE: carosello manuale (2026-07-29, prima era pin GSAP).
   Frecce tonde centrate sotto le card; su desktop anche trascinamento col mouse. ── */
.feat-nav{position:relative;z-index:1;display:flex;justify-content:center;gap:12px;margin-top:clamp(24px,3vw,40px)}
.feat-arr{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;cursor:pointer;transition:border-color .25s,background .25s,opacity .25s}
.feat-arr:hover{border-color:var(--cy);background:rgba(0,184,212,.12)}
.feat-arr:disabled{opacity:.28;cursor:default;border-color:rgba(255,255,255,.22);background:transparent}
@media(pointer:fine){
  .feat-viewport{cursor:grab}
  .feat-viewport.trascina{cursor:grabbing;scroll-snap-type:none;user-select:none}
}

/* ── FIREFOX: niente blur sulle barre fisse/sticky (scatti da ridisegno CPU) ── */
@supports (-moz-appearance:none){
  .snav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,8,8,.96)}
  .snav-links{backdrop-filter:none;background:rgba(8,8,8,.99)}
}

/* ── SPUNTA PRIVACY nei form pubblici (contatti/assistenza/bando/landing) ──
   In fondo al file per la regola dell'ordine CSS (vince sull'eventuale base). */
.priv-chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;color:var(--dim);line-height:1.5}
.priv-chk input{margin-top:2px;width:16px;height:16px;flex:0 0 16px;accent-color:var(--cy);cursor:pointer}
.priv-chk a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.priv-chk a:hover{color:var(--cy)}