/* ============================================================================
   AUVITEC — sito web, revisione 4 (01/08/2026)
   Direttiva di Marco: pulito, leggibile, conciso, moderno — ma VIVO.
   Niente pagina tutta bianca: bande scure, tinte, fotografie vere di cantiere.
   Colore usato per distinguere, non per decorare.

   07/08/2026 — carattere proprio e rifinitura della veste.
   Il sito non usa più il carattere di sistema: Inter variabile è SERVITO DA NOI
   (cartella caratteri/), non da Google Fonts né da un CDN. Nessuna richiesta a
   terzi = resta vera la riga della privacy «nessun tracciamento».
   ========================================================================= */

@font-face{
  font-family:"Inter";
  /* format("woff2") e basta: «woff2-variations» era una sintassi provvisoria,
     oggi i browser la ignorano e il carattere non viene caricato affatto */
  src:url("/caratteri/inter-latin-variabile.woff2") format("woff2");
  font-weight:100 900;      /* un solo file per tutti i pesi: 48 KB in tutto */
  font-style:normal;
  font-display:swap;        /* il testo si legge subito, col carattere di sistema */
  /* latino esteso Google: accentate, «guillemet», trattini e virgolette curve */
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#0E1B26;
  --navy:#0B2A4A;
  --navy-fondo:#071B30;
  --blu:#1C5A93;
  --blu-chiaro:#8FB6DE;
  --terra:#C8452D;
  --terra-chiaro:#E4694E;
  --ambra:#B87503;
  --verde:#1F7A4D;
  /* misurato: #66798C su bianco dava 4.49:1, appena sotto il minimo AA per il
     testo normale delle schede. Questo sta a 5:1 e non cambia il tono. */
  --muto:#5E7185;
  --muto-chiaro:#A9C1D8;
  --linea:#E3E9F0;
  --tinta:#F2F6FA;
  /* veli di colore: le quattro schede del rischio si distinguono a colpo d'occhio */
  --terra-velo:#FBEAE5;  --terra-bordo:#EEC0B3;
  --ambra-velo:#FAF0DB;  --ambra-bordo:#E9CE95;
  --blu-velo:#E7F0FA;    --blu-bordo:#BCD3EC;
  --verde-velo:#E4F2EA;  --verde-bordo:#B0D6C2;
  --carta:#FFFFFF;
  --max:1180px;
  --testo-max:64ch;
  --raggio:14px;
  /* bordo che si vede davvero: --linea da sola sul bianco spariva */
  --bordo:#D9E2EC;
  /* ombre a due strati: un contatto netto vicino + una diffusione morbida.
     È ciò che separa una scheda «disegnata» da una scheda che sta sul foglio. */
  --ombra-1:0 1px 2px rgba(11,42,74,.05), 0 1px 3px rgba(11,42,74,.04);
  --ombra-2:0 2px 4px rgba(11,42,74,.05), 0 12px 28px rgba(11,42,74,.10);
  --ombra-3:0 4px 8px rgba(4,16,28,.10), 0 30px 60px rgba(4,16,28,.34);
  --molla:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  /* gli ancoraggi (#servizi, #contatto…) atterrano sotto la barra fissa, non dietro */
  scroll-behavior:smooth;scroll-padding-top:92px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}
body{
  margin:0;
  font-family:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,
    BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.62;
  color:var(--ink);
  background:var(--carta);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none; /* i pesi esistono davvero: mai finti grassetti */
}
body{overflow-x:clip;} /* nessun elemento può trascinare la pagina in orizzontale */
/* height:auto: gli attributi width/height delle <img> servono solo a prenotare
   lo spazio prima del caricamento; l'altezza resa la decide il CSS */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
/* i titoli non si spezzano più in righe sbilenche («Un fornitore e un / consulente
   non guardano la / stessa cosa»): il browser bilancia le righe da solo */
