/* Incatasciato & Partners — «Pietra, luce e tratto» (Sito Web Codice/Design/DIREZIONE.md, 03/10/2026)
   Struttura, testi e logo del sito approvato (deploy b1e90941); grafica e movimento nuovi.
   Da 768 px: la composizione del design a misura reale (--c = 1/752 del contenitore, --k = 1 px a 1440).
   Sotto 768 px: telefono, coi soli pezzi della landing.
   Ogni stato nascosto e ogni animazione sta sotto .js E dentro (prefers-reduced-motion: no-preference):
   con JavaScript spento o con «riduci movimento» il sito è visibile e fermo per costruzione.

   0 font · 1 token · 2 base · 3 componenti (telefono) · 4 da 768 px · 5 pagine interne · 6 materia
   (grana, luce, trama) · 7 grafica nuova · 8 movimento · 9 telefono · 10 riduci movimento e stampa */

/* ═══════════════ 0 · FONT (Lato servito dal sito) ═══════════════ */
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/lato-300-latin.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lato-400-latin.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/lato-700-latin.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/lato-900-latin.woff2) format("woff2")}

/* ═══════════════ 1 · TOKEN ═══════════════
   Colori: solo #hex del design approvato e dei token del kit (05-guida-claude/design-tokens). */
:root{
  --fondo:#FDFDFD;          /* pagina */
  --superficie:#FEFEFE;     /* fascia competenze, voci FAQ */
  --pannello:#F0F1F1;       /* schede servizi, pannello FAQ */
  --grafite:#33383D;        /* hero, banda «Come funziona» */
  --grafite-medio:#585E63;  /* pulsanti scuri, cerchi */
  --pietra:#DCD7CF;         /* pulsante chiaro, luce */
  --pietra-linea:#D5CFC5;   /* lineette */
  --inchiostro:#1F252C;     /* titoli */
  --testo:#5E6369;          /* testo corrente */
  --testo-tenue:#62676D;    /* testi secondari («muted» del kit, AA) */
  --linea:#E5E6E8;          /* filetti chiari */
  --linea-scura:#8C8F91;    /* filetto sulla banda grafite */
  --chiaro:#DADBDD;         /* testo chiaro su grafite */
  --bianco:#FFFFFF;
  /* dal kit */
  --notte:#292F34;          /* graphite */
  --inchiostro-kit:#24272B; /* ink */
  --azione:#4A5055;         /* action */
  --pannello-scuro:#51585E; /* contactPanel */
  --pietra-calda:#DEDAD1;   /* stone */
  --tela:#FCFCFB;           /* canvas */
  --muto:#62676D;           /* muted */
  --filetto:#D7D9DA;        /* line */
  --piastrella:#F2F3F2;     /* surface: il fondo dei simboli del kit */
  --pietra-chiara:#F3F2EF;  /* tono «pietra» della pagina */
  /* ombre (trasparenze) */
  --ombra-scheda:0 6px 22px rgba(36,39,43,.08);
  --ombra-su:0 2px 6px rgba(36,39,43,.06),0 24px 48px -18px rgba(36,39,43,.28);
  /* movimento */
  --e-posa:cubic-bezier(.16,1,.3,1);
  --e-sipario:cubic-bezier(.77,0,.175,1);
  --e-tratto:cubic-bezier(.65,0,.35,1);
  --e-morbida:cubic-bezier(.22,.61,.36,1);
  --e-via:cubic-bezier(.55,0,1,.45);
  --e-respiro:cubic-bezier(.37,0,.63,1);
  --e-molla:cubic-bezier(.34,1.2,.64,1);
  --t-micro:160ms;--t-breve:300ms;--t-media:600ms;--t-lunga:900ms;--t-sipario:1200ms;
  --t-tratto:1100ms;--t-segno:2000ms;
  --d-su:24px;--d-scheda:32px;--passo-parola:40ms;--passo-voce:60ms;
}
/* materia: tessere SVG in data-URI (grana e trama «tre ambiti» del kit, 04-simboli/pattern-tre-ambiti.svg) */
html{
  --grana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --trama-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M15 100V20h35M70 20a40 40 0 0 1 0 80M15 60h90' fill='none' stroke='%23fff' stroke-opacity='.08'/%3E%3C/svg%3E");
  --trama-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M15 100V20h35M70 20a40 40 0 0 1 0 80M15 60h90' fill='none' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E");
  --trama-p:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M15 100V20h35M70 20a40 40 0 0 1 0 80M15 60h90' fill='none' stroke='%23fff' stroke-opacity='.05'/%3E%3C/svg%3E");
  --trama-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M15 100V20h35M70 20a40 40 0 0 1 0 80M15 60h90' fill='none' stroke='%23292F34' stroke-opacity='.08'/%3E%3C/svg%3E");
}
@media (max-width:767px){
  :root{--d-su:16px;--d-scheda:20px;--passo-parola:35ms;--passo-voce:50ms}
}

/* ═══════════════ 2 · BASE ═══════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--grafite);outline-offset:3px;box-shadow:0 0 0 5px rgba(220,215,207,.6);border-radius:4px}
:is(.hero__scheda,.passi,.contatto) :focus-visible{outline-color:var(--pietra);box-shadow:0 0 0 5px rgba(220,215,207,.22)}
[id]{scroll-margin-top:80px}
.salta{position:absolute;left:12px;top:-60px;z-index:100;background:var(--grafite);color:var(--bianco);padding:10px 14px;border-radius:6px;font-weight:700}
.salta:focus{top:12px}
.a-capo{display:none}
h1,h2,h3,.scheda__titolo,.domanda__btn{text-wrap:balance}
p,li{text-wrap:pretty}
.intero,a[href^="tel:"]{white-space:nowrap}
main :is(p,li)>strong{color:var(--inchiostro);background:linear-gradient(rgba(220,215,207,.55),rgba(220,215,207,.55)) 0 88%/100% 38% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* parole e cifre divise (h1 nell'HTML, h2 e numeri dal JS): stesso testo, stesse righe */
[data-parola],[data-parola]>span,[data-cifra]{display:inline-block}

