/* kom-sections.css — stili delle SEZIONI delle pagine interne (servizi, portfolio).
   Le classi della homepage stanno già in kom-ds.css; qui ci sono i blocchi specifici:
   svc-hero, crumb, effigie, split/affiancata, leadcols, biglist, compare, fullbleed,
   feat-grid, benefits, faq + le categorie/griglia del portfolio. */

/* ===== da pagina servizio (Analisi Marketing) ===== */
/* ---- page: Analisi Marketing (accent = magenta) ---- */
.crumb { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:28px; display:flex; gap:8px; flex-wrap:wrap; }
.crumb a { text-decoration:none; color:var(--mute); }
.crumb a:hover { color:var(--ink); }
.crumb .sep { color:var(--rule); }

.svc-hero { padding:72px 0 64px; border-top:0; }
.svc-hero .tag { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--magenta); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.svc-hero .tag .dot { width:10px; height:10px; border-radius:999px; background:var(--magenta); display:inline-block; }
.svc-hero h1 { font-family:var(--display); font-size:clamp(40px,6vw,88px); font-weight:var(--fw-display); line-height:.98; letter-spacing:-0.025em; max-width:1040px; text-wrap:balance; }
.svc-hero .lead { font-size:var(--fs-lead); color:var(--mute); max-width:640px; margin:28px 0 0; line-height:1.55; }
.svc-hero .ctas { margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; }
.sec-cta { margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

.why { display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:start; }
.why p.big { font-size:var(--fs-titolo-s); line-height:1.4; margin:0; font-family:var(--display); font-weight:var(--fw-titolo); letter-spacing:-0.01em; max-width:640px; }
.why .quote { border-left:2px solid var(--magenta); padding-left:24px; }
.why .quote .q { font-family:var(--display); font-style:italic; font-size:var(--fs-titolo-s); line-height:1.3; margin:0; }
.why .quote .a { font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); margin-top:14px; text-transform:uppercase; letter-spacing:.06em; }

.feat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.feat { position:relative; background:var(--paper); padding:30px 28px; display:flex; flex-direction:column; gap:8px; min-height:180px; transition:background .28s ease, transform .28s ease; }
.feat::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--magenta) 0 25%, var(--yellow) 25% 50%, var(--teal) 50% 75%, var(--azure) 75% 100%); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.feat .n { font-family:var(--mono); font-size:var(--fs-meta); color:var(--magenta); letter-spacing:.04em; transition:color .28s ease; }
.feat h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); }
.feat p { font-size:var(--fs-testo-s); color:var(--mute); margin:0; line-height:1.5; }
/* hover — vale per tutte le griglie feature del sito */
@media (hover:hover){
  .feat:hover { background:var(--soft); }
  .feat:hover::before { transform:scaleX(1); }
  .feat.is-dark:hover { background:#000 !important; }
}
/* sfondo sezioni soft + cella scura della griglia feature — colori via CSS (markup Gutenberg valido) */
.has-soft { background:var(--soft); }
.feat.is-dark { background:var(--ink); }
.feat.is-dark::before { display:none; }
.feat.is-dark .n { color:var(--yellow); }
.feat.is-dark h3 { color:#fff; }
.feat.is-dark p { color:#c8c6c2; }

.approach { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.approach p { font-size:var(--fs-testo); color:var(--mute); line-height:1.6; margin:0 0 16px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.chip { font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.03em; margin:0; display:inline-flex; align-items:center; gap:12px; border-radius:5px; padding:11px 16px 11px 0; color:var(--ink); background:var(--soft); border:1px solid var(--rule); overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; }
.chip::before { content:""; align-self:stretch; width:5px; background:var(--chip-c,var(--teal)); flex:none; transition:none; }
.chip:nth-child(4n+1) { --chip-c:var(--magenta); }
.chip:nth-child(4n+2) { --chip-c:var(--teal); }
.chip:nth-child(4n+3) { --chip-c:var(--azure); }
.chip:nth-child(4n+4) { --chip-c:var(--yellow); }
.chip:hover { transform:translateY(-2px); box-shadow:0 10px 22px -14px color-mix(in srgb,var(--chip-c,var(--teal)) 70%,transparent); }

.benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; counter-reset:ben; align-items:stretch; }
.benefit { counter-increment:ben; position:relative; --b-accent:var(--teal); background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--b-accent); border-radius:0 0 6px 6px; padding:26px 24px 28px; display:flex; flex-direction:column; min-height:220px; transition:transform .22s ease, box-shadow .22s ease; }
.benefit:nth-child(4n+1){ --b-accent:var(--teal); }
.benefit:nth-child(4n+2){ --b-accent:var(--azure); }
.benefit:nth-child(4n+3){ --b-accent:var(--yellow); }
.benefit:nth-child(4n+4){ --b-accent:var(--magenta); }
.benefit::before { content:counter(ben,decimal-leading-zero); font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo); line-height:1; letter-spacing:-0.02em; color:var(--b-accent); display:block; margin-bottom:14px; }
.benefit h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); margin-bottom:10px; letter-spacing:-0.01em; transition:color .22s ease; }
.benefit p { font-size:var(--fs-testo-s); color:var(--mute); margin:0; line-height:1.55; }
.benefit:hover { transform:translateY(-5px); box-shadow:0 22px 44px -28px rgba(17,17,18,.45); }
.benefit:hover h3 { color:var(--b-accent); }

@media print { .benefit { box-shadow:none !important; } }

.faq { display:flex; flex-direction:column; border-top:1px solid var(--rule); max-width:920px; }
.faq details { border-bottom:1px solid var(--rule); }
.faq summary { list-style:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; gap:24px; align-items:baseline; font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.01em; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .ic { font-family:var(--mono); color:var(--magenta); font-size:22px; line-height:1; transition:transform .2s ease; flex:0 0 auto; }
.faq details[open] summary .ic { transform:rotate(45deg); }
.faq .ans { padding:0 0 26px; font-size:var(--fs-testo); color:var(--mute); line-height:1.6; max-width:760px; }

@media (max-width:980px){
  .why, .approach { grid-template-columns:1fr; gap:40px; }
  .feat-grid { grid-template-columns:1fr; }
  .benefits { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1fr !important; gap:36px !important; }
  .split.reverse .split-media { order:0 !important; }
  .leadcols .cols { grid-template-columns:1fr; gap:28px; }
  .biglist .row { grid-template-columns:64px 1fr; gap:20px; }
  .compare .crow { grid-template-columns:1fr; }
  .compare .cc.us { border-left:0; border-right:0; }
  .effigie { display:flex; flex-direction:column; grid-template-columns:1fr; min-height:0; }
  .effigie .eq { width:100%; max-width:none; padding:56px 24px; }
  .effigie .portrait { width:100%; height:300px; }
}

/* alternating text / image blocks */
.split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split + .split { margin-top:96px; }
.split.reverse .split-media { order:2; }
.split-media { width:100%; aspect-ratio:4/5; }
.split-media image-slot { width:100%; height:100%; display:block; }
.split-body h2 { font-family:var(--display); font-size:clamp(30px,3.4vw,46px); font-weight:var(--fw-display); line-height:1.04; letter-spacing:-0.02em; margin-bottom:24px; }
.split-body p { font-size:var(--fs-testo); color:var(--mute); line-height:1.6; margin:0 0 18px; max-width:560px; }
.split-body p strong { color:var(--ink); font-weight:var(--fw-forte); }
.split-body .acc { margin-top:28px; border-top:1px solid var(--rule); }
.split-body .acc details { border-bottom:1px solid var(--rule); }
.split-body .acc summary { list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; gap:20px; align-items:center; font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.01em; color:var(--ink); }
.split-body .acc summary::-webkit-details-marker { display:none; }
.split-body .acc summary .ic { font-family:var(--mono); color:var(--magenta); font-size:var(--fs-meta); transition:transform .2s ease; flex:0 0 auto; }
.split-body .acc details[open] summary .ic { transform:rotate(90deg); }
.split-body .acc .ans { padding:0 0 20px; font-size:var(--fs-testo-s); color:var(--mute); line-height:1.6; }

/* ── fase: blocco "soluzioni di questa fase" sotto l'affiancata ── */
.split-body .fase-sol { margin-top:30px; border-top:1px solid var(--rule); padding-top:22px; }
.split-body .fase-sol .sl { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 0 14px; }
.split-body .fase-sol .chips { display:flex; flex-wrap:wrap; gap:8px; }
.has-dark .split-body .fase-sol { border-top-color:rgba(255,255,255,.18); }
.has-dark .chip, .ls-dark .chip { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }

/* ── fase: riga "Con l'AI" — strumenti che accelerano la fase ── */
.split-body .fase-ai { margin-top:26px; border-left:2px solid var(--magenta); padding:2px 0 2px 18px; }
.split-body .fase-ai .sl { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--magenta); margin:0 0 8px; }
.split-body .fase-ai p:not(.sl) { font-size:var(--fs-testo-s); color:var(--mute); line-height:1.65; margin:0; }
.split-body .fase-ai b { color:var(--ink); font-weight:var(--fw-forte); }
.has-dark .split-body .fase-ai b { color:var(--paper); }

/* ── showcase blocks ── */
/* 1 · lead + columns */
.leadcols .lead-h { font-family:var(--display); font-size:clamp(28px,3.2vw,42px); font-weight:var(--fw-display); line-height:1.12; letter-spacing:-0.02em; max-width:920px; margin-bottom:48px; }
.leadcols .cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
/* 2026-09-05: le colonne del kit sono wp:column senza classe .col → selettore aggiunto */
.leadcols .col .ch, .leadcols .wp-block-column .ch { font-family:var(--mono); font-size:var(--fs-meta); color:var(--magenta); letter-spacing:.06em; margin-bottom:10px; text-transform:uppercase; }
.leadcols .col p, .leadcols .wp-block-column p { font-size:var(--fs-testo); color:var(--mute); line-height:1.6; margin:0; }

/* 2 · big numbered list */
.biglist { display:flex; flex-direction:column; }
.biglist .row { display:grid; grid-template-columns:110px 1fr; gap:32px; padding:28px 0; border-top:1px solid var(--rule); align-items:baseline; }
.biglist .row:last-child { border-bottom:1px solid var(--rule); }
.biglist .num { font-family:var(--display); font-size:var(--fs-titolo-l); font-weight:var(--fw-sottile); color:var(--magenta); line-height:.9; }
.biglist h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); margin-bottom:8px; letter-spacing:-0.01em; }
.biglist p { font-size:var(--fs-testo); color:var(--mute); line-height:1.55; margin:0; max-width:660px; }

/* 3 · compare table */
.compare { border:1px solid var(--rule); border-radius:10px; overflow:hidden; max-width:1000px; }
.compare .crow { display:grid; grid-template-columns:1.1fr 1.05fr 1.05fr; border-top:1px solid var(--rule); }
.compare .crow:first-child { border-top:0; }
.compare .cc { padding:16px 24px; font-size:var(--fs-testo); line-height:1.4; display:flex; align-items:center; }
.compare .crow.head { background:var(--ink); }
.compare .crow.head .cc { font-family:var(--mono); font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.1em; font-weight:var(--fw-etichetta); padding-top:18px; padding-bottom:18px; color:rgba(255,255,255,.7); }
.compare .crow.head .cc.us { color:#fff; background:var(--magenta); }
.compare .crow.head .cc.them { color:rgba(255,255,255,.55); }
.compare .cc.feature { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; text-transform:uppercase; color:var(--mute); font-weight:var(--fw-etichetta); }
.compare .cc.us { background:rgba(229,20,123,.06); border-left:1px solid var(--rule); border-right:1px solid var(--rule); color:var(--ink); font-weight:500; }
.compare .crow:not(.head):hover .cc { background:var(--soft); }
.compare .crow:not(.head):hover .cc.us { background:rgba(229,20,123,.12); }
.compare .cc .yes { color:var(--magenta); font-weight:var(--fw-forte); }
.compare .cc .no { color:var(--mute); }

/* 4 · full-bleed image + caption */
.fullbleed image-slot { width:100%; height:460px; display:block; }
.fullbleed .cap { font-family:var(--mono); font-size:var(--fs-meta); color:var(--mute); letter-spacing:.04em; margin-top:14px; display:flex; justify-content:space-between; gap:16px; }

/* 5 · Effigie — citazione + ritratto su banda scura (due colonne separate) */
.effigie { position:relative; overflow:hidden; padding:0; display:grid; grid-template-columns:1fr clamp(340px,46%,680px); align-items:end; min-height:460px;
  background:radial-gradient(50% 90% at 12% -10%, rgba(69,181,229,.22), transparent 60%), radial-gradient(48% 100% at 92% 120%, rgba(229,20,123,.18), transparent 60%), radial-gradient(120% 160% at 10% -25%, #17284c 0%, #0a0f1e 62%); }
.effigie::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(58% 130% at 10% -10%, rgba(229,20,123,.07), transparent 60%), radial-gradient(58% 130% at 92% 110%, rgba(69,181,229,.08), transparent 60%); }
@media (prefers-reduced-motion:no-preference){ .effigie::before { background-size:200% 200%; animation:aiAura 16s ease-in-out infinite alternate; } }
.effigie > * { position:relative; z-index:1; }
.effigie .eq { align-self:center; padding:clamp(56px,6vw,84px) 56px; padding-left:max(56px, calc((100vw - 1400px) / 2 + 56px)); max-width:760px; }
.effigie .tag { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); margin-bottom:26px; }
.effigie blockquote { font-family:var(--display); font-size:clamp(26px,2.8vw,42px); font-weight:var(--fw-display); line-height:1.2; letter-spacing:-0.02em; color:#fff; margin:0; text-wrap:pretty; }
/* lettering B (deciso 2026-07-19, banco: Bozze/PROVA - Effigie citazione (lettering).html): base light, frase-perno bold+sottolineatura magenta, virgoletta decorativa */
.effigie blockquote::before { content:"\201C"; display:block; font-family:var(--display); font-weight:var(--fw-display); font-size:64px; line-height:.65; color:var(--magenta); margin:0 0 12px; }
.effigie .link-u-light { display:inline-block; margin:clamp(28px,3vw,40px) 0 0; font-size:var(--fs-link); font-weight:var(--fw-etichetta); }
.effigie .link-u-light a { text-decoration:none; }
.effigie .author { font-family:var(--display); font-style:italic; font-size:var(--fs-titolo-s); color:rgba(255,255,255,.62); margin-top:26px; }
.effigie .portrait { overflow:hidden; margin:0; align-self:end; display:flex; height:100%; }
.effigie .portrait img { width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; margin:0; }

/* ===== da pagina Portfolio (categorie + griglia lavori) ===== */
.cats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.cat { background:var(--paper); padding:36px 32px; display:flex; flex-direction:column; gap:14px; min-height:240px; text-decoration:none; color:inherit; transition:background .18s ease; }
.cat:hover { background:var(--soft); }
.cat .cn { font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-0.02em; }
.cat .cn .dot { display:inline-block; width:12px; height:12px; border-radius:999px; margin-right:10px; vertical-align:middle; }
.cat p { font-size:var(--fs-testo-s); color:var(--mute); line-height:1.55; margin:0; flex:1; }
.cat .go { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:var(--ink); }

/* works toolbar — banda-titolo scura, full-bleed ai lati */
.works-head { position:relative; background:var(--ink); color:var(--paper);
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-bottom:48px;
  padding:62px max(var(--pad), calc((100vw - 1400px) / 2 + var(--pad)));
  overflow:hidden; }
.works-head .sec-intro { color:var(--yellow); }
.works-head h2 { font-size:clamp(32px,4vw,56px); color:var(--paper); }
.works-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--magenta) 0 25%,var(--yellow) 0 50%,var(--teal) 0 75%,var(--azure) 0); }
.works-head .filters { display:flex; gap:10px; flex-wrap:wrap; }
.works-head .filter { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em;
  background:transparent; color:#cfcdc8; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:9px 18px; cursor:pointer; transition:color .16s ease, background .16s ease, border-color .16s ease; }
.works-head .filter:hover { color:#fff; border-color:rgba(255,255,255,.55); }
.works-head .filter.active { background:var(--paper); color:var(--ink); border-color:var(--paper); }
@media (max-width:620px){ .works-head { padding:42px var(--pad); } }

/* works grid */
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.work { border:1px solid var(--rule); background:var(--paper); display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease; }
.work:hover { transform:translateY(-3px); box-shadow:0 24px 48px -28px rgba(17,17,18,.3); }
.work.hide { display:none; }
.work .thumb { aspect-ratio:4/3; border-bottom:1px solid var(--rule); display:flex; align-items:flex-end; padding:20px; position:relative; overflow:hidden; }
.work .thumb::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent,var(--ink)); }
.work .thumb .nm { font-family:var(--display); font-size:clamp(22px,2vw,30px); font-weight:var(--fw-display); line-height:1; color:var(--accent,var(--ink)); opacity:.85; letter-spacing:-0.01em; }
.work .body { padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; }
.work .wtags { display:flex; gap:6px; flex-wrap:wrap; }
.work .wtag { font-family:var(--mono); font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.05em; color:var(--mute); border:1px solid var(--rule); border-radius:999px; padding:4px 9px; }
.work h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.01em; line-height:1.12; }
.work p { font-size:var(--fs-testo-s); color:var(--mute); line-height:1.5; margin:0; }
.work .more { font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.04em; color:var(--ink); margin-top:2px; }