h1,h2,h3,h4{overflow-wrap:break-word;text-wrap:balance;}
p,li,figcaption{text-wrap:pretty;} /* niente parola orfana in ultima riga */
/* cifre di larghezza fissa dove i numeri stanno in colonna o in pastiglia */
.voce .n,.dati .v,.recapiti li{font-variant-numeric:tabular-nums;}
::selection{background:var(--blu);color:#fff;}
:focus-visible{outline:3px solid var(--terra-chiaro);outline-offset:2px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

/* «vai al contenuto»: invisibile finché non riceve il fuoco da tastiera */
.salta{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--terra);color:#fff;font-weight:600;text-decoration:none;
  padding:12px 22px;border-radius:0 0 10px 0;
}
.salta:focus{left:0;}

/* comparsa morbida delle sezioni (classe aggiunta solo da JS: senza JS niente attese) */
.rivela{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
.rivela.vista{opacity:1;transform:none;}

/* ---------- marchio: il punto sta staccato come sulle relazioni tecniche
   (Pal. Cipolla: letter-spacing sul wordmark, nessun ritocco sul punto;
   qui in em cosi' la distanza resta la stessa a ogni corpo) ---------- */
.wm{
  font-weight:800;letter-spacing:.13em;color:var(--navy);line-height:1;
  display:inline-block;text-decoration:none;
}
.wm .dot{color:var(--terra);}
.wm.chiaro{color:#fff;}
.wm.chiaro .dot{color:var(--terra-chiaro);}

/* ---------- navigazione ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,27,48,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .2s, box-shadow .2s;
}
/* appena la pagina scorre, la barra si stacca dal contenuto */
.nav.giu{background:rgba(7,27,48,.97);box-shadow:0 10px 30px rgba(4,16,28,.30);}
.nav .wrap{display:flex;align-items:center;height:74px;gap:40px;}
.nav .wm{font-size:25px;color:#fff;}
.nav .wm .dot{color:var(--terra-chiaro);}
.nav menu{display:flex;gap:30px;margin:0 0 0 auto;padding:0;list-style:none;align-items:center;}
.nav menu a{text-decoration:none;font-size:16.5px;color:var(--muto-chiaro);font-weight:500;transition:color .15s;}
.nav menu a:hover{color:#fff;}

/* hamburger: esiste solo sotto i 980px */
.apri-menu{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:12px;flex-direction:column;gap:5px;
}
.apri-menu span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s;}
.nav.aperto .apri-menu span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.aperto .apri-menu span:nth-child(2){opacity:0;}
.nav.aperto .apri-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.btn{
  display:inline-block;background:var(--terra);color:#fff !important;text-decoration:none;
  font-weight:600;font-size:16.5px;padding:13px 24px;border-radius:10px;border:0;cursor:pointer;
  letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(120,30,15,.30), 0 6px 16px rgba(200,69,45,.24);
  transition:transform .14s var(--molla), background .15s, box-shadow .16s;
}
.btn:hover{background:#B03C27;transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(120,30,15,.28), 0 10px 24px rgba(200,69,45,.30);}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(120,30,15,.34);}
.btn.linea{background:transparent;color:#fff !important;border:1px solid rgba(255,255,255,.35);
  box-shadow:none;}
.btn.linea:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.55);box-shadow:none;}
.btn.chiara{background:#fff;color:var(--navy) !important;}
.btn.chiara:hover{background:#E9EFF5;}

/* ---------- tipografia condivisa ----------
   Inter vuole tracking negativo crescente col corpo: senza, i titoli grandi
   sembrano spaziati; con troppo, si impastano. Scala misurata a schermo. */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;color:var(--navy);}
h3{letter-spacing:-.015em;}
.kicker{
  font-size:16.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--terra);margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--terra);display:block;}
h2.titolo{font-size:clamp(29px,3.5vw,41px);line-height:1.14;margin:0 0 18px;max-width:24ch;
  letter-spacing:-.03em;}
p.guida{font-size:20px;line-height:1.6;color:var(--muto);max-width:var(--testo-max);margin:0 0 52px;}
section{padding:100px 0;}
#chi-siamo{padding:64px 0 56px;}
#chi-siamo p.guida{margin-bottom:22px;}
#chi-siamo p.guida:last-child{margin-bottom:0;}

/* bande: la pagina non è mai tutta bianca */
section.tinta{background:var(--tinta);}
section.scura{
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(28,90,147,.55), transparent 60%),
    radial-gradient(900px 460px at 92% 8%, rgba(200,69,45,.20), transparent 62%),
    var(--navy-fondo);
  color:#fff;
}
section.scura h2,section.scura h3{color:#fff;}
section.scura p.guida{color:var(--muto-chiaro);}
section.scura .kicker{color:var(--terra-chiaro);}
section.scura .kicker::before{background:var(--terra-chiaro);}

/* ---------- eroe ----------
   07/08 (sera): l'apertura non è più «testo a sinistra, cartolina a destra».
   La fotografia arriva al bordo dello schermo e regge da sola metà pagina;
   il testo si tiene allineato alla colonna del sito con un padding calcolato,
   così la griglia resta quella anche se l'immagine esce dal contenitore. */
.eroe{
  background:
    radial-gradient(1200px 600px at 6% 0%, rgba(28,90,147,.62), transparent 60%),
    var(--navy-fondo);
  color:#fff;position:relative;overflow:hidden;
}
/* reticolo tecnico appena percettibile: dà profondità al blu senza decorare */
.eroe::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(900px 500px at 10% 0%, #000, transparent 74%);
  mask-image:radial-gradient(900px 500px at 10% 0%, #000, transparent 74%);
}
.eroe-griglia{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:stretch;min-height:min(84vh,760px);
}
.eroe-testo{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-start;
  /* la colonna di testo resta incolonnata col resto del sito anche se
     l'immagine accanto sfonda fino al bordo destro della finestra */
  padding:52px 44px 64px max(32px, calc((100% - var(--max)) / 2 + 32px));
  padding-left:max(32px, calc((100vw - var(--max)) / 2 + 32px));
}
.eroe .eyebrow{
  align-self:flex-start;font-size:16.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--terra-chiaro);margin-bottom:22px;
  border:1px solid rgba(228,105,78,.45);border-radius:999px;padding:7px 16px;
}
/* qui l'a-capo è deciso a mano (il <br> prima di «solo se si capisce»):
   il bilanciamento automatico spezzerebbe anche la prima riga e sprecherebbe
   metà colonna. Vale solo per il titolo d'apertura. */
.eroe h1{font-size:clamp(36px,4.4vw,58px);line-height:1.06;color:#fff;margin-bottom:22px;
  letter-spacing:-.038em;text-wrap:pretty;}
.eroe h1 em{font-style:normal;color:var(--terra-chiaro);}
.eroe .lead{font-size:21px;line-height:1.5;color:var(--muto-chiaro);max-width:46ch;margin:0 0 38px;}
.eroe .azioni{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.eroe-foto{position:relative;margin:0;overflow:hidden;}
.eroe-foto img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
/* il blu non finisce con un taglio netto: sfuma dentro la fotografia */
.eroe-foto::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--navy-fondo) 0%, rgba(7,27,48,.55) 16%, rgba(7,27,48,.08) 42%, transparent 62%);
}
.eroe-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:110px 30px 22px;
  background:linear-gradient(transparent,rgba(4,16,28,.55) 44%,rgba(4,16,28,.92));
  font-size:16.5px;line-height:1.45;color:#E4EEF7;
}