/* ═══════════════ 3 · COMPONENTI (telefono) ═══════════════ */
.occhiello{display:flex;align-items:center;font-weight:700;font-size:12.5px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#686D73}
.occhiello--chiaro{color:#D0D2D4}
.occhiello__linea{flex:none;display:block;width:40px;height:2px;margin-right:12px;background:var(--pietra-linea)}
.titolo-sezione{font-weight:900;color:var(--inchiostro);letter-spacing:-.01em}

/* pulsanti: magnete (translate), lama (::after), riempimento (::before), pressione (transform) */
.bottone{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;white-space:nowrap;font-weight:700;line-height:1;border-radius:7px;translate:var(--tira-x,0px) var(--tira-y,0px);transition:background-color .3s var(--e-morbida),color .3s var(--e-morbida),border-color .3s var(--e-morbida)}
.bottone .freccia{flex:none;width:18px;height:18px}
.bottone--grafite{background:var(--grafite-medio);color:var(--bianco)}
.bottone--grafite:hover{background:var(--notte)}
.bottone--pietra{background:var(--pietra);color:#2F3337}
.bottone--pietra:hover{background:var(--bianco)}
.bottone--bordo{border:1.5px solid rgba(255,255,255,.85);color:var(--bianco)}
.bottone--bordo::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.12);scale:0 1;transform-origin:left center}
.bottone--bordo:hover::before{scale:1 1}
.bottone:active{transform:scale(.98)}
.numero{display:flex;align-items:center;font-weight:300;color:#43484D;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.numero__linea{display:block;height:2px;background:var(--pietra-linea);transform-origin:left center}
.numero--chiaro{color:#EFE9E2}
.numero--chiaro .numero__linea{background:var(--pietra)}
.ico-pieno path{fill:currentColor}

/* ─── testata: ferma in alto, opaca (il logo ha il fondo #FEFEFE) ─── */
.testata{position:sticky;top:0;z-index:40;background:var(--fondo);transition:box-shadow .3s var(--e-morbida)}
.testata.is-staccata{box-shadow:0 1px 0 var(--filetto),0 8px 24px -16px rgba(36,39,43,.18)}
.testata__in{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.testata__logo img{width:140px}
.testata__menu{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:8px;color:var(--inchiostro)}
.testata__menu svg{width:26px;height:26px}
.testata__menu .ico-chiudi{display:none}
.testata__menu[aria-expanded="true"] .ico-apri{display:none}
.testata__menu[aria-expanded="true"] .ico-chiudi{display:block}
.testata__nav{display:none;position:absolute;left:12px;right:12px;top:100%;padding:10px 18px 18px;background:var(--superficie);border-radius:14px;box-shadow:var(--ombra-scheda)}
.testata__nav.aperto{display:block}
.testata__nav a:not(.bottone){display:block;padding:13px 0;font-size:18px;color:var(--inchiostro);border-bottom:1px solid var(--linea)}
.testata__cta{width:100%;height:52px;margin-top:16px;font-size:17px}

/* ─── hero ─── */
.hero{padding:0 12px}
.hero__scheda{position:relative;overflow:hidden;overflow:clip;isolation:isolate;border-radius:16px;background:var(--grafite);color:var(--bianco)}
.hero__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:74% 40%}
.hero__testo{position:relative;z-index:2;padding:26px 20px 30px}
.hero .occhiello{font-size:11.5px;letter-spacing:.1em}
.hero .occhiello__linea{width:28px;margin-right:10px}
.hero__titolo{margin-top:0;font-weight:900;font-size:31px;line-height:1.06;letter-spacing:-.012em;color:#FEFEFE}
.hero__sotto{margin-top:14px;font-size:19px;line-height:1.35;color:var(--chiaro)}
.hero__azioni{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.hero__azioni .bottone{height:52px;font-size:17px}
.hero__telefono{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:21px;color:#F2F2F2}
.hero__telefono svg{width:24px;height:24px}

/* ─── fascia delle icone: carta bianca, icone sulla piastrella dei simboli del kit ─── */
.ambiti{position:relative;z-index:3;margin:-16px 10px 0;padding:4px 18px;background:var(--superficie);border-radius:16px;box-shadow:var(--ombra-scheda),0 1px 2px rgba(36,39,43,.04)}
.ambiti li{position:relative}
.ambiti li+li{border-top:1px solid var(--linea)}
.ambiti__voce{display:flex;align-items:center;gap:16px;padding:14px 0;color:#1E242B;transition:color .2s ease}
.ambiti__voce svg{flex:none;width:38px;height:38px;padding:7px;stroke-width:1.25;color:var(--notte);background:var(--piastrella) linear-gradient(var(--notte),var(--notte)) 50% 100%/100% 0 no-repeat;border-radius:20%;transition:color .3s var(--e-morbida),background-size .32s var(--e-morbida)}
.ambiti__voce strong{display:block;font-size:17px;line-height:1.25;color:#2C3137;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--e-morbida)}
.ambiti__voce strong+span{display:block;font-size:15px;line-height:1.3;color:var(--testo-tenue)}

/* ─── servizi e schede ─── */
.servizi{padding:52px 12px 0}
.servizi__testa{padding:0 4px}
.servizi__titolo{margin-top:10px;font-size:30px;line-height:1.08}
.servizi__intro{margin-top:14px;font-size:17px;line-height:1.5;color:var(--testo)}
.servizi__intro p+p{margin-top:8px}
.servizi__griglia{display:grid;gap:14px;margin-top:26px}
.servizi__colonna{display:grid;gap:14px}
.scheda{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;overflow:clip;border-radius:16px;background:var(--pannello);box-shadow:inset 0 0 0 1px rgba(41,47,52,.05)}
.scheda__foto{order:-1;position:relative;overflow:hidden;overflow:clip}
.scheda__foto img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.scheda--alta .scheda__foto img{object-position:60% 35%}
.scheda--2 .scheda__foto img{object-position:72% 60%}
.scheda--3 .scheda__foto img{object-position:55% 50%}
.scheda__testo{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;padding:22px 20px 22px}
.scheda .numero{font-size:30px}
.scheda .numero__linea{width:44px;margin-left:16px}
.scheda__titolo{margin-top:10px;font-size:25px;line-height:1.15;font-weight:700;color:#1A212A;letter-spacing:-.01em}
.scheda__sotto{margin-top:6px;font-size:17px;line-height:1.35;color:var(--testo)}
.scheda__voci{margin-top:12px;font-size:16px;line-height:1.45;color:var(--testo)}
.scheda__voci li+li{margin-top:3px}
.scheda__nota{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--testo)}
.scheda__link{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:16px;font-weight:700;color:#4E5358}
.scheda__link>span:first-child{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .3s var(--e-morbida)}
.cerchio{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--grafite-medio);color:var(--bianco);translate:var(--tira-x,0px) var(--tira-y,0px);transition:background-color .3s var(--e-morbida)}
.cerchio svg{width:20px;height:20px}
.scheda__link:hover .cerchio{background:var(--notte)}

/* ─── banda grafite «come funziona» ─── */
.passi{margin-top:48px;background:var(--grafite);color:var(--bianco)}
.passi__in{padding:40px 20px 36px}
.passi__titolo{margin-top:10px;font-size:30px;line-height:1.1;color:#FAFAFA}
.passi__lista{position:relative;display:grid;gap:24px;margin-top:18px;padding-top:24px;border-top:1px solid var(--linea-scura)}
.passo .numero{font-size:34px}
.passo .numero__linea{width:56px;margin-left:20px}
.passo__titolo{margin-top:12px;font-size:19px;line-height:1.4;font-weight:400;color:#E8E9EA}
.passo__titolo a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .3s var(--e-morbida),text-decoration-thickness .3s var(--e-morbida)}
.passo__titolo a:hover,.passo__titolo a:focus-visible{text-decoration-color:currentColor;text-decoration-thickness:2px}
.passo__testo{margin-top:4px;font-size:16.5px;line-height:1.45;color:#A3A6AA}

/* ─── lo studio ─── */
.studio{position:relative;overflow:hidden;overflow:clip;display:grid;gap:26px;padding:48px 16px 0}
.studio__testo{position:relative;isolation:isolate}
.studio__titolo{margin-top:10px;font-size:32px;line-height:1.08}
.studio__par{margin-top:14px;font-size:17px;line-height:1.5;color:var(--testo)}
.studio__par+.studio__par{margin-top:12px}
.studio__bottone{height:52px;padding:0 22px;margin-top:22px;font-size:17px;font-weight:400}
.studio__nota{margin-top:12px;font-size:13.5px;line-height:1.4;color:var(--muto)}
.studio__foto{position:relative;overflow:hidden;overflow:clip;border-radius:14px}
.studio__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:62% 50%}

/* ─── domande ─── */
.domande{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:grid;gap:20px;margin:44px 12px 0;padding:28px 14px 16px;background:var(--pannello);border-radius:16px}
.domande__testa{padding:0 4px}
.domande__titolo{margin-top:10px;font-size:32px;line-height:1.08}
.domande__lista{display:grid;gap:8px}
.domanda{position:relative;background:var(--superficie);border-radius:8px;box-shadow:0 1px 2px rgba(36,39,43,.04);transition:background-color .3s var(--e-morbida),box-shadow .42s var(--e-morbida)}
.domanda h3{font-size:inherit;font-weight:inherit}
.domanda__btn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:54px;padding:12px 14px 12px 16px;text-align:left;font-size:16px;line-height:1.3;color:#3F4449;transition:color .3s var(--e-morbida)}
.domanda.aperta{background:var(--bianco);box-shadow:var(--ombra-scheda)}
.domanda.aperta .domanda__btn{font-weight:700;color:#2B2F33}
.domanda__piu{flex:none;width:20px;height:20px;color:#52575F;overflow:visible}
.domanda__risposta{display:grid;grid-template-rows:1fr;padding:0 16px 16px;font-size:15px;line-height:1.45;color:var(--muto)}
.domanda__risposta>p{min-height:0;overflow:hidden}
.domanda__risposta[hidden]{display:none}
html:not(.js) .domanda__risposta[hidden]{display:grid}

/* ─── contatto ─── */
.contatto{position:relative;isolation:isolate;overflow:hidden;overflow:clip;display:grid;margin:16px 12px 0;padding:30px 20px;background:var(--grana) 0 0/160px,linear-gradient(180deg,var(--azione) 0%,var(--pannello-scuro) 45%);border-radius:16px;color:var(--bianco)}
.contatto__sx,.contatto__dx{position:relative;z-index:1}
.contatto__titolo{font-size:32px;line-height:1.08;color:var(--bianco)}
.contatto__sotto{margin-top:12px;font-size:17px;line-height:1.4;color:#F4F5F6}
.contatto__dx{display:flex;flex-direction:column;align-items:flex-start;margin-top:24px;padding-top:24px;border-top:1px solid transparent}
.contatto__dx::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(255,255,255,.35);transform-origin:left center}
.contatto__azioni{display:flex;flex-direction:column;gap:10px;width:100%}
.contatto__wa{width:100%;height:52px;font-size:17px}
.contatto__riga{display:flex;align-items:center;gap:12px;color:#F4F5F6}
.contatto__tel{position:relative;margin-top:20px;font-size:22px;background:linear-gradient(currentColor,currentColor) 36px 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .3s var(--e-morbida),color .3s var(--e-morbida)}
.contatto__tel:hover{background-size:calc(100% - 36px) 1px}
.contatto__tel svg{width:24px;height:24px;overflow:visible}
.contatto__tel::before,.contatto__tel::after{content:"";position:absolute;left:0;top:50%;width:24px;height:24px;margin-top:-13.5px;border:1px solid var(--pietra);border-radius:50%;opacity:0;pointer-events:none}
.contatto__sede{align-items:flex-start;margin-top:14px;font-size:16px;line-height:1.45;color:#F4F5F6}
.contatto__sede svg{flex:none;width:26px;height:26px;color:#F4F5F6;overflow:visible}
.ico-pin path{fill:currentColor}
.ico-pin circle{fill:var(--pannello-scuro);stroke:var(--pannello-scuro)}
.contatto__riga:hover{color:var(--bianco)}

/* ─── piè di pagina (niente si nasconde mai) ─── */
.piede{padding:30px 16px 84px}
.piede__su{display:grid;gap:14px}
.piede__logo img{width:150px}
.piede__motto{font-size:15px;line-height:1.5;color:var(--muto)}
.piede__motto strong{color:var(--inchiostro)}
.piede__nav ul{display:flex;flex-wrap:wrap;gap:6px 22px}
.piede__nav a{font-size:15.5px;color:var(--muto);padding:6px 0;display:inline-block;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 1px no-repeat;transition:background-size .3s var(--e-morbida),color .3s var(--e-morbida)}
.piede__nav a:hover{background-size:100% 1px}
.piede__giu{position:relative;display:grid;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid transparent;font-size:13.5px;line-height:1.5;color:var(--muto)}
.piede__giu::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--filetto);transform-origin:50% 50%}
.piede__dati p+p,.piede__legali p+p{margin-top:4px}
.piede__riserve{margin-top:10px!important}
.piede__giu a{text-decoration:underline;text-decoration-color:var(--filetto);text-underline-offset:2px;transition:text-decoration-color .3s var(--e-morbida),color .3s var(--e-morbida)}
.piede__giu a:hover{text-decoration-color:var(--inchiostro)}
.piede__firma{margin-top:16px;font-size:13.5px;color:var(--muto)}
.piede__firma a{color:var(--inchiostro);text-decoration:underline;text-underline-offset:2px}
.piede__giu .sep{margin:0 .55em}
.piede a:hover{color:var(--inchiostro)}

/* ─── banner cookie: una riga ─── */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 14px;font-size:12.5px;line-height:1.35;background:var(--fondo);border-top:1px solid var(--linea);color:var(--testo);opacity:.97;transition:opacity .2s var(--e-via)}
.cookie[hidden]{display:none}
.cookie p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cookie a{text-decoration:underline;text-underline-offset:2px}
.cookie__x{flex:none;font-size:20px;line-height:1;opacity:.6;padding:2px 6px}
.cookie__x:hover{opacity:1}
@media (max-width:600px){.cookie__lungo{display:none}}

/* ─── pagine interne: solo i pezzi (e le classi) della landing, adattati dal contenuto ─── */
.hero__sotto+.hero__sotto{margin-top:8px}
.hero__sotto a,.contatto__sotto a,.domande__lista>p a,.domanda__risposta a,.domande__lista a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(127,127,127,.6);transition:text-decoration-color .3s var(--e-morbida),text-decoration-thickness .3s var(--e-morbida)}
.hero__sotto a:hover,.contatto__sotto a:hover,.domande__lista a:hover,.domanda__risposta a:hover,
.hero__sotto a:focus-visible,.contatto__sotto a:focus-visible,.domande__lista a:focus-visible,.domanda__risposta a:focus-visible{text-decoration-color:currentColor;text-decoration-thickness:2px}
.testata__nav a[aria-current="page"],.piede__nav a[aria-current="page"]{color:var(--inchiostro);font-weight:700}
/* la fascia con le icone dentro una sezione (in home sta a cavallo della hero) */
.servizi .ambiti{margin:22px 0 0}
.ambiti__voce>span{display:block;font-size:16.5px;line-height:1.4;color:#2C3137;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s var(--e-morbida)}
@media (max-width:767px){.ambiti__voce:has(>span strong){flex-direction:column;align-items:flex-start;gap:10px}}
/* testo sotto una fascia o una griglia: la colonna di testo della testata */
.servizi>.servizi__intro{margin-top:18px;padding:0 4px}
.servizi__intro p:has(>.scheda__link){display:flex;flex-wrap:wrap;gap:12px 28px}
/* schede senza foto: l'icona sulla piastrella */
.scheda:not(:has(.scheda__foto)) .scheda__testo{padding:24px 20px}
.scheda__testo>svg:not([data-segno]){width:40px;height:40px;padding:6px;stroke-width:1.25;color:var(--notte);background:var(--superficie);border-radius:20%;margin-bottom:12px;box-shadow:0 1px 2px rgba(36,39,43,.05)}
.scheda .studio__par{margin-top:10px;font-size:16.5px;line-height:1.55}
.scheda__nota strong{color:var(--inchiostro)}
/* introduzione nella banda grafite e linea del tempo (quattro date al posto dei numeri) */
.passi .contatto__sotto{margin-top:12px;color:var(--chiaro)}
.passi__lista:has(>li:nth-child(4)) .numero{font-size:26px}
.passi__lista:has(>li:nth-child(4)) .numero__linea{display:none}
/* il pannello grigio con un testo al posto delle domande */
.domande__lista>p{font-size:16.5px;line-height:1.6;color:var(--testo)}
.domande__lista>ul{padding-left:20px;list-style:none;font-size:16.5px;line-height:1.55;color:var(--testo)}
.domande__lista>ul li{position:relative}
.domande__lista>ul li::before{content:"";position:absolute;left:-16px;top:.78em;width:10px;height:2px;background:var(--pietra-linea);transform-origin:left center}
.domande__lista>ul li+li{margin-top:4px}
.studio .scheda__voci{margin-top:12px;font-size:16.5px;line-height:1.5}
.contatto__sotto+.contatto__sotto{margin-top:10px}
.contatto .scheda__link{margin-top:20px;color:#F4F5F6}
.contatto .scheda__link .cerchio{background:var(--pietra);color:#2F3337}
.contatto .scheda__link:hover .cerchio{background:var(--bianco)}
.contatto__dx>.contatto__azioni:only-child{margin-top:0}
/* il logo al posto della foto */
.studio__foto:has(img[src*="/logo-"]){display:flex;align-items:center;justify-content:center;padding:34px 24px;background:var(--superficie);box-shadow:var(--ombra-scheda)}
.studio__foto img[src*="/logo-"]{width:82%;aspect-ratio:auto;object-fit:contain}

/* ═══════════════ 4 · DA 768 PX: LA COMPOSIZIONE DEL DESIGN, A MISURA REALE ═══════════════ */
@media (min-width:768px){
  :root{
    --margine:clamp(24px,2.78vw,64px);
    --c:calc(min(1360px, 100vw - 2 * var(--margine)) / 752);
    --k:clamp(.75px,.06945vw,1px);
  }
  body{font-size:max(16px,calc(17 * var(--k)))}
  [id]{scroll-margin-top:104px}

  .occhiello{font-size:max(12px,calc(13 * var(--k)));line-height:1.2;letter-spacing:.18em}
  .occhiello__linea{width:calc(48 * var(--k));height:2px;margin-right:calc(14 * var(--k))}
  .titolo-sezione{letter-spacing:-.018em}
  .bottone{border-radius:7px;gap:0}
  .bottone .freccia{width:calc(17 * var(--k));height:calc(17 * var(--k));margin-left:calc(12 * var(--k))}

  /* testata */
  .testata__in{max-width:calc(752 * var(--c));height:calc(88 * var(--k));margin:0 auto;padding:0 calc(6 * var(--c)) 0 calc(21.5 * var(--c))}
  .testata__logo img{width:calc(220 * var(--k))}
  .testata__menu{display:none}
  .testata__nav{display:flex;align-items:center;position:static;padding:0;background:none;border-radius:0;box-shadow:none}
  .testata__nav ul{display:flex;gap:calc(34 * var(--k))}
  .testata__nav a:not(.bottone){padding:0;border:0;font-size:max(14px,calc(15.5 * var(--k)));line-height:1.2;color:#6B7076;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:4px;transition:color .2s ease,background-size .3s var(--e-morbida)}
  .testata__nav a:not(.bottone):hover{color:var(--inchiostro);background-size:100% 1.5px}
  .testata__nav a[aria-current="page"]:not(.bottone){background-size:100% 1.5px}
  .testata__cta{width:auto;height:calc(46 * var(--k));margin:0 0 0 calc(32 * var(--k));padding:0 calc(20 * var(--k));font-size:max(14px,calc(15.5 * var(--k)))}
  .testata__cta .freccia{width:calc(15 * var(--k));height:calc(15 * var(--k));margin-left:calc(10 * var(--k))}

  /* hero: riquadro e foto come nel design (765 × 371); velo largo il 120% (scivola all'entrata) */
  .hero{max-width:calc(765 * var(--c));margin:0 auto;padding:0}
  .hero__scheda{display:flex;align-items:center;min-height:calc(371 * var(--c));border-radius:calc(16 * var(--k))}
  .hero__foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:50% 33%}
  .hero__scheda::before{content:"";position:absolute;inset:0 0 0 -20%;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(41,47,52,.95) 0 16.7%,rgba(41,47,52,.93) 50%,rgba(41,47,52,.6) 57.5%,rgba(41,47,52,.15) 65%,rgba(41,47,52,0) 70%)}
  .hero__testo{max-width:calc(38.5 * var(--c) + 700 * var(--k));padding:calc(48 * var(--k)) 0 calc(88 * var(--k)) calc(38.5 * var(--c))}
  .hero .occhiello{color:#E6E7E8;letter-spacing:.16em}
  .hero .occhiello__linea{width:calc(48 * var(--k));margin-right:calc(14 * var(--k))}
  .hero__titolo{margin:0;font-size:max(40px,calc(56 * var(--k)));line-height:1.02;letter-spacing:-.02em}
  .hero__sotto{margin-top:calc(20 * var(--k));font-size:max(17px,calc(20 * var(--k)));line-height:1.5}
  .hero__azioni{flex-direction:row;flex-wrap:wrap;gap:calc(14 * var(--k));margin-top:calc(30 * var(--k))}
  .hero__azioni .bottone{height:max(44px,calc(50 * var(--k)));padding:0 calc(28 * var(--k));font-size:max(15px,calc(17 * var(--k)))}
  .hero__azioni .bottone--bordo{padding:0 calc(32 * var(--k))}
  .hero__telefono{gap:calc(12 * var(--k));margin:calc(24 * var(--k)) 0 0;font-size:max(17px,calc(21 * var(--k)));line-height:1.2}
  .hero__telefono svg{width:calc(24 * var(--k));height:calc(24 * var(--k))}

  /* fascia delle tre competenze, a cavallo del bordo della hero */
  .ambiti{display:grid;grid-template-columns:255fr 229fr 249fr;align-items:center;width:calc(733 * var(--c));max-width:none;height:calc(118 * var(--k));margin:calc(-40 * var(--k)) auto 0;padding:0;border-radius:calc(16 * var(--k))}
  .ambiti li{height:100%}
  .ambiti li+li{border:0}
  .ambiti__voce{height:100%;justify-content:center;gap:calc(18 * var(--k));padding:0}
  .ambiti li+li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:calc(56 * var(--k));margin-top:calc(-28 * var(--k));background:linear-gradient(transparent,#DADDE0,transparent)}
  .ambiti__voce svg{width:calc(64 * var(--k));height:calc(64 * var(--k));padding:calc(14 * var(--k))}
  .ambiti__voce strong{font-size:max(16px,calc(19 * var(--k)));line-height:1.25}
  .ambiti__voce strong+span{margin-top:calc(3 * var(--k));font-size:max(14px,calc(16 * var(--k)));line-height:1.3}

  /* servizi: colonne 329/406, righe 179/197 e riquadri delle foto del design */
  .servizi{max-width:calc(752 * var(--c));margin:0 auto;padding:calc(56 * var(--k)) 0 0}
  .servizi__testa{display:grid;grid-template-columns:1fr auto;align-items:end;gap:calc(40 * var(--k));padding:0 calc(19 * var(--c)) 0 calc(18 * var(--c))}
  .servizi__titolo{margin-top:calc(12 * var(--k));font-size:max(34px,calc(48 * var(--k)));line-height:1.06;max-width:calc(720 * var(--k))}
  .servizi__intro{width:calc(440 * var(--k));margin:0 0 calc(4 * var(--k));font-size:max(16px,calc(18 * var(--k)));line-height:1.55}
  .servizi__intro p+p{margin-top:calc(10 * var(--k))}
  .servizi__griglia{grid-template-columns:329fr 406fr;gap:calc(10 * var(--c)) calc(17 * var(--c));margin-top:calc(32 * var(--k));padding:0}
  .servizi__colonna{grid-template-rows:minmax(calc(179 * var(--c)),auto) minmax(calc(197 * var(--c)),auto);gap:calc(10 * var(--c))}
  .scheda{border-radius:calc(16 * var(--k))}
  .scheda__foto{order:0}
  /* riquadro delle foto scelto sul design: solo ritaglio (cover + posizione + zoom), foto intere del kit */
  .scheda__foto img,.studio__foto img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .scheda--alta .scheda__foto img{object-position:50% 58.3%;transform:scale(1.15);transform-origin:50% 58.3%}
  .scheda--2 .scheda__foto img{object-position:60% 60%;transform:scale(1.3);transform-origin:60% 60%}
  .scheda--3 .scheda__foto img{object-position:66.7% 83.3%;transform:scale(1.55);transform-origin:66.7% 83.3%}
  .scheda .numero{font-size:max(34px,calc(52 * var(--k)));line-height:1}
  .scheda .numero__linea{width:calc(48 * var(--k));height:2px;margin-left:calc(16 * var(--k))}
  .scheda__titolo{margin-top:calc(10 * var(--k));font-size:max(21px,calc(28 * var(--k)));line-height:1.15}
  .scheda__sotto{margin-top:calc(6 * var(--k));font-size:max(15px,calc(16.5 * var(--k)));line-height:1.4}
  .scheda__voci{margin-top:calc(14 * var(--k));font-size:max(14.5px,calc(16 * var(--k)));line-height:1.45}
  .scheda__voci li+li{margin-top:calc(4 * var(--k))}
  .scheda__nota{margin-top:calc(12 * var(--k));font-size:max(13.5px,calc(15 * var(--k)))}
  .scheda--larga .scheda__titolo{font-size:max(21px,calc(26 * var(--k)))}
  .scheda__link{gap:calc(14 * var(--k));margin-top:auto;padding-top:calc(18 * var(--k));font-size:max(14.5px,calc(16 * var(--k)));line-height:1.2}
  .cerchio{width:calc(40 * var(--k));height:calc(40 * var(--k))}
  .cerchio svg{width:calc(20 * var(--k));height:calc(20 * var(--k))}

  .scheda--alta{display:grid;grid-template-rows:minmax(calc(233 * var(--c)),1fr) auto}
  .scheda--alta .scheda__testo{padding:calc(28 * var(--k)) calc(19 * var(--c)) calc(24 * var(--k)) calc(29 * var(--c))}
  .scheda--alta .scheda__titolo{margin-top:calc(12 * var(--k));font-size:max(23px,calc(30 * var(--k)))}
  .scheda--alta .scheda__sotto{margin-top:calc(8 * var(--k));font-size:max(16px,calc(18 * var(--k)))}
  .scheda--alta .scheda__voci{margin-top:calc(10 * var(--k))}
  .scheda--alta .scheda__link{align-self:stretch;justify-content:space-between;padding-top:calc(16 * var(--k))}
  .scheda--alta .cerchio{width:calc(50 * var(--k));height:calc(50 * var(--k))}
  .scheda--alta .cerchio svg{width:calc(24 * var(--k));height:calc(24 * var(--k))}

  .scheda--larga{display:grid;grid-template-columns:180fr 226fr}
  .scheda--larga .scheda__testo{padding:calc(26 * var(--k)) calc(14 * var(--k)) calc(24 * var(--k)) calc(16 * var(--c))}

  /* come funziona */
  .passi{margin-top:calc(31 * var(--k))}
  .passi__in{max-width:calc(752 * var(--c));margin:0 auto;padding:calc(52 * var(--k)) calc(29.5 * var(--c)) calc(54 * var(--k)) calc(31 * var(--c))}
  .passi__titolo{margin-top:calc(12 * var(--k));font-size:max(32px,calc(48 * var(--k)));line-height:1.1}
  .passi__lista{grid-template-columns:repeat(3,1fr);gap:0 calc(48 * var(--k));margin-top:calc(22 * var(--k));padding-top:calc(30 * var(--k))}
  .passo{padding-right:calc(20 * var(--k))}
  .passo .numero{font-size:max(36px,calc(52 * var(--k)));line-height:1}
  .passo .numero__linea{width:calc(64 * var(--k));height:2px;margin-left:calc(20 * var(--k))}
  .passo__titolo{margin-top:calc(18 * var(--k));font-size:max(18px,calc(22 * var(--k)));line-height:1.4}
  .passo__testo{margin-top:calc(6 * var(--k));font-size:max(15px,calc(18 * var(--k)));line-height:1.55}

  /* lo studio: foto 379 × 270 del design a destra, finestra ad arco ribassato */
  .studio{max-width:calc(752 * var(--c));margin:calc(34 * var(--k)) auto 0;grid-template-columns:1fr calc(379.3 * var(--c));gap:calc(30 * var(--k));padding:0 calc(3.7 * var(--c)) 0 calc(18 * var(--c))}
  .studio__testo{padding-top:calc(18 * var(--k))}
  .studio__titolo{margin-top:calc(14 * var(--k));font-size:max(32px,calc(48 * var(--k)));line-height:1.08}
  .studio__par{margin-top:calc(20 * var(--k));font-size:max(16px,calc(18 * var(--k)));line-height:1.6}
  .studio__par+.studio__par{margin-top:calc(12 * var(--k))}
  .studio__bottone{height:max(44px,calc(50 * var(--k)));margin-top:calc(26 * var(--k));padding:0 calc(26 * var(--k));font-size:max(15px,calc(17 * var(--k)))}
  .studio__nota{margin-top:calc(14 * var(--k));font-size:max(13px,calc(14 * var(--k)));line-height:1.45}
  .studio__foto{height:calc(270.2 * var(--c));border-radius:calc(14 * var(--k))}
  .studio__foto img{object-position:83.3% 0}

  /* domande: titolo a sinistra, voci (488 parti) a destra */
  .domande{max-width:calc(751 * var(--c));grid-template-columns:1fr calc(488 * var(--c));gap:calc(24 * var(--k));margin:calc(36 * var(--k)) auto 0;padding:calc(24 * var(--k)) calc(12 * var(--c)) calc(24 * var(--k)) calc(20 * var(--c));border-radius:calc(16 * var(--k))}
  .domande__testa{padding:calc(14 * var(--k)) 0 0}
  .domande__titolo{margin-top:calc(12 * var(--k));font-size:max(34px,calc(48 * var(--k)));line-height:1.06}
  .domande__lista{gap:calc(8 * var(--k));align-content:start}
  .domanda{border-radius:calc(8 * var(--k));box-shadow:none}
  .domanda.aperta{box-shadow:var(--ombra-scheda)}
  .domanda__btn{min-height:0;height:max(46px,calc(52 * var(--k)));padding:0 calc(18 * var(--k)) 0 calc(19 * var(--c));font-size:max(15.5px,calc(17 * var(--k)));line-height:1.2}
  .domanda__piu{width:calc(20 * var(--k));height:calc(20 * var(--k))}
  .domanda__risposta{margin-top:calc(-6 * var(--k));padding:0 calc(18 * var(--k)) calc(18 * var(--k)) calc(19 * var(--c));font-size:max(15px,calc(16 * var(--k)));line-height:1.5}

  /* contatto */
  .contatto{max-width:calc(752 * var(--c));grid-template-columns:calc(419 * var(--c)) 1fr;align-items:center;margin:calc(18 * var(--k)) auto 0;padding:calc(40 * var(--k)) 0;border-radius:calc(16 * var(--k));background:var(--grana) 0 0/160px,linear-gradient(115deg,var(--azione) 0%,var(--pannello-scuro) 55%)}
  .contatto__sx{padding:0 calc(24 * var(--c)) 0 calc(25 * var(--c));border-right:1px solid transparent}
  .contatto__sx::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:1px;background:rgba(255,255,255,.35);transform-origin:50% 0}
  .contatto__titolo{font-size:max(32px,calc(48 * var(--k)));line-height:1.06}
  .contatto__sotto{margin-top:calc(14 * var(--k));font-size:max(17px,calc(19 * var(--k)))}
  .contatto__dx{margin:0;padding:0 0 0 calc(65 * var(--c));border:0}
  .contatto__dx::before{display:none}
  .contatto__azioni{flex-direction:row;flex-wrap:wrap;gap:calc(12 * var(--k))}
  .contatto__wa{width:auto;height:max(44px,calc(50 * var(--k)));padding:0 calc(28 * var(--k));font-size:max(15px,calc(17 * var(--k)))}
  .contatto__tel{gap:calc(14 * var(--k));margin:calc(22 * var(--k)) 0 0;font-size:max(19px,calc(24 * var(--k)));line-height:1.2;background-position:calc(40 * var(--k)) 100%}
  .contatto__tel:hover{background-size:calc(100% - 40 * var(--k)) 1px}
  .contatto__tel svg{width:calc(26 * var(--k));height:calc(26 * var(--k))}
  .contatto__tel::before,.contatto__tel::after{width:calc(26 * var(--k));height:calc(26 * var(--k));margin-top:calc(-14.5 * var(--k))}
  .contatto__sede{gap:calc(14 * var(--k));margin:calc(14 * var(--k)) 0 0;font-size:max(15.5px,calc(17 * var(--k)));line-height:1.5}
  .contatto__sede svg{width:calc(26 * var(--k));height:calc(26 * var(--k));margin-top:0}

  /* piè di pagina */
  .piede{max-width:calc(752 * var(--c));margin:0 auto;padding:calc(30 * var(--k)) calc(19 * var(--c)) calc(44 * var(--k)) calc(18.8 * var(--c))}
  .piede__su{grid-template-columns:auto 1fr;align-items:center;gap:calc(16 * var(--k)) calc(40 * var(--k))}
  .piede__nav{grid-column:1 / -1}
  .piede__logo img{width:calc(185 * var(--k))}
  .piede__motto{font-size:max(14px,calc(15 * var(--k)))}
  .piede__nav ul{flex-wrap:wrap;gap:calc(8 * var(--k)) calc(28 * var(--k))}
  .piede__nav a{padding:0 0 4px;font-size:max(14px,calc(15.5 * var(--k)))}
  .piede__nav a{background-position:0 100%}
  .piede__giu{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(40 * var(--k));margin-top:calc(26 * var(--k));padding-top:calc(22 * var(--k));font-size:max(13px,calc(14 * var(--k)));line-height:1.55}
  .piede__legali{text-align:right;flex:none}
  .piede__firma{margin-top:calc(18 * var(--k));font-size:max(13px,calc(14 * var(--k)))}
  .piede__giu .sep{margin:0 calc(10 * var(--k))}

  .cookie{font-size:13px}
}

/* da 1200 px: gli a capo del design */
@media (min-width:1200px){ .a-capo{display:inline} }
/* da 1360 px il piè di pagina sta su una riga: logo, società, menu */
@media (min-width:1360px){
  .piede__su{grid-template-columns:auto 1fr auto;gap:0 calc(32 * var(--k))}
  .piede__motto{white-space:nowrap}
  .piede__nav{grid-column:auto}
  .piede__nav ul{flex-wrap:nowrap;gap:calc(20 * var(--k))}
}
/* fra 768 e 1023 px le schede dei servizi vanno in colonna */
@media (min-width:768px) and (max-width:1023px){
  .servizi__griglia{grid-template-columns:1fr}
  .servizi__colonna{grid-template-rows:none}
  .scheda--alta{grid-template-rows:auto auto}
  .scheda--alta .scheda__foto{aspect-ratio:16/8}
  .scheda--larga{min-height:calc(300 * var(--k))}
  .servizi__testa{grid-template-columns:1fr}
  .hero__scheda::before{background:linear-gradient(90deg,rgba(41,47,52,.95) 0 16.7%,rgba(41,47,52,.92) 66.7%,rgba(41,47,52,.55) 76.7%,rgba(41,47,52,0) 88.3%)}
}
/* fra 768 e 1179 px le sei voci non stanno su una riga: menu compatto, come da telefono */
@media (min-width:768px) and (max-width:1179px){
  .testata__menu{display:flex}
  .testata__nav{display:none;position:absolute;left:var(--margine);right:var(--margine);top:100%;padding:10px 22px 22px;background:var(--superficie);border-radius:14px;box-shadow:var(--ombra-scheda)}
  .testata__nav.aperto{display:block}
  .testata__nav ul{display:block}
  .testata__nav a:not(.bottone){display:block;padding:14px 0;font-size:18px;color:var(--inchiostro);border-bottom:1px solid var(--linea);background:none}
  .testata__cta{width:100%;height:52px;margin:16px 0 0;font-size:17px}
}

/* ═══════════════ 5 · PAGINE INTERNE, DA 768 PX (le stesse classi, adattate dal contenuto) ═══════════════ */
@media (min-width:768px){
  .hero:not(:has(.ambiti)) .hero__testo{max-width:calc(38.5 * var(--c) + 600 * var(--k));padding-bottom:calc(48 * var(--k))}
  .hero:not(:has(.ambiti)) .hero__titolo{font-size:max(38px,calc(54 * var(--k)))}
  .hero:not(:has(.ambiti)) .hero__scheda::before{background:linear-gradient(90deg,rgba(41,47,52,.95) 0 16.7%,rgba(41,47,52,.9) 42.5%,rgba(41,47,52,.55) 50%,rgba(41,47,52,.12) 58.3%,rgba(41,47,52,0) 63.3%)}
  .hero__sotto+.hero__sotto{margin-top:calc(8 * var(--k))}
  .servizi .ambiti{width:auto;height:auto;margin:calc(28 * var(--k)) 0 0;padding:calc(26 * var(--k)) 0;row-gap:calc(26 * var(--k))}
  .servizi .ambiti__voce{justify-content:flex-start;padding:0 calc(28 * var(--k))}
  .servizi .ambiti svg{width:calc(58 * var(--k));height:calc(58 * var(--k));padding:calc(13 * var(--k))}
  .servizi .ambiti:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  .servizi .ambiti:has(>li:nth-child(3):last-child),.servizi .ambiti:has(>li:nth-child(5)){grid-template-columns:repeat(3,1fr)}
  .servizi .ambiti:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
  .servizi .ambiti:has(>li:nth-child(5))>li:nth-child(4)::before{display:none}
  .ambiti__voce>span{font-size:max(15.5px,calc(18 * var(--k)))}
  .servizi>.servizi__intro{width:auto;margin:calc(22 * var(--k)) 0 0;padding:0 calc(19 * var(--c)) 0 calc(18 * var(--c))}
  .servizi__intro p:has(>.scheda__link){gap:calc(12 * var(--k)) calc(32 * var(--k))}
  .servizi__griglia:not(:has(>.scheda--alta)){grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .scheda--larga:not(:has(.scheda__foto)){grid-template-columns:1fr}
  .servizi__griglia:not(:has(>.scheda--alta)) .scheda__testo{padding:calc(30 * var(--k)) calc(28 * var(--k))}
  .scheda__testo>svg:not([data-segno]){width:calc(56 * var(--k));height:calc(56 * var(--k));padding:calc(12 * var(--k));margin-bottom:calc(14 * var(--k))}
  .scheda .studio__par{margin-top:calc(10 * var(--k));font-size:max(15.5px,calc(17 * var(--k)));line-height:1.55}
  .passi .contatto__sotto{margin-top:calc(14 * var(--k));max-width:calc(820 * var(--k));font-size:max(16px,calc(19 * var(--k)))}
  .passi__lista:has(>li:nth-child(4)){grid-template-columns:repeat(4,1fr);gap:0 calc(36 * var(--k))}
  .passi__lista:has(>li:nth-child(4)) .numero{font-size:max(22px,calc(30 * var(--k)))}
  .domande:not(:has(.domanda)){grid-template-columns:2fr 3fr}
  .domande:not(:has(.domanda)) .domande__lista{align-self:center;gap:calc(12 * var(--k))}
  .domande__lista>p,.domande__lista>ul{font-size:max(16px,calc(18 * var(--k)))}
  .studio .scheda__voci{margin-top:calc(14 * var(--k));font-size:max(16px,calc(18 * var(--k)))}
  .contatto__sotto+.contatto__sotto{margin-top:calc(10 * var(--k))}
  .contatto .scheda__link{margin-top:calc(22 * var(--k))}
  .studio__foto:has(img[src*="/logo-"]){padding:0}
  .studio__foto img[src*="/logo-"]{position:static;width:70%;height:auto;object-fit:contain}
}
@media (min-width:768px) and (max-width:1199px){
  .servizi .ambiti:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .servizi .ambiti:has(>li:nth-child(4):last-child)>li:nth-child(3)::before{display:none}
}
@media (min-width:768px) and (max-width:1023px){
  .servizi__griglia:not(:has(>.scheda--alta)){grid-template-columns:1fr}
  .passi__lista:has(>li:nth-child(4)){grid-template-columns:repeat(2,1fr);row-gap:28px}
}

/* ─── pagine di servizio (privacy, 404): gli stessi pezzi della landing ─── */
.legale{max-width:760px;margin:0 auto;padding:40px 20px 64px;color:var(--testo)}
.legale__titolo{margin-top:12px;font-size:clamp(34px,5vw,52px);line-height:1.05}
.legale__nota{margin-top:10px;font-size:14px;color:var(--testo-tenue)}
.legale h2{margin-top:34px;font-size:21px;line-height:1.25;font-weight:700;color:var(--inchiostro)}
.legale p:not(.occhiello){margin-top:12px;font-size:17px;line-height:1.6}
.legale a:not(.bottone){text-decoration:underline;text-underline-offset:2px}
.legale__azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.legale__azioni .bottone{height:52px;padding:0 24px;font-size:17px}
.legale__azioni .bottone--bordo{border-color:var(--grafite-medio);color:var(--grafite-medio)}
.legale__azioni .bottone--bordo:hover{background:var(--pannello)}

/* ═══════════════ 6 · MATERIA: grana, luce, trama (solo superfici scure e pannelli) ═══════════════ */
/* hero: velo notte, trama + grana sul lato del testo (torcia attorno al puntatore), luce dietro il testo */
.hero__testo::before{content:"";position:absolute;inset:-35% -45%;z-index:-1;pointer-events:none;background:radial-gradient(60% 40% at 30% 40%,rgba(220,215,207,.06),transparent 70%),radial-gradient(30% 24% at 62% 66%,rgba(255,255,255,.03),transparent 70%);translate:6% 3%}
@media (min-width:768px){
  .hero__scheda::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--grana) 0 0/160px,var(--trama-h) 0 0/120px;
    -webkit-mask-image:linear-gradient(90deg,#000 0 38%,transparent 52%),radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.62));
    mask-image:linear-gradient(90deg,#000 0 38%,transparent 52%),radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.62));
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .hero:not(:has(.ambiti)) .hero__scheda::after{
    -webkit-mask-image:linear-gradient(90deg,#000 0 30%,transparent 44%),radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.62));
    mask-image:linear-gradient(90deg,#000 0 30%,transparent 44%),radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.62))}
}
/* banda grafite: grana, gradiente grafite → notte, luce; la trama viva è il canvas (senza JS: trama ferma) */
.passi{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--grana) 0 0/160px,linear-gradient(180deg,var(--grafite),var(--notte))}
.passi::before{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;background:radial-gradient(60% 40% at 30% 40%,rgba(220,215,207,.06),transparent 70%),radial-gradient(30% 24% at 62% 66%,rgba(255,255,255,.03),transparent 70%);translate:6% 3%}
.passi::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--trama-p) 0 0/120px}
.passi:has(>canvas)::after{display:none}
.passi>canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.passi__in{position:relative;z-index:1}
/* pannello contatto: luce pietra in basso a destra, trama con la torcia */
.contatto::before{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;background:radial-gradient(40% 40% at 80% 85%,rgba(220,215,207,.05),transparent 70%);translate:6% 3%}
.contatto::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--trama-c) 0 0/120px;
  -webkit-mask-image:radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.57));
  mask-image:radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.57))}
/* pannelli grigi con domande o con una lista: trama grafite ferma, con la torcia */
.domande:is(:has(.domanda),:has(.domande__lista>ul:last-child))::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--trama-g) 0 0/120px;
  -webkit-mask-image:radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.5));
  mask-image:radial-gradient(circle 280px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.5))}
/* tono della pagina: pietra chiara quando lo studio è a metà schermo (il div lo crea il JS) */
[data-fondo]{position:fixed;inset:0;z-index:-1;background:var(--pietra-chiara);opacity:0;pointer-events:none;transition:opacity .6s var(--e-morbida)}
html.is-pietra [data-fondo]{opacity:1}

/* ═══════════════ 7 · GRAFICA NUOVA DEI COMPONENTI ═══════════════ */
/* segni del kit (creati dal JS, statici negli hero delle interne): tratto sottile, sotto il testo */
svg[data-segno]{position:absolute;z-index:-1;pointer-events:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;overflow:visible;color:var(--notte);height:auto;opacity:var(--intensita,.07)}
.scheda__testo>svg[data-segno]{right:-34px;bottom:-40px;width:91px;--intensita:.07}
.scheda--alta .scheda__testo>svg[data-segno]{width:117px;right:-40px;bottom:-46px}
.studio__testo>svg[data-segno]{right:0;bottom:-10px;width:273px;--intensita:.08}
/* planimetria (#progetti): da telefono in alto a destra, nel respiro sopra il titolo; mai sopra un testo */
.studio__testo>svg[data-segno="planimetria"]{width:54px;top:-54px;right:2px;bottom:auto}
svg[data-segno="cgc"] [pathLength]{fill:currentColor;fill-opacity:.375}
.contatto>svg[data-segno]{z-index:0;right:-34%;bottom:4%;width:118%;color:var(--bianco);--intensita:.06}
/* pannelli grigi di solo testo: firma e orologio escono dal bordo dove non c'è testo; da telefono
   dall'angolo in alto a destra, nel respiro sopra il titolo (testi a 12 px o più) */
.domande>svg[data-segno]{width:60px;--intensita:.08}
.domande>svg[data-segno="firma"]{top:-36px;right:-4px}
.domande>svg[data-segno="orologio"]{top:-40px;right:-20px}
/* 404: la lente in alto a destra della colonna, tutta dentro */
.legale{position:relative;isolation:isolate}
.legale>svg[data-segno]{top:30px;right:20px;width:104px;--intensita:.08}
/* telefono stretto: il titolo occupa la riga, la lente sta accanto al secondo pulsante, a 12 px o più */
@media (max-width:559px){.legale>svg[data-segno]{top:auto;bottom:64px;width:min(64px,calc(100% - 314px))}}
/* hero delle interne: il segno della pagina, statico nell'HTML (riceve la View Transition), bianco al 6% */
.hero__scheda>svg[data-segno]{z-index:2;right:-40px;bottom:-60px;width:150px;color:var(--bianco);--intensita:.06}
/* schede senza foto (cessazioni, consulenza aziendale): il segno un po' più fuori, lontano dall'ultima riga */
.scheda:not(:has(.scheda__foto)) .scheda__testo>svg[data-segno]{right:-40px;bottom:-46px}
/* da telefono cgc e tre (più larghi che alti) stanno nella fascia sotto i pulsanti: mai sopra un testo */
.hero__scheda>svg[data-segno="cgc"]{width:160px;bottom:-30px}
.hero__scheda>svg[data-segno="tre"]{width:130px;right:-20px;bottom:-10px}
/* l'icona delle schede senza foto: la piastrella si riempie di notte dal basso, come nella fascia */
.scheda__testo>svg:not([data-segno]){background-image:linear-gradient(var(--notte),var(--notte));background-position:50% 100%;background-size:100% 0;background-repeat:no-repeat;transition:color .3s var(--e-morbida),background-size .32s var(--e-morbida)}
@media (min-width:768px){
  .scheda__testo>svg[data-segno]{width:calc(140 * var(--k));right:calc(-40 * var(--k));bottom:calc(-46 * var(--k))}
  .scheda--alta .scheda__testo>svg[data-segno]{width:calc(180 * var(--k));right:calc(-30 * var(--k));bottom:calc(-58 * var(--k))}
  .studio__testo>svg[data-segno]{left:calc(-10 * var(--k));right:auto;bottom:0;width:calc(420 * var(--k))}
  .studio__testo>svg[data-segno="planimetria"]{display:none}
  .contatto>svg[data-segno]{right:-6%;bottom:auto;top:7%;width:auto;height:86%;aspect-ratio:96/30}
  .domande>svg[data-segno]{width:calc(150 * var(--k))}
  /* firma: in fondo alla colonna del titolo, la penna e la linea di base come uno spazio per la firma */
  .domande>svg[data-segno="firma"]{top:auto;right:auto;width:calc(64 * var(--k));left:calc(307.6 * var(--c) - 72.3 * var(--k));bottom:calc(-7 * var(--k))}
  .domande>svg[data-segno="orologio"]{top:auto;bottom:calc(-40 * var(--k));right:calc(-30 * var(--k))}
  .legale>svg[data-segno]{top:44px;right:20px;width:calc(160 * var(--k))}
  .hero__scheda>svg[data-segno]{z-index:1;right:auto;left:calc(-70 * var(--k));bottom:calc(-110 * var(--k));width:calc(220 * var(--k))}
  .hero__scheda>svg[data-segno="cgc"]{width:calc(360 * var(--k));left:calc(-56 * var(--k));bottom:calc(-58 * var(--k))}
  .hero__scheda>svg[data-segno="tre"]{width:calc(260 * var(--k));left:calc(-24 * var(--k));bottom:calc(-12 * var(--k))}
}
/* fra 768 e 1023 px i pulsanti dell'hero arrivano in fondo e il testo del pannello «Quanto dura» arriva al
   bordo: i segni si vedono solo dove non c'è testo (a sinistra dei pulsanti, fuori dal bordo destro) */
@media (min-width:768px) and (max-width:1023px){
  .hero__scheda>svg[data-segno]{left:calc(-150 * var(--k))}
  .hero__scheda>svg[data-segno="cgc"]{left:calc(-306 * var(--k))}
  .hero__scheda>svg[data-segno="tre"]{left:calc(-228 * var(--k))}
  .domande>svg[data-segno="orologio"]{right:calc(-110 * var(--k))}
}
/* planimetria da 1200 px: in basso a sinistra, sotto la lista (fra 768 e 1199 px la colonna è piena di testo) */
@media (min-width:1200px){
  .studio__testo>svg[data-segno="planimetria"]{display:block;top:auto;right:auto;left:0;bottom:calc(6 * var(--k));width:calc(200 * var(--k))}
}
/* linea del tempo (#storia): un nodo pietra sulla linea per ogni data, da 1024 px */
@media (min-width:1024px){
  .passi__lista:has(>li:nth-child(4))>.passo{position:relative}
  .passi__lista:has(>li:nth-child(4))>.passo::before{content:"";position:absolute;left:0;top:calc(-30 * var(--k) - 4px);width:7px;height:7px;border-radius:50%;background:var(--pietra);box-shadow:0 0 0 4px rgba(220,215,207,.14)}
}
/* finestre ad arco ribassato dello studio, col filetto bianco interno (passe-partout) */
.studio__foto:not(:has(img[src*="/logo-"])){border-radius:50% 50% 14px 14px/30% 30% 14px 14px}
.studio__foto:not(:has(img[src*="/logo-"]))::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.55);border-radius:inherit;pointer-events:none}
@media (min-width:768px){
  .studio__foto:not(:has(img[src*="/logo-"])){border-radius:50% 50% calc(16 * var(--k)) calc(16 * var(--k))/34% 34% calc(16 * var(--k)) calc(16 * var(--k))}
  .studio__foto:not(:has(img[src*="/logo-"]))::after{inset:calc(14 * var(--k))}
}
/* domanda aperta: la barra pietra a sinistra */
.domanda::before{content:"";position:absolute;inset:10px auto 10px 0;width:3px;border-radius:0 2px 2px 0;background:var(--pietra);scale:1 0;transform-origin:50% 50%}
.domanda.aperta::before{scale:1 1}
.domanda__piu path:first-child{transform-box:fill-box;transform-origin:50% 50%}
.domanda.aperta .domanda__piu path:first-child:not(:last-child){scale:1 0}
@media (hover:hover){
  .domanda:not(.aperta):hover{background:var(--bianco)}
  .domanda:not(.aperta) .domanda__btn:hover{color:var(--inchiostro)}
  a.ambiti__voce:hover svg{color:var(--bianco);background-size:100% 100%}
  a.ambiti__voce:hover strong,a.ambiti__voce:hover>span,.scheda__link:hover>span:first-child{background-size:100% 1.5px}
}
@media (hover:hover) and (pointer:fine){
  .scheda:hover .scheda__testo>svg:not([data-segno]){color:var(--bianco);background-size:100% 100%}
}
a.ambiti__voce:focus-visible svg{color:var(--bianco);background-size:100% 100%}
.scheda__link:focus-visible>span:first-child{background-size:100% 1.5px}

/* ═══════════════ 8 · MOVIMENTO (solo con JS e senza «riduci movimento») ═══════════════ */
@media (prefers-reduced-motion:no-preference){

  /* ── foto: una proprietà per compito (transform = ritaglio di oggi, translate = parallasse, scale = entrata e hover) ── */
  .scheda__foto img,.studio__foto img,.hero__foto img{scale:var(--foto-base,1);transition:scale 1.1s var(--e-posa)}
  img[style*="transform:none"],.studio__foto img{--foto-base:1.08}
  .studio__foto img[src*="/logo-"]{--foto-base:1}

  /* ── entrate generiche: ciò che il CSS nasconde fin dalla prima pittura ── */
  .js :is(.reveal,[data-reveal]):not(.in){opacity:0;translate:0 var(--d-su)}
  .js :is(.reveal,[data-reveal]).in{animation:velo .9s var(--e-posa) backwards}
  @keyframes velo{from{opacity:0;translate:0 var(--d-su)}}
  @keyframes velo-su{from{opacity:0;translate:0 8px}}
  @keyframes sale{from{opacity:0;translate:0 var(--d-scheda)}45%{opacity:1}}
  @keyframes destra{from{opacity:0;translate:20px 0}}
  @keyframes appare{from{opacity:0}}
  @keyframes parola{from{opacity:0;translate:0 115%}}
  @keyframes cifra{from{opacity:0;translate:0 110%}}
  @keyframes linea-x{from{scale:0 1}}
  @keyframes linea-y{from{scale:1 0}}
  @keyframes finestra-su{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes finestra-dx{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes filetto{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes foto-in{from{scale:calc(var(--foto-base,1) * 1.1)}}
  @keyframes cerchio-in{from{opacity:0;scale:.6}}

  /* contenitori che fanno solo da innesco: si mostrano i figli, uno dopo l'altro */
  .js :is(.servizi__intro.reveal,.passi__lista[data-reveal],.domande__lista[data-reveal],.domande__testa[data-reveal]):not(.in){opacity:1;translate:none}
  .js :is(.servizi__intro.reveal,.passi__lista[data-reveal],.domande__lista[data-reveal],.domande__testa[data-reveal]).in{animation:none}
  .js .servizi__intro.reveal:not(.in)>*{opacity:0}
  .js .servizi__intro.reveal.in>*{animation:velo .7s var(--e-posa) backwards;animation-delay:calc(var(--fase,0ms) + var(--i,0) * 90ms)}
  .js .servizi>.servizi__intro.reveal.in>*{--fase:120ms}
  .js .servizi__intro.reveal.in .cerchio{animation:cerchio-in .5s var(--e-posa) backwards;animation-delay:calc(var(--fase,0ms) + var(--i,0) * 90ms + 260ms)}
  .js .servizi__intro.reveal.in .scheda__link+.scheda__link .cerchio{animation-delay:calc(var(--fase,0ms) + var(--i,0) * 90ms + 380ms)}
  .js .servizi__intro.reveal.in .cerchio::after{animation:eco .9s var(--e-morbida) backwards;animation-delay:calc(var(--fase,0ms) + var(--i,0) * 90ms + 900ms)}
  :is(.servizi__intro,.domande__lista,.studio__testo,.scheda__testo)>:nth-child(2){--i:1}
  :is(.servizi__intro,.domande__lista,.studio__testo,.scheda__testo)>:nth-child(3){--i:2}
  :is(.servizi__intro,.domande__lista,.studio__testo,.scheda__testo)>:nth-child(4){--i:3}
  :is(.servizi__intro,.domande__lista,.studio__testo,.scheda__testo)>:nth-child(5){--i:4}
  :is(.servizi__intro,.domande__lista,.studio__testo,.scheda__testo)>:nth-child(n+6){--i:5}

  /* ── parole (E1): h1 dalla prima pittura, h2 quando il blocco entra ── */
  [data-parola]{clip-path:inset(-.25em -.08em -.2em -.08em)}
  [data-parola]:nth-child(2){--i:1}[data-parola]:nth-child(3){--i:2}[data-parola]:nth-child(4){--i:3}
  [data-parola]:nth-child(5){--i:4}[data-parola]:nth-child(6){--i:5}[data-parola]:nth-child(7){--i:6}
  [data-parola]:nth-child(8){--i:7}[data-parola]:nth-child(9){--i:8}[data-parola]:nth-child(10){--i:9}
  [data-parola]:nth-child(11){--i:10}[data-parola]:nth-child(n+12){--i:11}
  .js .hero__titolo [data-parola]>span,.js .legale__titolo [data-parola]>span,
  .js :is(.reveal,[data-reveal]).in [data-parola]>span{animation:parola .9s var(--e-posa) backwards;animation-delay:calc(var(--fase,0ms) + var(--i,0) * var(--passo-parola))}
  .hero__titolo,.legale__titolo{--fase:150ms}
  .js :is(.reveal,[data-reveal])[data-diviso]:not(.in){opacity:1;translate:none}
  .js :is(.reveal,[data-reveal])[data-diviso]:not(.in) [data-parola]>span{opacity:0}
  .js :is(.reveal,[data-reveal])[data-diviso].in{animation:none}

  /* ── cifre (E7): salgono dalla maschera, mai contate ── */
  [data-cifra]{clip-path:inset(-.1em -.05em -.12em -.05em)}
  .js :is(.reveal,[data-reveal]).in [data-cifra]{animation:cifra .7s var(--e-posa) backwards;animation-delay:calc(var(--fase-cifre,0ms) + var(--i,0) * 80ms)}
  .js :is(.reveal,[data-reveal]).in .numero__linea{animation:linea-x .8s var(--e-tratto) backwards;animation-delay:calc(var(--fase-cifre,0ms) + 200ms)}

  /* ── tratti (E5): icone e segni si disegnano, si riavvolgono uscendo in alto, si ridisegnano al ritorno ── */
  .js [pathLength]{--ritardo:calc(var(--fase,0ms) + var(--dopo,0ms) + var(--n,0) * var(--passo,90ms));stroke-dasharray:1;
    transition:stroke-dashoffset var(--t-tratto) var(--e-tratto) var(--ritardo),opacity 60ms linear var(--ritardo),fill-opacity .6s var(--e-morbida) calc(var(--ritardo) + var(--t-tratto) - 200ms)}
  .js :is(.reveal,[data-reveal]):not(.in) [pathLength],
  .js .hero .ambiti:not(.in) [pathLength],
  .js .is-via [pathLength],.js svg.is-via [pathLength]{stroke-dashoffset:1;opacity:0;fill-opacity:0;transition:stroke-dashoffset .5s var(--e-via),opacity .1s linear .4s,fill-opacity .2s linear}
  .js .hero .ambiti:not(.in) svg>*{opacity:0}
  /* Chrome non ricalcola i tratti quando cambia la classe di un antenato e il selettore finisce con
     [pathLength] (attributo SVG con la maiuscola): ogni stato che li nasconde o li mostra cambia anche
     una variabile ereditata, così i discendenti si ricalcolano davvero (entrate, riavvolgimenti, giro) */
  .js :is(.reveal,[data-reveal],.hero .ambiti):not(.in){--tr-in:0}
  .js :is(.reveal,[data-reveal],.hero .ambiti).in{--tr-in:1}
  .js .is-via{--tr-via:1}
  .js .is-metamorfosi{--tr-meta:1}
  html.is-arrivo{--tr-arrivo:1}
  svg[data-segno]{--t-tratto:var(--t-segno)}
  svg[data-segno="cgc"],svg[data-segno="tre"]{--passo:250ms}
  /* metamorfosi (E6): persone → contratto, grafico → calcolatrice, casa → compasso */
  .js g[data-segno="gemella"] [pathLength]{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 420ms var(--e-via),opacity 80ms linear 340ms}
  .js svg.is-metamorfosi>[pathLength]{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 420ms var(--e-via),opacity 80ms linear 340ms}
  .js svg.is-metamorfosi g[data-segno="gemella"] [pathLength]{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 700ms var(--e-tratto) calc(380ms + var(--n,0) * 90ms),opacity 1ms linear calc(380ms + var(--n,0) * 90ms)}

  /* ── segni delle interne (§ 3.2-3.7) ── */
  /* il segno statico dell'hero: si disegna dalla prima pittura (keyframes, base disegnata); arrivando con la
     View Transition è già lì, perché ci è volato dentro */
  html.js:not(.is-arrivo) .hero__scheda>svg[data-segno] [pathLength]{animation:tratto var(--t-segno) var(--e-tratto) backwards;animation-delay:calc(900ms + var(--n,0) * var(--passo,90ms))}
  @keyframes tratto{0%{stroke-dashoffset:1;opacity:0;fill-opacity:0}1%{opacity:1}70%{fill-opacity:0}100%{stroke-dashoffset:0}}
  /* i segni creati dal JS fuori da un blocco che entra: entrano da soli, l'intensità resta quella del contesto */
  .js svg[data-segno][data-reveal]:not(.in){opacity:var(--intensita,.07);translate:none}
  .js svg[data-segno][data-reveal].in{animation:none}
  .js .domande>svg[data-segno]:not(.is-letto){--fase:420ms}
  .js .legale>svg[data-segno]:not(.is-letto){--fase:700ms}
  /* grafico: prima la base, poi le tre barre che crescono dal basso, una ogni 120 ms */
  svg[data-segno="grafico"]{--passo:120ms}
  svg[data-segno="grafico"]>:not(:first-child){--dopo:500ms}
  /* firma: prima la penna, poi la linea di base che si allunga come una firma */
  svg[data-segno="firma"]>:last-child{--dopo:1310ms;--t-tratto:600ms}
  /* orologio: il quadrante, poi le lancette, poi un giro solo */
  svg[data-segno="orologio"]>:last-child{--dopo:700ms;--t-tratto:900ms;transform-box:view-box;transform-origin:12px 12px}
  .js svg[data-segno="orologio"].in>:last-child{animation:giro 1.6s var(--e-tratto) 2.6s backwards}
  @keyframes giro{from{rotate:0deg}to{rotate:360deg}}
  /* planimetria: disegnata come una tavola, un muro dopo l'altro */
  svg[data-segno="planimetria"]{--passo:220ms;--t-segno:1400ms}
  /* parole dei titoli dentro un blocco che non è ancora entrato */
  .js :is(.reveal,[data-reveal]):not(.in) [data-diviso] [data-parola]>span{opacity:0}

  /* ── testata ── */
  .testata{transition:box-shadow .3s var(--e-morbida),translate .42s var(--e-posa)}
  .testata.is-nascosta{translate:0 -100%}
  html.js:not(.is-arrivo) .testata__logo{animation:velo-su .7s var(--e-posa) backwards}
  .testata__nav.aperto{animation:menu-apre .32s var(--e-posa) backwards}
  .testata__nav.aperto li,.testata__nav.aperto .testata__cta{animation:velo-su .32s var(--e-posa) backwards;animation-delay:calc(60ms + var(--i,0) * 40ms)}
  .testata__nav li:nth-child(2){--i:1}.testata__nav li:nth-child(3){--i:2}.testata__nav li:nth-child(4){--i:3}
  .testata__nav li:nth-child(5){--i:4}.testata__nav li:nth-child(6){--i:5}.testata__cta{--i:6}
  @media (min-width:1180px){
    html.js:not(.is-arrivo) .testata__nav li,html.js:not(.is-arrivo) .testata__cta{animation:velo-su .6s var(--e-posa) backwards;animation-delay:calc(120ms + var(--i,0) * 40ms)}
  }
  .js .testata__menu svg{animation:gira .24s var(--e-posa) backwards}
  @keyframes menu-apre{from{clip-path:inset(0 0 100% 0 round 14px)}to{clip-path:inset(0 0 0 0 round 14px)}}
  @keyframes gira{from{opacity:0;rotate:-90deg}}

  /* ── pulsanti (E9): magnete, lama, riempimento, freccia ── */
  .bottone{transition:background-color .3s var(--e-morbida),color .3s var(--e-morbida),border-color .3s var(--e-morbida),translate var(--tira-t,600ms) var(--tira-e,var(--e-molla)),transform .16s var(--e-morbida)}
  .cerchio{transition:background-color .3s var(--e-morbida),translate var(--tira-t,600ms) var(--tira-e,var(--e-molla)),box-shadow .6s var(--e-morbida)}
  .bottone--bordo::before{transition:scale .3s var(--e-morbida)}
  @media (hover:hover){
    .bottone--pietra::after,.bottone--grafite::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);translate:-100% 0}
    .bottone--pietra:hover::after,.bottone--grafite:hover::after{translate:400% 0;transition:translate .75s var(--e-morbida)}
    .bottone:hover .freccia,.bottone:focus-visible .freccia{animation:freccia .42s var(--e-morbida)}
    .scheda__link:hover .cerchio svg,.scheda__link:focus-visible .cerchio svg{animation:freccia-dx .42s var(--e-morbida)}
    .scheda__link:hover .cerchio::after{animation:eco .6s var(--e-morbida)}
  }
  @keyframes freccia{0%{translate:0 0}45%{translate:7px -7px;opacity:0}46%{translate:-7px 7px;opacity:0}100%{translate:0 0;opacity:1}}
  @keyframes freccia-dx{0%{translate:0 0}45%{translate:9px 0;opacity:0}46%{translate:-9px 0;opacity:0}100%{translate:0 0;opacity:1}}
  .cerchio::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
  @keyframes eco{from{box-shadow:0 0 0 0 rgba(220,215,207,.7)}to{box-shadow:0 0 0 8px rgba(220,215,207,0)}}

  /* ── hero (§ 2.9): solo CSS, dalla prima pittura; con is-arrivo niente velo e niente scala ── */
  .js .hero__sotto{animation:velo .7s var(--e-posa) .52s backwards}
  .js .hero__sotto+.hero__sotto{animation-delay:.61s}
  .js .hero__azioni .bottone{animation:velo .7s var(--e-posa) .64s backwards}
  .js .hero__azioni .bottone+.bottone{animation-delay:.73s}
  .js .hero .ambiti{animation:velo .6s var(--e-posa) .7s backwards}
  .js .hero .ambiti:not(.is-letto){--fase:820ms}
  .js .ambiti:not(.is-letto)>li:nth-child(2){--dopo:120ms}
  .js .ambiti:not(.is-letto)>li:nth-child(3){--dopo:240ms}
  .js .ambiti:not(.is-letto)>li:nth-child(4){--dopo:360ms}
  .js .ambiti:not(.is-letto)>li:nth-child(n+5){--dopo:480ms}
  .js .hero .ambiti li+li::before{animation:linea-y .6s var(--e-tratto) .82s backwards}
  .js :is(.hero .ambiti,.ambiti[data-reveal]).in .ambiti__voce>:is(strong,span){animation:velo .6s var(--e-posa) backwards;animation-delay:calc(var(--fase,0ms) + var(--dopo,0ms) + 200ms)}
  .js .hero__foto img{animation:respiro 24s var(--e-respiro) 1.8s infinite alternate}
  html.js:not(.is-arrivo) .hero__foto img{animation:foto-hero 1.8s var(--e-posa) backwards,respiro 24s var(--e-respiro) 1.8s infinite alternate}
  html.js:not(.is-arrivo) .hero__scheda::before{animation:velo-hero 1.4s var(--e-sipario) backwards}
  @keyframes foto-hero{from{scale:calc(var(--foto-base,1) * var(--foto-entra,1.08))}}
  @keyframes respiro{from{scale:var(--foto-base,1)}to{scale:calc(var(--foto-base,1) * 1.025)}}
  @keyframes velo-hero{from{translate:8% 0}}
  /* luce e trama: girano solo con la superficie in vista, mai a scheda nascosta */
  .js .hero__testo::before,.js .passi::before{animation:luce 54s var(--e-respiro) infinite}
  .js .contatto::before{animation:luce 60s var(--e-respiro) infinite}
  .js .hero__scheda::after{animation:trama-2 60s steps(120) infinite}
  .js .contatto::after{animation:trama-1 60s steps(120) infinite}
  @keyframes luce{0%,100%{translate:-8% -4%}33%{translate:6% 3%}66%{translate:-3% 7%}}
  @keyframes trama-1{from{background-position:0 0}to{background-position:120px 120px}}
  @keyframes trama-2{from{background-position:0 0,0 0}to{background-position:0 0,120px 120px}}
  .js .hero__scheda:not(.is-vivo) .hero__testo::before,.js .hero__scheda:not(.is-vivo)::after,
  .js .passi:not(.is-vivo)::before,.js .contatto:not(.is-vivo)::before,.js .contatto:not(.is-vivo)::after,
  html.is-ferma .hero__testo::before,html.is-ferma .hero__scheda::after,html.is-ferma .passi::before,html.is-ferma .contatto::before,html.is-ferma .contatto::after{animation-play-state:paused}
  .js .hero__scheda:not(.is-vivo) .hero__foto img,html.is-ferma .hero__foto img{animation-play-state:running,paused}
  .hero__scheda.is-vivo .hero__testo::before,.passi.is-vivo::before,.contatto.is-vivo::before{will-change:translate}

  /* ── fascia delle icone (§ 2.4) ── */
  .js .servizi>.ambiti[data-reveal].in li+li::before{animation:linea-y .6s var(--e-tratto) .12s backwards}
  .js .servizi>.ambiti[data-reveal].in{animation-duration:.6s}
  /* Consulenza del lavoro, cinque voci: le icone a 90 ms l'una (§ 3.2) */
  .js #cosa-comprende .ambiti:not(.is-letto)>li:nth-child(2){--dopo:90ms}
  .js #cosa-comprende .ambiti:not(.is-letto)>li:nth-child(3){--dopo:180ms}
  .js #cosa-comprende .ambiti:not(.is-letto)>li:nth-child(4){--dopo:270ms}
  .js #cosa-comprende .ambiti:not(.is-letto)>li:nth-child(5){--dopo:360ms}
  /* hover delle voci-link: la piastrella si riempie (§ 2.4), l'icona sale di 2 px e si ripassa */
  a.ambiti__voce svg{transition:color .3s var(--e-morbida),background-size .32s var(--e-morbida),translate .3s var(--e-morbida)}
  @media (hover:hover){
    a.ambiti__voce:hover svg{translate:0 -2px}
    a.ambiti__voce:hover svg>:is(path,circle,rect){animation:ripassa .5s var(--e-tratto)}
  }
  a.ambiti__voce:focus-visible svg{translate:0 -2px}
  a.ambiti__voce:focus-visible svg>:is(path,circle,rect){animation:ripassa .5s var(--e-tratto)}
  @keyframes ripassa{from{stroke-dashoffset:1}}
  /* link dopo la griglia (#privati-aziende): i due .scheda__link entrano a 90 ms l'uno */
  .js .servizi__intro.reveal:not(.in)>p:has(>.scheda__link){opacity:1}
  .js .servizi__intro.reveal:not(.in)>p:has(>.scheda__link)>.scheda__link{opacity:0}
  .js .servizi__intro.reveal.in>p:has(>.scheda__link){animation:none}
  .js .servizi__intro.reveal.in>p:has(>.scheda__link)>.scheda__link{animation:velo .7s var(--e-posa) backwards;animation-delay:calc(var(--fase,0ms) + var(--i,0) * 90ms)}
  .js .servizi__intro.reveal.in>p:has(>.scheda__link)>.scheda__link+.scheda__link{animation-delay:calc(var(--fase,0ms) + var(--i,0) * 90ms + 90ms)}

  /* ── schede (§ 2.3): la scheda sale, la foto si apre come una finestra, poi i testi ── */
  .scheda--2{--s:140ms}.scheda--3{--s:280ms}
  .servizi__colonna>.scheda:nth-child(2){--s:140ms}
  .servizi__griglia:not(:has(>.scheda--alta))>.scheda:nth-child(2){--s:140ms}
  .servizi__griglia:not(:has(>.scheda--alta))>.scheda:nth-child(3){--s:280ms}
  .servizi__griglia:not(:has(>.scheda--alta))>.scheda:nth-child(n+4){--s:420ms}
  .scheda{transition:transform .6s var(--e-morbida),box-shadow .6s var(--e-morbida)}
  .js .scheda.reveal:not(.in){translate:0 var(--d-scheda)}
  .js .scheda.reveal.in{animation:sale .9s var(--e-posa) backwards;animation-delay:var(--s,0ms)}
  .js .scheda.reveal:not(.in) .scheda__foto{clip-path:inset(100% 0 0 0)}
  .js .scheda.reveal.in .scheda__foto{animation:finestra-su 1.2s var(--e-sipario) backwards;animation-delay:var(--s,0ms)}
  .js .scheda.reveal.in .scheda__foto img{animation:foto-in 1.6s var(--e-posa) backwards;animation-delay:var(--s,0ms)}
  /* interne: la foto a destra del testo (.scheda--larga) si apre dal lato del testo verso l'esterno (E3) */
  @media (min-width:768px){
    .js .scheda--larga.reveal:has(img[style*="transform:none"]):not(.in) .scheda__foto{clip-path:inset(0 100% 0 0)}
    .js .scheda--larga.reveal:has(img[style*="transform:none"]).in .scheda__foto{animation-name:finestra-dx}
  }
  .scheda{--fase-cifre:calc(var(--s,0ms) + 300ms)}
  .scheda__titolo{--fase:calc(var(--s,0ms) + 350ms)}
  .js .scheda.reveal.in .scheda__testo>:is(.scheda__sotto,.studio__par,.scheda__nota,.scheda__link){animation:velo .7s var(--e-posa) backwards;animation-delay:calc(var(--s,0ms) + var(--t-in,500ms))}
  .scheda__testo>.studio__par~.studio__par{--t-in:590ms}.scheda__testo>.studio__par~.studio__par~.studio__par{--t-in:680ms}
  .scheda__testo>.scheda__nota{--t-in:700ms}.scheda__testo>.scheda__link{--t-in:780ms}
  .js .scheda.reveal.in .scheda__voci li{animation:velo .6s var(--e-posa) backwards;animation-delay:calc(var(--s,0ms) + 560ms + var(--v,0) * var(--passo-voce))}
  .js .scheda.reveal.in .cerchio{animation:cerchio-in .5s var(--e-posa) backwards;animation-delay:calc(var(--s,0ms) + 780ms)}
  .scheda__voci li:nth-child(2){--v:1}.scheda__voci li:nth-child(3){--v:2}.scheda__voci li:nth-child(4){--v:3}
  .scheda__voci li:nth-child(5){--v:4}.scheda__voci li:nth-child(n+6){--v:5}
  .js .scheda:not(.is-letto) .cerchio svg{--fase:calc(var(--s,0ms) + 880ms)}
  .js .scheda:not(.is-letto) .scheda__testo>svg:not([data-segno]){--fase:calc(var(--s,0ms) + 150ms)}
  .js .scheda:not(.is-letto) .scheda__testo>svg[data-segno]{--fase:calc(var(--s,0ms) + 900ms)}
  .scheda svg[data-segno]{transition:rotate .6s var(--e-morbida)}
  .js .is-letto svg,.js svg.is-letto{--fase:0ms;--dopo:0ms}
  @media (hover:hover) and (pointer:fine){
    .scheda::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s var(--e-morbida);background:radial-gradient(360px circle at var(--mx,-999px) var(--my,-999px),rgba(255,255,255,.14),transparent 60%)}
    .scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra-su)}
    .scheda:hover::after{opacity:1}
    .scheda:hover .scheda__foto img,.studio__foto:hover img{--foto-su:1.04}
    .scheda__foto img,.studio__foto img{scale:calc(var(--foto-base,1) * var(--foto-su,1))}
    .scheda:hover .numero__linea{scale:1.5 1}
    .scheda:hover svg[data-segno]{rotate:-6deg}
    .scheda .numero__linea{transition:scale .6s var(--e-morbida)}
  }

  /* ── banda grafite (§ 2.5): titolo, passi che salgono e si accendono, linea del percorso ── */
  .passi__lista::after{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--pietra);transform-origin:left center}
  .js .passi__lista[data-reveal]:not(.in)::after{scale:0 1}
  .js .passi__lista[data-reveal].in::after{animation:linea-x 1.2s var(--e-tratto) backwards}
  .passo:nth-child(2){--i:1}.passo:nth-child(3){--i:2}.passo:nth-child(4){--i:3}
  .js .passo.reveal.in{animation-delay:calc(var(--i,0) * 150ms)}
  .passo{--fase-cifre:calc(var(--i,0) * 150ms + 150ms)}
  .js .passo.reveal.in .passo__titolo{animation:velo .7s var(--e-posa) backwards;animation-delay:calc(var(--i,0) * 150ms + 260ms)}
  .js .passi__lista:not(:has(>li:nth-child(4))) .passo.reveal.in .numero{animation:accende .9s var(--e-morbida) backwards;animation-delay:calc(var(--i,0) * 150ms + 300ms)}
  .js .passi__lista:not(:has(>li:nth-child(4))) .passo.reveal.in .numero__linea{animation:linea-x .8s var(--e-tratto) backwards,accende-linea .9s var(--e-morbida) backwards;animation-delay:calc(var(--i,0) * 150ms + 350ms)}
  @keyframes accende{from{color:#8C8F91}}
  @keyframes accende-linea{from{background-color:#8C8F91}}
  .js .passi__lista:has(>li:nth-child(4)) .passo.reveal.in .numero{animation:data .8s var(--e-posa) backwards;animation-delay:calc(var(--i,0) * 150ms + 120ms)}
  .js .passi__lista:has(>li:nth-child(4))>.passo.reveal:not(.in)::before{scale:0}
  .js .passi__lista:has(>li:nth-child(4))>.passo.reveal.in::before{animation:nodo .6s var(--e-posa) backwards;animation-delay:calc(var(--i,0) * 150ms + 60ms)}
  @keyframes data{from{opacity:0;translate:0 .45em}}
  @keyframes nodo{from{scale:0;box-shadow:0 0 0 0 rgba(220,215,207,.5)}}
  .js .passi__titolo[data-reveal]:not(.in)~.contatto__sotto{opacity:0}
  .js .passi__titolo[data-reveal].in~.contatto__sotto{animation:velo .7s var(--e-posa) .25s backwards}

  /* ── studio (§ 2.6): finestra che si riempie dal basso, filetto dall'alto, monogramma ── */
  .js .studio__foto.reveal:not(:has(img[src*="/logo-"])):not(.in){opacity:1;translate:none;clip-path:inset(100% 0 0 0)}
  .js .studio__foto.reveal:not(:has(img[src*="/logo-"])).in{animation:finestra-su 1.2s var(--e-sipario) backwards}
  .js .studio__foto.reveal.in img{animation:foto-in 1.6s var(--e-posa) backwards}
  .js .studio__foto.reveal:not(.in)::after{clip-path:inset(0 0 100% 0)}
  .js .studio__foto.reveal.in::after{animation:filetto .9s var(--e-sipario) .9s backwards}
  .studio__foto:has(img[src*="/logo-"]){--d-su:16px}
  .js .studio__foto.reveal:has(img[src*="/logo-"]).in{animation:velo .9s var(--e-posa) backwards}
  .js .studio__foto.reveal:has(img[src*="/logo-"]).in img{animation:none}
  .js .studio__testo.reveal:not(.in){opacity:1;translate:none}
  .js .studio__testo.reveal.in{animation:none}
  .js .studio__testo.reveal:not(.in)>:not(svg){opacity:0}
  .js .studio__testo.reveal.in>:not(svg):not(.titolo-sezione){animation:velo .7s var(--e-posa) backwards;animation-delay:calc(280ms + var(--i,0) * 90ms)}
  .js .studio__testo:not(.is-letto)>svg[data-segno]{--fase:900ms}
  .js .studio__testo.reveal:not(.in) .scheda__voci li{opacity:0}
  .js .studio__testo.reveal.in .scheda__voci li{animation:velo .6s var(--e-posa) backwards;animation-delay:calc(400ms + var(--v,0) * var(--passo-voce))}

  /* ── domande (§ 2.7): da destra, una dopo l'altra; apri e chiudi in altezza ── */
  .js .domande__lista[data-reveal]:not(.in)>*{opacity:0}
  .js .domande__lista[data-reveal].in>.domanda{animation:destra .7s var(--e-posa) backwards;animation-delay:calc(var(--i,0) * 70ms)}
  .js .domande__lista[data-reveal].in>:is(p,ul){animation:velo .7s var(--e-posa) backwards;animation-delay:calc(var(--i,0) * 90ms)}
  .js .domande__lista[data-reveal]:not(.in)>ul li::before{scale:0 1}
  .js .domande__lista[data-reveal].in>ul li::before{animation:linea-x .5s var(--e-tratto) backwards;animation-delay:calc(200ms + var(--v,0) * var(--passo-voce))}
  .domande__lista>ul li:nth-child(2){--v:1}.domande__lista>ul li:nth-child(3){--v:2}.domande__lista>ul li:nth-child(4){--v:3}
  .domande__lista>ul li:nth-child(5){--v:4}.domande__lista>ul li:nth-child(n+6){--v:5}
  .js .domande__lista[data-reveal].in>ul li{animation:velo .6s var(--e-posa) backwards;animation-delay:calc(150ms + var(--v,0) * var(--passo-voce))}
  .js .domanda__risposta{transition:grid-template-rows .42s var(--e-posa),padding-bottom .42s var(--e-posa)}
  .js .domanda__risposta>p{transition:opacity .42s var(--e-posa) 80ms}
  .js .domanda:not(.aperta) .domanda__risposta{grid-template-rows:0fr;padding-bottom:0;transition-duration:.32s;transition-timing-function:var(--e-via)}
  .js .domanda:not(.aperta) .domanda__risposta>p{opacity:.2;transition:opacity .2s linear}
  .domanda__piu path:first-child{transition:scale .42s var(--e-posa)}
  .domanda::before{transition:scale .42s var(--e-posa)}
  .domanda__btn{transition:color .3s var(--e-morbida),translate .3s var(--e-morbida)}
  @media (hover:hover){ .domanda:not(.aperta) .domanda__btn:hover{translate:4px 0} }

  /* ── pannello contatto (§ 2.8) ── */
  .js .contatto[data-reveal]:not(.in){scale:.985}
  .js .contatto[data-reveal].in{animation:pannello .9s var(--e-posa) backwards}
  @keyframes pannello{from{opacity:0;translate:0 var(--d-su);scale:.985}}
  .js .contatto[data-reveal].in .contatto__sotto{animation:velo .7s var(--e-posa) .35s backwards}
  .js .contatto[data-reveal].in .contatto__sotto+.contatto__sotto{animation-delay:.44s}
  .js .contatto[data-reveal].in .contatto__azioni>*,.js .contatto[data-reveal].in .contatto__dx>.scheda__link{animation:velo .7s var(--e-posa) .45s backwards}
  .js .contatto[data-reveal].in .contatto__dx>.scheda__link{animation-delay:.63s}
  .js .contatto[data-reveal].in .scheda__link .cerchio{animation:cerchio-in .5s var(--e-posa) .8s backwards}
  .js .contatto[data-reveal].in .scheda__link .cerchio::after{animation:eco .9s var(--e-morbida) 1.3s backwards}
  .js .contatto[data-reveal].in .contatto__azioni>*+*{animation-delay:.54s}
  .js .contatto[data-reveal].in .contatto__sx::after{animation:linea-y .9s var(--e-tratto) .3s backwards}
  .js .contatto[data-reveal].in .contatto__dx::before{animation:linea-x .9s var(--e-tratto) .3s backwards}
  .js .contatto:not(.is-letto) .contatto__tel svg{--fase:600ms}
  .js .contatto:not(.is-letto) .contatto__sede svg{--fase:760ms}
  .js .contatto:not(.is-letto)>svg[data-segno]{--fase:700ms}
  .contatto__tel path,.contatto__sede svg{transform-box:fill-box;transform-origin:50% 50%}
  .js .contatto[data-reveal].in .contatto__tel path{animation:squillo .7s var(--e-morbida) 2s backwards}
  .js .contatto[data-reveal].in .contatto__tel::before{animation:anello 2.2s var(--e-morbida) 2s backwards}
  .js .contatto[data-reveal].in .contatto__sede svg{animation:cade .7s var(--e-molla) 2.1s backwards}
  @media (hover:hover){
    .contatto__tel:hover svg{animation:squillo .7s var(--e-morbida)}
    .contatto__tel:hover::after{animation:anello 2.2s var(--e-morbida)}
  }
  @keyframes squillo{0%,100%{rotate:0deg}20%{rotate:-12deg}45%{rotate:10deg}70%{rotate:-6deg}}
  @keyframes anello{from{opacity:.4;scale:1}to{opacity:0;scale:2.4}}
  @keyframes cade{from{translate:0 -10px}}

  /* ── piè di pagina: solo il filetto si disegna dal centro ── */
  .js .piede:not(.in) .piede__giu::before{scale:0 1}
  .js .piede.in .piede__giu::before{animation:linea-x 1.2s var(--e-tratto) backwards}

  /* ── banner cookie: solo dissolvenza ── */
  .cookie:not([hidden]){animation:cookie .3s var(--e-posa) backwards}
  @keyframes cookie{from{opacity:0;translate:0 8px}}

  /* ── evidenziatore (E11) ── */
  main :is(p,li)>strong{transition:background-size .7s var(--e-posa) calc(var(--h0,300ms) + var(--h,0ms))}
  main .studio__par>strong{--h0:700ms}
  main :is(p,li)>strong:nth-of-type(2){--h:220ms}main :is(p,li)>strong:nth-of-type(n+3){--h:440ms}
  .js main :is(.reveal,[data-reveal]):not(.in) :is(p,li)>strong{background-size:0 38%}

  /* ── privacy e 404 ── */
  .js .legale>p:is(.occhiello,.legale__nota){animation:velo .7s var(--e-posa) .45s backwards}
  .js .legale>p:not(.occhiello):not(.legale__nota):first-of-type,.js .legale__azioni{animation:velo .7s var(--e-posa) .55s backwards}

  /* ── ancore: un impulso, una volta ── */
  .js :is(.scheda,section):target{animation:impulso 1.2s var(--e-morbida) .3s backwards}
  @keyframes impulso{from{outline:1px solid rgba(213,207,197,1);outline-offset:0}to{outline:1px solid rgba(213,207,197,0);outline-offset:10px}}

  /* ── parallasse (E4), legata allo scroll dove il browser la sa fare ── */
  @supports (animation-timeline:view()){
    .js .scheda__foto img,.js .studio__foto:not(:has(img[src*="/logo-"])) img{animation:parallasse linear both;animation-timeline:view();animation-range:cover}
    .js .scheda.reveal.in .scheda__foto img{animation:foto-in 1.6s var(--e-posa) backwards,parallasse linear both;animation-timeline:auto,view();animation-range:normal,cover;animation-delay:var(--s,0ms),0s}
    .js .studio__foto.reveal:not(:has(img[src*="/logo-"])).in img{animation:foto-in 1.6s var(--e-posa) backwards,parallasse linear both;animation-timeline:auto,view();animation-range:normal,cover}
    @keyframes parallasse{from{translate:0 calc(-1 * var(--px,3%))}to{translate:0 var(--px,3%)}}
    /* uscita della hero */
    .js .hero__foto img{animation:respiro 24s var(--e-respiro) 1.8s infinite alternate,esce-foto linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
    html.js:not(.is-arrivo) .hero__foto img{animation:foto-hero 1.8s var(--e-posa) backwards,respiro 24s var(--e-respiro) 1.8s infinite alternate,esce-foto linear both;animation-timeline:auto,auto,view();animation-range:normal,normal,exit 0% exit 100%}
    .js .hero__scheda:not(.is-vivo) .hero__foto img,html.is-ferma .hero__foto img{animation-play-state:running,paused,running}
    .js .hero__testo{animation:esce-testo linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes esce-foto{to{translate:0 4%}}
    @keyframes esce-testo{to{translate:0 -24px;opacity:.5}}
    /* linea del percorso e passi che si accendono */
    .passi__lista{view-timeline:--lista block}
    .js .passi__lista::after,.js .passi__lista[data-reveal].in::after{animation:linea-x linear both;animation-timeline:--lista;animation-range:entry 60% cover 55%}
    .js .passi__lista:not(:has(>li:nth-child(4))) .passo.reveal .numero,.js .passi__lista:not(:has(>li:nth-child(4))) .passo.reveal.in .numero{animation:accende linear both;animation-timeline:view();animation-range:entry 100% cover 40%}
    .js .passi__lista:not(:has(>li:nth-child(4))) .passo.reveal.in .numero__linea{animation:linea-x .8s var(--e-tratto) backwards,accende-linea linear both;animation-timeline:auto,view();animation-range:normal,entry 100% cover 40%;animation-delay:calc(var(--i,0) * 150ms + 350ms),0s}
    /* il monogramma dello studio deriva, i tre segni del contatto si avvicinano */
    .js .studio__testo>svg[data-segno]{animation:deriva linear both;animation-timeline:view();animation-range:cover}
    @keyframes deriva{from{translate:0 20px}to{translate:0 -20px}}
    .contatto{view-timeline:--contatto block}
    .js .contatto>svg[data-segno="tre"]>g:first-of-type{animation:avvicina-dx linear both;animation-timeline:--contatto;animation-range:entry 0% cover 50%}
    .js .contatto>svg[data-segno="tre"]>g:last-of-type{animation:avvicina-sx linear both;animation-timeline:--contatto;animation-range:entry 0% cover 50%}
    @keyframes avvicina-dx{to{translate:8px 0}}
    @keyframes avvicina-sx{to{translate:-8px 0}}
  }

  /* ── transizioni fra pagine (View Transitions cross-document) ── */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.2s var(--e-via) both vt-esce}
  ::view-transition-new(root){animation:.38s var(--e-posa) .12s both vt-entra}
  ::view-transition-group(hero),::view-transition-group(segno){animation-duration:.52s;animation-timing-function:var(--e-sipario)}
  @keyframes vt-esce{to{opacity:0;translate:0 -8px}}
  @keyframes vt-entra{from{opacity:0;translate:0 12px}}
}
.testata{view-transition-name:testata}
.hero__scheda{view-transition-name:hero}
.hero__scheda>[data-segno]{view-transition-name:segno}

/* ═══════════════ 9 · TELEFONO (sotto 768 px): nessun testo cresce, nessun contenitore si stringe ═══════════════ */
@media (max-width:767px){
  .hero__foto{display:block;overflow:hidden;overflow:clip}
  .hero__testo{background:linear-gradient(180deg,var(--grafite),var(--notte))}
  .hero__testo::before{inset:-20%;background:radial-gradient(60% 40% at 30% 40%,rgba(220,215,207,.06),transparent 70%)}
  .hero__testo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grana) 0 0/160px,var(--trama-p) 0 0/120px}
  .scheda__foto img{--foto-base:1.05}
  :root{--foto-entra:1.06;--px:2%}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .js .hero__testo::before{animation-duration:72s}
  .js .hero__testo::after{animation:trama-2 60s steps(120) infinite}
  .js .hero__scheda:not(.is-vivo) .hero__testo::after,html.is-ferma .hero__testo::after{animation-play-state:paused}
  .bottone:active{transform:scale(.99)}
}

/* ═══════════════ 10 · RIDUCI MOVIMENTO, RETE DI SICUREZZA, STAMPA ═══════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
/* rete: se a 3 s il motore non è partito, tutto visibile e disegnato */
html.is-rete :is(.reveal,[data-reveal],[data-parola]>span,[data-cifra],.scheda__foto,.studio__foto,.servizi__intro>*,.studio__testo>*,.domande__lista>*,.scheda__voci li){opacity:1!important;translate:none!important;clip-path:none!important}
html.is-rete [pathLength]{stroke-dashoffset:0!important;opacity:1!important}
@media print{
  [data-segno],[data-trama],[data-fondo],.cookie{display:none!important}
  .hero__scheda::after,.hero__testo::before,.hero__testo::after,.passi::before,.passi::after,.contatto::before,.contatto::after,.domande::before{display:none!important}
  .testata{position:static}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,[data-reveal],[data-parola]>span,[data-cifra],.scheda__foto,.studio__foto{opacity:1!important;translate:none!important;clip-path:none!important}
  /* si stampa anche ciò che non è mai entrato in vista: figli dei blocchi, icone, linee, evidenziatore */
  :is(main,.testata,.piede) :not([data-segno]):not([data-segno] *){opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important}
  [pathLength]:not([data-segno] *){stroke-dashoffset:0!important;opacity:1!important}
  .passi__lista::after,.passo::before,.ambiti li+li::before,.domande__lista>ul li::before,.contatto__sx::after,.contatto__dx::before,.piede__giu::before{scale:none!important}
  main :is(p,li)>strong{background-size:100% 38%!important}
  .domanda__risposta[hidden]{display:grid!important}
  .domanda__risposta{grid-template-rows:1fr!important}
}

/* pulsanti con il testo lungo («Richiedi informazioni senza impegno»): sotto 400 px vanno a capo invece di toccare il bordo */
@media (max-width:399px){.bottone{white-space:normal;text-align:center;line-height:1.25}.hero__azioni .bottone,.contatto .bottone{height:auto;min-height:52px;padding-top:12px;padding-bottom:12px}}