/* singolo progetto — intestazione case study */
.progetto-hero .tag { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; }
.progetto-hero .ph-stat { display:flex; align-items:baseline; gap:14px; margin-top:32px; border-top:1px solid var(--rule); padding-top:24px; max-width:420px; }
.progetto-hero .ph-stat .big { font-family:var(--display); font-size:64px; font-weight:var(--fw-display); letter-spacing:-0.02em; line-height:1; }
.progetto-hero .ph-stat .lbl { font-size:var(--fs-testo-s); color:var(--mute); }
.progetto-hero .ph-media { margin-top:40px; }
.progetto-hero .ph-media img { width:100%; height:auto; border-radius:8px; display:block; }

.empty { display:none; padding:60px 0; text-align:center; color:var(--mute); font-family:var(--mono); font-size:var(--fs-meta); }

@media (max-width:980px){
  .cats { grid-template-columns:1fr; }
  .work-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .work-grid { grid-template-columns:1fr; }
}

/* ============================================================
   HERO — varianti d'apertura "eroe"
   Tre tagli: Vetrina (split + immagine), Insegna (centrato + reel),
   Banda (banda scura, momento bold). Tutti su sistema: Libre Franklin,
   Libre Franklin, i 4 punti brand come unico accento colore.
   ============================================================ */

/* ---- comuni ---- */
.hero-eyebrow { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:12px; }
/* 4 punti brand disegnati in CSS — nessun figlio markup, robusto come blocco nativo */
.brand-dots { display:inline-block; flex:0 0 auto; vertical-align:middle; height:9px; width:54px;
  background-repeat:no-repeat; background-size:9px 9px; background-position:0 50%, 15px 50%, 30px 50%, 45px 50%;
  background-image:
    radial-gradient(circle, var(--magenta) 49%, transparent 51%),
    radial-gradient(circle, var(--yellow) 49%, transparent 51%),
    radial-gradient(circle, var(--teal) 49%, transparent 51%),
    radial-gradient(circle, var(--azure) 49%, transparent 51%); }

/* ── A · VETRINA — split editoriale: testo a sx, immagine alta a dx ── */
.hero-vetrina { padding:84px 0 80px; border-top:0; }
.hero-vetrina .hv-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:64px; align-items:center; }
.hero-vetrina .hero-eyebrow { margin-bottom:26px; }
.hero-vetrina h1 { font-family:var(--display); font-size:clamp(44px,5.2vw,80px); font-weight:var(--fw-display); line-height:.98; letter-spacing:-0.025em; text-wrap:balance; }
.hero-vetrina h1 .it { font-style:italic; font-weight:400; }
.hero-vetrina h1 .d-m{ color:var(--magenta); } .hero-vetrina h1 .d-y{ color:var(--yellow); } .hero-vetrina h1 .d-t{ color:var(--teal); } .hero-vetrina h1 .d-a{ color:var(--azure); }
.hero-vetrina .hv-lead { font-size:var(--fs-lead); color:var(--mute); max-width:460px; margin:30px 0 0; line-height:1.6; }
.hero-vetrina .hv-ctas { margin-top:34px; display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.hero-vetrina .hv-media { position:relative; aspect-ratio:4/5; background:var(--soft); }
.hero-vetrina .hv-media image-slot, .hero-vetrina .hv-media .wp-block-image { width:100%; height:100%; display:block; margin:0; }
.hero-vetrina .hv-media .wp-block-image img { width:100%; height:100%; object-fit:cover; }
.hero-vetrina .hv-media::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; z-index:2;
  background:linear-gradient(90deg, var(--magenta) 0 25%, var(--yellow) 25% 50%, var(--teal) 50% 75%, var(--azure) 75% 100%); }
.hero-vetrina .hv-cap { position:absolute; left:0; bottom:-30px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:var(--mute); }