/* ---------- riga credenziali: pastiglie, non paragrafi ---------- */
.credenziali{background:var(--navy);}
.credenziali .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  padding-top:22px;padding-bottom:22px;
}
.credenziali .et{
  font-size:16.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#7E9AB4;
}
.pastiglie{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}
.pastiglie li{
  font-size:16.5px;font-weight:500;color:#DCE8F4;line-height:1.3;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:7px 15px;
}
.pastiglie li.spicca{
  color:#fff;font-weight:600;
  background:rgba(200,69,45,.18);border-color:rgba(228,105,78,.45);
}

/* ---------- elenco rischi: ognuno col suo colore ---------- */
.elenco{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.voce{
  background:var(--terra-velo);border:1px solid var(--terra-bordo);
  border-radius:14px;padding:26px 28px;
  display:grid;grid-template-columns:auto 1fr;column-gap:18px;
  align-items:start;align-content:start;
}
.voce.ambra{background:var(--ambra-velo);border-color:var(--ambra-bordo);}
.voce.blu{background:var(--blu-velo);border-color:var(--blu-bordo);}
.voce.verde{background:var(--verde-velo);border-color:var(--verde-bordo);}
.voce .n{
  grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--terra);color:#fff;font-size:16.5px;font-weight:700;letter-spacing:.02em;
}
.voce.ambra .n{background:var(--ambra);}
.voce.blu .n{background:var(--blu);}
.voce.verde .n{background:var(--verde);}
.voce h3{font-size:21px;line-height:1.3;margin:0 0 6px;color:var(--navy);}
.voce p{margin:0;font-size:18px;color:#3B4E60;line-height:1.5;}

/* occhiello: la riga di raccordo dentro una sezione, senza sprecare un <h2> */
.occhiello{
  font-size:19px;line-height:1.55;color:var(--muto);max-width:var(--testo-max);
  margin:64px 0 26px;padding-left:20px;border-left:3px solid var(--terra);
}
section.scura .occhiello{color:var(--muto-chiaro);border-left-color:var(--terra-chiaro);}

/* blocco testo + immagine affiancati */
.affianco{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;}
.sim{display:grid;gap:22px;}
.affianco .sim figure{margin:0;background:#fff;border:1px solid #D9E2EC;border-radius:var(--raggio);overflow:hidden;box-shadow:var(--ombra-1);}
.affianco .sim figure img{display:block;width:100%;height:auto;aspect-ratio:auto;}
.affianco .sim figcaption{position:static;background:none;padding:14px 20px 16px;font-size:16.5px;line-height:1.5;color:var(--muto);}
.affianco.stretto{grid-template-columns:1.15fr .85fr;}
.affianco figure{margin:0;border-radius:var(--raggio);overflow:hidden;position:relative;}
.affianco figure img{width:100%;aspect-ratio:4/5;object-fit:cover;}
/* .largo = fotografia orizzontale: forzarla in 4/5 la sventrerebbe */
.affianco figure.largo img{aspect-ratio:3/2;}
.affianco figure.largo{box-shadow:var(--ombra-3);outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;}
.affianco figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 20px 14px;
  background:linear-gradient(transparent,rgba(4,16,28,.86));font-size:16.5px;color:#D6E4F1;
}

/* ---------- confronto ---------- */
.confronto{margin-top:8px;}
.confronto .riga{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.14);
}
.confronto .riga.capo{border-top:0;padding-top:0;padding-bottom:12px;}
.confronto .capo div{font-size:16.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;}
.confronto .capo .sx{color:var(--muto-chiaro);}
.confronto .capo .dx{color:var(--terra-chiaro);}
/* un segno prima di ogni voce: a sinistra un cerchio vuoto, a destra uno pieno.
   Si capisce quale colonna conta anche scorrendo con la coda dell'occhio. */
