/* TerraSignal — sistema di design UNIFICATO al template Campi Flegrei (2026-07-24).
Tema: dark "mission control". Accento: verde-segnale. Rosso/blu = SCIENZA, non brand.
Font: Montserrat (display+body) + IBM Plex Mono (dati). Logo variante D. */
@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url(fonts/Montserrat-400.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:800;font-display:swap;src:url(fonts/Montserrat-800.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-weight:900;font-display:swap;src:url(fonts/Montserrat-900.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(fonts/IBMPlexMono-500.woff2) format('woff2')}
:root{
--ground:#060a12; --surface:#0b1626; --surface-2:#112238;
--line:#20374f; --line-soft:#152538;
--ink:#e9f1fb; --muted:#8ea6c2; --faint:#5f7793;
--signal:#43d675; --signal-2:#2fa85a; --signal-ink:#071810;
--up:#e5484d; --down:#5a9bd8;
--amber:#e0a33e; --warn-bg:#211a0e; --warn-line:#5a4a22; --warn-ink:#e0b877;
--font:'Montserrat',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--max:1080px;
/* scala di spaziatura: nomi per i quattro valori gia' usati nel foglio.
Sostituzioni a valore IDENTICO — nessuna di queste righe muove un pixel. */
--s-1:12px; --s-2:16px; --s-3:24px; --s-4:48px;
/* scala tipografica: i tre passi fluidi del sito diventano espliciti, agli
STESSI valori di oggi. Alzare il minimo di --t-2 da 20 a 21px e' stato
provato e MISURATO: rientra nel ±10% dell'involucro tipografico ma sfonda il
budget di pixel su schermo stretto (delta medio di canale 15,82 su
infrastrutture.html, 10,19 su note-legali.html, 8,69 su territorio.html,
tetto 8). Un passo di corpo su schermo stretto rimpagina tutto cio' che sta
sotto: e' una decisione di gerarchia da prendere con il titolare, non un
ritocco che TASK-005 possa far passare. Numeri in VISUAL_IDENTITY_REPORT.md. */
--t-1:clamp(30px,4.6vw,44px); --t-2:clamp(20px,2.6vw,26px); --t-3:clamp(17px,2vw,20px);
/* fuoco */
--focus:2px; --focus-offset:2px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--ground);
font-family:var(--font); font-weight:400; line-height:1.62; font-size:17px;
-webkit-font-smoothing:antialiased}
/* SFONDO FISSO — lo stesso render Sentinel-1 dell'hero del caso studio.
Due strati in position:fixed (non background-attachment:fixed, che su iOS
non regge): l'immagine, e sopra una velatura che tiene il contrasto del
testo costante mentre il contenuto scorre. */
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
background:url(img/hero-sat.jpg) center center / cover no-repeat; opacity:.5}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(120% 90% at 50% 32%, rgba(6,10,18,.30) 0%, rgba(6,10,18,.70) 100%),
linear-gradient(180deg, rgba(6,10,18,.34) 0%, rgba(6,10,18,.52) 100%)}
@media(max-width:760px){
body::before{opacity:.38} /* su schermo stretto il crop ingrandisce: si scurisce */
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--s-3)}
a{color:var(--signal); text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:800}
::selection{background:var(--signal); color:var(--signal-ink)}
/* FUOCO VISIBILE — WCAG 2.4.7 e 2.4.11. Anello REALE, non un alone: --signal
misura 10,49:1 sul fondo di pagina, 9,61:1 sui pannelli, 9,80:1 sul fondo dei
campi. L'alone verde al 13% di alfa che c'era prima misura 1,28:1 e resta
dov'e', come decorazione: da solo non era un indicatore di fuoco. */
:focus-visible{outline-style:solid; outline-width:var(--focus);
outline-color:var(--signal); outline-offset:var(--focus-offset)}
/* sul verde pieno l'anello CHIARO non si vede: --ink su --signal misura 1,66:1.
Anello scuro dentro (--signal-ink, 9,69:1) e alone verde fuori (10,49:1). */
/* offset NEGATIVO: l'anello scuro va disegnato DENTRO il pulsante, dove ha il
verde sotto. Fuori avrebbe il fondo scuro della pagina e non si vedrebbe. */
.cta:focus-visible, .mainnav a.nav-cta:focus-visible{outline-color:var(--signal-ink);
outline-offset:-4px; box-shadow:0 0 0 var(--focus) var(--signal)}
/* l'hamburger e' un : l'anello va
messo su cio' che si vede, altrimenti il fuoco c'e' ma non si nota */
.navtoggle:focus-visible ~ .hamb{outline-style:solid; outline-width:var(--focus);
outline-color:var(--signal); outline-offset:var(--focus-offset)}
/* SALTO AL CONTENUTO — primo elemento focalizzabile di ogni pagina. Ritagliato
via, mai display:none: un collegamento con display:none esce dalla tabulazione
e non servirebbe a nulla. */
.skiplink{position:absolute; top:0; left:0; z-index:100; width:1px; height:1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap;
padding:10px var(--s-2); font-family:var(--mono); font-size:15px; font-weight:800;
letter-spacing:.02em}
.skiplink:focus{width:auto; height:auto; overflow:visible; clip-path:none;
color:var(--signal-ink); background:var(--signal); text-decoration:none;
outline-color:var(--signal-ink); outline-offset:0}
/* banner bozza */
.draft{background:var(--warn-bg); border-bottom:1px solid var(--warn-line);
color:var(--warn-ink); font-size:12.5px; text-align:center; padding:6px 12px;
letter-spacing:.3px; font-family:var(--mono)}
/* header / nav — barra singola moderna (modello: nav del caso studio) */
header.site{background:#080f1ad9; backdrop-filter:blur(11px); border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:40}
header.site .wrap{display:flex; align-items:center; gap:20px; padding:11px clamp(20px,3.5vw,40px);
position:relative; max-width:none}
.brand{display:flex; align-items:center; flex:none}
.brand .logo{height:25px; display:block}
.brand .mark,.brand .name,.brand .by{display:none} /* vecchio marchio/byline: fuori dall'header */
.mainnav{display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:wrap}
.mainnav a{padding:8px 11px; font-size:13px; color:var(--muted); border-radius:8px;
font-weight:500; white-space:nowrap; transition:color .15s, background .15s}
.mainnav a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
.mainnav a.active{color:var(--signal)}
.mainnav a.nav-cta{background:var(--signal); color:var(--signal-ink); font-weight:800; line-height:20px;
font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; padding:9px 16px; margin-left:8px}
.mainnav a.nav-cta:hover{background:#5fe08a; color:var(--signal-ink)}
/* tendina "Casi studio" — nativo: si apre col clic, funziona da
tastiera e SENZA JavaScript, coerente con l'hamburger che gia' usa CSS puro */
.navdrop{position:relative}
.navdrop summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
padding:8px 11px; font-size:13px; color:var(--muted); border-radius:8px; font-weight:500;
white-space:nowrap; transition:color .15s, background .15s}
.navdrop summary::-webkit-details-marker{display:none}
.navdrop summary::after{content:""; width:5px; height:5px; margin-top:-3px;
border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
transform:rotate(45deg); transition:transform .15s}
.navdrop[open] summary::after{transform:rotate(-135deg); margin-top:2px}
.navdrop summary:hover{color:var(--ink); background:var(--surface-2)}
.navdrop.active summary{color:var(--signal)}
.navdrop-panel{position:absolute; top:calc(100% + 8px); left:0; min-width:190px; z-index:50;
display:flex; flex-direction:column; gap:2px; padding:6px;
background:#0b1626f2; backdrop-filter:blur(11px);
border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px #00000059}
.navdrop-panel a{padding:9px 12px; font-size:13px; color:var(--muted); border-radius:7px;
white-space:nowrap; transition:color .15s, background .15s}
.navdrop-panel a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
/* secondo livello: si apre al passaggio del mouse sulla voce del caso */
.navsub{position:relative}
.navsub > a{display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:9px 12px; font-size:13px; color:var(--muted); border-radius:7px; white-space:nowrap;
transition:color .15s, background .15s}
.navsub > a::after{content:""; width:5px; height:5px; flex:none;
border-right:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg)}
.navsub:hover > a, .navsub:focus-within > a{color:var(--ink); background:var(--surface-2); text-decoration:none}
/* il sottomenu resta nel DOM e si rende invisibile: cosi' si puo' ritardare la
chiusura. Con display:none non sarebbe possibile animare nulla. */
.navsub-panel{visibility:hidden; opacity:0; display:flex; position:absolute;
left:calc(100% + 6px); top:-6px; min-width:160px;
flex-direction:column; gap:2px; padding:6px; z-index:60;
background:#0b1626f2; backdrop-filter:blur(11px);
border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px #00000059;
transition:visibility 0s linear .28s, opacity .12s ease .28s}
/* ponte invisibile sul varco di 6px fra la voce e il pannello: senza, il
puntatore esce da .navsub a meta' strada e il sottomenu si chiude */
.navsub-panel::before{content:""; position:absolute; top:0; bottom:0; left:-12px; width:12px}
.navsub:hover .navsub-panel, .navsub:focus-within .navsub-panel{
visibility:visible; opacity:1; transition-delay:0s}
.navsub-panel a{padding:9px 12px; font-size:13px; color:var(--muted); border-radius:7px; white-space:nowrap}
.navsub-panel a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
/* hamburger (mobile) */
.navtoggle{position:absolute; opacity:0; pointer-events:none}
.hamb{display:none; margin-left:auto; width:42px; height:38px; cursor:pointer; position:relative}
.hamb span,.hamb span::before,.hamb span::after{content:""; position:absolute; left:10px; width:22px;
height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.hamb span{top:18px} .hamb span::before{top:-7px} .hamb span::after{top:7px}
.navtoggle:checked ~ .hamb span{background:transparent}
.navtoggle:checked ~ .hamb span::before{top:0; transform:rotate(45deg)}
.navtoggle:checked ~ .hamb span::after{top:0; transform:rotate(-45deg)}
@media(max-width:880px){
.hamb{display:block}
.mainnav{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
background:#080f1af7; border-bottom:1px solid var(--line); padding:8px 16px 18px; gap:2px;
margin-left:0; max-height:0; overflow:hidden; transition:max-height .28s ease}
.navtoggle:checked ~ .mainnav{max-height:560px}
.mainnav a{padding:12px 12px; font-size:15px}
.mainnav a.nav-cta{margin:8px 0 0; text-align:center; padding:12px}
/* a menu impilato la tendina scorre nel flusso, non fluttua */
.navdrop summary{padding:12px; font-size:15px}
.navdrop-panel{position:static; min-width:0; padding:0 0 4px 14px;
background:transparent; backdrop-filter:none; border:0; border-radius:0; box-shadow:none}
.navdrop-panel a{padding:10px 12px; font-size:14px}
/* su touch il passaggio del mouse non esiste: il secondo livello resta aperto */
.navsub > a{padding:10px 12px; font-size:14px}
.navsub > a::after{display:none}
.navsub-panel{visibility:visible; opacity:1; transition:none; display:flex; position:static;
min-width:0; padding:0 0 0 16px;
background:transparent; backdrop-filter:none; border:0; border-radius:0; box-shadow:none}
.navsub-panel::before{display:none}
.navsub-panel a{padding:9px 12px; font-size:13.5px}
}
/* Secondo livello e puntatore senza passaggio del mouse. Sopra gli 880px il
sottomenu si apre SOLO su :hover: su un dispositivo touch largo (tablet
orizzontale, portatile senza mouse) non si apriva mai. Si replica lo stesso
comportamento statico che sotto gli 880px c'e' gia'. Nessun markup, nessun JS. */
@media(hover:none) and (min-width:881px){
.navsub > a::after{transform:rotate(135deg)}
.navsub-panel{visibility:visible; opacity:1; transition:none; position:static;
left:auto; top:auto; min-width:0; padding:6px 0 0 14px;
background:transparent; backdrop-filter:none; border:0; border-radius:0; box-shadow:none}
.navsub-panel::before{display:none}
}
/* main + tipografia */
main{padding:46px 0 80px}
/* reveal-on-scroll — come la pagina caso studio. Attivo SOLO con .js (progressive
enhancement): senza JS il contenuto è pienamente visibile. */
html.js main .wrap > *{opacity:0; transform:translateY(18px);
transition:opacity .6s ease, transform .65s cubic-bezier(.2,.7,.2,1)}
html.js main .wrap > *.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
html.js main .wrap > *{opacity:1; transform:none; transition:none}
}
h1,h2,h3{font-weight:900; text-wrap:balance}
h1{font-size:var(--t-1); line-height:1.08; letter-spacing:-.015em; margin:0 0 12px}
.sub{font-size:var(--t-3); color:var(--muted); margin:0 0 28px; line-height:1.5; font-weight:400}
h2{font-size:var(--t-2); letter-spacing:-.01em; margin:var(--s-4) 0 14px}
h3{font-size:17px; margin:22px 0 6px; font-weight:800}
.eyebrow{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.22em;
color:var(--signal); font-weight:500; margin:0 0 12px}
p{margin:0 0 15px}
.lead{font-size:18px; line-height:1.55}
ul.plain{padding-left:0; list-style:none}
ul.plain li{margin:10px 0; padding-left:22px; position:relative}
ul.plain li::before{content:""; position:absolute; left:0; top:11px; width:8px; height:8px;
border-radius:50%; background:var(--signal)}
hr{border:0; border-top:1px solid var(--line); margin:44px 0}
/* HERO */
/* nessun pannello: il titolo sta sullo sfondo della pagina, come la prima
sezione del caso studio */
.hero{position:relative; margin:6px 0 34px}
.hero-body{padding:clamp(24px,4vw,56px) 0; position:relative; z-index:2}
.hero .eyebrow{color:var(--signal); margin-bottom:16px}
/* stesso rendering dell'h1 del caso studio (campi_flegrei.html) */
.hero h1,
h1.hero-title{color:var(--ink); font-size:clamp(2.4rem,5.6vw,5rem); letter-spacing:-.015em;
line-height:1.05; max-width:16ch; margin:.5em 0 .55em}
.hero .sub{color:var(--muted); margin:26px 0 0; max-width:62ch}
/* bottoni a sinistra e immagine a destra, allineati in cima alla stessa riga */
.hero-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px); align-items:start}
.hero-actions{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-1)}
.hero-actions .cta{margin:0}
.hero-art{position:relative; min-height:260px; border:1px solid var(--line); border-radius:14px;
background:#070d16 center/cover no-repeat;
display:flex; align-items:flex-end; justify-content:flex-end; padding:14px 16px}
/* didascalia sull'immagine */
.hero-art .cap{margin:0; font-size:12px; font-weight:800; color:#fff; text-align:right;
line-height:1.35; max-width:22ch; text-shadow:0 1px 3px rgba(0,0,0,.75)}
.hero-art svg{position:absolute; inset:0; width:100%; height:100%; opacity:.5}
@media(max-width:760px){
.hero-row{grid-template-columns:1fr}
.hero-art{min-height:190px}
}
/* sezione "Cos'è l'InSAR" */
.insar{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,44px); align-items:center; margin:20px 0 8px}
.insar p{color:var(--muted); font-size:16px}
.insar .lead{color:var(--ink); font-size:18px; font-weight:400; line-height:1.55}
.insar-fig{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px}
.insar-fig svg{width:100%; height:auto; display:block}
@media(max-width:760px){.insar{grid-template-columns:1fr}}
/* CTA */
.cta{display:inline-block; margin:6px 10px 6px 0; padding:13px 22px; background:var(--signal);
color:var(--signal-ink); border-radius:9px; font-weight:800; font-size:14.5px; letter-spacing:.2px;
font-family:var(--mono); transition:transform .15s, box-shadow .15s}
.cta:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 30px #43d67535}
.cta.ghost{background:transparent; color:var(--signal); border:1px solid var(--signal-2)}
.cta.ghost:hover{background:#12271b; box-shadow:none; transform:none}
/* porte */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); margin:var(--s-3) 0}
.door{position:relative; border:1px solid var(--line); border-radius:14px; padding:22px 20px 20px;
background:var(--surface); transition:border-color .15s, transform .15s}
.door::before{content:""; position:absolute; left:20px; top:0; width:36px; height:3px;
background:var(--signal); border-radius:0 0 2px 2px}
.door:hover{border-color:var(--signal-2); transform:translateY(-3px)}
.door h3{margin:8px 0 8px; font-size:18px}
.door p{font-size:14.5px; color:var(--muted); margin:0 0 14px; line-height:1.5}
.door a{font-size:14px; font-weight:700}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
/* variante con illustrazione: la porta INTERA e' il link */
.door.card{display:block; color:inherit; overflow:hidden}
.door.card::before{display:none} /* la barretta verde la sostituisce l'illustrazione */
.door.card:hover{text-decoration:none}
.door.card h3{color:var(--ink)}
.door .go{font-size:14px; font-weight:700; color:var(--signal)}
.door.card:hover .go{text-decoration:underline}
/* la fotografia arriva ai bordi della carta */
.door-art{display:block; margin:-22px -20px 16px; background:#070d16;
border-bottom:1px solid var(--line)}
.door-art img{display:block; width:100%; height:auto;
filter:saturate(.92) brightness(.94); transition:filter .18s, transform .18s}
.door.card:hover .door-art img{filter:none; transform:scale(1.02)}
/* quattro impegni — griglia 2x2, non cliccabile */
.commitments{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2); margin:var(--s-3) 0}
/* la grafica e' lo sfondo della card; il testo resta testo vero (selezionabile,
ingrandibile, leggibile dagli screen reader) sulla parte scura a sinistra */
.commitment{border:1px solid var(--line); border-radius:14px; padding:24px 22px 22px;
min-height:230px;
background-color:var(--surface);
background-repeat:no-repeat;
background-position:right center;
background-size:cover;
position:relative; isolation:isolate; overflow:hidden}
/* velo di sicurezza: tiene il contrasto del testo quando la card e' stretta
e l'inquadratura porta il disegno piu' a sinistra */
.commitment::before{content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg, rgba(11,22,38,.93) 38%, rgba(11,22,38,.5) 68%, rgba(11,22,38,0) 92%)}
.commitment > *{position:relative; max-width:31ch}
.commitment .lbl{max-width:none; font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
letter-spacing:.18em; color:var(--signal); margin:0 0 8px}
.commitment .head{font-size:17px; font-weight:800; line-height:1.32; color:var(--ink); margin:0 0 8px}
.commitment .txt{font-size:16px; color:var(--muted); line-height:1.55; margin:0}
@media(hover:hover){
.commitment{transition:border-color .15s, transform .15s}
.commitment:hover{border-color:var(--signal-2); transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
.commitment{transition:none}
.commitment:hover{transform:none}
}
@media(max-width:760px){
.commitments{grid-template-columns:1fr}
/* a colonna singola il testo si allarga: il velo copre di piu' */
.commitment > *{max-width:none}
.commitment::before{background:linear-gradient(90deg, rgba(11,22,38,.94) 42%, rgba(11,22,38,.6) 72%, rgba(11,22,38,.1) 100%)}
}
/* blocchi informativi */
.note{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:20px 0}
.callout{position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
padding:16px 18px 16px 22px; margin:22px 0}
.callout::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:var(--signal); border-radius:12px 0 0 12px}
.callout .lbl{font-weight:800; display:block; margin-bottom:5px; color:var(--ink)}
.flag{background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:12px;
padding:13px 16px; margin:22px 0; font-size:14px; color:var(--warn-ink)}
.ph{color:var(--amber); font-weight:500; font-family:var(--mono); font-size:.92em}
/* metriche */
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:18px 0;
background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.metric{background:var(--surface); padding:20px 20px}
.metric .k{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 8px}
.metric .v{font-family:var(--mono); font-size:26px; font-weight:500; color:var(--ink);
font-variant-numeric:tabular-nums}
.metric .v .ph{font-size:.8em}
@media(max-width:760px){.metrics{grid-template-columns:1fr}}
/* catena di misura — infografica scomposta (scena + 5 passi + claim) */
.chain-fig{margin:22px 0 0}
.chain-fig img{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:16px}
/* la didascalia della scena NON è una nota: è testo di pagina, perché il riquadro
che ripeteva la stessa frase è stato tolto dall'illustrazione */
.chain-fig figcaption{font-size:17px; color:var(--ink); line-height:1.62; margin-top:16px}
/* su schermo stretto le etichette dell'illustrazione diventerebbero illeggibili:
la figura scorre dentro il proprio contenitore, la pagina no */
@media(max-width:760px){
.chain-fig .scroller{overflow-x:auto; -webkit-overflow-scrolling:touch;
border:1px solid var(--line); border-radius:16px}
.chain-fig .scroller img{min-width:700px; border:0; border-radius:0}
}
.chain{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:16px 0 0}
.chain figure{margin:0; border:1px solid var(--line); border-radius:14px; background:var(--surface);
overflow:hidden; transition:border-color .15s, transform .15s}
.chain figure:hover{border-color:var(--signal-2); transform:translateY(-3px)}
.chain img{width:100%; height:auto; display:block; border-bottom:1px solid var(--line)}
.chain figcaption{padding:14px 15px 16px}
.chain .n{font-family:var(--mono); font-size:11px; color:var(--signal); letter-spacing:.18em}
.chain h4{margin:7px 0 6px; font-size:13.5px; font-weight:800; text-transform:uppercase;
letter-spacing:.05em; line-height:1.25}
.chain p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.5}
@media(max-width:980px){.chain{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.chain{grid-template-columns:1fr}}
.chain-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin:16px 0 0;
border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:14px 18px;
font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted)}
.chain-foot .res{color:var(--signal)}
.chain-foot .sep{color:var(--line)}
/* scala dei servizi — verifica, misura, continuità */
/* OFFERTA — tre pannelli, immagine a lato alternata */
.offer{display:grid; gap:18px; margin:26px 0}
.offer-step{display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr);
border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface)}
.offer-step.reverse{grid-template-columns:minmax(0,1fr) minmax(0,38%)}
.offer-step.reverse .offer-art{order:2}
.offer-art{background:#070d16 center/cover no-repeat; min-height:300px}
.offer-body{padding:clamp(24px,3vw,36px); --ind:60px}
.offer-head{display:flex; align-items:center; gap:16px}
.offer-head .offer-num{font-family:var(--mono); font-size:15px; color:var(--signal); flex:none;
border:1px solid var(--signal-2); border-radius:50%; width:44px; height:44px;
display:grid; place-items:center}
.offer-head h2{margin:0; font-size:clamp(18px,2.3vw,23px); text-transform:uppercase; letter-spacing:.005em}
.offer-lead{position:relative; color:var(--muted); font-size:16px; max-width:60ch;
margin:20px 0 24px; padding:18px 0 0 var(--ind)}
.offer-lead::before{content:""; position:absolute; top:0; left:var(--ind); width:34px; height:2px;
background:var(--signal)}
.offer-facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
border-top:1px solid var(--line); padding-top:22px}
.offer-facts.due{grid-template-columns:repeat(3,minmax(0,1fr))}
.offer-fact{padding:0 18px; border-left:1px solid var(--line)}
.offer-fact:first-child{padding-left:0; border-left:0}
.offer-fact svg{display:block; width:26px; height:26px; margin:0 0 12px; fill:none;
stroke:var(--signal); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.offer-fact svg .fill{fill:var(--signal); stroke:none}
.offer-fact .k{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em;
color:var(--signal); margin:0 0 8px}
.offer-fact p{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0}
/* i tre fotogrammi T1/T2/T3 */
.offer-art.frames{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
padding:clamp(16px,2vw,24px); background:#070d16}
.offer-art.frames figure{margin:0; display:flex; flex-direction:column}
.offer-art.frames span{display:block; flex:1; min-height:150px; border-radius:8px;
border:1px solid var(--line); background:#070d16 center/cover no-repeat}
.offer-art.frames figcaption{font-family:var(--mono); font-size:12px; color:var(--signal);
text-align:center; margin-top:9px}
@media(max-width:900px){
.offer-step,.offer-step.reverse{grid-template-columns:1fr}
.offer-step.reverse .offer-art{order:0}
.offer-art{min-height:210px}
.offer-body{--ind:0}
.offer-facts,.offer-facts.due{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 22px}
.offer-fact{padding:0; border-left:0}
}
@media(max-width:560px){
.offer-facts,.offer-facts.due{grid-template-columns:1fr}
}
/* quando è utile / quando non basta */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); margin:22px 0}
.split > div{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:18px 20px}
.split .yes{border-color:var(--signal-2)}
.split h3{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.14em;
font-family:var(--mono); font-weight:500}
.split .yes h3{color:var(--signal)}
.split .no h3{color:var(--warn-ink)}
.split ul{margin:0; padding-left:18px; color:var(--muted); font-size:15px}
.split li{margin:8px 0}
@media(max-width:760px){.split{grid-template-columns:1fr}}
/* processo in tre passi */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:22px 0}
.step{background:var(--surface); padding:20px}
.step .n{font-family:var(--mono); font-size:11.5px; color:var(--signal); letter-spacing:.2em}
.step h3{margin:9px 0 6px; font-size:16px}
.step p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.5}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
/* modulo qualificante */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin:20px 0}
.formgrid .full{grid-column:1/-1}
.formgrid label{display:block; font-size:14px; color:var(--muted); margin-bottom:2px}
.formgrid .hint{font-size:12.5px; color:var(--muted); margin:2px 0 0; font-family:var(--mono)}
select{font-family:var(--font); font-size:15px; border:1px solid var(--faint); border-radius:9px;
padding:11px 13px; width:100%; margin:4px 0; background:#0a1420; color:var(--ink)}
select:focus{border-color:var(--signal-2); box-shadow:0 0 0 3px #43d67522}
@media(max-width:760px){.formgrid{grid-template-columns:1fr}}
/* tabelle */
table{border-collapse:collapse; width:100%; margin:18px 0; font-size:15px}
th,td{border:1px solid var(--line); padding:10px 13px; text-align:left; vertical-align:top}
th{background:var(--surface-2); font-weight:800}
td{background:var(--surface)}
td .ph, table .ph{white-space:nowrap}
/* figure */
figure{margin:22px 0; padding:0}
figure img{width:100%; border:1px solid var(--line); border-radius:12px; display:block}
/* tre riquadri di chi-sono. SCOPED sotto .grid3: una regola su `.card` da sola
colpirebbe anche le `.door.card` di home e soluzioni. */
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2); margin:26px 0}
.grid3 .card{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:20px}
.grid3 .card .lbl{display:block; font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
letter-spacing:.16em; color:var(--signal); margin:0 0 10px}
.grid3 .card p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.55}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}
/* marchio Nexalith: PNG trasparente, proporzioni del file cosi' com'e'
(1063x283) — nessun ritaglio da parte mia. Reso a 460px, meno della meta'
dei 1000 dell'asset. Il file e' gia' stretto attorno al marchio: bastano
i margini normali, niente compensazioni negative. */
.brandshot{margin:30px 0 34px}
/* NIENTE flex qui: un elemento flex con altezza auto viene stirato in verticale
(align-items:stretch e' il default) mentre max-width gli comprime la larghezza,
e il marchio esce schiacciato. Blocco centrato + height:auto e' immune. */
.brandshot img{display:block; margin:0 auto; width:auto; height:auto;
max-width:min(100%, 460px); border:0; border-radius:0}
.figbox{border:1px dashed var(--line); border-radius:12px; background:var(--surface);
color:var(--muted); text-align:center; padding:46px 18px; font-size:14px; line-height:1.5}
figcaption{font-size:13px; color:var(--muted); margin-top:9px; line-height:1.5}
/* form */
input[type=text], textarea, input[type=email]{font-family:var(--font); font-size:15px;
border:1px solid var(--faint); border-radius:9px; padding:11px 13px; width:100%; margin:4px 0;
background:#0a1420; color:var(--ink)}
input:focus, textarea:focus{border-color:var(--signal-2); box-shadow:0 0 0 3px #43d67522}
label{font-size:15px; color:var(--muted)}
/* footer */
footer.site{border-top:1px solid var(--line); background:#080f1a; color:var(--muted); font-size:13px}
footer.site .wrap{padding:34px var(--s-3)}
footer.site img.logo{height:22px; opacity:.9; margin-bottom:14px; display:block}
footer.site strong{color:var(--ink)}
footer.site .ph{color:var(--amber)}
footer.site a{color:var(--muted); border-bottom:1px solid var(--line)}
footer.site a:hover{color:var(--ink)}
.footlinks{margin-top:12px}
.footlinks a{margin-right:18px; border:0}
.grade-pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
letter-spacing:.08em; color:var(--signal); border:1px solid var(--signal-2); border-radius:99px; padding:5px 12px}