/* ── B · INSEGNA — statement centrato + reel di 3 immagini ── */
.hero-insegna { padding:90px 0 0; border-top:0; }
.hero-insegna .hi-top { text-align:center; max-width:1120px; margin:0 auto; }
.hero-insegna .brand-dots { height:13px; width:67px; background-size:13px 13px; background-position:0 50%, 18px 50%, 36px 50%, 54px 50%; margin:0 auto 26px; }
.hero-insegna .hi-kicker { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:24px; }
.hero-insegna h1 { font-family:var(--display); font-size:clamp(46px,6.6vw,100px); font-weight:var(--fw-display); line-height:.97; letter-spacing:-0.028em; text-wrap:balance; }
.hero-insegna h1 .it { font-style:italic; font-weight:400; }
.hero-insegna .hi-lead { font-size:var(--fs-lead); color:var(--mute); max-width:600px; margin:30px auto 0; line-height:1.6; }
.hero-insegna .hi-ctas { margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.hero-insegna .hi-reel { margin-top:76px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hero-insegna .hi-reel .cell { position:relative; aspect-ratio:1/1; background:var(--soft); }
.hero-insegna .hi-reel image-slot { width:100%; height:100%; display:block; }
.hero-insegna .hi-reel .cell[data-tag]::after { content:attr(data-tag); position:absolute; left:16px; bottom:14px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); background:var(--paper); padding:4px 8px; }
.hero-insegna .hi-reel .wp-block-image { width:100%; height:100%; margin:0; }
.hero-insegna .hi-reel .wp-block-image img { width:100%; height:100%; object-fit:cover; }

/* ── C · BANDA — banda scura, momento bold ── */
.hero-banda { background:var(--ink); border-top:0; padding:118px 0 110px; position:relative; overflow:hidden; }
.hero-banda .hb-eyebrow { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); margin-bottom:28px; display:flex; align-items:center; gap:12px; }
/* 2026-09-05: .hb-title = titolo (h2) quando la Banda è usata come sezione in pagina e non come hero (un solo h1 per pagina) */
.hero-banda h1, .hero-banda .hb-title { font-family:var(--display); font-size:clamp(42px,5.6vw,84px); font-weight:var(--fw-display); line-height:.98; letter-spacing:-0.028em; color:var(--paper); max-width:1120px; text-wrap:balance; }
.hero-banda h1 .it, .hero-banda .hb-title .it { font-style:italic; font-weight:400; }
.hero-banda h1 .hl, .hero-banda .hb-title .hl { color:var(--magenta); }
/* emphasis payoff hero banda / hp-tw: sottolineatura magenta evidente sotto la parola-chiave (2026-07-18) */
.hero-banda h1 .hl, h1.hp-tw .hl, .hero-banda .hb-title .hl,
.hero-banda h1 .hl .tw-w, h1.hp-tw .hl .tw-w, .hero-banda .hb-title .hl .tw-w { text-decoration-line:underline; text-decoration-color:var(--magenta); text-decoration-thickness:max(4px,.06em); text-underline-offset:.18em; }
.hero-banda .hb-lead { font-size:var(--fs-lead); color:#c8c6c2; max-width:600px; margin:30px 0 0; line-height:1.55; }
/* hero corto: controcanto + chips-prova (2026-07-22) */
.hero-banda .hb-kicker{ font-size:var(--fs-lead); font-weight:var(--fw-sottile); color:#cfcdd8; margin:20px 0 26px; }
.hero-banda .hb-kicker b{ font-weight:var(--fw-display); color:#fff; }
.hero-banda .hb-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 32px; }
.hero-banda .hb-chip{ font-size:var(--fs-link); font-weight:var(--fw-etichetta); letter-spacing:.03em; color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:9px 16px; margin:0; display:inline-flex; align-items:center; gap:9px; }
.hero-banda .hb-chip::before{ content:""; width:7px; height:7px; border-radius:99px; background:var(--c,#E5147B); flex:none; }
.hb-chips .hb-chip:nth-child(1)::before{ background:#E5147B; }
.hb-chips .hb-chip:nth-child(2)::before{ background:#F5B820; }
.hb-chips .hb-chip:nth-child(3)::before{ background:#45B5E5; }
.hero-banda .hb-ctas { margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-banda .hb-meta { margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); display:flex; gap:48px; flex-wrap:wrap; }
.hero-banda .hb-stat .n { font-family:var(--display); font-size:var(--fs-titolo-l); font-weight:var(--fw-display); letter-spacing:-0.02em; color:var(--paper); line-height:1; }
.hero-banda .hb-stat .l { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:#9a9893; margin-top:8px; }
/* 2026-09-14: il filotto di statistiche usciva sfalsato di 24px. .hb-meta è flex, ma WordPress le lascia
   addosso .is-layout-flow e la sua regola `> * + *` regalava un margin-block-start di block-gap ai blocchi
   2 e 3. Azzerato qui: vale per ogni pagina che usa la banda (home IT/EN, libreria, bozze). */
.hero-banda .hb-meta{ align-items:flex-start; }
.hero-banda .hb-meta > *{ margin-block-start:0; }
.hero-banda .hb-orbits { position:absolute; top:0; right:0; bottom:0; width:42%; pointer-events:none; opacity:.9;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle, var(--magenta) 49%, transparent 51%),
    radial-gradient(circle, var(--yellow) 49%, transparent 51%),
    radial-gradient(circle, var(--teal) 49%, transparent 51%),
    radial-gradient(circle, var(--azure) 49%, transparent 51%);
  background-size:18px 18px, 12px 12px, 14px 14px, 10px 10px;
  background-position:78% 18%, 88% 40%, 70% 64%, 84% 78%; }
.btn-yellow { background:var(--yellow); color:var(--ink); }
.btn-yellow:hover { background:#ffc738; }
.btn-ghost { background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.link-u-light { text-decoration:none; border-bottom:1px solid var(--paper); padding-bottom:4px; font-weight:500; color:var(--paper); }
.link-u-light:hover { color:#c8c6c2; border-color:#c8c6c2; }

@media (max-width:980px){
  .hero-vetrina .hv-grid { grid-template-columns:1fr; gap:48px; }
  .hero-vetrina .hv-media { aspect-ratio:16/11; }
  .hero-vetrina .hv-cap { position:static; margin-top:14px; }
  .hero-insegna .hi-reel { grid-template-columns:1fr; }
  .hero-banda { padding:84px 0 80px; }
  .hero-banda .hb-orbits { display:none; }
  .hero-banda .hb-meta { gap:32px; }
}

/* ============================================================
   HERO su FOTO — sfondo immagine + scrim per leggibilità
   Testo bianco su scrim scuro: leggibile su qualsiasi foto.
   ============================================================ */
.hero-foto { position:relative; border-top:0; min-height:660px; display:flex; align-items:center; overflow:hidden; background:#0c0c0d; }
.hero-foto .hf-bg { position:absolute; inset:0; z-index:0; }
.hero-foto .hf-bg .wp-block-image { width:100%; height:100%; margin:0; }
.hero-foto .hf-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-foto .hf-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,8,10,.93) 0%, rgba(8,8,10,.74) 46%, rgba(8,8,10,.30) 100%), linear-gradient(180deg, rgba(8,8,10,.28) 0%, rgba(8,8,10,0) 32%, rgba(8,8,10,.42) 100%); }
.hero-foto .wrap { position:relative; z-index:2; padding-top:96px; padding-bottom:96px; }
.hero-foto .hero-eyebrow { color:#e8e6e0; margin-bottom:26px; }
.hero-foto h1 { font-family:var(--display); font-size:clamp(46px,6.2vw,92px); font-weight:var(--fw-display); line-height:.99; letter-spacing:-0.028em; color:#fff; max-width:16ch; text-wrap:balance; }
.hero-foto h1 .it { font-style:italic; font-weight:400; }
.hero-foto h1 .hl { color:var(--yellow); }
.hero-foto .hf-lead { font-size:var(--fs-lead); color:#d7d5cf; max-width:560px; margin:28px 0 0; line-height:1.55; }
.hero-foto .hf-ctas { margin-top:38px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-foto .hf-ctas .btn, .hero-foto .hf-ctas .link-u-light, .hero-banda .hb-ctas .btn, .hero-banda .hb-ctas .link-u-light { white-space:nowrap; }
.hero-foto .hf-meta { margin-top:46px; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:#b7b5af; }
.hero-foto .hf-meta b { color:#fff; font-weight:500; }
/* variante centrata */
.hero-foto.center { text-align:center; }
.hero-foto.center .hf-bg::after { background:linear-gradient(180deg, rgba(8,8,10,.80) 0%, rgba(8,8,10,.70) 45%, rgba(8,8,10,.88) 100%), radial-gradient(ellipse 82% 72% at 50% 50%, rgba(8,8,10,.42) 0%, rgba(8,8,10,.66) 100%); }
.hero-foto.center .wrap { display:flex; flex-direction:column; align-items:center; }
.hero-foto.center .brand-dots { margin-bottom:24px; }
.hero-foto.center h1 { max-width:18ch; }
.hero-foto.center .hf-lead { margin-left:auto; margin-right:auto; }
.hero-foto.center .hf-ctas { justify-content:center; }

/* ============================================================
   HERO BANDA TECH — variante C su fondo nero KOM, estetica "tech".
   Effetti SOLO in CSS (pseudo-elementi): griglia dati + glow brand
   animati. Nessun HTML/SVG editabile → l'editor non può romperlo.
   ============================================================ */
.hero-banda-tech { isolation:isolate; }
/* griglia di punti — drift lento, sfuma ai bordi */
.hero-banda-tech::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.6px); background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 60% 36%, #000 26%, transparent 80%);
          mask-image:radial-gradient(ellipse 78% 72% at 60% 36%, #000 26%, transparent 80%);
  animation:hbtech-grid 22s linear infinite, hbtech-flicker 4.5s ease-in-out infinite;
}
@keyframes hbtech-grid { from{ background-position:0 0; } to{ background-position:68px 68px; } }
@keyframes hbtech-flicker { 0%,100%{ opacity:.52; } 50%{ opacity:.3; } }
/* glow brand (magenta primario, teal + giallo accenti) — aurora che deriva */
.hero-banda-tech::after {
  content:""; position:absolute; inset:-12% -6%; z-index:0; pointer-events:none;
  background:
    radial-gradient(36vw 36vw at 82% 10%, rgba(229,20,123,.55), transparent 60%),
    radial-gradient(30vw 30vw at 10% 94%, rgba(28,122,153,.45), transparent 62%),
    radial-gradient(22vw 22vw at 72% 98%, rgba(245,184,32,.30), transparent 64%);
  filter:blur(46px); mix-blend-mode:screen; will-change:transform,opacity;
  animation:hbtech-glow 13s ease-in-out infinite;
}
@keyframes hbtech-glow {
  0%   { transform:translate3d(-7%,-5%,0) scale(1);    opacity:.7; }
  25%  { transform:translate3d(6%,2%,0) scale(1.2);    opacity:1; }
  50%  { transform:translate3d(-2%,7%,0) scale(1.08);  opacity:.85; }
  75%  { transform:translate3d(7%,-4%,0) scale(1.16);  opacity:.95; }
  100% { transform:translate3d(-7%,-5%,0) scale(1);    opacity:.7; }
}
.hero-banda-tech .wrap { position:relative; z-index:2; }
/* eventuali residui dell'HTML vecchio (nelle anteprime) non devono renderizzare */
.hero-banda-tech .hb-grid,
.hero-banda-tech .hb-fx,
.hero-banda-tech .hb-curve,
.hero-banda-tech .hb-node { display:none !important; }
@media (prefers-reduced-motion:reduce){
  .hero-banda-tech::before, .hero-banda-tech::after { animation:none; }
}

/* ============================================================
   HERO-FX — banda con effetto firma su canvas (homepage).
   Fondo BLU NOTTE (meno cupo del nero), aurora brand + canvas
   traiettorie/mesh neurale popolato via JS. Decorativo, dietro.
   ============================================================ */
.hero-fx.hero-banda{ background:linear-gradient(158deg,#0e1230 0%,#1a1f46 58%,#141834 100%); }
.hero-fx .hb-orbits{ display:block !important; width:100% !important; left:0; right:0; top:0; bottom:0; opacity:1 !important; }
.hero-fx > .wrap, .hero-fx .wrap{ position:relative; z-index:2; }
.hero-fx .hb-fxcanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0 22%, rgba(0,0,0,.45) 46%, #000 74%);
          mask-image:linear-gradient(90deg, transparent 0 22%, rgba(0,0,0,.45) 46%, #000 74%); }
.hero-fx::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.85;
  background:
    radial-gradient(60% 80% at 86% 18%, color-mix(in srgb, var(--magenta) 26%, transparent), transparent 60%),
    radial-gradient(55% 70% at 70% 92%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 64%);
  animation:heroAurora 22s ease-in-out infinite alternate; }
.hero-fx-neural::before{
  background:
    radial-gradient(58% 78% at 88% 26%, color-mix(in srgb, var(--azure) 26%, transparent), transparent 60%),
    radial-gradient(52% 66% at 66% 88%, color-mix(in srgb, var(--magenta) 18%, transparent), transparent 64%); }
@keyframes heroAurora{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-3%,-2%,0) scale(1.06); } }
@media (max-width:980px){
  .hero-fx .hb-fxcanvas{ -webkit-mask-image:linear-gradient(180deg,#000 0 50%,transparent 92%); mask-image:linear-gradient(180deg,#000 0 50%,transparent 92%); opacity:.55; }
}
@media (prefers-reduced-motion:reduce){ .hero-fx::before{ animation:none; } }

/* ============================================================
   FASI SLIDER — carosello dei link correlati alla fase ADAM.
   Scroll-snap nativo (funziona anche senza JS); frecce via script
   auto-contenuto nel blocco. Accento per fase via --fsx.
   ============================================================ */
.fasi-slider{ --fsx:var(--magenta); padding:clamp(56px,8vh,96px) 0; background:var(--soft); border-top:1px solid var(--rule); }
.fasi-slider .wrap{ position:relative; }
.fasi-slider__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap; }
.fasi-slider__ey{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--fsx); margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.fasi-slider__ey::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--fsx); }
.fasi-slider__t{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(26px,3.4vw,40px); line-height:1.04; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.fasi-slider__t .it{ font-style:italic; color:var(--fsx); }
.fasi-slider__nav{ display:flex; gap:10px; }
.fasi-arr{ width:46px; height:46px; border-radius:50%; border:1px solid var(--rule); background:var(--paper); color:var(--ink); font-size:var(--fs-lead); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.fasi-arr:hover{ border-color:var(--fsx); color:var(--fsx); transform:translateY(-1px); }
.fasi-arr:disabled{ opacity:.32; cursor:default; transform:none; }
.fasi-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fasi-track::-webkit-scrollbar{ display:none; }
.fasi-card{ scroll-snap-align:start; flex:0 0 clamp(220px,24vw,280px); display:flex; flex-direction:column; gap:14px; padding:24px 24px 22px; background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--fsx); border-radius:12px; text-decoration:none; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; min-height:172px; }
.fasi-card:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -28px rgba(17,17,18,.4); }
.fasi-card__k{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; color:var(--mute); }
.fasi-card__t{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo-s); line-height:1.1; letter-spacing:-0.01em; color:var(--ink); margin-top:auto; }
.fasi-card__go{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:var(--fsx); }
@media (max-width:680px){ .fasi-card{ flex-basis:78vw; } .fasi-slider__nav{ display:none; } }

/* AILINK SLIDER — variante del fasi-slider che rimanda alle sezioni
   delle due pagine AI (Intelligenza Artificiale + Manifesto). Card piu'
   ricche: fonte + titolo + descrizione. Fondo scuro, accento azure. */
.fasi-slider.ai-slider{ --fsx:#1C7A99; background:#0a0e16; border-top:0; color:#fff; }
.ai-slider .fasi-slider__t{ color:#fff; }
.ai-slider .fasi-slider__t .it{ color:#7fd0f5; }
.ai-slider .fasi-arr{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:#fff; }
.ai-slider .fasi-arr:hover{ border-color:#7fd0f5; color:#7fd0f5; }
.ai-slider .fasi-arr:disabled{ opacity:.3; }
.ai-slider .fasi-card{ background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.12); border-top:3px solid var(--fsx); min-height:208px; flex-basis:clamp(248px,27vw,308px); justify-content:flex-start; }
.ai-slider .fasi-card:hover{ box-shadow:0 22px 50px -30px rgba(0,0,0,.7); border-color:rgba(127,208,245,.4); }
.fasi-card__src{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--fsx); }
.ai-slider .fasi-card__src{ color:#7fd0f5; }
.ai-slider .fasi-card__t{ color:#fff; margin-top:8px; font-size:var(--fs-lead); }
.fasi-card__d{ font-size:var(--fs-testo-s); line-height:1.52; color:var(--mute); margin:0; }
.ai-slider .fasi-card__d{ color:rgba(255,255,255,.66); }
.ai-slider .fasi-card__go{ color:#7fd0f5; margin-top:auto; }

/* ============================================================
   BRAND IDENTITY — il "punto" finale del titolo sceglie il colore.
   Eco del concetto "il colore è l'ultima cosa che decidiamo":
   cicla gli accenti brand e si posa sul teal. Solo su .bi-hero.
   ============================================================ */
.bi-hero .end-dot{ display:inline-block; animation:biDotPick 5.5s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes biDotPick{
  0%,7%    { color:#E5147B; text-shadow:0 0 18px rgba(229,20,123,.55); }
  22%,30%  { color:#F5B820; text-shadow:0 0 18px rgba(245,184,32,.55); }
  45%,53%  { color:#45B5E5; text-shadow:0 0 18px rgba(69,181,229,.55); }
  68%,100% { color:#1C7A99; text-shadow:0 0 16px rgba(28,122,153,.45); }
}
@media (prefers-reduced-motion:reduce){ .bi-hero .end-dot{ animation:none; } }

/* Glow di sfondo del bi-hero: alone che scorre tra gli accenti brand,
   in coda alla scelta del "punto". Decorativo, dietro al testo. */
.bi-hero{ position:relative; overflow:hidden; }
.bi-hero > .wrap{ position:relative; z-index:1; }
.bi-hero::before, .bi-hero::after{ content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%; }
.bi-hero::before{ top:-42%; right:-8%; width:60%; height:175%; filter:blur(64px); opacity:.6; mix-blend-mode:multiply;
  background:radial-gradient(circle at 50% 50%, var(--bi-glow,#E5147B), transparent 62%);
  animation:biGlowHue 12s ease-in-out infinite, biGlowDrift 16s ease-in-out infinite alternate; }
.bi-hero::after{ bottom:-50%; left:-6%; width:46%; height:150%; filter:blur(70px); opacity:.42; mix-blend-mode:multiply;
  background:radial-gradient(circle at 50% 50%, var(--bi-glow2,#45B5E5), transparent 64%);
  animation:biGlowHue2 12s ease-in-out infinite, biGlowDrift2 19s ease-in-out infinite alternate; }
@keyframes biGlowHue{
  0%,100% { --bi-glow:#E5147B; }
  28%     { --bi-glow:#F5B820; }
  52%     { --bi-glow:#45B5E5; }
  78%     { --bi-glow:#1C7A99; }
}
@keyframes biGlowHue2{
  0%,100% { --bi-glow2:#45B5E5; }
  28%     { --bi-glow2:#1C7A99; }
  52%     { --bi-glow2:#E5147B; }
  78%     { --bi-glow2:#F5B820; }
}
@property --bi-glow{ syntax:'<color>'; inherits:false; initial-value:#E5147B; }
@property --bi-glow2{ syntax:'<color>'; inherits:false; initial-value:#45B5E5; }
@keyframes biGlowDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-7%,5%,0) scale(1.14); } }
@keyframes biGlowDrift2{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(8%,-5%,0) scale(1.16); } }
@media (prefers-reduced-motion:reduce){ .bi-hero::before, .bi-hero::after{ animation:none; opacity:.3; } }

/* ============================================================
   PM-HERO — Piano di Marketing Strategico. Animazione "bussola":
   quadrante discreto + ago che cerca il nord e si assesta (rotta).
   CSS-only, decorativa, dietro al contenuto. Hero scuro.
   ============================================================ */
.pm-hero{ position:relative; overflow:hidden; }
.pm-hero > .wrap{ position:relative; z-index:1; }
.pm-hero::before, .pm-hero::after{ content:""; position:absolute; top:50%; right:-120px; width:460px; height:460px;
  transform:translateY(-50%); border-radius:50%; pointer-events:none; z-index:0; }
/* quadrante: anello + tacche + alone */
.pm-hero::before{
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.16) 0 .6deg, transparent .6deg 30deg),
    radial-gradient(circle, transparent 58%, rgba(245,184,32,.06) 60%, transparent 72%);
  -webkit-mask:radial-gradient(circle, transparent 0 67%, #000 69% 71%, transparent 73%), radial-gradient(circle, #000 0 72%, transparent 73%);
          mask:radial-gradient(circle, transparent 0 67%, #000 69% 71%, transparent 73%);
  border:1px solid rgba(255,255,255,.12); opacity:.5;
  animation:pmDialDrift 26s ease-in-out infinite alternate; }
/* ago: lobo giallo (nord) e azzurro (sud), assottigliato verso il centro */
.pm-hero::after{
  background:
    conic-gradient(from var(--pa,0deg),
      transparent 0 87deg, rgba(245,184,32,.95) 89.4deg 90.6deg, transparent 93deg 267deg,
      rgba(127,208,245,.55) 269.4deg 270.6deg, transparent 273deg);
  -webkit-mask:radial-gradient(circle, transparent 0 7%, #000 12% 50%, transparent 54%);
          mask:radial-gradient(circle, transparent 0 7%, #000 12% 50%, transparent 54%);
  filter:drop-shadow(0 0 6px rgba(245,184,32,.35));
  animation:pmNeedle 9s cubic-bezier(.5,0,.2,1) infinite; }
@property --pa{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes pmNeedle{
  0%   { --pa:-128deg; }
  26%  { --pa:46deg; }
  48%  { --pa:-30deg; }
  66%  { --pa:14deg; }
  80%  { --pa:-6deg; }
  90%,100% { --pa:0deg; }
}
@keyframes pmDialDrift{ from{ transform:translateY(-50%) rotate(-4deg); } to{ transform:translateY(-50%) rotate(4deg); } }
.pm-hero .crumb, .pm-hero h1, .pm-hero .lead, .pm-hero .ctas{ position:relative; z-index:1; }
@media (max-width:760px){ .pm-hero::before, .pm-hero::after{ right:-200px; width:360px; height:360px; opacity:.35; } }
@media (prefers-reduced-motion:reduce){ .pm-hero::after{ animation:none; --pa:0deg; } .pm-hero::before{ animation:none; } }

/* ============================================================
   MINI HERO — aperture compatte per pagine interne / intro sezione.
   Base editoriale + varianti: split (titolo+lead), center (su soft), dark.
   ============================================================ */
.mini-hero { border-top:0; padding:54px 0 46px; }
.mini-hero .mh-crumb { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:16px; display:flex; gap:8px; flex-wrap:wrap; }
.mini-hero .mh-crumb a { text-decoration:none; color:var(--mute); }
.mini-hero .mh-crumb a:hover { color:var(--ink); }
.mini-hero .mh-eyebrow { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.mini-hero h1 { font-family:var(--display); font-size:clamp(32px,4vw,56px); font-weight:var(--fw-display); line-height:1; letter-spacing:-0.02em; max-width:20ch; text-wrap:balance; }
.mini-hero h1 .it { font-style:italic; font-weight:400; }
.mini-hero .mh-lead { font-size:var(--fs-lead); color:var(--mute); max-width:560px; margin:16px 0 0; line-height:1.55; }
/* split: titolo a sx, descrizione a dx, allineati in basso */
.mini-hero.split-row .mh-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end; }
.mini-hero.split-row .mh-lead { margin-top:0; }
/* centrata */
.mini-hero.center { text-align:center; }
.mini-hero.center .mh-eyebrow, .mini-hero.center .brand-dots { justify-content:center; }
.mini-hero.center h1 { margin-left:auto; margin-right:auto; }
.mini-hero.center .mh-lead { margin-left:auto; margin-right:auto; }
.mini-hero.has-soft { background:var(--soft); }
/* dark compatto */
.mini-hero.dark { background:var(--ink); }
.mini-hero.dark .mh-crumb, .mini-hero.dark .mh-crumb a { color:#9a9893; }
.mini-hero.dark .mh-eyebrow { color:var(--yellow); }
.mini-hero.dark h1 { color:var(--paper); }
.mini-hero.dark h1 .hl { color:var(--magenta); }
.mini-hero.dark .mh-lead { color:#c8c6c2; }
@media (max-width:980px){
  .mini-hero.split-row .mh-grid { grid-template-columns:1fr; gap:18px; align-items:start; }
}

/* ============================================================
   MOBILE — override FINALI (in fondo al file: vincono per ordine
   sorgente sulle regole base dichiarate più sopra). Correggono le
   griglie che su telefono non si impilavano + CTA/effigie strette.
   ============================================================ */
@media (max-width:980px){
  .leadcols .cols { grid-template-columns:1fr; gap:28px; }
  .biglist .row { grid-template-columns:56px 1fr; gap:20px; }
  .compare .crow { grid-template-columns:1fr; }
  .compare .cc, .compare .cc.us { border-left:0; border-right:0; }
  .effigie { display:flex; flex-direction:column; min-height:0; }
  .effigie .eq { width:100%; max-width:none; padding:56px 28px; }
  .effigie .portrait { width:100%; height:300px; align-self:auto; }
}
@media (max-width:760px){
  .cta-yellow { grid-template-columns:1fr; padding:48px 28px; gap:26px; }
  .cta-yellow h2 { font-size:clamp(36px,8.5vw,52px); line-height:1; }
  .benefits, .feat-grid, .cats, .cases, .hi-reel,
  .adam-grid, .units, .moments { grid-template-columns:1fr; }
}

/* ============================================================
   HOMEPAGE v2 — varianti di sezione specifiche
   (strip prova hero · le 4 porte per bisogno · case study a 4 con
   doppia metrica). Tutte sul sistema: stesso 1px rule, mono, Libre Franklin.
   ============================================================ */

/* ① hero — strip di prova sotto i CTA (una sola riga mono, robusta) */
.hero-proof { margin-top:52px; padding-top:24px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); line-height:2; }
.hero-proof b { color:var(--ink); font-weight:500; }
.hero-proof .sep { color:var(--rule); margin:0 10px; }

/* ③ le 4 porte "per bisogno" — 2×2 + cella scura a tutta larghezza */
.porte { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); }
.porta { position:relative; background:var(--paper); padding:38px 36px;
  --pc:var(--magenta); --pc-ink:var(--pc);
  display:flex; flex-direction:column; gap:12px;
  transition:background .25s ease, transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease; }
.porte > .porta:nth-child(2){ --pc:var(--yellow); --pc-ink:#8a6100; }
.porte > .porta:nth-child(3){ --pc:var(--teal); --pc-ink:#14606f; }
.porte > .porta:nth-child(4){ --pc:var(--azure); --pc-ink:#1d7aa8; }
.porta::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; transform:scaleX(0);
  transform-origin:left; transition:transform .3s ease; background:var(--pc); }
/* numero = pastiglia colorata, segnala il gruppo di servizi */
.porta .pn { align-self:flex-start; display:inline-flex; align-items:center; margin:0;
  font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.12em;
  color:var(--pc-ink); background:color-mix(in srgb, var(--pc) 14%, #fff);
  padding:6px 12px; border-radius:999px; line-height:1; }
.porta h3 { font-family:var(--display); font-size:clamp(24px,2.2vw,30px); font-weight:var(--fw-display); letter-spacing:-0.01em; line-height:1.06; transition:color .2s ease; }
.porta > p { font-size:var(--fs-testo); color:var(--mute); line-height:1.55; margin:0; max-width:46ch; }
/* liste servizi = righe tappabili (44px), freccia in evidenza all'hover */
.porta .svc { margin-top:18px; display:flex; flex-direction:column; }
.porta .svc a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px;
  font-size:var(--fs-link); font-weight:var(--fw-etichetta); letter-spacing:.01em; color:var(--ink);
  text-decoration:none; padding:10px 12px 10px 0; border-top:1px solid var(--rule); border-radius:6px; line-height:1.3;
  transition:color .18s ease, background .18s ease, padding .18s ease; }
.porta .svc a::after { content:"→"; color:var(--pc-ink); opacity:0; transform:translateX(-6px); transition:opacity .18s ease, transform .18s ease; }
.porta .svc a:hover { color:var(--pc-ink); background:color-mix(in srgb, var(--pc) 8%, #fff); padding-left:12px; }
.porta .svc a:hover::after { opacity:1; transform:none; }
.porta .svc a:focus-visible { outline:2px solid var(--pc-ink); outline-offset:2px; }
@media (hover:hover){
  .porta:hover::before { transform:scaleX(1); }
  .porta:not(.is-dark):hover { background:color-mix(in srgb, var(--pc) 4%, #fff);
    transform:translateY(-6px); box-shadow:0 26px 48px -26px color-mix(in srgb, var(--pc) 34%, rgba(17,17,18,.3)); z-index:2; }
  .porta:not(.is-dark):hover h3 { color:var(--pc-ink); }
  .porta.is-dark:hover { background:var(--ink); }
}
@media (prefers-reduced-motion:reduce){ .porta:not(.is-dark):hover { transform:none; } }
.porta.is-dark { grid-column:1 / -1; background:var(--ink);
  flex-direction:row; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.porta.is-dark::before { display:none; }
.porta.is-dark .pn { color:var(--yellow); }
.porta.is-dark h3 { color:var(--paper); }
.porta.is-dark > div { max-width:640px; }
.porta.is-dark p { color:#c8c6c2; font-size:var(--fs-testo); margin:8px 0 0; }
.porta.is-dark:hover { background:#000; }
@media (max-width:860px){ .porte { grid-template-columns:1fr; } .porta.is-dark { flex-direction:column; align-items:flex-start; } }

/* ⑦ case study — 4 schede 2×2 con doppia metrica */
.cases.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.case .stats { display:flex; gap:14px; flex-wrap:wrap; border-top:1px solid var(--rule); padding-top:16px; margin-top:2px; }
.case .stats .stat { border-top:0; padding-top:0; flex-direction:column; align-items:flex-start; gap:2px; flex:1; min-width:120px; }
.case .stats .stat .big { font-size:var(--fs-titolo); }
.case .stats .stat .lbl { font-size:var(--fs-meta); }
@media (max-width:760px){ .cases.cols-2 { grid-template-columns:1fr; } }

/* ============================================================
   GALLERIA VIDEO — griglia di video YouTube "boxati"
   Stesse regole del kit: 1px rule, barra accento in testa, mono.
   Usa il blocco core wp:embed (YouTube, responsive 16:9).
   ============================================================ */
.video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:48px; }
.video-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vbox { position:relative; background:var(--paper); border:1px solid var(--rule);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease; }
.vbox::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
  background:linear-gradient(90deg, var(--magenta) 0 25%, var(--yellow) 25% 50%, var(--teal) 50% 75%, var(--azure) 75% 100%); }
/* media 16:9 — vale per iframe diretti e per il wrapper di wp:embed */
.vbox .vmedia { position:relative; aspect-ratio:16/9; background:#0c0c0d; }
.vbox .vmedia iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.vbox .wp-block-embed { margin:0; }
.vbox .wp-block-embed__wrapper { position:relative; aspect-ratio:16/9; background:#0c0c0d; }
.vbox .wp-block-embed__wrapper iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vbox .vcap { padding:20px 22px 24px; display:flex; flex-direction:column; gap:7px; }
.vbox .vcap .vm { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--magenta); margin:0; }
.vbox .vcap .vt { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); line-height:1.12; letter-spacing:-0.01em; margin:0; }
.vbox .vcap .vd { font-size:var(--fs-testo-s); color:var(--mute); line-height:1.5; margin:0; }
@media (hover:hover){
  .vbox:hover { transform:translateY(-5px); box-shadow:0 26px 48px -28px rgba(17,17,18,.26); z-index:2; }
  .vbox:hover::before { transform:scaleX(1); }
}
@media (prefers-reduced-motion:reduce){ .vbox:hover { transform:none; } }
@media (max-width:860px){ .video-grid, .video-grid.cols-3 { grid-template-columns:1fr; } }

/* ============================================================
   CHI SIAMO — fondatori (in split-body) + cella mission a tutta larghezza
   ============================================================ */
.founders { display:flex; flex-direction:column; }
.founders .fo { padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--rule); }
.founders .fo:last-of-type { border-bottom:0; padding-bottom:0; margin-bottom:0; }
.founders .fo .ro { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--magenta); margin:0; }
.founders .fo h3 { font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-0.01em; line-height:1.05; margin:6px 0 10px; }
.founders .fo .bio { font-size:var(--fs-testo); color:var(--mute); line-height:1.6; margin:0; }
.founders .clo { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.02em; color:var(--mute); line-height:1.7; margin-top:28px; padding-top:20px; border-top:1px solid var(--rule); }
.feat-grid .feat.wide { grid-column:1 / -1; }


/* ===== Slider · dissolvenza incrociata (pattern komlab/sec-slider) ===== */
.ag-slider{ position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; border:1px solid var(--rule); background:#EAE7E0; }
.ag-slider .ag-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.1s ease; will-change:opacity; }
.ag-slider .ag-slide.is-active{ opacity:1; }
.ag-slider .ag-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.ag-slider .ag-slide figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:18px 20px; max-width:none; text-align:left;
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background:linear-gradient(0deg, rgba(11,12,15,.74), rgba(11,12,15,0)); }
.ag-slider__dots{ position:absolute; right:14px; top:14px; z-index:3; display:flex; gap:7px; }
.ag-slider__dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer;
  border:1px solid rgba(0,0,0,.08); transition:background .2s ease, transform .2s ease; }
.ag-slider__dots span.on{ background:#fff; transform:scale(1.3); }
/* nell'editor: mostra le slide impilate e modificabili, niente pallini */
.editor-styles-wrapper .ag-slider{ aspect-ratio:auto; }
.editor-styles-wrapper .ag-slider .ag-slide{ position:relative; opacity:1; transition:none; }
.editor-styles-wrapper .ag-slider .ag-slide + .ag-slide{ margin-top:6px; }
.editor-styles-wrapper .ag-slider__dots{ display:none; }


/* ===== Storia a tappe · timeline UFO (pattern komlab/sec-storia-ufo) ===== */
.tl-section{ overflow:hidden; }
.tl-open{ display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:center; margin-top:4px; }
.tl-open .wp-block-image{ margin:0; }
.tl-open__media img, .tl-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; border:1px solid var(--rule); display:block; }
.ufo-kicker{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.ufo-kicker::before{ content:""; width:30px; height:1px; background:var(--magenta); display:inline-block; }
.tl-lede{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(22px,2.2vw,30px); line-height:1.34; letter-spacing:-0.01em; color:var(--ink); margin:0; }
.tl-lede .hl{ background:linear-gradient(180deg, transparent 58%, rgba(245,184,32,.45) 58%); padding:0 2px; }
.tl-lede em{ font-style:italic; }

.tl-line{ position:relative; margin-top:88px; }
.tl-line::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent 0, var(--rule) 40px, var(--rule) calc(100% - 40px), transparent 100%); }
.tl-item{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:90px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-media .wp-block-image{ margin:0; }
.tl-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; border:1px solid var(--rule); display:block; }
.tl-item:nth-child(even) .tl-media{ order:2; }
.tl-item:nth-child(even) .tl-body{ order:1; text-align:right; }
.tl-item:nth-child(even) .tl-body .tl-year{ justify-content:flex-end; }
.tl-item:nth-child(even) .tl-body p:not(.tl-year){ margin-left:auto; }
.tl-year{ display:flex; align-items:center; gap:14px; margin:0 0 14px; flex-wrap:wrap; }
.tl-yr{ font-family:var(--display); font-size:clamp(30px,3vw,42px); font-weight:var(--fw-display); letter-spacing:-0.01em; color:var(--ink); line-height:1; }
.tl-ufo{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--magenta); padding:5px 11px; border-radius:999px; white-space:nowrap; }
.tl-body h3{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(24px,2.3vw,31px); line-height:1.06; letter-spacing:-0.015em; margin:0 0 16px; }
.tl-body h3 .it{ font-style:italic; color:var(--mute); }
.tl-body p{ font-size:var(--fs-testo); line-height:1.66; color:#3a3a38; margin:0; max-width:48ch; }
.tl-item::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%;
  background:#cdcbc4; border:3px solid var(--paper); box-shadow:0 0 0 1px var(--rule); z-index:2; }
.tl-item.is-ufo::before{ width:20px; height:20px; background:var(--magenta); box-shadow:0 0 0 1px var(--magenta), 0 0 0 8px rgba(229,20,123,.14); }
@media (prefers-reduced-motion: no-preference){ .tl-item.is-ufo::before{ animation:tl-pulse 2.8s ease-out infinite; } }
@keyframes tl-pulse{ 0%{ box-shadow:0 0 0 1px var(--magenta), 0 0 0 5px rgba(229,20,123,.22); } 70%{ box-shadow:0 0 0 1px var(--magenta), 0 0 0 18px rgba(229,20,123,0); } 100%{ box-shadow:0 0 0 1px var(--magenta), 0 0 0 18px rgba(229,20,123,0); } }

.tl-close{ margin-top:84px; background:var(--ink); color:#fff; border-radius:12px; padding:clamp(36px,4.5vw,64px);
  display:grid; grid-template-columns:1.5fr .7fr; gap:48px; align-items:center; }
.tl-close .ufo-kicker{ color:var(--yellow); }
.tl-close .ufo-kicker::before{ background:var(--yellow); }
.tl-close h3{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(25px,2.8vw,38px); line-height:1.08; letter-spacing:-0.02em; color:#fff; margin:0 0 16px; max-width:20ch; }
.tl-close h3 .em{ font-style:italic; }
.tl-close p{ color:#c8c6c2; font-size:var(--fs-testo); line-height:1.62; margin:0; max-width:62ch; }
.tl-close .wp-block-buttons{ justify-content:flex-end; }
.tl-close .wp-block-button__link{ background:#fff; color:var(--ink); font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; font-weight:var(--fw-etichetta); padding:15px 26px; border-radius:3px; transition:background .18s ease, color .18s ease; }
.tl-close .wp-block-button__link:hover{ background:var(--magenta); color:#fff; }

@media (max-width:860px){
  .tl-open{ grid-template-columns:1fr; gap:30px; }
  .tl-open__media img, .tl-portrait img{ max-width:360px; }
  .tl-line{ margin-top:60px; }
  .tl-line::before{ left:19px; }
  .tl-item{ grid-template-columns:1fr; gap:18px; padding-left:54px; margin-bottom:54px; }
  .tl-item .tl-media{ order:1 !important; }
  .tl-item .tl-body{ order:2 !important; text-align:left !important; }
  .tl-item:nth-child(even) .tl-body .tl-year{ justify-content:flex-start; }
  .tl-item:nth-child(even) .tl-body p:not(.tl-year){ margin-left:0; }
  .tl-item::before{ left:19px; top:18px; transform:translate(-50%,0); }
  .tl-close{ grid-template-columns:1fr; gap:26px; }
  .tl-close .wp-block-buttons{ justify-content:flex-start; }
}


/* ===== Pagina Contatti (pattern komlab/page-contatti) ===== */
/* CTA nel mini-hero centrato */
.mini-hero .mh-ctas{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.mini-hero.center .mh-ctas{ justify-content:center; }
/* mini-form richiesta analisi */
.req-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.req-form input{ flex:1; min-width:220px; background:var(--paper); border:1px solid var(--rule); border-radius:3px; font-family:var(--mono); font-size:var(--fs-meta); padding:14px; color:var(--ink); }
.req-form input:focus{ outline:none; border-color:var(--ink); }
/* blocco recapiti */
.contact-list{ list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--rule); }
.contact-list li{ display:flex; flex-direction:column; gap:4px; padding:16px 0; border-bottom:1px solid var(--rule); }
.contact-list .cl-k{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:8px; }
.contact-list .cl-k::before{ content:"\2192"; color:var(--magenta); }
.contact-list .cl-v{ font-size:var(--fs-testo); line-height:1.5; }
.contact-list .cl-v a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px; transition:border-color .15s ease; }
.contact-list .cl-v a:hover{ border-color:var(--ink); }
.contact-list .cl-note{ color:var(--mute); font-size:var(--fs-testo-s); }
/* immagine sede a tutta larghezza */
.fullbleed img{ width:100%; height:clamp(320px,52vh,520px); object-fit:cover; border-radius:6px; display:block; }
/* Mr Wolf · widget chat (al posto dell'immagine nell'affiancata) */
.mw{ background:#141416; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 60px -28px rgba(0,0,0,.55); }
.mw-head{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.mw-ava{ width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #45B5E5, #E5147B 70%); flex:none; position:relative; }
.mw-ava::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#1F8A5B; border:2px solid #141416; }
.mw-name{ color:#fff; font-weight:var(--fw-forte); font-size:var(--fs-testo-s); margin:0; }
.mw-status{ color:#8f8d88; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; margin:2px 0 0; }
.mw-live{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:#7fd1a6; display:flex; align-items:center; gap:7px; }
.mw-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#1F8A5B; }
.mw-body{ padding:20px 18px; display:flex; flex-direction:column; gap:16px; min-height:248px; }
.mw-msg{ font-size:var(--fs-testo-s); line-height:1.55; max-width:92%; padding:13px 16px; border-radius:4px 14px 14px 14px; background:rgba(255,255,255,.06); color:#e7e5e0; }
.mw-chips{ display:flex; flex-direction:column; gap:9px; margin-top:auto; }
.mw-chip{ text-align:left; font-family:var(--sans); font-size:var(--fs-testo-s); color:#cfcdc8; background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:11px 15px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.mw-chip:hover{ border-color:var(--magenta); color:#fff; background:rgba(229,20,123,.12); }
.mw-input{ display:flex; gap:8px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.1); }
.mw-input input{ flex:1; min-width:0; background:#000; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#fff; font-family:var(--sans); font-size:var(--fs-testo-s); padding:12px 16px; }
.mw-input input::placeholder{ color:#6f6d68; }
.mw-input input:focus{ outline:none; border-color:var(--magenta); }
.mw-input button{ width:44px; height:44px; flex:none; border:0; border-radius:50%; background:var(--magenta); color:#fff; font-size:var(--fs-lead); cursor:pointer; transition:filter .15s ease; }
.mw-input button:hover{ filter:brightness(1.1); }
.mw-disc{ font-family:var(--mono); font-size:var(--fs-meta); line-height:1.6; color:var(--mute); margin:14px 2px 0; }

/* ===== Sfogliabile PDF (pattern komlab/sec-sfogliabile) ===== */
.pdfbook{ max-width:1120px; margin:0 auto; }
.pdfbook__stage{ position:relative; background:var(--ink); border-radius:10px; padding:clamp(18px,3vw,40px); }
.pdfbook__viewport{ position:relative; width:100%; aspect-ratio:842/596; perspective:2200px; }
.pdfbook__page,.pdfbook__flip{ position:absolute; inset:0; border-radius:2px; overflow:hidden; }
.pdfbook__page{ background:#fff; box-shadow:0 24px 70px -24px rgba(0,0,0,.7); }
.pdfbook__page img,.pdfbook__flip img{ width:100%; height:100%; display:block; object-fit:contain; background:#fff; }
.pdfbook__flip{ transform-origin:left center; backface-visibility:hidden; -webkit-backface-visibility:hidden; z-index:4; box-shadow:0 0 50px rgba(0,0,0,.3); transition:transform .55s cubic-bezier(.45,.05,.25,1); }
.pdfbook__flip.turn-next{ transform:rotateY(0deg); } .pdfbook__flip.turn-next.go{ transform:rotateY(-170deg); }
.pdfbook__flip.turn-prev{ transform:rotateY(-170deg); } .pdfbook__flip.turn-prev.go{ transform:rotateY(0deg); }
.pdfbook__spinner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 24px; color:#fff; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; z-index:7; }
.pdfbook__spinner.hidden{ display:none; }
.pdfbook__nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; font-size:var(--fs-titolo-s); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:6; transition:background .18s ease, opacity .18s ease; }
.pdfbook__nav:hover{ background:rgba(255,255,255,.18); }
.pdfbook__nav:disabled{ opacity:.22; cursor:default; }
.pdfbook__nav.prev{ left:clamp(6px,1.4vw,18px); } .pdfbook__nav.next{ right:clamp(6px,1.4vw,18px); }
.pdfbook__bar{ display:flex; align-items:center; gap:18px; margin-top:18px; flex-wrap:wrap; }
.pdfbook__count{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; color:var(--mute); white-space:nowrap; }
.pdfbook__count b{ color:var(--ink); font-weight:var(--fw-forte); }
.pdfbook__range{ flex:1; min-width:160px; accent-color:var(--magenta); cursor:pointer; }
.pdfbook__btn{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:3px; padding:9px 14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.pdfbook__btn:hover{ border-color:var(--ink); }
.pdfbook__stage:fullscreen{ display:flex; align-items:center; justify-content:center; background:var(--ink); }
.pdfbook__stage:fullscreen .pdfbook__viewport{ width:auto; height:88vh; aspect-ratio:842/596; }
@media (max-width:640px){ .pdfbook__nav{ width:38px; height:38px; font-size:var(--fs-lead); } }

/* ===== Hero case study · split editoriale (foto full-bleed + pannello scuro) ===== */
.cs-hero{ position:relative; display:flex; align-items:stretch; min-height:62vh; background:var(--ink); }
.cs-hero .cs-panel{ width:50%; align-self:stretch; }
.cs-hero .cs-panel{ background:var(--ink); color:#fff; display:flex; align-items:center; }
.cs-hero .cs-panel .inner{ padding:clamp(40px,5vw,84px) clamp(28px,4vw,64px); max-width:680px; margin-left:auto; }
.cs-hero .crumb{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; color:rgba(255,255,255,.7); }
.cs-hero .crumb a{ color:rgba(255,255,255,.7); text-decoration:none; }
.cs-hero .crumb a:hover{ color:#fff; }
.cs-hero .crumb .sep{ color:rgba(255,255,255,.35); }
.cs-hero .tag{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:var(--magenta); margin:18px 0 0; }
.cs-hero h1{ font-family:var(--display); font-weight:var(--fw-display); line-height:1.03; letter-spacing:-0.02em; font-size:clamp(32px,3.6vw,52px); color:#fff; margin:16px 0 0; }
.cs-hero h1 .it{ font-style:italic; }
.cs-hero .lead{ font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:rgba(255,255,255,.82); margin:22px 0 0; max-width:56ch; }
.cs-hero .ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.cs-hero .btn-outline{ border-color:rgba(255,255,255,.5); color:#fff; }
.cs-hero .btn-outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.cs-hero .cs-shot{ position:absolute; top:0; right:0; bottom:0; width:50%; background:#1a1a1c center/cover no-repeat; }
.cs-hero .cs-shot__note{ position:absolute; left:0; right:0; bottom:18px; text-align:center; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); padding:0 16px; }
@media (max-width:860px){
  .cs-hero{ flex-direction:column; }
  .cs-hero .cs-panel{ width:100%; order:2; }
  .cs-hero .cs-shot{ position:relative; width:100%; height:42vw; min-height:240px; order:1; }
  .cs-hero .cs-panel .inner{ margin:0; max-width:none; }
}


/* ===== Navigazione sottopagine di fase (ADAM) ===== */
.phase-sub{ --band:#E5147B; --acc:#E5147B; --acc2:#ff63ab; --card:#330a1d; --txt:#fff; padding:62px 0; background:var(--band); color:var(--txt); position:relative; overflow:hidden; }
.phase-sub > .wrap{ position:relative; z-index:1; }
.phase-sub::before{ content:""; position:absolute; z-index:0; top:-40%; right:-8%; width:54%; aspect-ratio:1; border-radius:50%; pointer-events:none; opacity:.30; background:radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 64%); }
.phase-sub .ps-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.phase-sub .ps-ey{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--txt); opacity:.78; margin:0; }
.phase-sub .ps-t{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(30px,4vw,46px); line-height:1.03; letter-spacing:-0.02em; color:var(--txt); margin:6px 0 0; }
.phase-sub .ps-note{ font-size:var(--fs-testo); line-height:1.5; color:var(--txt); opacity:.86; max-width:42ch; margin:0; }
.phase-sub .ps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.phase-sub .ps-card{ position:relative; display:flex; flex-direction:column; min-height:188px; padding:22px; background:var(--card,#111112); color:#fff; border-radius:13px; text-decoration:none; box-shadow:0 18px 40px -24px rgba(0,0,0,.55); transition:transform .2s ease, box-shadow .2s ease; }
.phase-sub .ps-card:hover{ transform:translateY(-5px); box-shadow:0 28px 56px -26px rgba(0,0,0,.65); }
.phase-sub .ps-ic{ width:30px; height:30px; color:var(--acc2); }
.phase-sub .ps-ic svg{ width:100%; height:100%; display:block; }
.phase-sub .ps-name{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:var(--fs-titolo-s); line-height:1.08; letter-spacing:-0.01em; color:#fff; margin-top:auto; padding-top:20px; }
.phase-sub .ps-sub{ font-family:var(--sans); font-size:var(--fs-testo-s); line-height:1.45; color:rgba(255,255,255,.62); margin-top:8px; }
.phase-sub .ps-ar{ position:absolute; right:17px; top:20px; font-size:var(--fs-testo); color:rgba(255,255,255,.42); transition:transform .2s ease, color .2s ease; }
.phase-sub .ps-card:hover .ps-ar{ transform:translate(3px,-3px); color:var(--acc2); }
@media (max-width:560px){ .phase-sub .ps-grid{ grid-template-columns:1fr; } }
/* ps-card in blocchi nativi: icona via mask (--psic), freccia e overlay-link via pseudo-elementi */
.phase-sub .ps-card[class*="ic-"]::before{ content:""; width:30px; height:30px; flex:none; align-self:flex-start; background:var(--acc2); -webkit-mask:var(--psic) center/contain no-repeat; mask:var(--psic) center/contain no-repeat; }
.phase-sub .ps-card[class*="ic-"]::after{ content:"↗"; position:absolute; right:17px; top:20px; font-size:var(--fs-testo); color:rgba(255,255,255,.42); transition:transform .2s ease, color .2s ease; }
.phase-sub .ps-card:hover::after{ transform:translate(3px,-3px); color:var(--acc2); }
.phase-sub .ps-name{ margin-bottom:0; }
.phase-sub .ps-sub{ margin-bottom:0; }
.phase-sub .ps-name a{ color:#fff; text-decoration:none; }
.phase-sub .ps-name a::after{ content:""; position:absolute; inset:0; }
.v32-stats .s p{ margin:0; }
.phase-sub .ps-card.ic-web-design{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M7 6.5h.01M10 6.5h.01'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-shopify-e-commerce{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.2'/%3E%3Ccircle cx='18' cy='20' r='1.2'/%3E%3Cpath d='M2 3h3l2.3 12.4a1 1 0 0 0 1 .8h8.5a1 1 0 0 0 1-.8L21 7H6'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-piano-di-comunicazione{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15 8a4 4 0 0 1 0 8M18 5a8 8 0 0 1 0 14'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-storytelling{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-roi-e-commerce{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M15 9.5a3 3 0 0 0-3-1.5c-1.7 0-2.5 1-2.5 2s1 1.6 2.5 2 2.5 1 2.5 2-0.8 2-2.5 2a3 3 0 0 1-3-1.5'/%3E%3Cpath d='M12 6v1.5M12 16.5V18'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-a-b-testing{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18l3-12 3 12M5.8 14h4.4'/%3E%3Cpath d='M15 6h2.5a2.2 2.2 0 0 1 0 4.4H15zM15 10.4h3a2.2 2.2 0 0 1 0 4.4h-3z'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-roas-e-profitto{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M21 7v5h-5'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-google-ads{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-meta-ads{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-linkedin-ads{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 6a3 3 0 0 1 0 6M18 20a6 6 0 0 0-3-5.2'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-seo{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-farsi-trovare-dalle-ai{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-analisi-di-mercato{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16v-4M12 16V8M17 16v-7'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-brand-identity{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.3 4.7 5.2.8-3.8 3.6.9 5.1L12 14.8 7.4 17.2l.9-5.1L4.5 8.5l5.2-.8z'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-prisma-di-kapferer{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L3 19h18z'/%3E%3Cpath d='M12 3v16'/%3E%3C/svg%3E"); }
.phase-sub .ps-card[class*="ic-"]{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l3.5 5.5L21 12l-5.5 3.5L12 21l-3.5-5.5L3 12l5.5-3.5z'/%3E%3C/svg%3E"); }
.phase-sub .ps-card.ic-intelligenza-artificiale{ --psic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); }


/* ===== Pagine-guida (catalogo pattern per tipologia, bozza interna) ===== */
/* Copertina della pagina-guida: banda scura con titolo tipologia + conteggio. */
.kom-guide-cover{ background:#111112; color:#fff; padding:72px 0 60px; }
.kom-guide-cover .wrap{ max-width:1400px; margin:0 auto; padding:0 var(--pad); }
.kom-guide-cover .dots{ display:block; height:13px; width:67px; margin-bottom:26px; background-repeat:no-repeat; background-size:13px 13px; background-position:0 50%,18px 50%,36px 50%,54px 50%; background-image:radial-gradient(circle,var(--magenta) 49%,transparent 51%),radial-gradient(circle,var(--yellow) 49%,transparent 51%),radial-gradient(circle,var(--teal) 49%,transparent 51%),radial-gradient(circle,var(--azure) 49%,transparent 51%); }
.kom-guide-cover .eyebrow{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin:0 0 18px; }
.kom-guide-cover h1{ font-family:var(--display); font-size:clamp(40px,6vw,76px); font-weight:var(--fw-display); letter-spacing:-0.02em; line-height:.98; margin:0 0 18px; color:#fff; }
.kom-guide-cover .lead{ font-size:var(--fs-lead); color:#c8c6c2; max-width:720px; line-height:1.6; margin:0; }
.kom-guide-cover .meta{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:#9a9893; margin:26px 0 0; }

/* Etichetta-catalogo prima di ogni pattern: barra scura con slug giallo + titolo + nota d'uso. */
.kom-guide-label{ background:#111112; color:#fff; padding:14px var(--pad); scroll-margin-top:8px; box-shadow:inset 0 -3px 0 var(--yellow); }
.kom-guide-label .slug{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.02em; color:var(--yellow); margin:0; }
.kom-guide-label .ttl{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:5px 0 0; }
.kom-guide-label .use{ font-family:var(--sans); font-size:var(--fs-testo-s); line-height:1.5; color:#9a9893; margin:8px 0 0; max-width:80ch; }


/* ============================================================
   TESTO DI LETTURA — Libre Franklin
   Il corpo di lettura del sito passa a Libre Franklin, con corpo e
   contrasto piu' alti: piu' leggibile e incisivo del vecchio sans grigio.
   Cambia SOLO la prosa di lettura. Restano invariati: occhielli/kicker (mono),
   titoli (Libre Franklin), bottoni, meta, chip, tabelle e la micro-copy delle card
   (feat/benefit/cat/work/porta/moment/fasi-card/vbox). Su fondo scuro
   (.has-dark) il testo resta chiaro: cambia solo il carattere.
   ============================================================ */
.split-body > p:not(.sec-intro),
.approach > p:not(.sec-intro),
.leadcols .col p,
.leadcols .wp-block-column p,
.biglist p,
.faq .ans,
.split-body .acc .ans,
.tl-body p,
.founders .bio {
  font-family: var(--read);
  color: var(--read-ink);
  line-height: 1.64;
}
.split-body > p:not(.sec-intro) { font-size:var(--fs-lead); }
.faq .ans { font-size:var(--fs-testo); }
.split-body .acc .ans { font-size:var(--fs-testo); }
.approach > p:not(.sec-intro) { font-size:var(--fs-lead); }
.leadcols .col p,
.leadcols .wp-block-column p,
.biglist p,
.tl-body p,
.founders .bio { font-size:var(--fs-testo); }
.split-body > p:not(.sec-intro) strong,
.approach > p:not(.sec-intro) strong,
.leadcols .col p strong,
.biglist p strong,
.faq .ans strong,
.tl-body p strong,
.founders .bio strong { color: var(--ink); font-weight:var(--fw-forte); }

/* etichette a pillola dentro le affiancate: restano mono e piccole */
.split-body .chip, .approach .chip { font-family: var(--mono); font-size:var(--fs-meta); }

/* fondo scuro: il carattere cambia, il colore resta chiaro/leggibile */
.has-dark .split-body > p:not(.sec-intro),
.has-dark .approach > p:not(.sec-intro),
.has-dark .leadcols .col p,
.has-dark .leadcols .wp-block-column p,
.has-dark .biglist p,
.has-dark .faq .ans,
.has-dark .split-body .acc .ans,
.has-dark .tl-body p,
.has-dark .founders .bio { color: #d7d5cf; }

/* Stesso carattere di lettura anche in megamenu, dropdown e footer:
   passa a serif SOLO il testo che eredita (voci di menu, descrizioni).
   Etichette/kicker (mono), titoli (Libre Franklin), bottoni, marquee, riga
   legale e credito restano invariati perche' impostano il font in proprio. */
.mega,
header .dropdown,
footer.kf { font-family: var(--read); }


/* ---------- Panorama video (home) — sezione scenica full-bleed, card di vetro.
   Scelta D 2026-07-19 (banco: Bozze/PROVA - Sezione panoramica video.html) ---------- */
.pan{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); height:600px; }
.pan video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pan .ov{ position:absolute; z-index:2; left:48px; bottom:48px; max-width:480px; background:rgba(12,12,14,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.14); padding:34px 36px; display:flex; flex-direction:column; gap:14px; }
.pan .tag{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; font-weight:var(--fw-etichetta); color:var(--yellow); margin:0; }
.pan .pan-title{ font-family:var(--display); font-weight:var(--fw-sottile); font-size:clamp(26px,2.6vw,38px); line-height:1.14; letter-spacing:-0.02em; color:var(--paper); margin:0; }
.pan .pan-title :is(b,strong){ font-weight:var(--fw-display); }
.pan .link-u-light{ display:inline-block; margin:6px 0 0; font-size:var(--fs-link); font-weight:var(--fw-etichetta); color:var(--paper); }
.pan .link-u-light a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:5px; color:inherit; }
.pan .link-u-light a:hover{ color:var(--yellow); border-color:var(--yellow); }
@media (max-width:760px){ .pan{ height:480px; } .pan .ov{ left:20px; right:20px; bottom:20px; max-width:none; padding:26px 28px; } }
/* Variante A «Video pieno · centrato» (banco: Bozze/PROVA - Sezione panoramica video.html) — velo scuro, occhiello giallo + una riga centrata, niente card */
.pan.pan--full{ height:640px; display:grid; place-items:center; text-align:center; }
/* video YouTube come sfondo: iframe sovradimensionato e centrato per coprire (16:9), niente interazione */
.pan.pan--full .pan-yt{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(100%,1139px); height:max(640px,56.25vw); border:0; pointer-events:none; }
@media (max-width:760px){ .pan.pan--full .pan-yt{ width:max(100%,854px); height:max(480px,56.25vw); } }
/* POP a contrasto (2026-07-22): niente velo né sfumatura — video nitido, stacco netto con fascetta brand sul bordo basso */
.pan.pan--full::after{ content:""; position:absolute; inset:auto 0 0 0; height:10px; z-index:7; background:linear-gradient(90deg,var(--magenta) 0 25%,var(--yellow) 25% 50%,var(--teal) 50% 75%,var(--azure) 75% 100%); }
.pan.pan--full .ov{ position:relative; z-index:2; left:auto; bottom:auto; width:100%; max-width:1400px; margin:0 auto; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; padding:0 var(--pad); display:flex; flex-direction:column; align-items:center; gap:20px; }
.pan.pan--full .pan-title{ font-size:clamp(64px,9vw,150px); line-height:.96; letter-spacing:-0.03em; font-weight:var(--fw-display); max-width:none; text-wrap:balance; color:#fff; -webkit-text-stroke:3px var(--ink); paint-order:stroke fill; text-shadow:6px 8px 0 var(--ink); }
.pan.pan--full .tag{ background:var(--yellow); color:var(--ink); padding:8px 16px; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
/* 2026-09-14: .pan-sub = riga di chiusura sotto il titolone del Panorama video (il payoff della battuta
   banana/cactus in home). Stessa grafica "adesivo" del titolo, un gradino sotto: contorno ink + ombra secca. */
.pan.pan--full .pan-sub{ margin:0; max-width:24ch; font-family:var(--display); font-weight:var(--fw-forte); font-size:clamp(19px,2.2vw,28px); line-height:1.26; letter-spacing:-0.01em; text-wrap:balance; color:#fff; -webkit-text-stroke:1px var(--ink); paint-order:stroke fill; text-shadow:2px 3px 0 var(--ink); }
@media (max-width:760px){ .pan.pan--full .pan-sub{ font-size:17px; max-width:28ch; -webkit-text-stroke:.8px var(--ink); text-shadow:2px 2px 0 var(--ink); } }
@media (max-width:760px){ .pan.pan--full{ height:480px; } .pan.pan--full .ov{ left:auto; right:auto; bottom:auto; padding:0 20px; } }

/* Video di sfondo EDITABILE (2026-07-25): nei "Panorama" il video è un BLOCCO NATIVO
   — Video (Libreria media) oppure YouTube/Vimeo (si incolla il link) — reso a pieno riquadro
   dietro al testo. Il comportamento sfondo (muto, loop, senza comandi) sta in assets/js/kom-video-bg.js. */
.pan{ --pan-h:600px; }
.pan.pan--full{ --pan-h:640px; }
@media (max-width:760px){ .pan{ --pan-h:480px; } }
.pan :is(.wp-block-video,.wp-block-embed){ position:absolute; inset:0; z-index:0; margin:0; padding:0; max-width:none; }
.pan .wp-block-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pan :is(.wp-block-video,.wp-block-embed) figcaption{ display:none; }
.pan .wp-block-embed__wrapper{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(100%,calc(var(--pan-h) * 1.7778)); height:max(var(--pan-h),56.25vw); }
.pan .wp-block-embed__wrapper::before{ display:none; }
.pan .wp-block-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }


/* ============================================================
   MURO TETRIS (deciso 2026-07-27) — griglia di case study che si
   ricostruisce da sé: i blocchi cadono dall'alto, si incastrano e
   quello in fondo si dissolve. Magnetismo al mouse: le tessere si
   scostano dal cursore e quella sotto si alza.
   Markup: section.tw > .wrap (testata) + .tw-wall > a.tw-tile…
   Senza JS resta un mosaico statico. JS: assets/js/kom-tetris.js
   ============================================================ */
.tw{ --u:clamp(74px,6.8vw,108px); position:relative; overflow:hidden; border-top:0; padding:clamp(56px,8vh,96px) 0 0;
  background:linear-gradient(158deg,#08090c 0%,#0d1330 46%,#122048 100%); }
.tw > .wrap{ position:relative; z-index:2; }
.tw .sec-num{ color:rgba(255,255,255,.45); }
.tw .sec-intro, .tw .tw-ey{ color:var(--yellow); }
.tw .sec-title, .tw h2{ color:#fff; }
.tw .sec-title .it, .tw h2 .it{ color:#fff; font-style:italic; font-weight:400; }
.tw .tw-sub{ font-size:var(--fs-lead); color:rgba(255,255,255,.6); margin:14px 0 0; max-width:56ch; }
.tw::before{ content:""; position:absolute; z-index:1; border-radius:50%; filter:blur(70px); pointer-events:none;
  width:min(46vw,620px); height:min(46vw,620px); top:-22%; right:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--azure) 50%, transparent), transparent 72%); }
.tw::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:100% var(--u);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,transparent 88%);
          mask-image:linear-gradient(180deg,transparent,#000 22%,transparent 88%); }
.tw .refs__all-w{ position:relative; z-index:2; max-width:1400px; margin-inline:auto; padding:0 var(--pad); }
.tw .refs__all-w a, .tw .refs__all{ color:#fff; }
.tw .refs__all-w a:hover{ color:var(--yellow); }
/* 2026-09-13 — altezza del muro FISSATA dal JS (kom-tetris.js) + overflow nascosto: le tessere che entrano in cima
   e escono in fondo hanno altezze diverse, e senza questo ogni caduta cambiava l'altezza del muro facendo ballare
   su e giù tutte le sezioni sotto. I 34px di padding-top sono scalati dal margine (il distacco visivo resta 44px)
   e servono a non tagliare il magnetismo delle tessere della prima riga. */
.tw-wall{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(var(--tw-cols,3),minmax(0,1fr));
  gap:16px; align-items:start; max-width:1400px; margin:10px auto 0;
  padding:34px var(--pad,32px) clamp(52px,7vh,86px); overflow:hidden; }
.tw-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.tw-tile{ position:relative; display:block; flex:none; overflow:hidden; border-radius:10px; text-decoration:none;
  isolation:isolate; background:#0c1024; height:calc(var(--h,3) * var(--u));
  box-shadow:0 22px 46px -26px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.07) inset;
  transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.tw-tile.near, .tw-tile:hover{ z-index:5; box-shadow:0 38px 70px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.16) inset; }
.tw-img{ position:absolute; inset:0; background-position:center; background-size:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.tw-tile:hover .tw-img{ transform:scale(1.06); }
.tw-tile::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,13,30,0) 54%, rgba(8,10,24,.92)); }
.tw-l{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; display:flex; flex-direction:column; gap:6px; }
.tw-b{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.82); display:flex; align-items:center; gap:8px; }
.tw-b::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c,#E5147B); flex:none; }
.tw-t{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:clamp(var(--fs-titolo-s),1.9vw,var(--fs-titolo)); letter-spacing:-.01em;
  line-height:1.16; color:#fff; }
.tw-go{ max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease;
  font-family:var(--mono); font-size:var(--fs-link); letter-spacing:.05em; color:#fff; }
.tw-tile:hover .tw-go{ max-height:22px; opacity:.9; }
.tw-all{ position:relative; z-index:2; display:block; max-width:1400px; margin:0 auto;
  padding:0 var(--pad,32px) clamp(44px,6vh,72px); }
.tw-all a{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:var(--fs-link);
  letter-spacing:.05em; text-transform:uppercase; color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:4px; }
.tw-all a:hover{ color:var(--yellow); border-color:var(--yellow); }
/* animazioni di caduta / dissolvenza (aggiunte dal JS) */
.tw-tile.tw-drop{ animation:twDrop .62s cubic-bezier(.34,.8,.3,1.02); }
.tw-tile.tw-land::before{ content:""; position:absolute; inset:0; z-index:3; border:2px solid var(--yellow);
  border-radius:6px; animation:twLand .7s ease-out forwards; pointer-events:none; }
.tw-tile.tw-clear{ animation:twClear .42s ease-in forwards; }
@keyframes twDrop{ 0%{ transform:translateY(-420px); opacity:0; } 62%{ opacity:1; } 78%{ transform:translateY(9px); } 100%{ transform:translateY(0); } }
.tw-tile.near .tw-go{ max-height:22px; opacity:.9; }
@keyframes twLand{ 0%{ opacity:1; box-shadow:0 0 34px rgba(245,184,32,.55) inset; } 100%{ opacity:0; box-shadow:none; } }
@keyframes twClear{ 0%{ opacity:1; filter:brightness(1); } 35%{ filter:brightness(2.6) saturate(0); } 100%{ opacity:0; transform:scale(.94); margin-bottom:-999px; filter:brightness(1); } }
/* colonne del muro scelte da shortcode/pannello (tw-cols-N); senza classe = 3 */
.tw-wall.tw-cols-1{ --tw-cols:1; }
.tw-wall.tw-cols-2{ --tw-cols:2; }
.tw-wall.tw-cols-4{ --tw-cols:4; }
@media (max-width:1100px){ .tw-wall, .tw-wall.tw-cols-4{ --tw-cols:2; } }
@media (max-width:700px){ .tw{ --u:46px; } .tw-wall, .tw-wall.tw-cols-2, .tw-wall.tw-cols-4{ --tw-cols:1; gap:10px; } .tw-t{ font-size:var(--fs-lead); } }
@media (prefers-reduced-motion:reduce){
  .tw-tile, .tw-img{ transition:none; }
  .tw-tile.tw-drop, .tw-tile.tw-clear{ animation:none; }
}

/* Hero case study a BLOCCHI (2026-07-28): il pannello e le CTA sono blocchi core
   (wp:group + wp:buttons), quindi neutralizza il layout di Gutenberg e accetta
   un'immagine reale (wp:image) al posto del segnaposto .cs-shot. */
.cs-hero .cs-panel, .cs-hero .inner { min-width:0; }
.cs-hero .wp-block-buttons.ctas { display:flex; flex-wrap:wrap; gap:14px; margin:clamp(26px,3vw,38px) 0 0; }
.cs-hero .wp-block-buttons.ctas .wp-block-button { margin:0; }
.cs-hero .wp-block-buttons.ctas .wp-block-button__link { border-radius:6px; }
.cs-hero .cs-shot .wp-block-image, .cs-hero .cs-shot figure { margin:0; height:100%; }
.cs-hero .cs-shot img { width:100%; height:100%; object-fit:cover; display:block; }
/* Case study TUTTI a blocchi (2026-07-29): niente più HTML personalizzato nei progetti.
   I run inline (es. .mi con nome mercato + etichetta) sono diventati paragrafi nativi. */
.num-card .mi > p { margin:0; }

/* OUVERTURE «Marketing for the Brave» (2026-07-29): la sezione Panorama apre col
   titolone brand animato (stesso gradiente in scorrimento della fascia footer,
   @keyframes komGrad in kom-ds.css) e dopo 10s sfuma sul video che gira.
   Il timer sta in kom-video-bg.js, che aggiunge .brave-off alla sezione. */
.pan .pan-brave{ position:absolute; inset:0; margin:0!important; z-index:6; background:#000; display:grid; place-items:center; align-content:center; text-align:center; padding:clamp(24px,4vw,64px); padding-bottom:clamp(80px,16vh,220px); container-type:inline-size; transition:opacity .9s ease, visibility .9s ease; }
.pan .pan-brave__t{ margin:0; font-family:var(--display); font-weight:var(--fw-display); text-transform:uppercase; font-size:min(11.5cqw,168px); line-height:.84; letter-spacing:-0.035em; max-width:14ch;
  background-image:linear-gradient(100deg,#E5147B,#F5B820,#45B5E5,#1C7A99,#E5147B,#F5B820,#45B5E5,#1C7A99,#E5147B); background-size:400% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.pan .pan-brave__sub{ margin:clamp(16px,2vw,28px) 0 0; font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.72); }
@media (prefers-reduced-motion:no-preference){
  .pan .pan-brave__t{ animation:komGrad 6s linear infinite, panBraveIn 1s cubic-bezier(.16,1,.3,1) both; }
  .pan .pan-brave__sub{ animation:panBraveIn .9s cubic-bezier(.16,1,.3,1) .35s both; }
}
@keyframes panBraveIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.pan.brave-off .pan-brave{ opacity:0; visibility:hidden; pointer-events:none; }
/* velo nero pieno finché l'ouverture è in scena: nessuna striscia di video ai bordi */
.pan.has-brave::before{ content:""; position:absolute; inset:0; z-index:5; background:#000; transition:opacity .9s ease, visibility .9s ease; }
.pan.has-brave.brave-off::before{ opacity:0; visibility:hidden; }
/* mentre l'ouverture è in scena, occhiello e titolo del video restano fuori scena */
.pan .ov{ transition:opacity .7s ease .15s; }
.pan.has-brave:not(.brave-off) .ov{ opacity:0; }
@media (max-width:620px){ .pan .pan-brave__t{ font-size:min(15cqw,76px); } .pan .pan-brave__sub{ letter-spacing:.18em; } }


/* ===== CITAZIONE A TUTTA LARGHEZZA (home) — deciso 2026-08-22 ===== */
.kq{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.kq > .wrap{ max-width:1040px; padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(56px,7vw,96px); }
.kq-q{ font-family:var(--display); font-weight:var(--fw-sottile); font-size:clamp(28px,4vw,48px); line-height:1.12; letter-spacing:-0.025em; color:var(--ink); margin:0; text-wrap:pretty; }
.kq-q strong, .kq-q b{ font-weight:var(--fw-display); }
.kq-a{ font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:28px 0 0; }

/* ===== FASI ADAM · pannelli colorati (home) — deciso 2026-08-22 ===== */
.fasi{ display:grid; gap:16px; margin-top:clamp(34px,4vw,52px); }
.fase{ border-radius:8px; padding:clamp(38px,4.4vw,64px) clamp(26px,3.6vw,56px); display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.fase-num{ font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.16em; text-transform:uppercase; margin:0; color:inherit; opacity:.72; }
.fase-t{ font-family:var(--display); font-weight:var(--fw-sottile); font-size:clamp(30px,4vw,52px); line-height:1.02; letter-spacing:-0.03em; margin:14px 0 0; color:inherit; text-wrap:balance; }
.fase-t strong, .fase-t b{ font-weight:var(--fw-display); }
.fase-r p{ font-size:var(--fs-testo); line-height:1.6; margin:0; color:inherit; opacity:.92; max-width:44ch; }
.fase-r .wp-block-buttons{ margin-top:22px; }
.f-magenta{ background:var(--magenta); color:#fff; --fase-btn-ink:#fff; --fase-hover-bg:#fff; --fase-hover-ink:#c40e67; }
.f-yellow{ background:var(--yellow); color:#1a1407; --fase-btn-ink:#1a1407; --fase-hover-bg:#1a1407; --fase-hover-ink:#F5B820; }
.f-teal{ background:var(--teal); color:#fff; --fase-btn-ink:#fff; --fase-hover-bg:#fff; --fase-hover-ink:#14606f; }
.f-azure{ background:var(--azure); color:#0e2b38; --fase-btn-ink:#0e2b38; --fase-hover-bg:#0e2b38; --fase-hover-ink:#45B5E5; }
.fase .wp-block-button.btn-outline, .fase .btn-outline{ color:var(--fase-btn-ink); border-color:var(--fase-btn-ink); }
.fase .wp-block-button.btn-outline .wp-block-button__link, .fase .btn-outline .wp-block-button__link, .fase a.btn-outline{ background:transparent; color:var(--fase-btn-ink); border-color:var(--fase-btn-ink); }
.fase .wp-block-button.btn-outline .wp-block-button__link:hover, .fase .btn-outline .wp-block-button__link:hover, .fase a.btn-outline:hover{ background:var(--fase-hover-bg); color:var(--fase-hover-ink); border-color:var(--fase-hover-bg); }
@media (max-width:760px){ .fase{ grid-template-columns:1fr; gap:22px; } }

/* PAROLE IN DISSOLVENZA negli hero (.hp-tw / .tw-fade) — le spanne .tw-w le crea kom-herofx.js.
   Qui nel tema (non nel <style> del pattern) così l'animazione regge anche se il cliente
   modifica la pagina in Gutenberg. */
/* display:inline (non inline-block) e !important: le parole restano nel flusso — con inline-block
   la punteggiatura andava a capo da sola — e vince sui vecchi <style> rimasti nelle pagine già pubblicate. */
:is(.hp-tw,.tw-fade,[data-tw]) .tw-w{ display:inline !important; }
@media (prefers-reduced-motion:no-preference){
  :is(.hp-tw,.tw-fade,[data-tw]).tw-run .tw-w{ opacity:0; filter:blur(8px); animation:twWord 1.2s cubic-bezier(.25,.6,.25,1) forwards; animation-delay:calc(.2s + var(--i)*110ms); }
  @keyframes twWord{ to{ opacity:1; filter:blur(0); } }
}

/* HERO LEGGERI (deciso 2026-07-18): nei titoloni hero il display è LIGHT; in bold solo POCHE parole — .hl, b/strong (grassetto in Gutenberg) e parole colorate. Va in FONDO al file per vincere sulle regole per-hero qui sopra. Hero bespoke nuovi: aggiungi la classe qui. */
:is(.hero,.svc-hero,.hero-vetrina,.hero-insegna,.hero-banda,.hero-foto,.ai-hero,.wd-hero,.geo-hero,.sv-hero,.ls-dark,.amh,.bl-hero,.ar-head,.iv-hero,.apx) h1, h1.hp-tw, .hero-banda .hb-title { font-weight:var(--fw-sottile); letter-spacing:-0.015em; }
:is(.hero,.svc-hero,.hero-vetrina,.hero-insegna,.hero-banda,.hero-foto,.ai-hero,.wd-hero,.geo-hero,.sv-hero,.ls-dark,.amh,.bl-hero,.ar-head,.iv-hero,.apx) h1 :is(b,strong,.hl,.d-m,.d-y,.d-t,.d-a), h1.hp-tw :is(b,strong,.hl), .hero-banda .hb-title :is(b,strong,.hl) { font-weight:var(--fw-display); }
/* TESTONI LEGGERI: statement e citazioni grandi mai tutti bold — base leggera, accenti in bold */
.why p.big { font-weight:var(--fw-testo); }
.effigie blockquote { font-weight:var(--fw-sottile); }
.effigie blockquote :is(b,strong) { font-weight:var(--fw-display); background:linear-gradient(100deg,#E5147B,#45B5E5); -webkit-background-clip:text; background-clip:text; color:transparent; text-decoration:none; text-underline-offset:.16em; }

/* Sottopagine fase: colori per fase come classi (editabilità Gutenberg: via style inline dal wp:group) 2026-07-22 */
.phase-sub.ps-analizza{--band:#E5147B;--acc:#E5147B;--acc2:#ff63ab;--card:#330a1d;--txt:#fff}
.phase-sub.ps-disegna{--band:#F5B820;--acc:#a87c00;--acc2:#F5B820;--card:#2a2206;--txt:#1a1407}
.phase-sub.ps-amplia{--band:#1C7A99;--acc:#1C7A99;--acc2:#3fb6da;--card:#0c2a35;--txt:#fff}
.phase-sub.ps-misura{--band:#45B5E5;--acc:#1f7fa6;--acc2:#7fcef2;--card:#0c2937;--txt:#08303f}


/* ============================================================
   CASE STUDY (CPT progetto) — stili condivisi dei corpi dei
   case study (cartella progetti del tema). Prima vivevano solo
   negli style dei prototipi: su WordPress le pagine progetto
   uscivano spoglie (segnaposto immagine, griglia numeri,
   mini-metriche, hero).
   ============================================================ */
.ph-img{ width:100%; height:100%; min-height:300px; display:flex; align-items:flex-end; justify-content:flex-start; background:#EFEDE7 url(../placeholder.png) center/cover no-repeat; border:1px solid var(--rule); position:relative; overflow:hidden; }
.split-media .ph-img{ aspect-ratio:4/5; min-height:0; }
.ph-img::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(17,17,18,.04) 0 12px, rgba(17,17,18,.07) 12px 24px); }
.ph-img span{ position:relative; z-index:1; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em; text-transform:uppercase; color:#3f3f3d; background:rgba(255,255,255,.86); padding:7px 11px; border:1px solid var(--rule); margin:14px; line-height:1.5; }
.nums{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:40px; }
.nums .num-card{ border:1px solid var(--rule); background:var(--paper); padding:32px; display:flex; flex-direction:column; gap:10px; }
.nums .num-card.wide{ grid-column:1 / -1; }
.num-card .k{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:0; }
.num-card .v{ font-family:var(--display); font-size:46px; font-weight:var(--fw-titolo); letter-spacing:-0.02em; line-height:1; margin:0; }
.num-card .d{ font-size:var(--fs-testo-s); color:var(--mute); line-height:1.5; margin:0; }
.num-card .mk{ display:flex; gap:36px; flex-wrap:wrap; margin-top:6px; }
.num-card .mi{ display:flex; flex-direction:column; gap:5px; }
.num-card .mi b{ font-family:var(--display); font-size:26px; font-weight:var(--fw-titolo); letter-spacing:-0.01em; line-height:1; }
.num-card .mi span{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }
@media (max-width:880px){ .nums{ grid-template-columns:1fr; } .num-card .mk{ gap:22px; } }
/* hero del singolo progetto (shortcode kom_progetto_hero) */
.progetto-hero{ padding:72px 0 56px; border-top:0; }
.progetto-hero .crumb{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:26px; }
.progetto-hero .crumb a{ color:var(--mute); text-decoration:none; }
.progetto-hero .crumb a:hover{ color:var(--ink); }
.progetto-hero h1{ font-family:var(--display); font-size:clamp(40px,5.2vw,76px); font-weight:var(--fw-display); line-height:1; letter-spacing:-0.025em; max-width:1040px; text-wrap:balance; margin:0; }
.progetto-hero .lead{ font-size:var(--fs-lead); color:var(--mute); max-width:660px; margin:26px 0 0; line-height:1.55; }


/* ============================================================
   LIBRERIA PATTERN — impaginato del catalogo (pagine libreria-*, 2026-07-25).
   Etichetta sopra ogni pattern + barra di navigazione fra le 3 pagine.
   ============================================================ */
.lib-top{ position:sticky; top:0; z-index:60; background:var(--ink); color:#fff; }
.lib-top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px; }
.lib-name{ font-family:var(--display); font-weight:var(--fw-display); font-size:var(--fs-titolo-s); margin:0; }
.lib-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.lib-tabs a{ font-size:var(--fs-link); font-weight:var(--fw-etichetta); color:rgba(255,255,255,.8); text-decoration:none; padding:9px 16px; border:1px solid rgba(255,255,255,.24); border-radius:999px; transition:background .16s ease, color .16s ease; }
.lib-tabs a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.lib-tabs a[aria-current]{ background:#fff; color:var(--ink); border-color:#fff; }
.lib-sommario{ padding:44px 0 8px; }
.lib-k{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 18px; }
.lib-indice{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0 28px; }
.lib-indice li{ border-top:1px solid var(--rule); }
.lib-indice a{ display:block; padding:11px 0; font-size:var(--fs-link); font-weight:var(--fw-etichetta); color:var(--ink); text-decoration:none; }
.lib-indice a:hover{ color:var(--magenta); }
.lib-indice .n{ font-family:var(--mono); color:var(--mute); margin-right:10px; }
.lib-strip{ margin-top:64px; border-top:3px solid var(--ink); background:var(--paper); }
.lib-strip .wrap{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:8px 24px; padding-top:16px; padding-bottom:16px; }
.lib-num{ grid-column:1/-1; font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); margin:0; }
.lib-h{ font-family:var(--display); font-size:var(--fs-titolo); font-weight:var(--fw-titolo); letter-spacing:-.01em; margin:0; }
.lib-slug{ font-family:var(--mono); font-size:var(--fs-link); color:var(--mute); margin:0; white-space:nowrap; user-select:all; }
.lib-page main > .lib-strip + *{ margin-top:0; }
@media (max-width:760px){ .lib-strip .wrap{ grid-template-columns:1fr; } .lib-slug{ white-space:normal; } }

/* Carosello "Approfondisci" come sezione nativa (2026-07-27): accento fase via classe, non style inline */
.fasi-slider.fsx--magenta{ --fsx:#E5147B; } .fasi-slider.fsx--giallo{ --fsx:#F5B820; } .fasi-slider.fsx--teal{ --fsx:#1C7A99; } .fasi-slider.fsx--azure{ --fsx:#45B5E5; }


/* ============================================================
   APX — HERO «IL PULSANTE» (pagina Metodo ADAM · AI, 2026-08-21)
   Momento d'impatto: l'agente legge i dati veri, prepara, si ferma.
   Decide l'umano. One-off della pagina adam-ai (non è un pattern).
   ============================================================ */
.apx{ position:relative; overflow:hidden; margin-top:0; padding:80px 0 92px; background:var(--ink); color:var(--paper); }
.apx::before{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 92px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 92px); }
.apx::after{ content:""; position:absolute; left:-10%; top:-30%; width:60%; height:120%; pointer-events:none; background:radial-gradient(closest-side,rgba(229,20,123,.20),transparent 70%); }
.apx-wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,64px); align-items:start; }
.apx .crumb{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.08em; text-transform:uppercase; color:#8b8985; margin:0 0 20px; }
.apx .crumb a{ color:#8b8985; text-decoration:none; }
.apx .crumb a:hover{ color:var(--paper); }
.apx-ey{ font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin:0 0 24px; }
.apx-copy h1{ font-family:var(--display); font-size:clamp(40px,5.2vw,78px); font-weight:var(--fw-sottile); line-height:.99; letter-spacing:-.03em; margin:0 0 26px; text-wrap:pretty; }
.apx-copy h1 :is(b,strong){ font-weight:var(--fw-display); }
.apx-copy h1 .d-m{ color:var(--magenta); font-weight:var(--fw-display); }
.apx-copy .lead{ font-size:var(--fs-lead); line-height:1.55; color:#c8c6c2; margin:0 0 32px; max-width:34em; }
.apx-cockpit{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:20px; }
.apx-bar{ display:flex; align-items:center; gap:10px; margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.08em; text-transform:uppercase; color:#9a9893; }
.apx-bar b{ color:var(--paper); }
.apx-dot{ width:8px; height:8px; border-radius:50%; background:#3ddc97; box-shadow:0 0 0 4px rgba(61,220,151,.18); animation:apxPulse 1.8s infinite; }
@keyframes apxPulse{ 50%{ box-shadow:0 0 0 9px rgba(61,220,151,0); } }
.apx-log{ list-style:none; margin:0 0 18px; padding:0; min-height:206px; display:flex; flex-direction:column; gap:11px; }
.apx-log li{ display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:baseline; font-size:var(--fs-testo); line-height:1.45; color:#d8d6d2; opacity:0; transform:translateY(6px); animation:apxIn .34s ease forwards; }
@keyframes apxIn{ to{ opacity:1; transform:none; } }
.apx-log .t{ font-size:var(--fs-meta); letter-spacing:.06em; color:#7d7b78; font-variant-numeric:tabular-nums; }
.apx-log b{ font-weight:var(--fw-forte); color:var(--paper); }
.apx-log li.ok .t{ color:var(--azure); }
.apx-log li.stop{ color:var(--paper); }
.apx-log li.stop .t, .apx-log li.stop b{ color:var(--magenta); }
.apx-gate{ position:relative; overflow:hidden; background:var(--paper); color:var(--ink); border-radius:6px; padding:24px 24px 20px; }
.apx-gate-k{ margin:0 0 12px; font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.apx-pause{ color:var(--magenta); }
.apx-ok{ color:#1F8A5B; }
.apx-pause::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--magenta); margin-right:7px; animation:apxBlink 1s steps(1) infinite; }
@keyframes apxBlink{ 50%{ opacity:.15; } }
.apx-gate-h{ margin:0 0 20px; font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); line-height:1.2; letter-spacing:-.01em; }
.apx-btn{ display:block; width:100%; min-height:56px; border:0; border-radius:5px; background:var(--magenta); color:#fff; font-family:var(--sans); font-size:var(--fs-testo); font-weight:var(--fw-etichetta); letter-spacing:.04em; text-transform:uppercase; cursor:pointer; box-shadow:0 10px 30px -12px rgba(229,20,123,.9); transition:transform .12s ease, background .2s ease; }
.apx-btn:hover{ background:#ff2a90; }
.apx-btn:active{ transform:translateY(2px); }
.apx-btn[disabled]{ background:var(--ink); color:var(--yellow); cursor:default; box-shadow:none; }
.apx-gate-m{ margin:14px 0 0; font-size:var(--fs-meta); line-height:1.5; color:var(--mute); }
.apx-done{ margin:0 0 20px; font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-display); line-height:1.15; letter-spacing:-.01em; }
.apx-done em{ font-style:normal; color:var(--magenta); }
.apx-flash{ position:absolute; inset:0; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; justify-items:center; pointer-events:none; opacity:0; }
.apx-flash span{ font-family:var(--adam); font-weight:var(--fw-sottile); font-size:34vh; line-height:.8; color:#fff; }
.apx-flash.go{ animation:apxFlash .9s ease forwards; }
.apx-flash.go span:nth-child(1){ color:var(--teal); } .apx-flash.go span:nth-child(2){ color:var(--azure); }
.apx-flash.go span:nth-child(3){ color:var(--yellow); } .apx-flash.go span:nth-child(4){ color:var(--magenta); }
@keyframes apxFlash{ 0%{ opacity:0; transform:scale(.72); } 14%{ opacity:1; background:rgba(255,255,255,.92); } 30%{ opacity:1; background:transparent; } 100%{ opacity:0; transform:scale(1.35); } }
.apx.is-shake{ animation:apxShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes apxShake{ 10%,90%{ transform:translate(-2px,1px); } 30%,70%{ transform:translate(5px,-2px); } 50%{ transform:translate(-6px,2px); } }
@media (max-width:980px){ .apx{ padding:56px 0 68px; } .apx-wrap{ grid-template-columns:1fr; } .apx-log{ min-height:180px; } }

/* ============================================================
   ADX — «ADAM esplode»: wordmark cinetico che apre le quattro fasi
   (pagina Metodo ADAM · AI, 2026-08-21). Le lettere esplodono con
   aberrazione cromatica, al passaggio accendono la card della fase.
   ============================================================ */
.adx{ position:relative; overflow:hidden; margin:0 0 40px; border-radius:8px; background:var(--ink); height:min(46vh,420px); }
.adx::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 82% at 50% 42%,transparent 26%,rgba(17,17,18,.88) 100%); }
.adx-word{ position:absolute; inset:0; z-index:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.adx-cell{ position:relative; display:flex; align-items:center; justify-content:center; text-decoration:none; color:inherit; transform:translate(var(--px,0px),var(--py,0px)) scale(var(--s,1)); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.adx-l{ position:relative; font-family:var(--adam); font-weight:var(--fw-sottile); font-size:min(20vw,34vh); line-height:.78; color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.30); transition:color .3s ease, -webkit-text-stroke-color .3s ease; }
.adx-l::before, .adx-l::after{ content:attr(data-ch); position:absolute; left:0; top:0; color:transparent; -webkit-text-stroke:1.4px currentColor; mix-blend-mode:screen; opacity:0; }
.adx-l::before{ color:var(--magenta); }
.adx-l::after{ color:var(--azure); }
.adx-cell.on{ --s:1.04; }
.adx-cell.on .adx-l{ color:var(--c); -webkit-text-stroke-color:transparent; }
.adx-cap{ position:absolute; left:50%; bottom:6%; transform:translateX(-50%); width:min(90%,320px); text-align:center; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.adx-cap b{ display:block; font-family:var(--display); font-size:var(--fs-titolo-s); font-weight:var(--fw-titolo); letter-spacing:-.01em; color:var(--c); }
.adx-cap em{ display:block; font-style:normal; font-size:var(--fs-testo); line-height:1.45; color:#c8c6c2; margin-top:6px; }
.adx-cell.on .adx-cap{ opacity:1; }
.adx-wave{ position:absolute; left:50%; top:50%; z-index:1; width:22vmin; height:22vmin; margin:-11vmin 0 0 -11vmin; border-radius:50%; border:2px solid rgba(245,184,32,.55); opacity:0; pointer-events:none; }
.adx-flash{ position:absolute; inset:0; z-index:4; background:#fff; opacity:0; pointer-events:none; }
.adx.go .adx-l{ animation:adxIn 1.15s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d); }
.adx.go .adx-l::before{ animation:adxGa 1.6s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d); }
.adx.go .adx-l::after{ animation:adxGb 1.6s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d); }
.adx.go .adx-wave{ animation:adxWv 1.25s cubic-bezier(.16,1,.3,1) both; }
.adx.go .adx-flash{ animation:adxFl .55s ease-out both; }
@keyframes adxIn{ 0%{ opacity:0; transform:scale(.34) rotate(-7deg); filter:blur(30px); } 52%{ opacity:1; filter:blur(0); } 72%{ transform:scale(1.07) rotate(.5deg); } 100%{ opacity:1; transform:scale(1) rotate(0); filter:blur(0); } }
@keyframes adxGa{ 0%{ opacity:0; transform:translate(0,0) scale(.34); } 30%{ opacity:.95; transform:translate(-30px,14px) scale(1.02); } 100%{ opacity:.16; transform:translate(-9px,4px) scale(1); } }
@keyframes adxGb{ 0%{ opacity:0; transform:translate(0,0) scale(.34); } 30%{ opacity:.95; transform:translate(26px,-16px) scale(1.02); } 100%{ opacity:.16; transform:translate(8px,-5px) scale(1); } }
@keyframes adxWv{ 0%{ opacity:.9; transform:scale(.1); } 100%{ opacity:0; transform:scale(7); } }
@keyframes adxFl{ 0%{ opacity:.85; } 100%{ opacity:0; } }
.adx-again{ position:absolute; right:16px; bottom:12px; z-index:5; font-family:var(--sans); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.1em; text-transform:uppercase; color:#7d7b78; background:none; border:0; cursor:pointer; }
.adx-again:hover{ color:var(--yellow); }
#le-quattro-fasi .adam-card{ transition:transform .24s ease, box-shadow .24s ease; }
#le-quattro-fasi .adam-card.is-lit{ transform:translateY(-5px); box-shadow:0 22px 44px -24px rgba(17,17,18,.6); }
@media (max-width:760px){ .adx{ height:min(32vh,260px); margin-bottom:28px; } .adx-cap{ display:none; } .adx-l{ font-size:min(19vw,26vh); } }
@media (prefers-reduced-motion:reduce){
  .apx-log li{ opacity:1; transform:none; animation:none; }
  .apx-dot, .apx-pause::before, .apx-flash.go, .apx.is-shake{ animation:none; }
  .adx.go .adx-l, .adx.go .adx-l::before, .adx.go .adx-l::after, .adx.go .adx-wave, .adx.go .adx-flash{ animation:none; }
  .adx-l{ opacity:1; }
}


/* ============================================================
   MODELLO 3C (pagina Analyze, 2026-08-25) — Venn del posizionamento
   + schede delle tre forze. Prima erano <style>/<script> dentro il
   contenuto: in WordPress la sezione si troncava. Ora: markup minimo
   nel pattern, stage costruito da assets/js/kom-3c.js.
   ============================================================ */
.tc-sec{ position:relative; background:#0a0e16; color:#fff; padding:clamp(56px,9vh,104px) 0; overflow:hidden; }
.tc-wrap{ max-width:1060px; margin:0 auto; padding:0 clamp(22px,5vw,56px); }
.tc-eyebrow{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin:0; text-align:center; }
.tc-title{ font-family:var(--display); font-weight:var(--fw-display); font-size:clamp(28px,4vw,52px); line-height:1.04; letter-spacing:-0.02em; color:#fff; margin:16px 0 0; text-align:center; }
.tc-title .it{ font-style:italic; font-weight:var(--fw-testo); color:#7fd0f5; }
.tc-sub{ font-size:clamp(15px,1.5vw,18px); line-height:1.62; color:rgba(255,255,255,.66); margin:18px auto 0; max-width:66ch; text-align:center; }
.tc-sub strong{ color:#fff; font-weight:var(--fw-etichetta); }
.tc-stage{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:50px; }
.tc-stage:empty{ display:none; }
.tc-venn{ width:100%; max-width:440px; margin:0 auto; display:block; overflow:visible; }
.tc-circ{ fill-opacity:.14; stroke-width:2; transition:fill-opacity .35s ease, stroke-width .35s ease; }
.tc-c-cli{ fill:#E5147B; stroke:#E5147B; }
.tc-c-azi{ fill:#45B5E5; stroke:#45B5E5; }
.tc-c-com{ fill:#F5B820; stroke:#F5B820; }
.tc-lab{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; fill:#fff; text-anchor:middle; opacity:.7; }
.tc-win circle{ fill:#0a0e16; stroke:#fff; stroke-width:2; opacity:0; transition:opacity .4s ease; }
.tc-win-star{ fill:var(--yellow); font-size:14px; text-anchor:middle; opacity:0; transition:opacity .4s ease; }
.tc-win-t{ font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; fill:#fff; text-anchor:middle; opacity:0; transition:opacity .4s ease; }
.tc-sec[data-active="cliente"] .tc-c-cli{ fill-opacity:.42; stroke-width:3; }
.tc-sec[data-active="azienda"] .tc-c-azi{ fill-opacity:.42; stroke-width:3; }
.tc-sec[data-active="competitor"] .tc-c-com{ fill-opacity:.42; stroke-width:3; }
.tc-sec[data-active="vincente"] .tc-circ{ fill-opacity:.30; }
.tc-sec[data-active="vincente"] .tc-win circle,
.tc-sec[data-active="vincente"] .tc-win-star,
.tc-sec[data-active="vincente"] .tc-win-t{ opacity:1; }
@media (prefers-reduced-motion:no-preference){ .tc-sec[data-active="vincente"] .tc-win circle{ animation:tcPulse 2.4s ease-in-out infinite; } }
@keyframes tcPulse{ 0%,100%{ stroke-width:2; } 50%{ stroke-width:3.4; } }
.tc-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tc-tab{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:var(--fw-etichetta); letter-spacing:.03em; padding:11px 16px; border-radius:99px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.tc-tab:hover{ border-color:#fff; }
.tc-tab[data-k="cliente"].on{ background:#E5147B; border-color:#E5147B; }
.tc-tab[data-k="azienda"].on{ background:#45B5E5; border-color:#45B5E5; color:#06121a; }
.tc-tab[data-k="competitor"].on{ background:#F5B820; border-color:#F5B820; color:#1a1405; }
.tc-tab[data-k="vincente"].on{ background:#fff; border-color:#fff; color:#0a0e16; }
.tc-card{ border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:28px 30px; background:rgba(255,255,255,.03); min-height:190px; }
.tc-card-h{ font-family:var(--display); font-weight:var(--fw-titolo); font-size:clamp(21px,2.6vw,30px); line-height:1.1; letter-spacing:-0.01em; color:#fff; margin:0 0 12px; }
.tc-card-t{ font-size:var(--fs-testo); line-height:1.64; color:rgba(255,255,255,.76); margin:0; }
.tc-card.swap{ animation:tcSwap .42s ease; }
@keyframes tcSwap{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width:820px){ .tc-stage{ grid-template-columns:1fr; gap:30px; } }

/* Muro Tetris — formato per singola tessera (campo «Formato tessera» del Progetto).
   Vuoto = altezza a mosaico; altrimenti proporzione fissa. */
.tw-tile[data-fmt]{ height:auto; }
.tw-tile[data-fmt="wide"]{ aspect-ratio:16/9; }
.tw-tile[data-fmt="43"]{ aspect-ratio:4/3; }
.tw-tile[data-fmt="square"]{ aspect-ratio:1/1; }
.tw-tile[data-fmt="tall"]{ aspect-ratio:3/4; }


/* ---- MURO LOGHI CLIENTI (.client-reel) — banda scura con i marchi in negativo.
   Usato nell'hero del Portfolio e in Home sotto il muro dei case study.
   Le varianti dell'hero Portfolio (banda velata, passo largo) restano in portfolio.css. ---- */
.client-reel { position:relative; background:var(--ink); color:#fff; overflow:hidden;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:34px 0 40px; }
.client-reel .cr-head { padding:0 max(var(--pad), calc((100vw - 1400px) / 2 + var(--pad))); margin-bottom:24px; }
.client-reel .cr-eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow); display:inline-flex; align-items:center; gap:12px; }
.client-reel .cr-dots { width:54px; height:9px; background-repeat:no-repeat; background-size:9px 9px;
  background-position:0 50%,15px 50%,30px 50%,45px 50%;
  background-image:radial-gradient(circle,var(--magenta) 49%,transparent 51%),radial-gradient(circle,var(--yellow) 49%,transparent 51%),radial-gradient(circle,var(--teal) 49%,transparent 51%),radial-gradient(circle,var(--azure) 49%,transparent 51%); }
.client-reel .logo-strip { padding:0; }
.client-reel .logo-strip::before { background:linear-gradient(90deg, var(--ink) 10%, transparent); }
.client-reel .logo-strip::after  { background:linear-gradient(270deg, var(--ink) 10%, transparent); }
.client-reel .logo-track { gap:72px; animation-duration:46s; }
/* tessera marchio: box fisso, il logo ci sta dentro senza deformarsi (i PNG sono a 2x) */
.client-reel .lgfig { flex:none; width:280px; margin:0; text-align:center; }
.client-reel .lgfig img { display:block; width:280px; height:80px; object-fit:contain; opacity:.92; transition:opacity .25s ease; }
.client-reel .lgfig:hover img { opacity:1; }
.client-reel .lgfig figcaption { font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.04em;
  color:rgba(255,255,255,.56); margin:12px 0 0; line-height:1.45; }
.client-reel .lgfig figcaption strong { color:rgba(255,255,255,.92); font-weight:var(--fw-etichetta); }
@media (prefers-reduced-motion:reduce){ .client-reel .logo-track { animation:none; } }
@media (max-width:620px){ .client-reel { padding:28px 0 32px; }
  .client-reel .logo-track { gap:40px; }
  .client-reel .lgfig, .client-reel .lgfig img { width:210px; }
  .client-reel .lgfig img { height:62px; } }

/* ---- 2026-09-14 · I DUE SLIDER SI SONO SCAMBIATI DI POSTO — E DI VESTITO.
   Prima: le partnership chiudevano la banda metodo, i loghi clienti stavano dopo il muro Tetris.
   Ognuno puntellava il vicino sbagliato: badge di strumenti sotto una rivendicazione di clienti
   («22 progetti · dal 2005»), e sette loghi di clienti subito dopo ventidue storie di clienti.
   Adesso la sequenza è nomi → storie → strumenti.
   Siccome ciascuno era cucito sul posto in cui viveva (.hp-partners è un velo senza sfondo proprio,
   .client-reel è un blocco --ink pieno), qui sotto si scambiano anche i contenitori.
   NB: .client-reel è condiviso con Portfolio (11703) e Work EN (12836) — la variante dentro la banda
   usa il modificatore .reel-inband e NON tocca la classe base. ---- */

/* (a) I loghi clienti in coda alla banda: velo, non blocco pieno. */
.hero-banda:has(.reel-inband){ padding-bottom:0; }
.hero-banda .client-reel.reel-inband{ margin:64px 0 0; padding:26px 0 30px;
  background:rgba(255,255,255,.035); border-top:1px solid rgba(255,255,255,.14); }
.hero-banda .client-reel.reel-inband .cr-head{ margin-bottom:18px; }
.hero-banda .client-reel.reel-inband .logo-strip::before{ background:linear-gradient(90deg, rgba(17,21,45,.92), transparent); }
.hero-banda .client-reel.reel-inband .logo-strip::after{ background:linear-gradient(270deg, rgba(17,21,45,.92), transparent); }
.hero-banda .client-reel.reel-inband .logo-track{ gap:56px; }
.hero-banda .client-reel.reel-inband .lgfig,
.hero-banda .client-reel.reel-inband .lgfig img{ width:220px; }
.hero-banda .client-reel.reel-inband .lgfig img{ height:64px; }
@media (max-width:980px){ .hero-banda .client-reel.reel-inband{ margin-top:48px; } }
@media (max-width:620px){ .hero-banda .client-reel.reel-inband .lgfig,
  .hero-banda .client-reel.reel-inband .lgfig img{ width:190px; }
  .hero-banda .client-reel.reel-inband .lgfig img{ height:56px; } }

/* (b) Le partnership come sezione autonoma dopo il muro Tetris: fondo pieno, a tutta larghezza.
   Queste regole stavano in uno <style> dentro la home: portate qui, contenitore rifatto. */
.hp-partners{ position:relative; z-index:2; overflow:hidden; color:#fff; background:var(--ink);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:34px 0 40px; }
.hp-partners .cr-head{ padding:0 max(var(--pad,32px), calc((100vw - 1400px) / 2 + var(--pad,32px))); margin-bottom:22px; }
.hp-partners .cr-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); display:inline-flex; align-items:center; gap:12px; }
.hp-partners .cr-dots{ width:54px; height:9px; background-repeat:no-repeat; background-size:9px 9px; background-position:0 50%,15px 50%,30px 50%,45px 50%; background-image:radial-gradient(circle,var(--magenta) 49%,transparent 51%),radial-gradient(circle,var(--yellow) 49%,transparent 51%),radial-gradient(circle,var(--teal) 49%,transparent 51%),radial-gradient(circle,var(--azure) 49%,transparent 51%); }
.hp-partners .logo-strip{ position:relative; overflow:hidden; padding:0; margin:0; }
.hp-partners .logo-strip::before, .hp-partners .logo-strip::after{ content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none; }
.hp-partners .logo-strip::before{ left:0; background:linear-gradient(90deg, var(--ink) 10%, transparent); }
.hp-partners .logo-strip::after{ right:0; background:linear-gradient(270deg, var(--ink) 10%, transparent); }
.hp-partners .logo-track{ display:flex; align-items:center; gap:20px; width:max-content; animation:hpPartners 38s linear infinite; }
.hp-partners .logo-strip:hover .logo-track{ animation-play-state:paused; }
@keyframes hpPartners{ to{ transform:translateX(-50%); } }
.hp-partners .pbadge{ display:inline-flex; align-items:center; gap:13px; padding:11px 22px 11px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.025); white-space:nowrap; transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.hp-partners .pbadge:hover{ background:rgba(255,255,255,.06); transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 60%, transparent); }
.hp-partners .pmark{ flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c) 22%, #1b1b2d); border:1px solid color-mix(in srgb, var(--c) 48%, transparent); }
.hp-partners .pini{ font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.02em; color:color-mix(in srgb, var(--c) 70%, #ffffff); }
.hp-partners .pname{ font-family:var(--sans); font-size:16px; font-weight:var(--fw-etichetta); letter-spacing:.01em; color:rgba(255,255,255,.92); line-height:1; }
/* badge con logo reale: targa bianca per il marchio + nome nella nostra tipografia
   (i marchi Google/Meta/Shopify/Klaviyo non si possono invertire in bianco: vanno su fondo chiaro) */
.hp-partners .pbadge.has-logo .pmark{ flex:none; width:auto; min-width:42px; height:42px; padding:7px 11px; border-radius:11px; background:#fff; border:1px solid rgba(255,255,255,.55); box-shadow:0 6px 16px -12px rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; }
.hp-partners .pbadge.has-logo .pini{ display:none; }
/* accento per badge: il colore non sta piu' in uno style inline (blocchi core validi) */
.hp-partners .pbadge{ --c:#8A8A88; }
.hp-partners .logo-track > .pbadge:nth-child(7n+1){ --c:#4285F4; }
.hp-partners .logo-track > .pbadge:nth-child(7n+2){ --c:#0866FF; }
.hp-partners .logo-track > .pbadge:nth-child(7n+3){ --c:#7ED957; }
.hp-partners .logo-track > .pbadge:nth-child(7n+4){ --c:#7ED957; }
.hp-partners .logo-track > .pbadge:nth-child(7n+5){ --c:#F5B820; }
.hp-partners .logo-track > .pbadge:nth-child(7n+6){ --c:#45B5E5; }
.hp-partners .logo-track > .pbadge:nth-child(7n){ --c:#DF0067; }
.hp-partners .pmark, .hp-partners .pname{ margin:0; }
.hp-partners .pbadge.has-logo .pmark img{ display:block; height:100%; width:auto; max-width:132px; object-fit:contain; }
@media (max-width:620px){ .hp-partners{ padding:28px 0 32px; } }
@media (prefers-reduced-motion:reduce){ .hp-partners .logo-track{ animation:none; } }

/* ── Pagine legali (privacy, cookie, accessibilità) ─────────────────────────
   Testo lungo da leggere davvero: colonna stretta, gerarchia chiara, tabella
   leggibile. Aggiunto 2026-09-13 con la pagina /privacy/. */
/* 2026-09-14: la colonna stretta delle pagine legali non ha mai funzionato. `.legal .wrap` (0,2,0) perdeva
   contro `.wp-block-group.wrap{max-width:1400px}` di kom-gutenberg.css, stessa specificità ma caricato dopo:
   privacy e accessibilità uscivano a 1400px, cioè righe lunghissime su un testo da leggere davvero.
   Basta alzare la specificità a (0,3,0). */
.legal .wrap, .legal .wp-block-group.wrap { max-width: 820px; }
.legal-body > * + * { margin-top: 18px; }
.legal-body p,
.legal-body li { font-size: var(--fs-testo); line-height: 1.65; color: var(--ink); }
.legal-body h2 {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-titolo, 700);
  line-height: 1.2; letter-spacing: -.015em; margin-top: 56px;
  padding-top: 24px; border-top: 1px solid var(--rule); scroll-margin-top: 120px;
}
.legal-body h3 {
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 600;
  line-height: 1.3; margin-top: 32px; color: var(--ink); scroll-margin-top: 120px;
}
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li + li { margin-top: 10px; }
.legal-body a { color: var(--magenta); text-underline-offset: 3px; }

.legal-indice { background: var(--soft); padding: 24px 28px; border-left: 3px solid var(--magenta); }
.legal-indice ol { margin: 12px 0 0; padding-left: 20px; }
.legal-indice li { font-size: var(--fs-testo-s); }
.legal-indice li + li { margin-top: 6px; }

.legal-box { background: var(--soft); padding: 22px 26px; border: 1px solid var(--rule); }
.legal-box p { margin: 0; font-size: var(--fs-testo-s); line-height: 1.6; }

.legal-body .wp-block-table { margin: 24px 0 0; overflow-x: auto; }
.legal-body .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-testo-s); }
.legal-body .wp-block-table th,
.legal-body .wp-block-table td { padding: 12px 14px; border: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.5; }
.legal-body .wp-block-table th { background: var(--soft); font-weight: 600; }

@media (max-width: 620px) {
  .legal-body h2 { margin-top: 40px; }
  .legal-indice, .legal-box { padding: 18px 20px; }
}

/* ============================================================
   FORM HUBSPOT su banda blu notte — sezione .sec-form-hs
   (Contatti, deciso 2026-09-14). Il contenitore .hs-kom arriva
   dallo shortcode kom_form_hubspot (inc/komlab-hubspot.php).
   ATTENZIONE: il form vive dentro un <iframe> di HubSpot, quindi
   i CAMPI non si stilano da qui: il loro foglio è
   assets/css/kom-hsform.css, iniettato nell'iframe dal JS.
   Qui c'è solo la banda, la colonna di testo e il contenitore.
   ============================================================ */
.sec-form-hs{ background:#11152d; color:var(--paper); border-top:0; }
.sec-form-hs .fhs{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,4.6vw,78px); align-items:start; }
.sec-form-hs .sec-intro{ color:var(--yellow); letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px; }
.sec-form-hs h2{ color:var(--paper); font-size:var(--fs-titolo); max-width:17ch; text-wrap:balance; }
.sec-form-hs h2 .it{ font-style:italic; font-weight:var(--fw-sottile); color:rgba(255,255,255,.86); }
.sec-form-hs .fhs-lead{ color:#c3c7d8; font-size:var(--fs-lead); line-height:1.55; margin:20px 0 0; max-width:44ch; }
.sec-form-hs .fhs-punti{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid rgba(255,255,255,.15); }
.sec-form-hs .fhs-punti li{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.15); font-size:var(--fs-testo); line-height:1.5; color:rgba(255,255,255,.86); }
.sec-form-hs .fhs-punti li::before{ content:"\2192"; color:var(--magenta); flex:none; }
.sec-form-hs .fhs-form{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:clamp(22px,2.6vw,38px); }

/* attesa: il contenitore tiene l'altezza e l'iframe si mostra solo
   quando ha addosso il nostro CSS (niente lampo stile HubSpot) */
.hs-kom:not(.is-pronto){ min-height:360px; }
.hs-kom:not(.is-pronto)::before{ content:"Carico il modulo\2026"; display:block; font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.hs-kom iframe{ display:block; width:100%; border:0; opacity:0; transition:opacity .25s ease; }
.hs-kom.is-vestito iframe{ opacity:1; }
.hs-kom__noscript{ font-size:var(--fs-testo); line-height:1.6; color:rgba(255,255,255,.86); margin:0; }
.hs-kom__noscript a{ color:var(--paper); }

@media (max-width:980px){
  .sec-form-hs .fhs{ grid-template-columns:1fr; gap:34px; }
  .sec-form-hs h2{ max-width:none; }
  .sec-form-hs .fhs-lead{ max-width:none; }
}

/* bottone che rimanda al form in cima (sostituisce il mini-form finto
   della sezione «Percorso 1 · L'analisi» di Contatti, 2026-09-14) */
.wp-block-buttons.cta-su{ margin-top:26px; }