.confronto .sx,.confronto .dx{
  font-size:17.5px;padding-left:26px;position:relative;
}
.confronto .sx::before,.confronto .dx::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;
}
.confronto .sx{color:#93AEC7;}
.confronto .sx::before{border:1.5px solid #5E7B96;}
.confronto .dx{color:#fff;font-weight:600;}
.confronto .dx::before{background:var(--terra-chiaro);box-shadow:0 0 0 4px rgba(228,105,78,.18);}
.confronto .capo .sx,.confronto .capo .dx{padding-left:26px;}
.confronto .capo .sx::before,.confronto .capo .dx::before{display:none;}

/* ---------- servizi ----------
   Erano schede bianche su fondo bianco con un bordo quasi invisibile: sembravano
   una bozza. Ora la banda è in tinta e le schede tornano a essere oggetti. */
.servizi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.srv{
  position:relative;overflow:hidden;
  background:var(--carta);border:1px solid var(--bordo);border-radius:14px;padding:28px;
  box-shadow:var(--ombra-1);
  transition:transform .16s var(--molla), box-shadow .18s, border-color .18s;
}
/* filo di colore in testa: spento a riposo, si accende al passaggio */
.srv::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--terra);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--molla);
}
.srv.blu::before{background:var(--blu);}
.srv.ambra::before{background:var(--ambra);}
.srv.verde::before{background:var(--verde);}
.srv:hover{transform:translateY(-3px);box-shadow:var(--ombra-2);border-color:#C5D4E4;}
.srv:hover::before{transform:scaleX(1);}
.srv .ic{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgba(200,69,45,.10);color:var(--terra);margin-bottom:18px;
  box-shadow:inset 0 0 0 1px rgba(200,69,45,.16);
}
.srv .ic svg{width:23px;height:23px;}
.srv.blu .ic{background:rgba(28,90,147,.10);color:var(--blu);box-shadow:inset 0 0 0 1px rgba(28,90,147,.16);}
.srv.ambra .ic{background:rgba(184,117,3,.12);color:var(--ambra);box-shadow:inset 0 0 0 1px rgba(184,117,3,.20);}
.srv.verde .ic{background:rgba(31,122,77,.10);color:var(--verde);box-shadow:inset 0 0 0 1px rgba(31,122,77,.16);}
.srv h3{font-size:19.5px;line-height:1.35;margin-bottom:8px;}
.srv p{margin:0;font-size:17px;color:var(--muto);line-height:1.55;}
.perimetro{
  margin-top:36px;padding:20px 24px;border-radius:12px;
  background:rgba(184,117,3,.08);border:1px solid rgba(184,117,3,.28);
  font-size:17px;color:#5A4413;max-width:var(--testo-max);
}
.perimetro b{color:#7A5A08;font-weight:700;}

/* ---------- galleria dell'esistente ---------- */
.galleria{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.gal{margin:0;border-radius:12px;overflow:hidden;position:relative;background:#0A2038;}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .4s;}
.gal:hover img{transform:scale(1.03);}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:70px 20px 20px;
  background:linear-gradient(transparent,rgba(4,16,28,.62) 34%,rgba(4,16,28,.94));
  font-size:16.5px;color:#fff;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.gal figcaption b{display:block;font-size:16.5px;letter-spacing:.12em;text-transform:uppercase;color:#F0A18C;margin-bottom:6px;}

/* ---------- banda fotografica a piena larghezza ----------
   Serve a far respirare la pagina: una sola frase su una fotografia grande.
   Il velo non è uniforme — scurisce dove cade il testo e lascia in luce il resto. */
.banda{
  position:relative;overflow:hidden;padding:0;
  min-height:clamp(300px,44vw,520px);
  display:grid;align-items:end;background:var(--navy-fondo);
}
.banda>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.banda::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, rgba(4,16,28,.90) 0%, rgba(4,16,28,.62) 38%,
    rgba(4,16,28,.18) 68%, rgba(4,16,28,.30) 100%);
}
.banda .wrap{position:relative;z-index:1;padding-top:90px;padding-bottom:56px;}
.banda .frase{
  margin:0;font-size:clamp(25px,3.4vw,40px);line-height:1.14;font-weight:700;color:#fff;
  letter-spacing:-.032em;max-width:22ch;text-shadow:0 2px 18px rgba(0,0,0,.45);
}

/* ---------- mosaico del metodo: quattro riquadri, poche parole ---------- */
.mosaico{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.tess{
  margin:0;position:relative;overflow:hidden;border-radius:14px;background:#0A2038;
  box-shadow:var(--ombra-1);transition:box-shadow .18s;
}
.tess:hover{box-shadow:var(--ombra-2);}
.tess img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s var(--molla);}
.tess:hover img{transform:scale(1.035);}
.tess figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:96px 26px 24px;
  background:linear-gradient(transparent,rgba(4,16,28,.58) 36%,rgba(4,16,28,.95));
  color:#D8E6F3;font-size:16.5px;line-height:1.45;
}
.tess figcaption .n{
  display:inline-block;font-size:16.5px;font-weight:700;letter-spacing:.14em;
  color:var(--terra-chiaro);margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.tess figcaption b{display:block;font-size:22px;color:#fff;letter-spacing:-.02em;margin-bottom:5px;}

/* ---------- coppia editoriale: due verticali affiancate ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:52px;}
.gal.alto img{aspect-ratio:4/5;}

/* ---------- lavori ---------- */
/* subgrid: figura, etichetta, titolo, testo e richiamo restano allineati fra le schede */
.lavori{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;grid-template-rows:auto auto auto 1fr auto;}
.lav{text-decoration:none;color:inherit;display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0;align-content:start;}
.lav .figura{
  border-radius:12px;overflow:hidden;background:var(--navy);aspect-ratio:16/11;
  box-shadow:var(--ombra-1);transition:box-shadow .18s;
}
.lav .figura img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--molla);}
.lav:hover .figura img{transform:scale(1.045);}
.lav:hover .figura{box-shadow:var(--ombra-2);}
.lav .tipo{
  display:inline-block;justify-self:start;align-self:end;
  font-size:16.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--terra);background:rgba(200,69,45,.10);border-radius:6px;padding:5px 10px;margin:18px 0 10px;
}
.lav h3{font-size:20px;line-height:1.35;margin-bottom:8px;}
.lav p{margin:0 0 14px;font-size:16.5px;color:var(--muto);line-height:1.55;}
.lav:hover h3{color:var(--terra);}
/* il richiamo dice che la scheda si apre davvero: senza, la card sembrava un
   riquadro decorativo */
.lav .vai{
  display:inline-flex;align-items:center;gap:8px;align-self:start;
  font-size:16.5px;font-weight:600;color:var(--terra);letter-spacing:-.005em;
}
.lav .vai svg{width:17px;height:17px;transition:transform .22s var(--molla);}
.lav:hover .vai svg{transform:translateX(4px);}

/* ---------- chi firma ---------- */
.firma{
  display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--raggio);padding:34px 38px;
}
.firma .sigla{
  width:104px;height:104px;border-radius:50%;color:#fff;
  background:linear-gradient(140deg,var(--navy),var(--blu));
  display:grid;place-items:center;font-size:34px;font-weight:700;letter-spacing:.5px;
}
.firma h3{font-size:26px;margin-bottom:6px;}
.firma .ruolo{margin:0 0 18px;font-size:17.5px;color:var(--muto);}
.firma .titoli{display:flex;flex-wrap:wrap;gap:10px 12px;}
.firma .titoli span{
  font-size:16.5px;font-weight:600;color:var(--navy);
  background:var(--tinta);border:1px solid var(--linea);border-radius:999px;padding:7px 15px;
}
.firma .titoli span.spicca{background:rgba(200,69,45,.10);border-color:rgba(200,69,45,.30);color:#9E3421;}

/* squadra: attestati e patentini di chi entra in cantiere */
.squadra{margin-top:34px;}
.squadra .et{
  font-size:16.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muto);margin:0 0 18px;
}
.squadra .griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.squadra .persona{
  background:var(--carta);border:1px solid var(--linea);border-top:3px solid var(--blu);
  border-radius:0 0 12px 12px;padding:20px 22px;
}
.squadra .persona b{display:block;font-size:18px;color:var(--navy);margin-bottom:10px;}
.squadra .persona ul{margin:0;padding:0;list-style:none;}
.squadra .persona li{
  font-size:16.5px;color:var(--muto);line-height:1.45;padding:7px 0 7px 18px;position:relative;
}
.squadra .persona li::before{
  content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:50%;background:var(--blu);
}
.squadra .chiosa{font-size:17px;color:var(--muto);max-width:var(--testo-max);margin:22px 0 0;}

/* ---------- contatto ---------- */
.contatto .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.modulo{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--raggio);padding:30px;}
.modulo .campo{margin-bottom:16px;}
.modulo label{display:block;font-size:16.5px;font-weight:600;color:var(--muto-chiaro);margin-bottom:7px;}
.modulo input,.modulo textarea{
  width:100%;font:inherit;font-size:17px;padding:13px 15px;border-radius:9px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20);
}
.modulo input::placeholder,.modulo textarea::placeholder{color:#7E9AB4;}
.modulo input:focus,.modulo textarea:focus{outline:0;border-color:var(--terra-chiaro);background:rgba(255,255,255,.11);}
.modulo textarea{min-height:118px;resize:vertical;}
.modulo .due{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.modulo .nota{font-size:16.5px;color:#9FB6CC;margin:14px 0 0;}
.modulo .nota a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.recapiti{list-style:none;padding:0;margin:0;}
.recapiti li{padding:18px 0;border-top:1px solid rgba(255,255,255,.14);font-size:18px;color:#fff;}
.recapiti li:first-child{border-top:0;padding-top:0;}
.richiesta-tecnica{margin-top:34px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);}
.richiesta-tecnica .k{display:block;font-size:16.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muto-chiaro);font-weight:700;margin:0 0 14px;}
.richiesta-tecnica .nota{margin:14px 0 0;font-size:16.5px;color:var(--muto-chiaro);}
.recapiti .k{display:block;font-size:16.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muto-chiaro);font-weight:700;margin-bottom:4px;}

/* ---------- piede ----------
   Era una riga sola: marchio a sinistra, cinque link a destra. Ora è la coda
   utile del sito — chi arriva in fondo trova che cosa facciamo e come cercarci. */
footer.piede{background:#05121F;color:#8AA1B7;padding:60px 0 34px;font-size:16.5px;}
footer.piede .alto{
  display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:44px;align-items:start;
}
footer.piede .wm{font-size:26px;}
footer.piede .claim{margin:16px 0 0;font-size:16.5px;line-height:1.55;color:#7E96AE;max-width:34ch;}
footer.piede .col b{
  display:block;font-size:16.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#5F7690;font-weight:700;margin-bottom:14px;
}
footer.piede nav{display:flex;flex-direction:column;gap:11px;}
footer.piede a{color:#8AA1B7;text-decoration:none;transition:color .15s;}
footer.piede a:hover{color:#fff;}
footer.piede .rec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
footer.piede .rec li{line-height:1.5;}
footer.piede .legale{
  border-top:1px solid rgba(255,255,255,.10);margin-top:42px;padding-top:22px;
  font-size:16.5px;color:#8FA8C2;line-height:1.65;
}
@media (max-width:980px){
  footer.piede .alto{grid-template-columns:1fr;gap:34px;}
}

/* ---------- pagina progetto ---------- */
.progetto-testa{
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(28,90,147,.55), transparent 60%),
    var(--navy-fondo);
  color:#fff;padding:74px 0 0;
}
.progetto-testa .briciole{font-size:16.5px;color:var(--muto-chiaro);margin:0 0 22px;}
.progetto-testa .briciole a{text-decoration:none;color:var(--muto-chiaro);}
.progetto-testa .briciole a:hover{color:#fff;}
.progetto-testa h1{font-size:clamp(32px,4.2vw,48px);line-height:1.12;color:#fff;max-width:20ch;margin-bottom:22px;}
.progetto-testa .lead{font-size:20px;color:var(--muto-chiaro);max-width:58ch;margin:0;}
.progetto-testa .copertina{margin:52px 0 0;border-radius:var(--raggio) var(--raggio) 0 0;overflow:hidden;}
/* 21/8 riduceva ogni copertina a una fessura: le fotografie di cantiere sono
   quasi tutte verticali e ci restava dentro il 15% dell'inquadratura. 5/2 dà
   ancora una fascia panoramica, ma si vede che cos'è. */
.progetto-testa .copertina img{width:100%;aspect-ratio:5/2;object-fit:cover;object-position:center 28%;}
.dati{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:34px 0;}
.dati .k{font-size:16.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muto);font-weight:700;margin-bottom:6px;}
.dati .v{font-size:22px;font-weight:700;color:var(--navy);line-height:1.25;}
.dati .v small{display:block;font-size:16.5px;font-weight:400;color:var(--muto);margin-top:4px;}

.testo{max-width:68ch;margin:0 auto;}
.testo h2{font-size:26px;margin:52px 0 16px;line-height:1.25;}
.testo h2:first-child{margin-top:0;}
.testo p{font-size:19px;line-height:1.7;margin:0 0 20px;color:#25384A;}
.testo p b{color:var(--navy);font-weight:600;}
.nota{
  border-left:3px solid var(--terra);background:rgba(200,69,45,.05);
  padding:18px 22px;margin:30px 0;border-radius:0 10px 10px 0;
  font-size:19px;line-height:1.6;color:#25384A;
}
.ruoli{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:34px 0;}
.ruoli h4{margin:0 0 12px;font-size:16.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);}
.ruoli.altrui h4{color:var(--muto);}
.ruoli ul{margin:0;padding:0;list-style:none;}
.ruoli li{font-size:17px;color:var(--muto);padding:10px 0;border-top:1px solid var(--linea);line-height:1.5;}
figure.schema{margin:40px 0;}
figure.schema figcaption{font-size:16.5px;color:var(--muto);margin-top:12px;}
figure.foto-testo{margin:36px 0;border-radius:12px;overflow:hidden;}
/* le foto di cantiere sono verticali: nel corpo del testo si mostrano in taglio
   editoriale 3/2, altrimenti una 900x1200 a piena colonna diventa un muro */
figure.foto-testo img{width:100%;aspect-ratio:3/2;object-fit:cover;}
/* .verticale = scatto in piedi che vale come immagine, non come fascia:
   si lascia respirare in 4/5 invece di ridurlo a una striscia */
figure.foto-testo.verticale img{aspect-ratio:4/5;object-position:center 35%;}
figure.foto-testo figcaption{font-size:16.5px;color:var(--muto);margin-top:12px;padding:0 2px;}

/* ---------- pagina marchio ---------- */
.icone{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:720px;}
.ico{text-align:center;}
.ico .palco{background:var(--tinta);border-radius:12px;padding:38px;display:grid;place-items:center;}
.ico .palco.scuro{background:var(--navy);}
.ico .nome{font-size:16.5px;font-weight:600;color:var(--navy);margin-top:14px;}
.ico .desc{font-size:16.5px;color:var(--muto);margin-top:4px;line-height:1.45;}
.scala{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;padding:32px;background:var(--tinta);border-radius:12px;}
.scala .u{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:16.5px;color:var(--muto);}
.avatar-prova{display:flex;gap:24px;flex-wrap:wrap;}
.avatar-prova .card{width:290px;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#fff;}
.avatar-prova .cover{height:62px;background:linear-gradient(120deg,#0B2A4A,#1C5A93);}
.avatar-prova .av{margin:-32px 0 0 18px;width:64px;height:64px;border-radius:50%;border:3px solid #fff;overflow:hidden;background:#fff;}
.avatar-prova .av.quadro{border-radius:14px;}
.avatar-prova .info{padding:10px 18px 20px;}
.avatar-prova .info b{display:block;font-size:16.5px;color:var(--navy);}
.avatar-prova .info span{font-size:16.5px;color:var(--muto);}
.colori{display:flex;gap:14px;flex-wrap:wrap;}
.colori .c{width:150px;}
.colori .c i{display:block;height:70px;border-radius:10px;border:1px solid var(--linea);}
.colori .c b{display:block;font-size:16.5px;color:var(--navy);margin-top:10px;}
.colori .c code{font-size:16.5px;color:var(--muto);}

/* ---------- indice interno ---------- */
.schede{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.scheda{
  display:block;text-decoration:none;color:inherit;background:var(--carta);
  border:1px solid var(--linea);border-top:3px solid var(--navy);border-radius:0 0 12px 12px;padding:24px;
}
.scheda .num{font-size:16.5px;font-weight:700;color:var(--terra);letter-spacing:.14em;}
.scheda h3{font-size:21px;margin:10px 0 8px;}
.scheda p{margin:0;font-size:16.5px;color:var(--muto);line-height:1.55;}
.scheda:hover h3{color:var(--terra);}
.scheda:hover{box-shadow:0 12px 28px rgba(11,42,74,.10);}

@media (max-width:980px){
  body{font-size:17px;}
  section{padding:70px 0;}
  /* l'eroe si impila: prima la fotografia (è lei che apre), poi il testo */
  .eroe-griglia{grid-template-columns:1fr;min-height:0;}
  .eroe-testo{
    order:2;padding:36px 22px 56px;
    padding-left:max(22px, calc((100vw - var(--max)) / 2 + 22px));
  }
  .eroe-foto{order:1;}
  .eroe-foto img{aspect-ratio:3/2;height:auto;object-position:center 40%;}
  .eroe-foto::before{
    background:linear-gradient(180deg, rgba(7,27,48,.55) 0%, transparent 34%,
      rgba(7,27,48,.10) 70%, var(--navy-fondo) 100%);
  }
  .eroe-foto figcaption{padding:70px 22px 18px;}
  .eroe h1{max-width:none;}
  .elenco,.servizi,.lavori,.galleria,.ruoli,.schede,.affianco,.squadra .griglia,
  .mosaico,.duo,.contatto .wrap,.confronto .riga,.modulo .due{grid-template-columns:1fr;}
  .banda{min-height:0;}
  .banda .wrap{padding-top:200px;padding-bottom:40px;}
  .occhiello{margin-top:46px;}
  .lavori{grid-template-rows:none;}
  .lav{grid-row:auto;grid-template-rows:none;display:block;}
  .elenco,.lavori,.galleria,.schede,.contatto .wrap,.affianco,.mosaico,.duo{gap:24px;}
  .servizi{gap:16px;}
  .dati{grid-template-columns:1fr 1fr;gap:22px;}
  .icone{grid-template-columns:1fr 1fr;}
  .nav menu{display:none;}
  .apri-menu{display:flex;}
  .nav.aperto menu{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:74px;left:0;right:0;
    background:rgba(7,27,48,.97);backdrop-filter:blur(14px);
    padding:14px 32px 24px;border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 40px rgba(0,0,0,.35);
  }
  .nav.aperto menu a{display:block;padding:13px 0;font-size:18px;}
  .nav.aperto menu .btn{margin-top:12px;text-align:center;padding:14px 24px;}
  .firma{grid-template-columns:1fr;gap:22px;text-align:left;}
  .confronto .riga{gap:8px;padding:16px 0;}
  .confronto .riga.capo{display:none;}
  /* su una colonna sola i pallini non bastano: torna l'etichetta parlata */
  .confronto .sx,.confronto .dx{padding-left:0;}
  .confronto .sx::before,.confronto .dx::before{
    position:static;width:auto;height:auto;border:0;border-radius:0;
    background:none;box-shadow:none;
  }
  .confronto .sx::before{content:"Fornitore — ";font-weight:600;color:var(--muto-chiaro);}
  .confronto .dx::before{content:"Noi — ";font-weight:700;color:var(--terra-chiaro);}
  .gal img{aspect-ratio:4/3;}
}

/* telefoni: sotto i 560px l'a-capo fisso del titolo non entra più — si lascia
   andare a capo da solo e si stringono i respiri */
@media (max-width:560px){
  .wrap{padding:0 22px;}
  section{padding:56px 0;}
  .eroe h1{font-size:clamp(30px,9vw,36px);}
  .eroe h1 br{display:none;}
  .eroe .lead{font-size:19px;}
  .banda .frase{max-width:none;}
  .banda .wrap{padding-top:150px;}
  .tess figcaption{padding:76px 20px 20px;}
  .tess figcaption b{font-size:20px;}
  .pastiglie li{font-size:16.5px;}
  h2.titolo{font-size:clamp(26px,7.4vw,30px);}
  p.guida{font-size:18.5px;margin-bottom:38px;}
  .progetto-testa h1{font-size:clamp(27px,8vw,34px);}
  .dati{grid-template-columns:1fr 1fr;gap:18px;}
  .voce{padding:20px;}
  .firma{padding:26px 22px;}
  .modulo{padding:22px;}
  .nav.aperto menu{padding:14px 22px 22px;}
}

/* ---------- il pulsante del modulo e un <button> vero: senza questa riga
   userebbe il carattere di sistema del browser, non quello del sito ---------- */
button.btn{font-family:inherit;}
footer.piede .legale a{color:#C9D8E6;text-decoration:underline;text-underline-offset:3px;}

/* ---------- i numeri (ordine di Marco 11/10/2026): tre cifre grandi, ognuna col suo colore ---------- */
.numeri{background:var(--navy-fondo);border-top:1px solid rgba(255,255,255,.08);}
.numeri .wrap{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-top:38px;padding-bottom:38px;
}
.numeri .cifra{padding:6px 32px;border-left:1px solid rgba(255,255,255,.14);}
.numeri .cifra:first-child{border-left:0;padding-left:0;}
.numeri .gr{
  display:block;font-size:clamp(40px,5vw,60px);font-weight:800;line-height:1;letter-spacing:-.035em;
  color:var(--terra-chiaro);margin-bottom:10px;
}
.numeri .cifra.blu .gr{color:var(--blu-chiaro);}
.numeri .cifra.verde .gr{color:#6FD1A0;}
.numeri .gr small{font-size:.42em;font-weight:700;letter-spacing:0;color:#fff;margin-right:.35em;}
.numeri .dida{display:block;font-size:18px;line-height:1.4;color:#DCE8F4;}

/* ---------- referenze: impianti scelti, non elenchi di clienti ---------- */
.ref-gruppi{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:8px;}
.ref-gruppo{
  background:var(--carta);border:1px solid var(--bordo);border-top:4px solid var(--terra);
  border-radius:0 0 var(--raggio) var(--raggio);padding:26px 26px 20px;box-shadow:var(--ombra-1);
}
.ref-gruppo.blu{border-top-color:var(--blu);}
.ref-gruppo.verde{border-top-color:var(--verde);}
.ref-gruppo.ambra{border-top-color:var(--ambra);}
.ref-gruppo h3{font-size:21px;margin:0 0 4px;}
.ref-gruppo .sotto{margin:0 0 14px;font-size:16.5px;color:var(--muto);line-height:1.45;}
.ref-gruppo ul{list-style:none;margin:0;padding:0;}
.ref-gruppo li{padding:11px 0;border-top:1px solid var(--linea);font-size:17px;line-height:1.4;color:var(--navy);}
.ref-gruppo li b{font-weight:700;}
.ref-gruppo li span{display:block;font-size:16.5px;color:var(--muto);margin-top:2px;}

/* ---------- feedback dei clienti: la sezione esiste solo se c'è almeno un parere con consenso ---------- */
.pareri{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.parere{
  margin:0;background:var(--carta);border:1px solid var(--bordo);border-left:5px solid var(--terra);
  border-radius:var(--raggio);padding:28px 28px 22px;box-shadow:var(--ombra-1);
}
.parere blockquote{margin:0 0 16px;font-size:19px;line-height:1.6;color:#25384A;}
.parere figcaption{font-size:16.5px;line-height:1.4;color:var(--muto);}
.parere figcaption b{display:block;color:var(--navy);font-size:17px;}

@media (max-width:980px){
  .numeri .wrap{grid-template-columns:1fr;padding-top:26px;padding-bottom:26px;}
  .numeri .cifra{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:18px 0;}
  .numeri .cifra:first-child{border-top:0;padding-top:0;}
  .ref-gruppi{grid-template-columns:1fr;}
}

/* pagina Cookie: tabella leggibile anche su telefono */
.tabella{overflow-x:auto;margin:16px 0}
.tabella table{width:100%;border-collapse:collapse;font-size:16.5px}
.tabella th,.tabella td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabella th{background:var(--tinta);color:var(--navy)}